Choose your preferred layout


Menu comes in two modes: dark & light

Top Nav

Choose your liked color mode

Scrollable Header
brand brand



Use default Bootstrap markup to display Pagination elements. See the Bootstrap documentation to change alignments & sizes.

Custom pagination

Create fancy pagination using .custom-pagination modifier class.

Rounded pagination

Use the .pagination-rounded modifier class to make custom pagination more rounded.

Filled pagination

Use the .pagination-filled modifier class to make filled pagination.

Simple pagination

Fancy minimal simple style pagination? Create using .pagination-simple modifier 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-only utility.

Color variations

Simply add .active-* color modifier class with .active to 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

Use justify-content utility classes to align pagination - center, right & full justified.