Paginationv5.x

Pagination divide content into pages

Bootstrap v5.x | Pagination


---- Pagination with text endcaps --------
<nav aria-label="Page navigation example">
   <ul class="pagination">
      <li class="page-item"><a class="page-link" href="#">Previous</a></li>
      <li class="page-item active"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><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 with icon endcaps --------
<nav aria-label="Page navigation example">
   <ul class="pagination">
      <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
      <span aria-hidden="true">«</span>
      </a>
      </li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item active"><a class="page-link" href="#">3</a></li>
      <li class="page-item">
      <a class="page-link" href="#" aria-label="Next">
      <span aria-hidden="true">»</span>
      </a>
      </li>
   </ul>
</nav>
---- Smaller pagination w/ no endcaps --------
<nav aria-label="...">
   <ul class="pagination pagination-sm">
      <li class="page-item active" aria-current="page">
      <span class="page-link">1</span>
      </li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
   </ul>
</nav>
---- Large pagination w/ no endcaps --------
<nav aria-label="...">
   <ul class="pagination pagination-lg">
      <li class="page-item active" aria-current="page">
      <span class="page-link">1</span>
      </li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
   </ul>
</nav>

This will reset the page. Are you sure?