Add a "row without gutters" class

Question

Add a "row without gutters" class

Closed this issue 8 years ago · 15 comments

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 ?

Answer 1 · 2016-02-07T08:08:10.000Z

New features are no longer being allowed into v3.

Answer 2 · 2016-02-07T08:10:13.000Z

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

Answer 3 · 2016-02-07T09:54:43.000Z

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 !

Answer 4 · 2016-02-09T10:57:04.000Z

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

Answer 5 · 2016-05-03T21:58:03.000Z

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

Answer 6 · 2016-08-17T20:42:36.000Z

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

Answer 7 · 2016-08-17T21:20:48.000Z

CC: @mdo for feedback

Answer 8 · 2016-09-24T14:53:30.000Z

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

Answer 9 · 2016-09-24T17:44:48.000Z

Waiting For The V4

Answer 10 · 2016-11-01T11:04:33.000Z

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

Answer 11 · 2016-11-02T16:53:35.000Z

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

Answer 12 · 2016-11-04T08:04:13.000Z

@silvereh
You can try this Tutorial for the same

Answer 13 · 2016-11-18T15:22:37.000Z

+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

Answer 14 · 2016-12-22T05:02:22.000Z

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.

Answer 15 · 2016-12-24T17:11:18.000Z

@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