Pagination
Build accessible dataset pagination with current and disabled states, responsive ranges, and compact or large controls.
Pagination
Present dataset pages as a semantic list inside a labeled navigation landmark. Your router or data layer still owns URLs, loading, focus preservation, and result-count announcements.
Dataset pagination
Use a labeled navigation landmark, mark exactly one page current, remove disabled links from the tab order, and allow optional middle pages to collapse on small screens.
<nav aria-label="Customer result pages">
<ul class="bs-pagination">
<li class="bs-pagination-item"><a class="bs-pagination-link" href="#pagination-dataset" aria-disabled="true" tabindex="-1">Previous</a></li>
<li class="bs-pagination-item"><a class="bs-pagination-link" href="#pagination-dataset" aria-current="page" aria-label="Page 1, current page">1</a></li>
<li class="bs-pagination-item bs-pagination-optional"><a class="bs-pagination-link" href="#pagination-dataset" aria-label="Page 2">2</a></li>
<li class="bs-pagination-item bs-pagination-optional"><a class="bs-pagination-link" href="#pagination-dataset" aria-label="Page 3">3</a></li>
<li class="bs-pagination-item"><span class="bs-pagination-ellipsis" aria-hidden="true">…</span></li>
<li class="bs-pagination-item"><a class="bs-pagination-link" href="#pagination-dataset" aria-label="Page 12">12</a></li>
<li class="bs-pagination-item"><a class="bs-pagination-link" href="#pagination-dataset" aria-label="Next page">Next</a></li>
</ul>
</nav>Pagination sizes
The default size fits most product interfaces. Use the small modifier in dense toolbars and the large modifier only where pagination is a primary interaction.
<div class="bs-stack bs-gap-4">
<nav aria-label="Compact result pages"><ul class="bs-pagination bs-pagination-sm"><li class="bs-pagination-item"><a class="bs-pagination-link" href="#pagination-sizes">Previous</a></li><li class="bs-pagination-item"><a class="bs-pagination-link" href="#pagination-sizes" aria-current="page">1</a></li><li class="bs-pagination-item"><a class="bs-pagination-link" href="#pagination-sizes">2</a></li><li class="bs-pagination-item"><a class="bs-pagination-link" href="#pagination-sizes">Next</a></li></ul></nav>
<nav aria-label="Large result pages"><ul class="bs-pagination bs-pagination-lg"><li class="bs-pagination-item"><a class="bs-pagination-link" href="#pagination-sizes">Previous</a></li><li class="bs-pagination-item"><a class="bs-pagination-link" href="#pagination-sizes" aria-current="page">1</a></li><li class="bs-pagination-item"><a class="bs-pagination-link" href="#pagination-sizes">2</a></li><li class="bs-pagination-item"><a class="bs-pagination-link" href="#pagination-sizes">Next</a></li></ul></nav>
</div>Control type
Use links when each result page has a stable URL and buttons when the dataset changes in place.
Current state
Mark exactly one control with aria-current="page". Remove disabled links from the tab order and keep an ellipsis non-interactive.
Async updates
Announce loading and result-count changes, preserve a useful focus position, and update the URL when users need refresh or sharing to retain the page.
Pagination API
Use links when every page has a URL and buttons for in-place data updates. An ellipsis communicates an omitted range and is never interactive.
| Class | Purpose | Use it on |
|---|---|---|
.bs-pagination | Creates a wrapping, list-based pagination row. | A <ul> inside a labeled navigation landmark. |
.bs-pagination-item | Provides the list-item hook and a target for responsive visibility. | Each <li>. |
.bs-pagination-link | Styles page, previous, and next controls plus current and disabled states. | An anchor or button. |
.bs-pagination-ellipsis | Aligns a decorative gap marker with page controls. | A non-interactive span. |
.bs-pagination-optional | Hides nonessential page numbers below 36rem while keeping boundary controls. | Optional list items. |
.bs-pagination-sm | Creates compact pagination for dense toolbars. | The pagination list. |
.bs-pagination-lg | Creates larger pagination controls for prominent result sets. | The pagination list. |