core-logo

Bootstrap pagination

Bootstrap pagination component consists of button-like styled links, that are arranged side by side in a horizontal list. Learn how to create nice looking pagination to navigate through pages easily.

On this page:



Overview

Bootstrap pagination is created with a list of HTML elements so screen readers can announce the number of possible links. Using a wrapping <nav> element to recognize it as a navigation section to screen readers and different assistive technologies.

Besides, as pages have more than one such navigation section, it’s advisable to implement a descriptive aria-label for the <nav> to show its purpose.

<nav aria-label="Page navigation example">
  <ul class="c-pagination">
    <li class="c-page-item"><a class="c-page-link" href="#">Previous</a></li>
    <li class="c-page-item"><a class="c-page-link" href="#">1</a></li>
    <li class="c-page-item"><a class="c-page-link" href="#">2</a></li>
    <li class="c-page-item"><a class="c-page-link" href="#">3</a></li>
    <li class="c-page-item"><a class="c-page-link" href="#">Next</a></li>
  </ul>
</nav>

Working with icons

Looking to use an icon in place of text for pagination links? Be certain to provide proper screen reader assistance with aria attributes and the .sr-only utility.

<nav aria-label="Page navigation example">
  <ul class="c-pagination">
    <li class="c-page-item">
      <a class="c-page-link" href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li class="c-page-item"><a class="c-page-link" href="#">1</a></li>
    <li class="c-page-item"><a class="c-page-link" href="#">2</a></li>
    <li class="c-page-item"><a class="c-page-link" href="#">3</a></li>
    <li class="c-page-item">
      <a class="c-page-link" href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

Disabled and active states

Pagination links are customizable for different circumstances. Use .disabled for links that appear un-clickable and .active to indicate the current page.

While the .disabled class uses pointer-events: none to try to disable the link functionality of <a>s, that CSS feature is not yet standardized. As such, you should regularly add tabindex="-1" on disabled links and use JavaScript to disable their functionality entirely.

<nav aria-label="...">
  <ul class="c-pagination">
    <li class="c-page-item disabled">
      <a class="c-page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
    </li>
    <li class="c-page-item"><a class="c-page-link" href="#">1</a></li>
    <li class="c-page-item active" aria-current="page">
      <a class="c-page-link" href="#">2 <span class="sr-only">(current)</span></a>
    </li>
    <li class="c-page-item"><a class="c-page-link" href="#">3</a></li>
    <li class="c-page-item">
      <a class="c-page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

You can optionally swap out active or disabled anchors for <span>, or drop the anchor in the fact of the prev/next arrows, to remove click functionality and block keyboard focus while retaining intended styles.

<nav aria-label="...">
  <ul class="c-pagination">
    <li class="c-page-item disabled">
      <span class="c-page-link">Previous</span>
    </li>
    <li class="c-page-item"><a class="c-page-link" href="#">1</a></li>
    <li class="c-page-item active" aria-current="page">
      <span class="c-page-link">
        2
        <span class="sr-only">(current)</span>
      </span>
    </li>
    <li class="c-page-item"><a class="c-page-link" href="#">3</a></li>
    <li class="c-page-item">
      <a class="c-page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

Sizing

Fancy larger or smaller pagination? Add .c-pagination-lg or .c-pagination-sm for additional sizes.

<nav aria-label="...">
  <ul class="c-pagination c-pagination-lg">
    <li class="c-page-item active" aria-current="page">
      <span class="c-page-link">
        1
        <span class="sr-only">(current)</span>
      </span>
    </li>
    <li class="c-page-item"><a class="c-page-link" href="#">2</a></li>
    <li class="c-page-item"><a class="c-page-link" href="#">3</a></li>
  </ul>
</nav>
<nav aria-label="...">
  <ul class="c-pagination c-pagination-sm">
    <li class="c-page-item active" aria-current="page">
      <span class="c-page-link">
        1
        <span class="sr-only">(current)</span>
      </span>
    </li>
    <li class="c-page-item"><a class="c-page-link" href="#">2</a></li>
    <li class="c-page-item"><a class="c-page-link" href="#">3</a></li>
  </ul>
</nav>

Alignment

Change the alignment of pagination components with flexbox utilities.

<nav aria-label="Page navigation example">
  <ul class="c-pagination c-justify-content-center">
    <li class="c-page-item disabled">
      <a class="c-page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
    </li>
    <li class="c-page-item"><a class="c-page-link" href="#">1</a></li>
    <li class="c-page-item"><a class="c-page-link" href="#">2</a></li>
    <li class="c-page-item"><a class="c-page-link" href="#">3</a></li>
    <li class="c-page-item">
      <a class="c-page-link" href="#">Next</a>
    </li>
  </ul>
</nav>
<nav aria-label="Page navigation example">
  <ul class="c-pagination c-justify-content-end">
    <li class="c-page-item disabled">
      <a class="c-page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
    </li>
    <li class="c-page-item"><a class="c-page-link" href="#">1</a></li>
    <li class="c-page-item"><a class="c-page-link" href="#">2</a></li>
    <li class="c-page-item"><a class="c-page-link" href="#">3</a></li>
    <li class="c-page-item">
      <a class="c-page-link" href="#">Next</a>
    </li>
  </ul>
</nav>