Bootstrap - Pagination

When browsing through massive collections of data, like blog posts, search results, or product listings, pagination is a crucial feature. With little work, Bootstrap 5 enables the creation of stunning, responsive pagination components.

We'll go over what you need to know about pagination in Bootstrap 5 in this blog post, including the many styles, customization choices, and how to use advanced pagination capabilities.

1. Simple Page Numbering

Bootstrap 5 offers a straightforward, well-organized pagination element. Use the .pagination class and list items for each page link enclosed in a <ul> element to create basic pagination.

Example:

<li class="page-item"><a class="page-link" href="#">Previous</a></li>

</ul>

</nav>

In this example:

Every page link is encased in a <li> element that has the class .page-item applied to it.

The anchor (<a>) with the.page-link class encloses the link or button itself.

This generates a basic pagination control that is positioned horizontally.

Output: To enable page navigation, buttons labelled "Previous" and "Next" are positioned next to the page numbers.

2. States of Disabling and Active

The .active and.disabled classes are provided by Bootstrap 5 to show the current page and disable specific pagination links.

Example:

<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>

</li>

</li>

</ul>

</nav>

The disabled class prevents user interaction, which is useful for the "Previous" button when on the first page or the "Next" button on the last page.

The active class highlights the current page the user is on.

3. Sizing Pagination

You can change the size of the pagination controls using the .pagination-lg or .pagination-sm classes for large and small pagination, respectively.

Example: Large Pagination

<li class="page-item"><a class="page-link" href="#">Previous</a></li>

</ul>

</nav>

Example: Small Pagination

<li class="page-item"><a class="page-link" href="#">Previous</a></li>

</ul>

</nav>

Output:

Large Pagination creates bigger, more prominent pagination controls.

Small Pagination reduces the size, useful for mobile or compact designs.

4. Alignment

You can change the alignment of pagination using Bootstrap's flexbox utilities like .justify-content-center or .justify-content-end to center or right-align the pagination, respectively.

Example: Center-Aligned Pagination

<li class="page-item"><a class="page-link" href="#">Previous</a></li>

</ul>

</nav>

Example: Right-Aligned Pagination

<li class="page-item"><a class="page-link" href="#">Previous</a></li>

</ul>

</nav>

Output:

Center-Aligned Pagination positions the pagination control in the center of the screen.

Right-Aligned Pagination moves it to the right, providing more flexibility in layout designs.

5. Pagination with Icons

You can easily replace text like "Previous" and "Next" with icons to make the pagination more intuitive. Bootstrap Icons or Font Awesome are commonly used.

Example:

</a>

</li>

</a>

</li>

</ul>

</nav>

Output:

« and » are HTML entities for left and right double-angle quotation marks, commonly used for "Previous" and "Next" buttons.

6. Advanced Pagination: First, Last, Next, and Previous

For more advanced pagination controls, you may want to include additional "First" and "Last" buttons.

Example:

<a class="page-link" href="#">First</a>

</li>

</a>

</li>

</a>

</li>

</li>

</ul>

</nav>

This example adds "First" and "Last" buttons to give the user more control over page navigation.

Conclusion

The pagination components in Bootstrap 5 are highly configurable and simple to use. Your web applications can have responsive and user-friendly navigation components if you can add sophisticated features like disabled or active states, adjust the size and alignment of pagination controls, and style them using built-in classes.

Bootstrap 5 pagination ensures that people can navigate your material with ease, whether you're creating a basic blog or a sophisticated web application.