BOOSTRAP Grid | 4 columns > 2 columns > 1 columns

Question

I'm struggling with a 'simple' task with the bootstrap grid layout. I would like 4 columns on large viewport, then 2 columns on medium to finish with only 1 column on smaller devices.

When I'm testing my code snippet, It appears that I have a layout problem with viewport bewteen 992px -> 1199px wide.

The title 3 is not aligned properly.

Here is the codepen link: http://codepen.io/ocleyman/pen/raXbxE

Here is the html snippet:

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6 col-lg-3" style="background:pink;">
      <h3>TITLE 1</h3>
      <p>Lorem ipsum dolor sit amet, et assum efficiantur his, tota postea moderatius ei eos. Eam quis percipitur sadipscing cu. Sale liberavisse ius te, laudem disputando has no. Eos platonem assentior ut, ea iudicabit gubergren evertitur ius, eum nobis definitionem ea. Vix eu quot quaerendum efficiantur.</p>
</div>
<div class="col-md-6 col-lg-3" style="background:red;">
    <h3>TITLE 2</h3>
    <p>Et inermis copiosae cum. Illum delectus voluptaria his ne. Habeo saepe tantas sed no. Ei duo solum pertinax. Ludus aliquid honestatis et pri. Est habeo singulis hendrerit cu, graeco scriptorem theophrastus est ne. Mea audire interpretaris an.</p>
</div>
<div class="col-md-6 col-lg-3"  style="background:yellow;">
    <h3>TITLE 3</h3>
    <p>Odio denique conclusionemque eum et. Pro quodsi expetendis adipiscing ad, vim posse nominati id. Et laboramus assentior quo. Idque dicant verear pri te, vim ad simul dolores, iusto constituto per eu.</p>
</div>
<div class="col-md-6 col-lg-3" style="background:green;">
    <h3>TITLE 4</h3>
    <p>Mei menandri definiebas ad, aeque omnes posidonium ut ius, ut modo justo intellegebat mel. Hinc lucilius detraxit eos at. Hinc inimicus volutpat at his. Ius ornatus convenire honestatis at, ei wisi ceteros pro. Timeam aliquam mea no, ad autem semper vis. An invenire voluptaria eam.</p>
</div>

Any suggestions?

It's because of the flexible height of your divs. If you want them to look right on col-md you need to make them a fixed height on that screensize. — Rence, Apr 16 '15 at 11:46
Use @media (min-width: @screen-md-min) and (max-width: @screen-md-max) to target only the width your layout doesn't work with. — Rence, Apr 16 '15 at 11:51
Please take a look at this: http://masonry.desandro.com/. Your problem is not with bootstrap. — Michelangelo, Apr 16 '15 at 11:52
and for more detail with bootstrap fluid container read this http://stackoverflow.com/questions/22262311/container-fluid-vs-container as this is related to your problem of viewing.. — Leo the lion, Apr 16 '15 at 11:55

score 1 · Answer 1 · answered Apr 16 '15 at 11:51

I think you need to use nested rows:

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-6 col-md-12">
            <div class="row">
                <div class="col-md-6" style="background:pink;">
                    <h3>TITLE 1</h3>
                    <p>Lorem ipsum dolor sit amet, et assum efficiantur his, tota postea moderatius ei eos. Eam quis percipitur sadipscing cu. Sale liberavisse ius te, laudem disputando has no. Eos platonem assentior ut, ea iudicabit gubergren evertitur ius, eum nobis definitionem ea. Vix eu quot quaerendum efficiantur.</p>
                </div>
                <div class="col-md-6" style="background:red;">
                    <h3>TITLE 2</h3>
                    <p>Et inermis copiosae cum. Illum delectus voluptaria his ne. Habeo saepe tantas sed no. Ei duo solum pertinax. Ludus aliquid honestatis et pri. Est habeo singulis hendrerit cu, graeco scriptorem theophrastus est ne. Mea audire interpretaris an.</p>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-md-12">
            <div class="row">
                <div class="col-md-6"  style="background:yellow;">
                    <h3>TITLE 3</h3>
                    <p>Odio denique conclusionemque eum et. Pro quodsi expetendis adipiscing ad, vim posse nominati id. Et laboramus assentior quo. Idque dicant verear pri te, vim ad simul dolores, iusto constituto per eu.</p>
                </div>
                <div class="col-md-6" style="background:green;">
                    <h3>TITLE 4</h3>
                    <p>Mei menandri definiebas ad, aeque omnes posidonium ut ius, ut modo justo intellegebat mel. Hinc lucilius detraxit eos at. Hinc inimicus volutpat at his. Ius ornatus convenire honestatis at, ei wisi ceteros pro. Timeam aliquam mea no, ad autem semper vis. An invenire voluptaria eam.</p>
                </div>
            </div>
        </div>
    </div>
</div>

http://codepen.io/anon/pen/qEewPa

Colin Bacon · Accepted Answer · 2015-04-16T11:54:18.053

0

It is because the boxes are different heights. When the boxes are floated they will take up the available space.

Setting them all to the same height will allow the boxes to align correctly (see below).

enter image description here

edited Apr 16 '15 at 11:54

answered Apr 16 '15 at 11:46

Colin Bacon

15,436
7
52
72

but he is using bootstrap and all divs are having different size as thats the layout he needed then why he will change the heights? is it ok to change the main Bootstrap files? – Leo the lion Apr 16 '15 at 11:48
for floating issue i think he should use Clear:both property right? – Leo the lion Apr 16 '15 at 11:49
@Leo There is no need to edit the bootstrap files, he can just apply his own css class to the boxes. – Colin Bacon Apr 16 '15 at 11:50
Ok got it but he needed that layout so i don't think he should change heights? and what about clear:both tag? – Leo the lion Apr 16 '15 at 11:52
@Leo by using `clear: left` you will still get a space in-between the top box and bottom box, and it would look inconsistent – Colin Bacon Apr 16 '15 at 11:53
Use Clear:both not left..and then extra space will be recovered and div won't behave strange.. – Leo the lion Apr 16 '15 at 11:54

BOOSTRAP Grid | 4 columns > 2 columns > 1 columns

2 Answers2