Silicon Silicon UI Kit
 Buy now

Pagination

Indicate a series of related content exists across multiple pages.

Bootstrap docs

Default example

<!-- Pagination: Basic example -->
<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item">
      <a href="#" class="page-link">
        <i class="bx bx-chevron-left ms-n1 me-1"></i>
        Prev
      </a>
    </li>
    <li class="page-item disabled d-sm-none">
      <span class="page-link text-body">2 / 5</span>
    </li>
    <li class="page-item d-none d-sm-block">
      <a href="#" class="page-link">1</a>
    </li>
    <li class="page-item active d-none d-sm-block" aria-current="page">
      <span class="page-link">
        2
        <span class="visually-hidden">(current)</span>
      </span>
    </li>
    <li class="page-item d-none d-sm-block">
      <a href="#" class="page-link">3</a>
    </li>
    <li class="page-item d-none d-sm-block">
      <a href="#" class="page-link">4</a>
    </li>
    <li class="page-item d-none d-sm-block">
      <a href="#" class="page-link">5</a>
    </li>
    <li class="page-item">
      <a href="#" class="page-link">
        Next
        <i class="bx bx-chevron-right me-n1 ms-1"></i>
      </a>
    </li>
  </ul>
</nav>

Prev / next icons only

<!-- Pagination with prev / next icons only -->
<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item">
      <a href="#" class="page-link">
        <i class="bx bx-chevron-left mx-n1"></i>
      </a>
    </li>
    <li class="page-item disabled d-sm-none">
      <span class="page-link text-body">2 / 5</span>
    </li>
    <li class="page-item d-none d-sm-block">
      <a href="#" class="page-link">1</a>
    </li>
    <li class="page-item active d-none d-sm-block" aria-current="page">
      <span class="page-link">
        2
        <span class="visually-hidden">(current)</span>
      </span>
    </li>
    <li class="page-item d-none d-sm-block">
      <a href="#" class="page-link">3</a>
    </li>
    <li class="page-item d-none d-sm-block">
      <a href="#" class="page-link">4</a>
    </li>
    <li class="page-item d-none d-sm-block">
      <a href="#" class="page-link">5</a>
    </li>
    <li class="page-item">
      <a href="#" class="page-link">
        <i class="bx bx-chevron-right mx-n1"></i>
      </a>
    </li>
  </ul>
</nav>

Sizing

<!-- Large size -->
<nav aria-label="...">
  <ul class="pagination pagination-lg">
    ...
  </ul>
</nav>

<!-- Regular size -->
<nav aria-label="...">
  <ul class="pagination">
    ...
  </ul>
</nav>

<!-- Small size -->
<nav aria-label="...">
  <ul class="pagination pagination-sm">
    ...
  </ul>
</nav>

Load more (One-page)

<!-- Load more (One-page) pagination example -->
<nav class="d-md-flex justify-content-between align-items-center text-center text-md-left" aria-label="...">
  <div class="d-md-flex align-items-center w-100">
    <span class="fs-sm opacity-70 me-md-3">
      Showing 12 of 90 products
    </span>
    <div class="progress w-100 my-3 mx-auto mx-md-0" style="max-width: 12rem; height: 4px;">
      <div class="progress-bar" role="progressbar" style="width: 18%;" aria-valuenow="18" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <button type="button" class="btn btn-primary shadow-primary btn-sm ms-auto">
      <i class="bx bx-refresh fs-lg me-1"></i>
      Load more products
    </button>
  </div>
</nav>
Top