Columns powered by Flexbox

The b.Columns constructor creates a columns container.

Modifier	Action
`b.Gapless`	No gap
`b.ColumnGap(0)`	No gap
`b.ColumnGap(1)`	0.25rem gap
`b.ColumnGap(2)`	0.5rem gap
`b.ColumnGap(3)`	0.75rem gap
`b.ColumnGap(4)`	1rem gap
`b.ColumnGap(5)`	1.25rem gap
`b.ColumnGap(6)`	1.5rem gap
`b.ColumnGap(7)`	1.75rem gap
`b.ColumnGap(8)`	2rem gap
`b.Centered`	Center columns
`b.Desktop`	Allow columns only on desktops upward (not on tablets)
`b.Mobile`	Allow columns on mobile phones too
`b.Multiline`	Create a new line when columns do not fit in a single line
`b.VCentered`	Center columns vertically

The gap may be breakpoint-based, with b.ColumnGap*.Mobile() to b.ColumnGap*.FullHD().

Child	Action
`b.Column(...any)`	Add column to the `<div class="columns">` element
`e.Element`	Wrap element in a column and add it to the `<div class="columns">` element
`string`	Wrap text in a column and add it to the `<div class="columns">` element
`gomponents.Node`of type `gomponents.AttributeType`	Apply attribute to the `<div class="columns">` element
`gomponents.Node`of type `gomponents.ElementType`	Wrap element in a column and add it to the `<div class="columns">` element
Anything else	Apply child to the `<div class="columns">` element

The b.Column constructor creates a single column.

Modifier	Action
`b.Full`, `b.Size(12)`	Set width to 100% ( $\frac{12}{12}$ )
`b.Size(11)`	Set width to 91.66% ( $\frac{11}{12}$ )
`b.Size(10)`	Set width to 83.33% ( $\frac{10}{12}$ )
`b.FourFifths`	Set width to 80% ( $\frac{4}{5}$ )
`b.ThreeQuarters`, `b.Size(9)`	Set width to 75% ( $\frac{3}{4}$ , $\frac{9}{12}$ )
`b.TwoThirds`, `b.Size(8)`	Set width to 66.66% ( $\frac{2}{3}$ , $\frac{8}{12}$ )
`b.ThreeFifths`	Set width to 60% ( $\frac{3}{5}$ )
`b.Size(7)`	Set width to 58.33% ( $\frac{7}{12}$ )
`b.Half`, `b.Size(6)`	Set width to 50% ( $\frac{1}{2}$ , $\frac{6}{12}$ )
`b.Size(5)`	Set width to 41.66% ( $\frac{5}{12}$ )
`b.TwoFifths`	Set width to 40% ( $\frac{2}{5}$ )
`b.OneThird`, `b.Size(4)`	Set width to 33.33% ( $\frac{1}{3}$ , $\frac{4}{12}$ )
`b.OneQuarter`, `b.Size(3)`	Set width to 25% ( $\frac{1}{4}$ , $\frac{3}{12}$ )
`b.OneFifth`	Set width to 20% ( $\frac{1}{5}$ )
`b.Size(2)`	Set width to 16.66% ( $\frac{2}{12}$ )
`b.Size(1)`	Set width to 8.33% ( $\frac{1}{12}$ )
`b.Offset(11)`	Set offset to 91.66% ( $\frac{11}{12}$ )
`b.Offset(10)`	Set offset to 83.33% ( $\frac{10}{12}$ )
`b.OffsetFourFifths`	Set offset to 80% ( $\frac{4}{5}$ )
`b.OffsetThreeQuarters`, `b.Offset(9)`	Set offset to 75% ( $\frac{3}{4}$ , $\frac{9}{12}$ )
`b.OffsetTwoThirds`, `b.Offset(8)`	Set offset to 66.66% ( $\frac{2}{3}$ , $\frac{8}{12}$ )
`b.OffsetThreeFifths`	Set offset to 60% ( $\frac{3}{5}$ )
`b.Offset(7)`	Set offset to 58.33% ( $\frac{7}{12}$ )
`b.OffsetHalf`, `b.Offset(6)`	Set offset to 50% ( $\frac{1}{2}$ , $\frac{6}{12}$ )
`b.Offset(5)`	Set offset to 41.66% ( $\frac{5}{12}$ )
`b.OffsetTwoFifths`	Set offset to 40% ( $\frac{2}{5}$ )
`b.OffsetOneThird`, `b.Offset(4)`	Set offset to 33.33% ( $\frac{1}{3}$ , $\frac{4}{12}$ )
`b.OffsetOneQuarter`, `b.Offset(3)`	Set offset to 25% ( $\frac{1}{4}$ , $\frac{3}{12}$ )
`b.OffsetOneFifth`	Set offset to 20% ( $\frac{1}{5}$ )
`b.Offset(2)`	Set offset to 16.66% ( $\frac{2}{12}$ )
`b.Offset(1)`	Set offset to 8.33% ( $\frac{1}{12}$ )
`b.Narrow`	The column takes only the width it needs

The width, offset and narrow behaviour may be breakpoint-based, by calling .Mobile() to .FullHD() on the modifier(s).

Bulma example: Basics

Bulma examples: Sizes

12 columns system

Offset

Narrow column

Bulma examples: Responsiveness

Mobile columns

Different column sizes per breakpoint

Bulma examples: Nesting

Bulma examples: Gap

Gapless

Variable gap

Breakpoint based column gaps

Bulma examples: Options

Vertical alignment

Multiline

Centering columns