Vertically aligning an image to the bottom inside a bootstrap “column”?

Question

I am trying to vertically align an img to the bottom of a containing Bootstrap column.

How can this be accomplished?<

Answer 1

This is probably not the solution you are looking for...but the only way that I could think of to do it was to absolutely position the column within the row. While this allows the column on the left to be a dynamic height, it loses the responsiveness...you'd probably have to define set widths for differing media.

A margin-top would allow the width to be responsive but would assume static height on the left, which is, I'm assuming, also not a good solution, since the fact that you put text in the left column implies you want a dynamic height.

Dare I say TABLE??? I know, I know, "horrible idea", right? But the <td>s stretch with the <td>s on the left in height, and the vertical-align:bottom; works within a TD. Bad practice, or a practical solution, you decide.

<div class="row" style='position:relative;'>
    <div class="col-sm-offset-4 col-sm-4">
        <h1>red container with lots of</h1>
         <h1>lorem ipsum</h1>
         <h1>lorem ipsum</h1>
         <h1>lorem ipsum</h1>
         <h1>lorem ipsum</h1>
         <h1>lorem ipsum</h1>
         <h1>lorem ipsum</h1>
    </div>
    <div class="col-sm-4" style='position:absolute;bottom:0;right:0;'>
        <img src="http://dummyimage.com/200x200/00a/fff.png?text=I+want+to+touch+the+blue+container"/>
    </div>
</div>