FinderBuy now

Pagination

Indicate a series of related content exists across multiple pages.

Bootstrap docs

Basic example

<!-- Pagination: basic example -->
<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item">
      <a href="#" class="page-link">Prev</a>
    </li>
    <li class="page-item d-sm-none">
      <span class="page-link page-link-static">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</a>
    </li>
  </ul>
</nav

With icons

<!-- Pagination: with icons -->
<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item">
      <a href="#" class="page-link" aria-label="Previous">
        <i class="fi-angle-left"></i>
      </a>
    </li>
    <li class="page-item d-sm-none">
      <span class="page-link page-link-static">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" aria-label="Next">
        <i class="fi-angle-right"></i>
      </a>
    </li>
  </ul>
</nav

Sizing

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

<!-- Normal size -->
<nav aria-label="...">
  <ul class="pagination">
    <!-- Page links -->
  </ul>
</nav>

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

Light version

<!-- Pagination: light version -->
<nav aria-label="Page navigation example">
  <ul class="pagination pagination-light">
    <li class="page-item">
      <a href="#" class="page-link" aria-label="Previous">
        <i class="fi-chevron-left me-2"></i>
        Prev
      </a>
    </li>
    <li class="page-item d-sm-none">
      <span class="page-link page-link-static">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" aria-label="Next">
        Next
        <i class="fi-chevron-right ms-2"></i>
      </a>
    </li>
  </ul>
</nav
Top