Columns

Share a row between related elements; stack in source order on mobile.

Basic structure

div.columns > div.column + div.column

Try it First column

First column

Second column

Third column

HTML

<div class="columns"><div class="column"><div class="card is-padded content">First column</div></div><div class="column"><div class="card is-padded content">Second column</div></div><div class="column"><div class="card is-padded content">Third column</div></div></div>

Options

Class or attribute	What it does
`is-reversed`	Reverse desktop order; preserve mobile source order.
`is-vcentered`	Vertically center the children.
`is-centered`	Center children with explicit fractional widths.
`is-multiline`	Allow wrapping.
`column.is-half / is-one-third / is-two-thirds`	Give a child a fraction; remaining children share the rest.
`column.is-two-fifths / is-three-fifths`	Additional deliberate fractions.
`column.is-distributed`	Separate content blocks along a stretched column.