Pagination

Bootstrap

Bootstrap pagination + optional Showing … of … summary. Markup below; usage → Rules.

• Summary: p.small.text-secondary.mb-0 with font-monospace fw-bold on range and total only.
• Controls: nav → ul.pagination → page-item / page-link. Active page: page-item active + span.page-link.

Showing 26–50 of 412

• 1
• 2
• 3
• 4
• …
• 8

<div class="d-flex flex-wrap align-items-center justify-content-between gap-3">
  <p class="small text-secondary mb-0">
    Showing
    <span class="font-monospace fw-bold">26–50</span>
    of
    <span class="font-monospace fw-bold">412</span>
  </p>
  <nav aria-label="Contacts pages">
    <ul class="pagination mb-0">
      <li class="page-item">
        <a class="page-link" href="#" aria-label="Previous page">
          <i class="bi bi-chevron-left" aria-hidden="true"></i>
        </a>
      </li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item active" aria-current="page"><span class="page-link">2</span></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#">4</a></li>
      <li class="page-item disabled" aria-hidden="true"><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 page">
          <i class="bi bi-chevron-right" aria-hidden="true"></i>
        </a>
      </li>
    </ul>
  </nav>
</div>

Rules

Placement

Pair with table list pages: summary left, controls right, mt-3 (or equivalent) below the table card-bordered — not inside the card or card-footer. Align with the list page inset (Layout — List and table pages).

Controls

• Prev/next: chevron icons inside page-link; aria-label on the link (“Previous page”, “Next page”) — Iconography.
• Ellipsis: disabled page-item with span.page-link (not a link).
• Active page uses filled stone treatment (theme); inactive links are stone text, not link green.

Copy

Summary pattern: Showing {range} of {total} — mono bold on numerals only.