Pagers & Paginations

Pagination

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-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-right"></i></a></li>
</ul>
						

Sizing

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

Large pagination-lg

Regular pagination

Small pagination-sm

Positioning

Paginations can be placed anywhere with any alignments by wrapping the pagination with div and giving it a text-left, text-center or text-right class

Pagination Left

text-left

Pagination Center

text-center

Pagination Right

text-right

Pager

Default Pager

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

Just add the class .pager to a ul

<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

  • © 2016 December
  • $39K

    Expenses
  • $11K

    Net Profit
  • $29K

    Total Sales
  • Earnings this week
  • Design
    1:12PM, Thursday, November 19, 2016
    Development
    11:40AM, Sunday, November 22, 2016
    Demo Settings
    Fixed Header
    Boxed Layout
    Collapse Leftbar
    Topnav
    Sidebar