Bootstrap 3 Gutter Size

Question

I've only just started working with bootstrap and unsure about how to achieve my goal.

I would like the gutters to all be even, like they are in this image:

by default, they look like this, the vertical gutters in between columns (marked with blue) are double the horizontal and outside gutters:

Any help on the best way to solve this probably would be appreciated.

Answer 1

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:

margin of the .row class

with:

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

padding of the .container class

with:

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

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

Answer 2

You can keep the default behaviour (with gutter) and add a class to your CSS stylesheet for tasks like yours:

.no-gutter > [class*='col-'] {     padding-right:0;     padding-left:0; } 

And here’s how you can use it in your HTML:

<div class="row no-gutter">     <div class="col-md-4">         ...     </div>     <div class="col-md-4">         ...     </div>     <div class="col-md-4">         ...     </div> </div>