Bootstrap nested grid disproportion -

trying use bootstrap nested grid , going fail: last cell breaks new row:

here code, should run on brawser: don't use online redactors.

some css pretty colors:

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

here code, 2 examples success , failed left shoulder of 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 have got heartbreaking result:

i check 4 + 1 + 4 + 3 on calculator steel twelve...

this not bug, case of taking grid system far. .col-md-1 within .col-md-3 boils down column width of 1/3 * 1/12 of default container width, 970px. 970 / 3 / 12 = ~27px width you're trying force column be. default padding on each side of column 15px, making minimum width of column without content 30px. that's why layout breaks grid. can verify switching .container .container-fluid , making browser window wide enough - .col-md-1 column expand beyond it's padding , slip place.

a solution reduce padding and negative margin of .col-* , .row, respectively - need complement each other. 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 better off not using grid system way in first place.