---
title: Extensions
layout: default
route: extensions
extensions:
- name: bulma-switch
  url: https://github.com/Wikiki/bulma-switch
  slug: bulma-switch
  width: 1113
  height: 178
- name: bulma-divider
  url: https://github.com/Wikiki/bulma-divider
  slug: bulma-divider
  width: 1112
  height: 676
- name: bulma-calendar
  url: https://github.com/Wikiki/bulma-calendar
  slug: bulma-calendar
  width: 382
  height: 338
- name: bulma-pageloader
  url: https://github.com/Wikiki/bulma-pageloader
  slug: bulma-pageloader
  width: 490
  height: 278
- name: bulma-ribbon
  url: https://github.com/Wikiki/bulma-ribbon
  slug: bulma-ribbon
  width: 646
  height: 174
- name: bulma-badge
  url: https://github.com/Wikiki/bulma-badge
  slug: bulma-badge
  width: 406
  height: 162
- name: bulma-steps
  url: https://github.com/Wikiki/bulma-steps
  slug: bulma-steps
  width: 989
  height: 89
- name: bulma-steps (alternative)
  url: https://aramvisser.github.io/bulma-steps/
  slug: bulma-steps-alternative
  width: 1078
  height: 280
- name: bulma-tooltip
  url: https://github.com/Wikiki/bulma-tooltip
  slug: bulma-tooltip
  width: 215
  height: 55
- name: bulma-timeline
  url: https://github.com/Wikiki/bulma-timeline
  slug: bulma-timeline
  width: 401
  height: 352
---

<div class="container">
  {% include navbar.html id="Extensions" %}
</div>

<section class="hero is-info">
  <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>