Basic
A basic pagination with active item
Basic with bootstrap structure
A basic bootstrap pagination with Next and Previous links
Bootstrap pagination with icons
A bootstrap pagination with Next and Previous links with icons
Separated
Pagination with separated Next and Previous icons
To create separated pagination use .prev-item
class for the first item and
.next-item
for the last item.
With icon and text
Pagination with icon and text
Only icons
Pagination with only icons
Success
Use class .pagination-success
with .pagination
Danger
Use class .pagination-danger
with .pagination
Warning
Use class .pagination-warning
with .pagination
Info
Use class .pagination-info
with .pagination
Pagination Positions
Use classes .justify-content-{direction}
with .pagination
to align your
pagination.
Left Aligned
Center Aligned
Right Aligned
Pagination Sizes
Use class .pagination-lg
for large size pagination & use .pagination-sm
for small
size pagination. For Default size no classes required.
Pagination Sizes
Dynamic Pagination
We are using jQuery Pagination plugin. This jQuery plugin simplifies the usage of Bootstrap
Pagination. It uses appropriate classes: .pagination
, .active
and
.disabled
.