Skip to content

How to Vertical Align a DIV in Bootstrap

In bootstrap 5 using align-items-center class is the easiest way to align any container. All you have to add align-items-center class to the parent container of the elements you wanted to align.

Center two columns in a row

If you want to center two columns in a row, add align-items-center class to the row. You can also try using align-items-start and align-items-end to align top and bottom.

<div class="container">
  <div class="row align-items-center">
    <div class="col" style="height:50px">
      1 of 2
    </div>
    <div class="col" style="height:100px">
      2 of 2
    </div>
  </div>
</div>

Center DIV without row

If you don’t want to use row then use the align-items-center class with d-flex. Without adding d-flex or row classes you won’t see any changes.

<div class="d-flex align-items-center">
  <div class="border p-2">
    1 of 2
  </div>
  <div class="border p-4">
    2 of 2
  </div>
</div>