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]

2 files changed, 3 insertions, 0 deletions

diff --git a/docs/components/utilities.md b/docs/components/utilities.md
index 7add31309..96c84b961 100644
--- 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 a5bd67369..82ef6f963 100644
--- 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;