Add a "row without gutters" class

[IamManchanda]

There are many instances when u want the grid to don't have the gutters in it .
As it just take small 8-9 lines of code then why not

.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;
} 

The SCSS/Less Version of the same

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

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

The scss-lint version

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

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

Will be great if this can be added in v4 ?

[cvrebert]

New features are no longer being allowed into v3.

[cvrebert]

Duplicate of #15180, although that was only for v3.

[IamManchanda]

Pardon that ,,, but can it be added to v4 ..
I am using this no gutter class whenever needed in my official projects from quite some time now and can tell you its a very useful method !!!
Will be a good addition for v4 if not great!

On the duplication thing , well there is not one but there are many requests for the same
which means people wants it then why not !

[kevinruscoe]

I think that's the point of sass. Just set the padding to 0 and recompile.

[RyanZim]

Perhaps you could use the existing .p-x-0 & .m-x-0.

[silvereh]

I would find it super useful as well. I never thought of doing it before and created instead no-margin and no-padding classes to override the usual row behavior.

Looking at the structure of the sass files of v4, to add it should look like this:

• in scss/mixins/_grid-framework.scss:
  line 6, put gutter as 1st parameter in

@mixin make-grid-columns()

• in scss/_grid.scss:
  change row declaration to:

@if $enable-grid-classes {
  .row {
    @include make-row();
  }
  .row.no-gutters {
    @include make-row(0);
    & > {
      @include make-grid-columns(0);
    }
  }
}

[cvrebert]

CC: @mdo for feedback

[IamManchanda]

@mdo @cvrebert
Just wanna say that I am is using this no-gutters from around a year and this works like wonders and can be a good feature if its gets added up for Bootstrap 4.

[spdpiyush]

Waiting For The V4

[IamManchanda]

@silvereh - I am not very good in sass ( at the moment ) ... so can you please do a pull request for the same

Update (21 Mar, 2017): Now I am good in sass/scss. 😈

[silvereh]

@IamManchanda
OK, I'll try. Though it's my first open source contribution and I'm not too confident with it so it might take me a bit of time.

[IamManchanda]

@silvereh
You can try this Tutorial for the same

[garygreen]

+1 this really should be built into bootstrap. At the moment you cannot use the grid system without adding gutters (except with the .no-gutter class snippet as posted above). Would be nice to see this baked in

[SimonDegraeve]

I think the specificity of .no-gutters is not high enough. It get overwritten by the margin in the media queries.

The margin properties of .no-gutters should be marked as important or the selector should be .row.no-gutters.

[IamManchanda]

@SimonDegraeve if you have to ask me, i will go with .row.no-gutters as using !important is not the best option in this or infact many specific scenario