1

I'm using a Bootstrap grid to create a quad chart, and leveraging the CSS3 flexbox layout mode discussed here to make each column in the same row the same height. However, I want to use a Bootstrap well in each quad to highlight the "quad-ness" of the chart and I can't seem to figure out how to get the wells to fill all the space in the column divs.

<div class="row row-eq-height">
    <div class="col-md-6">
        <div class="well">
            hello<br/>world<br/>how<br/>are<br/>you?
        </div>
    </div>
    <div class="col-md-6">
        <div class="well">
            hi!
        </div>
    </div>
</div>
<div class="row row-eq-height">
    <div class="col-md-6">
        <div class="well">
            hi!
        </div>
    </div>
    <div class="col-md-6">
        <div class="well">
            hello<br/>world<br/>how<br/>are<br/>you?
        </div>
    </div>
</div>

I have a playground here (be sure to go full screen on the result to see the quad chart).

I tried modifying the well class' CSS to set height to 100%, but that just seems to increase the height of the outer divs as well (example here).

Any ideas how I can get the wells to fill up the divs they're in without increasing the height of the divs?

Edit #1

To be clear, I'm not asking how to get all of the columns in a row the same height. The Flexbox solution using the row-eq-height class does that for me.

What I'm trying to figure out is how to make the Bootstrap well within a column div be the full height of the column div, regardless of how much content the well contains.

I've updated my two examples (linked above) to include border lines around the column divs to try and better articulate what I'm talking about.

Bryan
  • 2,205
  • 1
  • 23
  • 43
  • There is a nice article on that: http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height – sdvnksv May 26 '15 at 11:30
  • @Deka87 thanks for the article... I've seen it before but I think it's focused on getting all the column divs the same height. That's not my question here. I've edited my original post above to try and better reflect what I'm trying to do. – Bryan May 27 '15 at 11:26
  • Looked like a duplicate. See my answer on here: http://stackoverflow.com/questions/39551544/bootstrap-well-same-height – Dita Aji Pratama Sep 17 '16 at 22:08

1 Answers1

0

Check this DEMO

 <div class="row row-eq-height">
    <div class="col-xs-6 "><div class="well">column 1</div></div>
    <div class="col-xs-6 "><div class="well">column 2<br>this is<br>a much<br>taller<br>column<br>than the others</div></div>

      </div>
        <div class="row row-eq-height">
    <div class="col-xs-6 "><div class="well">column 1</div></div>
    <div class="col-xs-6 "><div class="well">column 2<br>this is<br>a much<br>taller<br>column<br>than the others</div></div>

      </div>
sheshadri
  • 1,207
  • 9
  • 21
  • thank you. However, I think this is what I was already doing. Please see the edits to my original question above where I tried clarifying my question. – Bryan May 27 '15 at 11:27