Pagination
The pagination styles
Examples
Source
Alignment
You can change the alignment by use Text alignment utility on the <nav> element.
Align center
Source
Align right
Source
Much much many pages
Loose
Add class space-loose to pagination element which contain class rd-pagination.
Source
<ul class="rd-pagination space-loose">...</ul>Pager
Display pagination as previous/next
Source
Pager loose
Source
<ul class="rd-pagination space-loose">...</ul>Pager loose use button
Source
Pager to the edge
Horizontal align button to the left & right of the page. Add the class space-edge to pagination element which contain class rd-pagination.
Please note that this will be change the pagination element to display: flex;.
Source
<ul class="rd-pagination space-edge">...</ul>Advanced
Advanced pagination is the mixed between page numbers, pager (previous/next), input page, select page.
To do this, add class advanced to pagination element which contain class rd-pagination.