CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
TheNoob
TheNoob

Reputation: 51

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

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

Upvotes: 3

Views: 15986

Answers (5)

Razvan Zamfir
Razvan Zamfir

Reputation: 4712

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>

Upvotes: 0

MajiD
MajiD

Reputation: 2585

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...

Upvotes: 1

Yandy_Viera
Yandy_Viera

Reputation: 4380

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>

Upvotes: 5

NooBskie
NooBskie

Reputation: 3841

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

Upvotes: 0

Bryan Miller
Bryan Miller

Reputation: 3323

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.

Upvotes: 0

Related Questions