title: Vertically aligning an image to the bottom inside a bootstrap “column”?
body: <p>I am trying to vertically align an <code>img</code> to the <strong><em>bottom</em></strong> of a containing Bootstrap <em>column</em>.</p>
  
  <p>How can this be accomplished?</p>
  
  <hr>
  
  <h1>Example</h1>
  
  <pre><code>&lt;div class="container-fluid" style="background-color: #00ff00"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-sm-offset-4 col-sm-4"&gt;
               &lt;h1&gt;green container&lt;/h1&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="container-fluid" style="background-color: #ff0000"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-sm-offset-4 col-sm-4"&gt;
              &lt;h1&gt;red container with lots of&lt;/h1&gt;
               &lt;h1&gt;lorem ipsum&lt;/h1&gt;
               &lt;h1&gt;lorem ipsum&lt;/h1&gt;
               &lt;h1&gt;lorem ipsum&lt;/h1&gt;
               &lt;h1&gt;lorem ipsum&lt;/h1&gt;
               &lt;h1&gt;lorem ipsum&lt;/h1&gt;
               &lt;h1&gt;lorem ipsum&lt;/h1&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-4"&gt;
              &lt;img src="http://dummyimage.com/200x200/00a/fff.png?text=I+want+to+touch+the+blue+container"/&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="container-fluid" style="background-color: #0000ff"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-sm-offset-4 col-sm-4"&gt;
               &lt;h1&gt;blue container&lt;/h1&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/Abdull/KAccL/" rel="nofollow"><strong><em>JSFiddle</em></strong></a></p>
  
  <p>In above example, there are three containers. Each container has a distinctive color. I want the blueish image to touch the bottom blue container, not the top green container.</p>
  
  <hr>
  
  <p>Bonus points if answer is able to abstract away from hard-programmed image sizes.</p>