bulma/docs/extensions.html

---
title: Extensions
layout: default
route: extensions
extensions:
- 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-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/Code-Mine-Development/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://wikiki.github.io/elements/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
---

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

<section class="hero is-primary">
  <div class="hero-body">
    <div class="container">
      <div class="columns is-vcentered">
        <div class="column">
          <h1 class="title">
            <a href="{{ site.url }}/blog">Extensions</a>
          </h1>
          <p class="subtitle">
            Side projects to enhance Bulma
          </p>
        </div>
        <div class="column is-narrow">
          {% include carbon.html %}
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section">
  <div class="container">
    {% 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>
  </div>
</section>