You are viewing the deprecated 0.4.4 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

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 New!

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.

Bulma Partners

Check out their products!

Bulma Newsletter

Get notified when v1 is ready!