Search code examples
twitter-bootstrapsassbootstrap-4gutter

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

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.

Solution

  • 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