Pagination

Pagination controls for paged interfaces, with size variations and alignment helpers.

Standard

HTML
<nav aria-label="pagination">
  <ul class="ms-pagination">
    <li class="ms-pagination-item disabled"><a href="#" class="ms-pagination-link">Previous</a></li>
    <li class="ms-pagination-item active"><a href="#" class="ms-pagination-link">1</a></li>
    <li class="ms-pagination-item"><a href="#" class="ms-pagination-link">2</a></li>
    <li class="ms-pagination-item"><a href="#" class="ms-pagination-link">3</a></li>
    <li class="ms-pagination-item"><a href="#" class="ms-pagination-link">Next</a></li>
  </ul>
</nav>

Small & large

Sizes
<ul class="ms-pagination ms-pagination-sm">...</ul> <!-- small -->
<ul class="ms-pagination">...</ul>                     <!-- default -->
<ul class="ms-pagination ms-pagination-lg">...</ul> <!-- large -->

Alignment

Add ms-pagination-center or ms-pagination-right to the list. Pagination is centered by default.

Alignment
<ul class="ms-pagination ms-pagination-center">...</ul>
<ul class="ms-pagination ms-pagination-right">...</ul>
<