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" role="navigation" aria-label="pagination">
<a class="pagination-previous">Previous</a>
<a class="pagination-next">Next page</a>
<ul class="pagination-list">
<li>
<a class="pagination-link" aria-label="Goto page 1">1</a>
</li>
<li>
<span class="pagination-ellipsis">…</span>
</li>
<li>
<a class="pagination-link" aria-label="Goto page 45">45</a>
</li>
<li>
<a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a>
</li>
<li>
<a class="pagination-link" aria-label="Goto page 47">47</a>
</li>
<li>
<span class="pagination-ellipsis">…</span>
</li>
<li>
<a class="pagination-link" aria-label="Goto page 86">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" role="navigation" aria-label="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" aria-label="Page 1" aria-current="page">1</a>
</li>
<li>
<a class="pagination-link" aria-label="Goto page 2">2</a>
</li>
<li>
<a class="pagination-link" aria-label="Goto page 3">3</a>
</li>
</ul>
</nav>
By default on tablet, 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" role="navigation" aria-label="pagination">
<a class="pagination-previous">Previous</a>
<a class="pagination-next">Next page</a>
<ul class="pagination-list">
<li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
<li><span class="pagination-ellipsis">…</span></li>
<li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
<li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
<li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
<li><span class="pagination-ellipsis">…</span></li>
<li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
</ul>
</nav><nav class="pagination is-right" role="navigation" aria-label="pagination">
<a class="pagination-previous">Previous</a>
<a class="pagination-next">Next page</a>
<ul class="pagination-list">
<li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
<li><span class="pagination-ellipsis">…</span></li>
<li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
<li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
<li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
<li><span class="pagination-ellipsis">…</span></li>
<li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
</ul>
</nav>
Add the is-rounded modifier to have rounded pagination items.
<nav class="pagination is-rounded" role="navigation" aria-label="pagination">
<a class="pagination-previous">Previous</a>
<a class="pagination-next">Next page</a>
<ul class="pagination-list">
<li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
<li><span class="pagination-ellipsis">…</span></li>
<li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
<li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
<li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
<li><span class="pagination-ellipsis">…</span></li>
<li><a class="pagination-link" aria-label="Goto page 86">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.
<nav class="pagination is-small" role="navigation" aria-label="pagination">
<a class="pagination-previous">Previous</a>
<a class="pagination-next">Next page</a>
<ul class="pagination-list">
<li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
<li><span class="pagination-ellipsis">…</span></li>
<li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
<li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
<li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
<li><span class="pagination-ellipsis">…</span></li>
<li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
</ul>
</nav><nav class="pagination is-medium" role="navigation" aria-label="pagination">
<a class="pagination-previous">Previous</a>
<a class="pagination-next">Next page</a>
<ul class="pagination-list">
<li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
<li><span class="pagination-ellipsis">…</span></li>
<li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
<li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
<li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
<li><span class="pagination-ellipsis">…</span></li>
<li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
</ul>
</nav><nav class="pagination is-large" role="navigation" aria-label="pagination">
<a class="pagination-previous">Previous</a>
<a class="pagination-next">Next page</a>
<ul class="pagination-list">
<li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
<li><span class="pagination-ellipsis">…</span></li>
<li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
<li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
<li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
<li><span class="pagination-ellipsis">…</span></li>
<li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
</ul>
</nav>You can use these variables to customize this component. Simply set one or multiple of these variables before importing Bulma. Learn how.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| Name | Type | Default value | Computed value |
$pagination-color
|
color |
$grey-darker
|
hsl(0, 0%, 21%)
|
$pagination-border-color
|
color |
$grey-lighter
|
hsl(0, 0%, 86%)
|
$pagination-margin
|
size |
-0.25rem
|
|
$pagination-hover-color
|
color |
$link-hover
|
hsl(0, 0%, 21%)
|
$pagination-hover-border-color
|
color |
$link-hover-border
|
hsl(0, 0%, 71%)
|
$pagination-focus-color
|
color |
$link-focus
|
hsl(0, 0%, 21%)
|
$pagination-focus-border-color
|
color |
$link-focus-border
|
hsl(217, 71%, 53%)
|
$pagination-active-color
|
color |
$link-active
|
hsl(0, 0%, 21%)
|
$pagination-active-border-color
|
color |
$link-active-border
|
hsl(0, 0%, 29%)
|
$pagination-disabled-color
|
color |
$grey
|
hsl(0, 0%, 48%)
|
$pagination-disabled-background-color
|
color |
$grey-lighter
|
hsl(0, 0%, 86%)
|
$pagination-disabled-border-color
|
color |
$grey-lighter
|
hsl(0, 0%, 86%)
|
$pagination-current-color
|
color |
$link-invert
|
#fff
|
$pagination-current-background-color
|
color |
$link
|
hsl(217, 71%, 53%)
|
$pagination-current-border-color
|
color |
$link
|
hsl(217, 71%, 53%)
|
$pagination-ellipsis-color
|
color |
$grey-light
|
hsl(0, 0%, 71%)
|
This page is open source.
Noticed a typo? Or something unclear?
Improve this page on GitHub
by Jeremy Thomas, creator of Bulma, Oleksii Potiekhin,
Mikko Lauhakari, Aslam Shah and David Berning
A step-by-step guide that teaches you how to build a web interface from scratch using Bulma.
by Jeremy Thomas, creator of Bulma, Oleksii Potiekhin,
Mikko Lauhakari, Aslam Shah and David Berning
A step-by-step guide that teaches you how to build a web interface from scratch using Bulma.
