A basic pagination with active item


Pagination with seprated Next and Previous icons

To create seprated 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-info with .pagination


Use class .pagination-warning 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 Pagintion. 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