css - Make columns the same height -

css - Make columns the same height -

with 2 columns in same row, shorter column expand height match taller one.

class="snippet-code-css lang-css prettyprint-override">@import url('//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css'); #small-col { background-color: blue; } class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <div class="row"> <div class="col-xs-8"> lorem ipsum dolor sit down amet, consectetur adipiscing elit. nam orci nisi, elementum non ante vitae, dapibus porta lectus. aliquam elementum ligula ipsum, nec vestibulum ipsum blandit vehicula. nulla quis ligula ac eros molestie rutrum sit down amet urna. curabitur varius, augue sed congue feugiat, odio dolor tincidunt ante, sed ultrices lectus tellus imperdiet diam. praesent non gravida risus. ut varius pellentesque sollicitudin. suspendisse potenti. cras purus mi, rutrum quis leo ut, consectetur aliquam mi. vestibulum auctor tellus european union auctor pretium. donec egestas dapibus porttitor. aliquam convallis sem augue, id volutpat quam rutrum vel. fusce nec ultrices nibh, non vehicula nunc. donec elementum, dolor porta placerat hendrerit, magna ipsum ultrices metus, @ fermentum nibh dolor ut augue. vivamus dapibus fringilla tempor. </div> <div class="col-xs-4" id="small-col"> aliquam eget fermentum magna, nec congue diam. </div> </div>

you can using css rules

class="snippet-code-css lang-css prettyprint-override">#small-col { background-color: blue; } .row { display: table; } .row [class*="col-"] { float: none; display: table-cell; vertical-align: top; } class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <div class="row"> <div class="col-md-8"> lorem ipsum dolor sit down amet, consectetur adipiscing elit. nam orci nisi, elementum non ante vitae, dapibus porta lectus. aliquam elementum ligula ipsum, nec vestibulum ipsum blandit vehicula. nulla quis ligula ac eros molestie rutrum sit down amet urna. curabitur varius, augue sed congue feugiat, odio dolor tincidunt ante, sed ultrices lectus tellus imperdiet diam. praesent non gravida risus. ut varius pellentesque sollicitudin. suspendisse potenti. cras purus mi, rutrum quis leo ut, consectetur aliquam mi. vestibulum auctor tellus european union auctor pretium. donec egestas dapibus porttitor. aliquam convallis sem augue, id volutpat quam rutrum vel. fusce nec ultrices nibh, non vehicula nunc. donec elementum, dolor porta placerat hendrerit, magna ipsum ultrices metus, @ fermentum nibh dolor ut augue. vivamus dapibus fringilla tempor. </div> <div class="col-md-4" id="small-col"> aliquam eget fermentum magna, nec congue diam. </div> </div>

update: responsive way that.

you can utilize jquery code that.

simply place .same-height divs want target.

then add together code javascript file:

boxes = $(".same-height"); maxheight = math.max.apply(math, boxes.map(function () { homecoming $(this).height() }).get()); boxes.height(maxheight);

css twitter-bootstrap twitter-bootstrap-3