Bootstrap Pagination
This chapter will explain the pagination features supported by Bootstrap. Pagination is an unordered list, and Bootstrap handles it like any other interface element.
Pagination
The following table lists the classes provided by Bootstrap for handling pagination.
| Class | Description | Example Code |
|---|---|---|
| .pagination | Add this class to display pagination on the page. | <ul class="pagination"><br> <li><a href="#">«</a></li><br> <li><a href="#">1</a></li><br> .......<br></ul> |
| .disabled, .active | You can customize links by using .disabled to define unclickable links and .active to indicate the current page. | <ul class="pagination"><br> <li class="disabled"><a href="#">«</a></li><br> <li class="active"><a href="#">1<span class="sr-only">(current)</span></a></li><br> .......<br></ul> |
| .pagination-lg, .pagination-sm | Use these classes to get items of different sizes. | <ul class="pagination pagination-lg">...</ul><br><ul class="pagination">...</ul><br><ul class="pagination pagination-sm">...</ul> |
Default Pagination
The following example demonstrates the usage of the .pagination class discussed in the table above:
Example
<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>
The result is as follows:
Pagination States
The following example demonstrates the usage of the .disabled and .active classes discussed in the table above:
Example
<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>
The result is as follows:
Pagination Sizes
The following example demonstrates the usage of the .pagination-* classes discussed in the table above:
Example
<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>
Result as shown below:
Pager
If you want to create a simple pagination link for users to navigate, you can achieve it through pager. Like pagination links, pager is also an unordered list. By default, the links are centered. The following table lists the classes Bootstrap uses to handle pager.
| Class | Description | Example Code |
|---|---|---|
| .pager | Add this class to get pager links. | <ul class="pager"><br> <li><a href="#">Previous</a></li><br> <li><a href="#">Next</a></li><br></ul> |
| .previous, .next | Use class .previous to align the link to the left, use .next to align the link to the right. | <ul class="pager"><br> <li class="previous"><a href="#">← Older</a></li><br> <li class="next"><a href="#">Newer →</a></li><br></ul> |
| .disabled | Add this class to set the corresponding button as disabled. | <ul class="pager"><br> <li class="previous disabled"><a href="#">← Older</a></li><br> <li class="next"><a href="#">Newer →</a></li><br></ul> |
Default Pager
The following example demonstrates the use of the class .pager discussed in the table above:
Example
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
Result as shown below:
Aligned Links
The following example demonstrates the use of the class .previous, .next discussed in the table above:
Example
<ul class="pager">
<li class="previous"><a href="#">← Older</a></li>
<li class="next"><a href="#">Newer →</a></li>
</ul>
Result as shown below:
Pager State
The following example demonstrates the use of the class .disabled discussed in the table above:
Example
<ul class="pager">
<li class="previous disabled"><a href="#">← Older</a></li>
<li class="next"><a href="#">Newer →</a></li>
</ul>
Result as shown below:
More Pagination Examples
| Class | Description | Example |
|---|---|---|
| .pager | A simple pagination link, links centered. | Try it |
| .previous | Previous button style in .pager, left aligned | Try it |
| .next | Next button style in .pager, right aligned | Try it |
``` | .disabled | Disabled Link | Try it | | .pagination | Pagination Links | Try it | | .pagination-lg | Larger Sized Pagination Links | Try it | | .pagination-sm | Smaller Sized Pagination Links | Try it | | .disabled | Disabled Link | Try it | | .active | Current Page Link Style | Try it |