Bootstrap pagination is a styled navigation pattern, not a data-pagination engine: it gives you the markup and appearance for page links, while your application supplies real destinations and decides which content each page displays. In Bootstrap 5.3, build it with a named <nav>, a .pagination list, and .page-item and .page-link classes. Mark the current page both visually and semantically, and make unavailable controls genuinely non-interactive.
Build a basic Bootstrap pagination list
Bootstrap uses list markup so assistive technologies can identify the links as a group. Wrap the list in a navigation landmark with a descriptive accessible name, then put each page link inside a list item:
As an Amazon Associate I earn from qualifying purchases.
<nav aria-label="Search results pages">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="/search?page=1">1</a>
</li>
<li class="page-item active">
<a class="page-link" href="/search?page=2" aria-current="page">2</a>
</li>
<li class="page-item">
<a class="page-link" href="/search?page=3">3</a>
</li>
</ul>
</nav>Replace the example URLs with destinations handled by your router or server. Bootstrap styles the control; it does not fetch records, calculate page boundaries, or update the displayed results for you. See the Bootstrap 5.3 pagination documentation for the component’s markup and options.
Recommended Free Tools
Mark the current page and unavailable controls
Current page
Put .active on the current page’s list item for its visual state and aria-current="page" on its anchor so the state is also conveyed semantically. If the current page is rendered as a non-interactive element such as a <span>, Bootstrap says aria-current may be omitted.
#1 Best Overall
Previous and Next
Use visible labels such as “Previous” and “Next,” or provide an accessible name when the control contains only an icon. Decorative arrow characters can be marked aria-hidden="true" so they are not announced as meaningful content.
Do not rely on .disabled alone to prevent interaction. Bootstrap notes that pointer-events: none does not prevent keyboard users from navigating to a link. At a boundary, render a non-link element, or implement the documented keyboard safeguards and any necessary custom behavior so the unavailable action cannot be activated.
Change pagination size and alignment
Use the size modifiers on the pagination list and flex utilities on it to adjust the component:
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →| Need | Bootstrap classes |
|---|---|
| Smaller controls | pagination pagination-sm |
| Default controls | pagination |
| Larger controls | pagination pagination-lg |
| Centered alignment | pagination justify-content-center |
| End alignment | pagination justify-content-end |
These classes change presentation, not which pages exist or where their links lead.
Customize the appearance
Bootstrap 5.3 exposes local CSS variables on .pagination for component-level styling. Sass customization is also supported when you want to adapt the framework at build time. Consult the official component documentation for the variables and Sass options available in that documentation version.
Accessibility checklist
- Give each pagination navigation landmark a descriptive name, especially if the page has more than one navigation region.
- Keep the list and link structure so the control is announced as a set of links.
- Expose the current page with
aria-current="page"when it is a link; do not treat the visual.activeclass as a substitute. - Ensure disabled boundary controls cannot be used with a keyboard, not just clicked with a pointer.
- Make icon-only Previous and Next controls have accessible names and hide purely decorative glyphs from assistive technology.
As Bootstrap’s accessibility overview cautions, “The overall accessibility of any project built with Bootstrap depends in large part on the author’s markup, additional styling, and scripting they’ve included.” Review the Bootstrap accessibility overview alongside your own implementation.
Quick Recap
Rank #4
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
