UI Designs
Mockups
gap
Default gap
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.
Default gap
Default gap
Default gap
Default gap
Gapless
If you want to remove the
space between the columns, add the is-gapless modifier on the columns container:
First column
Second column
Third column
Fourth column
<div class="columns is-gapless">
<div class="column">
No gap
</div>
<div class="column">
No gap
</div>
<div class="column">
No gap
</div>
<div class="column">
No gap
</div>
</div>
