11

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?

Jsfiddle demo

Improve this question
1
  • 2
    “layouting” — not a word. Commented May 8, 2017 at 14:59

2 Answers 2

Reset to default
6

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

4

You can try using display: flex like this: 

.row-full-height { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; }

Here's a working fiddle

.col1 { background-color: red; color: white; } .col2 { background-color: green; color: white; } .col3 { background-color: yellow; } .row-full-height { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; }
<div class="container"> <div class="row row-full-height 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> </div>

Improve this answer

Comments