Twitter bootstrap responsive block heights

1
votes

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.

2
jquerycsstwitter-bootstraptwitter-bootstrap-3
Have you tried giving large screens 6 columns instead of four? jsfiddle.net/bFcrq/17 Also, on your first fiddle, you are going beyond the 12 column grid limit. Have you read the BS docs for this? – BuddhistBeast
Yes but to utilize all screen, I prefer to have 4 columns for large screens. – trante
I agree with @BuddhistBeast 6 columns will utilize more of the screen than 4 will, so if that's what you're going for, go with 6. Also, there is no reason to have col-xs-12, you only need to specify the number of columns if they are changing from the size above, so your col-small-12 will already set 12 columns for xs as well. – APAD1
I would do it like this: jsfiddle.net/bFcrq/19 – APAD1
Or you can do this: jsfiddle.net/bFcrq/21 – BuddhistBeast

2 Answers

7
votes

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

3
votes

I created this javascript based solution.
Fiddle: http://jsfiddle.net/mavent/zobhpkvz/7/

// html

<div class="row modify_parent">
    <div class="col-sm-4 alert alert-success modify_child">Some thing happens here..
        <br>Some thing happens here..
        <br>Some thing happens here..
        <br>Some thing happens here..
        <br>Some thing happens here..
        <br>
    </div>
    <div class="col-sm-offset-2 col-sm-4 alert alert-success modify_child">Other thing happens here..
        <br>
    </div>
</div>

// javascript

var sameHeightTop = $(".modify_parent");
if (sameHeightTop.length !== 0) {
    sameHeightTop.each(function () {
        var tallest = 0;
        var sameHeightChildren = $(this).find(".modify_child");
        sameHeightChildren.each(function () {
            var thisHeight = $(this).height();
            if (thisHeight > tallest) {
                tallest = thisHeight;
            }
        });
        sameHeightChildren.height(tallest);
    });
}