Pagination
Provide pagination links for your site or app with the multi-page pagination component
Default Pagination
Simple, scable pagination by adding the .paginationclass. You can also add .disablefor unselectable links or .activeto 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-lgor .pagination-smclass
Positioning
Paginations can be placed anywhere with any alignments by wrapping the pagination with divand giving it a text-left, text-centeror text-rightclass
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 .previousand .nextclasses to the li