Hello folks! welcome back to a new edition of our tutorial on Bootstrap. In this tutorial post, we will be discussing about Bootstrap Pagination.
Pagination, an unordered list is handled by Bootstrap like any other interface elements.
Pagination, an unordered list is handled by Bootstrap like any other interface elements.
Pagination
Following table below 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 illustrates the use of the .pagination class 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>
Output
When the above example is executed, it will produce the following result -
READ: Bootstrap | Breadcrumb
States
The following example illustrates the use of .disabled, .active class as 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>
Output
When the above example is executed, it will produce the following result -
Sizing
The following example illustrates the use of .pagination-* class for sizing 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>
Output
When the above example is executed, it will produce the following result -
READ: Bootstrap | Navigation
Pager
If you need to make simple pagination links that go beyond text, the pager can function quite well. Like the pagination links, pager is an unordered list. The links are centered by default. Following table list the classes that 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 illustrates the use of .pager class discussed in the above table -
<ul class = "pager"> <li><a href = "#">Previous</a></li> <li><a href = "#">Next</a></li> </ul>
Output
When the above example is executed, it will produce the following result -
Aligned Links
The following example illustrates the use of of classes for alignment, .previous, .next as 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>
Output
When the above example is executed, it will produce the following result -
Pager Status
The following example below demonstrates the use of .disabled class 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>
Output
When the above example is executed, it will produce the following result -
READ: Bootstrap | Navbar
Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial guide, we are going to be studying about the Bootstrap Labels.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.