Bootstrap Pager

Bootstrap 5 Pager-like Navigation

Understanding Pager Functionality

In older versions of Bootstrap (like Bootstrap 3), a ‘Pager’ component provided simple previous and next links for navigation, often used for navigating between article pages or steps in a process.

This specific .pager component was removed in Bootstrap 4 and is not present in Bootstrap 5. However, similar functionality can be easily achieved using the more versatile Pagination component or custom button/link styling with flex utilities.

To create simple previous/next navigation links, you can use a simplified version of the Bootstrap 5 Pagination component.

Basic Previous/Next Links (Centered):

<html>
 <head>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
 </head>
 <body>
  <nav aria-label="Basic pager navigation example">
   <ul class="pagination justify-content-center">
    <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
   </ul>
  </nav>
 </body>
</html>

Use .disabled class on a .page-item when a previous/next link should not be active (e.g., on the first or last page).

Aligned Previous/Next Links

To align ‘Previous’ to one side and ‘Next’ to the other, similar to the old pager’s aligned behavior, you can use flex utilities on the .pagination container.

Example using justify-content-between:

<html>
 <head>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
 </head>
 <body>
  <nav aria-label="Aligned pager navigation example">
   <ul class="pagination justify-content-between">
    <li class="page-item">
     <a class="page-link" href="#">&larr; Older</a>
    </li>
    <li class="page-item">
     <a class="page-link" href="#">Newer &rarr;</a>
    </li>
   </ul>
  </nav>
 </body>
</html>

Alternatively, you can use margin utilities like ms-auto (margin-start: auto) on one of the items if you only have two items and want to push one to the end.

<html>
 <head>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
 </head>
 <body>
  <nav aria-label="Aligned pager with ms-auto">
   <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item ms-auto"><a class="page-link" href="#">Next</a></li>
   </ul>
  </nav>
 </body>
</html>

Further Navigation Options

For more complex pagination needs, including numbered pages, active states, and more, explore the full capabilities of the Bootstrap 5 Pagination component in the official documentation or relevant tutorials.