Breadcrumbs & Pagination

In Bootstrap, Breadcrumbs and Pagination are navigation tools that help users find their way around your website. Think of them as “Where am I?” and “How do I see more?”

Breadcrumbs act as a digital “trail,” showing users exactly where they are within a website’s hierarchy, such as Home > Blog > Tech. They make moving back to previous sections effortless. On the other hand, Pagination organizes large amounts of content—like search results or product lists—into numbered pages. Together, these Bootstrap components improve navigation by providing clear location context and a structured way to browse through extensive data.

1. Breadcrumbs (The Trail)

Breadcrumbs show a user’s current location within a folder-like hierarchy. It’s like the trail of breadcrumbs Hansel and Gretel left in the woods so they could find their way home.

When to use: Sites with many levels (e.g., Home > Electronics > Laptops).
How it works: You use an ordered list (<ol>) with the class .breadcrumb.

HTML

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

Simple Rule: The “Active” item is the page the user is currently on—it usually doesn’t have a clickable link and looks slightly different (often greyed out).

2. Pagination (The Page Turner)

Pagination is used when you have too much content to show on one page (like search results or a blog list). It allows users to jump to “Page 2,” “Page 3,” etc.

When to use: Long lists of items, search results, or galleries.
How it works: You use a list (<ul>) with the class .pagination.

HTML

<nav aria-label="Page navigation">
  <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"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

Pro Tips for Pagination:

Sizing: Add .pagination-lg or .pagination-sm to the <ul> to make the buttons larger or smaller.
Alignment: Use Bootstrap utility classes like .justify-content-center on the <ul> to move the numbers to the middle of the page.
Disabled/Active: Add the .disabled class to a link you can’t click (like “Previous” when you’re on Page 1) and .active to show which page is currently being viewed.

Summary Comparison

Feature	Purpose	Bootstrap Class
Breadcrumbs	Shows hierarchy (how deep you are).	`.breadcrumb`
Pagination	Shows sequence (which part of a list you are in).	`.pagination`

Both components use the <nav> wrapper for accessibility, which helps screen readers tell visually impaired users exactly what kind of navigation they are using.