I’m sick of forgetting how to do the simplest things using bootstrap so here’s a bit of a cheat sheet for reference.

Align items in a “col” vertically center (applied to an individual col):-

<div class="row">
 <div class="col d-flex align-items-center justify-content-center">
    <p>Vertically centered content</p>
  </div>
</div>

• d-flex = makes the column a flex container.
• align-items-center = vertically centers items.
• justify-content-center = horizontally centers items (optional).

Align items vertically center in all columns across the whole “row”

<div class="row align-items-center">
  <div class="col">
    <div>Column 1</div>
  </div>
  <div class="col">
    <div>Column 2</div>
  </div>
  <div class="col">
    <div>Column 3</div>
  </div>
</div>

• .row in Bootstrap is already a flex container.
• Adding align-items-center to the row applies align-items: center; to all its children (the columns).
• This vertically centers everything inside each column relative to the row’s height.
• Make sure the row has a defined height (e.g., via CSS or its parent container), otherwise vertical centering won’t be visible.

Switch the order of columns based on screen size

<div class="row">
  <div class="col order-2 order-md-1">Column 1</div>
  <div class="col order-1 order-md-2">Column 2</div>
  <div class="col order-3">Column 3</div>
</div>

• On extra small screens (default), Column 1 will appear second, Column 2 will appear first.
• On medium screens and up, Column 1 will appear first, Column 2 will appear second.
• Column 3 stays third.