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