Breadcrumbs & Pagination

In Bootstrap Breadcrumbs and Pagination are used for navigation. Navigation performs the work of ‘Where am I?’ and ‘How do I see more?’

Breadcrumbs provide a ‘trail’ of the user‘s location in a website, for example “Home > Blog > Tech”. When used, it makes navigating backwards easy. Pagination on the other hand, separates lengthy pages (such as search results or product data) into marked pages. In these two seperate sections, Bootstrap is further enhanced by providing a means to enter content.

1. Breadcrumbs (The Trail)

Breadcrumbs tell the user exactly where they are in relation to a folder structure. Like the trail of crumbs that Hansel and Gretel lay down so that they could find their way back.

Use for: When you have many depth of pages (ex: Home > Event > Sports > Football)
How it works: You give the bootstrap ordered list (<ol>) 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>

Basic Rule: The currently “Active” item is the page the user is viewing. Can be distinguished from the rest of the Pager by being non-clickable, slightly abnormal appearance. Usually grayed out.

2. Pagination (The Page Turner)

Pagination. When you have too much to display on one page such as on search results or list of blogs use pagination that redirects users to “Page 2 ” “Page 3 ” and so on.

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.