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

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

using bootstrap 3.2, have section of website has 3 divs (.col-lg-3 box) have differing amounts of text in them. i'd them extend bottom of containing div (.row). link css file i'm using here: https://github.com/ttmjason/gazoomtravel/blob/master/css/bootstrap.css.

the answers i've seen on stack exchange general issue (same height divs in container) either don't utilize bootstrap or have outdated syntax. if can link me sxe question mirrors mine, i'll gladly take downvotes in exchange 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 earn 75% of paid commission, payable within 2 weeks of receipt. upon registering, receive own <span class="emphasis-blue">gazoom</span> personalized website, product , software training mentoring. have @ fingertips tools necessary begin business in 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 business @ pace <span class="emphasis-blue">gazoom</span> family of products , services. upon registering receive personalized website our various , unique travel opportunities clients @ fingertips. 24 hr assist programme available , clients. you'll eligible participate in our corporate , 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 receive 1 of highest paid commission levels in industry: 85%, payable within 2 weeks of receipt when maintain monthly bookings. bring clients , enjoy 1 of industry's dynamic , unique inventory , booking sites. confident , book of business protected , can serviced our 24 hr assist program. can assist in growing business offering lead generation programme corporate travelers leisure travelers.</p> <button type="button" class="center-block btn btn-red btn-lg">join now</button> </div> </div> </div>

there many ways create equal height columns. none, unless you're using actual tables, outdated. flexbox works modern browsers. can utilize jquery. can utilize big amounts of padding-bottom , negative margin bottom. can utilize display:table on .row , display:table-cell on columns (after remove floats).

however of css approaches give this:

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

this because there's no margin gutter in bootstrap grid, it's padding.

but if want have boxes this?

you can't because there's no margin between. can utilize borders , :before/:after, if have background image page's background?

for lastly few years i've used jquery approach. latest script i'm using , it's smooth: https://github.com/sam152/javascript-equal-height-responsive-rows

here's how utilize (once it's loaded after jquery):

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

this can kid class of column, allows create sec figure in answer.

here's illustration false content , flush bottom buttons. you'll notice equal heights responsive , per visual row, it's not tallest of tall it's tallest of nearest siblings. so, essentially, gives expected results:

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

html css twitter-bootstrap twitter-bootstrap-3