Pagination
Bootstrap 5.3 .pagination with .page-item + .page-link. Use aria-label on <nav>, aria-current="page" on the active item, and <span class="page-link"> for disabled or ellipsis gaps. CSS variables override colors per variant—toggle the navbar theme to check contrast.
Patterns for real products
Docs show the minimum; listings need ellipsis, first/last controls, compact mobile rows, toolbars with result counts, and table footers. Pair pagination with justify-content-* and responsive flex-wrap so controls never overflow awkwardly.
Standard · correct list markup
Every control sits in .page-item; links use .page-link (or span.page-link when inert).
Icon prev / next
Disabled ends
Large · pagination-lg
Small · pagination-sm
Alignment utilities
Ellipsis gap · many pages
Use .disabled on the item and a span.page-link for non-interactive ellipses.
Pill segments
Soft chips
Minimal · link-like
Primary accent · CSS variables
Stepper · wizard progress
Connectors are decorative; keep real state in aria-current on the active step.
Vertical stack
Use flex-direction: column on the list for sidebar steppers or narrow panels.
Toolbar · results + pages
Embedded in card header
Browse catalog
Page 6 of 24Header stacks on small viewports; pagination stays keyboard-focusable.
Table footer bar · inverted
Override pagination variables for dark bars; active page uses a light pill for contrast.