Finder Docs | Pagination

Basic example

Prev
1 (current)
2
...
3
4
5
Next

<!-- Pagination basic example -->
<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#">Prev</a>
    </li>
    <li class="page-item active" aria-current="page">
      <span class="page-link">
        1
        <span class="visually-hidden">(current)</span>
      </span>
    </li>
    <li class="page-item">
      <a class="page-link" href="#">2</a>
    </li>
    <li class="page-item d-sm-none">
      <span class="page-link px-2 pe-none">...</span>
    </li>
    <li class="page-item d-none d-sm-block">
      <a class="page-link" href="#">3</a>
    </li>
    <li class="page-item d-none d-sm-block">
      <a class="page-link" href="#">4</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#">5</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

With icons

1 (current)
2
...
3
4
5

Prev
1 (current)
2
...
3
4
5
Next

<!-- Pagination with prev / next icons only -->
<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link d-flex align-items-center h-100 fs-lg px-2" href="#" aria-label="Previous page">
        <i class="fi-chevron-left"></i>
      </a>
    </li>
    <li class="page-item active" aria-current="page">
      <span class="page-link">
        1
        <span class="visually-hidden">(current)</span>
      </span>
    </li>
    <li class="page-item">
      <a class="page-link" href="#">2</a>
    </li>
    <li class="page-item d-sm-none">
      <span class="page-link px-2 pe-none">...</span>
    </li>
    <li class="page-item d-none d-sm-block">
      <a class="page-link" href="#">3</a>
    </li>
    <li class="page-item d-none d-sm-block">
      <a class="page-link" href="#">4</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#">5</a>
    </li>
    <li class="page-item">
      <a class="page-link d-flex align-items-center h-100 fs-lg px-2" href="#" aria-label="Next page">
        <i class="fi-chevron-right"></i>
      </a>
    </li>
  </ul>
</nav>

<!-- Pagination with prev / next icons + text -->
<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link d-flex align-items-center h-100 px-2" href="#" aria-label="Previous page">
        <i class="fi-chevron-left fs-lg me-1 ms-n1"></i>
        Prev
      </a>
    </li>
    <li class="page-item active" aria-current="page">
      <span class="page-link">
        1
        <span class="visually-hidden">(current)</span>
      </span>
    </li>
    <li class="page-item">
      <a class="page-link" href="#">2</a>
    </li>
    <li class="page-item d-sm-none">
      <span class="page-link px-2 pe-none">...</span>
    </li>
    <li class="page-item d-none d-sm-block">
      <a class="page-link" href="#">3</a>
    </li>
    <li class="page-item d-none d-sm-block">
      <a class="page-link" href="#">4</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#">5</a>
    </li>
    <li class="page-item">
      <a class="page-link d-flex align-items-center h-100 px-2" href="#" aria-label="Next page">
        Next
        <i class="fi-chevron-right fs-lg ms-1 me-n1"></i>
      </a>
    </li>
  </ul>
</nav>

Sizing

Prev
1 (current)
2
...
3
4
5
Next

Prev
1 (current)
2
...
3
4
5
Next

Prev
1 (current)
2
...
3
4
5
Next

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

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

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

Items per page select

Show

1 (current)
2
...
3
4
5

<!-- Pagination with items per page select -->
<div class="d-flex align-items-center justify-content-between">
  <div class="d-flex align-items-center">
    <span class="fs-sm">Show</span>
    <select class="form-select border-0">
      <option value="6">6</option>
      <option value="8">8</option>
      <option value="12" selected>12</option>
      <option value="16">16</option>
      <option value="24">24</option>
    </select>
  </div>
  <nav aria-label="Page navigation">
    <ul class="pagination">
      <li class="page-item active" aria-current="page">
        <span class="page-link">
          1
          <span class="visually-hidden">(current)</span>
        </span>
      </li>
      <li class="page-item">
        <a class="page-link" href="#">2</a>
      </li>
      <li class="page-item d-sm-none">
        <span class="page-link px-2 pe-none">...</span>
      </li>
      <li class="page-item d-none d-sm-block">
        <a class="page-link" href="#">3</a>
      </li>
      <li class="page-item d-none d-sm-block">
        <a class="page-link" href="#">4</a>
      </li>
      <li class="page-item">
        <a class="page-link" href="#">5</a>
      </li>
    </ul>
  </nav>
</div>

Load more (One-page)

Showing 16 from 48

<!-- Load more (One-page) pagination markup example -->
<div class="d-flex flex-column align-items-center" style="max-width: 300px;">
  <div class="fs-sm text-center mb-3">Showing 16 from 48</div>
  <div class="progress w-100 mb-3" role="progressbar" aria-label="Items shown" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="height: 4px">
    <div class="progress-bar bg-dark rounded-pill d-none-dark" style="width: 30%"></div>
    <div class="progress-bar bg-light rounded-pill d-none d-block-dark" style="width: 30%"></div>
  </div>
  <button type="button" class="btn btn-lg btn-link text-body-emphasis text-decoration-none">
    <span class="animate-target">Show more</span>
    <i class="fi-chevron-down fs-lg ms-2"></i>
  </button>
</div>

Customize theme

Colors

Primary

Success

Warning

Danger

Info

Direction

RTL

Border width, px

Rounding, rem

Finder

Pagination