Columns

Responsive layout primitives mapped to Bulma columns

Use columns and column tags to build responsive two-column and multi-column layouts.

<columns>
  <column half>
    <div class="box">Main</div>
  </column>
  <column>
    <div class="box">Sidebar</div>
  </column>
</columns>

Common Patterns

  • Fractional widths: half, one-third, two-thirds
  • Numeric widths: 6, offset-3
  • Responsive suffixes: half-mobile, one-third-desktop
  • Container-level variants: multiline, gapless

Maintained by aldi

The source code is licensed under MIT.

Available on GitHub and npm.