In Bootstrap 4, how to change inner $grid-gutter-width depending to breakpoints?
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
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;
}
}