Grid System

Responsive

Responsive modifiers enable specifying different column sizes, offsets, alignment and distribution at xs, sm, md & lg viewport widths.

Offsets

Offset a column.

Auto Width

Add any number of auto sizing columns to a row. Let the grid figure it out.

xs
xs
xs
xs
xs

Alignment

Add classes to align elements to the start or end of row as well as the top, bottom, or center of a column

.start-

start="xs"

.center-

center="xs"

.end-

end="xs"

.top-

top="xs"
top="xs"

.middle-

middle="xs"
middle="xs"

.bottom-

bottom="xs"
bottom="xs"

Distribution

Add classes to distribute the contents of a row or column.

.around-

.between-

Hide

You can simply hide some elements for a given breakpoint by passing `false` to the breakpoint properties.

xs=false