CODEWITHSUNDEEP
csstwitter-bootstrap
Nick
Nick

Reputation: 8309

Bootstrap 3 Columns with Equal Height Child Divs

I'm using Bootstrap 3.3.2 to create two columns. Each column has a heading, a bordered div with text of an unknown length, and an image. I need the bordered divs with text to be the same height, but only when the columns are side by side. If the window is narrow enough for the columns to be stacked, they should not be the same height. How can I achieve this?

I realize I could use JavaScript to set the shortest div's height to be the same as the tallest div's height, but the problem with this method is that when the user decreases the width of their browser window, the text overflows outside of the div.

Here is my code (jsFiddle demo):

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Title</title>
        <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
        <style>
            .equal {
                border: 3px solid #333;
                padding: 8px;
            }

            img {
                display: block;
                margin: 20px auto 0;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <h1>Foo</h1>

                    <div class="equal">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. His similes sunt omnes, qui virtuti student levantur vitiis, levantur erroribus, nisi forte censes Ti. Pisone in eo gymnasio, quod Ptolomaeum vocatur, unaque nobiscum Q. Eamne rationem igitur sequere, qua tecum ipse et cum tuis utare, profiteri et in medium proferre non audeas? Duo Reges: constructio interrete. Ex ea difficultate illae fallaciloquae, ut ait Accius, malitiae natae sunt. Est, ut dicis, inquit; Id enim ille summum bonum eu)qumi/an et saepe a)qambi/an appellat, id est animum terrore liberum. An est aliquid, quod te sua sponte delectet?</p>
                    </div>

                    <img src="http://placehold.it/350x150" alt>
                </div>
                <div class="col-md-6">
                    <h1>Bar</h1>

                    <div class="equal">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tum Torquatus: Prorsus, inquit, assentior; Quid, quod res alia tota est? Maximus dolor, inquit, brevis est. Nihilo beatiorem esse Metellum quam Regulum. Honesta oratio, Socratica, Platonis etiam. Duo Reges: constructio interrete.</p>
                    </div>

                    <img src="http://placehold.it/350x150" alt>
                </div>
            </div>
        </div>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    </body>
</html>

I know this is similar to this question, but I think it's actually different.

Upvotes: 0

Views: 726

Answers (3)

Watchmaker
Watchmaker

Reputation: 5308

Just with pure CSS you can solve it with flex.

You can add another class to your row class and then apply the styles on that class. 

<div class="container">
        <div class="row row-eq-height">
            <div class="col-xs-6">
            ...

In the css add:

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
  flex-wrap: wrap;         /*to enable responsiveness*/
}

.row-eq-height > [class*="col-"] {
  display: flex;
  flex-direction: column;

  border: 1px solid green;
}

You can check a demo here.

Upvotes: 1

epynic
epynic

Reputation: 1164

Updated !

Try DEMO

Using JavaScript

$(".equal2").height($(".equal1").height());

Do Read http://www.ejeliot.com/blog/61

Upvotes: 0

Jakir Hossain
Jakir Hossain

Reputation: 2517

var equal1 = $(".equal1").height();

var equal2 = $(".equal2").height();

if(equal1 < equal2 ){
    $(".equal1").height($(".equal2").height());
} else {
    $(".equal2").height($(".equal1").height());
}

Please, see this

Demo result

or

Demo with code.

Upvotes: 1

Related Questions