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

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>
// Pagination: with icons
nav(aria-label="Page navigation example")
  ul.pagination
    li.page-item
      a.page-link(href="#" aria-label="Previous")
        i.fi-chevron-left
    li.page-item.d-sm-none
      span.page-link.page-link-static 2 / 5
    li.page-item.d-none.d-sm-block
      a.page-link(href="#") 1
    li.page-item.active.d-none.d-sm-block(aria-current="page")
      span.page-link
        | 2
        span.visually-hidden (current)
    li.page-item.d-none.d-sm-block
      a.page-link(href="#") 3
    li.page-item.d-none.d-sm-block
      a.page-link(href="#") 4
    li.page-item.d-none.d-sm-block
      a.page-link(href="#") 5
    li.page-item
      a.page-link(href="#" aria-label="Next")
        i.fi-chevron-right

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

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>
// Pagination: light version
nav(aria-label="Page navigation example")
  ul.pagination.pagination-light
    li.page-item
      a.page-link(href="#" aria-label="Previous")
        i.fi-chevron-left.me-2
        | Prev
    li.page-item.d-sm-none
      span.page-link.page-link-static 2 / 5
    li.page-item.d-none.d-sm-block
      a.page-link(href="#") 1
    li.page-item.active.d-none.d-sm-block(aria-current="page")
      span.page-link
        | 2
        span.visually-hidden (current)
    li.page-item.d-none.d-sm-block
      a.page-link(href="#") 3
    li.page-item.d-none.d-sm-block
      a.page-link(href="#") 4
    li.page-item.d-none.d-sm-block
      a.page-link(href="#") 5
    li.page-item
      a.page-link(href="#" aria-label="Next")
        | Next
        i.fi-chevron-right.ms-2
Top