Search code examples
sassbulma

How to change gap between columns in bulma?

I would like to know how can i extend default gap between columns in bulma, according official website is-8 gap equals 2em but i need 6em,can i override $column-gap value in my css file ?

Solution

  • This is a Sass variable, you can override it but not in a .css file, your need to setup Sass with node-sass or with Sass CLI or with webpack, you can also learn more about customisation with sass variables here.
    All those links point to the official documentation and will help you with the setup. Then you will be able to overrride the value of the $column-gap and all other sass variables in a .scss file like this :

    @charset "utf-8";

// Update all the variables you want :
$column-gap: 6em;

// And then import bulma
@import "../path/to/bulma";

// Or import only what you need from Bulma
@import "../path/to/bulma/sass/utilities/_all.sass";
@import "../path/to/bulma/sass/base/_all.sass";
@import "../path/to/bulma/sass/elements/container.sass";
@import "../path/to/bulma/sass/elements/title.sass";
@import "../path/to/bulma/sass/form/_all.sass";
@import "../path/to/bulma/sass/components/navbar.sass";
@import "../path/to/bulma/sass/layout/section.sass";