Bootstrap 4 Components
Pagination
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.
