CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Dan Ovidiu Boncut
Dan Ovidiu Boncut

Reputation: 3165

How to make divs near eachother to have the same height with twitter bootstrap

I have a page with a variable numbers of child divs, that depending on screen resolution they come 4 in a row (desktop), 3 in a row (tablet) or 2 in a row (on smartphones). But their content differ. How could I make divs that are in a line, have the same height? I have an example here

<div class="row">
    <div class="col-md-3 col-sm-4 col-xs-6">
        asdfas<br />
        asdfas
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6">
        asdfas
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6">
        asdfas<br />
        asdfas
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6">
        asdfas<br />
        asdfas
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6">
        asdfas
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6">
        asdfas<br />
        asdfas
    </div>
</div>

Upvotes: 1

Views: 103

Answers (3)

cforcloud
cforcloud

Reputation: 589

In this case, go for display:flex
or jquery grid layout plugins

Upvotes: 2

Philip
Philip

Reputation: 4592

Put an Id on the row class so you can use it as a selector

<div class="row" id=selectorID>

Then try add a min-height on the child divs

#selectorID > div[class^='col-']{ min-height: 200px; }

Upvotes: 0

Raphael Serota
Raphael Serota

Reputation: 2197

You should manually set the height of the divs. Find out what height (probably in pixels) is appropriate for the largest div, and then set them all to that size.

Upvotes: 0

Related Questions