bulma/docs/extensions.html

---
title: Extensions
layout: default
route: extensions
breadcrumb:
- home
- more
- extensions
extensions:
- name: bulma-o-steps
  url: https://octoshrimpy.github.io/bulma-o-steps/
  slug: bulma-o-steps
  width: 401
  height: 352
- name: bulma-accordion
  url: https://wikiki.github.io/components/accordion
  slug: bulma-accordion
  width: 640
  height: 310
- name: bulma-carousel
  url: https://wikiki.github.io/components/carousel
  slug: bulma-carousel
  width: 640
  height: 433
- name: bulma-quickview
  url: https://wikiki.github.io/components/quickview
  slug: bulma-quickview
  width: 1438
  height: 499
- name: bulma-iconpicker
  url: https://wikiki.github.io/form/iconpicker
  slug: bulma-iconpicker
  width: 237
  height: 89
- name: bulma-tagsinput
  url: https://wikiki.github.io/form/tagsinput
  slug: bulma-tagsinput
  width: 423
  height: 50
- name: bulma-tagsfield
  url: https://github.com/vyachkonovalov/bulma-tagsfield
  slug: bulma-tagsfield
  width: 471
  height: 70
- name: bulma-pricingtable
  url: https://wikiki.github.io/components/pricingtable
  slug: bulma-pricingtable
  width: 1301
  height: 428
- name: bulma-megamenu
  url: https://github.com/hunzaboy/bulma-megamenu
  slug: bulma-megamenu
  width: 668
  height: 182
- name: bulma-coolcheckboxes
  url: https://github.com/hunzaboy/Cool-Checkboxes-for-Bulma.io
  slug: bulma-coolcheckbox
  width: 450
  height: 184
- name: bulma-slider
  url: https://wikiki.github.io/form/slider
  slug: bulma-slider
  width: 647
  height: 166
- name: bulma.io-axure
  url: https://github.com/AGmakonts/Bulma.io-axure
  slug: bulma.io-axure
  width: 888
  height: 541
- name: bulma-checkradio
  url: https://wikiki.github.io/form/checkradio
  slug: bulma-checkradio
  width: 247
  height: 193
- name: bulma-switch
  url: https://wikiki.github.io/form/switch
  slug: bulma-switch
  width: 193
  height: 193
- name: bulma-steps (alternative)
  url: https://aramvisser.github.io/bulma-steps/
  slug: bulma-steps-alternative
  width: 1078
  height: 280
- name: bulma-divider
  url: https://wikiki.github.io/layout/divider
  slug: bulma-divider
  width: 651
  height: 54
- name: bulma-calendar
  url: https://wikiki.github.io/components/calendar
  slug: bulma-calendar
  width: 338
  height: 352
- name: bulma-pageloader
  url: https://wikiki.github.io/elements/pageloader
  slug: bulma-pageloader
  width: 245
  height: 139
- name: bulma-ribbon
  url: https://github.com/Wikiki/bulma-ribbon
  slug: bulma-ribbon
  width: 323
  height: 87
- name: bulma-badge
  url: https://wikiki.github.io/elements/badge
  slug: bulma-badge
  width: 623
  height: 211
- name: bulma-steps
  url: https://wikiki.github.io/components/steps
  slug: bulma-steps
  width: 1294
  height: 147
- name: bulma-tooltip
  url: https://wikiki.github.io/elements/tooltip
  slug: bulma-tooltip
  width: 215
  height: 55
- name: bulma-timeline
  url: https://wikiki.github.io/components/timeline
  slug: bulma-timeline
  width: 634
  height: 469
- name: bulma-toast
  url: https://rfoel.github.io/bulma-toast/
  slug: bulma-toast
  width: 208
  height: 173
- name: bulma-dashboard
  url: https://github.com/lucperkins/bulma-dashboard
  slug: bulma-dashboard
- name: bulma-block-list
  url: https://github.com/chrisrhymes/bulma-block-list
  slug: bulma-block-list
- name: bulma-spacing
  url: https://github.com/kaangokdemir/bulma-spacing
  slug: bulma-spacing
- name: bulma-list
  url: https://bluefantail.github.io/bulma-list
  slug: bulma-list
  width: 1186
  height: 480
---

{% include global/navbar.html id="Extensions" %}

{%
  include components/hero.html
  color="extensions"
  icon="fas fa-plug"
  title="Bulma **extensions**"
  subtitle="Side projects to **enhance** your Bulma **experience**"
%}

{% capture call_button %}
<a class="button bd-fat-button is-extensions is-medium"
  href="https://github.com/jgthms/bulma/pulls"
  target="_blank">
  <span class="icon">
    <i class="fas fa-code-branch"></i>
  </span>
  <span>
    Submit a Pull Request
  </span>
</a>
{% endcapture %}

{%
  include components/call.html
  color="extensions"
  text='Have an <strong>extension</strong> to <strong>share</strong> with the community?'
  button=call_button
%}

<div class="bd-posts">
  {% for extension in page.extensions %}
    <div class="bd-post bd-is-extension">
      <a class="bd-post-link" href="{{ extension.url }}" target="_blank" rel="nofollow">
        <div class="bd-post-body">
          <div class="bd-post-content">
            <h2 class="title">
              {{ extension.name }}
            </h2>
            <div class="subtitle">
              {{ extension.url | remove:'http://' | remove:'https://' | remove:'www.' }}
            </div>
          </div>
        </div>

        <figure class="bd-post-screenshot">
          <img src="{{site.url}}/images/extensions/{{ extension.slug }}.png" width="{{ extension.width }}" height="{{ extension.height }}">
        </figure>
      </a>
    </div>
  {% endfor %}
</div>