title: Positioning trouble on label text
body: <p>So</p>
  
  <p>This is what I am trying to achieve:</p>
  
  <p><a href="https://i.stack.imgur.com/bnso9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bnso9.png" alt="enter image description here"></a></p>
  
  <p>This is what I have: <a href="http://codepen.io/KieranRigby/pen/QyWZxV" rel="nofollow noreferrer">http://codepen.io/KieranRigby/pen/QyWZxV</a>.  For the snippet bellow, please use "Full page" view.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>label {
   color: #6d6e70;
   bottom: 0;
  }
  .img-row img {
      width: 100%;
  }
  .img-row {
    text-align: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;div class="container img-row"&gt;
  
    &lt;div class="row"&gt;
      &lt;div class="col-md-2 col-xs-12 col-sm-12 col-md-offset-1"&gt;
        &lt;img id="img-1" class="img-responsive" src="http://i.imgur.com/ftaEZS9.png" /&gt;
        &lt;label for="img-1"&gt;Make your essay&lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="col-md-2"&gt;
        &lt;img id="img-2" class="img-responsive" src="http://i.imgur.com/7YUtBZk.png" /&gt;
        &lt;label for="img-2"&gt;Upload your essay&lt;/label&gt;
      &lt;/div&gt;
  
      &lt;div class="col-md-2"&gt;
        &lt;img id="img-3" class="img-responsive" src="http://i.imgur.com/Hy84vQC.png" /&gt;
        &lt;label for="img-3"&gt;Choose your pay&lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="col-md-2"&gt;
        &lt;img id="img-4" class="img-responsive" src="http://i.imgur.com/tSqCUuO.png" /&gt;
        &lt;label for="img-4"&gt;Mentors Check&lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="col-md-2"&gt;
        &lt;img id="img-5" class="img-responsive" src="http://i.imgur.com/VmwzHFD.png" /&gt;
        &lt;label for="img-5"&gt;Receive an email&lt;/label&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- /.row --&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How do I get the text labels to sit inline at the bottom? </p>