<!-- Default Pagination -->
<div class="card card-default align-items-center">
  <div class="card-header">
    <h2>Default Pagination </h2>
  </div>
  <div class="card-body">

    <nav aria-label="Page navigation example">
      <ul class="pagination">
        <li class="page-item">
          <a class="page-link" href="#" aria-label="Previous">
            <span aria-hidden="true" class="mdi mdi-chevron-left"></span>
            <span class="sr-only">Previous</span>
          </a>
        </li>
        <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">
          <a class="page-link" href="#" aria-label="Next">
            <span aria-hidden="true" class="mdi mdi-chevron-right"></span>
            <span class="sr-only">Next</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</div>
<!-- Flat Pagination -->
<div class="card card-default align-items-center">
  <div class="card-header">
    <h2>Flat Pagination </h2>
  </div>
  <div class="card-body">

    <nav aria-label="Page navigation example">
      <ul class="pagination pagination-flat ">
        <li class="page-item">
          <a class="page-link" href="#" aria-label="Previous">
            <span aria-hidden="true" class="mdi mdi-chevron-left"></span>
            <span class="sr-only">Previous</span>
          </a>
        </li>
        <li class="page-item ">
          <a class="page-link" href="#">1</a>
        </li>
        <li class="page-item active">
          <a class="page-link" href="#">2</a>
        </li>
        <li class="page-item">
          <a class="page-link" href="#">3</a>
        </li>
        <li class="page-item">
          <a class="page-link" href="#" aria-label="Next">
            <span aria-hidden="true" class="mdi mdi-chevron-right"></span>
            <span class="sr-only">Next</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</div>

<!-- Separated Pagination -->
<div class="card card-default align-items-center">
  <div class="card-header">
    <h2>Separated Pagination</h2>
  </div>
  <div class="card-body">

    <nav aria-label="Page navigation example">
      <ul class="pagination pagination-seperated">
        <li class="page-item">
          <a class="page-link" href="#" aria-label="Previous">
            <span aria-hidden="true" class="mdi mdi-chevron-left mr-1"></span> Prev
            <span class="sr-only">Previous</span>
          </a>
        </li>
        <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">
          <a class="page-link" href="#" aria-label="Next">
            Next
            <span aria-hidden="true" class="mdi mdi-chevron-right ml-1"></span>
            <span class="sr-only">Next</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</div>

<!-- Bordered Rounded -->
<div class="card card-default align-items-center">
  <div class="card-header">
    <h2>Bordered Rounded</h2>
  </div>
  <div class="card-body">

    <nav aria-label="Page navigation example">
      <ul class="pagination border-rounded">
        <li class="page-item">
          <a class="page-link" href="#" aria-label="Previous">
            <span aria-hidden="true" class="mdi mdi-chevron-left"></span>
            <span class="sr-only">Previous</span>
          </a>
        </li>
        <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">
          <a class="page-link" href="#" aria-label="Next">
            <span aria-hidden="true" class="mdi mdi-chevron-right"></span>
            <span class="sr-only">Next</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</div>

<!-- Flat Rounded Pagination -->
<div class="card card-default align-items-center">
  <div class="card-header">
    <h2>Flat Rounded Pagination</h2>
  </div>
  <div class="card-body">

    <nav aria-label="Page navigation example">
      <ul class="pagination pagination-flat pagination-flat-rounded">
        <li class="page-item">
          <a class="page-link" href="#" aria-label="Previous">
            <span aria-hidden="true" class="mdi mdi-chevron-left"></span>
            <span class="sr-only">Previous</span>
          </a>
        </li>
        <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">
          <a class="page-link" href="#" aria-label="Next">
            <span aria-hidden="true" class="mdi mdi-chevron-right"></span>
            <span class="sr-only">Next</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</div>

<!-- Separated Rounded Pagination -->
<div class="card card-default align-items-center">
  <div class="card-header">
    <h2>Separated Rounded Pagination</h2>
  </div>
  <div class="card-body">

    <nav aria-label="Page navigation example">
      <ul class="pagination pagination-seperated pagination-seperated-rounded">
        <li class="page-item">
          <a class="page-link" href="#" aria-label="Previous">
            <span aria-hidden="true" class="mdi mdi-chevron-left mr-1"></span> Prev
            <span class="sr-only">Previous</span>
          </a>
        </li>
        <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">
          <a class="page-link" href="#" aria-label="Next">
            Next
            <span aria-hidden="true" class="mdi mdi-chevron-right ml-1"></span>
            <span class="sr-only">Next</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</div>

<!-- Right Pagination -->
<div class="card card-default align-items-end">
  <div class="card-header">
    <h2>Right Pagination</h2>
  </div>
  <div class="card-body">
    <nav aria-label="Page navigation example">
      <ul class="pagination">
        <li class="page-item">
          <a class="page-link" href="#" aria-label="Previous">
            <span aria-hidden="true" class="mdi mdi-chevron-left"></span>
            <span class="sr-only">Previous</span>
          </a>
        </li>
        <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">
          <a class="page-link" href="#" aria-label="Next">
            <span aria-hidden="true" class="mdi mdi-chevron-right"></span>
            <span class="sr-only">Next</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</div>