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

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.

Answer 2

Vertical align bottom and remove the float seems to work. I then had a margin issue, but the -2px keeps them from getting pushed down (and they still don't overlap)
.profile-header > div {
display: inline-block;
vertical-align: bottom;
float: none;
margin: -2px;
}
.profile-header {
margin-bottom:20px;
border:2px solid green;
display: table-cell;
}
.profile-pic {
height:300px;
border:2px solid red;
}
.profile-about {
border:2px solid blue;
}
.profile-about2 {
border:2px solid pink;
}
Example here: http://www.bootply.com/125740#

Answer 3

When working with bootsrap usually face three main problems:
How to place the content of the column to the bottom?
How to create a multi-row gallery of columns of equal height in one .row?
How to center columns horizontally if their total width is less than 12 and the remaining width is odd?
To solve first two problems download this small plugin https://github.com/codekipple/conformity
The third problem is solved here http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-centered-columns
Common code
<style>
[class*=col-] {position: relative}
.row-conformity .to-bottom {position:absolute; bottom:0; left:0; right:0}
.row-centered {text-align:center}
.row-centered [class*=col-] {display:inline-block; float:none; text-align:left; margin-right:-4px; vertical-align:top}
</style>
<script src="assets/conformity/conformity.js"></script>
<script>
$(document).ready(function () {
$('.row-conformity > [class*=col-]').conformity();
$(window).on('resize', function() {
$('.row-conformity > [class*=col-]').conformity();
});
});
</script>
1. Aligning content of the column to the bottom
<div class="row row-conformity">
<div class="col-sm-3">
I<br>create<br>highest<br>column
</div>
<div class="col-sm-3">
<div class="to-bottom">
I am on the bottom
</div>
</div>
</div>
2. Gallery of columns of equal height
<div class="row row-conformity">
<div class="col-sm-4">We all have equal height</div>
<div class="col-sm-4">...</div>
<div class="col-sm-4">...</div>
<div class="col-sm-4">...</div>
<div class="col-sm-4">...</div>
<div class="col-sm-4">...</div>
</div>
3. Horizontal alignment of columns to the center (less than 12 col units)
<div class="row row-centered">
<div class="col-sm-3">...</div>
<div class="col-sm-4">...</div>
</div>
All classes can work together
<div class="row row-conformity row-centered">
...
</div>

Answer 4

I don't know why but for me the solution proposed by Marius Stanescu is breaking the specificity of col (a col-md-3 followed by a col-md-4 will take all of the twelve row)
I found another working solution :
.bottom-column
{
display: inline-block;
vertical-align: middle;
float: none;
}