Support $grid-gutter-widths for responsive gutter widths

[gloaec]

This is actually a missing feature that appears on the doc:

Variable : $grid-gutter-widths
https://v4-alpha.getbootstrap.com/layout/grid/#variables

This approach aims to define different gutter widths depending on the defined breakpoints.

[houndci-bot]

Expected "margin-right" to come before "margin-left" order/properties-order

[houndci-bot]

Expected "padding-right" to come before "padding-left" order/properties-order

[houndci-bot]

Expected "padding-right" to come before "padding-left" order/properties-order

[gloaec]

I read from other PRs that this feature was removed because it generates to much code (~5k). Maybe there is a way to get less code using instead :

@include media-breakpoint-only($breakpoint, $breakpoints) {
  $gutter: map-get($gutters, $breakpoint);

  [class^='col'],
  [class*=' col'] {
    padding-right: ($gutter / 2);
    padding-left: ($gutter / 2);
  }

  .row {
    margin-right: ($gutter / -2);
    margin-left: ($gutter / -2);
  }
}

[andresgalante]

Hi @gloaec thanks a lot for your contribution.

The reference to the docs you provide is for an alpha release, beta docs are now here:
http://getbootstrap.com/docs/4.0/getting-started/introduction/

As you mention, the responsive gutters were removed here: b013b98

If we want to prosigue with getting them back, it should also be introduce back to the docs

And although I honestly don't think this approach solves the problem, and it's missing how to handle the make- mixns. http://getbootstrap.com/docs/4.0/layout/grid/#mixins I do think that
there is value is having responsive gutters.

[dkozickis]

Seems that @mdo idea is to implement responsive gutter width via implementtion similar to .no-gutters as per this #22944

[hrvojegolcic]

Here in documentation it still stands
"Grid gutters now have a Sass map so you can specify specific gutter widths at each breakpoint."

https://getbootstrap.com/docs/4.0/migration/
https://getbootstrap.com/docs/4.1/migration/

I'd assume this is wrong?

[gloaec]

@hrvojegolcic yup, from my knowledge, responsive gutters were definitely removed. I ended up adding custom sass in my projects (and honestly, since "css flexboxes", there's no real need for the grid system anymore).

I do think that there is value having responsive gutters.

@andresgalante I think it makes sense to a lot of people to have smaller gutters on smaller screens. No hard feelings if the goal is now to have the lightest library, but yeah, the docs need to be updated ;)

Cheers !

[joshwand]

Can someone please update the docs to remove this feature if it's not implemented! Went down a rabbit hole today trying to get this to work :(

[hrvojegolcic]

While the solution from @gloaec works fine I have noticed that this it messes up the .no-gutters class. So in my case this worked:

// Override breakpoints for certain viewport
@include media-breakpoint-up(lg) {
    .container,
    [class^='col'],
    [class*=' col'] {
        padding-right: floor($cust-grid-gutter-width-lg-up / 2);
        padding-left: ceil($cust-grid-gutter-width-lg-up / 2);
    }

    .row {
        margin-right: ceil($cust-grid-gutter-width-lg-up / -2);
        margin-left: floor($cust-grid-gutter-width-lg-up / -2);
    }
}

// FIX for .no-gutters class
// Since we overwrite gutters in each viewports we need to repeat this class here
.no-gutters {
    margin-right: 0;
    margin-left: 0;

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

Another sideaffect is that this would also match classes like .collapse not only .col so be careful

[lucasklaassen]

@hrvojegolcic nice! Here's the mixin version I used from your example:

@mixin responsive-gutter($size, $gutter-width) {
  @include media-breakpoint-up($size) {
    .container,
    [class^='col'],
    [class*=' col'] {
      padding-right: floor($gutter-width / 2);
      padding-left: ceil($gutter-width / 2);
    }

    .row {
      margin-right: ceil($gutter-width / -2);
      margin-left: floor($gutter-width / -2);
    }
  }
}

@include responsive-gutter(xs, 16px);
@include responsive-gutter(sm, 20px);
@include responsive-gutter(md, 28px);

[mdo]

We're skipping on new grid gutters given our newly added negative margins. See #26825.