Bootstrap 5 pagination provides navigation between multiple pages of content. This page covers 4 pagination patterns — basic, sizes, alignment and custom styled — each ready to use with tables and content lists.
Quick Setup
Pagination needs only Bootstrap 5 CSS:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
Key Classes Reference
| Class | What It Does |
|---|---|
.pagination | Required wrapper ul element |
.page-item | Each li in the pagination |
.page-link | The clickable link inside page-item |
.page-item.active | Highlights current page |
.page-item.disabled | Grays out prev/next at boundaries |
.pagination-sm | Small pagination size |
.pagination-lg | Large pagination size |
.justify-content-center | Centers pagination |
.justify-content-end | Right-aligns pagination |
1. Basic Bootstrap 5 Pagination
Standard pagination with numbered pages, prev and next buttons. Active and disabled states included.
2. Bootstrap 5 Pagination Sizes
Pagination in small, default and large sizes using pagination-sm and pagination-lg.
3. Bootstrap 5 Pagination Alignment
Paginate left, center or right using justify-content flex utilities.
4. Bootstrap 5 Custom Styled Pagination
Pagination with custom brand colors, rounded pills and info text.
Frequently Asked Questions
Track current page in a variable. On page-link click update currentPage and re-render visible items: items.forEach((item, i) => item.style.display = (i >= (currentPage-1)*perPage && i < currentPage*perPage) ? '' : 'none'). Update active class on page links after each change.
Override the active page-link CSS: .page-item.active .page-link { background-color: #fd4766; border-color: #fd4766; }. Also override the hover state: .page-link:hover { color: #fd4766; }. For link color override: .page-link { color: #fd4766; }.
Add a disabled list item with three dots: <li class='page-item disabled'><span class='page-link'>…</span></li>. Place it between the visible page numbers and the last page. This signals to users that pages exist between the visible range.
Add aria-label to the nav element: <nav aria-label='Page navigation'>. Mark the active page: <li class='page-item active' aria-current='page'>. Use aria-label on prev/next buttons: <a aria-label='Previous page'>. Add sr-only text inside icon-only buttons for screen readers.
Add a text element beside the pagination: <span class='text-muted small'>Page 2 of 10</span>. Wrap both in a d-flex justify-content-between container. Update the text dynamically with JavaScript when the page changes.
Need a Full Bootstrap 5 Admin Dashboard?
Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.
Browse Templates →Use code FIRST30 for 30% off your first purchase.