Bootstrap 5 Pagination, Sizing & Breadcrumb Navigation

Pagination and Breadcrumbs are essential navigation components that guide users through extensive content catalogs and hierarchical website architectures. Both components play a critical role in Google Search Console SEO indexing by establishing clear parent-child URL hierarchies.

1. The Pagination Component (.pagination)

Bootstrap pagination is wrapped inside a <nav aria-label="Page navigation"> container for screen reader accessibility:

<nav aria-label="Student database pagination">
  <ul class="pagination justify-content-center">
    <!-- Previous Page -->
    <li class="page-item disabled">
      <a class="page-link" aria-disabled="true">&laquo; Previous</a>
    </li>

    <!-- Page Links -->
    <li class="page-item active" aria-current="page">
      <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 -->
    <li class="page-item">
      <a class="page-link" href="#">Next &raquo;</a>
    </li>
  </ul>
</nav>

2. Sizing Pagination Controls

Scale pagination controls to match your page layout using .pagination-lg or .pagination-sm:

<!-- Large Pagination -->
<ul class="pagination pagination-lg mb-3">...</ul>

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

3. Breadcrumbs Navigation (.breadcrumb)

Breadcrumbs indicate the current page's location within a navigational hierarchy. Bootstrap automatically injects subtle forward slashes (/) between items via CSS ::before pseudo-elements:

<nav aria-label="breadcrumb">
  <ol class="breadcrumb bg-light p-3 rounded">
    <li class="breadcrumb-item"><a href="https://veewom.com">Home</a></li>
    <li class="breadcrumb-item"><a href="https://veewom.com/tutorials.htm">Tutorials</a></li>
    <li class="breadcrumb-item"><a href="https://veewom.com/bootstrap/">Bootstrap 5</a></li>
    <li class="breadcrumb-item active" aria-current="page">Pagination & Breadcrumb</li>
  </ol>
</nav>