Upgrade to Pro
Get access to all features
- Advanced Analytics
- Team Collaboration
- API Access
Pagination
Pagination is an essential UI component that helps users navigate through large sets of data or content spread across multiple pages. Our pagination components are built with accessibility in mind and offer various styles and configurations to suit different design needs.
Overview
The basic pagination component provides intuitive navigation through numbered pages with
Previous/Next options. Each navigation item is structured with semantic HTML using
nav and ul elements, where individual items use the
page-item class and links use page-link.
Icon Navigation
Enhance visual navigation with Remixicon icons. This example demonstrates icon-only navigation
buttons with proper accessibility attributes. The aria-label provides context for
screen readers, while aria-hidden="true" prevents icons from being announced.
Interactive States
Pagination components support different states to indicate current position and availability.
The disabled class prevents interaction with unavailable pages, while
active highlights the current page. Use aria-current="page" to
indicate the active page for screen readers.
Size Variations
Our pagination component follows a consistent sizing system with five size variants, each optimized for different interface contexts. The sizing system uses proportionally scaled font sizes that maintain optimal readability at each height. All sizes follow the same design system as buttons, form controls, and other interactive elements for visual consistency.
Sizing Guidelines
- Extra Large (56px) - Perfect for hero sections, landing pages, and primary call-to-actions
- Large (46px) - Ideal for important navigation, primary actions, and prominent interfaces
- Default (38px) - Standard size for most pagination needs, optimal for general use
- Small (30px) - Great for dense layouts, sidebar navigation, and secondary actions
- Extra Small (24px) - Perfect for compact tables, data grids, and space-constrained areas
Alignment Options
Control pagination positioning with Bootstrap's flexbox utilities. Use
justify-content-center for centered alignment or
justify-content-end for right alignment. The default alignment is left (start).
Rounded Style
For a modern touch, use the pagination-rounded class to create circular pagination
buttons. This style works particularly well with icon-only navigation and minimal designs.
On this page