Jones Jones - 1 year ago 60
CSS Question

Bootstrap columns with the same heights

I have the following html code:

<div class="container">
<div class="row row1">
<div class="col col1 col-md-3">
Column 1
</div>
<div class="col col2 col-md-3">
Column 2
</div>
<div class="col col3 col-md-3">
<div class="row">
Column 3
</div>
<div class="row">
Column 4
</div>
</div>
</div>


I'm using bootstrap grid layout system and I want to achieve something like this:

enter image description here

The idea is that col1 and col2 should have the same height as col3 and col4 combined.

Is there a way of doing this without specifying the height of the container and setting height 100% on children elements as I did on this example?

https://jsfiddle.net/t1uo6mvt/4/

Answer Source

Reading: How can I make Bootstrap columns all the same height?

You can use:

.row{
    overflow: hidden; 
}

[class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

Here's a runnable example:

.row{
    overflow: hidden; 
}

[class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

.row1 {
  height: 100%;
}

.col1{
  background-color: red;
  color: white;
  height: 100%;
}

.col2{
  background-color: green;
  color: white;
  height: 100%;
}

.col3{
  background-color: yellow;
  height: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row row1">
      <div class="col col1 col-xs-3">
          Column 1
      </div>
      <div class="col col2 col-xs-3">
          Column 2 
      </div>
      <div class="col col3 col-xs-3">
          <div class="row">
              Column 3
          </div>
          <div class="row">
              Column 4
          </div>
      </div>
  </div>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download