[FIXED] How to make Bootstrap columns take the height of main?

Issue

I want to center vertically the divs inside the container but the columns take the height of the document and not of main (whom height equals the one of its content) Hereby my code:

<main class="col-lg-12">

 <div class="col-lg-1 col-md-0"></div>
 <div class="col-lg-4 col-md-6 col-xs-12">
  <img src={{image}}>
 </div>

<div class="col-lg-1 col-md-0" ></div>

<div class="col-lg-4 col-md-6 col-xs-12">
 <div class="title">{{title}}</div>
 <div  class="text">{{text1}}</div>  
</div>

<div class="col-lg-1 col-md-0"></div>

</main>

main div{
 height: 100%;
}

I can see in Developer Tools that the div takes 100% of the doc not of main... How could I fix this in order to vertically align the image?

Thank you!

Solution

first bootstrap .col should be in .row container you might need one in your main col to nest columns inside

then, don’t write css to set height:100% on columns, you dont need that.

If I’m right .col have display: flex, so you can use align-items-stretch class to make you column taking the height of their wrapper, being the missing .row

I suppose you will need a height:100% on the row. to do that add it a class h-100

Answered By - Faz

Answer Checked By - Robin (PHPFixing Admin)