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

Answer 3

Same as Arajay's answer but with some automation that gives a possibility to choose a specific gutter width for every breakpoint:

/* Specify your own gutters for every breakpoint. I use media-breakpoint-up so to avoid a default width it's better to always include "xs", and then you can do whatever you want */
$grid-gutter-widths: (
  xs: 10px,
  /* "sm" takes the same width as "xs" automatically */
  md: 20px,
  lg: 30px
);

/* You don't need to change anything below */
@each $grid-breakpoint, $grid-gutter-width in $grid-gutter-widths {
  @include media-breakpoint-up($grid-breakpoint) {
    $grid-gutter-half-width: $grid-gutter-width / 2;
    .row:not(.no-gutters) {
      margin-right: -$grid-gutter-half-width;
      margin-left: -$grid-gutter-half-width;
    }
    .row:not(.no-gutters) > .col,
    .row:not(.no-gutters) > [class*="col-"] {
      padding-right: $grid-gutter-half-width;
      padding-left: $grid-gutter-half-width;
    }
  }
}

I'd recommend to adjust $container-max-widths afterwards, because there is a chance, that it may change original width a bit.

UPD: I've done a small npm package with the solution. Also you can find a pretty detailed doc there: https://github.com/DZakh/Custom-gutters-bootstrap-plugin

Answer 4

The way Bootstrap documentation intends for this to be done is by setting your minimum gutter width size on the $grid-gutter-width variable and then using the margin/padding helper classes all the way up for larger breakpoints (mobile first).

<div class="row mx-md-n5">
  <div class="col py-3 px-md-5 border bg-light">Custom column padding</div>
  <div class="col py-3 px-md-5 border bg-light">Custom column padding</div>
</div>

In the example they are setting a negative x margin on the row, then setting the same amount of x padding on each column. This will get fairly verbose and difficult to read if you are setting a different width for every breakpoint. I recommend using my alternate answer above.

Answer 5

Configurable map of gutter sizes across breakpoints:

_settings.scss

// Grid columns

// Custom map of gutter widths across breakpoints.
$grid-gutter-widths: (
  xs: 16px,
  md: 20px,
);
// Default Bootstrap gutter width variable.
$grid-gutter-width: map-get($grid-gutter-widths, md);

styles.scss

@import './settings';
@import 'node_modules/bootstrap/scss/bootstrap';

.container {
  @each $breakpoint, $gutter in $grid-gutter-widths {
    @include media-breakpoint-up($breakpoint) {
      @include make-container($gutter);
    }
  }
}

.row {
  @each $breakpoint, $gutter in $grid-gutter-widths {
    @include media-breakpoint-up($breakpoint) {
      @include make-row($gutter);
    }
  }

  .row > .col,
  .row > [class*='col-'] {
    @each $breakpoint, $gutter in $grid-gutter-widths {
      @include media-breakpoint-up($breakpoint) {
        @include make-col-ready($gutter);
      }
    }
  }
}

Answer 6

I've just made a package that allows the customisation of the gutters and container margins per break-point: https://github.com/BenceSzalai/bootstrap-responsive-grid

It can be an effective way for those interested in a pure SCSS solution as it changes the way Bootstrap CSS is generated in the first place rather than adding overrides after the already generated CSS. It is ideal to use in a build chain for example with Webpack compiling your css from npm packages.