Pagination is useful when a website has a lot of pages. It allows us to navigate between the pages easily. Bootstrap made it easy to create pagination with its predefined classes.
In this shot, we will learn how to create Bootstrap 4 Pagination and everything associated with it.
<ul class="pagination"> <li class="page-item"><a class="page-link" href="#"></a></li> </ul>
The three predefined classes that make pagination easy to implement are:
An unordered list is created with link tags –
<a href=""></a> – , included in each
li tag . The
.pagination class is added to the
ul while the
.page-item is added to each
.page-link is added to each links. The anchor tags (
<a href=""></a>) contains the link to the desired page.
Just like how we specify the
.active in our navigation bar to highlight the current link we are on, we use the same class to highlight the current page we are in pagination.
.active class is added to the
li containing the page link.
<li class="page-item"><a class="page-link active" href="page2.html"> page 2 </a></li>
.disabled class is used to make a link un-clickable. It is used just like the
<li class="page-item"><a class="page-link disabled" href="page2.html"> page 2 </a></li>
Note: The link above will be un-clickable.
The utility classes are used to change the alignment of the pagination.
.justify-content-center class is added to the
ul to move the pagination to the center.
.justify-content-end is added to the
ul to right-aligned the pagination.
Pagination blocks can be sized using the
.pagination-lg class for larger blocks and the
.pagination-sm class for smaller blocks. Both classes are added to the
ul to get the desired blocks.
<h1>. It is used to display the heading, which gives detail on the topic content of the page
<p>. It is used to describe the content that follows.
.pagination: Which sets up the pagination.
.pagination-lg: Which gives the pagination large blocks.
justify-content-center: Which center-align the pagination.
page-itemincluded in each
.page-linkincluded in each
.activeclass, which highlights the current page.
.disabledclass, which inactivates the link and makes it unclickable.
Bootstrap pagination is very useful and easy to create. It makes the pages of a website accessible by providing one-click navigation to any desired page at the bottom of each page. Pagination can efficiently improve our website accessibility.
View all Courses