Bootstrap nested grid disproportion

Question

Trying to use bootstrap nested grid and going fail: last cell breaks to new row:

Here is the code, but you should run it on brawser: don't use any online redactors.

Some css for pretty colors:

.green {
    background-color: lightgreen;
}
.blue {
    background-color: lightblue;
}
.yellow {
    background-color: yellow;
}
.grey {
    background-color: lightgrey;
}

Here is the code, two examples with success and failed left shoulder of the grid:

<div class="container">
<hr>
<div class="row">
    <div class="col-md-3 grey">
        <div class="row">
            <div class="col-md-4 green">4</div>
            <div class="col-md-1 blue">1</div>
            <div class="col-md-4 yellow">4</div>
            <div class="col-md-2 blue">2</div>    
        </div> 
    </div>
    <div class="col-md-9 blue">9</div>
</div>
<hr>
<div class="row">
    <div class="col-md-3 grey">
        <div class="row">
            <div class="col-md-4 green">4</div>
            <div class="col-md-1 blue">1</div>
            <div class="col-md-4 yellow">4</div>
            <div class="col-md-3 blue">3</div>    
        </div> 
    </div>
    <div class="col-md-9 blue">9</div>
</div>
</div>

At Chrome I have got heartbreaking result:

I even check 4 + 1 + 4 + 3 on the calculator but is steel was twelve...

The funniest thing is that if you have 4+2+4+2, it works. I think you may want to switch to Bootstrap 4. In version 4, instead of `float`, they use Flexbox, and it's way more consistent in display of rows and such. — rishat, Sep 01 '16 at 22:15

Thilo · Answer 1 · 2016-09-01T23:04:04.403

This is not a bug, this is simply a case of taking the grid system too far. The .col-md-1 within a .col-md-3 boils down to a column width of 1/3 * 1/12 of the default container width, which is 970px. So 970 / 3 / 12 = ~27px is the width you're trying to force that column to be. But the default padding on each side of a column is 15px, making the minimum width of a column without any content 30px. That's why this layout breaks the grid. You can verify this by switching .container to .container-fluid and making your browser window wide enough - eventually the .col-md-1 column will expand beyond it's padding and slip into place.

A solution would be to reduce the padding and negative margin of .col-* and .row, respectively - they need to complement each other. Something like this:

.row {
  margin-right: -10px !important;
  margin-left: -10px !important;
}

[class*="col-md-"] {
    padding-right: 10px !important;
    padding-left: 10px !important;
}

See https://jsfiddle.net/ovj1csv6/

But you're probably better off not using the grid system this way in the first place.

score -1 · Answer 2 · edited May 23 '17 at 12:22

-1

As we can in above image After every col-* there will be padding. you can remove that by adding [class*="col-"] { padding: 0 !important; }

and your cells will get fit within that col-3 cell.

referred this link

Here is bootply for the above

edited May 23 '17 at 12:22

Community

1
1

answered Sep 01 '16 at 21:22

Shridhar

339
2
15

You are wrong. Example steel not working. "little" space as you say, is not so little 15! px from every side. There is NO any "nopadding" crutch on the bootstrap docs. See http://getbootstrap.com/css/ for Nested Columns – user2602807 Sep 01 '16 at 22:01
So, padding or margin? Or it will appear in random way? Why sould I clog my css with excess commands? – user2602807 Sep 01 '16 at 22:04

Bootstrap nested grid disproportion

2 Answers2