New This website is new, your feedback will help us to improve it.

Pagination

Overview

Use the bsk-pagination class for navigating within large collections of items, such as lists or tables.

Use the bsk-pager class as a simpler alternative to pagination.

Use the aria-label element so assistive technologies can tell each pagination or pager instance apart.

Variants

Default pagination

<div class="bsk-pagination" role="navigation">
  <span class="pages">Page 1 of 7</span>
  <span aria-current="page" class="current">1</span>
  <a title="Page 2" href="#">2</a>
  <a title="Page 3" href="#">3</a>
  <a title="Page 4" href="#">4</a>
  <a title="Page 5" href="#">5</a>
  <span>...</span>
  <a class="nextpostslink" rel="next" aria-label="Next Page" href="#"></a>
  <a class="last" aria-label="Last Page" href="#">Last »</a>
</div>

Simple pager

<nav>
  <ul class="bsk-pager text-center">
      <li><a href="#">Previous</a></li>
      <li><a href="#">Next</a></li>
  </ul>
</nav>

Sizes

Add one of these classes to alter the size of a pagination instance:

Pagination Size Pagination Group Size Class
Large .bsk-pagination-lg
Default
Small .bsk-pagination-sm

These classes do not apply to the pager.

<div class="bsk-pagination bsk-pagination-lg" role="navigation">
  <span class="pages">Page 1 of 7</span>
  <span aria-current="page" class="current">1</span>
  <a title="Page 2" href="#">2</a>
  <a title="Page 3" href="#">3</a>
  <a title="Page 4" href="#">4</a>
  <a title="Page 5" href="#">5</a>
  <span class="extend">...</span>
  <a class="nextpostslink" rel="next" aria-label="Next Page" href="#"></a>
  <a class="last" aria-label="Last Page" href="#">Last »</a>
</div>

<div class="bsk-pagination" role="navigation">
  <span class="pages">Page 1 of 7</span>
  <span aria-current="page" class="current">1</span>
  <a title="Page 2" href="#">2</a>
  <a title="Page 3" href="#">3</a>
  <a title="Page 4" href="#">4</a>
  <a title="Page 5" href="#">5</a>
  <span class="extend">...</span>
  <a class="nextpostslink" rel="next" aria-label="Next Page" href="#"></a>
  <a class="last" aria-label="Last Page" href="#">Last »</a>
</div>

<div class="bsk-pagination bsk-pagination-sm" role="navigation">
  <span class="pages">Page 1 of 7</span>
  <span aria-current="page" class="current">1</span>
  <a title="Page 2" href="#">2</a>
  <a title="Page 3" href="#">3</a>
  <a title="Page 4" href="#">4</a>
  <a title="Page 5" href="#">5</a>
  <span class="extend">...</span>
  <a class="nextpostslink" rel="next" aria-label="Next Page" href="#"></a>
  <a class="last" aria-label="Last Page" href="#">Last »</a>
</div>

States

Active item

Add the .current class to indicate the current pagination item. Also add aria-current="page"

<div class="bsk-pagination" role="navigation">
  <span class="pages">Page 1 of 7</span>
  <span aria-current="page" class="current">1</span>
  <a title="Page 2" href="#">2</a>
  <a title="Page 3" href="#">3</a>
  <a title="Page 4" href="#">4</a>
  <a title="Page 5" href="#">5</a>
  <span>...</span>
  <a class="nextpostslink" rel="next" aria-label="Next Page" href="#"></a>
  <a class="last" aria-label="Last Page" href="#">Last »</a>
</div>

Disabled item

Add the bsk-disabled class to visually disable an item

It is not safe to rely on this state to prevent users activating disabled actions

<div class="bsk-pagination" role="navigation">
  <span class="pages">Page 1 of 7</span>
  <span aria-current="page" class="current">1</span>
  <a title="Page 2" href="#">2</a>
  <a title="Page 3" class="bsk-disabled">3</a>
  <a title="Page 4" href="#">4</a>
  <a title="Page 5" href="#">5</a>
  <span>...</span>
  <a class="nextpostslink" rel="next" aria-label="Next Page" href="#"></a>
  <a class="last" aria-label="Last Page" href="#">Last »</a>
</div>

Layouts

Pager alignment

Remove the text-center class and add float-right to the second <li> item to align it to the right.

<nav>
  <ul class="bsk-pager">
      <li><a href="#">Previous</a></li>
      <li class="float-right"><a href="#">Next</a></li>
  </ul>
</nav>