Pagination

Pagination links indicate a series of related content exists across multiple pages. Typically these are used where a multi-page approach to long lists of content improves general performance, such as in search results or inboxes.

Basic example

Numbers only

1
2
3
4
5
6

Numbers with direction links

1
2
3
4
5
6

Numbers, direction links and boundary links

1
2
3
4
5
6

Disabled and active states

Pagination links are customizable for different circumstances. Use `.disabled`for links that appear un-clickable and `.active`to indicate the current page.

1
2
3
4
5
6

Alignment

Change the alignment of pagination components with flexbox utilities.

Centered

1
2
3
4
5
6

Right aligned

1
2
3
4
5
6