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
Adjust pagination size to match your design needs using pagination-lg for larger
controls or pagination-sm for more compact displays. These modifiers affect the
padding and font size of pagination items.
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.