Fork me on GitHub

Ralma - Ractive Components for Bulma

This Ractive plugin provides helper shortcuts for most Bulma widgets.

Columns gap

Customize the gap between the columns


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 gapless modifier on the columns component:

First column

Second column

Third column

Fourth column

<columns gapless>
  <column>No gap</column>
  <column>First column</column>
  <column>Second column</column>
  <column>Third column</column>
  <column>Fourth column</column>
</columns>

You can combine it with the multiline modifier:

one-quarter

one-quarter

one-quarter

one-quarter

half

one-quarter

one-quarter

one-quarter

Auto

<columns gapless multiline mobile>

  <column one-quarter>is-one-quarter</column>
  <column one-quarter>is-one-quarter</column>
  <column one-quarter>is-one-quarter</column>
  <column one-quarter>is-one-quarter</column>

  <column half>is-one-quarter</column>  
  <column one-quarter>is-one-quarter</column>  
  <column one-quarter>is-one-quarter</column>  
  <column one-quarter>is-one-quarter</column>

  <column>Auto</column>

</columns>