Responsive Equal-width Setting one column width Variable-width Offsetting columns Push and pull Responsive attributes Vertical Alignment Horizontal Alignment

Equal-width

The following grid has equal width columns.

1 of 2 2 of 2 1 of 3 2 of 3 3 of 3

Setting one column width

The following grid has a wider center column on each row.

1 of 3 2 of 3 (wider) 3 of 3 1 of 3 2 of 3 (wider) 3 of 3

Variable-width

The following grid has columns that take up the width of their content.

1 of 3 Variable width content 3 of 3 1 of 4 2 of 4 4 of 4

Offseting Columns

The following grid has columns that are offset on each row.

1 of 2 2 of 2 1 of 3 2 of 3 3 of 3

Push and pull

The following grid has columns that are reordered using push and pull.

1 of 2 2 of 2 1 of 3 2 of 3 3 of 3

Responsive attributes

The following grid adds custom widths for all screen sizes.

1 of 4 2 of 4 3 of 4 4 of 4

The following grid will take up 12 columns until the sm breakpoint (576px) at which point it will take equal width.

1 of 4 2 of 4 3 of 4 4 of 4

The following grid will take up 12 columns until the md breakpoint (768px) at which point it will take equal width.

1 of 4 2 of 4 3 of 4 4 of 4

The following grid will take up 12 columns until the lg breakpoint (992px) at which point it will change to take up 6 and 3 columns.

1 of 2 2 of 2

Vertical Alignment

The following grid has columns that align themselves vertically inside of the row based on the attribute.

1 of 4 2 of 4
#
3 of 4
#
#
4 of 4
#
#
#
1 of 4 2 of 4 3 of 4 4 of 4
#
#
#
1 of 4 2 of 4 3 of 4 4 of 4
#
#
#
1 of 4 2 of 4 3 of 4 4 of 4
#
#
#
1 of 4 2 of 4 3 of 4 4 of 4
#
#
#

Horizontal Alignment

The following grid has columns that align themselves horizontally inside of the row based on the attribute.

1 of 2 2 of 2 1 of 2 2 of 2 1 of 2 2 of 2 1 of 2 2 of 2 1 of 2 2 of 2

Miscellaneous Features

The following grid has no padding.

1 of 3 2 of 3 3 of 3

The following grid reverses the order of the columns when wrapping on small screens.

1 of 3 2 of 3 3 of 3

Columns Based on Screen Size

The following grid has columns that will change width based on the screen size.
If window size > 0 it will take up 12 columns / 100% width.
If window size > 768px it will take up 4 columns / 33% width.
If window size > 992px it the middle column will take up 6 columns / 50% width, other two will take up 3 columns / 25% width.

1 of 3 2 of 3 3 of 3