Recommended Free Tools
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Bootstrap pagination provides links for moving through related content spread across multiple pages. In Bootstrap v5.3, build it as a labeled <nav> containing a <ul class="pagination">, then connect each link to your application’s actual page routes. The classes style the component; they do not supply page data or guarantee accessible behavior.
Bootstrap pagination example: the recommended structure
Use a navigation landmark with a descriptive accessible name, then place page links in a list. The example uses query-string destinations to illustrate the pattern; replace them with routes that work in your application.
<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 page-item and page-link classes style list items and their links. Bootstrap’s documented pattern is described in its v5.3 pagination documentation.
Mark the current page clearly
Add active to the current item for its visual state, and set aria-current="page" on its link so assistive technology can identify the current page. The two attributes serve different purposes: one styles the item, while the other communicates its state.
#1 Best Overall
Handle unavailable Previous and Next links
When a control cannot navigate—for example, Previous on the first page—do not assume that adding disabled to an anchor makes it inaccessible to keyboard users. Bootstrap notes that its disabled styling and pointer-event behavior do not, by themselves, remove keyboard activation.
Use a non-interactive element
If the control should not be available at all, replace the anchor with a <span class="page-link"> inside the list item and apply the disabled styling. A span is not a link and is not included in the normal keyboard tab order.
Keep an anchor but prevent activation
If your markup needs to retain an anchor, add tabindex="-1" and use JavaScript to prevent its functionality. Removing it from sequential keyboard navigation alone does not stop activation through other means. Bootstrap documents these approaches in its pagination guidance and earlier v5.0 pagination documentation.
Give icon-only controls an accessible name
If Previous or Next is represented only by an icon or glyph, provide an accessible name on the link and hide the decorative glyph from assistive technology. Bootstrap’s pagination documentation includes an icon-only pattern; ensure that the spoken name still explains the destination or action.
Rank #3
Choose size and alignment
Bootstrap offers three sizes and common placement options:
| Choice | How to apply it |
|---|---|
| Default size | Use .pagination on the list. |
| Small | Add .pagination-sm to the list. |
| Large | Add .pagination-lg to the list. |
| Centered | Add .justify-content-center to the list. |
| End-aligned | Add .justify-content-end to the list. |
These options are documented for Bootstrap v5.3 pagination. Choose based on your layout and design needs.
Customize pagination styling
Bootstrap v5.3 exposes local CSS variables for pagination, and its documentation says pagination CSS variables were added in v5.2.0. For project-level customization, Bootstrap also supports Sass variables and mixins. Use the approach that fits how your styles are built rather than changing component behavior through styling alone.
Free tools Windows power users keep installed
One-click scans. No signup required.
Check the rendered component, not only its classes
Bootstrap’s accessibility guidance emphasizes that accessibility depends substantially on the author’s markup, styling, and scripting. A generic component may need additional ARIA attributes or JavaScript to communicate its particular function. Test the finished control with real routes and content, keyboard interaction, and the assistive technologies relevant to your project. See Bootstrap’s accessibility guidance.
The official Bootstrap v5.3 documentation consulted for this guide reports version 5.3.8. It identifies Bootstrap code as MIT-licensed and its documentation as CC BY 3.0.
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.
