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

@Bass Jobsen and @ElwoodP attempted to answer this question in reverse--giving the outer margins the same DOUBLE size as the gutters. The OP (and me, as well) was searching for a way to have a SINGLE size gutter in all places. Here are the correct CSS adjustments to do so:

.row {
    margin-left: -7px;
    margin-right: -7px;
}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    padding-left: 7px;
    padding-right: 7px;
}
.container {
    padding-left: 14px;
    padding-right: 14px;
}

This leaves a 14px gutter and outside margin in all places.

Answer 3

Add these helper classes to the stylesheet.less (you can use http://less2css.org/ to compile them to CSS )

.row.gutter-0 {
    margin-left: 0;
    margin-right: 0;
    [class*="col-"] {
        padding-left: 0;
        padding-right: 0;
    }
}

.row.gutter-10 {
    margin-left: -5px;
    margin-right: -5px;
    [class*="col-"] {
        padding-left: 5px;
        padding-right: 5px;
    }
}

.row.gutter-20 {
    margin-left: -10px;
    margin-right: -10px;
    [class*="col-"] {
        padding-left: 10px;
        padding-right: 10px;
    }
}

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

<div class="row gutter-0">
    <div class="col-sm-3 col-md-3 col-lg-3">

    </div>
    <div class="col-sm-3 col-md-3 col-lg-3">

    </div>
    <div class="col-sm-3 col-md-3 col-lg-3">

    </div>
    <div class="col-sm-3 col-md-3 col-lg-3">

    </div>
</div>

<div class="row gutter-10">
    <div class="col-sm-3 col-md-3 col-lg-3">

    </div>
    <div class="col-sm-3 col-md-3 col-lg-3">

    </div>
    <div class="col-sm-3 col-md-3 col-lg-3">

    </div>
    <div class="col-sm-3 col-md-3 col-lg-3">

    </div>
</div>

<div class="row gutter-20">
    <div class="col-sm-3 col-md-3 col-lg-3">

    </div>
    <div class="col-sm-3 col-md-3 col-lg-3">

    </div>
    <div class="col-sm-3 col-md-3 col-lg-3">

    </div>
    <div class="col-sm-3 col-md-3 col-lg-3">

    </div>
</div>

Answer 4

If you use sass in your own project, you can override the default bootstrap gutter size by copy pasting the sass variables from bootstrap's _variables.scss file into your own projects sass file somewhere, like:

// Grid columns
//
// Set the number of columns and specify the width of the gutters.
$grid-gutter-width-base:     50px !default;
$grid-gutter-widths: (
        xs: $grid-gutter-width-base,
        sm: $grid-gutter-width-base,
        md: $grid-gutter-width-base,
        lg: $grid-gutter-width-base,
        xl: $grid-gutter-width-base
) !default;

Now your gutters will be 50px instead of 30px. I find this to be the cleanest method to adjust the gutter size.

Answer 5

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>

Answer 6

I don't think Bass's answer is correct. Why touch the row margins? They have a negative margin to offset the column padding for the columns on the edge of the row. Messing with this will break any nested rows.

The answer is simple, just make the container padding equal to the gutter size:

e.g for default bootstrap:

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

http://jsfiddle.net/3wBE3/61/