Paginations

Provide pagination links for your site or app with the multi-page pagination component

Default Pagination

Simple, scable pagination by adding the .pagination class. You can also add .disable for unselectable links or .active to indicate current page

<ul class="pagination">
  <li class="disabled"><a href="#"><i class="fa fa-angle-double-left"></i></a></li>
  <li class="active"><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#"><i class="fa fa-angle-double-right"></i></a></li>
</ul>

Sizing

Add smaller or larger pagination with the .pagination-lg or .pagination-sm class

Default Pager

Quick previous and next links for simple pagination implementations with light markup and styles

<ul class="pager">
  <li><a href="#">Previous</a></li>
  <li><a href="#">Next</a></li>
</ul>

Aligned Links

Alternatively, you can align each link to the sides by adding the .previous and .next classes to the li

• Older
• Newer

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.

Default Date Paginator

Default initialization, with no extra options set

With Event Handler (On Date Selected) Try selecting a date

Fired when the selected date changes. You can bind to it using either the callback handler or the standard jQuery .on method

Large Date Paginator

As easy as setting {size: "large"}

Small Date Paginator

Simply set {size: "small"}