Bootstrap 5 Pagination

Welcome to The Coding College, your trusted source for coding and web development tutorials. In this article, we’ll discuss Pagination in Bootstrap 5, an essential component for navigating large datasets, blogs, or multi-page content.

Pagination improves user experience by breaking content into smaller, digestible chunks, and Bootstrap 5 provides a range of tools to create responsive, accessible, and customizable pagination components.

What Is Pagination in Bootstrap 5?

Pagination refers to the navigation links that allow users to move between different pages of content. Bootstrap 5 offers a clean and flexible way to implement pagination using the .pagination class, combined with utility classes for styling and alignment.

Basic Pagination Example

Bootstrap 5 pagination starts with a <nav> element containing an unordered list (<ul>). Use the .pagination class on the <ul> and the .page-item and .page-link classes on <li> and <a> elements, respectively.

Example: Basic Pagination

<nav aria-label="Page navigation example">
  <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>
</nav>

Output:

A horizontal pagination bar with Previous, numbered pages, and Next links.

Advanced Pagination Styles

1. Disabled and Active States

You can disable links using the .disabled class and highlight the active page using the .active class.

<nav aria-label="Page navigation example">
  <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 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>
</nav>

2. Sizing Pagination

Bootstrap 5 provides .pagination-lg and .pagination-sm classes for larger or smaller pagination.

Example: Large Pagination

<nav aria-label="Large pagination example">
  <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>
</nav>

Example: Small Pagination

<nav aria-label="Small pagination example">
  <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>
</nav>

3. Pagination Alignment

Use flexbox utility classes to align the pagination to the left, center, or right.

Example: Center-Aligned Pagination

<nav aria-label="Center-aligned pagination example">
  <ul class="pagination justify-content-center">
    <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>
</nav>

Example: Right-Aligned Pagination

<nav aria-label="Right-aligned pagination example">
  <ul class="pagination justify-content-end">
    <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>
</nav>

Customizing Pagination with Bootstrap Colors

Use contextual text color classes to customize the color of pagination links.

Example: Custom Colors

<nav aria-label="Custom color pagination">
  <ul class="pagination">
    <li class="page-item"><a class="page-link text-success" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link text-primary" href="#">1</a></li>
    <li class="page-item"><a class="page-link text-danger" href="#">2</a></li>
    <li class="page-item"><a class="page-link text-warning" href="#">3</a></li>
    <li class="page-item"><a class="page-link text-info" href="#">Next</a></li>
  </ul>
</nav>

Accessibility Best Practices

  1. aria-label Attribute: Use the aria-label attribute to describe the purpose of the navigation (e.g., Page navigation example).
  2. Keyboard Navigation: Ensure the pagination is focusable and navigable using the Tab key.
  3. Screen Reader Context: Include hidden text like Previous or Next to make pagination more informative for screen readers.

FAQs About Bootstrap 5 Pagination

Q1: Can I use icons instead of text for pagination links?

Yes! You can use Bootstrap icons or other icon libraries inside pagination links.

<nav aria-label="Icon pagination example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#" aria-label="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="#" aria-label="Next">»</a></li>
  </ul>
</nav>

Q2: Can I customize the pagination styles further?

Absolutely! Use custom CSS or utility classes to fully control the appearance of the pagination links and layout.

Conclusion

Bootstrap 5 Pagination is an essential tool for navigating multi-page content in a clean, responsive, and user-friendly way. With built-in features like alignment, sizing, and custom styles, it’s easy to implement pagination that matches your project’s design.

Leave a Comment