From: Mark Otto <markdotto@gmail.com>
Date: Mon, 17 Sep 2018 19:02:56 +0000 (-0700)
Subject: Document input group wrapping behavior and override via utility class
X-Git-Tag: v4.2.0~307
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=029f92c5e56e6f2a21ec2f217b683273b80b91b7;p=thirdparty%2Fbootstrap.git

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 0e639acd6e..cdbfa794a6 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.