Pagination

Navigate between pages of content

Pagination lets users navigate between pages of content. It supports active states, sizes, and alignment options.

A pagination component uses a ul with .pagination. Each page is a li with .page-item containing a .page-link. Include Previous and Next controls.

<nav>
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link">Previous</a>
    </li>
    <li class="page-item">
      <a class="page-link">1</a>
    </li>
    <li class="page-item">
      <a class="page-link">2</a>
    </li>
    <li class="page-item">
      <a class="page-link">Next</a>
    </li>
  </ul>
</nav>

.pagination

Click page numbers to navigate

23 / 37