Bootstrap docs

# Pagination

Indicate a series of related content exists across multiple pages.

#### Basic example

    <!-- 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

    <!-- 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="ci-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="ci-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="ci-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="ci-chevron-right fs-lg ms-1 me-n1"></i>
          </a>
        </li>
      </ul>
    </nav>

#### Sizing

    <!-- 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

    <!-- 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 animate-underline">
        <span class="animate-target">Show more</span>
        <i class="ci-chevron-down fs-lg ms-2"></i>
      </button>
    </div>

Top