Bootstrap – Pagination

This article discusses about the Bootstrap pagination feature, that rovide pagination links for your site or app with the multi-page pagination component

Default pagination, States, Sizing

Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.

 

Class Sample code
.pagination
<ul class = "pagination">
   <li><a href = "#">&laquo;</a></li>
   <li><a href = "#">1</a></li>
   .......
</ul>
.disabled, .active
<ul class = "pagination">
   <li class = "disabled"><a href = "#">&laquo;</a></li>
   <li class = "active"><a href = "#">1<span class = "sr-only">(current)</span></a></li>
   .......
</ul>
.pagination-lg, .pagination-sm
<ul class = "pagination pagination-lg">...</ul>
<ul class = "pagination">...</ul>
<ul class = "pagination pagination-sm">...</ul>

Pager, Aligned Links, States

Quick previous and next links for simple pagination implementations with light markup and styles. It’s great for simple sites like blogs or magazines.

Class Sample code
.pager
<ul class = "pager">
   <li><a href = "#">Previous</a></li>
   <li><a href = "#">Next</a></li>
</ul>
.previous, .next
<ul class = "pager">
   <li class = "previous"><a href = "#">&larr; Older</a></li>
   <li class = "next"><a href = "#">Newer &rarr;</a></li>
</ul>
.disabled
<ul class = "pager">
   <li class = "previous disabled"><a href = "#">&larr; Older</a></li>
   <li class = "next"><a href = "#">Newer &rarr;</a></li>
</ul>

 

Leave a Reply

Your email address will not be published.

*