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
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">…</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">…</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">…</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">…</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">…</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">…</span></li>
<li><a class="pagination-link">86</a></li>
</ul>
</nav>
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!