Pagination

Pagination splits a long list or table into pages and lets the user move between them, with sizes, icons and disabled states.

Basic example

The basic pagination has page numbers with previous and next icon links:

<!-- BEGIN PAGINATION -->
<nav aria-label="Pagination">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-disabled="true" aria-label="Previous page">
        <!-- Download SVG icon from http://tabler.io/icons/icon/chevron-left -->
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
          <path d="M15 6l-6 6l6 6" />
        </svg>
      </a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Page 1">1</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Page 2">2</a>
    </li>
    <li class="page-item active">
      <a class="page-link" href="#" aria-label="Page 3" aria-current="page">3</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Page 4">4</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Page 5">5</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Next page">
        <!-- Download SVG icon from http://tabler.io/icons/icon/chevron-right -->
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
          <path d="M9 6l6 6l-6 6" />
        </svg>
      </a>
    </li>
  </ul>
</nav>
<!-- END PAGINATION -->

With first and last links

With many pages, add first and last links to jump to either end.

<!-- BEGIN PAGINATION -->
<nav aria-label="Pagination">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-disabled="true" aria-label="First page">
        <!-- Download SVG icon from http://tabler.io/icons/icon/chevrons-left -->
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
          <path d="M11 7l-5 5l5 5" />
          <path d="M17 7l-5 5l5 5" />
        </svg>
      </a>
    </li>
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-disabled="true" aria-label="Previous page">
        <!-- Download SVG icon from http://tabler.io/icons/icon/chevron-left -->
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
          <path d="M15 6l-6 6l6 6" />
        </svg>
      </a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Page 1">1</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Page 2">2</a>
    </li>
    <li class="page-item active">
      <a class="page-link" href="#" aria-label="Page 3" aria-current="page">3</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Page 4">4</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Page 5">5</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Next page">
        <!-- Download SVG icon from http://tabler.io/icons/icon/chevron-right -->
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
          <path d="M9 6l6 6l-6 6" />
        </svg>
      </a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Last page">
        <!-- Download SVG icon from http://tabler.io/icons/icon/chevrons-right -->
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
          <path d="M7 7l5 5l-5 5" />
          <path d="M13 7l5 5l-5 5" />
        </svg>
      </a>
    </li>
  </ul>
</nav>
<!-- END PAGINATION -->

Offset

When there are too many pages to list, show only a few around the current one.

<!-- BEGIN PAGINATION -->
<nav aria-label="Pagination">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-disabled="true" aria-label="Previous page">
        <!-- Download SVG icon from http://tabler.io/icons/icon/chevron-left -->
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
          <path d="M15 6l-6 6l6 6" />
        </svg>
      </a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Page 1">1</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Page 2">2</a>
    </li>
    <li class="page-item active">
      <a class="page-link" href="#" aria-label="Page 3" aria-current="page">3</a>
    </li>
    <li class="page-item">
      <span class="page-link disabled">&hellip;</span>
    </li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Page 18">18</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Page 19">19</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Page 20">20</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Next page">
        <!-- Download SVG icon from http://tabler.io/icons/icon/chevron-right -->
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
          <path d="M9 6l6 6l-6 6" />
        </svg>
      </a>
    </li>
  </ul>
</nav>
<!-- END PAGINATION -->

Button with text

Text buttons give the previous and next links a label instead of an icon.

<!-- BEGIN PAGINATION -->
<nav aria-label="Pagination">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link page-text" href="#" tabindex="-1" aria-disabled="true">Previous</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Page 1">1</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Page 2">2</a>
    </li>
    <li class="page-item active">
      <a class="page-link" href="#" aria-label="Page 3" aria-current="page">3</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Page 4">4</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Page 5">5</a>
    </li>
    <li class="page-item">
      <a class="page-link page-text" href="#">Next</a>
    </li>
  </ul>
</nav>
<!-- END PAGINATION -->

Outline version

The .pagination-outline class draws the items with a border and no fill.

