diff --git a/README.md b/README.md
index 9eeb6d8c4..111d4355b 100644
--- a/README.md
+++ b/README.md
@@ -87,6 +87,10 @@ Paginate arrays efficiently avoiding expensive array-wrapping and without any ov
 
 Nav helper and templates for Bootstrap pagination. _(see [more...](http://ddnexus.github.io/pagy/extras/bootstrap))_
 
+### Bulma Extra
+
+Nav helper and templates for Bulma CSS framework pagination. _(see [more...](http://ddnexus.github.io/pagy/extras/bulma))_
+
 ### Compact Extra
 
 An alternative UI that combines the pagination feature with the navigation info in one compact element. _(see [more...](http://ddnexus.github.io/pagy/extras/compact))_
diff --git a/docs/assets/images/pagy_compact_bulma_g.png b/docs/assets/images/pagy_compact_bulma_g.png
new file mode 100644
index 000000000..58c95432c
Binary files /dev/null and b/docs/assets/images/pagy_compact_bulma_g.png differ
diff --git a/docs/extras.md b/docs/extras.md
index ab60c66e0..df6082e03 100644
--- a/docs/extras.md
+++ b/docs/extras.md
@@ -9,6 +9,7 @@ Pagy comes with a few optional extensions/extras:
 | ------------ | ------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------- |
 | `array`      | Paginate arrays efficiently avoiding expensive array-wrapping and without overriding                   | [array.rb](https://github.com/ddnexus/pagy/blob/master/lib/pagy/extras/array.rb), [documentation](extras/array.md)                |
 | `bootstrap`  | Nav helper and templates for Bootstrap pagination                                                      | [bootstrap.rb](https://github.com/ddnexus/pagy/blob/master/lib/pagy/extras/bootstrap.rb), [documentation](extras/bootstrap.md)    |
+| `bulma`      | Nav helper and templates for [Bulma](https://bulma.io) pagination component                            | [bulma.rb](https://github.com/ddnexus/pagy/blob/master/lib/pagy/extras/bulma.rb), [documentation](extras/bulma.md)                |
 | `compact`    | An alternative UI that combines the pagination  with the nav info in a single compact element          | [compact.rb](https://github.com/ddnexus/pagy/blob/master/lib/pagy/extras/compact.rb), [documentation](extras/compact.md)          |
 | `i18n`       | Use the `I18n` gem instead of the pagy implementation                                                  | [i18n.rb](https://github.com/ddnexus/pagy/blob/master/lib/pagy/extras/i81n.rb), [documentation](extras/i18n.md)                   |
 | `items`      | Allow the client to request a custom number of items per page with a ready to use selector UI          | [items.rb](https://github.com/ddnexus/pagy/blob/master/lib/pagy/extras/items.rb), [documentation](extras/items.md)                |
diff --git a/docs/extras/bulma.md b/docs/extras/bulma.md
new file mode 100644
index 000000000..c3b15d045
--- /dev/null
+++ b/docs/extras/bulma.md
@@ -0,0 +1,46 @@
+---
+title: Bulma
+---
+# Bulma Extra
+
+This extra adds nav helper and templates for Bulma CSS framework [pagination component](https://bulma.io/documentation/components/pagination).
+
+## Synopsys
+
+See [extras](../extras.md) for general usage info.
+
+Render the navigation links in some view...
+with a fast helper:
+
+```erb
+<%== pagy_nav_bulma(@pagy) %>
+```
+
+or with a template:
+
+```erb
+<%== render 'pagy/nav_bulma', locals: {pagy: @pagy} %>
+```
+
+## Files
+
+This extra is composed of 4 files:
+
+- [bulma.rb](https://github.com/ddnexus/pagy/blob/master/lib/pagy/extras/bulma.rb)
+- [nav_bulma.html.erb](https://github.com/ddnexus/pagy/blob/master/lib/pagy/extras/templates/nav_bulma.html.erb) (optional template)
+- [nav_bulma.html.haml](https://github.com/ddnexus/pagy/blob/master/lib/pagy/extras/templates/nav_bulma.html.haml) (optional template)
+- [nav_bulma.html.slim](https://github.com/ddnexus/pagy/blob/master/lib/pagy/extras/templates/nav_bulma.html.slim)  (optional template)
+
+## Methods
+
+This extra adds one nav helpers to the `Pagy::Frontend` module. You can customize it by overriding it directly in your own view helper.
+
+### pagy_nav_bulma(pagy)
+
+This method is the same as the `pagy_nav`, but customized for Bulma.
+
+The `nav_bulma.*` templates produce the same output, and can be used as an easier (but slower) starting point to override it.
+
+### Optional Template Files
+
+See [Using Templates](../how-to.md#using-templates).
diff --git a/docs/extras/compact.md b/docs/extras/compact.md
index b2b36992b..13ce8c3b3 100644
--- a/docs/extras/compact.md
+++ b/docs/extras/compact.md
@@ -22,6 +22,7 @@ Then use the responsive helper(s) in any view:
 ```erb
 <%== pagy_nav_compact(@pagy) %>
 <%== pagy_nav_compact_bootstrap(@pagy) %>
+<%== pagy_nav_compact_bulma(@pagy) %>
 ```
 
 ## Files
@@ -41,3 +42,10 @@ It can take an extra `id` argument, which is used to build the `id` attribute of
 ### pagy_nav_compact_bootstrap(pagy, ...)
 
 This method is the same as the `pagy_nav_compact`, but customized for Bootstrap.
+
+### pagy_nav_compact_bulma(pagy, ...)
+
+This method is the same as the `pagy_nav_compact`, but customized for Bulma CSS framework.
+
+Generated pagination preview:
+![pagy-compact-bulma](../assets/images/pagy-compact-bulma-g.png)
diff --git a/docs/extras/responsive.md b/docs/extras/responsive.md
index 1ef2272b1..710bc4067 100644
--- a/docs/extras/responsive.md
+++ b/docs/extras/responsive.md
@@ -28,6 +28,7 @@ Then use the responsive helper(s) in any view:
 ```erb
 <%== pagy_nav_responsive(@pagy) %>
 <%== pagy_nav_responsive_bootstrap(@pagy) %>
+<%== pagy_nav_responsive_bulma(@pagy) %>
 ```
 
 ## Files
@@ -57,9 +58,9 @@ The `reponsive` extra adds an instance method to the `Pagy` class and couple of
 
 ### responsive
 
-**Notice**: Unless you are going to override a `pagy_nav_responsive` or `pagy_nav_responsive_bootstrap` helper you can ignore this method.
+**Notice**: Unless you are going to override a `pagy_nav_responsive*` helpers you can ignore this method.
 
-This is a `Pagy` instance method that returns the data structure used by the `pagy_nav_responsive` and `pagy_nav_responsive_bootstrap` helpers in order to build the html and the javascript codes needed to make Pagy responsive to different widths.
+This is a `Pagy` instance method that returns the data structure used by the `pagy_nav_responsive*` helpers in order to build the html and the javascript codes needed to make Pagy responsive to different widths.
 
 ### pagy_nav_responsive(pagy, ...)
 
@@ -70,3 +71,7 @@ It can take an extra `id` argument, which is used to build the `id` attribute of
 ### pagy_nav_responsive_bootstrap(pagy, ...)
 
 This method is the same as the `pagy_nav_responsive`, but customized for Bootstrap.
+
+### pagy_nav_responsive_bulma(pagy, ...)
+
+This method is the same as the `pagy_nav_responsive`, but customized for Bulma CSS framework.
diff --git a/lib/pagy/extras/bulma.rb b/lib/pagy/extras/bulma.rb
new file mode 100644
index 000000000..67eb930a9
--- /dev/null
+++ b/lib/pagy/extras/bulma.rb
@@ -0,0 +1,37 @@
+# See the Pagy documentation: https://ddnexus.github.io/pagy/extras/bulma
+# frozen_string_literal: true
+
+class Pagy
+  # Add nav helper for Bulma pagination
+  module Frontend
+
+    def pagy_nav_bulma(pagy)
+      html, link, p_prev, p_next = +'', pagy_link_proc(pagy), pagy.prev, pagy.next
+
+      html << (p_prev ? link.call(p_prev, pagy_t('pagy.nav.prev'), 'class="pagination-previous" aria-label="previous page"')
+                      : %(<a class="pagination-previous" disabled>#{pagy_t('pagy.nav.prev')}</a>))
+      html << (p_next ? link.call(p_next, pagy_t('pagy.nav.next'), 'class="pagination-next" aria-label="next page"')
+                      : %(<a class="pagination-next" disabled>#{pagy_t('pagy.nav.next')}</a>))
+      html << '<ul class="pagination-list">'
+      pagy.series.each do |item| # series example: [1, :gap, 7, 8, "9", 10, 11, :gap, 36]
+        html << pagy_nav_bulma_item(link, item)
+      end
+      html << '</ul>'
+      %(<nav class="pagy-nav-bulma pagination is-centered" role="navigation" aria-label="pagination">#{html}</nav>)
+    end
+
+    private
+
+    def pagy_nav_bulma_item(link, item)
+      if item.is_a?(Integer)   # page link
+        aria = %( area-label="goto page #{item}")
+        %(<li>#{link.call item, item, 'class="pagination-link"' + aria}</li>)
+      elsif item.is_a?(String) # active page
+        aria = %( area-label="page #{item}" area-current="page")
+        %(<li>#{link.call item, item, 'class="pagination-link is-current"' + aria}</li>)
+      elsif item == :gap       # page gap
+        %(<li><span class="pagination-ellipsis">#{pagy_t('pagy.nav.gap')}</span></li>)
+      end
+    end
+  end
+end
diff --git a/lib/pagy/extras/compact.rb b/lib/pagy/extras/compact.rb
index b551fac4f..59e0291b0 100644
--- a/lib/pagy/extras/compact.rb
+++ b/lib/pagy/extras/compact.rb
@@ -38,5 +38,22 @@ def pagy_nav_compact_bootstrap(pagy, id=caller(1,1)[0].hash)
       html << %(</div></nav><script type="application/json" class="pagy-compact-json">["#{id}", "#{MARKER}", "#{p_page}"]</script>)
     end
 
+    # Compact pagination for Bulma: it returns the html with the series of links to the pages
+    # we use a numeric input tag to set the page and the Pagy.compact javascript to navigate
+    def pagy_nav_compact_bulma(pagy, id=caller(1,1)[0].hash)
+      html, link, p_prev, p_next, p_page, p_pages = +'', pagy_link_proc(pagy), pagy.prev, pagy.next, pagy.page, pagy.pages
+
+      html << %(<nav id="pagy-nav-#{id}" class="pagy-nav-compact-bulma" role="navigation" aria-label="pagination">)
+        html << link.call(MARKER, '', 'style="display: none;"')
+        html << %(<div class="field is-grouped is-grouped-centered" role="group">)
+        html << (p_prev ? %(<p class="control">#{link.call(p_prev, pagy_t('pagy.nav.prev'), 'class="button" aria-label="previous page"')}</p>)
+                        : %(<p class="control"><a class="button" disabled>#{pagy_t('pagy.nav.prev')}</a></p>))
+        input = %(<input class="input" type="number" min="1" max="#{p_pages}" value="#{p_page}" style="padding: 0; text-align: center; width: #{p_pages.to_s.length+1}rem;">)
+        html << %(<div class="pagy-compact-input control level is-mobile">#{pagy_t('pagy.compact.page')}&nbsp;#{input}&nbsp;#{pagy_t('pagy.compact.of')} #{p_pages}</div>)
+        html << (p_next ? %(<p class="control">#{link.call(p_next, pagy_t('pagy.nav.next'), 'class="button" aria-label="next page"')}</p>)
+                        : %(<p class="control"><a class="button" disabled>#{pagy_t('pagy.nav.next')}</a></p>))
+      html << %(</div></nav><script type="application/json" class="pagy-compact-json">["#{id}", "#{MARKER}", "#{p_page}"]</script>)
+    end
+
   end
 end
diff --git a/lib/pagy/extras/responsive.rb b/lib/pagy/extras/responsive.rb
index 106070e53..298a1d747 100644
--- a/lib/pagy/extras/responsive.rb
+++ b/lib/pagy/extras/responsive.rb
@@ -69,5 +69,24 @@ def pagy_nav_responsive_bootstrap(pagy, id=caller(1,1)[0].hash)
       %(<nav id="pagy-nav-#{id}" class="pagy-nav-responsive-bootstrap pagination" role="navigation" aria-label="pager"><ul class="pagination"></ul></nav>#{script})
     end
 
+    # Responsive pagination for Bulma: it returns the html with the series of links to the pages
+    # rendered by the Pagy.responsive javascript
+    def pagy_nav_responsive_bulma(pagy, id=caller(1,1)[0].hash)
+      tags, link, p_prev, p_next, responsive = {}, pagy_link_proc(pagy), pagy.prev, pagy.next, pagy.responsive
+
+      tags['prev'] = (p_prev ? %(#{link.call(p_prev, pagy_t('pagy.nav.prev'), 'class="pagination-previous" aria-label="previous page"')}<ul class="pagination-list">)
+                             : %(<a class="pagination-previous" disabled>#{pagy_t('pagy.nav.prev')}</a><ul class="pagination-list">))
+      responsive[:items].each do |item| # series example: [1, :gap, 7, 8, "9", 10, 11, :gap, 36]
+        tags[item.to_s] = if    item.is_a?(Integer); %(<li>#{link.call item, item, 'class="pagination-link" area-label="goto page '+item.to_s+'"'}</li>)
+                          elsif item.is_a?(String) ; %(<li>#{link.call item, item, 'class="pagination-link is-current" area-current="page" area-label="page '+item.to_s+'"'}</li>)
+                          elsif item == :gap       ; %(<li><span class="pagination-ellipsis">#{pagy_t('pagy.nav.gap')}</span></li>)
+                          end
+      end
+      tags['next'] = (p_next ? %(</ul>#{link.call(p_next, pagy_t('pagy.nav.next'), 'class="pagination-next" aria-label="next page"')})
+                             : %(</ul><a class="pagination-next" disabled>#{pagy_t('pagy.nav.next')}</a>))
+      script = %(<script type="application/json" class="pagy-responsive-json">["#{id}", #{tags.to_json},  #{responsive[:widths].to_json}, #{responsive[:series].to_json}]</script>)
+      %(<nav id="pagy-nav-#{id}" class="pagy-nav-bulma pagination is-centered" role="navigation" aria-label="pagination"></nav>#{script})
+    end
+
   end
 end
diff --git a/lib/pagy/extras/templates/nav_bulma.html.erb b/lib/pagy/extras/templates/nav_bulma.html.erb
new file mode 100644
index 000000000..6c9a57eeb
--- /dev/null
+++ b/lib/pagy/extras/templates/nav_bulma.html.erb
@@ -0,0 +1,24 @@
+<%#
+  This template is i18n-ready: if you don't use i18n, then you can replace the pagy_t
+  calls with the actual strings ("&lsaquo; Prev", "Next &rsaquo;", "&hellip;").
+
+  The link variable is set to a proc that returns the link tag.
+  Usage: link.call( page_number [, text [, extra_attributes_string ]])
+-%>
+<% link = pagy_link_proc(pagy) -%>
+<%#                            -%><nav class="pagy-nav-bulma pagination is-centered" role="navigation" aria-label="pagination">
+<% if pagy.prev                -%>  <%== link.call(pagy.prev, pagy_t('pagy.nav.prev'), 'class="pagination-previous" aria-label="previous page"') %>
+<% else                        -%>  <a class="pagination-previous" disabled><%== pagy_t('pagy.nav.prev') %></a>
+<% end                         -%>
+<% if pagy.next                -%>  <%== link.call(pagy.next, pagy_t('pagy.nav.next'), 'class="pagination-next" aria-label="next page"') %>
+<% else                        -%>  <a class="pagination-next" disabled><%== pagy_t('pagy.nav.next') %></a>
+<% end                         -%>
+<%#                            -%>  <ul class="pagination-list">
+<% pagy.series.each do |item| # series example: [1, :gap, 7, 8, "9", 10, 11, :gap, 36] -%>
+<%   if    item.is_a?(Integer) -%>    <li><%== link.call item, item, %(class="pagination-link" area-label="goto page #{item}") %></li>
+<%   elsif item.is_a?(String)  -%>    <li><%== link.call item, item, %(class="pagination-link is-current" area-label="page #{item}" area-current="page") %></li>
+<%   elsif item == :gap        -%>    <li><span class="pagination-ellipsis"><%== pagy_t('pagy.nav.gap') %></span></li>
+<%   end                       -%>
+<% end                         -%>
+<%#                            -%>  </ul>
+<%#                            -%></nav>
diff --git a/lib/pagy/extras/templates/nav_bulma.html.haml b/lib/pagy/extras/templates/nav_bulma.html.haml
new file mode 100644
index 000000000..61d73e529
--- /dev/null
+++ b/lib/pagy/extras/templates/nav_bulma.html.haml
@@ -0,0 +1,32 @@
+-# This template is i18n-ready: if you don't use i18n, then you can replace the pagy_t
+-# calls with the actual strings ("&lsaquo; Prev", "Next &rsaquo;", "&hellip;").
+
+-# The link variable is set to a proc that returns the link tag.
+-# Usage: link.call( page_number [, text [, extra_attributes_string ]])
+
+- link = pagy_link_proc(pagy)
+
+%nav.pagy-nav-bulma.pagination.is-centered{:role => "navigation", "aria-label" => "pagination"}
+
+  - if pagy.prev
+    != link.call(pagy.prev, pagy_t('pagy.nav.prev'), 'class="pagination-previous" aria-label="previous page"')
+  - else
+    %a.pagination-previous{:disabled => "disabled"}!= pagy_t('pagy.nav.prev')
+
+  - if pagy.next
+    != link.call(pagy.next, pagy_t('pagy.nav.next'), 'class="pagination-next" aria-label="next page"')
+  - else
+    %a.pagination-next{:disabled => "disabled"}!= pagy_t('pagy.nav.next')
+
+  %ul.pagination-list
+
+    - pagy.series.each do |item|                      # series example: [1, :gap, 7, 8, "9", 10, 11, :gap, 36]
+      - if item.is_a?(Integer)                        # page link
+        %li!= link.call item, item, %(class="pagination-link" area-label="goto page #{item}")
+
+      - elsif item.is_a?(String)                      # current page
+        %li!= link.call item, item, %(class="pagination-link is-current" area-label="page #{item}" area-current="page")
+
+      - elsif item == :gap                            # page gap
+        %li
+          %span.pagination-ellipsis!= pagy_t('pagy.nav.gap')
diff --git a/lib/pagy/extras/templates/nav_bulma.html.slim b/lib/pagy/extras/templates/nav_bulma.html.slim
new file mode 100644
index 000000000..ddaaaead1
--- /dev/null
+++ b/lib/pagy/extras/templates/nav_bulma.html.slim
@@ -0,0 +1,32 @@
+/ This template is i18n-ready: if you don't use i18n, then you can replace the pagy_t
+/ calls with the actual strings ("&lsaquo; Prev", "Next &rsaquo;", "&hellip;").
+
+/ The link variable is set to a proc that returns the link tag.
+/ Usage: link.call( page_number [, text [, extra_attributes_string ]])
+
+- link = pagy_link_proc(pagy)
+
+nav.pagy-nav-bulma.pagination.is-centered role="navigation" aria-label="pagination"
+
+  - if pagy.prev
+    == link.call(pagy.prev, pagy_t('pagy.nav.prev'), 'class="pagination-previous" aria-label="previous page"')
+  - else
+    a.pagination-previous disabled="disabled" == pagy_t('pagy.nav.prev')
+
+  - if pagy.next
+    == link.call(pagy.next, pagy_t('pagy.nav.next'), 'class="pagination-next" aria-label="next page"')
+  - else
+    a.pagination-next disabled="disabled" == pagy_t('pagy.nav.next')
+
+  ul.pagination-list
+
+    - pagy.series.each do |item|                 # series example: [1, :gap, 7, 8, "9", 10, 11, :gap, 36]
+      - if item.is_a?(Integer)                   # page link
+        li == link.call item, item, %(class="pagination-link" area-label="goto page #{item}")
+
+      - elsif item.is_a?(String)                 # current page
+        li == link.call item, item, %(class="pagination-link is-current" area-label="page #{item}" area-current="page")
+
+      - elsif item == :gap                       # page gap
+        li
+          span.pagination-ellipsis == pagy_t('pagy.nav.gap')
diff --git a/test/pagy/extras/bulma_test.rb b/test/pagy/extras/bulma_test.rb
new file mode 100644
index 000000000..9b1e5096d
--- /dev/null
+++ b/test/pagy/extras/bulma_test.rb
@@ -0,0 +1,95 @@
+require_relative '../../test_helper'
+require 'pagy/extras/bulma'
+
+SingleCov.covered!
+
+describe Pagy::Frontend do
+
+  let(:frontend) { TestView.new }
+
+  describe '#pagy_nav_bulma' do
+
+    before do
+      @array = (1..103).to_a.extend(Pagy::Array::PageMethod)
+    end
+
+    it 'renders page 1' do
+      pagy, _ = @array.pagy(1)
+      frontend.pagy_nav_bulma(pagy).must_equal \
+        '<nav class="pagy-nav-bulma pagination is-centered" role="navigation" aria-label="pagination">' \
+          '<a class="pagination-previous" disabled>&lsaquo;&nbsp;Prev</a>' \
+          '<a href="/foo?page=2"   rel="next" class="pagination-next" aria-label="next page">Next&nbsp;&rsaquo;</a>' \
+          '<ul class="pagination-list">' \
+            '<li><a href="/foo?page=1"   class="pagination-link is-current" area-label="page 1" area-current="page">1</a></li>' \
+            '<li><a href="/foo?page=2"   rel="next" class="pagination-link" area-label="goto page 2">2</a></li>' \
+            '<li><a href="/foo?page=3"   class="pagination-link" area-label="goto page 3">3</a></li>' \
+            '<li><a href="/foo?page=4"   class="pagination-link" area-label="goto page 4">4</a></li>' \
+            '<li><a href="/foo?page=5"   class="pagination-link" area-label="goto page 5">5</a></li>' \
+            '<li><a href="/foo?page=6"   class="pagination-link" area-label="goto page 6">6</a></li>' \
+          '</ul>' \
+        '</nav>'
+    end
+
+    it 'renders page 3' do
+      pagy, _ = @array.pagy(3)
+      frontend.pagy_nav_bulma(pagy).must_equal \
+        '<nav class="pagy-nav-bulma pagination is-centered" role="navigation" aria-label="pagination">' \
+          '<a href="/foo?page=2"   rel="prev" class="pagination-previous" aria-label="previous page">&lsaquo;&nbsp;Prev</a>' \
+          '<a href="/foo?page=4"   rel="next" class="pagination-next" aria-label="next page">Next&nbsp;&rsaquo;</a>' \
+          '<ul class="pagination-list">' \
+            '<li><a href="/foo?page=1"   class="pagination-link" area-label="goto page 1">1</a></li>' \
+            '<li><a href="/foo?page=2"   rel="prev" class="pagination-link" area-label="goto page 2">2</a></li>' \
+            '<li><a href="/foo?page=3"   class="pagination-link is-current" area-label="page 3" area-current="page">3</a></li>' \
+            '<li><a href="/foo?page=4"   rel="next" class="pagination-link" area-label="goto page 4">4</a></li>' \
+            '<li><a href="/foo?page=5"   class="pagination-link" area-label="goto page 5">5</a></li>' \
+            '<li><a href="/foo?page=6"   class="pagination-link" area-label="goto page 6">6</a></li>' \
+          '</ul>' \
+        '</nav>'
+    end
+
+
+    it 'renders page 6' do
+      pagy, _ = @array.pagy(6)
+      frontend.pagy_nav_bulma(pagy).must_equal \
+        '<nav class="pagy-nav-bulma pagination is-centered" role="navigation" aria-label="pagination">' \
+          '<a href="/foo?page=5"   rel="prev" class="pagination-previous" aria-label="previous page">&lsaquo;&nbsp;Prev</a>' \
+          '<a class="pagination-next" disabled>Next&nbsp;&rsaquo;</a>' \
+          '<ul class="pagination-list">' \
+            '<li><a href="/foo?page=1"   class="pagination-link" area-label="goto page 1">1</a></li>' \
+            '<li><a href="/foo?page=2"   class="pagination-link" area-label="goto page 2">2</a></li>' \
+            '<li><a href="/foo?page=3"   class="pagination-link" area-label="goto page 3">3</a></li>' \
+            '<li><a href="/foo?page=4"   class="pagination-link" area-label="goto page 4">4</a></li>' \
+            '<li><a href="/foo?page=5"   rel="prev" class="pagination-link" area-label="goto page 5">5</a></li>' \
+            '<li><a href="/foo?page=6"   class="pagination-link is-current" area-label="page 6" area-current="page">6</a></li>' \
+          '</ul>' \
+        '</nav>'
+    end
+
+    it 'renders page 10' do
+      @array = (1..1000).to_a.extend(Pagy::Array::PageMethod)
+      pagy, _ = @array.pagy(10)
+      frontend.pagy_nav_bulma(pagy).must_equal \
+        '<nav class="pagy-nav-bulma pagination is-centered" role="navigation" aria-label="pagination">' \
+          '<a href="/foo?page=9"   rel="prev" class="pagination-previous" aria-label="previous page">&lsaquo;&nbsp;Prev</a>' \
+          '<a href="/foo?page=11"   rel="next" class="pagination-next" aria-label="next page">Next&nbsp;&rsaquo;</a>' \
+          '<ul class="pagination-list">' \
+            '<li><a href="/foo?page=1"   class="pagination-link" area-label="goto page 1">1</a></li>' \
+            '<li><span class="pagination-ellipsis">&hellip;</span></li>' \
+            '<li><a href="/foo?page=6"   class="pagination-link" area-label="goto page 6">6</a></li>' \
+            '<li><a href="/foo?page=7"   class="pagination-link" area-label="goto page 7">7</a></li>' \
+            '<li><a href="/foo?page=8"   class="pagination-link" area-label="goto page 8">8</a></li>' \
+            '<li><a href="/foo?page=9"   rel="prev" class="pagination-link" area-label="goto page 9">9</a></li>' \
+            '<li><a href="/foo?page=10"   class="pagination-link is-current" area-label="page 10" area-current="page">10</a></li>' \
+            '<li><a href="/foo?page=11"   rel="next" class="pagination-link" area-label="goto page 11">11</a></li>' \
+            '<li><a href="/foo?page=12"   class="pagination-link" area-label="goto page 12">12</a></li>' \
+            '<li><a href="/foo?page=13"   class="pagination-link" area-label="goto page 13">13</a></li>' \
+            '<li><a href="/foo?page=14"   class="pagination-link" area-label="goto page 14">14</a></li>' \
+            '<li><span class="pagination-ellipsis">&hellip;</span></li>' \
+            '<li><a href="/foo?page=50"   class="pagination-link" area-label="goto page 50">50</a></li>' \
+          '</ul>' \
+        '</nav>'
+    end
+
+  end
+
+end
diff --git a/test/pagy/extras/compact_test.rb b/test/pagy/extras/compact_test.rb
index 72d9f85ce..08b83f1d1 100644
--- a/test/pagy/extras/compact_test.rb
+++ b/test/pagy/extras/compact_test.rb
@@ -119,4 +119,69 @@
 
   end
 
+  describe "#pagy_nav_compact_bulma" do
+
+    before do
+      @array = (1..103).to_a.extend(Pagy::Array::PageMethod)
+    end
+
+    it 'renders page 1 for bulma' do
+      pagy, _  = @array.pagy(1)
+      html, id = frontend.pagy_nav_compact_bulma(pagy), caller(0,1)[0].hash
+      html.must_equal \
+        %(<nav id="pagy-nav-#{id}" class="pagy-nav-compact-bulma" role="navigation" aria-label="pagination">) +
+          %(<a href="/foo?page=#{Pagy::Frontend::MARKER}"   style="display: none;"></a>) +
+          %(<div class="field is-grouped is-grouped-centered" role="group">) +
+            %(<p class="control"><a class="button" disabled>&lsaquo;&nbsp;Prev</a></p>) +
+            %(<div class="pagy-compact-input control level is-mobile">) +
+              %(Page&nbsp;) +
+              %(<input class="input" type="number" min="1" max="6" value="1" style="padding: 0; text-align: center; width: 2rem;">) +
+              %(&nbsp;of 6) +
+            %(</div>) +
+            %(<p class="control"><a href="/foo?page=2"   rel="next" class="button" aria-label="next page">Next&nbsp;&rsaquo;</a></p>) +
+          %(</div>) +
+        %(</nav>) +
+        %(<script type="application/json" class="pagy-compact-json">["#{id}", "#{Pagy::Frontend::MARKER}", "1"]</script>)
+    end
+
+    it 'renders page 3 for bulma' do
+      pagy, _  = @array.pagy(3)
+      html, id = frontend.pagy_nav_compact_bulma(pagy), caller(0,1)[0].hash
+      html.must_equal \
+        %(<nav id="pagy-nav-#{id}" class="pagy-nav-compact-bulma" role="navigation" aria-label="pagination">) +
+          %(<a href="/foo?page=#{Pagy::Frontend::MARKER}"   style="display: none;"></a>) +
+          %(<div class="field is-grouped is-grouped-centered" role="group">) +
+            %(<p class="control"><a href="/foo?page=2"   rel="prev" class="button" aria-label=\"previous page\">&lsaquo;&nbsp;Prev</a></p>) +
+            %(<div class="pagy-compact-input control level is-mobile">) +
+              %(Page&nbsp;) +
+              %(<input class="input" type="number" min="1" max="6" value="3" style="padding: 0; text-align: center; width: 2rem;">) +
+              %(&nbsp;of 6) +
+            %(</div>) +
+            %(<p class="control"><a href="/foo?page=4"   rel="next" class="button" aria-label="next page">Next&nbsp;&rsaquo;</a></p>) +
+          %(</div>) +
+        %(</nav>) +
+        %(<script type="application/json" class="pagy-compact-json">["#{id}", "#{Pagy::Frontend::MARKER}", "3"]</script>)
+    end
+
+    it 'renders page 6 for bulma' do
+      pagy, _  = @array.pagy(6)
+      html, id = frontend.pagy_nav_compact_bulma(pagy), caller(0,1)[0].hash
+      html.must_equal \
+        %(<nav id="pagy-nav-#{id}" class="pagy-nav-compact-bulma" role="navigation" aria-label="pagination">) +
+          %(<a href="/foo?page=#{Pagy::Frontend::MARKER}"   style="display: none;"></a>) +
+          %(<div class="field is-grouped is-grouped-centered" role="group">) +
+            %(<p class="control"><a href="/foo?page=5"   rel="prev" class="button" aria-label=\"previous page\">&lsaquo;&nbsp;Prev</a></p>) +
+            %(<div class="pagy-compact-input control level is-mobile">) +
+              %(Page&nbsp;) +
+              %(<input class="input" type="number" min="1" max="6" value="6" style="padding: 0; text-align: center; width: 2rem;">) +
+              %(&nbsp;of 6) +
+            %(</div>) +
+            %(<p class="control"><a class="button" disabled>Next&nbsp;&rsaquo;</a></p>) +
+          %(</div>) +
+        %(</nav>) +
+        %(<script type="application/json" class="pagy-compact-json">["#{id}", "#{Pagy::Frontend::MARKER}", "6"]</script>)
+    end
+
+  end
+
 end
diff --git a/test/pagy/extras/responsive_test.rb b/test/pagy/extras/responsive_test.rb
index 792823e58..33f60f952 100644
--- a/test/pagy/extras/responsive_test.rb
+++ b/test/pagy/extras/responsive_test.rb
@@ -81,4 +81,41 @@
 
   end
 
+  describe "#pagy_nav_responsive_bulma" do
+
+    before do
+      @array = (1..103).to_a.extend(Pagy::Array::PageMethod)
+    end
+
+    it 'renders page 1 for bulma' do
+      pagy, _  = @array.pagy(1)
+      html, id = frontend.pagy_nav_responsive_bulma(pagy), caller(0,1)[0].hash
+      html.must_equal \
+        "<nav id=\"pagy-nav-#{id}\" class=\"pagy-nav-bulma pagination is-centered\" role=\"navigation\" aria-label=\"pagination\"></nav><script type=\"application/json\" class=\"pagy-responsive-json\">[\"#{id}\", {\"prev\":\"<a class=\\\"pagination-previous\\\" disabled>&lsaquo;&nbsp;Prev</a><ul class=\\\"pagination-list\\\">\",\"1\":\"<li><a href=\\\"/foo?page=1\\\"   class=\\\"pagination-link is-current\\\" area-current=\\\"page\\\" area-label=\\\"page 1\\\">1</a></li>\",\"2\":\"<li><a href=\\\"/foo?page=2\\\"   rel=\\\"next\\\" class=\\\"pagination-link\\\" area-label=\\\"goto page 2\\\">2</a></li>\",\"3\":\"<li><a href=\\\"/foo?page=3\\\"   class=\\\"pagination-link\\\" area-label=\\\"goto page 3\\\">3</a></li>\",\"4\":\"<li><a href=\\\"/foo?page=4\\\"   class=\\\"pagination-link\\\" area-label=\\\"goto page 4\\\">4</a></li>\",\"5\":\"<li><a href=\\\"/foo?page=5\\\"   class=\\\"pagination-link\\\" area-label=\\\"goto page 5\\\">5</a></li>\",\"6\":\"<li><a href=\\\"/foo?page=6\\\"   class=\\\"pagination-link\\\" area-label=\\\"goto page 6\\\">6</a></li>\",\"next\":\"</ul><a href=\\\"/foo?page=2\\\"   rel=\\\"next\\\" class=\\\"pagination-next\\\" aria-label=\\\"next page\\\">Next&nbsp;&rsaquo;</a>\"},  [0], {\"0\":[\"1\",2,3,4,5,6]}]</script>"
+    end
+
+    it 'renders page 3 for bulma' do
+      pagy, _  = @array.pagy(3)
+      html, id = frontend.pagy_nav_responsive_bulma(pagy), caller(0,1)[0].hash
+      html.must_equal \
+        "<nav id=\"pagy-nav-#{id}\" class=\"pagy-nav-bulma pagination is-centered\" role=\"navigation\" aria-label=\"pagination\"></nav><script type=\"application/json\" class=\"pagy-responsive-json\">[\"#{id}\", {\"prev\":\"<a href=\\\"/foo?page=2\\\"   rel=\\\"prev\\\" class=\\\"pagination-previous\\\" aria-label=\\\"previous page\\\">&lsaquo;&nbsp;Prev</a><ul class=\\\"pagination-list\\\">\",\"1\":\"<li><a href=\\\"/foo?page=1\\\"   class=\\\"pagination-link\\\" area-label=\\\"goto page 1\\\">1</a></li>\",\"2\":\"<li><a href=\\\"/foo?page=2\\\"   rel=\\\"prev\\\" class=\\\"pagination-link\\\" area-label=\\\"goto page 2\\\">2</a></li>\",\"3\":\"<li><a href=\\\"/foo?page=3\\\"   class=\\\"pagination-link is-current\\\" area-current=\\\"page\\\" area-label=\\\"page 3\\\">3</a></li>\",\"4\":\"<li><a href=\\\"/foo?page=4\\\"   rel=\\\"next\\\" class=\\\"pagination-link\\\" area-label=\\\"goto page 4\\\">4</a></li>\",\"5\":\"<li><a href=\\\"/foo?page=5\\\"   class=\\\"pagination-link\\\" area-label=\\\"goto page 5\\\">5</a></li>\",\"6\":\"<li><a href=\\\"/foo?page=6\\\"   class=\\\"pagination-link\\\" area-label=\\\"goto page 6\\\">6</a></li>\",\"next\":\"</ul><a href=\\\"/foo?page=4\\\"   rel=\\\"next\\\" class=\\\"pagination-next\\\" aria-label=\\\"next page\\\">Next&nbsp;&rsaquo;</a>\"},  [0], {\"0\":[1,2,\"3\",4,5,6]}]</script>"
+    end
+
+    it 'renders page 6 for bulma' do
+      pagy, _  = @array.pagy(6)
+      html, id = frontend.pagy_nav_responsive_bulma(pagy), caller(0,1)[0].hash
+      html.must_equal \
+        "<nav id=\"pagy-nav-#{id}\" class=\"pagy-nav-bulma pagination is-centered\" role=\"navigation\" aria-label=\"pagination\"></nav><script type=\"application/json\" class=\"pagy-responsive-json\">[\"#{id}\", {\"prev\":\"<a href=\\\"/foo?page=5\\\"   rel=\\\"prev\\\" class=\\\"pagination-previous\\\" aria-label=\\\"previous page\\\">&lsaquo;&nbsp;Prev</a><ul class=\\\"pagination-list\\\">\",\"1\":\"<li><a href=\\\"/foo?page=1\\\"   class=\\\"pagination-link\\\" area-label=\\\"goto page 1\\\">1</a></li>\",\"2\":\"<li><a href=\\\"/foo?page=2\\\"   class=\\\"pagination-link\\\" area-label=\\\"goto page 2\\\">2</a></li>\",\"3\":\"<li><a href=\\\"/foo?page=3\\\"   class=\\\"pagination-link\\\" area-label=\\\"goto page 3\\\">3</a></li>\",\"4\":\"<li><a href=\\\"/foo?page=4\\\"   class=\\\"pagination-link\\\" area-label=\\\"goto page 4\\\">4</a></li>\",\"5\":\"<li><a href=\\\"/foo?page=5\\\"   rel=\\\"prev\\\" class=\\\"pagination-link\\\" area-label=\\\"goto page 5\\\">5</a></li>\",\"6\":\"<li><a href=\\\"/foo?page=6\\\"   class=\\\"pagination-link is-current\\\" area-current=\\\"page\\\" area-label=\\\"page 6\\\">6</a></li>\",\"next\":\"</ul><a class=\\\"pagination-next\\\" disabled>Next&nbsp;&rsaquo;</a>\"},  [0], {\"0\":[1,2,3,4,5,\"6\"]}]</script>"
+    end
+
+    it 'renders page 10 for bulma' do
+      @array   = (1..1000).to_a.extend(Pagy::Array::PageMethod)
+      pagy, _  = @array.pagy(10)
+      html, id = frontend.pagy_nav_responsive_bulma(pagy), caller(0,1)[0].hash
+      html.must_equal \
+        "<nav id=\"pagy-nav-#{id}\" class=\"pagy-nav-bulma pagination is-centered\" role=\"navigation\" aria-label=\"pagination\"></nav><script type=\"application/json\" class=\"pagy-responsive-json\">[\"#{id}\", {\"prev\":\"<a href=\\\"/foo?page=9\\\"   rel=\\\"prev\\\" class=\\\"pagination-previous\\\" aria-label=\\\"previous page\\\">&lsaquo;&nbsp;Prev</a><ul class=\\\"pagination-list\\\">\",\"1\":\"<li><a href=\\\"/foo?page=1\\\"   class=\\\"pagination-link\\\" area-label=\\\"goto page 1\\\">1</a></li>\",\"gap\":\"<li><span class=\\\"pagination-ellipsis\\\">&hellip;</span></li>\",\"6\":\"<li><a href=\\\"/foo?page=6\\\"   class=\\\"pagination-link\\\" area-label=\\\"goto page 6\\\">6</a></li>\",\"7\":\"<li><a href=\\\"/foo?page=7\\\"   class=\\\"pagination-link\\\" area-label=\\\"goto page 7\\\">7</a></li>\",\"8\":\"<li><a href=\\\"/foo?page=8\\\"   class=\\\"pagination-link\\\" area-label=\\\"goto page 8\\\">8</a></li>\",\"9\":\"<li><a href=\\\"/foo?page=9\\\"   rel=\\\"prev\\\" class=\\\"pagination-link\\\" area-label=\\\"goto page 9\\\">9</a></li>\",\"10\":\"<li><a href=\\\"/foo?page=10\\\"   class=\\\"pagination-link is-current\\\" area-current=\\\"page\\\" area-label=\\\"page 10\\\">10</a></li>\",\"11\":\"<li><a href=\\\"/foo?page=11\\\"   rel=\\\"next\\\" class=\\\"pagination-link\\\" area-label=\\\"goto page 11\\\">11</a></li>\",\"12\":\"<li><a href=\\\"/foo?page=12\\\"   class=\\\"pagination-link\\\" area-label=\\\"goto page 12\\\">12</a></li>\",\"13\":\"<li><a href=\\\"/foo?page=13\\\"   class=\\\"pagination-link\\\" area-label=\\\"goto page 13\\\">13</a></li>\",\"14\":\"<li><a href=\\\"/foo?page=14\\\"   class=\\\"pagination-link\\\" area-label=\\\"goto page 14\\\">14</a></li>\",\"50\":\"<li><a href=\\\"/foo?page=50\\\"   class=\\\"pagination-link\\\" area-label=\\\"goto page 50\\\">50</a></li>\",\"next\":\"</ul><a href=\\\"/foo?page=11\\\"   rel=\\\"next\\\" class=\\\"pagination-next\\\" aria-label=\\\"next page\\\">Next&nbsp;&rsaquo;</a>\"},  [0], {\"0\":[1,\"gap\",6,7,8,9,\"10\",11,12,13,14,\"gap\",50]}]</script>"
+    end
+
+  end
+
 end