Pagination | Multipurpose Tailwind CSS 4 & Bootstrap 5 Admin Dashboard Template

Pagination

Default Pagination

Use .pagination inside <nav> for accessible, easy-to-click page links.

Alignment

Align pagination using flexbox utilities, such as .justify-content-center to center it.

Custom Color Pagination

Add classes like .pagination-primary , .pagination-info , or .pagination-secondary to customize pagination color.

1
2
3
4
5

1
2
3
4
5

Disabled and active states

Add .disabled and tabindex="-1" to .page-item to make it non-interactive.

Custom Icon Pagination

Add icons like <i class="YOUR ICON"></i> or SVGs inside .page-link for custom pagination arrows.

1
2
3
4
5

1
2
3
4
5

Sizing

Use .pagination-lg or .pagination-sm to change pagination size.

1
2
3

1
2
3

Boxed Pagination

Use .pagination-boxed with .pagination to give pagination items a boxed appearance.

1
2
3
4
5

1
2
3
4
5

1
2
3
4
5

Rounded Pagination

Use .pagination-rounded with .pagination to create rounded pagination links.

1
2
3
4
5

Soft Pagination

Use .pagination-soft-** with .pagination for a soft-colored pagination style.

1
2
3
4
5