Page Views
1,600
Likes
345
Bugs Fixed
21
New Members
124
Gifts
16
Tasks
17

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

Demo Settings
Fixed Header
Boxed Layout
Collapse Leftbar
Topnav
Sidebar