title: How to center text vertically in a Bootstrap row
body: <p>The desired display is to have the text in the left column vertically centered (middle). I have not been able to achieve that. This is because the picture in the right column is taller than the 2 paragraphs of text. Interestingly, the orange div is only as high as the paragraphs.</p>
  
  <p>The inline styles are only there for debug.
  The design being used is responsive so I'm assuming setting a height in px will make it non-responsive.</p>
  
  <p><strong>Edit: The inline debug styles were misleading so have been removed</strong></p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div class="col-md-8"&gt;
      &lt;div class="vertical-align-center"&gt;
        &lt;p&gt;First small paragraph with other elements in it&lt;/p&gt;
        &lt;p&gt;Second small paragraph with other elements in it&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="col-md-4"&gt;
      &lt;img class="img-responsive img-md-size" src="blog.localhost/klequis/wp-content/uploads/2016/0521/DevBoxRunning.png"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>