How to vertically align text in a row using Bootstrap 5

Question

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>

Answer 1

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>

Answer 2

In order to vertically center the contents of the .col-6 and not the .col-6 within the .row , use .col-6.d-flex.flex-column.justify-content-center . This makes the .col-6 a flex box container. You will notice in the example below that the height of the columns are the same as in your example, if this was not your intent then dippas' solution is perfectly fine.

 <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" style="min-height: 500px;"> <div class="col-6 bg-danger d-flex flex-column justify-content-center"> LEFT/MIDDLE TEXT </div> <div class="col-6 bg-primary d-flex flex-column justify-content-center"> RIGHT/MIDDLE TEXT </div> </div> </div>