Pagination
Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.
https://getbootstrap.com/docs/5.1/components/pagination/Pagination Basic
<!--
Size (add to ul.pagination)
.pagination-sm
.pagination-lg
Pill (add to ul.pagination)
.pagination-pill
Positioning (add to ul.pagination)
.justify-content-start
.justify-content-center
.justify-content-end
-->
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active" aria-current="page"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
Pagination Pills
<!--
Size (add to ul.nav)
.nav-sm
.nav-lg
Pill (add to ul.nav)
.rounded-pill
Positioning (add to nav tag)
.d-flex .justify-content-start
.d-flex .justify-content-center
.d-flex .justify-content-end
-->
<nav aria-label="Pagination">
<ul class="nav nav-sm nav-invert rounded-pill">
<li class="nav-item">
<a class="nav-link px-3 disabled" href="#" tabindex="-1">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="nav-item"><a class="nav-link px-3" href="#">1</a></li>
<li class="nav-item" aria-current="page">
<a class="nav-link px-3 active" href="#">2</a>
</li>
<li class="nav-item"><a class="nav-link px-3" href="#">3</a></li>
<li class="nav-item disabled">
<a class="nav-link px-3" href="#" tabindex="-1">...</a>
</li>
<li class="nav-item"><a class="nav-link px-3" href="#">86</a></li>
<li class="nav-item">
<a class="nav-link px-3" href="#">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
Pagination Prev/Next
<nav aria-label="pagination">
<ul class="list-inline d-flex justify-content-between">
<li class="list-inline-item">
<a href="#" class="btn btn-dark btn-sm rounded-pill px-4 disabled">
<i class="fi fi-arrow-start smaller"></i>
<span>Prev</span><!-- if text is removed, add .m-0 to icon -->
</a>
</li>
<li class="list-inline-item d-none d-lg-block">
<span class="btn btn-sm text-gray-500">2 / 15</span>
</li>
<li class="list-inline-item">
<a href="#" class="btn btn-dark btn-sm rounded-pill px-4">
<span>Next</span><!-- if text is removed, add .m-0 to icon -->
<i class="fi fi-arrow-end smaller"></i>
</a>
</li>
</ul>
</nav>
Pagination Button
<nav aria-label="pagination">
<div class="text-center px-3 mx-auto" style="max-width:350px">
<div class="mb-3">
<h6 class="small">You've viewed 21 of 210 products</h6>
<div class="progress bg-light mt-3" style="height:2px">
<div class="progress-bar bg-primary" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="d-grid">
<a href="#" class="btn btn-outline-dark w-100">LOAD MORE</a>
</div>
</div>
</nav>
Pagination +Progress
<nav aria-label="pagination" class="d-inline-block">
<!-- progressbar -->
<span class="smaller d-inline-block me-1">10%</span>
<div class="progress bg-light mb-2 me-1" style="height:2px">
<div class="progress-bar bg-primary" role="progressbar" style="width: 8%" aria-valuenow="8" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<ul class="pagination-custom list-unstyled">
<li class="page-item d-inline-block me-1 disabled">
<a class="page-link border-2" href="#" tabindex="-1">
<i class="fi fi-arrow-start smaller"></i>
</a>
</li>
<li class="page-item d-inline-block me-1">
<a class="page-link border-2" href="#">1</a>
</li>
<li class="page-item d-inline-block mx-1 active" aria-current="page">
<a class="page-link border-2" href="#">2 <span class="visually-hidden">(current)</span></a>
</li>
<li class="page-item d-inline-block me-1" aria-current="page">
<span class="page-link border-2">...</span>
</li>
<li class="page-item d-inline-block me-1">
<a class="page-link border-2" href="#">322</a>
</li>
<li class="page-item d-inline-block me-1">
<a class="page-link border-2" href="#">
<i class="fi fi-arrow-end smaller"></i>
</a>
</li>
</ul>
</nav>
Pagination Clean
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item"><a class="page-link rounded border-0" href="#">Previous</a></li>
<li class="page-item"><a class="page-link rounded border-0" href="#">1</a></li>
<li class="page-item active"><a class="page-link rounded border-0" href="#">2</a></li>
<li class="page-item"><a class="page-link rounded border-0" href="#">3</a></li>
<li class="page-item"><a class="page-link rounded border-0" href="#">Next</a></li>
</ul>
</nav>