Bootstrap 4 Pagination |
Let's look into a detailed example,
Pagination with icons
You can include icons instead of next and previous content in order to improve the look of pagination.Active pagination
Include the .active class to your <li> element that highlights the current page that the user is on. For example,
See the Pen Bootstrap 4 Pagination with Active State by Prime Study Hub (@PrimeStudyHub) on CodePen.
Pagination with disabled state
Include the .disabled class to your <li> element to disable previous or next option to highlight the user reached the first or last page in the pagination options.
See the Pen Bootstrap 4 Pagination with Disabled State by Prime Study Hub (@PrimeStudyHub) on CodePen.
Pagination Sizing
- For larger pagination, include .pagination-lg class in your <ul> element.
- For smaller pagination, include .pagination-sm class in your <ul> element.
- For default, just include .pagination class in your <ul> element.
Comments