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.
Detailed documentation and more examples you can find in our Bootstrap Columns Docs
Offset classes
Move columns to the right using .offset-md-*
classes. These classes increase
the left margin of a column by *
columns. For example,
.offset-md-4
moves .col-md-4
over four columns.
In addition to column clearing at responsive breakpoints, you may need to reset offsets. See this in action in the grid example.
Margin utilities
With the move to flexbox, you can use margin utilities like
.me-auto
to force sibling columns away from one another.