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.

Paginator.Js official website

Basic Pagination

Pagination With Gap

Pagination No Border

Sizing