Bootstrap pagination gives users a consistent way to move among pages of results, but it does not fetch data or decide what belongs on each page. Add the component as navigation markup, connect each link to a real destination or application route, and mark the current page for assistive technology.
How to add basic Bootstrap pagination
This example uses Bootstrap 5.3’s documented classes. Replace the sample destinations with the URLs or routes your application uses.
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>The nav element creates a navigation landmark; its purpose-specific label distinguishes it from other navigation regions on the page. The list and its items provide the component structure, while .page-link styles each destination. Avoid leaving href="#" in production: use a real destination or application route.
Recommended Free Tools
The markup presents page navigation. Your application must still determine which records belong on each page and handle routing, URL state, and any data loading.
#1 Best Overall
Represent the current page and disabled controls
Current page
Give the current item both the .active class and aria-current="page". The class provides the visual state; the ARIA attribute communicates which page is current to assistive technology. Bootstrap also demonstrates a noninteractive <span> for a current item when it should not be a link.
Disabled previous or next links
.disabled changes appearance and pointer behavior, but does not fully remove an anchor from keyboard interaction. For a disabled anchor, Bootstrap advises adding tabindex="-1" and using custom JavaScript to disable its function. If the control should not be interactive, use a noninteractive element such as a <span> instead.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
<li class="page-item disabled">
<a class="page-link" href="/search?page=1" tabindex="-1" aria-disabled="true">Previous</a>
</li>Make the actual keyboard and activation behavior agree with the disabled appearance; ARIA and styling alone do not prevent an anchor from navigating.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Choose labels for previous and next controls
Text labels such as “Previous” and “Next” are clear by themselves. If you use icon-only controls, give each one an accessible name and hide a purely decorative symbol from assistive technology. Bootstrap’s example uses an aria-label on the link and aria-hidden="true" on the decorative icon.
Rank #3
<li class="page-item">
<a class="page-link" href="/search?page=1" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>Adjust pagination size and alignment
Bootstrap provides size modifiers and flexbox utilities for common layout variations. Apply the size class to the pagination list and the alignment utility to that list.
| Need | Class | Effect |
|---|---|---|
| Default size | pagination |
Standard pagination presentation |
| Larger controls | pagination pagination-lg |
Larger pagination items |
| Smaller controls | pagination pagination-sm |
Smaller pagination items |
| Center alignment | pagination justify-content-center |
Centers the list |
| End alignment | pagination justify-content-end |
Aligns the list at the end |
For example, use <ul class="pagination pagination-lg justify-content-center"> for a larger, centered bar. Bootstrap 5.3 also documents local CSS variables for component customization and continued Sass customization; use the approach that fits how your project manages styles.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Check accessibility and version compatibility
- Use a descriptive label on the pagination navigation landmark, especially when a page has more than one navigation region.
- Mark the linked current page with
aria-current="page", not just a visual class. - Ensure a disabled control cannot be activated or misleadingly reached by keyboard.
- Review the actual colors and states in your design for sufficient contrast. Bootstrap notes that generic components can require additional ARIA attributes or JavaScript to provide appropriate semantics and behavior.
- Use documentation for the Bootstrap version installed in your project. Markup and utility classes can differ between Bootstrap 3, Bootstrap 4, and Bootstrap 5; the examples here follow the Bootstrap 5.3 pagination documentation.
Use React Bootstrap only in a React project
If the page is built with React and uses React Bootstrap, its Pagination components provide a framework-specific alternative to writing the plain HTML structure. The documented API includes first, previous, next, and last controls, numbered items, ellipses, and active and disabled states. Follow the React Bootstrap API rather than mixing its component props with the plain Bootstrap markup above. See the React Bootstrap Pagination documentation.
Free tools Windows power users keep installed
One-click scans. No signup required.
Quick Recap
Official references
- Bootstrap 5.3 Pagination covers the markup, states, accessible examples, sizing, alignment, and customization.
- Bootstrap Accessibility explains broader considerations for component semantics, behavior, and contrast.
- Bootstrap 4.0 Pagination and Bootstrap 3.3 Pagination show older version-specific patterns.
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.
