Pagination

Indicate a series of related content across multiple pages with the Pagination component. Use Material Icons for the previous/next controls to match the Material Design specification.

Overview

Use a <nav> with a .pagination list. Mark the current page with .active and unavailable links with .disabled.

HTML

<!-- Default pagination -->
<nav aria-label="Page navigation">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active" aria-current="page">
      <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>

With Material Icons

Replace text labels with Material Design chevron icons for a cleaner, more modern look.

HTML

<!-- Pagination with Material icons -->
<nav aria-label="Page navigation">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link d-flex align-items-center" href="#" aria-label="Previous">
        <i class="material-icons" style="font-size:18px;">chevron_left</i>
      </a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active"><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 d-flex align-items-center" href="#" aria-label="Next">
        <i class="material-icons" style="font-size:18px;">chevron_right</i>
      </a>
    </li>
  </ul>
</nav>

Sizing

Add .pagination-lg or .pagination-sm for larger or smaller pagination.

HTML

<!-- Sizing: .pagination-lg and .pagination-sm -->
<nav>
  <ul class="pagination pagination-lg mb-3">
    <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>
  </ul>
</nav>
<nav>
  <ul class="pagination pagination-sm">
    <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>
  </ul>
</nav>