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.
.pagination in the
<ul> element and
.page-item in the
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
.active with the link that indicates the current page and
.disabled with links that are unclickable.
Smaller and Larger Pagination Links
.pagination-sm for small and
.pagination-lg for large pagination links.
You can change the alignment of the pagination within the page using flexbox utilities.
.pagination aligns the pagination on the center. And
.justify-content-end aligns the pagination on the right.