Jquery – Twitter bootstrap responsive block heights

cssjquerytwitter-bootstraptwitter-bootstrap-3

In my Twitter Bootstrap 3.2 application I have div blocks that has resposive widths.

But if I remove "row" class, due to change of the content length, block heights become different so, blocks look weird. Check this width a screen bigger than 992px: http://jsfiddle.net/mavent/bFcrq/13/

If I use "row" class, my page looks good: http://jsfiddle.net/mavent/bFcrq/15/
But I can't know when to use row class. Because screen size differs, so I can't know whether I can use row class per 2 divs or 3 divs.

So my question is, how can I make this blocks to have same height so even small and big screens have pretty appearance ?

<div class="text-center"> <div class="visible-xs visible-sm">Small screen is ok, There is problem for big screens </div> <div class="well col-lg-4 col-md-4 col-sm-12 col-xs-12"> <a href=""><h2>My pretty title 1</h2><p>My subtitle which can have different number of words</p></a> </div>

Edit: Also check this behaviour in big screens: http://jsfiddle.net/bFcrq/26/
Even I use "row" class, some blocks are long some are short.
It looks very bad when I use "alert-*" classes.

Edit2: Although I prefer CSS solutions, a JQuery based solution also ok for me.

Best Answer

I think this is the best you can do without javascript: http://jsfiddle.net/V2F9E/6/

<div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-6 col-xs-12">
            <h1>1</h1>
            <p>Sub</p>
        </div>
        <div class="col-lg-4 col-md-6 col-xs-12">
            <h1>2</h1>
            <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>

        <div class="clearfix visible-md-block "></div><!--This clearfix has to be set every 2 div because that's when col-md break to a new line-->

        <div class="col-lg-4  col-md-6 col-xs-12">
            <h1>3</h1>
            <p>Sub</p>
        </div>

        <div class="clearfix visible-lg-block "></div><!--This clearfix has to be set every 3 div because that's that col-lg break to a new line-->

        <div class="col-lg-4  col-md-6 col-xs-12">
            <h1>4</h1>
            <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>

        <div class="clearfix visible-md-block "></div><!--This clearfix has to be set every 2 div because that's when col-md break to a new line-->

        <div class="col-lg-4  col-md-6 col-xs-12">
            <h1>5</h1>
            <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>
        <div class="col-lg-4  col-md-6 col-xs-12">
            <h1>6</h1>
            <p>Sub</p>
        </div>

        <div class="clearfix visible-md-block "></div><!--This clearfix has to be set every 2 div because that's when col-md break to a new line-->

         <div class="clearfix visible-lg-block "></div><!--This clearfix has to be set every 3 div because that's that col-lg break to a new line-->

    </div>
</div>

Please notice the:

<div class="clearfix visible-lg-block">
</div>.

More info on grid resets: http://getbootstrap.com/css/#grid-responsive-resets

EDIT

You can also take a look at the flexbox. Maybe this will help you out, it's combining bootstrap with flexbox. http://www.bootply.com/zoupRVbLG4

Related Topic