How to use Bootstrap 4 Pagination

Introduction

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.

How to Create a Bootstrap 4 Pagination

<ul>
<li><a href="#"></a></li>
</ul>

The three predefined classes that make pagination easy to implement are:

• .pagination
• .page-item
• .page-link

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 li and .page-link is added to each links. The anchor tags ( <a href=""></a>) contains the link to the desired page.

The active state

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.

The .active class is added to the li containing the page link.

<li><a href="page2.html"> page 2 </a></li>

The disabled state

The .disabled class is used to make a link un-clickable. It is used just like the .active class.

<li><a href="page2.html"> page 2 </a></li>

Note: The link above will be un-clickable.

Alignment

The utility classes are used to change the alignment of the pagination.

The .justify-content-center class is added to the ul to move the pagination to the center.

Then, the .justify-content-end is added to the ul to right-aligned the pagination.

Sizing the blocks

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.

Explanation

• Line 6: We create an <h1>. It is used to display the heading, which gives detail on the topic content of the page
• Line 7: We include paragraph <p>. It is used to describe the content that follows.
• Line 9: A pagination was set up with classes:
  • .pagination: Which sets up the pagination.
  • .pagination-lg: Which gives the pagination large blocks.
  • justify-content-center: Which center-align the pagination.
• Lines 10–14: The pagination links is set up with page-item included in each li and .page-link included in each a tag.
  • Line 11: It is a link with the .active class, which highlights the current page.
  • Line 13: It is a link with the .disabled class, which inactivates the link and makes it unclickable.

Conclusion

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.