Pagination

Moving through long lists

Default

Code

<nav aria-label="Pagination" data-pager data-pages="12">
  <ul class="pagination">
    <li class="page-item">
      <button type="button" class="page-link" aria-label="Previous page" data-page="prev"><svg class="icon icon-sm icon-flip" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>
    </li>
    <li class="page-item"><button type="button" class="page-link" data-page="1" aria-label="Page 1">1</button></li>
    <li class="page-item"><button type="button" class="page-link" data-page="2" aria-label="Page 2">2</button></li>
    <li class="page-item active"><button type="button" class="page-link" data-page="3" aria-label="Page 3" aria-current="page">3</button></li>
    <li class="page-item"><button type="button" class="page-link" data-page="4" aria-label="Page 4">4</button></li>
    <li class="page-item disabled"><span class="page-link">…</span></li>
    <li class="page-item"><button type="button" class="page-link" data-page="12" aria-label="Page 12">12</button></li>
    <li class="page-item">
      <button type="button" class="page-link" aria-label="Next page" data-page="next"><svg class="icon icon-sm icon-flip" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>
    </li>
  </ul>
</nav>

Few pages

Code

<nav aria-label="Pagination" data-pager data-pages="4">
  <ul class="pagination">
    <li class="page-item disabled">
      <button type="button" class="page-link" aria-label="Previous page" data-page="prev" disabled><svg class="icon icon-sm icon-flip" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>
    </li>
    <li class="page-item active"><button type="button" class="page-link" data-page="1" aria-label="Page 1" aria-current="page">1</button></li>
    <li class="page-item"><button type="button" class="page-link" data-page="2" aria-label="Page 2">2</button></li>
    <li class="page-item"><button type="button" class="page-link" data-page="3" aria-label="Page 3">3</button></li>
    <li class="page-item"><button type="button" class="page-link" data-page="4" aria-label="Page 4">4</button></li>
    <li class="page-item">
      <button type="button" class="page-link" aria-label="Next page" data-page="next"><svg class="icon icon-sm icon-flip" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>
    </li>
  </ul>
</nav>

With a count

Showing 21 to 30 of 248

Code

<div class="d-flex align-items-center justify-content-between flex-wrap gap-3">
  <span class="muted fs-sm">Showing 21 to 30 of 248</span>
  <nav aria-label="Pagination" data-pager data-pages="25">
    <ul class="pagination">
      <li class="page-item">
        <button type="button" class="page-link" aria-label="Previous page" data-page="prev"><svg class="icon icon-sm icon-flip" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>
      </li>
      <li class="page-item"><button type="button" class="page-link" data-page="1" aria-label="Page 1">1</button></li>
      <li class="page-item"><button type="button" class="page-link" data-page="2" aria-label="Page 2">2</button></li>
      <li class="page-item active"><button type="button" class="page-link" data-page="3" aria-label="Page 3" aria-current="page">3</button></li>
      <li class="page-item"><button type="button" class="page-link" data-page="4" aria-label="Page 4">4</button></li>
      <li class="page-item disabled"><span class="page-link">…</span></li>
      <li class="page-item"><button type="button" class="page-link" data-page="25" aria-label="Page 25">25</button></li>
      <li class="page-item">
        <button type="button" class="page-link" aria-label="Next page" data-page="next"><svg class="icon icon-sm icon-flip" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>
      </li>
    </ul>
  </nav>
</div>