Columns

Basics

First column

Second column

Third column

Fourth column

Sizes

is-full, is-half, is-two-thirds, is-three-quarters, is-four-fifths

is-full

is-three-quarters

Auto

Auto

is-two-thirds

Auto

Auto

is-half

Auto

Auto

is-one-quarter

Auto

Auto

is-one-fifth

Auto

Auto

12 columns system(is-1, is-2 ... is-12)

is-2

1

1

1

1

1

1

1

1

1

1

is-6

1

1

1

1

1

1

is-12

Offset(.is-offset-x)

is-half
is-offset-one-quarter

is-three-fifths
is-offset-one-fifth

is-4
is-offset-8

is-11
is-offset-1

Narrow column

Narrow column

This column is only 200px wide.

Flexible column

This column will take up the remaining space available.

Responsiveness

Mobile columns

1

2

3

4

Desktop columns

1

2

3

4

Different column sizes per breakpoint

is-three-quarters-mobile
is-two-thirds-tablet
is-half-desktop
is-one-third-widescreen
is-one-quarter-fullhd

2

3

4

5

Nesting

First column

First nested column

Second nested column

Second column

50%

Auto

Auto

Gap

Default gap

Default gap

Default gap

Default gap

Default gap

Gapless (is-gapless)

First column

Second column

Third column

Fourth column

Variable gap [Experimental]

Three columns
Three columns
Three columns

Breakpoint based column gaps

Column

Column

Column

Column

Column

Column

Column options

Vertical alignment

First column

Second column with more content. This is so you can see the vertical alignment.

Multiline (is-multiline)

is-one-quarter

is-one-quarter

is-one-quarter

is-one-quarter

is-half

is-one-quarter

is-one-quarter

is-one-quarter

Auto

Centering columns

is-half