Pagination

Pagination provides multiple visual styles for grouping navigation of a series of related content.

Page Contents

Overview

Pagination links indicate a series of related content exists across multiple pages. Typically these are used where a multi-page approach to long lists of content improves general performance, such as in search results.

Basic Pagination

Pagination is built with list HTML elements so screen readers can announce the number of available links. Use a wrapping <nav> element to identify it as a navigation section to screen readers and other assistive technologies.

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

Styled Pagination

Add some visual style to lists with a couple of modifier classes.

Spaced

Add a border around each .page-link and spaced them out a bit with .pagination-spaced.

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

Group

Group pagination together in a large block of connected items that is hard to miss with .pagination-group.

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

Using Icons

Want to use an icon or symbol in place of text for some pagination links? Be sure to provide proper screen reader support with aria- attributes.

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

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

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

Disabled and Active States

Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.

Disabling Anchors

Please refer to the Accessiblity notes about disabled anchors.

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

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

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

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

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

With Text

Add normal text to your pagination navigation by using .page-text. This class will adjust the alignment, spacing, and size the text to match the controls.

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item"><span class="page-link disabled" aria-disabled="true">Previous</span></li>
    <li class="page-item"><a href="#" class="page-link">1</a></li>
    <li class="page-item"><a href="#" class="page-link">2</a></li>
    <li class="page-item"><span class="page-text">&hellip;</span></li>
    <li class="page-item"><a href="#" class="page-link">98</a></li>
    <li class="page-item"><a href="#" class="page-link">99</a></li>
    <li class="page-item"><a href="#" class="page-link">Next</a></li>
  </ul>
</nav>

<nav aria-label="...">
  <ul class="pagination pagination-spaced">
    <li class="page-item"><span class="page-link disabled" aria-disabled="true">Previous</span></li>
    <li class="page-item"><a href="#" class="page-link">1</a></li>
    <li class="page-item"><a href="#" class="page-link">2</a></li>
    <li class="page-item"><span class="page-text">&hellip;</span></li>
    <li class="page-item"><a href="#" class="page-link">98</a></li>
    <li class="page-item"><a href="#" class="page-link">99</a></li>
    <li class="page-item"><a href="#" class="page-link">Next</a></li>
  </ul>
</nav>

<nav aria-label="...">
  <ul class="pagination pagination-group">
    <li class="page-item"><span class="page-link disabled" aria-disabled="true">Previous</span></li>
    <li class="page-item"><a href="#" class="page-link">1</a></li>
    <li class="page-item"><a href="#" class="page-link">2</a></li>
    <li class="page-item"><span class="page-text">&hellip;</span></li>
    <li class="page-item"><a href="#" class="page-link">98</a></li>
    <li class="page-item"><a href="#" class="page-link">99</a></li>
    <li class="page-item"><a href="#" class="page-link">Next</a></li>
  </ul>
</nav>

Sizes

Fancy larger or smaller pagination? Add .pagination-xsmall, .pagination-small, .pagination-large, or .pagination-xlarge for additional sizes.

<!-- Extra Large pagination -->
<nav aria-label="...">
  <ul class="pagination pagination-group pagination-xlarge">
    ...
  </ul>
</nav>

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

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

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

<!-- Extra Small pagination -->
<nav aria-label="...">
  <ul class="pagination pagination-group pagination-xsmall">
    ...
  </ul>
</nav>

Alignment

Change the alignment of pagination components using the flexbox utilities.

<nav aria-label="...">
  <ul class="pagination pagination-group flex-center">
    <li class="page-item"><a href="#" class="page-link">Previous</a></li>
    <li class="page-item"><a href="#" class="page-link">1</a></li>
    <li class="page-item"><a href="#" class="page-link">2</a></li>
    <li class="page-item"><a href="#" class="page-link">3</a></li>
    <li class="page-item"><a href="#" class="page-link">Next</a></li>
  </ul>
</nav>

