Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →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 is a set of page links built with a <nav> landmark, a <ul class="pagination">, and list items containing links. The example below targets Bootstrap 5.3. If your project uses another version, follow the documentation for that installed version; the core structure also appears in the Bootstrap 5.0 docs.
How do I add pagination in Bootstrap?
Use a real destination URL for each working link, identify the current page, and give the navigation a label that explains its purpose. This Bootstrap 5.3 example uses page numbers and Previous/Next links:
<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>Replace the sample paths with URLs that actually load the corresponding page of your content. The markup provides navigation styling; your application or server must supply the destinations and the right content for each page.
How should the current page and disabled controls work?
Marking the current page
Put .active on the current page’s .page-item. If that item is an anchor, add aria-current="page" so assistive technology can identify it as the current page. If the current page does not need to be a link, use a <span class="page-link"> instead.
#1 Best Overall
Handling an unavailable Previous or Next link
The .disabled class supplies disabled styling, but it is not a complete way to disable an anchor. Bootstrap notes that pointer-events: none is not standardized for this purpose and does not prevent keyboard navigation. For an anchor, Bootstrap recommends adding tabindex="-1" and using custom JavaScript to disable its functionality. If the control should not be interactive at all, use a span instead of an anchor.
How can I change pagination size or alignment?
Size
Bootstrap 5.3 provides .pagination-sm for a smaller presentation and .pagination-lg for a larger one. Add the class to the pagination list:
<ul class="pagination pagination-sm">...</ul>
<ul class="pagination pagination-lg">...</ul>Alignment
Use flex alignment utilities on the list to place the controls at the center or end of their available space. For example, .justify-content-center centers the list and .justify-content-end aligns it to the end:
<ul class="pagination justify-content-center">...</ul>
<ul class="pagination justify-content-end">...</ul>Choose the alignment that fits the surrounding layout; Bootstrap does not prescribe one as universally best.
What if I use arrows instead of Previous and Next?
If the design uses symbols in place of words, make sure the controls still have accessible names. Bootstrap advises adding screen-reader support with ARIA attributes when substituting symbols. Do not rely on a visual arrow alone to communicate the action or destination.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Which Bootstrap version should I follow?
The examples here target Bootstrap 5.3. Bootstrap 5.0 documentation shares the main pagination structure, but some details and wording differ between the versioned docs. Check the version installed in your project and use its matching guidance: Bootstrap 5.3 Pagination documentation or Bootstrap 5.0 Pagination documentation.
Quick Recap
Rank #4
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.
