Pagination layouts
Basic pagination layout examples
Bordered pagination

Default bordered pagination

Flat pagination

Using pagination-flat class

Separated pagination

Using pagination-separated class

Bordered rounded

Using .pagination-rounded class

Flat rounded

Using .pagination-rounded-all class

Separated rounded

Using .pagination-rounded-all class

Pagination options
Pagination sizes and positions
Bordered pagination

Default bordered pagination

Flat pagination

Using pagination-flat class

Separated pagination

Using pagination-separated class

Bordered pagination

Sizes of a default pagination

Flat pagination

Sizes of a flat pagination

Separated pagination

Sizes of a separated pagination

Left position

Default left pagination position

Center position

Centered pagination position

Right position

Right pagination position

Pager component
Simple pager component
Default pager

Basic pager example

Aligned pager links

Links aligned to the sides

Disabled state

Pager with disabled utility class

Rounded pager

Example of a rounded pager

Aligned pager links

Aligned rounded links

Disabled state

Disabled state of rounded link

Linked pager

Pager buttons as grouped links

Aligned pager links

Aligned linked buttons

Disabled state

Disabled state of linked pager

Pager options
Pager sizes and positions
Default pager sizes

Large, default and small sizes

Rounded pager sizes

Large, default and small sizes

Linked pager sizes

Large, default and small sizes

Left position

Optional left pager position

Centered position

Default centered pager position

Right position

Optional right pager position