Bootstrap 5 Pagination Component: Quick Implementation Method for List Pagination

In web development, when we need to display a large amount of list data (such as product lists, article lists, etc.), directly showing all data on one page will result in an excessively long page, slow loading, and poor user experience. At this time, the pagination component comes into play—it can divide the data into multiple pages, allowing users to browse content by clicking different page numbers. Bootstrap5 provides a ready-to-use pagination component that requires no complex CSS or JavaScript code; only simple HTML structure and class names are needed to quickly achieve an aesthetically pleasing and fully functional pagination effect.

1. Preparation: Introduce Bootstrap5¶

To use Bootstrap5’s pagination component, you first need to include Bootstrap5’s CSS in your project (and JavaScript if interactive features are required). Here’s the simplest way to include it (using CDN):

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

<!-- (Optional) Include Bootstrap5 JS (if you need interactive features like dropdowns, modals) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

If you need to use icons (e.g., arrows for “Previous/Next”) in pagination, also include Bootstrap Icons via CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">

2. Basic Structure of Bootstrap5 Pagination Component¶

Bootstrap5’s pagination component is built with lists (<ul>) and list items (<li>), with specific class names controlling styles and states. The core structure is as follows:

<ul class="pagination">
  <!-- Previous page button -->
  <li class="page-item"><a class="page-link" href="#">Previous</a></li>

  <!-- Page number items -->
  <li class="page-item active"><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>

  <!-- Next page button -->
  <li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>

Key Class Name Explanations:¶

pagination: Applied to the <ul> tag to define the base styling of the pagination container (e.g., spacing, rounded corners).
page-item: Applied to <li> tags to define the container for each page number/button.
page-link: Applied to <a> tags (or <button>) to define the style of clickable links (e.g., color, borders).
active: Applied to the <li> tag of the current page to highlight the active page (e.g., background color, border).
disabled: Applied to the <li> tag of disabled pages/buttons to make them unclickable (e.g., “Previous” on the first page).

3. Common Pagination Scenarios and Examples¶

1. Basic Pagination (with Previous/Next Buttons)¶

The example above is the most basic pagination structure, including “Previous”, “1”, “2”, “3”, “Next”. Key points:
- active marks the current page (e.g., “1”), which is shown by default when the page loads.
- href="#" is a placeholder; replace it with the actual URL of the corresponding page in a real project (e.g., href="?page=2").

2. Disabled State (Boundary Page Handling)¶

When pages are at the boundaries (e.g., “Previous” is disabled on the first page, “Next” is disabled on the last page), add the disabled class to the corresponding <li>:

<ul class="pagination">
  <!-- Disable "Previous" on the first page -->
  <li class="page-item disabled">
    <a class="page-link" href="#" tabindex="-1">Previous</a>
  </li>

  <li class="page-item active"><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>

  <!-- Disable "Next" on the last page -->
  <li class="page-item disabled">
    <a class="page-link" href="#" tabindex="-1">Next</a>
  </li>
</ul>

tabindex="-1": An optional attribute to ensure disabled elements cannot be focused via keyboard navigation (improving accessibility).

3. Centered Pagination¶

Use Bootstrap’s Flex layout class .justify-content-center to center the pagination content:

<ul class="pagination justify-content-center">
  <!-- Page items as above -->
</ul>

4. Icon - Enhanced Pagination¶

Combine with Bootstrap Icons to add arrow icons for “Previous/Next” for better intuitiveness:

<ul class="pagination">
  <li class="page-item disabled">
    <a class="page-link" href="#" tabindex="-1">
      <i class="bi bi-arrow-left"></i> Previous
    </a>
  </li>

  <li class="page-item active"><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 <i class="bi bi-arrow-right"></i></a>
  </li>
</ul>

5. Adjust Pagination Size¶

Bootstrap5 provides .pagination-sm (small size) and .pagination-lg (large size) classes to quickly adjust the pagination size:

<!-- Small - sized pagination -->
<ul class="pagination pagination-sm">...</ul>

<!-- Large - sized pagination -->
<ul class="pagination pagination-lg">...</ul>

4. Extensions and Best Practices¶

Replace <a> with <button>: If page numbers load data dynamically (instead of page jumps), replace <a> with <button> and add onclick event handling:

   <li class="page-item"><button class="page-link" onclick="loadPage(2)">2</button></li>

Dynamically Generate Page Numbers: In real projects, the number of pages may vary based on total data volume (e.g., 1-10 for 10 pages, 1-5 for 20 pages). Use JavaScript to loop through the total pages returned by the backend to generate page items.
Semantics and SEO: Avoid using href="#" placeholders. Use actual URLs (e.g., href="/products?page=2") to facilitate search engine crawling and direct user access.

Summary¶

Bootstrap5’s pagination component enables quick implementation of beautiful, responsive pagination effects through simple HTML structure and CSS classes, without repetitive styling. Beginners only need to master the core class names (pagination, page-item, page-link) and state markers (active, disabled) to handle most pagination scenarios. For more complex interactions (e.g., dynamic data loading), extend it with JavaScript.