title: Pagination CSS style (Bootstrap)
body: <p>I use bootstrap pagination style but I don't know why it doesn't work as it should be (It sticks to the left and some parts are lower than others). Here is my code:</p>
  
  <pre><code>&lt;section class="admin" id="admin-products"&gt;
    &lt;div&gt;
      &lt;ul ng-if="orders.pager.pages.length" class="pagination"&gt;
          &lt;li ng-class="{disabled:orders.pager.currentPage === 1}"&gt;
              &lt;a ng-click="orders.setPage(1)"&gt;First&lt;/a&gt;
          &lt;/li&gt;
          &lt;li ng-class="{disabled:orders.pager.currentPage === 1}"&gt;
              &lt;a ng-click="orders.setPage(orders.pager.currentPage - 1)"&gt;Previous&lt;/a&gt;
          &lt;/li&gt;
          &lt;li ng-repeat="page in orders.pager.pages" ng-class="{active:orders.pager.currentPage === page}"&gt;
              &lt;a ng-click="orders.setPage(page)"&gt;{{page}}&lt;/a&gt;
          &lt;/li&gt;               
          &lt;li ng-class="{disabled:orders.pager.currentPage === orders.pager.totalPages}"&gt;
              &lt;a ng-click="orders.setPage(orders.pager.currentPage + 1)"&gt;Next&lt;/a&gt;
          &lt;/li&gt;
          &lt;li ng-class="{disabled:orders.pager.currentPage === orders.pager.totalPages}"&gt;
              &lt;a ng-click="orders.setPage(orders.pager.totalPages)"&gt;Last&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>In my project, there are other CSS files which I don't know which one could be responsible for this issue. The pagination looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/K8hpu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/K8hpu.png" alt="Pagination"></a></p>
  
  <p>I think something is wrong with li tag. For example, when I put green background color for the first li it looks like this (the background appears on the right side.):</p>
  
  <p><a href="https://i.stack.imgur.com/xQtmS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xQtmS.png" alt="li"></a></p>
  
  <p>Sample code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;style&gt;
        .admin {
        width: 100%;
        max-width: 1060px;
        margin: auto;
        padding-top: 150px;
        padding-bottom: 500px;
        direction: rtl;
        text-align: right; 
        }
        .admin .navigation {
        text-align: center;
        margin: auto;
        display: inline-block;
        padding: 15px;
        border-bottom: 1px solid #c1c1c1;
        margin-bottom: 40px; }
        .admin .navigation a {
        text-decoration: none;
        color: #8e8e8e;
        cursor: pointer;
        font-weight: 300;
        font-size: 12px; }
        .admin .navigation a.active {
        color: #5C5C5C;
        font-weight: 700; }
        .admin .navigation span {
        color: #9B9B9B;
        padding: 10px; }
        .admin table {
        width: 100%;
        direction: rtl;
        border: 1px solid #ebecf0;
        text-align: center; }
        .admin table thead {
        background: #f8fafc;
        color: #8291a6;
        border-bottom: 1px solid #ebecf0;
        font-size: 10px; }
        .admin table thead th {
        padding: 7px 0; }
        .admin table tbody {
        font-size: 12px;
        color: #616161; }
        .admin table tbody tr {
        background: white;
        border-bottom: 1px solid #ebecf0; }
        .admin table tbody tr td {
        font-size: 11px;
        font-weight: 300;
        vertical-align: middle;
        padding: 5px; }
        .admin table tbody tr td .name {
        display: inline-block;
        padding-right: 10px; }
        .admin table tbody tr td .photo {
        width: 50px;
        vertical-align: middle; }
        .admin h1 {
        font-size: 30px;
        line-height: 1.5; }
        .admin h3 {
        font-size: 18px;
        line-height: 1.5;
        display: inline-block;
        margin-right: 10px; }
        .admin select {
        font-size: 15px;
        height: 38px; }
        .admin label {
        display: block;
        margin: 10px; }
        .admin input[type=text] {
        display: inline-block;
        border: 0px;
        line-height: 20px;
        margin: 10px 0px;
        font-size: 15px;
        padding: 7px 5px;
        width: 400px;
        font-family: IRANSans ,'PT Sans', sans-serif !important; }
        .admin button {
        border: 0;
        margin: 10px 0;
        border-radius: 5px;
        color: #fff;
        font-size: 15px;
        padding: 5px 10px;
        font-weight: 300; }
        .admin button.green {
        background: #8BC34A; }
        .admin button.red {
        background: #F44336;
        font-size: 13px; }
        .admin .submission {
        direction: ltr;
        text-align: left;
        line-height: 2;
        background: #fff;
        padding: 10px; }
        .admin .submission ul {
        margin-bottom: 100px; }
        .admin .submission ul li {
        font-size: 13px; }
        .admin .submission ul li span {
        background: #282828;
        color: #fff;
        padding: 0px 11px;
        margin-right: 10px;  }
      &lt;/style&gt;
      &lt;section class="admin persion" id="admin-products"&gt;
        &lt;div&gt;
  
          &lt;ul ng-if="orders.pager.pages.length" class="pagination"&gt;
  
            &lt;li ng-class="{disabled:orders.pager.currentPage === 1}"&gt;
                              &lt;a ng-click="orders.setPage(1)"&gt;First&lt;/a&gt;
  
            &lt;/li&gt;
  
            &lt;li ng-class="{disabled:orders.pager.currentPage === 1}"&gt;
                              &lt;a ng-click="orders.setPage(orders.pager.currentPage - 1)"&gt;Previous&lt;/a&gt;
  
            &lt;/li&gt;
  
            &lt;li ng-repeat="page in orders.pager.pages" ng-class="{active:orders.pager.currentPage === page}"&gt;
                              &lt;a ng-click="orders.setPage(page)"&gt;{{page}}&lt;/a&gt;
  
            &lt;/li&gt;
  
  
            &lt;li ng-class="{disabled:orders.pager.currentPage === orders.pager.totalPages}"&gt;
                              &lt;a ng-click="orders.setPage(orders.pager.currentPage + 1)"&gt;Next&lt;/a&gt;
  
            &lt;/li&gt;
  
            &lt;li ng-class="{disabled:orders.pager.currentPage === orders.pager.totalPages}"&gt;
                              &lt;a ng-click="orders.setPage(orders.pager.totalPages)"&gt;Last&lt;/a&gt;
  
            &lt;/li&gt;
  
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/section&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  &lt;script&gt;
    $scope.orders = {
      pager: {
          currentPage:1,
          endIndex:29,
          endPage:4,
          pageSize:30,
          pages: [1,2,3,4],
          length:4,
          startIndex:0,
          startPage:1,
          totalItems:100,
          totalPages:4
      }
    }
  &lt;/script&gt;
  </code></pre>