Pagination

Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.

Default Pagination

      <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"><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="#">4</a></li>
      <li class="page-item"><a class="page-link" href="#">5</a></li>
      <li class="page-item"><a class="page-link" href="#">6</a></li>
      <li class="page-item"><a class="page-link" href="#">Next</a></li>
      </ul>
      </nav>

Default Pagination With Icon

      <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 active" 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="#">4</a></li>
      <li class="page-item"><a class="page-link" href="#">5</a></li>
      <li class="page-item"><a class="page-link" href="#">6</a></li>
      <li class="page-item">
      <a class="page-link" href="#" aria-label="Next">
      <span aria-hidden="true">»</span>
      </a>
      </li>
      </ul>
      </nav>

Disabled and active states

      <nav aria-label="...">
      <ul class="pagination">
      <li class="page-item disabled">
      <a class="page-link">
      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>

Large Pagination

      <nav aria-label="Page navigation example">
      <ul class="pagination pagination-lg">
      <li class="page-item"><a class="page-link" href="#">Previous</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"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#">4</a></li>
      <li class="page-item"><a class="page-link" href="#">5</a></li>
      <li class="page-item"><a class="page-link" href="#">6</a></li>
      <li class="page-item"><a class="page-link" href="#">Next</a></li>
      </ul>
      </nav>

Large Pagination With Icons

      <nav aria-label="Page navigation example">
      <ul class="pagination pagination-lg">
      <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"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#">4</a></li>
      <li class="page-item"><a class="page-link" href="#">5</a></li>
      <li class="page-item"><a class="page-link" href="#">6</a></li>
      <li class="page-item">
      <a class="page-link" href="#" aria-label="Next">
      <span aria-hidden="true">»</span>
      </a>
      </li>
      </ul>
      </nav>

Alignment Center Pagination

      <nav aria-label="Page navigation example">
      <ul class="pagination justify-content-center">
      <li class="page-item disabled"><a class="page-link" href="#">Previous</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"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#">Next</a></li>
      </ul>
      </nav>

Alignment End Pagination

      <nav aria-label="Page navigation example">
      <ul class="pagination justify-content-end">
      <li class="page-item disabled"><a class="page-link" href="#">Previous</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"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#">Next</a></li>
      </ul>
      </nav>