<!-- BEGIN PAGINATION -->
<nav aria-label="Pagination">
  <ul class="pagination pagination-outline">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-disabled="true" aria-label="Previous page">
        <!-- Download SVG icon from http://tabler.io/icons/icon/chevron-left -->
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
          <path d="M15 6l-6 6l6 6" />
        </svg>
      </a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Page 1">1</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Page 2">2</a>
    </li>
    <li class="page-item active">
      <a class="page-link" href="#" aria-label="Page 3" aria-current="page">3</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Page 4">4</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Page 5">5</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Next page">
        <!-- Download SVG icon from http://tabler.io/icons/icon/chevron-right -->
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
          <path d="M9 6l6 6l-6 6" />
        </svg>
      </a>
    </li>
  </ul>
</nav>
<!-- END PAGINATION -->

Circle version

The .pagination-circle class makes each item round. It combines with .pagination-outline.

<!-- BEGIN PAGINATION -->
<nav aria-label="Pagination">
  <ul class="pagination pagination-circle">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-disabled="true" aria-label="Previous page">
        <!-- Download SVG icon from http://tabler.io/icons/icon/chevron-left -->
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
          <path d="M15 6l-6 6l6 6" />
        </svg>
      </a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Page 1">1</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Page 2">2</a>
    </li>
    <li class="page-item active">
      <a class="page-link" href="#" aria-label="Page 3" aria-current="page">3</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Page 4">4</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Page 5">5</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Next page">
        <!-- Download SVG icon from http://tabler.io/icons/icon/chevron-right -->
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
          <path d="M9 6l6 6l-6 6" />
        </svg>
      </a>
    </li>
  </ul>
</nav>
<!-- END PAGINATION -->
<!-- BEGIN PAGINATION -->
<nav aria-label="Pagination">
  <ul class="pagination pagination-circle pagination-outline">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-disabled="true" aria-label="Previous page">
        <!-- Download SVG icon from http://tabler.io/icons/icon/chevron-left -->
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
          <path d="M15 6l-6 6l6 6" />
        </svg>
      </a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Page 1">1</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Page 2">2</a>
    </li>
    <li class="page-item active">
      <a class="page-link" href="#" aria-label="Page 3" aria-current="page">3</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Page 4">4</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Page 5">5</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Next page">
        <!-- Download SVG icon from http://tabler.io/icons/icon/chevron-right -->
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
          <path d="M9 6l6 6l-6 6" />
        </svg>
      </a>
    </li>
  </ul>
</nav>
<!-- END PAGINATION -->

For prose - documentation, a blog, a wizard - name the pages instead of numbering them. Put page-item-subtitle above the title for the direction, and page-item-title for the name of the target page.

<nav aria-label="Pagination">
  <ul class="pagination">
    <li class="page-item page-prev">
      <a class="page-link" href="#" rel="prev">
        <div class="page-item-subtitle">previous</div>
        <div class="page-item-title">Getting started</div>
      </a>
    </li>
    <li class="page-item page-next">
      <a class="page-link" href="#" rel="next">
        <div class="page-item-subtitle">next</div>
        <div class="page-item-title">Installation</div>
      </a>
    </li>
  </ul>
</nav>

Accessibility

Wrap the list in <nav aria-label="Pagination">. A page can have more than one pager, so the label is what tells them apart.
Mark the current page with aria-current="page" on its link, not with the active class alone.
Previous and next arrows need text. Keep a visually-hidden label, or set aria-label="Previous" on the link.
A disabled step is still a link. Add aria-disabled="true" and tabindex="-1" so it is skipped, since the disabled class only changes how it looks.
The page numbers alone do not say what they page through. Say it in the nav label, for example aria-label="Search results pages".

Class reference

Every class this component ships, grouped by what it changes. A name in braces stands for a family — {color} is any base color, {breakpoint} any responsive step.

