Bootstrap 3 Gutter Size

by

try:

.row {
    margin-left: 0;
    margin-right: 0;
}

Every column have a padding of 15 px on both sides. Which makes a gutter between of 30 px.
In the case of the sm-grid your container class will 970px (((940px + @grid-gutter-width))).
Every column get a width of 940/12. The resulting @grid-gutter-width/2 on both sides of the
grid will be hide with a negative margin of – 15px;. Undoing this negative left-margin set a gutter of 30 px on both sides of the grid. This gutter is build with 15px padding of the column + 15 px resting grid space.

update

In response of the answer of @ElwoodP, consider the follow code:

<div class="container" style="background-color:darkblue;">  
<div class="row" style="background-color:yellow;">
  <div class="col-md-9" style="background-color:green;">
    <div style="background-color:lightblue;">div 1: .col-md-9</div>
    <div class="row" style="background-color:orange;">
      <div class="col-md-6" style="background-color:red;">
        <div style="background-color:lightblue;">div 2: .col-md-6</div>
      </div>
      <div class="col-md-6" style="background-color:red;">
        <div style="background-color:lightblue;">div 2: .col-md-6</div>
      </div>
    </div>
  </div>  
  <div class="col-md-3" style="background-color:green;">
    <div style="background-color:lightblue;">div 1: .col-md-3</div>
  </div>      
</div>
</div>

In the case of nesting, manipulation the .row class indeed influences the sub grid. Good or fault depends on your expectations / requirements for the subgrid. Changing the margin of the .row won’t break the sub grid.

default:

enter image description here

margin of the .row class

with:

.row {
    margin-left: 0;
    margin-right: 0;
}

enter image description here

padding of the .container class

with:

.container {
    padding-left:30px;
    padding-right:30px;
}

enter image description here

Notice sub grids shouldn’t wrapped inside a .container class.

Leave a Comment