v4 Beta now available! Try it out! Feedback welcome!
Looking for v3 docs?

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.