Free tools Windows power users keep installed
One-click scans. No signup required.
Bootstrap pagination lets readers move through related content split across pages. In Bootstrap 5.3, build it as a labeled <nav> containing a list of links, mark the current page with aria-current="page", and connect each link to your application’s real routing. The classes handle presentation; they do not supply page data or make every interaction accessible by themselves.
Bootstrap pagination example
This Bootstrap 5.3 pattern uses a semantic list inside a navigation landmark. Replace the illustrative query-string destinations with URLs or routes that your application actually handles.
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="?page=1">Previous</a>
</li>
<li class="page-item">
<a class="page-link" href="?page=1">1</a>
</li>
<li class="page-item active">
<a class="page-link" href="?page=2" aria-current="page">2</a>
</li>
<li class="page-item">
<a class="page-link" href="?page=3">3</a>
</li>
<li class="page-item">
<a class="page-link" href="?page=3">Next</a>
</li>
</ul>
</nav>The nav label distinguishes this navigation from other navigation regions on the page. The pagination, page-item, and page-link classes provide Bootstrap’s component styling. Your server or client application must still determine which pages exist and where each link leads. See the Bootstrap 5.3 pagination documentation.
Mark the active page
Put active on the current page’s li.page-item for its visual state, and put aria-current="page" on that page’s link to identify it to assistive technology. Update both when the displayed page changes; styling alone does not convey the current page reliably.
#1 Best Overall
Handle disabled Previous and Next controls
At the beginning or end of a result set, a Previous or Next action may not be available. Bootstrap notes that disabled styling on an anchor does not fully disable it for keyboard users: pointer-events affects pointer interaction, not keyboard navigation.
Use a non-interactive element when there is no destination
When the control should not be available, replace the anchor with a span and apply the disabled state:
<li class="page-item disabled">
<span class="page-link">Previous</span>
</li>This removes the link’s destination and keyboard focus. Choose this representation when users should not be able to activate the control.
Keep an anchor only when you also disable activation
If your markup needs to retain an anchor, add tabindex="-1" and use JavaScript to prevent activation while the control is disabled. The class alone is not a functional safeguard. Consult Bootstrap’s disabled pagination guidance for the documented approaches.
Use icon-only navigation accessibly
If Previous or Next is represented only by an icon, give the link an accessible name and hide a decorative glyph from assistive technology. Bootstrap’s documented pattern uses an aria-hidden="true" wrapper for the glyph and visually hidden text for the name. Do not leave an icon-only link without a name that communicates its action.
Choose size and alignment
Use the size modifier on the pagination list. Flexbox utilities can align the list within its container.
Rank #4
.pagination-smmakes the pagination smaller..pagination-lgmakes it larger..justify-content-centercenters it..justify-content-endaligns it to the end.
For example, <ul class="pagination pagination-sm justify-content-center"> combines a smaller size with centered alignment. These documented options are covered in the Bootstrap pagination component reference.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Fix the driver behind crashes, sound loss and screen glitches3Clear out junk files and repair common Windows errorsCustomize pagination styling
Bootstrap 5.3 pagination uses local CSS variables, which you can override to adjust the component’s appearance. Sass customization is also supported. CSS variables were added in Bootstrap 5.2.0; consult the versioned component documentation for the variables and Sass options available to your build.
Version and accessibility scope
The Bootstrap v5.3 documentation reports version 5.3.8. Bootstrap states that its code is MIT-licensed and its documentation is CC BY 3.0. See the component documentation for pagination and the accessibility guidance for the broader caveat: accessibility depends substantially on the author’s markup, styling, and scripting. Evaluate the rendered component with your content and routing, including keyboard interaction and assistive technology; Bootstrap’s classes are a foundation, not a guarantee of accessible behavior.
Quick Recap
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.
