Vertical Alignment

Align Content on Rows with .align-items-*
.row .align-items-[start, center, end]

Align Content on Columns with .align-self-*
.col .align-self-[start, center, end]

Horizontal Alignment

Align columns horizontally using .justify-content-*
.row .justify-content-[start, center, end, around, between, evenly]

Column Breaks

Breaking columns to a new line in flexbox requires a small hack:
Add <div class="w-100"></div> wherever you want to wrap your columns to a new line –similar to the way a <br> element would work.

Reordering

Order columns with numbers, first, and last.
No order applied (i.e. col class only) makes element appear first, regardless of any existing ordered elements.
.col .order-[1,2,3,4,5,...,etc]
.col
.col .order-[first, last]

Offsetting Columns

Offset Classes
Offsetting columns hasn’t changed:
Example: col-sm-5 offset-sm-2 col-md-6 offset-md-0

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.

.col-md-4 .ms-auto align away to the right
.col-auto .me-auto align away to the left

Standalone Column Classes

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.

The classes can be used together with utilities to create responsive floated images. Make sure to wrap the content in a .clearfix wrapper to clear the float if the text is shorter.

<div class="clearfix">
  <img src="..." class="col-md-6 float-md-end mb-3 ms-md-3" alt="...">
  <p>A very long paragraph of placeholder text.</p>
  <p>A very long paragraph of placeholder text.</p>
  <p>A very long paragraph of placeholder text.</p>
</div>