A basic pagination with active item


Pagination with separated Next and Previous icons

To create separated pagination use .prev-item class for the first item and .next-item for the last item.

With icon and text

Pagination with icon and text

Only icons

Pagination with only icons


Use class .pagination-success with .pagination


Use class .pagination-danger with .pagination


Use class .pagination-warning with .pagination


Use class .pagination-info with .pagination

Pagination Positions

Use classes .justify-content-{direction} with .pagination to align your pagination.

Left Aligned
Center Aligned
Right Aligned

Pagination Sizes

Use class .pagination-lg for large size pagination & use .pagination-sm for small size pagination. For Default size no classes required.

Pagination Sizes

Dynamic Pagination

We are using jQuery Pagination plugin. This jQuery plugin simplifies the usage of Bootstrap Pagination. It uses appropriate classes: .pagination, .active and .disabled.

Default Pagination

You are on page 1

Default Pagination with last & first

You are on page 1

Pagination drop you here after reload

Warning! Page will reload.
You are on page 1

Set Start Page Of Pagination

Your start Page 5

Theme Customizer

Customize & Preview in Real Time


Menu Collapsed

Navbar Color