Indicate a series of related content exists across multiple pages.
Bootstrap docs
<!-- 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 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="Prev page"> </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" aria-label="Next page"> </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>
<!-- 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>
<!-- 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-body-secondary 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>