Pagination

If your website has many pages, you might want to include pagination for easier navigation.

To make a basic pagination, use the .pagination class on a <ul> element, add .page-item to each <li> and apply .page-link to the links inside

Output 1:

Active State

The .active class is used to "highlight" the current page:

Output:

Disabled State

Use the .disabled class to make links appear inactive and unclickable.

Output:

Pagination Sizing

Pagination can be adjusted to appear larger or smaller using size classes.

Use the .pagination-lg class for large pagination blocks, or .pagination-sm for small ones.

Output:

Pagination Alignment

Apply utility classes to adjust the alignment of the pagination.

Output:

Breadcrumbs

Breadcrumbs are another way to display pagination or navigation paths.

Output:

« Previous Next »