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

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

• Older
• Newer