@@ -239,6 +239,28 @@ There are also responsive `.order-first` and `.order-last` classes that change t
{{< /example >}}
+If you need more `.order-*` classes, you can add new ones by modifying our `$utilities` Sass map. [Read our Sass maps and loops docs]({{< docsref "/customize/sass#maps-and-loops" >}}) or [our Modify utilities docs]({{< docsref "/utilities/api#modify-utilities" >}}) for details.
+
+```scss
+$utilities: map-merge(
+ $utilities,
+ (
+ "order": map-merge(
+ map-get($utilities, "order"),
+ (
+ values: map-merge(
+ map-get(map-get($utilities, "order"), "values"),
+ (
+ 6: 6, // Add a new `.order-{breakpoint}-6` utility
+ last: 7 // Change the `.order-{breakpoint}-last` utility to use the next number
+ )
+ ),
+ ),
+ ),
+ )
+);
+```
+
### Offsetting columns
You can offset grid columns in two ways: our responsive `.offset-` grid classes and our [margin utilities]({{< docsref "/utilities/spacing" >}}). Grid classes are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable.
diff --git a/site/content/docs/5.3/utilities/spacing.md b/site/content/docs/5.3/utilities/spacing.md
index 2562b8d43e..3aa9a8e338 100644
--- a/site/content/docs/5.3/utilities/spacing.md
+++ b/site/content/docs/5.3/utilities/spacing.md
@@ -103,11 +103,11 @@ The syntax is nearly the same as the default, positive margin utilities, but wit
When using `display: grid` or `display: flex`, you can make use of `gap` utilities on the parent element. This can save on having to add margin utilities to individual children of a grid or flex container. Gap utilities are responsive by default, and are generated via our utilities API, based on the `$spacers` Sass map.
{{< example class="bd-example-cssgrid" >}}
-
-
Grid item 1
-
Grid item 2
-
Grid item 3
-
Grid item 4
+
+
Grid item 1
+
Grid item 2
+
Grid item 3
+
Grid item 4
{{< /example >}}
@@ -118,11 +118,11 @@ Support includes responsive options for all of Bootstrap's grid breakpoints, as
`row-gap` sets the vertical space between children items in the specified container.
{{< example class="bd-example-cssgrid" >}}
-
-
Grid item 1
-
Grid item 2
-
Grid item 3
-
Grid item 4
+
+
Grid item 1
+
Grid item 2
+
Grid item 3
+
Grid item 4
{{< /example >}}
@@ -131,11 +131,11 @@ Support includes responsive options for all of Bootstrap's grid breakpoints, as
`column-gap` sets the horizontal space between children items in the specified container.
{{< example class="bd-example-cssgrid" >}}
-
-
Grid item 1
-
Grid item 2
-
Grid item 3
-
Grid item 4
+
+
Grid item 1
+
Grid item 2
+
Grid item 3
+
Grid item 4
{{< /example >}}