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 gives readers links to move between pages of results. In Bootstrap 5.3, add a labeled <nav> landmark around a <ul class="pagination">, then give each destination a link with the page-link class. The markup styles navigation; your application still needs to provide real page destinations and manage any data or route changes.
Build a basic Bootstrap pagination bar
This Bootstrap 5.3 example links to three pages and marks page 2 as current. Replace the example URLs with real destinations or application routes.
<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 landmark identifies the control as navigation, and its label distinguishes it from other navigation regions on the page. The active class supplies the visual current-page style; aria-current="page" communicates that state to assistive technology. Bootstrap’s examples and component guidance are in the Bootstrap 5.3 pagination documentation.
Pagination markup does not divide a dataset, fetch results, or maintain URL state by itself. Make each link lead to the corresponding page, and implement any application-specific routing or data loading separately.
#1 Best Overall
Choose how to represent current and unavailable pages
Current page
Use a linked current item when readers should be able to activate it, such as to reload or revisit that page. Include both active on the list item and aria-current="page" on the link. If the current page should not be interactive, Bootstrap also supports a noninteractive <span class="page-link"> inside the active item; place the current-page semantics on the element that represents that state.
Disabled previous or next links
The disabled class changes appearance and pointer behavior, but it does not by itself make an anchor fully disabled for keyboard users. Bootstrap advises adding tabindex="-1" and using custom JavaScript to fully disable an anchor’s function. Where a destination should not be interactive at all, use a noninteractive span instead of a link.
<li class="page-item disabled">
<span class="page-link">Previous</span>
</li>
<li class="page-item">
<a class="page-link" href="/search?page=2">Next</a>
</li>Set pagination size and alignment
For a larger or smaller control, add pagination-lg or pagination-sm to the pagination list. Use Bootstrap flexbox utilities on that list to align it:
justify-content-centercenters the links.justify-content-endaligns them to the end.- With neither utility, the list starts at its normal flexbox position.
<nav aria-label="Search results pages">
<ul class="pagination pagination-sm justify-content-center">
<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>
</ul>
</nav>Bootstrap 5.3 also documents local CSS variables for component-level styling and Sass customization for broader changes. Check the pagination component documentation for the available variables and customization details.
Make previous and next controls accessible
If a previous or next control uses only an icon or symbol, give it an accessible name and hide decorative characters from assistive technology. For example:
<a class="page-link" href="/search?page=1" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>Check that a control’s keyboard behavior matches its visual state, particularly at the first and last pages. Also review the rendered colors for sufficient contrast. Bootstrap notes that generic components may need additional ARIA attributes or JavaScript for a particular use; its accessibility guidance covers these broader considerations.
Rank #4
Use the documentation for your installed Bootstrap version
Bootstrap examples can differ between major versions, including utility classes and markup details. Confirm the version used by your project, then follow its corresponding documentation rather than copying a snippet from a different release. The Bootstrap 5.3 component page is the reference for the markup and classes shown here; version-specific documentation is available for Bootstrap 4.0 and Bootstrap 3.3.
For React projects, use React Bootstrap components
In a React application using React Bootstrap, the library provides a Pagination component with numbered items, first/previous/next/last controls, ellipses, active state, and disabled state. Follow its component API rather than mixing React Bootstrap’s component syntax with plain Bootstrap HTML. See the React Bootstrap pagination documentation.
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.
