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:
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
This question is related to
css
twitter-bootstrap
twitter-bootstrap-3
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#
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;
}
When working with bootsrap usually face three main problems:
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
<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>
<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>
<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>
<div class="row row-centered">
<div class="col-sm-3">...</div>
<div class="col-sm-4">...</div>
</div>
<div class="row row-conformity row-centered">
...
</div>
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.
Source: Stackoverflow.com