Pagination

Provide pagination links for your site or app with the multi-page pagination component, or the simpler pager alternative.

Use class .active on <li> tag for active page and class .disabled for disabled page.

Example:

• 1
• 2
• 3
• 4
• 5

Code:

      
        <ul class="pagination">
          <li><a href="#" class="glyphicon glyphicon-pagination-first"></a></li>
          <li><a href="#" class="glyphicon glyphicon-pagination-prev"></a></li>
          <li><a href="#">1</a></li>
          <li class="active"><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
          <li><a href="#">5</a></li>
          <li><a href="#" class="glyphicon glyphicon-pagination-next"></a></li>
          <li><a href="#" class="glyphicon glyphicon-pagination-last"></a></li>
        </ul>
      
      

For use in tables nest the code in <td> of <tfoot> in table

Append class .pull-left for left-aligned and .pull-right for right-aligned.

Example of pagination in table:

Code for right-aligned pagination:

        
        <div class="table-wrapper">
          <div class="table-content">
            <table class="table table-striped">
              <thead>
              <tr>
                <th>
                  Column 1
                </th>
                <th>
                  Column 2
                </th>
                <th>
                  Column 3
                </th>
              </tr>
              </thead>
              <tbody>
              <tr>
                <td>
                  Cell 1
                </td>
                <td>
                  Cell 2
                </td>
                <td>
                  Cell 3
                </td>
              </tr>
              <tr>
                <td>
                  Cell 4
                </td>
                <td>
                  Cell 5
                </td>
                <td>
                  Cell 6
                </td>
              </tr>
              <tr>
                <td>
                  Cell 7
                </td>
                <td>
                  Cell 8
                </td>
                <td>
                  Cell 9
                </td>
              </tr>
              </tbody>
            </table>
          </div>
          <div class="table-footer">
            <ul class="pagination pull-right">
              <li><span class="glyphicon glyphicon-pagination-first"></span></li>
              <li class="disabled"><span class="glyphicon glyphicon-pagination-prev"></span></li>
              <li class="active"><a href="#">1</a></li>
              <li><a href="#">2</a></li>
              <li><a href="#">3</a></li>
              <li><a href="#">4</a></li>
              <li><a href="#">5</a></li>
              <li><a href="#" class="glyphicon glyphicon-pagination-next"></a></li>
              <li><a href="#" class="glyphicon glyphicon-pagination-last"></a></li>
            </ul>
          </div>
        </div>