Bootstrap Breadcrumb and Pagination

Breadcrumb and pagination help the user to move in a website. A breadcrumb shows the path of the current page, and pagination shows a list of page numbers.

Breadcrumb

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

The last item is the current page: it has the class active and aria-current="page" and it is not a link. You can change the divider (the slash) with a CSS variable:

<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

Pagination

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a></li>
    <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>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

Sizes and alignment

<nav aria-label="Large pagination">
  <ul class="pagination pagination-lg justify-content-center">
    <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>
  </ul>
</nav>
<nav aria-label="Small pagination">
  <ul class="pagination pagination-sm justify-content-end">
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active"><a class="page-link" href="#">2</a></li>
  </ul>
</nav>

Use .pagination-lg or .pagination-sm for the size, and the flex classes justify-content-center or justify-content-end for the alignment.

Accessibility tips

• Wrap both of them in a nav with an aria-label.
• Use aria-current for the active item.
• Pagination only makes the look. You must write the links and the page logic on the server (or with JavaScript).

• Previous Page
• Next Page

---

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.