Loading...
Silicon Silicon UI Kit
 Buy now

Pagination

Indicate a series of related content exists across multiple pages.

Bootstrap docs

Default example

<!-- Pagination: Basic example -->
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item">
  <a href="#" class="page-link">
    <i class="bx bx-chevron-left ms-n1 me-1"></i>
    Prev
  </a>
</li>
<li class="page-item disabled d-sm-none">
  <span class="page-link text-body">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="bx bx-chevron-right me-n1 ms-1"></i>
  </a>
</li>
</ul>
</nav>

Prev / next icons only

<!-- Pagination with prev / next icons only -->
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item">
  <a href="#" class="page-link" aria-label="Previous page">
    <i class="bx bx-chevron-left mx-n1"></i>
  </a>
</li>
<li class="page-item disabled d-sm-none">
  <span class="page-link text-body">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 page">
    <i class="bx bx-chevron-right mx-n1"></i>
  </a>
</li>
</ul>
</nav>

Sizing

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

<!-- Regular size -->
<nav aria-label="...">
<ul class="pagination">
...
</ul>
</nav>

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

Load more (One-page)

<!-- Load more (One-page) pagination example -->
<nav class="d-md-flex justify-content-between align-items-center text-center text-md-left" aria-label="...">
<div class="d-md-flex align-items-center w-100">
<span class="fs-sm opacity-70 me-md-3">
  Showing 12 of 90 products
</span>
<div class="progress w-100 my-3 mx-auto mx-md-0" style="max-width: 12rem; height: 4px;">
  <div class="progress-bar" role="progressbar" style="width: 18%;" aria-valuenow="18" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<button type="button" class="btn btn-primary shadow-primary btn-sm ms-auto">
  <i class="bx bx-refresh fs-lg me-1"></i>
  Load more products
</button>
</div>
</nav>
Top