Any website with multiple pages can employ the pagination feature to make the navigation easy for the user.
Here, we will learn about the features that Bootstrap has to offer for the pagination elements.
Bootstrap Basic Pagination
As told before, pagination helps the user to navigate through the different pages of the website.
The current page number is highlighted with a different color and the series is preceded and followed by two links for ‘Next’ and ‘Previous’.
A basic bootstrap pagination can be created by adding a .pagination class to the <ul> element.
For each <li> item for this, we add the .page-item class and also a .page-link class class for all the links in the <li>.
The below code illustrates the creation of basic pagination
1 2 3 4 5 6 7 | <ul class="pagination"> <li class="page-item"><a class="page-link" href="#">Previous</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">Next</a></li> </ul> |
Active State
The highlighting of the current page, you can use the .active class.
1 2 3 4 5 6 7 | <ul class="pagination"> <li class="page-item"><a class="page-link" href="#">Previous</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item active"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">Next</a></li> </ul> |
Disabled State
Sometimes some page-link is to be disabled due to some temporary or conditional unavailability.
Bootstrap can make this possible with the help of the utility class .disabled.
See the code below:
1 2 3 4 5 6 7 | <ul class="pagination"> <li class="page-item disabled"><a class="page-link" href="#">Previous</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">Next</a></li> </ul> |
Bootstrap Pagination Sizing
The classes used to regularize the sizes of the Pagination blocks are as following:
- .pagination-lg: For larger pagination block size
- .pagination-sm: For smaller pagination block size
1 2 3 4 5 6 7 | <ul class="pagination pagination-lg"> <li class="page-item"><a class="page-link" href="#">Previous</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">Next</a></li> </ul> |
1 2 3 4 5 6 7 | <ul class="pagination pagination-sm"> <li class="page-item"><a class="page-link" href="#">Previous</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">Next</a></li> </ul> |
Bootstrap Pagination Alignment
There are utility classes that will help controlling the alignment of the pagination:
- pagination justify-content-center: To
centre align the pagination blocks - pagination justify-content-end: To right align the pagination blocks
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!-- Default (left-aligned) --> <ul class="pagination" style="margin:20px 0"> <li class="page-item">...</li> </ul> <!-- Center-aligned --> <ul class="pagination justify-content-center" style="margin:20px 0"> <li class="page-item">...</li> </ul> <!-- Right-aligned --> <ul class="pagination justify-content-end" style="margin:20px 0"> <li class="page-item">...</li> </ul> |
Bootstrap Breadcrumbs
Breadcrumbs are a variant of Pagination. Here, instead of page numbers, we have a series of pages that come under a similar category and navigation map.
The breadcrumbs are generally, hierarchical pages that you can directly access using the given links.
Mostly, these links are used to navigate back in
The two utility classes for the same are:
- .breadcrumb: Used with the <ul> element in place of .pagination class
- .breadcrumb-item: Used with the <li> element in place of .page-item class
1 2 3 4 5 6 | <ul class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Photos</a></li> <li class="breadcrumb-item"><a href="#">Summer 2017</a></li> <li class="breadcrumb-item"><a href="#">Italy</a></li> <li class="breadcrumb-item active">Rome</li> </ul> |