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 navelement to identify it as a navigation section to screen readers and other assistive technologies.
Default Pagination
it’s advisable to provide a descriptive aria-labelfor the navto 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 ariaattributes and the .sr-onlyutility.
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 .disabledfor 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-lgadditional size.
Small Pagination
Fancy smaller pagination? Add .pagination-smadditional size.





