Pagination

Provide pagination links for your site or app with the multi-page pagination component.

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.

Separated Pagination with Next/Prev Arrows

For Separated pagination, use class .pagination-separate with Next Previous Icons.

Pagination with Next/Prev Link

For Separated pagination, use class .pagination-separate with Next Previous Icons & Text.

Flat Pagination

Flat pagination need class .pagination-flat to .pagination class.

Flat Pagination with Next/Prev Arrows

Flat pagination need class .pagination-flat to .pagination class.

Flat Pagination with Next/Prev Link

Flat pagination need class .pagination-flat to .pagination class.

Flat Pagination with Next/Prev Text

Flat pagination need class .pagination-flat to .pagination class.

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.

Separated Round Styled Pagination with Next/Prev Arrows

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

Separated Round Styled Pagination with Next/Prev Link

Separated Round Style pagination use .pagination-round & .pagination-separate to .pagination class with Previous Next Icons & text.

Separated Flat Round Styled Pagination

Separated Flat Round Styled pagination need class .pagination-flat with round and separated styled classes.

Separated Flat Round Styled Pagination with Next/Prev Arrows

Separated Flat Round Styled pagination need class .pagination-flat with round and separated styled classes & previous next icons.

Separated Flat Round Styled Pagination with Next/Prev Link

Separated Flat Round Styled pagination need class .pagination-flat with round and separated styled classes & previous next icons with Text.

Separated Flat Round Styled Pagination with Next/Prev Text

Separated Flat Round Styled pagination need class .pagination-flat with round and separated styled classes & previous next icons with Text.

Curved Pagination Border Style

Separated Curve Styled Pagination

Separated Curved pagination need class .pagination-curved with separated class.

Separated Curved Styled Pagination with Next/Prev Arrows

Separated Curved pagination need class .pagination-curved with separated class & Previous Next Icons.

Separated Curved Styled Pagination with Next/Prev Link

Separated Curved pagination need class .pagination-curved with separated class & Previous Next Icons with Text.

Saperated Curved Flat Styled Pagination

Saperated Curved Flat pagination need class .pagination-flat with .pagination-separate.pagination-curved classes.

Saperated Curved Flat Styled Pagination with Next/Prev Arrows

Saperated Curved Flat pagination need class .pagination-flat with .pagination-separate.pagination-curved classes with Previous Next Icons.

Saperated Curved Flat Styled Pagination with Next/Prev Link

Saperated Curved Flat pagination need class .pagination-flat with .pagination-separate.pagination-curved classes with Previous Next Icons & Text.

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.

square Pager

Use class .pager.pager-square for square pager pagination.

Round Pager

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

Flat Pager

Use class .pager.pager-flat for pager pagination without border.

Aligned to side Pager

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

Aligned to side square Pager

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

Align to side Round Pager

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

Align to side Flat Pager

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

Disabled Pager

Use class .disabled for disabled pager.

Disabled square Pager

Use class .disabled for disabled pager.

Disabled Round Pager

Use class .disabled for disabled pager.

Disabled Flat 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.

Aligned to side disabled square 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.

Align to side disabled Flat 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

Separate Styled Pagination

You are on page 1

Separate Round Styled Pagination

You are on page 1

Default Pagination with last & first

You are on page 1

Separate Styled Pagination with last & first

You are on page 1

Separate Round Styled Pagination with last & first

You are on page 1

URL Pagination Link

Warning! Page will be reload.
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

Pagination Loop

You are on page 1

Synchronized Pagination

You are on page 1

Bootstrap Date Paginator

Default Date Paginator

Date Paginator Format

Highlight Today's Selected Date

A jQuery plugin which takes Twitter Bootstrap's already great pagination component and injects a bit of date based magic. In the process creating a hugely simplified and modularised way of paging date based results in your application.

Highlight Selected Date

For this example, you can use highlightSelectedDate option. That will descibe whether or not to distinguish visually the selected date. It's Default value is true

Hide Paginator Calendar

For this example, you can use showCalendar option.Whether or not to display the clickable calendar icon visible on selected date. By setting to false you are effectively removing the calendar date select functionality from the user. It's Default value is true

Change Selected Date

For this example, you can use selectedDate option.Sets the initial selected date, provided as either a Moment.js moment object or String. If you're planning on providing a String, please ensure you review the dateFormat option. It's Default value is moment(), equivalent to new Date()

Hide Off Days

For this example, you can use showOffDays option.Whether or not to display off days. It's Default value is true

Change Off Days

For this example, you can use offDays option.Sets days of the week to be considered off days, visually greyed out. It's Default value is 'Sat,Sun'

Hide Start Of Week

For this example, you can use showStartOfWeek option.Whether or not to display the start of week divider. It's Default value is true

Date Hover Hint

For this example, you can use hint option.Format used for on hover hint. String tokens are parsed against a given date. It's Default value is 'dddd, Do MMMM YYYY'

Small Size Paginator

For this example, you can use size option.Sets the height of the paginator component. Accepts small, normal, large. It's Default value is normal

Large Size Paginator

For this example, you can use size option.Sets the height of the paginator component. Accepts small, normal, large. It's Default value is normal

Theme Customizer


Customize & Preview in Real Time

Menu Color Options

Layout Options

Navigation Color Options
Solid
Gradient

Solid

Gradient

Buy Now