Twitter Bootstrap 3 - Panels of Equal Height in a Fluid Row

Question

I am new to Bootstrap 3 and I would like to have 3 panels on my landing page of equal height, even though the middle panel has less content. When resized they become the sam

Answer 1

If you're going to use the bootstrap grid, I don't think you're going to find an easy way to accomplish this without hacks like the following css.

This basically says. When the screen width is greater than the md breakpoint in bootstrap, give all the elements with panel-body class which are direct descendants of the column elements a minimum height of 420px which happens to be a "magic number" that works with your existing content.

Again, I think this is a really gross solution, but it "works" in a pinch.

@media (min-width: 992px) {
  .col-md-4 > .panel > .panel-body {
    min-height: 420px;
  }
}

Here's a CSS-Tricks article Fluid Width Equal Height Columns which covers various ways (display: table & flexbox) to accomplish this. However, you might need to step away from the responsive bootstrap grid for this particular task.

Also, here's the Complete Guide to Flexbox