title: Vertical align DIV & Text in Bootstrap 4
body: <p>I have gone through many questions here as well as many articles and bootstrap 4 documentation but failed to find what I'm looking for.</p>
  
  <p><strong>DEMO: <a href="https://jsfiddle.net/zxLLqsm0/" rel="noreferrer">https://jsfiddle.net/zxLLqsm0/</a></strong></p>
  
  <p>I'm looking to create boxes with exact same height for all columns and also vertically center align the text inside the boxes. I managed to get the text vertically aligned but the heights of the boxes are different.</p>
  
  <p>Here's my HTML</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="row align-items-center"&gt;
      &lt;div class="col-4"&gt;
        &lt;div class="box"&gt;
          &lt;h6&gt;Title 1&lt;/h6&gt;
          &lt;p&gt;A small description&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-4"&gt;
        &lt;div class="box"&gt;
          &lt;h6&gt;Title 2&lt;/h6&gt;
          &lt;p&gt;A bigger description goes here&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-4"&gt;
        &lt;div class="box"&gt;
          &lt;h6&gt;Title 3&lt;/h6&gt;
          &lt;p&gt;A large description is placed here to make whatever changes we need.&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And my CSS:</p>
  
  <pre><code>.container {
    margin-top: 15px;
  }
  .box {
    background-color: grey;
    padding: 15px;
  }
  </code></pre>