Document input group wrapping behavior and override via utility class

Fixes #25409

1 files changed, 14 insertions, 0 deletions

diff --git a/site/docs/4.1/components/input-group.md b/site/docs/4.1/components/input-group.md
index 0e639acd6..cdbfa794a 100644
--- 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.