Article Directory
Bootstrap pagination
This chapter will explain the pagination features supported by Bootstrap. Pagination is an unordered list, and Bootstrap handles pagination like other interface elements.
Pagination
The following table lists the classes provided by Bootstrap to handle pagination.
| Class | describe | sample code |
|---|---|---|
| .pagination | Add this class to display pagination on the 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 to define a non-clickable link 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 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 use of the class .pagination discussed in the table above:
<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>
running result
pagination status
The following example demonstrates the usage of the classes .disabled, .active discussed in the table above:
<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>
running result
page size
The following example demonstrates the use of the class .pagination-* discussed in the table above:
<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>
running result
Pager
If you want to create a simple pagination link to provide user navigation, you can do so by turning pages. Like pagination links, pagination is an unordered list. By default, links are centered. The following table lists the classes that Bootstrap handles page turning.
| Class | describe | sample code |
|---|---|---|
| .pager | Add this class to get page turning links. | <ul class="pager"> <li><a href="#">Previous</a></li> <li><a href="#">Next</a></li></ul> |
| .previous, .next | Use class .previous to align links to the left and .next to align links to the right. | <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 faded look. | <ul class="pager"> <li class="previous disabled"><a href="#">← Older</a></li> <li class="next"><a href="#">Newer →</a></li></ul> |
default page flip
The following example demonstrates the use of the class .pager discussed in the table above:
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
running result
aligned links
The following example demonstrates the usage of the classes .previous, .next discussed in the table above:
<ul class="pager">
<li class="previous"><a href="#">← Older</a></li>
<li class="next"><a href="#">Newer →</a></li>
</ul>
running result
page turning status
The following example demonstrates the use of the class .disabled discussed in the table above:
<ul class="pager">
<li class="previous disabled"><a href="#">← Older</a></li>
<li class="next"><a href="#">Newer →</a></li>
</ul>
running result
paging
| kind | describe |
|---|---|
| .pager | A simple pagination with links center aligned. |
| .previous | The button style of the previous page in .pager, left-aligned |
| .next | The button style of the next page in .pager, right aligned |
| .disabled | disable link |
| .pagination | pagination link |
| .pagination-lg | Larger pagination links |
| .pagination-sm | Smaller size pagination links |
| .disabled | disable link |
| .active | Current page link style |