bulma/docs/extensions.html

---
title: Extensions
layout: more
route: extensions
route: backers
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
---

{% for extension in page.extensions %}
  <a class="box" href="{{ extension.url }}">
    <div class="columns">
      <div class="column is-one-third">
        <h3 class="title is-4">
          <strong>{{ extension.name }}</strong>
        </h3>
        <h4 class="subtitle is-6">
          {{ extension.url | remove:'http://' | remove:'https://' | remove:'www.' }}
        </h4>
      </div>
      <div class="column">
        <img src="{{site.url}}/images/extensions/{{ extension.slug }}.png" width="{{ extension.width }}" height="{{ extension.height }}">
      </div>
    </div>
  </a>
{% endfor %}

<div class="message">
  <div class="message-body">
    <div class="level">
      <div class="level-left">
        <div class="level-item">
          <p>Have an extension to share with the community?</p>
        </div>
      </div>
      <div class="level-right">
        <div class="level-item">
          <a class="button is-primary" href="https://github.com/jgthms/bulma/pulls">
            Submit a Pull Request
          </a>
        </div>
      </div>
    </div>
  </div>
</div>