How to make bootstrap columns the same height in a row?

Question

http://www.bootply.com/somVIZEXxC# Here is the bootply for my website, basically I want the cols col-lg-6 to be the same height so that the images I have inside them are even, at the moment, one image stretches below the other one.

Edit: Current version http://www.bootply.com/UIWf6q09h4

• Yandy_Viera: possible duplicate of How can I make Bootstrap columns all the same height?
• TheNoob: I tried that solution, it didn't work for me

Answer 1

Content should be placed within columns, and only columns may be immediate children of rows

So get out the h1 from the .row and set the class .row-eq-height to .row like this:

.row-eq-height{
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
}
<div class="row row-eq-height"></div>

Here the full information http://getbootstrap.com.vn/examples/equal-height-columns/

Here a minimal snippet to illustrate:

.row-eq-height{
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
 
<h1 class="text-center"> Where do we cater to? </h1>
 
<div class="row row-eq-height"> 
 <div class="col-xs-6"> 
 <img src="https://i.sstatic.net/gijdH.jpg?s=328&g=1" class="img-responsive">
 </div>
 <div class="col-xs-6" style="background: blueviolet"> 
 <img src="http://orig00.deviantart.net/0cbb/f/2013/107/3/a/lnd_small_bmp_64x64_by_shadowblitz-d620m47.jpg" class="img-responsive">
 </div>
</div>

Like I said I don't know the limitation of your img (height, if can be background, etc.) Here some tips to achieve what you want:

Remove the margin from row and the padding from col-, add width: 100% to your image like this:

.row-eq-height{
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 margin: 0;
}
.row-eq-height [class*="col-"]{
 padding: 0;
}
.row-eq-height img{
 width: 100%;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
 
<h1 class="text-center"> Where do we cater to? </h1>
 
<div class="row row-eq-height"> 
 <div class="col-xs-6"> 
 <img src="https://i.sstatic.net/gijdH.jpg?s=328&g=1" class="img-responsive">
 </div>
 <div class="col-xs-6" style="background: blueviolet"> 
 <img src="http://orig00.deviantart.net/0cbb/f/2013/107/3/a/lnd_small_bmp_64x64_by_shadowblitz-d620m47.jpg" class="img-responsive">
 </div>
</div>

If the image can be background you can define a specific proportional height you can use padding-top, let say 4:3 that would be 3 * 100 / 4 = 75 = padding-top

So you can do this:

.row-eq-height{
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 margin: 0;
}
.row-eq-height [class*="col-"]{
 padding: 0;
}
.img-container{ 
 background-size: cover;
 padding-top: 75%; /*you can change it to obtain a desired height*/
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
 
<h1 class="text-center"> Where do we cater to? </h1>
 
<div class="row row-eq-height"> 
 <div class="col-xs-6">
 <div class="img-container" style="background-image: url(https://i.sstatic.net/gijdH.jpg?s=328&g=1)"></div>
 </div>
 <div class="col-xs-6">
 <div class="img-container" style="background-image: url(http://orig00.deviantart.net/0cbb/f/2013/107/3/a/lnd_small_bmp_64x64_by_shadowblitz-d620m47.jpg)"></div>
 </div>
</div>

• TheNoob: This seemed to only decrease the size of one image by 1x1 pixel and decrease the width of the other by 1 pixel or a small amount at that
• Yandy_Viera: @TheNoob I added a minimal snippet to illustrate that both col- have the same height, let me know if that works for you.
• TheNoob: This seems to work in terms of getting the columns equal height, but how do I make it so my image fills the whole column? Also, what is the advantage of using xs instead of lg?
• Yandy_Viera: The answer for that depends on what you want to achieve and there is so many answer for that, look at these: stackoverflow.com/questions/11757537/… , stackoverflow.com/questions/1891857/… , stackoverflow.com/questions/14142378/…
• TheNoob: triplagent.com what I want in the end is how the images are laid out on that site, side by side with no spaces inbetween and stretched to the edge of the page. This screenshot should help to show what I mean, i.imgur.com/YB7IY3P.jpg, so the right image is the size of the purple area and so the columns have no space between them, note that the actual images are much larger and seem to be being downsized when put into the column

Answer 2

just add the "equal-heights" class to the columns parent

$('.equal-heights').each(function(){ 
 var highestBox = 0;
 $(this).children('[class*="col-"]').each(function(index, el){
 if( $(el).height() > highestBox ) highestBox = $(el).height();
 }); 
 $(this).children('[class*="col-"]').css('height',highestBox);
});

the html would be like this...

<div class="row equal-heights">
 <div class="col-md-4">...</div>
 <div class="col-md-4">...</div>
 <div class="col-md-4">...</div>
</div>

see this pen...

Answer 3

Try taking out your

<h1 class="text-center"> Where do we cater to? </h1>

because one "row" is meant to add up to 12. Right now, you have this h1 in the row along with your two col-lg-6, which should be in a row of their own (6+6=12).

The h1 should be in its own row with its own col-lg-12, or whatever you might want.

• TheNoob: I've moved h1 into a new row, it appears to have had no effect on the height of the images in the col-lg-12's
• Bryan Miller: The images should still each be in their own col-lg-6 (in one row), but the h1 should be in its own col-lg-12 (in another row)
• TheNoob: my bad, I have done exactly that now and it is still the same as it was previously

Answer 4

Did you try using max-height:?

heres a fork of your code http://www.bootply.com/wVSqmPKERL

added another row to the columns and add the class of height-fix which just adds

a max-height attribute that you can set to whatever you need.

edit You can also combine this with min-height if the images are to small

• TheNoob: When you say I can set the max-height to what ever I need, do I set that in css for example .col-log-6{max-height:100%;}, and do I set it to a percentage or px?
• NooBskie: yea set it to the column thats why i added the class height-fix so you are just extending off the column class instead of directly editing it and yea use px heres some info on it css-tricks.com/almanac/properties/m/max-height
• TheNoob: this doesn't seem to change anything, even if I set a max height to 1px the pictures remain on the page uneffected
• NooBskie: you have to set max-height to the columns that the pictures are in
• TheNoob: I set the max-height to .col-lg-6 which is the columns they sit in, I tried various heights but they remain the same. Edit: when I override it using style= the image disappears

Answer 5

Here is a responsive grid with images. The image containers have equal height and the images themselves are vertically centered;

.grid {
 margin-top: 25px;
 display: flex;
 flex-wrap: wrap;
}
.grid>[class*='col-'] {
 display: flex;
 flex-direction: column;
 align-items: stretch;
 margin-bottom: 15px;
}
.grid img {
 margin: auto 0;
}
@media (max-width: 767px) {
 .container {
 max-width: 100%;
 }
}
@media (max-width: 575px) {
 .container {
 max-width: 100%;
 padding-left: 0;
 padding-right: 0;
 }
 .posts-grid>[class*='col-'] {
 padding-left: 5px;
 padding-right: 5px;
 }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
 <div class="container-fluid">
 <div class="grid">
 <div class="col-sx-6 col-md-4 col-lg-2">
 <img src="http://placehold.it/350x300" class="img-responsive">
 </div>
 <div class="col-sx-6 col-md-4 col-lg-2">
 <img src="http://placehold.it/350x450" class="img-responsive">
 </div>
 </div>
</div>