برای صفحه بندی از کلاس pagination استفاده می کنیم.همچنین می توانیم با توجه به نیاز خود و نوع صفحه بندی از تگ <nav> استفاده کنیم.مثلا برای نتایج جستجو می توانیم از کلاس Search results pages در این تگ استفاده کنیم.

<nav aria-label="Search results pages">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">قبل</a></li>
    <li class="page-item"><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="#">بعد</a></li>
  </ul>
</nav>

درصورتیکه به جای کلمات قبل و بعد بخواهیم از آیکون استاده کنیم بصورت زیر عمل می کنیم

<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">&laquo;</span>
        <span class="sr-only">قبل</span>
      </a>
    </li>
    <li class="page-item"><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">&raquo;</span>
        <span class="sr-only">بعد</span>
      </a>
    </li>
  </ul>
</nav>