-
Building a columns layout with Bulma is very simple:
-
- - Add a
columns container
- - Add as many
column elements as you want
-
-
Each column will have an equal width, no matter the number of columns.
+
+ Each column has a gap equal to the variable $column-gap, which has a default value of 0.75rem.
+
+ Since the gap is on each side of a column, the gap between two adjacent columns will be twice the value of $column-gap, or 1.5rem by default.
+
+
+
+ {{ columns_default_gap }}
+
+ {% include anchor.html name="Gapless" %}
+
+
+
+ If you want to remove the space between the columns, add the is-gapless modifier on the columns container:
+
+
+
You can combine it with the is-multiline modifier:
+
+ {% highlight html %}{{ columns_gapless_multiline }}{% endhighlight %}
+
+
+ You can specify a custom column gap by appending one of 9 modifiers on the .columns container.
+
+
+ -
+
is-0 will remove any gap (similar to is-gapless)
+
+ -
+
is-3 is the default value, equivalent to the 0.75rem value
+
+ -
+
is-8 is the maximum gap of 2rem
+
+
+