Document input group wrapping behavior and override via utility class

Fixes #25409

diff --git a/site/docs/4.1/components/input-group.md b/site/docs/4.1/components/input-group.md
index 0e639acd6eb408982552a4d9900d7cef39aacefd..cdbfa794a69a5833befa2be69607e5ee7cd27120 100644 (file)
--- a/site/docs/4.1/components/input-group.md
+++ b/site/docs/4.1/components/input-group.md
@@ -52,6 +52,20 @@ Place one add-on or button on either side of an input. You may also place one on
 {% endcapture %}
 {% include example.html content=example %}
 
+## Wrapping
+
+Input groups wrap by default via `flex-wrap: wrap` in order to accommodate custom form field validation within an input group. You may disable this with `.flex-nowrap`.
+
+{% capture example %}
+<div class="input-group flex-nowrap">
+  <div class="input-group-prepend">
+    <span class="input-group-text" id="addon-wrapping">@</span>
+  </div>
+  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping">
+</div>
+{% endcapture %}
+{% include example.html content=example %}
+
 ## Sizing
 
 Add the relative form sizing classes to the `.input-group` itself and contents within will automatically resize—no need for repeating the form control size classes on each element.