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 = "#">«</a></li> <li><a href = "#">1</a></li> ....... </ul> |
| .disabled, .active |
<ul class = "pagination"> <li class = "disabled"><a href = "#">«</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 = "#">← Older</a></li> <li class = "next"><a href = "#">Newer →</a></li> </ul> |
| .disabled |
<ul class = "pager"> <li class = "previous disabled"><a href = "#">← Older</a></li> <li class = "next"><a href = "#">Newer →</a></li> </ul> |
Thank you for your post very helpful