1. Home
  2. Components
  3. Pagination

Pagination

CardsButtons

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

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