Bootstrap 3 Align Text To Bottom of Div

Question

I'm trying to get a setup in Bootstrap that would look something like this, where I have text aligned with the bottom of an image:

================================================ |                                              | |    ####################                      | |    ##THIS IS AN IMAGE##                      | |    ####################   ...And some text!  | |                                              | ================================================ 

So I tried this:

<div class="row">     <div class="col-sm-6">         <img src="~/Images/MyLogo.png" alt="Logo" />     </div>     <div class="col-sm-6">         <h3>Some Text</h3>     </div> </div> 

But I end up with something that looks more like this, where the text is top-aligned:

================================================ |                                              | |    ####################  ...And some text!   | |    ##THIS IS AN IMAGE##                      | |    ####################                      | |                                              | ================================================ 

I've tried a few positioning tricks to get it to work, but when I do that, it breaks the mobile-firstness of Bootstrap. When collapsed down to phone-size, I need it to snap to this:

========================== |                        | |  ####################  | |  ##THIS IS AN IMAGE##  | |  ####################  | |                        | |   ...And some text!    | |                        | ========================== 

So doing it as a table really isn't an option.

EDIT: Here's a fiddle, courtesy of Joseph Marikle in the comments :D http://jsfiddle.net/6WvUY/1/

Answer 1

I think your best bet would be to use a combination of absolute and relative positioning.

Here's a fiddle: http://jsfiddle.net/PKVza/2/

given your html:

<div class="row">     <div class="col-sm-6">         <img src="~/Images/MyLogo.png" alt="Logo" />     </div>     <div class="bottom-align-text col-sm-6">         <h3>Some Text</h3>     </div> </div> 

use the following CSS:

@media (min-width: 768px ) {   .row {       position: relative;   }    .bottom-align-text {     position: absolute;     bottom: 0;     right: 0;   } } 

EDIT - Fixed CSS and JSFiddle for mobile responsiveness and changed the ID to a class.