title: How to make Bootstrap columns take the height of main?
body: <p>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:</p>
  
  <pre><code>&lt;main class="col-lg-12"&gt;
  
   &lt;div class="col-lg-1 col-md-0"&gt;&lt;/div&gt;
   &lt;div class="col-lg-4 col-md-6 col-xs-12"&gt;
    &lt;img src={{image}}&gt;
   &lt;/div&gt;
  
  &lt;div class="col-lg-1 col-md-0" &gt;&lt;/div&gt;
  
  &lt;div class="col-lg-4 col-md-6 col-xs-12"&gt;
   &lt;div class="title"&gt;{{title}}&lt;/div&gt;
   &lt;div  class="text"&gt;{{text1}}&lt;/div&gt;  
  &lt;/div&gt;
  
  &lt;div class="col-lg-1 col-md-0"&gt;&lt;/div&gt;
  
  &lt;/main&gt;
  
  main div{
   height: 100%;
  }
  </code></pre>
  
  <p>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?</p>
  
  <p>Thank you!</p>