3

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

Siguza
  • 21,155
  • 6
  • 52
  • 89
TheNoob
  • 51
  • 1
  • 1
  • 6
  • possible duplicate of [How can I make Bootstrap columns all the same height?](http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height) – Yandy_Viera Aug 04 '15 at 03:45
  • I tried that solution, it didn't work for me – TheNoob Aug 04 '15 at 03:48

5 Answers5

5

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.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="https://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(https://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>
Yandy_Viera
  • 4,320
  • 4
  • 21
  • 42
  • 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 – TheNoob Aug 04 '15 at 04:22
  • @TheNoob I added a minimal snippet to illustrate that both `col-` have the same height, let me know if that works for you. – Yandy_Viera Aug 04 '15 at 04:37
  • 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? – TheNoob Aug 04 '15 at 04:41
  • The answer for that depends on what you want to achieve and there is so many answer for that, look at these: http://stackoverflow.com/questions/11757537/css-image-size-how-to-fill-not-stretch , http://stackoverflow.com/questions/1891857/how-do-you-stretch-an-image-to-fill-a-div-while-keeping-the-images-aspect-rat , http://stackoverflow.com/questions/14142378/css-filling-a-div-with-an-image-while-staying-in-proportion – Yandy_Viera Aug 04 '15 at 04:49
  • http://www.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, http://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 – TheNoob Aug 04 '15 at 04:58
  • I can't answer it in the comments, because the answer is a bit long and edit my answer would put it out of context of your question: "How to make bootstrap columns the same height in a row?" and again depends on what you want to achieve because I don't know what should be the height of the images? or if you can put them as background, etc. so my advice is that you make a new question of what you want exactly to achieve and we help you. – Yandy_Viera Aug 04 '15 at 05:21
  • @TheNoob No problem I will try to help you, ah please don't forget to mark the answer accepted if it fits the question: "How to make bootstrap columns the same height in a row?" that will informs others that this issue is resolved. – Yandy_Viera Aug 04 '15 at 05:33
  • I won't mark it answered yet, the columns just aren't going the same height for me unfortunately. When using height-fix, if I set the max-height to any more than 590px the right image/column starts to strech down and the left one just says the same. – TheNoob Aug 04 '15 at 05:47
1

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

MajiD
  • 2,420
  • 1
  • 22
  • 32
0

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.

Bryan Miller
  • 3,262
  • 4
  • 27
  • 51
  • 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 – TheNoob Aug 04 '15 at 04:01
  • 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) – Bryan Miller Aug 04 '15 at 04:06
  • my bad, I have done exactly that now and it is still the same as it was previously – TheNoob Aug 04 '15 at 04:15
0

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

NooBskie
  • 3,761
  • 31
  • 51
  • 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? – TheNoob Aug 04 '15 at 04:17
  • 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 https://css-tricks.com/almanac/properties/m/max-height/ – NooBskie Aug 04 '15 at 04:20
  • this doesn't seem to change anything, even if I set a max height to 1px the pictures remain on the page uneffected – TheNoob Aug 04 '15 at 04:28
  • you have to set `max-height` to the columns that the pictures are in – NooBskie Aug 04 '15 at 04:29
  • 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 – TheNoob Aug 04 '15 at 04:31
  • are you using the fork that i sent you? just change the max-height in the new class that i added called height-fix – NooBskie Aug 04 '15 at 04:33
  • My bad, I added height-fix into my css and it works in changing the heights, however when I make their heights to a point where the is no space between the two images (see http://www.triplagent.com/ and scroll down to see the effect I wish to achieve) one column/image is bigger then the other – TheNoob Aug 04 '15 at 04:36
  • Check @Yandy_Viera's answer his seems to do exactly what you need then – NooBskie Aug 04 '15 at 04:37
0

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>
Razvan Zamfir
  • 4,209
  • 6
  • 38
  • 252