In Bootstrap 4, how to change inner $grid-gutter-width depending to breakpoints?

Question

I'm currently working on Bootstrap4 in SCSS.

I want to change the inner $grid-gutter-width on smartphone only.

According to _grid.scss

$grid-columns: 12 !default; $grid-gutter-width: 30px !default;

On the bootstrap site, it is sait that :

Updated grid sizes, mixins, and variables. Grid gutters now have a Sass map so you can specify specific gutter widths at each breakpoint.

I can't find the map and how it can be done.

Answer 1

This looks like a mistake in the docs. There used to be a map, but it was removed before 4.0.0 was released. However, it would be fairly easy to add this for just xs with SASS. For example 5px on mobile...

@media (min-width: map-get($grid-breakpoints, xs)) and (max-width: map-get($grid-breakpoints, sm)){
    .row > .col,
    .row > [class*="col-"] {
      padding-right: 5px;
      padding-left: 5px;
    }
}

https://www.codeply.com/go/XgynFzTmGv

Answer 2

Same as Zim's answer but with the row fix and using the $grid-gutter-width variable. 10% nicer if you are using a preprocessor.

UPDATE: I added more styling to preserve the functionality of .no-gutters, which was broken before.

// HALF GUTTER WIDTH ON XS
@media (max-width: map-get($grid-breakpoints, sm)){
    .row:not(.no-gutters) {
        margin-right: -$grid-gutter-width / 4;
        margin-left: -$grid-gutter-width / 4;
    }
    .row:not(.no-gutters) > .col,
    .row:not(.no-gutters) > [class*="col-"] {
        padding-right: $grid-gutter-width / 4;
        padding-left: $grid-gutter-width / 4;
    }
}