No way to restore the default 30px gutter when using negative margin class

[ysds]

The new negative margin classes (#26825) allow to change gutters width in responsive. But there is no way to restore the default 30px, since spacing classes are based on rem (16px). I think that this is not a problem, but what do you think?

[ysds]

For example, when we want narrow gutters for mobile screen, we may write as:

<!-- 16px gutter (8px * 2) -->
<div class="row mx-n2">
  <div class="col px-2">Column</div>
  <div class="col px-2">Column</div>
</div>

But, there is no way to reset to the default 30px by responsive. It is possible to make it 32px with the following code, but it is not perfect:

<!-- 16px gutter (8px * 2) -->
<!-- ≥768px: 32px gutter (16px * 2) -->
<div class="row mx-n2 mx-md-n3">
  <div class="col px-2 px-md-3">Column</div>
  <div class="col px-2 px-md-3">Column</div>
</div>

[XhmikosR]

/CC @MartijnCuppens

[MartijnCuppens]

TLDR: adding extra utility classes will generate a lot of css, I don't know if it's worth adding them for this scenario.

Hmm, this is not a simple one. First thing that comes to my mind is to add 2 extra spacers, something like this:

$spacers: map-merge(
  (
    0: 0,
    1: ($spacer * .25),
    2: ($spacer * .5),
    3: $spacer,
    4: ($spacer * 1.5),
    5: ($spacer * 3),
    grid-gutter: $grid-gutter-width,
    half-grid-gutter: ($grid-gutter-width / 2),
  ),
  $spacers
);

But as expected this adds a lot of css:

Bundlesize at this moment:

 PASS  ./dist/css/bootstrap-grid.css: 6.73KB < maxSize 7KB gzip 
 PASS  ./dist/css/bootstrap-grid.min.css: 5.91KB < maxSize 6KB gzip 
 PASS  ./dist/css/bootstrap.css: 23.44KB < maxSize 25KB gzip 
 PASS  ./dist/css/bootstrap.min.css: 21.51KB < maxSize 22KB gzip 

Bundlesize with suggested $spacers:

 FAIL  ./dist/css/bootstrap-grid.css: 7.74KB > maxSize 7KB gzip 
 FAIL  ./dist/css/bootstrap-grid.min.css: 6.84KB > maxSize 6KB gzip
 PASS  ./dist/css/bootstrap.css: 24.56KB < maxSize 25KB gzip 
 FAIL  ./dist/css/bootstrap.min.css: 22.52KB > maxSize 22KB gzip 

Bundlesize with only half-grid-gutter added to $spacers:

 FAIL  ./dist/css/bootstrap-grid.css: 7.25KB > maxSize 7KB gzip 
 FAIL  ./dist/css/bootstrap-grid.min.css: 6.4KB > maxSize 6KB gzip 
 PASS  ./dist/css/bootstrap.css: 24.04KB < maxSize 25KB gzip 
 FAIL  ./dist/css/bootstrap.min.css: 22.04KB > maxSize 22KB gzip

Bundlesize with only half-grid-gutter added to $spacers, but abbreviated as hg (so .mb-hg ect classes are generated):

 FAIL  ./dist/css/bootstrap-grid.css: 7.2KB > maxSize 7KB gzip 
 FAIL  ./dist/css/bootstrap-grid.min.css: 6.36KB > maxSize 6KB gzip
 PASS  ./dist/css/bootstrap.css: 23.98KB < maxSize 25KB gzip 
 PASS  ./dist/css/bootstrap.min.css: 22KB < maxSize 22KB gzip

I personally always override the $spacers map and make sure one spacer equals the value of the grid gutter (to add bottom margins in grids) and one class equals the half of the grid gutter (to achieve what ysds mentions in this ticket). For the rest I use spacers that are very specific for each project (these spacers can be a lot bigger, like 80px for margins between sections).

Changing the default values of the $spacers map now won't be a good idea, but maybe it's something to consider for v5?

@ysds, do you have any suggestions yourself how we could handle this?

[ysds]

I changed the $grid-gutter-width to 16px or 1rem in my project. We can solve this issue by customizing SCSS like this, I don't think this is a "problem". But, since the document mentions about responsive gutters, I think it is better to show how to address this issue.

Plus, the closed issues(#24283, #23999 and more) and the doc says: "Use px instead of rem". I am concerned about responsive gutter width is inconsistent with that.

Why don't we think again about the unit of gutters?

[alejandroiglesias]

I do think, in my humble opinion, that moving forward to using 16px instead of 15px for each side (giving a gutter of 32px) allows for more flexibility in terms of playing with halving the values and avoiding decimal values as a result. I do vote for 16px/32px gutters. That being said, I don't know if it can be released in v4 (because of compatibility with existing projects).

[hassanbinsafdar]

will bootstrap 5 use display grid