Victoria Baker
 Santa Ana, CA

Components - Pagination

Statistics Invoices Schedule
Pagination layouts Basic pagination layout examples
Bordered pagination

Default bordered pagination

Flat pagination

Using pagination-flat class

Separated pagination

Using pagination-separated class

Bordered rounded

Using .pagination-rounded class

Flat rounded

Using .pagination-rounded-all class

Separated rounded

Using .pagination-rounded-all class

Pagination options Pagination sizes and positions
Bordered pagination

Sizes of a default pagination

Flat pagination

Sizes of a flat pagination

Separated pagination

Sizes of a separated pagination

Left position

Default left pagination position

Center position

Centered pagination position

Right position

Right pagination position

Pager component Simple pager component
Default pager

Basic pager example

Aligned pager links

Links aligned to the sides

Disabled state

Pager with disabled utility class

Rounded pager

Example of a rounded pager

Aligned pager links

Aligned rounded links

Disabled state

Disabled state of rounded link

Linked pager

Pager buttons as grouped links

Aligned pager links

Aligned linked buttons

Disabled state

Disabled state of linked pager

Pager options Pager sizes and positions
Default pager sizes

Large, default and small sizes

Rounded pager sizes

Large, default and small sizes

Linked pager sizes

Large, default and small sizes

Left position

Optional left pager position

Centered position

Default centered pager position

Right position

Optional right pager position

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

              © 2015. Limitless Web App Kit by Eugene Kopyov