Bootstrap 3.2: How to make 3 columns containing text in another div same height?

Question

Using Bootstrap 3.2, I have a section of website that has three divs (.col-lg-3 box) that will have differing amounts of text in them. I'd like them all to extend to the bottom of the containing div (.row). A link to the CSS file I'm using is here: https://github.com/ttmjason/GazoomTravel/blob/master/css/bootstrap.css.

The answers I've seen on Stack Exchange for this general issue (same height divs in a container) either don't use Bootstrap or are have outdated syntax. If you can link me to a SxE question that perfectly mirrors mine, I'll gladly take the downvotes in exchange for an answer.

 <div class="container-fluid join">
  <h2 class="text-center white-heading" id="join-ita"><strong>Join ITA</strong></h2>
  <!-- <hr class="line-black"> -->
  <div class="row">

    <div class="col-lg-3 box">
        <div>
          <h3 class="text-center blue-heading">Newcomers Begin Here</h3>
        </div>
    <p>You will immediately earn 75% of paid commission, payable to you within 2 weeks of receipt. Upon registering, you immediately receive your own <span class="emphasis-blue">GaZoom</span> personalized website, with product and software training as well as mentoring. You will have at your fingertips all the tools necessary to immediately begin your business in the travel industry.</p>
    <button type="button" class="center-block btn btn-success btn-lg">JOIN NOW</button>
    </div>

    <div class="col-lg-3 box">
        <div>
          <h3 class="text-center blue-heading">Experienced Part-Time Agents</h3>
        </div>
      <p>Immediately earn 80% of paid commissions paid within 2 weeks of receipt. Enjoy your business at your pace with the <span class="emphasis-blue">GaZoom</span> family of products and services. Upon registering you will immediately receive your personalized website with our diverse and unique travel opportunities for your clients at your fingertips. A 24 hour assist program is available for you and your clients. You'll be eligible to participate in our corporate and leisure lead generation program. No monthly minimum requirements.</p>
      <button type="button" class="center-block btn btn-warning btn-lg">JOIN NOW</button>
    </div>

    <div class="col-lg-3 box">
          <div>
            <h3 class="text-center blue-heading">Experienced Full-Time Agents</h3>
          </div>
      <p>You're eligible to receive one of the highest paid commission levels in the industry: 85%, which is payable within 2 weeks of receipt when you maintain monthly bookings. Bring your clients and enjoy one of the industry's most dynamic and unique inventory and booking sites. Be confident that you and your book of business is protected and can be serviced with our 24 hour assist program. We can assist in growing your business by offering you a lead generation program for corporate travelers as well as leisure travelers.</p>
      <button type="button" class="center-block btn btn-red btn-lg">JOIN NOW</button>
    </div>
  </div>
</div>

Answer 1

There are many ways to create equal height columns. None, unless you're using actual tables, are outdated. Flexbox works for modern browsers. You can use jQuery. You can use really large amounts of padding-bottom and negative margin bottom. You can use display:table on the .row and display:table-cell on the columns (after you remove the floats).

However all of the CSS approaches only give you something like this:

Reference: http://www.minimit.com/demos/bootstrap-3-responsive-columns-of-same-height

This is because there's no margin as gutter in the Bootstrap grid, it's padding.

But what if you want to have some boxes like this?

You can't because there's no margin between. You can use borders and :before/:after, but what if you have a background image as your page's background?

For the last few years I've used a jQuery approach. This is the latest script I'm using and it's very smooth: https://github.com/Sam152/Javascript-Equal-Height-Responsive-Rows

Here's how to use it (once it's loaded after jQuery):

$(window).load(function() {
    $('.the-class-I-want-to-be-equal').responsiveEqualHeightGrid();
});

This can be a child class of the column, which is what allows you to make the second figure in this answer.

Here's an example with some fake content and flush bottom buttons. You'll notice that the equal heights are responsive and they are per visual row, so it's not the tallest of the tall it's the tallest of the nearest siblings. So, essentially, it gives you expected results:

DEMO: http://jsbin.com/tunohe/1/