Pagination
Pagination
Use default Bootstrap markup to display Pagination elements. See the Bootstrap documentation to change alignments & sizes.
Custom pagination
Create fancy pagination using .custom-paginationmodifier class.
Rounded pagination
Use the .pagination-roundedmodifier class to make custom pagination more rounded.
Filled pagination
Use the .pagination-filledmodifier class to make filled pagination.
Simple pagination
Fancy minimal simple style pagination? Create using .pagination-simplemodifier class.
Working 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-onlyutility.
Color variations
Simply add .active-*color modifier class with .activeto change colors.
| Class | Values |
|---|---|
class="page-item active active-[value]" | primary / success / warning / danger / info / light / dark / red / green / pink / purple / violet / indigo / blue / sky / cyan / teal / neon / lime / sun / yellow / orange / pumpkin / brown / grey / gold / smoke |
Alignment
Use justify-contentutility classes to align pagination - center, right & full justified.