bulma/docs/documentation/overview/modular.html

---
title: Modularity
layout: documentation
doc-tab: overview
doc-subtab: modular
---

{% include subnav/subnav-overview.html %}

<section class="section">
  <div class="container">
    <h1 class="title">Modular</h1>
    <h2 class="subtitle">Just import what you <strong>need</strong></h2>

    <hr>

    <div class="content">
      <p>
        Bulma consists of <strong>39</strong> <code>.sass</code> files that you can import <strong>individually.</strong>
      </p>
      <p>
        For example, let's say you only want the Bulma <strong>columns.</strong>
        <br>
        The file is located in the <code>bulma/sass/grid</code> folder.
        <br>
        Simply <strong>import</strong> the utilities dependencies, and then the files you need directly:
      </p>
{% highlight sass %}
@import "bulma/sass/utilities/_all"
@import "bulma/sass/grid/columns"
{% endhighlight %}
      <p>
        Now you can use the classes <code>.columns</code> (for the container) and <code>.column</code> directly:
      </p>
{% highlight html %}
<div class="columns">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="column">4</div>
  <div class="column">5</div>
</div>
{% endhighlight %}

      <hr>

      <p>
        What if you only want the <strong>button</strong> styles instead?
      </p>
{% highlight sass %}
@import "bulma/sass/utilities/_all"
@import "bulma/sass/elements/button.sass"
{% endhighlight %}
      <p>
        You can now use the <code>.button</code> class, and all its modifiers:
      </p>
      <ul>
        <li>
          <code>.is-active</code>
        </li>
        <li>
          <code>.is-primary</code>,
          <code>.is-info</code>,
          <code>.is-success</code>...
        </li>
        <li>
          <code>.is-small</code>,
          <code>.is-medium</code>,
          <code>.is-large</code>
        </li>
        <li>
          <code>.is-outlined</code>,
          <code>.is-inverted</code>,
          <code>.is-link</code>
        </li>
        <li>
          <code>.is-loading</code>,
          <code>[disabled]</code>
        </li>
      </ul>
{% highlight html %}
<a class="button">
  Button
</a>

<a class="button is-primary">
  Primary button
</a>

<a class="button is-large">
  Large button
</a>

<a class="button is-loading">
  Loading button
</a>
{% endhighlight %}
    </div>
  </div>
</section>