Fork me on GitHub

Ralma - Ractive Components for Bulma

This Ractive plugin provides helper shortcuts for most Bulma widgets.

Column sizes

Define the size of each column individually

If you want to change the size of a single column, you can use one of the following classes:

  • three-quarters
  • two-thirds
  • half
  • one-third
  • one-quarter

The other columns will fill up the remaining space automatically.

New! 0.6.1

You can now use the following multiples of 20% as well:

  • four-fifths
  • three-fifths
  • two-fifths
  • one-fifth

four-fifths

Auto

Auto

three-quarters

Auto

Auto

two-thirds

Auto

Auto

three-fifths

Auto

Auto

half

Auto

Auto

two-fifths

Auto

Auto

one-third

Auto

Auto

one-quarter

Auto

Auto

one-fifth

Auto

Auto

<columns>
  <column four-fifths>four-fifths</column>
  <column>Auto</column>
  <column>Auto</column>
</columns>

<columns>
  <column three-quarters>three-quarters</column>
  <column>Auto</column>
  <column>Auto</column>
</columns>

<columns>
  <column two-thirds>two-thirds</column>
  <column>Auto</column>
  <column>Auto</column>
</columns>

<columns>
  <column three-fifths>three-fifths</column>
  <column>Auto</column>
  <column>Auto</column>
</columns>

<columns>
  <column half>half</column>
  <column>Auto</column>
  <column>Auto</column>
</columns>

<columns>
  <column two-fifths>two-fifths</column>
  <column>Auto</column>
  <column>Auto</column>
</columns>

<columns>
  <column one-third>one-third</column>
  <column>Auto</column>
  <column>Auto</column>
</columns>

<columns>
  <column one-quarter>one-quarter</column>
  <column>Auto</column>
  <column>Auto</column>
</columns>

<columns>
  <column one-fifth>one-fifth</column>
  <column>Auto</column>
  <column>Auto</column>
</columns>

12 columns system #

As the grid can be divided into 12 columns, there are size classes for each division:

  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

Naming convention

Each modifier class is named after how many columns you want out of 12. So if you want 7 columns out of 12, use 7.

2

1

1

1

1

1

1

1

1

1

1

3

1

1

1

1

1

1

1

1

1

4

1

1

1

1

1

1

1

1

5

1

1

1

1

1

1

1

6

1

1

1

1

1

1

7

1

1

1

1

1

8

1

1

1

1

9

1

1

1

10

1

1

11

1

Offset #

While you can use empty columns (like <column></column>) to create horizontal space around column components, you can also use offset modifiers like .offset-x:

half
offset-one-quarter

three-fifths
offset-one-fifth

4
offset-8

11
offset-1 

<columns mobile>
  <column half offset-one-quarter></column>
</columns>

<columns mobile>
  <column three-fifths offset-one-fifth></column>
</columns>

<columns mobile>
  <column 4 offset-8></column>
</columns>

<columns mobile>
  <column 11 offset-1></column>
</columns>

Narrow column #

If you want a column to only take the space it needs, use the is-narrow modifier. The other column(s) will fill up the remaining space.

Narrow column

This column is only 200px wide.

Flexible column

This column will take up the remaining space available.

<columns>

  <column narrow>
    <div class="box" style="width: 200px;">
      <p class="title is-5">Narrow column</p>
      <p class="subtitle">This column is only 200px wide.</p>
    </div>
  </column>

  <column>
    <div class="box">
      <p class="title is-5">Flexible column</p>
      <p class="subtitle">This column will take up the remaining space available.</p>
    </div>
  </column>

</columns>

As for the size modifiers, you can have narrow columns for different breakpoints:

  • narrow-mobile
  • narrow-tablet
  • narrow-touch
  • narrow-desktop
  • narrow-widescreen
  • narrow-fullhd

Designed with by Aldi Duzha