Bootstrap div height

Question

I have html code and I use Bootstrap. But when I resize width of browser and get 2+2 columns ( col-sm-6 ) my first and second footer-widget have different heights.

So I want to have one height for all footer-widget

<div class="container">
    <div class="row">
        <div class="col-md-3 col-sm-6">
            <div class="footer-widget">
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>          
            </div>
        </div>
        <div class="col-md-3 col-sm-6">
            <div class="footer-widget">
                <p>lorem ipsum</p>
            </div>
        </div>
        <div class="col-md-3 col-sm-6">
            <div class="footer-widget">
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
            </div>
        </div>
        <div class="col-md-3 col-sm-6">
            <div class="footer-widget">
                <p>lorem ipsum</p>
            </div>
        </div>
    </div>
</div>

Possible duplicate of [How can I make Bootstrap columns all the same height?](http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height) — hungerstar, Jan 10 '17 at 17:27

score 0 · Accepted Answer · answered Jan 10 '17 at 18:40

For Bootstrap 3, you can add a custom class to utilize flexbox. Add equal to the row element.

.equal, .equal > div[class*='col-'] {  
    display: flex;
    flex:1 1 auto;
    flex-wrap: wrap;
}

Demo: http://www.codeply.com/go/lO116mxmuZ

Note: Bootstrap 4, now uses flexbox by default so there will be no need for the extra CSS: http://www.codeply.com/go/IJYRI4LPwU

Bootstrap div height

1 Answers1