Document how to make utilities responsive using the API (#34062)

1 files changed, 51 insertions, 0 deletions

diff --git a/site/content/docs/5.0/utilities/api.md b/site/content/docs/5.0/utilities/api.md
index 6610f9ee0..ba0c6a984 100644
--- a/site/content/docs/5.0/utilities/api.md
+++ b/site/content/docs/5.0/utilities/api.md
@@ -289,6 +289,57 @@ $utilities: map-merge(
 );
 ```
 
+#### Enable responsive
+
+You can enable responsive classes for an existing set of utilities that are not currently responsive by default. For example, to make the `border` classes responsive:
+
+```scss
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/utilities";
+
+$utilities: map-merge(
+  $utilities, (
+    "border": map-merge(
+      map-get($utilities, "border"),
+      ( responsive: true ),
+    ),
+  )
+);
+```
+
+This will now generate responsive variations of `.border` and `.border-0` for each breakpoint. Your generated CSS will look like this:
+
+```css
+.border { ... }
+.border-0 { ... }
+
+@media (min-width: 576px) {
+  .border-sm { ... }
+  .border-sm-0 { ... }
+}
+
+@media (min-width: 768px) {
+  .border-md { ... }
+  .border-md-0 { ... }
+}
+
+@media (min-width: 992px) {
+  .border-lg { ... }
+  .border-lg-0 { ... }
+}
+
+@media (min-width: 1200px) {
+  .border-xl { ... }
+  .border-xl-0 { ... }
+}
+
+@media (min-width: 1400px) {
+  .border-xxl { ... }
+  .border-xxl-0 { ... }
+}
+```
+
 #### Rename utilities
 
 Missing v4 utilities, or used to another naming convention? The utilities API can be used to override the resulting `class` of a given utility—for example, to rename `.ms-*` utilities to oldish `.ml-*`: