Bootstrap and Equal Height Columns

We have a page with 3 columns: a left sidebar, main content in the middle and a right aside for help content. The columns are re-ordered for small screens using Bootstrap's push/pull classes. The content is dynamic and quite often there's a significant different in height.

We wanted to either shade the columns or put a vertical line in between. At 768px and below no background and the usual stacking.

This turned out to be quite a challenge, but http://webdesign.tutsplus.com/tutorials/quick-tip-solving-the-equal-height-column-conundrum--cms-20403 came to my rescue.

There was a wrinkle caused by the Bootstrap columns having position: relative applied to them.

This may not be the best solution (requires extra markup), but it felt like a reasonable compromise:

<div class="row column-background-wrapper">
  <span class="column-background column-1"></span>
  <div class="col-sm-3">
    ...
  </div>

  <span class="column-background column-2"></span>
  <div class="col-sm-5">
    ...
  </div>

  <span class="column-background column-3"></span>
  <div class="col-sm-4">
    ...
  </div>
</div>

And the CSS:

.column-background-wrapper {
  position: relative;
}

.column-background {
  display: none;
}

@media (min-width: 768px) {
  .column-background {
    bottom: 0;
    display: block;
    position: absolute;
    top: 0;
    z-index: -1;
  }

  .column-1 {
    left: 0;
    background-color: #eee;
    width: 25%;
  }

  .column-2 {
    left: 25%;
    // no background needed
    width: 41.66666667%;
  }

  .column-3 {
    left: 66.66666667%;
    background-color: #eee;
    width: 33.33333333%;
  }

}

The % values in the CSS change according to your column setup. And if you use different column sizes at different screen sizes, you would need to replicate that configuration with your own media queries.

http://www.bootply.com/Toa7I16QEQ