Pagination

Overview #

A pagination component can be created by adding the .pagination class to an HTML list, optionally inside a wrapping <nav> element. Page links can be made active (.active) or disabled (.disabled) by adding the appropriate class name to the item. Moreover, icons or symbols may be used inside page links, but please make sure to add the correct aria tags.

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" aria-label="Previous">
        <span aria-hidden="true">
          <i class="fa-light fa-angle-left"></i>
        </span>
      </a>
    </li>
    <li class="page-item active" aria-current="page"><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="#" aria-label="Next">
        <span aria-hidden="true">
          <i class="fa-light fa-angle-right"></i>
        </span>
      </a>
    </li>
  </ul>
</nav>

Please note, the icons being used are taken from the Font Awesome icon library (opens in new tab).

Sizing #

Small and large pagination components can be created using the .pagination-sm and .pagination-lg classes respectively (added to the HTML list).

<!-- Small pagination -->
<nav aria-label="...">
  <ul class="pagination pagination-sm">
    ...
  </ul>
</nav>

<!-- Regular pagination -->
<nav aria-label="...">
  <ul class="pagination">
    ...
  </ul>
</nav>

<!-- Large pagination -->
<nav aria-label="...">
  <ul class="pagination pagination-lg">
    ...
  </ul>
</nav>

Alignment #

Pagination components are block-level, and their alignments can be changed using flex utilities, particularly .justify-content-center and .justify-content-end (once again added to the HTML list).

<!-- Aligned start (default) -->
<nav aria-label="...">
  <ul class="pagination">
    ...
  </ul>
</nav>

<!-- Aligned center -->
<nav aria-label="...">
  <ul class="pagination justify-content-center">
    ...
  </ul>
</nav>

<!-- Aligned end -->
<nav aria-label="...">
  <ul class="pagination justify-content-end">
    ...
  </ul>
</nav>