32

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:

enter image description here

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

enter image description here

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

JDB
  • 25,172
  • 5
  • 72
  • 123
Billy
  • 323
  • 1
  • 3
  • 7

10 Answers10

19

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.

Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224
  • Thanks. I agree this works but am a little worried as to why this is not the default. Maybe it causes problems with nested rows? – Tarwin Stroh-Spijer Feb 11 '14 at 21:24
  • @Bass, I’m not sure what your point is. The method you suggest inadvertently and unnecessarily effects the default behaviour of Bootstrap row nesting. I can’t see why this new behaviour would be desirable? It wasn’t asked for in the question. – ElwoodP Jul 03 '14 at 08:30
  • 5
    zeroing .row's margins defeats the whole bs3 grid system indeed, it's not advisable to proceed that way. – DrLightman Dec 16 '14 at 15:17
  • What do you mean by 'sub grids's and why should they not be wrapped in a container class? – Agent Zebra Jul 15 '15 at 04:46
  • @DrLightman do you ever find occasion to alter the row or column margins? – Agent Zebra Jul 15 '15 at 04:47
11

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/

ElwoodP
  • 416
  • 3
  • 16
11

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>
Zod
  • 111
  • 1
  • 2
  • Can you explain that css declaration? the [class*='col-'] part of it? – Agent Zebra Jul 15 '15 at 04:49
  • The class declaration is any class, "no-gutter", with a direct descendant that has a class that begins with, "col-". This will work for any of Bootstrap's col- layout classes. – ssamuel Jul 16 '15 at 14:00
  • 1
    I just stumbeled over this syntax the first time, it is nicely explained here: http://stackoverflow.com/questions/3338680/is-there-a-css-selector-by-class-prefix – Andreas Sep 20 '15 at 15:33
  • @ssamuel: It's actually any direct descendant element with a class attribute containing "col-", not only containing classes starting with "col-". So "aclass nocol-1 anotherclass" would also match this selector. – Luke Stevenson Nov 09 '16 at 05:01
  • I like this answer, because it's explicit. – Jan Kalfus Dec 13 '17 at 12:02
4

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>
Mohammad Dayeh
  • 299
  • 3
  • 7
  • +1 for the size flexibility but for some reason the nested rule [class*="col-"] needed to be moved out... – RafaSashi Sep 25 '19 at 03:44
3

I've been stuck with this problem, my solution was creating a mixin which allows me to specify in SCSS, the actual gutter size I want ...

Solution: 1) 

@mixin add-gutter($size) {
    margin-right: -$size;
    margin-left: -$size;

    > [class*="col-"] {
        padding-right: $size;
        padding-left: $size;
    }
}



.that-special-row{
    @include add-gutter(7px);
}

And to use it...

<div class="row that-special-row"></div>

The actual solution came about from this issue mentionned on github, which I believe addresses the same problem.

Solution: 2)

Another solution, would be simply to create your custom CSS class

.small-gutters {
    margin-right: -10px;
    margin-left: -10px;
    > [class*="col-"] {
      padding-right: 10px;
      padding-left: 10px;
    }
  }

Hope that helps!

etiennejcharles
  • 359
  • 2
  • 10
2

Facing this problem, I made the following addition to my css stylesheet:

#mainContent .container {
    padding-left:16px;
    padding-right:16px;
}
  #mainContent .row {
    margin-left: -8px;
    margin-right: -8px;
}

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

This overrides the default bootstrap styling and makes the left and right sides and the gutter equal width.

Peter
  • 171
  • 2
0

@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.

Michael Yaeger
  • 756
  • 12
  • 32
0

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.

Flyke
  • 347
  • 3
  • 5
0

Bootstrap 3 introduced row-no-gutters in v3.4.0

https://getbootstrap.com/docs/3.4/css/#grid-remove-gutters

You could make a row without gutters, and have a row with gutters inside it for the parts you do want to have a gutter.

dyve
  • 5,893
  • 2
  • 30
  • 44
0

I tried several of the options here. For all that I tried, the spacing was uneven, or was even but when I shrank the window width enough for the subviews to stack, there was no space between stacked views.

Here is what worked for me. 

.col-sm-12 { 
  margin-bottom: 2em;
}

<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <div class="col-sm-12">

            </div>
        </div>
        <div class="col-sm-6">
            <div class="col-sm-12">

            </div>
        </div>
    </div>
</div>
ScottyBlades
  • 12,189
  • 5
  • 77
  • 85