Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.
Below are basic pagination navigation.
Source Code
<div class="ht-80 bd d-flex align-items-center justify-content-center"> <nav aria-label="Page navigation"> <ul class="pagination pagination-basic mg-b-0"> <li class="page-item active"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item disabled"><span class="page-link">...</span></li> <li class="page-item"><a class="page-link" href="#">10</a></li> <li class="page-item"> <a class="page-link" href="#" aria-label="Next"> <i class="fa fa-angle-right"></i> </a> </li> <li class="page-item"> <a class="page-link" href="#" aria-label="Last"> <i class="fa fa-angle-double-right"></i> </a> </li> </ul> </nav></div>
Below are justified pagination where next and previous are in between.
Source Code
<div class="ht-80 bd pd-x-10 d-flex align-items-center justify-content-between"> <ul class="pagination pagination-basic mg-b-0"> ... </ul> <ul class="pagination pagination-basic mg-b-0"> ... </ul> <ul class="pagination pagination-basic mg-b-0"> ... </ul></div>
Below are basic pagination navigation for dark background.
Source Code
<div class="ht-80 bd bg-dark d-flex align-items-center justify-content-center"> <ul class="pagination pagination-dark mg-b-0"> ... </ul></div>
Below are the available colored pagination variants.
Source Code
<div class="ht-80 bd d-flex align-items-center justify-content-center"> <ul class="pagination pagination-basic pagination-primary mg-b-0"> ... </ul></div>
Class Reference
Class | Value |
---|---|
class="pagination pagination-basic pagination-[value]"
|
primary | success | warning | danger | info | teal | indigo | purple | pink | orange |
class="pagination pagination-dark pagination-[value]"
|
Below are basic pagination navigation in circle.
Source Code
<div class="ht-80 bd d-flex align-items-center justify-content-center"> <ul class="pagination pagination-basic pagination-circle mg-b-0"> ... </ul></div>
Below are pagination navigation in separated with rounded corner.
Source Code
<div class="ht-80 bd d-flex align-items-center justify-content-center"> <ul class="pagination pagination-basic pagination-rounded mg-b-0"> ... </ul></div>