Pagination

use a large block of connected links for our pagination, making links hard to miss and easily scalable—all while providing large hit areas. Pagination is built with list HTML elements so screen readers can announce the number of available links. Use a wrappingnav element to identify it as a navigation section to screen readers and other assistive technologies.

Default Pagination

it’s advisable to provide a descriptive aria-label for the nav to reflect its purpose

Pagination With Icons

Looking to use an icon or symbol in place of text for some pagination links? Be sure to provide proper screen reader support with aria attributes and the .sr-only utility.

Pagination With Active state

Pagination links are customizable for different circumstances. Use.activefor links that appear un-clickable.

Pagination With disabled state

Pagination links are customizable for different circumstances. Use.disabled for links that appear un-clickable.

Center Alignment Pagination

Change the alignment of pagination components with flexbox utilities.

Right Alignment Pagination

Change the alignment of pagination components with flexbox utilities.

Left Alignment Pagination

Change the alignment of pagination components with flexbox utilities.

Large Pagination

Fancy larger pagination? Add .pagination-lg additional size.

Small Pagination

Fancy smaller pagination? Add .pagination-sm additional size.