Pagination

Pagination helps indicate that a series of related content spans across multiple pages.

<nav aria-label="Page">
  <ul class="pagination flex-wrap gap-2">
    <li class="page-item">
      <a class="page-link rounded-pill" href="#">Previous</a>
    </li>
    <li class="page-item active">
      <a class="page-link rounded-pill" href="#">1</a>
    </li>
    <li class="page-item">
      <a class="page-link rounded-pill" href="#">2</a>
    </li>
    <li class="page-item">
      <a class="page-link rounded-pill" href="#">3</a>
    </li>
    <li class="page-item">
      <a class="page-link rounded-pill" href="#">Next</a>
    </li>
  </ul>
</nav>

Disabled and active states

Pagination links can be customized for different circumstances. Use .disabled for links that are unclickable and .active to highlight the current page.

<nav aria-label="Page">
  <ul class="pagination flex-wrap gap-2">
    <li class="page-item disabled">
      <a class="page-link rounded-pill">Previous</a>
    </li>
    <li class="page-item">
      <a class="page-link rounded-pill" href="#">1</a>
    </li>
    <li class="page-item active">
      <a class="page-link rounded-pill" href="#">2</a>
    </li>
    <li class="page-item">
      <a class="page-link rounded-pill" href="#">3</a>
    </li>
    <li class="page-item">
      <a class="page-link rounded-pill" href="#">Next</a>
    </li>
  </ul>
</nav>