Pagination

Pagination

Pagination breaks up content across multiple pages, common in lists, blogs, and search results.

Basic pagination

Use .pagination on a <ul> and .page-item / .page-link on the items:

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

Active and disabled states

• .active highlights the current page.
• .disabled makes an item unclickable.

<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>
</ul>

Sizing

• .pagination-lg makes pagination larger.
• .pagination-sm makes it smaller.

Alignment

• .justify-content-center centers pagination.
• .justify-content-end aligns it to the right.

<ul class="pagination justify-content-center">
  ...
</ul>

Breadcrumbs

Related to pagination, breadcrumbs show the page hierarchy:

<nav 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>

TL;DR

• Use .pagination with .page-item and .page-link.
• .active marks the current page.
• .disabled disables an item.
• .pagination-lg and .pagination-sm change size.
• Breadcrumbs show page hierarchy.