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
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
Pager
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