Pagination

The pagination component can be used to indicate a series of related content that exists across multiple pages, as well as the current active page.

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <!-- Previous page -->
    <li class="page-item">
      <a href="#" class="page-link">
        <i class="fa fa-angle-left" aria-hidden="true"></i>
        <span class="sr-only">Previous</span> <!-- sr-only = only for screen readers -->
      </a>
    </li>
    <!-- Pages and ellipses -->
    <li class="page-item"><a href="#" class="page-link">1</a></li>
    <li class="page-item ellipsis"></li>
    <li class="page-item"><a href="#" class="page-link">45</a></li>
    <!-- Active page item -->
    <li class="page-item active" aria-current="page">
      <a href="#" class="page-link" tabindex="-1">46</a>
    </li>
    <li class="page-item"><a href="#" class="page-link">47</a></li>
    <li class="page-item ellipsis"></li>
    <li class="page-item"><a href="#" class="page-link">86</a></li>
    <!-- Next page -->
    <li class="page-item">
      <a href="#" class="page-link">
        <i class="fa fa-angle-right" aria-hidden="true"></i>
        <span class="sr-only">Next</span> <!-- sr-only = only for screen readers -->
      </a>
    </li>
  </ul>
</nav>

The .active class on the .page-item indicates the current page. The .page-link element inside the active page item will be automatically "disabled" using the pointer-events: none property. This means that it is not really disabled, and can be accessed using the keyboard. For this reason, the tabindex="-1" attribute should be added to the link so that it is not accessible using the tab key.

The ellipses are added automatically in CSS using pseudo-elements if the .ellipsis class is present on the .page-item. On another note, the elements with the .sr-only class are only displayed on screen readers. Here, it gives sense in context to the icons. The icons being used are part of the Font Awesome 4.7.0 iconset.

Alignment #

Pagination elements can be aligned alternatively using utility classes. For example:

  • The .text-center class aligns the pagination element to the center.
  • The .text-right class aligns the pagination element to the right.
<!-- Aligned to center -->
<nav aria-label="...">
  <ul class="pagination text-center">
    ...
  </ul>
</nav>
<!-- Aligned to right -->
<nav aria-label="...">
  <ul class="pagination text-right">
    ...
  </ul>
</nav>

Rounded pagination #

The ellipses and buttons inside the pagination element can also be rounded by adding the .pagination-rounded class to the pagination element.

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

Sizing #

Different sizes of pagination are also available:

  • Large pagination can be created by adding the .pagination-lg class.
  • Small pagination can be created by adding the .pagination-sm class.
<!-- Large pagination -->
<nav aria-label="...">
  <ul class="pagination pagination-lg">
    ...
  </ul>
</nav>
<!-- Small pagination -->
<nav aria-label="...">
  <ul class="pagination pagination-sm">
    ...
  </ul>
</nav>

Disabled state #

The .disabled class can be added to a .page-item to "disable" the .page-link inside. Once again, the tabindex="-1" attribute should be added to the link so that it is not accessible using the tab key, because like the active link, it is not really disabled, it is only styled to look the part.

<nav aria-label="...">
  <ul class="pagination">
    <!-- Disabled page item -->
    <li class="page-item disabled">
      <a href="#" class="page-link w-50" tabindex="-1">Prev.</a> <!-- w-50 = width: 5rem (50px) -->
    </li>
    <!-- Active page item -->
    <li class="page-item active">
      <a href="#" class="page-link" tabindex="-1">1</a>
    </li>
    <li class="page-item" aria-current="page"><a href="#" class="page-link">2</a></li>
    <li class="page-item" aria-current="page"><a href="#" class="page-link">3</a></li>
    <li class="page-item">
      <a href="#" class="page-link w-50">Next</a> <!-- w-50 = width: 5rem (50px) -->
    </li>
  </ul>
</nav>

Up next: Progress