# Bulma v0.5.0: a modern CSS framework based on Flexbox
Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.

You are viewing the deprecated 0.5.0 version of the website. Click here to view the latest version

Documentation

Everything you need to create a website with Bulma

# Pagination

## A responsive, usable, and flexible pagination

Colors No
Sizes Yes
Variables Yes

The pagination component consists of several elements:

- `pagination-previous` and `pagination-next` for incremental navigation
- `pagination-list` which displays page items:
  - `pagination-link` for the page numbers
  - `pagination-ellipsis` for range separators

All elements are optional so you can compose your pagination as you wish.

    <nav class="pagination">
      <a class="pagination-previous">Previous</a>
      <a class="pagination-next">Next page</a>
      <ul class="pagination-list">
        <li>
          <a class="pagination-link">1</a>
        </li>
        <li>
          <span class="pagination-ellipsis">&hellip;</span>
        </li>
        <li>
          <a class="pagination-link">45</a>
        </li>
        <li>
          <a class="pagination-link is-current">46</a>
        </li>
        <li>
          <a class="pagination-link">47</a>
        </li>
        <li>
          <span class="pagination-ellipsis">&hellip;</span>
        </li>
        <li>
          <a class="pagination-link">86</a>
        </li>
      </ul>
    </nav>

You can disable some links if they are not active, or change the amount of page numbers available.

    <nav class="pagination">
      <a class="pagination-previous" title="This is the first page" disabled>Previous</a>
      <a class="pagination-next">Next page</a>
      <ul class="pagination-list">
        <li>
          <a class="pagination-link is-current">1</a>
        </li>
        <li>
          <a class="pagination-link">2</a>
        </li>
        <li>
          <a class="pagination-link">3</a>
        </li>
      </ul>
    </nav>

By default, the list is located on the left, and the previous/next buttons on the right. But you can change the order of these elements by using the `is-centered` and `is-right` modifiers.

    <nav class="pagination is-centered">
      <a class="pagination-previous">Previous</a>
      <a class="pagination-next">Next page</a>
      <ul class="pagination-list">
        <li><a class="pagination-link">1</a></li>
        <li><span class="pagination-ellipsis">&hellip;</span></li>
        <li><a class="pagination-link">45</a></li>
        <li><a class="pagination-link is-current">46</a></li>
        <li><a class="pagination-link">47</a></li>
        <li><span class="pagination-ellipsis">&hellip;</span></li>
        <li><a class="pagination-link">86</a></li>
      </ul>
    </nav>

    <nav class="pagination is-right">
      <a class="pagination-previous">Previous</a>
      <a class="pagination-next">Next page</a>
      <ul class="pagination-list">
        <li><a class="pagination-link">1</a></li>
        <li><span class="pagination-ellipsis">&hellip;</span></li>
        <li><a class="pagination-link">45</a></li>
        <li><a class="pagination-link is-current">46</a></li>
        <li><a class="pagination-link">47</a></li>
        <li><span class="pagination-ellipsis">&hellip;</span></li>
        <li><a class="pagination-link">86</a></li>
      </ul>
    </nav>

## Sizes

The pagination comes in 3 additional sizes.
You only need to append the modifier `is-small`, `is-medium`, or `is-large` to the `pagination` component.

### Variables #

You can use these variables to customize this component. Simply set one or multiple of these variables before importing Bulma. Learn how.

Name | Default value
--- | ---
Name | Default value
`$pagination-color` | `$grey-darker`
`$pagination-background` | `$white`
`$pagination-border-color` | `$grey-lighter`
`$pagination-margin` | `-0.25rem`
`$pagination-hover-color` | `$link-hover`
`$pagination-hover-border-color` | `$link-hover-border`
`$pagination-focus-color` | `$link-focus`
`$pagination-focus-border-color` | `$link-focus-border`
`$pagination-active-color` | `$link-active`
`$pagination-active-border-color` | `$link-active-border`
`$pagination-disabled-color` | `$grey`
`$pagination-disabled-background-color` | `$grey-lighter`
`$pagination-disabled-border-color` | `$grey-lighter`
`$pagination-current-color` | `$link-invert`
`$pagination-current-background-color` | `$link`
`$pagination-current-border-color` | `$link`
`$pagination-ellipsis-color` | `$grey-light`
`$pagination-shadow-inset` | `inset 0 1px 2px rgba($black, 0`

This page is open source. Noticed a typo? Or something unclear? Improve this page on GitHub

Bulma Partners

Check out their products!

Bulma Newsletter

Get notified when v1 is ready!