Bootstrap Pagination


Advertisements


This chapter discusses about the pagination feature that Bootstrap supports. Pagination, an unordered list is handled by Bootstrap like a lot of other interface elements.

Pagination

The following table lists the classes that Bootstrap provides to handle pagination.

Class Description Sample code
.pagination Add this class to get the pagination on your page.
<ul class="pagination">
  <li><a href="#">&laquo;</a></li>
  <li><a href="#">1</a></li>
  .......
</ul>
.disabled, .active You can customize links by using .disabled for unclickable links and .active to indicate the current page.
<ul class="pagination">
  <li class="disabled"><a href="#">&laquo;</a></li>
  <li class="active"><a href="#">1<span class="sr-only">(current)</span></a></li>
  .......
</ul>
.pagination-lg, .pagination-sm Use these classes to get different size items.
<ul class="pagination pagination-lg">...</ul>
<ul class="pagination">...</ul>
<ul class="pagination pagination-sm">...</ul>

Default Pagination

The following example demonstrates the use of class .pagination discussed in the above table:

<ul class="pagination">
  <li><a href="#">&laquo;</a></li>
  <li><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="#">&raquo;</a></li>
</ul>
Pagination Demo

States

The following example demonstrates the use of class .disabled, .active discussed in the above table:

<ul class="pagination">
  <li><a href="#">&laquo;</a></li>
  <li class="active"><a href="#">1</a></li>
  <li class="disabled"><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="#">&raquo;</a></li>
</ul>
Pagination State Demo

Sizing

The following example demonstrates the use of classes for sizing, .pagination-* discussed in the above table:

<ul class="pagination pagination-lg">
  <li><a href="#">&laquo;</a></li>
  <li><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="#">&raquo;</a></li>
</ul><br>
<ul class="pagination">
  <li><a href="#">&laquo;</a></li>
  <li><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="#">&raquo;</a></li>
</ul><br>
<ul class="pagination pagination-sm">
 <li><a href="#">&laquo;</a></li>
  <li><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="#">&raquo;</a></li>
</ul>
Pagination Size Demo

Pager

If you need to create simple pagination links that go beyond text, the pager can work quite well. Like the pagination links, the pager is an unordered list. By default the links are centered. The following table lists the classes Bootstrap provides for pager.

Class Description Sample code
.pager Add this class to get the pager links.
<ul class="pager">
  <li><a href="#">Previous</a></li>
  <li><a href="#">Next</a></li>
</ul>
.previous, .next Use class .previous to left align and .next to right-align the links.
<ul class="pager">
  <li class="previous"><a href="#">&larr; Older</a></li>
  <li class="next"><a href="#">Newer &rarr;</a></li>
</ul>
.disabled Add this class to get a muted look.
<ul class="pager">
  <li class="previous disabled"><a href="#">&larr; Older</a></li>
  <li class="next"><a href="#">Newer &rarr;</a></li>
</ul>

Default Pager

The following example demonstrates the use of class .pager discussed in the above table:

<ul class="pager">
  <li><a href="#">Previous</a></li>
  <li><a href="#">Next</a></li>
</ul>
Pager Demo

Aligned Links

The following example demonstrates the use of classes for alignment, .previous, .next discussed in the above table:

<ul class="pager">
  <li class="previous"><a href="#">&larr; Older</a></li>
  <li class="next"><a href="#">Newer &rarr;</a></li>
</ul>
Pager Aligned Links Demo

States

The following example demonstrates the use of class .disabled discussed in the above table:

<ul class="pager">
  <li class="previous disabled"><a href="#">&larr; Older</a></li>
  <li class="next"><a href="#">Newer &rarr;</a></li>
</ul>
Pager State Demo

Advertisements