Columns

Responsive column layout wrappers for flexible two-column and multi-column screens.

Bulma Pattern

This wrapper follows Bulma's Columns markup. Compare class behavior with the official Bulma docs.

Supported tags

<columns><column>

Example

<columns multiline>
  <column half>
    <div class="box">Main content</div>
  </column>
  <column half>
    <div class="box">Secondary content</div>
  </column>
</columns>

Usage Notes

  • Use fractions like `half`, `one-third`, and `two-thirds` on `<column>`.
  • Use numeric widths such as `6` and `offset-3` for grid precision.
  • Use responsive variants like `half-mobile` and `one-third-desktop`.
Back to Components

Maintained by aldi

The source code is licensed under MIT.

Available on GitHub and npm.