--- title: Modularity layout: documentation doc-tab: overview doc-subtab: modular --- {% include subnav-overview.html %}

Modular

Just import what you need


Bulma consists of 40 .sass files that you can import individually.

For example, let's say you only want the Bulma columns.
The file is located in the bulma/sass/grid folder.
Simply import the utilities dependencies, and then the files you need directly:

{% highlight sass %} @import "bulma/sass/utilities/_all" @import "bulma/sass/grid/columns" {% endhighlight %}

Now you can use the classes .columns (for the container) and .column directly:

{% highlight html %}
1
2
3
4
5
{% endhighlight %}

What if you only want the button styles instead?

{% highlight sass %} @import "bulma/sass/utilities/_all" @import "bulma/sass/elements/button.sass" {% endhighlight %}

You can now use the .button class, and all its modifiers:

  • .is-active
  • .is-primary, .is-info, .is-success...
  • .is-small, .is-medium, .is-large
  • .is-outlined, .is-inverted, .is-link
  • .is-loading, [disabled]
{% highlight html %} Button Primary button Large button Loading button {% endhighlight %}