<nav aria-label="...">
  <ul class="pagination pagination-group flex-end">
    <li class="page-item"><a href="#" class="page-link">Previous</a></li>
    <li class="page-item"><a href="#" class="page-link">1</a></li>
    <li class="page-item"><a href="#" class="page-link">2</a></li>
    <li class="page-item"><a href="#" class="page-link">3</a></li>
    <li class="page-item"><a href="#" class="page-link">Next</a></li>
  </ul>
</nav>

<nav aria-label="..." class="d-flex flex-between">
  <ul class="pagination pagination-group">
    <li class="page-item"><a href="#" class="page-link">1</a></li>
    <li class="page-item"><a href="#" class="page-link">2</a></li>
    <li class="page-item"><a href="#" class="page-link">3</a></li>
  </ul>

  <ul class="pagination pagination-spaced">
    <li class="page-item"><a href="#" class="page-link">Previous</a></li>
    <li class="page-item"><a href="#" class="page-link">Next</a></li>
  </ul>
</nav>

SASS Reference

Variables

The available Customization options, or Sass variables, that can be customized for pagination component.

Name	Type	Default	Description
`$enable-pagination`	boolean	`true`	Enable the generation of the pagination classes. Smaller segements of the pagination classes can be disabled with the following `$enable-*` variables.
`$enable-pagination-spaced`	boolean	`true`	Enable the generation of the spaced pagination variant.
`$enable-pagination-group`	boolean	`true`	Enable the generation of the pagination group variant.
`$enable-pagination-sizing`	boolean	`true`	Enable the generation of the pagination sizing variants.
`$pagination-margin-bottom`	string	`.5em`	Vertical spacing below a pagination container.
`$pagination-line-height`	string	`$btn-line-height`	Line height for pagination items.
`$pagination-padding-y`	string	`$btn-padding-y`	Vertical padding for pagination items.
`$pagination-padding-x`	string	`.5em`	Horizontal padding for pagination items.
`$pagination-border-width`	string	`$border-width`	Border width for pagination items.
`$pagination-border-color`	string	`$btn-default-border-color`	Border color for pagination items.
`$pagination-border-radius`	string	`$border-radius`	Border radius for pagination items.
`$pagination-bg`	string	`$btn-default-bg`	Background color for pagination items.
`$pagination-color`	string	`$btn-default-color`	Text color for pagination items.
`$pagination-hover-bg`	string	`$btn-default-hover-bg`	Background color for pagination items in hover or focus state.
`$pagination-hover-color`	string	`$btn-default-hover-color`	Text color for pagination items in hover or focus state.
`$pagination-hover-border-color`	string	`$pagination-border-color`	Border color for pagination items in hover or focus state.
`$pagination-active-color`	string	`$component-active-color`	Text color for pagination items in active state.
`$pagination-active-bg`	string	`$component-active-bg`	Background color for pagination items in active state.
`$pagination-disabled-color`	string	`$component-disabled-color`	Text color for pagination items in disabled state.
`$pagination-disabled-bg`	string	`$component-disabled-bg`	Background color for pagination items in disabled state.
`$pagination-spaced-margin-end`	string	`.25em`	Vertical spacing between items in spaced pagination.
`$pagination-sizes`	map	`$component-sizes`	Values for pagination sizing variants.

Mixins

Here are the mixins related to pagination that we use to help generate our CSS. You can also uses these mixins to generate your own custom components or utilities.

pagination-size

Build a size variant for pagination.

@include pagination-size($padding-y, $padding-x, $font-size, $line-height, $border-radius);

Argument	Type	Default	Description
`$padding-y`	string	`''`	Vertical padding for pagination size variant.
`$padding-x`	string	`none`	Horizontal padding for pagination size variant.
`$font-size`	string	`none`	Font size for pagination size variant.
`$line-height`	string	`none`	Line height for pagination size variant.
`$border-radius`	string	`none`	Border radius for pagination size variant.