Full height columns in bootstrap 3

Question

I've attempted the solutions given here, but in both cases I can't get my second column to scale to full height.

I've built a simple page to show what I'm getting:

No full height columns

How can I get the second column (photo) to expand to the same height as the first column (test)?

This is the html / css I'm using (matching jsfiddle here:

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <style>
      .fill-columns {
          display: table;
      }
      .fill-column {
          float: none;
          display: table-cell;
          vertical-align: top;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="row fill-columns">
        <div class="col-md-8 fill-column">
          <div class="well">
            <p>Text</p>
            <p>Text</p>
            <p>Text</p>
            <p>Text</p>
            <p>Text</p>
          </div>
        </div>
        <div class="col-md-4 fill-column">
          <div class="well">
            <p>Photo</p>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Columns are same height but the well div isn't ... what about making the column be well too http://jsfiddle.net/xshhdzy8/2/ — DaniP, Oct 23 '14 at 21:38
You have some mistakes in the fiddle demo. Here is the [updated example](http://jsfiddle.net/xshhdzy8/1/). **Technically** the columns have the same height now but inner div elements don't. — Hashem Qolami, Oct 23 '14 at 21:39

score 1 · Answer 1 · edited May 23 '17 at 11:49

The columns are actually behaving as expected, but the content won't automatically fill the column. You can see this if you add the well class to the column itself, such as:

HTML:

<div class="container">
    <div class="row fill-columns">
        <div class="col-xs-8 fill-column well">
            <p>Text</p>
            <p>Text</p>
            <p>Text</p>
            <p>Text</p>
            <p>Text</p>
        </div>
        <div class="col-xs-4 fill-column well">
            <p>Photo</p>
        </div>
    </div>
</div>

If you want to preserve the gutters though, the option that would have the broadest support is probably to use javascript. The foundation framework has a plugin called Equalizer for this purpose. To learn how to integrate Equalizer with Bootstrap, you can see my answer here.

In that answer, I also provide an alternative lighter-weight option. To use that option, you would modify it as follows:

var row=$('.equalize');
$.each(row, function() {
    var maxh=0;
    $.each($(this).find('.well'), function() {
        if($(this).height() > maxh)
            maxh=$(this).height();
    });
    $.each($(this).find('.well'), function() {
        $(this).height(maxh);
    });
});

and in your markup, you'd add the equalize class to your row.

Full height columns in bootstrap 3

1 Answers1