Bootstrap 5 Pagination

Navigation for multi-page content

📄 What is Pagination?

Pagination helps users navigate through multiple pages of content. It breaks large datasets into manageable chunks, improving load times and user experience with clear navigation controls and page indicators. 


<!-- Basic Pagination -->
<nav>
  <ul class="pagination">
    <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>
  </ul>
</nav>

Output:

Pagination with Icons

Pagination with icons enhances navigation clarity and visual appeal using symbolic representations for previous and next actions. Replace text labels with Font Awesome or Bootstrap Icons using <i> elements within pagination links. Always include aria-label attributes with descriptive text like "Previous page" or "Next page" for accessibility. Icons improve internationalization by removing language dependencies and often work better on mobile interfaces with limited space. Visual icons can increase interaction rates by making navigation controls more distinctive. Accessible icon implementation ensures all users can navigate effectively, improving overall user experience metrics that search engines consider when evaluating site quality.

<nav>
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </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">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

Output:

🔹 Active and Disabled States

Active and disabled states in pagination provide essential feedback about navigation availability and current position. The .active class highlights the current page number, helping users maintain orientation within multi-page content. The .disabled class applies to previous/first buttons on page one or next/last buttons on the final page, preventing navigation to non-existent pages. These visual cues reduce user frustration by clearly indicating available actions. Proper state management improves navigation efficiency and reduces erroneous clicks. Clear pagination states contribute to better user engagement with content archives or product listings, potentially increasing time-on-site and reducing bounce rates—positive signals for SEO algorithms.

<nav>
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#">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</a>
    </li>
  </ul>
</nav>

Output:

🔹 Pagination Sizing

Pagination sizing controls the visual scale of navigation controls using .pagination-lg or .pagination-sm modifier classes. Larger pagination works well for touch interfaces, prominent navigation elements, or when pagination is a primary interaction method. Smaller pagination fits better in compact layouts, sidebars, or secondary navigation areas. Size variations help match pagination components to their context within your design system. Responsive sizing strategies can adapt to different devices—larger on mobile for touch targets, smaller on desktop for space efficiency. Appropriately sized pagination improves usability across devices, contributing to better mobile experience metrics that impact search rankings.

<!-- Large Pagination -->
<nav>
  <ul class="pagination pagination-lg">
    <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>
  </ul>
</nav>

<!-- Small Pagination -->
<nav>
  <ul class="pagination pagination-sm">
    <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>
  </ul>
</nav>

Output:

🔹 Pagination Alignment

Pagination alignment positions the navigation component within its container using flexbox utility classes. Apply .justify-content-center for center alignment, .justify-content-end for right alignment, or leave default for left alignment. Proper alignment integrates pagination naturally with your content layout—centered under article lists, right-aligned in dashboards, or left-aligned in asymmetrical designs. Alignment choices should consider content flow, visual balance, and user expectations. Well-aligned pagination creates professional, polished interfaces that improve content navigation experience. Enhanced navigation contributes to better user engagement with multi-page content, potentially increasing pages-per-session metrics that influence SEO performance.

<!-- Center Aligned -->
<nav>
  <ul class="pagination justify-content-center">
    <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>
  </ul>
</nav>

<!-- Right Aligned -->
<nav>
  <ul class="pagination justify-content-end">
    <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>
  </ul>
</nav>

Output:

🧠 Test Your Knowledge

Which class highlights the current page in pagination?