Getting Started

## Columns

Learn how to modify columns with a handful of options for alignment, ordering, and offsetting thanks to our flexbox grid system. Read the Official Bootstrap Documentation for a full list of instructions and other options.

##### Vertical Alignment

Use flexbox alignment utilities to vertically and horizontally align columns.

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

##### Horizontal Alignment

Use flexbox alignment utilities to vertically and horizontally align columns.

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

##### Column Breaks

Breaking columns to a new line in flexbox requires a small hack: add an element with width: 100% wherever you want to wrap your columns to a new line.

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

##### Reordering

Use .order- classes for controlling the visual order of your content. These classes are responsive, so you can set the order by breakpoint.

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

##### Offsetting Columns

You can offset grid columns in two ways: our responsive .offset- grid classes and our margin utilities. Grid classes are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable.

1 of 2 Column
2 of 2 Column

##### Margin Utilities

With the move to flexbox in v4, you can use margin utilities like .me-auto to force sibling columns away from one another.

1 of 2 Column
2 of 2 Column

##### Standalone Column

The .col-* classes can also be used outside a .row to give an element a specific width. Whenever column classes are used as non direct children of a row, the paddings are omitted.

1 of 2 Column
2 of 2 Column