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.
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.
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 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.
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
Separate Styled Pagination
Separate Round Styled Pagination
Default Pagination with last & first
Separate Styled Pagination with last & first
Separate Round Styled Pagination with last & first
URL Pagination Link
Pagination drop you here after reload
Set Start Page Of Pagination
Pagination Loop
Synchronized Pagination
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