#### Components - Pagination

Statistics Invoices Schedule

###### Pagination layouts Basic pagination layout examples

###### Bordered pagination

Default bordered pagination

- ‹
- 1
- 2
- 3
- 4
- 5
- ›

###### Flat pagination

Using `pagination-flat` class

- ‹
- 1
- 2
- 3
- 4
- 5
- ›

###### Separated pagination

Using `pagination-separated` class

- ‹
- 1
- 2
- 3
- 4
- 5
- ›

###### Bordered rounded

Using `.pagination-rounded` class

- ‹
- 1
- 2
- 3
- 4
- 5
- ›

###### Flat rounded

Using `.pagination-rounded-all` class

- ‹
- 1
- 2
- 3
- 4
- 5
- ›

###### Separated rounded

Using `.pagination-rounded-all` class

- ‹
- 1
- 2
- 3
- 4
- 5
- ›

###### Pagination options Pagination sizes and positions

###### Bordered pagination

Sizes of a `default` pagination

- ‹
- 1
- 2
- 3
- 4
- 5
- ›

- ‹
- 1
- 2
- 3
- 4
- 5
- ›

- ‹
- 1
- 2
- 3
- 4
- 5
- ›

- ‹
- 1
- 2
- 3
- 4
- 5
- ›

###### Flat pagination

Sizes of a `flat` pagination

- ‹
- 1
- 2
- 3
- 4
- 5
- ›

- ‹
- 1
- 2
- 3
- 4
- 5
- ›

- ‹
- 1
- 2
- 3
- 4
- 5
- ›

- ‹
- 1
- 2
- 3
- 4
- 5
- ›

###### Separated pagination

Sizes of a `separated` pagination

- ‹
- 1
- 2
- 3
- 4
- 5
- ›

- ‹
- 1
- 2
- 3
- 4
- 5
- ›

- ‹
- 1
- 2
- 3
- 4
- 5
- ›

- ‹
- 1
- 2
- 3
- 4
- 5
- ›

###### Left position

Default left pagination position

- ‹
- 1
- 2
- 3
- 4
- 5
- ›

###### Center position

Centered pagination position

- ‹
- 1
- 2
- 3
- 4
- 5
- ›

###### Right position

Right pagination position

- ‹
- 1
- 2
- 3
- 4
- 5
- ›

###### Pager component Simple pager component

###### Default pager

Basic pager example

- ← Previous
- Next →

###### Aligned pager links

Links aligned to the sides

- ← Older
- Newer →

###### Disabled state

Pager with `disabled` utility class

- ← Older
- Newer →

###### Rounded pager

Example of a `rounded` pager

- ← Previous
- Next →

###### Aligned pager links

Aligned `rounded` links

- ← Older
- Newer →

###### Disabled state

Disabled state of `rounded` link

- ← Older
- Newer →

###### Linked pager

Pager buttons as grouped links

- ← Previous
- Next →

###### Aligned pager links

Aligned `linked` buttons

- ← Older
- Newer →

###### Disabled state

Disabled state of `linked` pager

- ← Older
- Newer →

###### Pager options Pager sizes and positions

###### Default pager sizes

Large, default and small sizes

- ← Previous
- Next →

- ← Previous
- Next →

- ← Previous
- Next →

- ← Previous
- Next →

###### Rounded pager sizes

Large, default and small sizes

- ← Previous
- Next →

- ← Previous
- Next →

- ← Previous
- Next →

- ← Previous
- Next →

###### Linked pager sizes

Large, default and small sizes

- ← Previous
- Next →

- ← Previous
- Next →

- ← Previous
- Next →

- ← Previous
- Next →

###### Left position

Optional `left` pager position

- ← Previous
- Next →

###### Centered position

Default `centered` pager position

- ← Previous
- Next →

###### Right position

Optional `right` pager position

- ← Previous
- Next →

###### Dynamic pagination Based on `bootpag.js` plugin

###### Basic example

Basic example with default options

Dynamic content goes here.

###### Flat pagination

Example with `flat` pagination

Dynamic content goes here.

###### Separated pagination

Example with `separated` pagination

Dynamic content goes here.

###### Prev/Next buttons

Configurable buttons text

Add text to the Prev and Next buttons

###### Set starting page

Specify page to show on start

Starting page is 3

###### Plugin events

Using `.on('page')` click event

Bootpag events

###### TWBS Pagination Another dynamic pagination for Bootstrap

###### Basic example

Basic example with default options

Dynamic content here.

###### Flat pagination layout

Example with `flat` pagination

Dynamic content here.

###### Separated pagination

Example with `separated` pagination

Dynamic content here.

###### Prev/Next buttons

Configurable buttons text

Dynamic content here.

###### Set starting page

Specify page to show on start

Dynamic content here.

###### Visible pages

Display visible amount of pages

Dynamic content here.

###### Date paginator Pagination with date picker

###### Basic configuration

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.

###### Set item width

Example below demonstrates custom item width using `itemWidth` option. Default item with is `35px`, you can set any custom width in pixels, total number of days displayed will be calculated based on this value.

###### Days format

Example below demonstrates custom text format that can be changed using `text` option. Default value is `ddd<br/>Do`, string tokens are parsed against a given date. In this example week days have a full name.

###### Disable calendar

Choose whether or not to display the clickable calendar icon visible on selected date using `showCalendar` option. By setting to `false` you are effectively removing the calendar date select functionality from the user.

###### Highlight selected date

Example below demonstrates `highlightSelectedDate` plugin option. By setting this option to `false` you can choose whether or not to distinguish visually the selected date. Here only today's date is highlighted.

###### Highlight today's date

Example below demonstrates `highlightToday` plugin option. By setting this option to `false` you can choose whether or not to distinguish visually today's date. Here only selected date is highlighted..