We 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 wrapping
< nav >
element to identify it as a navigation section to screen readers and
other assistive technologies.
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 links are customizable for different circumstances. Use .disabled
for
links that appear un-clickable and .active
to indicate the current page.
Fancy larger or smaller pagination? Add .pagination-lg
or
.pagination-sm
for additional sizes.
Change the alignment of pagination components with flexbox utilities.
Change the alignment of pagination components with flexbox utilities.