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.




