Bootstrap Pagination
This chapter will explain the pagination features supported by Bootstrap. Pagination is an unordered list, and Bootstrap handles pagination the same way it handles other interface elements.
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"> <li><a href="../index.html">«</a></li> <li><a href="../index.html">1</a></li> ....... </ul> |
| .disabled, .active | You can customize links by using.disabledto define non-clickable links, and using.activeto indicate the current page. |
<ul class="pagination"> <li class="disabled"><a href="../index.html">«</a></li> <li class="active"><a href="../index.html">1<span class="sr-only">(current)</span></a></li> ....... </ul> |
| .pagination-lg, .pagination-sm | Use these classes to get items of different sizes. |
<ul class="pagination pagination-lg">...</ul> <ul class="pagination">...</ul> <ul class="pagination pagination-sm">...</ul> |
Default Pagination
The following example demonstrates the classes discussed in the above table.paginationusage:
Example
Try it »
The result is shown below:
Pagination States
The following example demonstrates the classes discussed in the above table.disabled、.activeusage:
Example
Try it »
The result is shown below:
Pagination Sizing
The following example demonstrates the classes discussed in the above table.pagination-*usage:
Example
Try it »
The result is shown below:
Pager
If you want to create a simple pagination link to provide navigation for users, you can use a pager. Like pagination links, a pager is also an unordered list. By default, links are centered. The following table lists the classes Bootstrap provides for handling pager.
| Class | Description | Example code |
|---|---|---|
| .pager | Add this class to get pager links. |
<ul class="pager"> <li><a href="../index.html">Previous</a></li> <li><a href="../index.html">Next</a></li> </ul> |
| .previous, .next | Use class.previousto align links to the left, use.nextto align links to the right. |
<ul class="pager"> <li class="previous"><a href="../index.html">← Older</a></li> <li class="next"><a href="../index.html">Newer →</a></li> </ul> |
| .disabled | Add this class to disable the corresponding button. |
<ul class="pager"> <li class="previous disabled"><a href="../index.html">← Older</a></li> <li class="next"><a href="../index.html">Newer →</a></li> </ul> |
Default Pager
The following example demonstrates the classes discussed in the above table.pagerusage:
Example
Try it »
The result is shown below:
Aligned Links
The following example demonstrates the classes discussed in the above table.previous、.nextusage:
Example
Try it »
The result is shown below:
Pager States
The following example demonstrates the classes discussed in the above table.disabledusage:
Example
Try it »
The result is shown below:
More Pagination Examples
| Class | Description | Example |
|---|---|---|
| .pager | A simple pagination link, links are centered. | Try it |
| .previous | The "Previous" button style in .pager, aligned left | Try it |
| .next | The "Next" button style in .pager, aligned right | Try it |
| .disabled | Disable links | Try it |
| .pagination | Pagination links | Try it |
| .pagination-lg | Larger pagination links | Try it |
| .pagination-sm | Smaller pagination links | Try it |
| .disabled | Disable links | Try it |
| .active | Current page link style | Try it |