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>

Justified Pagination

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>

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>

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]"

Circled Pagination

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>

Rounded Pagination

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>