Bootstrap: Add new grid gutter options

Created on 30 Jun 2017 · 16Comments · Source: twbs/bootstrap

With #22940 I unshipped the Sass map and code used to loop over those values. It generated the wrong code and isn't the approach I'd like to use moving forward. Looking at .no-gutters, I think this is the method I'd like to use—modifier classes on the row that can be customized by breakpoint.

css feature v4

Source

mdo

👍4 🎉1

All 16 comments

Very Right decision @mdo... Best of luck in your progress dude :+1:

IamManchanda on 4 Jul 2017

Sorry for asking, but is this option will be available in the final release?
BTW keep up the good work!

Tyutyesz on 7 Sep 2017

👍1

Otherwise, please explain how to add custom gutters for mobile devices.
I was searching for a way to have 5px gutter on mobile, 15 on tablet and 30 on desktop (just an example).
What is the right way foreward?

x-christian-romeni on 11 Sep 2017

@x-christian-romeni I made a seperate scss file with custom gutters, but not tested it, so it might brake something. Not sure if it will work, maybe there was a good reason why this feature has been unshipped

 $my-gutters: (
        xs: 5px,
        sm: 5px,
        md: 15px,
        lg: 30px
);
.row.custom-gutter {

  @media (min-width: map-get($grid-breakpoints, lg)) {
    margin-left: map-get($my-gutters, lg) *(-1);
    margin-right: map-get($my-gutters, lg) *(-1);
  }
  @media (min-width: map-get($grid-breakpoints, md)) and (max-width: map-get($grid-breakpoints, lg) - 1px) {
    margin-left: map-get($my-gutters, md) *(-1);
    margin-right: map-get($my-gutters, md) *(-1);
  }
  margin-left: map-get($my-gutters, sm) *(-1);
  margin-right: map-get($my-gutters, sm) *(-1);
}

[class^='col'].custom-gutter,
[class*=' col'].custom-gutter {

  @media (min-width: map-get($grid-breakpoints, lg)) {
    padding-left: map-get($my-gutters, lg);
    padding-right: map-get($my-gutters, lg);
  }
  @media (min-width: map-get($grid-breakpoints, md)) and (max-width: map-get($grid-breakpoints, lg) - 1px) {
    padding-left: map-get($my-gutters, md);
    padding-right: map-get($my-gutters, md);
  }
  padding-left: map-get($my-gutters, sm);
  padding-right: map-get($my-gutters, sm);
}

Tyutyesz on 11 Sep 2017

@Tyutyesz It was removed because the file size was getting too large.

myorangeca on 11 Sep 2017

👎1 👍1

@myorangeca Now I understand! Thanks!

Tyutyesz on 11 Sep 2017

Hi all, thanks for this.

Totally understand it's been removed, however it's still in the documentation. I spent ages trying to work out what the hell was going on!
https://v4-alpha.getbootstrap.com/layout/grid/

Could we remove it? Happy to do it myself if that helps?

Cheers,
Paul