same height Bootstrap columns with vertical align - css

Question

I am using Bootstrap 3, I need to have same height of the columns with vertical align able in the content of the columns
<div class="row">
<div class="col-xs-12 col-sm-3">
vertical align top
</div>
<div class="col-xs-12 col-sm-3">
vertical align middle
</div>
<div class="col-xs-6 col-sm-3">
<img src="http://mspmentor.net/site-files/mspmentor.net/files/archive/mspmentor.net/wp-content/uploads/2009/10/free_managed_services.jpg" />
</div>
<div class="col-xs-6 col-sm-3">
vertical align bottom
</div>
</div>
Please check here https://jsfiddle.net/4d2m74nc/4/

Answer 1

This is achievable but will take away from some of bootstrap's built in functionality. Mainly, the media queries for mobile rendering of the grid system.
The best way to achieve this is probably with the flexbox approach. Demo.
<div class="row row-eq-height">
<div class="col-sm-3">
vertical align top
</div>
<div class="col-sm-3 vcenter">
vertical align middle
</div>
<div class="col-sm-3">
<img src="http://mspmentor.net/site-files/mspmentor.net/files/archive/mspmentor.net/wp-content/uploads/2009/10/free_managed_services.jpg" />
</div>
<div class="col-sm-3 vbottom">
vertical align bottom
</div>
</div>
CSS
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.vcenter{
display:flex;
flex-direction:column;
justify-content:center;
}
.vbottom{
display:flex;
flex-direction:column;
justify-content:flex-end;
}
Second way is to use absolute positioning for the vertical alignment and flexbox for matching heights.
Check out the demo.
<div class="row row-eq-height">
<div class="col-sm-3">
vertical align top
</div>
<div class="col-sm-3">
<div class="vcenter">
vertical align middle
</div>
</div>
<div class="col-sm-3">
<img src="http://mspmentor.net/site-files/mspmentor.net/files/archive/mspmentor.net/wp-content/uploads/2009/10/free_managed_services.jpg" />
</div>
<div class="col-sm-3">
vertical align bottom
</div>
</div>
CSS
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.vcenter {
position: absolute;
top: 50%;
}
Another option would be to use JavaScript to fix the heights and vertical align for you. You could use matchHeight.js.
It's fairly simple to use. You just wrap all of your column content that you want to match in height with another <div> with the class .box
<div class="row">
<div class="col-md-4">
<div class="box">
Content
</div>
</div>
<div class="col-md-4">
<div class="box">
Content
</div>
</div>
<div class="col-md-4">
<div class="box">
Content
</div>
</div>
</div>
and then instantiate it on document load in your JavaScript file or <script></script> tags after your JQuery link.
$('.box').matchHeight();
Sticking with JavaScript for the vertical align you could add .vcenter to the .box element you want vertically aligned and do something like:
var height = $('.vcenter').height();
$('.vcenter').css('margin-top', (height/2));
$('.vcenter').css('margin-bottom', -(height/2));
var $window = $(window);
var windowsize = $window.width();
function checkWidth(){
if (windowsize < 440) {
$('.vcenter').removeAttr("style");
}
}
$(window).resize(checkWidth);
Which calculates the height of the .box and then divides by 2 to determine a top and bottom margin for the content. We then determine the width of the window and on resize we remove the margins. This part is untested but I believe will work in theory. Here's a demo of matchHeight.js. And here's a useful blog on column height matching in bootstrap.
The last two approaches to vertical alignment are poor but should work.

Answer 2

<div class="row flex-container">
<div class="col-xs-12 flex-item col-sm-3">
vertical align top
</div>
<div class="col-xs-12 flex-item col-sm-3">
vertical align middle
</div>
<img class="col-xs-6 flex-item col-sm-3" src="http://mspmentor.net/site-files/mspmentor.net/files/archive/mspmentor.net/wp-content/uploads/2009/10/free_managed_services.jpg" />
<div class="col-xs-6 flex-item col-sm-3">
vertical align bottom
</div>
</div>
CSS that support the boxes the flex item properties it just give for your understanding
.flex-container {
display: -webkit-flex;
display: flex;
}
.flex-item {
border: 1px solid #000;
padding: 20px;
}