Set Columns to be Equal Height with Bootstrap.

Question

This is how my webpage is currently looking:

And what I want is for the height of box 1 to be equal to be the height of box 3, if there was more text to be added to box 1 or 3 etc (and the same for boxes 2 and 4, at the same time). I also want the length of which ever side is shorter, to be extended so that it is the same length of the longer side, resulting in both sides (green box and 4 boxes combined) having the same height.

More basically: Boxes 1, 2, 3 and 4 all have the same height. The 4 boxes and green box both extend downwards if necessary to the same height, so that the green box's height is roughly double the height of one smaller box.

This is my code currently:

<div class="container">
  <div class="row">
    <div class="col-xs-6" id="big-box">
      <div class="big-box" style="/*INSERT STYLE EFFECTS HERE*/" id="big-box"> /*INSERT BIG PARAGRAPH HERE*/
      </div>
    </div>
    <div class="col-xs-6">
      <div class="row">
        <div class="col-xs-6">
          <div class="mini-box" id="firstBox">1</div>
        </div>
        <div class="col-xs-6">
          <div class="mini-box" id="secondBox">2</div>
        </div>
        <div class="col-xs-6">
          <div class="mini-box" id="thirdBox">3</div>
        </div>
        <div class="col-xs-6">
          <div class="mini-box" id="fourthBox">4</div>
        </div>
      </div>
    </div>
  </div>
</div>

With some basic CSS to change the looks of the text and background colour etc.

I have tried playoing around with Javascript, Bootstrap, and CSS properties to try and make this possible, but so far nothing has worked. Any help?

Thanks in advance

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) — halfzebra, Dec 22 '15 at 16:50
@halfzebra I tried using the answers from there already, none worked due to the 4 boxes that I have on the left. :/ — Danny Goodall, Dec 22 '15 at 16:52
http://codepen.io/micahgodbolt/pen/FgqLc credits goes to => **Micah Godbolt** responsive version — Vitorino fernandes, Dec 22 '15 at 16:54
@DannyGoodall here's another option [An equal height grid using Flexbox](http://clearleft.com/thinks/270) if [Bootstrap equal-height columns](http://getbootstrap.com.vn/examples/equal-height-columns/) is not good enough. — halfzebra, Dec 22 '15 at 16:59

score 0 · Answer 1 · answered Dec 22 '15 at 17:39

I personally don't like the bootstrap class names but that is beside the point. So I think you need to change the CSS:

.row {
    position: relative; // set bounds for mini-box absolute.
}
.mini-box {
    position: absolute;
    top: 0px;
    bottom: 0px;
}

score 0 · Answer 2 · answered Dec 22 '15 at 18:08

I'm not a big fan of bootstrap so i have a alternative, flexbox. the parent has a height: 200px; were every child in that wil align too but i couldn't fix it with a second child with in the row. so i fixed it with height: 95px; because of the 10px margin

.parent {
  align-items: flex;
  display: flex;
  height: 200px;
}
row {} .child1 {
  background-color: green;
  color: #fff;
  width: 300px;
  margin: 0 10px;
}
.child2 {
  background-color: grey;
  color: #fff;
  margin: 0 10px 10px;
  height: 95px;
}
.child3 {
  background-color: red;
  color: #fff;
  margin: 0 10px;
  height: 95px;
}
.child4 {
  background-color: pink;
  color: #fff;
  margin: 0 10px 10px;
  height: 95px;
}
.child5 {
  background-color: black;
  color: #fff;
  margin: 0 10px;
  height: 95px;
}

<div class="parent">
  <div class="child1">text big</div>
  <div class="row">
    <div class="child2">text 1</div>
    <div class="child3">text 2</div>
  </div>
  <div class="row">
    <div class="child4">text 3</div>
    <div class="child5">text 4</div>
  </div>
</div>

css tricks for more info over flexbox

Set Columns to be Equal Height with Bootstrap.

2 Answers2