Pagination

Pagination splits a long result set — like hundreds of hiking trails — across multiple pages, and gives visitors a row of numbered links to jump between them. Bootstrap 4's pagination component is plain markup and CSS; no jQuery is involved at all. We'll build the "page 2 of 8" control for TrailMap's trail listing page.

Base Markup: .pagination, .page-item, .page-link

Pagination is an unordered list. The list itself gets .pagination; each entry is a .page-item wrapping a .page-link anchor.

<ul class="pagination">
  <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>
</ul>

Disabled and Active States

Add .disabled to a .page-item for a page link that can't be clicked (typically Previous on page 1, or Next on the last page). Add .active to mark the current page. Because an <a> is clickable by nature, disabled links also need tabindex="-1" and aria-disabled="true" so keyboard and screen-reader users get the same signal sighted users get from the greyed-out look.

<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="#">Next</a></li>
</ul>

Sizing and Alignment

Add .pagination-lg or .pagination-sm to the <ul> for bigger or smaller controls. There's no dedicated alignment class — center or right-align the whole block with a flex utility on the <ul> itself, since .pagination already sets display: flex.

<!-- large -->
<ul class="pagination pagination-lg"> ... </ul>

<!-- small, centered -->
<ul class="pagination pagination-sm justify-content-center"> ... </ul>

<!-- right-aligned -->
<ul class="pagination justify-content-end"> ... </ul>

Full Worked Example: TrailMap "Page 2 of 8"

TrailMap's trail listing shows 8 pages of results; here the visitor is on page 2, centered below the trail cards.

<nav aria-label="Trail results pages">
  <ul class="pagination justify-content-center">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">«</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active" aria-current="page"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item disabled"><span class="page-link">…</span></li>
    <li class="page-item"><a class="page-link" href="#">8</a></li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Next">»</a>
    </li>
  </ul>
</nav>

The … "gap" item uses a plain <span> instead of an <a>, paired with .disabled, since it isn't a link to any real page.

Next, visualize progress toward a goal with Progress Bars.