Indicate a series of related content exists across multiple pages.
<!-- 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>
<!-- Pagination with prev / next icons only --> <nav aria-label="Page navigation example"> <ul class="pagination"> <li class="page-item"> <a href="#" class="page-link"> <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"> <i class="bx bx-chevron-right mx-n1"></i> </a> </li> </ul> </nav>
<!-- 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) 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>