Bootstrap - Pagination
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 = "#">«</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 = "#">«</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 = "#">«</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 = "#">»</a></li> </ul>
States
The following example demonstrates the use of class .disabled, .active discussed in the above table −
<ul class = "pagination"> <li><a href = "#">«</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 = "#">»</a></li> </ul>
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 = "#">«</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 = "#">»</a></li> </ul> <br> <ul class = "pagination"> <li><a href = "#">«</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 = "#">»</a></li> </ul> <br> <ul class = "pagination pagination-sm"> <li><a href = "#">«</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 = "#">»</a></li> </ul>
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 = "#">← Older</a></li> <li class = "next"><a href = "#">Newer →</a></li> </ul> |
| .disabled | Add this class to get a muted look. |
<ul class = "pager"> <li class = "previous disabled"><a href = "#">← Older</a></li> <li class = "next"><a href = "#">Newer →</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>
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 = "#">← Older</a></li> <li class = "next"><a href = "#">Newer →</a></li> </ul>
States
The following example demonstrates the use of class .disabled discussed in the above table −
<ul class = "pager"> <li class = "previous disabled"><a href = "#">← Older</a></li> <li class = "next"><a href = "#">Newer →</a></li> </ul>
