How to set each column same height?

Question

Help me, how to set each column same height? I have this structure:

<div class="container">
    <div class="row">
        <div class="col-md-3 col-sm-6">
            <!--content-->
        </div>
        <div class="col-md-3 col-sm-6">
            <!--content-->
        </div>
        <div class="col-md-3 col-sm-6">
            <!--content-->
        </div>
        <div class="col-md-3 col-sm-6">
            <!--content-->
        </div>
    </div>
</div>

In this case, the content displayed is as follows: enter image description here

But when I try to resize the browser window, the content is shifted wrong: enter image description here

And so should: enter image description here

How to fix it?

Possible duplicate - http://stackoverflow.com/questions/18020360/bootstrap-how-to-get-a-column-with-100-the-height-of-another-column?rq=1 — Paulie_D, Feb 27 '15 at 13:16

score 2 · Answer 1 · answered Feb 27 '15 at 13:34

One way would be to add a clearfix that's only visible on the smaller viewports..

<div class="container">
    <div class="row">
        <div class="col-md-3 col-sm-6">
            <!--content-->
        </div>
        <div class="col-md-3 col-sm-6">
            <!--content-->
        </div>
        <div class="clearfix visible-sm"></div>
        <div class="col-md-3 col-sm-6">
            <!--content-->
        </div>
        <div class="col-md-3 col-sm-6">
            <!--content-->
        </div>
    </div>
</div>

http://bootply.com/ZDDbPlCraT

score -1 · Answer 2 · answered Feb 27 '15 at 13:56

-1

create a custom css class in your .css file

.fixed-height {
height: 200px;
}

Then add this to your HTML as follows:

<div class="container">
    <div class="row">
        <div class="col-md-3 col-sm-6 fixed-height">
            <!--content-->
        </div>
        <div class="col-md-3 col-sm-6 fixed-height">
            <!--content-->
        </div>
        <div class="col-md-3 col-sm-6 fixed-height">
            <!--content-->
        </div>
        <div class="col-md-3 col-sm-6 fixed-height">
            <!--content-->
        </div>
    </div>
</div>

answered Feb 27 '15 at 13:56

contool

1,034
3
18
29

you could get more complex and customise the fixed-height class based on screen size - but above works across all situations – contool Feb 27 '15 at 14:00
umm... sorry but this works, and addresses the question exactly so why the downvote? http://www.bootply.com/QCh2TiB8cx – contool Feb 27 '15 at 17:30

How to set each column same height?

2 Answers2