Notifications
Default Pagination
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.
Disabled and Active States
Add .disabled to a .page-item to make it appear un-clickable. While .disabled uses
pointer-events: none to disable
.disabled for links that appear un-clickable and .active
to indicate the current page.
Sizing
Fancy larger or smaller pagination? Add .pagination-lg or
.pagination-sm for additional sizes.
Alignment
Change the alignment of pagination components with flexbox utilities. For example,
with .justify-content-center: or .justify-content-end
Custom Icon Pagination
Add .pagination-boxed for rounded pagination.
Boxed Pagination
Add .pagination-boxed for rounded pagination.
Rounded Pagination
Add .pagination-rounded for rounded pagination.
Soft Pagination
Add .pagination-rounded for rounded pagination.
Custom Color Pagination
Add .pagination-boxed for rounded pagination.
Gradient Color Pagination
Add .pagination-boxed for rounded pagination.
Default Pagination
Simple pagination inspired by Rdio, great for apps and search results.
Disabled and Active States
Pagination links are customizable for different circumstances. Use .disabled for links that appear un-clickable and .active to indicate the current page.
Alignment
Change the alignment of pagination components with flexbox utilities.
Sizing
Add .pagination-lg or .pagination-sm for additional sizes.
Custom Icon Pagination
Add .pagination-boxed for rounded pagination.
Boxed Pagination
Add .pagination-boxed for rounded pagination.
Rounded Pagination
Add .pagination-rounded for rounded pagination.
Soft Pagination
Add .pagination-rounded for rounded pagination.
Custom Color Pagination
Add .pagination-boxed for rounded pagination.
Gradient Color Pagination
Add .pagination-boxed for rounded pagination.