Pagination
Basic Pagination
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.
Disabled And Active States
Links are customizable for different circumstances. Use .disabled
for unclickable links and .active
to indicate the
current page.
Pagination With Gap
This pagination style has large clickable areas for each page, the current page clearly stands out from the links.
Pagination No Border
The previous and next buttons are nicely detached from the rest of the pagination through their style.
Sizing
Fancy larger or smaller pagination? Add .pagination-lg
or .pagination-sm
for additional sizes.
Pager
Default Example
By default, the pager centers links.
Round Style
Add .pager-round
make the pager looks rounded.
Aligned Links
Alternatively, you can align each link to the sides:
Optional disabled state
Pager links also use the general .disabled
utility
class from the pagination.