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 uses a labeled navigation landmark containing a list: .pagination on the list, .page-item on each list item, and .page-link on each link. You provide the actual page URLs and current-page state; the classes supply the component styling.
Build the basic pagination markup
This Bootstrap 5.3 example shows Previous, three numbered pages, and Next. Replace the example paths with routes that point to real pages in your application.
<nav aria-label="Search results pages">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="/search?page=1">Previous</a>
</li>
<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>
<li class="page-item">
<a class="page-link" href="/search?page=3">Next</a>
</li>
</ul>
</nav>The navigation label should describe its purpose, especially when the page has multiple navigation landmarks. For example, use “Search results pages” for search-result pagination. Bootstrap’s documentation presents href="#" as an illustrative value; it does not implement routing or move the user between pages. See the Bootstrap 5.3 pagination documentation.
Free tools Windows power users keep installed
One-click scans. No signup required.
Mark the current page accessibly
Add active to the current page’s list item. If the current page is an anchor, add aria-current="page" to that anchor so assistive technology can identify it as the current page. If you represent the current page with a non-interactive element such as a <span>, Bootstrap says aria-current may be omitted.
#1 Best Overall
Do not rely on the visual active state alone: it identifies styling, while aria-current communicates the current-page state.
Handle Previous and Next at the boundaries
At the first page, there is no earlier page; at the last page, there is no later page. A disabled appearance does not by itself guarantee that an anchor cannot be reached or activated from the keyboard.
- Non-interactive boundary: Use a
<span class="page-link">inside the list item when the control should not be interactive or focusable. - Disabled anchor: Bootstrap’s
.disabledstyling relies onpointer-events: none, which does not handle keyboard navigation. Its guidance is to addtabindex="-1"and use custom JavaScript to fully disable the link’s functionality.
Choose the behavior deliberately: don’t leave a boundary link pointing to a route that users can still activate, and don’t treat the disabled styling as a complete interaction safeguard. Bootstrap’s component guidance describes the disabled-link caveat.
Change pagination size or alignment
Bootstrap provides size classes for the pagination list and flexbox utilities for its placement:
- Use
.pagination-smfor a smaller component or.pagination-lgfor a larger one. - Use
.justify-content-centerto center the list or.justify-content-endto align it to the end. The default alignment starts at the beginning of the flex container.
For more tailored appearance, Bootstrap 5.3 documents CSS-variable and Sass-variable customization in its pagination reference.
What Bootstrap pagination does—and what your app must provide
The component gives related pages a consistent, styled set of navigation links. It does not determine how many results appear per page, calculate page counts, generate URLs, fetch data, or update application state. Those are responsibilities of the application: render the right links for the available pages and ensure each destination returns the expected content.
Rank #4
Bootstrap also cautions that a component is not an accessibility guarantee. Its accessibility overview says a project’s accessibility depends substantially on the author’s markup, styling, and scripting. Label the navigation, expose the current page, and make disabled controls behave as intended. See Bootstrap’s accessibility overview.
Recommended Free Tools
Can you use Bootstrap pagination commercially?
Bootstrap’s official license FAQ describes the framework as MIT-licensed and permits personal, private, company-internal, and commercial use. It says to retain the license and copyright notice included in Bootstrap’s CSS and JavaScript files when using them in your work. This guidance concerns the framework license; it does not mean Bootstrap marks are unrestricted. See the Bootstrap license FAQ.
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.
