Grid layout Column sizing Fullscreen Example

Multiple ways to set column widths using the predefined classes.

Equal width

By default, the columns will take up equal space inside a row.

1 of 2

2 of 2

1 of 4

2 of 4

3 of 4

4 of 4

Specific widths

Each row consists of 12 columns. You can divide that however you like.

col 8

col 4

col 3

col 6

col 3

Setting one column

You can also specify a single column width and let others adjust around it. See col-4 and col-5.

col 4

col

col 5

col

Dynamic width

Auto-width will let the column expand depending on the content.

auto width column

col

auto width column

col