AroundUI Kit
Buy now

Menu

Content

Components

Utilities

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

With icons

<!-- 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="ai-arrow-left fs-xl"></i>
      </a>
    </li>
    <li class="page-item d-sm-none">
      <span class="page-link pe-none">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="ai-arrow-right fs-xl"></i>
      </a>
    </li>
  </ul>
</nav>

<!-- Pagination with prev / next icons + text -->
<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item">
      <a href="#" class="page-link">
        </i class="ai-arrow-left fs-xl me-2"></i>
        Prev
      </a>
    </li>
    <li class="page-item d-sm-none">
      <span class="page-link pe-none">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="ai-arrow-right fs-xl ms-2"></i>
      </a>
    </li>
  </ul>
</nav>
// Pagination with prev / next icons only
nav(aria-label="Page navigation example")
  ul.pagination
    li.page-item
      a(href="#").page-link
        i.ai-arrow-left.fs-xl
    li.page-item.d-sm-none
      span.page-link.pe-none 2 / 5
    li.page-item.d-none.d-sm-block
      a(href="#").page-link
        | 1
    li.page-item.active(aria-current="page").d-none.d-sm-block
      span.page-link
        | 2
        span.visually-hidden (current)
    li.page-item.d-none.d-sm-block
      a(href="#").page-link
        | 3
    li.page-item.d-none.d-sm-block
      a(href="#").page-link
        | 4
    li.page-item.d-none.d-sm-block
      a(href="#").page-link
        | 5
    li.page-item
      a(href="#").page-link
        i.ai-arrow-right.fs-xl

// Pagination with prev / next icons + text
nav(aria-label="Page navigation example")
  ul.pagination
    li.page-item
      a(href="#").page-link
        i.ai-arrow-left.fs-xl.me-2
        | Prev
    li.page-item.d-sm-none
      span.page-link.pe-none 2 / 5
    li.page-item.d-none.d-sm-block
      a(href="#").page-link
        | 1
    li.page-item.active(aria-current="page").d-none.d-sm-block
      span.page-link
        | 2
        span.visually-hidden (current)
    li.page-item.d-none.d-sm-block
      a(href="#").page-link
        | 3
    li.page-item.d-none.d-sm-block
      a(href="#").page-link
        | 4
    li.page-item.d-none.d-sm-block
      a(href="#").page-link
        | 5
    li.page-item
      a(href="#").page-link.px-1
        | Next
        i.ai-arrow-right.fs-xl.ms-2

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>
// Large size
nav(aria-label="...")
  ul.pagination.pagination-lg
    //- Page links

// Normal size
nav(aria-label="...")
  ul.pagination
    //- Page links

// Small size
nav(aria-label="...")
  ul.pagination.pagination-sm
    //- Page links

Items per page selector

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