`pagination`	component	Container element, an unordered list
`page-item`	part	One entry in the pager
`page-link`	part	The clickable element inside an entry
`page-item-title`	part	Page name, for a pager that names pages instead of numbering them
`page-item-subtitle`	part	Small uppercase label above the title
`pagination-outline`	style	Outlined entries instead of filled ones
`pagination-circle`	style	Round entries
`pagination-sm`	size	Small size
`pagination-lg`	size	Large size

CSS

Variables

The component uses local CSS variables on .pagination for real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. Source: core/scss/bootstrap/_pagination.scss.

--pagination-padding-x: #{$pagination-padding-x};
--pagination-padding-y: #{$pagination-padding-y};
@include rfs($pagination-font-size, --pagination-font-size);
--pagination-color: #{$pagination-color};
--pagination-bg: #{$pagination-bg};
--pagination-border-width: #{$pagination-border-width};
--pagination-border-color: #{$pagination-border-color};
--pagination-border-radius: #{$pagination-border-radius};
--pagination-hover-color: #{$pagination-hover-color};
--pagination-hover-bg: #{$pagination-hover-bg};
--pagination-hover-border-color: #{$pagination-hover-border-color};
--pagination-focus-color: #{$pagination-focus-color};
--pagination-focus-bg: #{$pagination-focus-bg};
--pagination-active-color: #{$pagination-active-color};
--pagination-active-bg: #{$pagination-active-bg};
--pagination-active-border-color: #{$pagination-active-border-color};
--pagination-disabled-color: #{$pagination-disabled-color};
--pagination-disabled-bg: #{$pagination-disabled-bg};
--pagination-disabled-border-color: #{$pagination-disabled-border-color};

Sass variables

Override these variables before importing Tabler to change the defaults. Source: core/scss/_variables.scss.

$pagination-padding-y: calc(0.25rem + 1px);
$pagination-padding-x: 0.25rem;
$pagination-padding-y-sm: 0.25rem;
$pagination-padding-x-sm: 0.5rem;
$pagination-padding-y-lg: 0.75rem;
$pagination-padding-x-lg: 1.5rem;

$pagination-font-size: $font-size-base;

$pagination-color: var(--body-color);
$pagination-bg: transparent;
$pagination-border-radius: var(--border-radius);
$pagination-border-width: 1px;
$pagination-margin-start: calc(-1 * #{$pagination-border-width}); // stylelint-disable-line function-disallowed-list
$pagination-border-color: transparent;

$pagination-focus-color: var(--link-hover-color);
$pagination-focus-bg: var(--secondary-bg);

$pagination-hover-color: var(--link-hover-color);
$pagination-hover-bg: var(--hover-bg);
$pagination-hover-border-color: var(--pagination-border-color); // Todo in v6: remove this?

$pagination-active-color: $component-active-color;
$pagination-active-bg: var(--primary);
$pagination-active-border-color: var(--primary);

$pagination-disabled-color: var(--disabled-color);
$pagination-disabled-bg: transparent;
$pagination-disabled-border-color: var(--pagination-border-color);

$pagination-transition:
  color 0.15s ease-in-out,
  background-color 0.15s ease-in-out,
  border-color 0.15s ease-in-out,
  $focus-ring-transition,
  box-shadow 0.15s ease-in-out;

$pagination-border-radius-sm: var(--border-radius-sm);
$pagination-border-radius-lg: var(--border-radius-lg);
$pagination-gap: 0.25rem;
$pagination-link-min-width: 2rem;
$page-text-padding-x: 0.5rem;
$page-item-subtitle-margin-bottom: 2px;
$page-item-subtitle-font-size: 12px;

Menu

Pagination

Basic example

With first and last links

Offset

Button with text

Outline version

Circle version

Accessibility

Class reference

CSS

Variables

Sass variables

On this page

Menu

Pagination

Basic example

With first and last links

Offset

Button with text

Outline version

Circle version

Pager with page names

Accessibility

Class reference

CSS

Variables

Sass variables

Related

On this page

Get Admin Template, Icons, Illustrations and Emails in one bundle.