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