Pagination with Bootstrap

Bootstrap is a front-end framework that provides clean and interactive user interfaces. One of its many components is pagination, which allows you to break up long lists or tables into manageable chunks. In this guide, we’ll explore how to implement pagination with Bootstrap.

Getting Started

To get started, you’ll need to download or include Bootstrap into your project. You can either download Bootstrap and add it to your project manually or include it using a CDN.

<!-- Include the Bootstrap stylesheet -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css">

<!-- Include the Bootstrap JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script>

After adding the necessary files, you can start implementing pagination.

Basic Pagination

The most basic pagination implementation in Bootstrap involves creating an unordered list with a .pagination class and adding list items with links or buttons that target different pages.

<nav>
  <ul class="pagination">
    <li class="page-item"><a href="#" class="page-link">1</a></li>
    <li class="page-item"><a href="#" class="page-link">2</a></li>
    <li class="page-item"><a href="#" class="page-link">3</a></li>
    <li class="page-item"><a href="#" class="page-link">4</a></li>
    <li class="page-item"><a href="#" class="page-link">5</a></li>
  </ul>
</nav>

The above example creates a navigation bar with five pages, and clicking on each link will navigate to the corresponding page. The .pagination class applies default styles to the list, while the .page-item and .page-link classes apply styles to the individual list items and links, respectively.

Active Pagination

You may want to indicate which page the user is currently on. To achieve this, add the .active class to the .page-item of the current page.

<nav>
  <ul class="pagination">
    <li class="page-item active"><a href="#" class="page-link">1</a></li>
    <li class="page-item"><a href="#" class="page-link">2</a></li>
    <li class="page-item"><a href="#" class="page-link">3</a></li>
    <li class="page-item"><a href="#" class="page-link">4</a></li>
    <li class="page-item"><a href="#" class="page-link">5</a></li>
  </ul>
</nav>

Disabled Pagination

Sometimes, you may want to indicate that a link or button is disabled. To achieve this, add the .disabled class to the .page-item of the link or button.

<nav>
  <ul class="pagination">
    <li class="page-item disabled"><a href="#" class="page-link">Previous</a></li>
    <li class="page-item"><a href="#" class="page-link">1</a></li>
    <li class="page-item"><a href="#" class="page-link">2</a></li>
    <li class="page-item"><a href="#" class="page-link">3</a></li>
    <li class="page-item"><a href="#" class="page-link">Next</a></li>
  </ul>
</nav>

The above example creates a navigation bar with disabled "Previous" and "Next" links.

Using Icons

You may want to use icons for the pagination links or buttons. To achieve this, add an <i> element before or after the link text and wrap it in the appropriate style classes.

<nav>
  <ul class="pagination">
    <li class="page-item disabled">
      <a href="#" class="page-link" aria-label="Previous">
        <i class="bi bi-chevron-left"></i>
        <span class="visually-hidden">Previous</span>
      </a>
    </li>
    <li class="page-item"><a href="#" class="page-link">1</a></li>
    <li class="page-item"><a href="#" class="page-link">2</a></li>
    <li class="page-item"><a href="#" class="page-link">3</a></li>
    <li class="page-item">
      <a href="#" class="page-link" aria-label="Next">
        <span class="visually-hidden">Next</span>
        <i class="bi bi-chevron-right"></i>
      </a>
    </li>
  </ul>
</nav>

The above example uses the Bootstrap icon library to add chevron icons to the pagination links.

Conclusion

Pagination is an essential feature to implement on websites or applications that display long lists or tables. Bootstrap’s pagination component provides an easy and intuitive way to achieve this, with various customization options to make your pagination stand out.