Ralma - Ractive Components for Bulma
This Ractive plugin provides helper shortcuts for most Bulma widgets.
Mobile columns
#
By default, columns are only activated from tablet onwards. This means
columns are stacked on top of each other on mobile .
If you want columns to work on mobile too , just add the
is-mobile
modifier on the columns
container:
<columns mobile >
<column > 1</column>
<column > 2</column>
<column > 3</column>
<column > 4</column>
</columns>
Copy
If you want to see the difference, resize your browser and see when the columns
are stacked and when they are horizontally distributed.
If you only want columns on desktop upwards, just use the
is-desktop
modifier on the columns
container:
<columns desktop >
<column > 1</column>
<column > 2</column>
<column > 3</column>
<column > 4</column>
</columns>
Copy
Different column sizes per breakpoint
#
You can define a column size for each viewport size: mobile,
tablet, and desktop.
is-half-mobile
is-one-third-tablet
is-one-quarter-desktop
If you want to see these classes in action, resize your browser window and see how the
same column varies in width at each breakpoint.
<columns mobile >
<column three-quarters-mobile two-thirds-tablet half-desktop one-third-widescreen one-quarter-fullhd >
<code> is-three-quarters-mobile</code><br>
<code> is-two-thirds-tablet</code><br>
<code> is-half-desktop</code>
<code> is-one-third-widescreen</code>
<code> is-one-quarter-fullhd</code>
</column>
<column > 1</column>
<column > 1</column>
</columns>
Copy