title: How to vertically center bootstrap column text?
body: <p>I want to display the text (and if the image is smaller, then the image) in the middle by vertically. But i can't accomplish it. Any help?</p>
  
  <p>Here is what i have right now: <a href="https://jsfiddle.net/7goLo3xy/1/" rel="nofollow noreferrer">Jsfiddle</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container overview-sm"&gt;   
      &lt;div class="row"&gt;
          &lt;div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"&gt;
              &lt;div class="box2"&gt;
                  &lt;img class="image" src="http://via.placeholder.com/450x450"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"&gt;
              &lt;div class="box2"&gt;
                  &lt;h1 class="content-title"&gt;Lorem impsum&lt;/h1&gt;
                  &lt;hr&gt;
                  &lt;p class="content-sub-title"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet purus ac turpis finibus auctor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec in dictum arcu, dapibus porta lorem. &lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.box2 {
      margin: 5px 5px 5px 0;
      text-align: center;
      display: inline-block;
      width: 100%;
  }
  .image{
      width: 100%;
      max-width: 450px;
  }
  .row{
    padding-bottom: 30px;
  }
  </code></pre>
  
  <p>Image of what i want it to be: <a href="https://i.stack.imgur.com/uE8G0.jpg" rel="nofollow noreferrer">Image</a></p>