Skip to main content

Pagination in Bootstrap 5

Bootstrap Pagination​

Bootstrap provides a pagination component that helps divide content into separate pages.

It consists of a series of links that allows users to navigate through the pages by clicking on the links.

As an example:

Editor

Loading...

In this example:

  • We have a pagination navigation that displays five page links and a "Next" link.
  • Each page link has a page-link class that gives it the appropriate styling.
  • The aria-label attribute provides an accessible label for screen readers.
tip

You can also customize the pagination styling by using additional classes such as pagination-lg or pagination-sm to increase or decrease the size of the pagination links.

Active State​

The active state is used to show which page the user is currently on. By default, the active state is represented by a darker background color and a lighter text color for the current page link.

To apply the active state to a pagination link, you can add the .active class to it.

As an example:

Editor

Loading...

In this example:

  • The third page link has the .active class, which makes it appear with a darker background and a lighter text color.
  • The aria-current="page" attribute is also added to indicate that it is the current page.

Disabled State​

You can add a disabled class to the pagination item to make it appear disabled.

As an example:

<nav aria-label="...">
     <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 disabled">
               <a class="page-link" href="#">3</a>
          </li>
          <li class="page-item"><a class="page-link" href="#">4</a></li>
          <li class="page-item"><a class="page-link" href="#">5</a></li>
          <li class="page-item"><a class="page-link" href="#">Next</a></li>
     </ul>
</nav>

In the above example:

  • The fourth item is disabled because it has a disabled class.
  • This will make it appear greyed out and prevent it from being clicked.