'How do I make two Bootstrap cols the same height?

I have a simple layout like this:

<div class="row">
    <div class="col-xs-6">
    </div>
    <div class="col-xs-6">
    </div>
</div>

Of course there is a lot of content in the divs. But this is the basic layout. The first div has much more content so is longer in heigth. How do I get them to be equal. I've been pouring over this for hours and I cannot fix. I see .row-eq-height in many threads but I cannot get to work. Is flexbox part of bootstrap 4? I am only on 3 because 4 is not approved for us.

htmlcsstwitter-bootstrapmultiple-columns


Solution 1:[1]

You can assign the height of the first div to the second div using JavaScript.

<div class="row" id="d1">
    <div class="col-xs-6" style="background-color:gold">
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
    </div>
    <div class="col-xs-6" style="background-color:red" id="d2">
        But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the ...
    </div>
</div>

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>

    $("document").ready(function() {
        $("div#d2").height($("div#d1").height());
    });

</script>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 nkengbeza

Related Questions