How to vertically align text in a row using Bootstrap 5

July 19, 2022

I am trying to vertically align text in the middle of a row.

Below is what I have done. The vertical alignment is not working. How can I align the text vertically in the middle of the row?

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>


<div class="container-fluid">

  <div class="row align-middle" style="min-height: 500px;">
    <div class="col-6 bg-danger align-middle">
      LEFT/MIDDLE TEXT
    </div>

    <div class="col-6 bg-primary align-middle">
      RIGHT/MIDDLE TEXT
    </div>
  </div>

</div>

>Solution :

Use align-items-center because row is already display: flex

From the docs,

Please note that vertical-align only affects inline, inline-block, inline-table, and table cell elements.

…

To vertically center non-inline content (like <div>s and more), use our flex box utilities.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>


<div class="container-fluid">

  <div class="row align-items-center vh-100">
    <div class="col-6 bg-danger">
      LEFT/MIDDLE TEXT
    </div>

    <div class="col-6 bg-primary">
      RIGHT/MIDDLE TEXT
    </div>
  </div>

</div>