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.
Use flexbox alignment utilities to vertically and horizontally align columns.
Use flexbox alignment utilities to vertically and horizontally align columns.
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.
Use .order- classes for controlling the visual order of your content. These classes are responsive, so you can set the order by breakpoint.
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.
With the move to flexbox in v4, you can use margin utilities like .me-auto to force sibling columns away from one another.
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.
