diff options
| -rw-r--r-- | site/docs/4.1/components/input-group.md | 14 |
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. |