### Pagination

### $5,668

Sales

#### 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.

#### Pagination Sizes With Border

#### Flat Styled Pagination Sizes

#### Pager Pagination

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

#### Basic Pager

- Previous
- Next

Use class `.pager` for basic pager pagination.

#### square Pager

- Previous
- Next

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

#### Round Pager

- Previous
- Next

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

#### Flat Pager

- Previous
- Next

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

#### Aligned to side Pager

- Previous
- Next

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

#### Aligned to side square Pager

- Previous
- Next

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

#### Align to side Round Pager

- Previous
- Next

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

#### Align to side Flat Pager

- Previous
- Next

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

#### Disabled Pager

- Previous
- Next

Use class `.disabled` for disabled pager.

#### Disabled square Pager

- Previous
- Next

Use class `.disabled` for disabled pager.

#### Disabled Round Pager

- Previous
- Next

Use class `.disabled` for disabled pager.

#### Disabled Flat Pager

- Previous
- Next

Use class `.disabled` for disabled pager.

#### Aligned to side disabled Pager

- Previous
- Next

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

#### Aligned to side disabled square Pager

- Previous
- Next

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

#### Align to side disabled Round Pager

- Previous
- Next

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

#### Align to side disabled Flat Pager

- Previous
- Next

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

- Previous
- Next

##### Center Align

- Previous
- Next

##### Right Align

- Previous
- Next

#### 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`