<!-- Default Pagination -->
<div class="card card-default align-items-center">
  <div class="card-header">
    <h2>صفحه بندی پیشفرض </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-right"></span>
            <span class="sr-only">قبلی</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-left"></span>
            <span class="sr-only">بعدی</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</div>
<!-- Flat Pagination -->
<div class="card card-default align-items-center">
  <div class="card-header">
    <h2>صفحه بندی مسطح </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-right"></span>
            <span class="sr-only">قبلی</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-left></span>
            <span class="sr-only">بعدی</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</div>

<!-- Separated Pagination -->
<div class="card card-default align-items-center">
  <div class="card-header">
    <h2>صفحه بندی جداگانه</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-right mr-1"></span> قبلی
            <span class="sr-only">قبلی</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-left ml-1"></span>
            <span class="sr-only">بعدی</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</div>

<!-- Bordered Rounded -->
<div class="card card-default align-items-center">
  <div class="card-header">
    <h2>حاشیه گرد</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-right"></span>
            <span class="sr-only">قبلی</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-left"></span>
            <span class="sr-only">بعدی</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</div>

<!-- Flat Rounded Pagination -->
<div class="card card-default align-items-center">
  <div class="card-header">
    <h2>صفحه بندی گرد و تخت</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-right"></span>
            <span class="sr-only">قبلی</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-left"></span>
            <span class="sr-only">بعدی</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</div>

<!-- Separated Rounded Pagination -->
<div class="card card-default align-items-center">
  <div class="card-header">
    <h2>صفحه‌بندی گرد مجزا</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-right mr-1"></span> قبلی
            <span class="sr-only">قبلی</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-left ml-1"></span>
            <span class="sr-only">بعدی</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</div>

<!-- Left Pagination -->
<div class="card card-default align-items-end">
  <div class="card-header">
    <h2>صفحه‌بندی چپ</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-right"></span>
            <span class="sr-only">قبلی</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-left"></span>
            <span class="sr-only">بعدی</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</div>