Dashboard
Cards & Widgets
Charts
Forms
UI Elements
Tables
Maps
Mailbox
Pages

Pagination

Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.

Basic Pagination

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>
Pagination for Dark Background

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>
Colored Pagination

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>