Document the possibility of extending the $spacers map

It's very handy to add another spacer size (e.g. `4`) which can easily be done by extending the map.
Example:
```
$spacers: (
  0: (
    x:   0,
    y:   0
  ),
  1: (
    x:   $spacer-x,
    y:   $spacer-y
  ),
  2: (
    x:   ($spacer-x * 1.5),
    y:   ($spacer-y * 1.5)
  ),
  3: (
    x:   ($spacer-x * 3),
    y:   ($spacer-y * 3)
  ),
  4: (
    x:   ($spacer-x * 5),
    y:   ($spacer-y * 5)
  )
);
```

Closes #18706
[skip sauce]

diff --git a/docs/components/utilities.md b/docs/components/utilities.md
index 7add31309b7a6e0b61cf94bbb370302c25222882..96c84b961f958cbf2b2efda6b39295c6a92cd98e 100644 (file)
--- a/docs/components/utilities.md
+++ b/docs/components/utilities.md
@@ -39,6 +39,8 @@ Where *size* is one of:
 * `2` - (by default) for classes that set the `margin` or `padding` to `$spacer-x * 1.5` or `$spacer-y * 1.5`
 * `3` - (by default) for classes that set the `margin` or `padding` to `$spacer-x * 3` or `$spacer-y * 3`
 
+(You can add more sizes by adding entries to the `$spacers` Sass map variable.)
+
 Here are some representative examples of these classes:
 
 {% highlight scss %}

diff --git a/scss/_variables.scss b/scss/_variables.scss
index a5bd6736903f53c5ac77a958941d6b4ee4ecae99..82ef6f96309c3eca5fae160d6f8f7a3b1cdabff5 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -69,6 +69,7 @@ $enable-print-styles:       true !default;
 //
 // Control the default styling of most Bootstrap elements by modifying these
 // variables. Mostly focused on spacing.
+// You can add more entries to the $spacers map, should you need more variation.
 
 $spacer:   1rem !default;
 $spacer-x: $spacer !default;