title: Center content (text) of a bootstrap col vertically
body: <p>I've seen over 10 stackoverflow questions and their answers, none have worked so far.</p>
  
  <p>I have text inside a bootstrap col, but it just sits at the top of the col. I need it to be centered, preferably centered in relation to the image.</p>
  
  <p>I was using the media object, but it did not look good for smaller devices.</p>
  
  <p>This is what I have:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
       &lt;div class="col-md-5"&gt;
          ...img stuff..
       &lt;/div&gt;
  
       &lt;div class="col-md-7 left-padding-30" style="height: 500px; border : 1px solid red;"&gt;
          &lt;h2 class="featurette-heading"&gt;
             This First Heading
             &lt;span class="text-muted"&gt;Will Catch Your Eye&lt;/span&gt;
          &lt;/h2&gt;
          &lt;p class="lead"&gt;Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. &lt;/p&gt;
       &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Output:
  <img src="https://i.stack.imgur.com/BlIVC.png" alt="enter image description here"></p>
  
  <p>jsfiddle: <a href="http://jsfiddle.net/9btr6zon/" rel="nofollow noreferrer">http://jsfiddle.net/9btr6zon/</a></p>
  
  <p>I've set the height manually to 500px to try aligning the content. Is there any way I can remove it while still centering the content for bigger screens?</p>
  
  <p>Extra question, the image is using img-circle and img-resposive, yet it's not resizing for smaller screens, can I fix this?</p>
  
  <p>Edit:
   As a "placeholder" solution, I set the padding-top of the col to around 150px.</p>