Recently I had a need to have a default grid in Bootstrap, but also on the homepage I needed to have 4 boxes that butted right up against each other. I came up with a handy .no-gutters class, which has some pretty basic CSS, that you apply to your .row tag holding your columns.

Regular Bootstrap version below (with kittens!):

See the Pen chmav by Julien Melissas (@JulienMelissas) on CodePen.0

No gutters:

Now here’s our code for the .no-gutters class:

.row.no-gutters {
  margin-right: 0;
  margin-left: 0;
}
.row.no-gutters > [class^="col-"],
.row.no-gutters > [class*=" col-"] {
  padding-right: 0;
  padding-left: 0;
}

You’ll just want to copy that into your stylesheet and then use the .no-gutters class on your .row div like so:

<div class="row no-gutters">
  <div class="col-xs-6 col-sm-3 kitten-box">
    <img src="http://placekitten.com/g/600" alt="kittens" />
  </div>
  ...
</div>

And a working example:

See the Pen kKqfD by Julien Melissas (@JulienMelissas) on CodePen.

So that’s it. Super Simple, super easy to use. Enjoy!

Update:

In response to a comment below asking about how to take these no-gutters from edge to edge, I made another example, without the container class. Check it out:

0

Update 2:

The other day when adding this code to another project I realized that it effected every column inside a row with the .no-gutters class, which could be bad. I just updated all of the code in the post to include a > so that it only effects the columns directly beneath a row.

Update 3: CSS Preprocessors

For those who want preprocessor support, the regular code above will work, but in case you want the shortened version the following should work in both Less and Sass (Scss style):

.row.no-gutters {
  margin-right: 0;
  margin-left: 0;

  & > [class^="col-"],
  & > [class*=" col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

Note: according to Julien’s comment below (not me), SCSS users don’t need the ampersands.

(Less codepen link)

Update 4:

Bootstrap now includes documentation on the .no-gutters class by default (looks pretty similar to my solution, huh? 😉): https://getbootstrap.com/docs/4.0/layout/grid/#no-gutters

Someone put a cool Bootstrap cheat sheet together here, which mentions the .no-gutters class: https://websitesetup.org/bootstrap-cheat-sheet/