Bootstrap well same height

Question

I use the bootstrap class well for decoration. I have two divs with different amount of entries inside. Is it possible that both wells fill their parent and have always the same height no matter how many entries they contain?

<div class="container">
    <div class="row">
        <div class="col-xs-8">
            <strong>Title</strong>
            <div class="well well-sm">
                <div>Item 1</div>
                <div>Item 2</div>
                <div>Item 3</div>
                <div>Item 4</div>
                <div>Item 5</div>
                <div>Item 6</div>
            </div>
        </div>
        <div class="col-xs-4">
            <strong>Title</strong>
            <div class="well well-sm">
                <div>Item 1</div>
                <div>Item 2</div>
                <div>Item 3</div>
            </div>
        </div>
    </div>
</div>

I tried different solutions but didn’t succeed. I want to avoid the flex box layout because of its weak support. If I use tables instead of bootstrap columns I get the same result. How can I handle this with CSS (and possibly without adding JavaScript) ?

jsfiddle

nothing just check each row and find the max height then set it on .well class. I dn't answer yet because you mention possibly with out javascript. but without jQuery you have to use display flex. — Baezid Mostafa, Sep 17 '16 at 21:27
place my answer with full code. take a look. just add the border for make sure height is same — Baezid Mostafa, Sep 17 '16 at 21:46
Possible duplicate of [Bootstrap columns to same height AND child to match height](http://stackoverflow.com/questions/26571190/bootstrap-columns-to-same-height-and-child-to-match-height) — Dita Aji Pratama, Sep 17 '16 at 22:18
@Patrick to my knowledge **there's no way to dynamically find out which element is the tallest** and apply that height to the rest of the group **in CSS**. If you can use some **`JavaScript/jQuery`**, then you can find a couple of good solution in [my answer](http://stackoverflow.com/a/39552118/6313073). — Angel Politis, Sep 17 '16 at 22:25

Dita Aji Pratama · Answer 1 · 2016-09-17T21:54:52.940

I use this solution for that problem

Without JavaScript.

I found it on this link.

<div class="row row-flex row-flex-wrap">
    //Your well code
</div>

UPDATE

and add this css:

.row-flex, .row-flex > div[class*='col-'] {  
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex:1 1 auto;
}

.row-flex-wrap {
    -webkit-flex-flow: row wrap;
    align-content: flex-start;
    flex:0;
}

.row-flex > div[class*='col-'], .container-flex > div[class*='col-'] {
     margin:-.2px; /* hack adjust for wrapping */
}

.container-flex > div[class*='col-'] div,.row-flex > div[class*='col-'] div {
    width:100%;
}


.flex-col {
    display: flex;
    display: -webkit-flex;
    flex: 1 100%;
    flex-flow: column nowrap;
}

.flex-grow {
    display: flex;
    -webkit-flex: 2;
    flex: 2;
}

Hope this will helpfull.

Angel Politis · Accepted Answer · 2016-09-17T22:20:43.400

JavaScript:

If you are okay with using a little bit of JavaScript then the following will be exactly what you need:

var
  elements = document.querySelectorAll(".well"),
  heights = [];

/* Getting an array with the heights */
[].forEach.call(elements, function(each) {
  heights[heights.length] = getComputedStyle(each, null).getPropertyValue("height");
});

/* Sorting the array to get the greatest value first */
heights.sort(function(a, b) {
  return parseFloat(b) - parseFloat(a);
});

/* Applying the greatest height to each element */
[].forEach.call(elements, function(each) {
  each.style.height = heights[0];
});

jQuery:

If instead you're in for shorter code and you use jQuery you can use the following code:

var max;

/* Getting the greatest height */
$(".well").each(function() {
  max = ($(this).height() > max) ? $(this).height() : max;
});

/* Applying the greatest height to each element */
$(".well").height(max);

Execution times:

JavaScript: 0.562ms
jQuery: 2.889ms (~5x slower)

Here's a snippet demonstrating the solution:

/* ----- JavaScript ----- */
var
  elements = document.querySelectorAll(".well"),
  heights = [];

[].forEach.call(elements, function(each) {
  heights[heights.length] = getComputedStyle(each, null).getPropertyValue("height");
});

heights.sort(function(a, b) {
  return parseFloat(b) - parseFloat(a);
});

[].forEach.call(elements, function(each) {
  each.style.height = heights[0];
});

/* ----- CSS ----- */
.well {
  border: 1px solid blue !important;
}

<!----- HTML ----->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
      rel="stylesheet" type="text/css" />
<div class="container">
  <div class="row">
    <div class="col-xs-8">
      <strong>Title</strong>
      <div class="well well-sm">
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
        <div>Item 4</div>
        <div>Item 5</div>
        <div>Item 6</div>
      </div>
    </div>
    <div class="col-xs-4">
      <strong>Title</strong>
      <div class="well well-sm">
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
      </div>
    </div>
  </div>
</div>

i don´t know why but in firefox and chrome this code seems to work fine but in internet explorer not. Maybe someone has an idea ? — Matthias, Feb 21 '17 at 19:35

score 3 · Answer 3 · edited May 23 '17 at 12:32

You can set another class to the divs if you have the exact height size value you want it to have:

<div class="container">
  <div class="row">
    <div class="col-xs-8">
      <strong>Title</strong>
      <div class="well well-sm test">
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
        <div>Item 4</div>
        <div>Item 5</div>
        <div>Item 6</div>
      </div>
    </div>
    <div class="col-xs-4">
      <strong>Title</strong>
      <div class="well well-sm test">
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
      </div>
    </div>
  </div>
</div>

And for example if your max height value is 300px (or can be min-height):

.test {
  height: 300px !important;
}

It will be the same size, jsFiddle

But! if you want to make it the same height, without having a fixed height value, then I think you'd need to use javascript to get the biggest's divs height.

Take an example here:

How to set height of element to match height of another element?

There's a very quick snippet I made for you using jQuery, it's made pretty badly, i am sure there are better and short ways:

var max = 0;
$.each( $('.row > div > div'), function(i, row) {
            var cheight = $(row).height();
            if (cheight > max) {
            max = cheight;
      }
})

$.each( $('.row > div > div'), function(i, row) {
        $(row).height(max);
})

jsFiddle here

Unfortunately, I don’t know the max or min size. I think I try to solve it with JavaScript. — Patrick, Sep 17 '16 at 21:27

score 1 · Answer 4 · answered Sep 17 '16 at 21:41

Here is the answer with jQuery https://jsfiddle.net/mjgLufa1/1/

var maxHeight = 0;

$(".row").each(function() {
  if ($(this).height() > maxHeight) {
    maxHeight = $(this).height();
  }
});

$(".well ").height(maxHeight);

  .well{
    border: 1px solid red !important;
     }

       <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" >  </script>
 <body>
    <div class="container">
  <div class="row">
    <div class="col-xs-8">
      <strong>Title</strong>
      <div class="well well-sm">
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
        <div>Item 4</div>
        <div>Item 5</div>
        <div>Item 6</div>
      </div>
    </div>
    <div class="col-xs-4">
      <strong>Title</strong>
      <div class="well well-sm">
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
        <div>Item 3</div>
        <div>Item 3</div>
        <div>Item 3</div>
  
      </div>
    </div>
  </div>
</div>
 </body>

score 0 · Answer 5 · answered Sep 17 '16 at 21:21

0

Try use .row-eq-height.

<div class="row row-eq-height">
... 
</div>

Note this example: http://getbootstrap.com.vn/examples/equal-height-columns/

Might be useful in your case.

answered Sep 17 '16 at 21:21

Luiz Gonçalves

549
3
11

1

I’ve seen this before but unfortunately it is based on flexbox layout. I rather go with a js solution. – Patrick Sep 17 '16 at 21:30
Hm, fine! What about to customize a column instead? Isn't better? – Luiz Gonçalves Sep 17 '16 at 21:31

Bootstrap well same height

5 Answers5

Linked