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

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

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="http://i.stack.imgur.com/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="http://i.stack.imgur.com/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(http://i.stack.imgur.com/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>

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.

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

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>