Default Pagination

Simple pagination for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.

Basic Pagination

Default pagination without next previous.

Pagination with Next/Prev Arrows

Default pagination with next previous icons.

Pagination with Next/Prev Link

Default pagination with next previous links.

Pagination with Next/Prev Link & Arrows

Default pagination with next previous icons & text.

Pagination Round Style

Round Pagination

Round Style pagination use .pagination-round to .pagination class.

Round Style Pagination with Next/Prev Arrows

Round Style pagination use .pagination-round to .pagination class with Previous Next Icons.

Round Style Pagination with Next/Prev Link

Round Style pagination use .pagination-round to .pagination class with Previous Next Icons & Text.

Separated Round Styled Pagination

Separated Round Style pagination use .pagination-round & .pagination-separate to .pagination class.

Pagination Positions

Use wrapper classes for pagination. To align left, use class .justify-content-start. To align center, use class .justify-content-center. To align right, use class .justify-content-end.

Left Align
Center Align
Right Align

Pagination Sizes

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

Pager Pagination

Quick previous and next links for simple pagination implementations. It's great for simple sites like blogs or magazines.

Basic Pager

Use class .pager for basic pager pagination.

Round Pager

Use class .pager.pager-round for pager pagination with Round border.

Aligned to side Pager

Use class .previous & .next for links aligned to sides.

Align to side Round Pager

Use class .previous & .next for links aligned to sides.

Disabled Pager

Use class .disabled for disabled pager.

Disabled Round Pager

Use class .disabled for disabled pager.

Aligned to side disabled Pager

Use class .previous & .next for links aligned to sides & .disabled to disabled pager.

Align to side disabled Round Pager

Use class .previous & .next for links aligned to sides & .disabled to disabled pager.

Pager Positions

Use wrapper classes for pager. To align left, use class .float-left. Default is center align. To align right, use class .float-right.

Left Align
Center Align
Right Align

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 be reload.
You are on page 1

Set Start Page Of Pagination

Your start Page 5
Navbar Color Options

Layout Options

Sidebar menu Background


Sidebar Background Image
background image
background image
background image
background image

Try Layout Builder