Bootstrap 3: How do you align column content to bottom of row

Question

I have a row in Bootstrap 3 and 3 columns in that row. I want to align two of the columns to the bottom of the row and keep the first column at the top. When I use the traditional approach with position relative in the parent and absolute for both columns I get a weird behavior which I imagine is because of something in twitter bootstrap. Here's a bootply of what's happening:

http://www.bootply.com/125735

The absolute forces all the columns on top of eachother, can anyone help me out? The end result is to have something like so:

http://fahadalee.wordpress.com/2013/12/31/bootstrap-3-help-how-to-alin-div-in-bottom/

Thanks

Answer 1

You can use display: table-cell and vertical-align: bottom, on the 2 columns that you want to be aligned bottom, like so:

.bottom-column {     float: none;     display: table-cell;     vertical-align: bottom; } 

Working example here.

Also, this might be a possible duplicate question.