Bootstrap 4 Components


Pagination links are used when you have a series of related contents across pages. We usually see pagination links on search results when the search results span more than one pages. And it makes easier to jump next pages or skip pages in between.

To create a pagination we use unordered list elements. This is to announce to the screen readers the number of links. The links are wrapped inside a <nav> element and with aria-label to indicate to the screen readers as a navigation section and its purpose.

Use classes .pagination in the <ul> element and .page-item in the <li> elements.

Pagination with Icons

Instead of using 'previous’ and 'next’ to the pagination link add icons. But make sure that it is screen reader friendly!.

Disabled and Active Links

Use .active with the link that indicates the current page and .disabled with links that are unclickable.

Smaller and Larger Pagination Links

Use .pagination-sm for small and .pagination-lg for large pagination links.

Large pagination

Small pagination

Pagination Alignment

You can change the alignment of the pagination within the page using flexbox utilities. .justify-content-center with .pagination aligns the pagination on the center. And .justify-content-end aligns the pagination on the right.

Pagination on the right