Pagination
Indicate a series of related content exists across multiple pages.
Basic example
<!-- Pagination basic example -->
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#">Prev</a>
</li>
<li class="page-item active" aria-current="page">
<span class="page-link">
1
<span class="visually-hidden">(current)</span>
</span>
</li>
<li class="page-item">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item d-sm-none">
<span class="page-link px-2 pe-none">...</span>
</li>
<li class="page-item d-none d-sm-block">
<a class="page-link" href="#">3</a>
</li>
<li class="page-item d-none d-sm-block">
<a class="page-link" href="#">4</a>
</li>
<li class="page-item">
<a class="page-link" href="#">5</a>
</li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>With icons
<!-- Pagination with prev / next icons only -->
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link d-flex align-items-center h-100 fs-lg px-2" href="#" aria-label="Previous page">
<i class="ci-chevron-left"></i>
</a>
</li>
<li class="page-item active" aria-current="page">
<span class="page-link">
1
<span class="visually-hidden">(current)</span>
</span>
</li>
<li class="page-item">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item d-sm-none">
<span class="page-link px-2 pe-none">...</span>
</li>
<li class="page-item d-none d-sm-block">
<a class="page-link" href="#">3</a>
</li>
<li class="page-item d-none d-sm-block">
<a class="page-link" href="#">4</a>
</li>
<li class="page-item">
<a class="page-link" href="#">5</a>
</li>
<li class="page-item">
<a class="page-link d-flex align-items-center h-100 fs-lg px-2" href="#" aria-label="Next page">
<i class="ci-chevron-right"></i>
</a>
</li>
</ul>
</nav>
<!-- Pagination with prev / next icons + text -->
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link d-flex align-items-center h-100 px-2" href="#" aria-label="Previous page">
<i class="ci-chevron-left fs-lg me-1 ms-n1"></i>
Prev
</a>
</li>
<li class="page-item active" aria-current="page">
<span class="page-link">
1
<span class="visually-hidden">(current)</span>
</span>
</li>
<li class="page-item">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item d-sm-none">
<span class="page-link px-2 pe-none">...</span>
</li>
<li class="page-item d-none d-sm-block">
<a class="page-link" href="#">3</a>
</li>
<li class="page-item d-none d-sm-block">
<a class="page-link" href="#">4</a>
</li>
<li class="page-item">
<a class="page-link" href="#">5</a>
</li>
<li class="page-item">
<a class="page-link d-flex align-items-center h-100 px-2" href="#" aria-label="Next page">
Next
<i class="ci-chevron-right fs-lg ms-1 me-n1"></i>
</a>
</li>
</ul>
</nav>Sizing
<!-- Large pagination -->
<nav aria-label="...">
<ul class="pagination pagination-lg">
<!-- Page links -->
</ul>
</nav>
<!-- Normal pagination -->
<nav aria-label="...">
<ul class="pagination">
<!-- Page links -->
</ul>
</nav>
<!-- Small pagination -->
<nav aria-label="...">
<ul class="pagination pagination-sm">
<!-- Page links -->
</ul>
</nav>Items per page select
Show
<!-- Pagination with items per page select -->
<div class="d-flex align-items-center justify-content-between">
<div class="d-flex align-items-center">
<span class="fs-sm">Show</span>
<select class="form-select border-0">
<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">
<li class="page-item active" aria-current="page">
<span class="page-link">
1
<span class="visually-hidden">(current)</span>
</span>
</li>
<li class="page-item">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item d-sm-none">
<span class="page-link px-2 pe-none">...</span>
</li>
<li class="page-item d-none d-sm-block">
<a class="page-link" href="#">3</a>
</li>
<li class="page-item d-none d-sm-block">
<a class="page-link" href="#">4</a>
</li>
<li class="page-item">
<a class="page-link" href="#">5</a>
</li>
</ul>
</nav>
</div>Load more (One-page)
Showing 16 from 48
<!-- Load more (One-page) pagination markup example -->
<div class="d-flex flex-column align-items-center" style="max-width: 300px;">
<div class="fs-sm text-center mb-3">Showing 16 from 48</div>
<div class="progress w-100 mb-3" role="progressbar" aria-label="Items shown" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="height: 4px">
<div class="progress-bar bg-dark rounded-pill d-none-dark" style="width: 30%"></div>
<div class="progress-bar bg-light rounded-pill d-none d-block-dark" style="width: 30%"></div>
</div>
<button type="button" class="btn btn-lg btn-link text-body-emphasis text-decoration-none animate-underline">
<span class="animate-target">Show more</span>
<i class="ci-chevron-down fs-lg ms-2"></i>
</button>
</div>