diff options
Diffstat (limited to 'docs/components')
| -rw-r--r-- | docs/components/input-group.md | 37 |
1 files changed, 32 insertions, 5 deletions
diff --git a/docs/components/input-group.md b/docs/components/input-group.md index 841ebb2d5..36c11c7d0 100644 --- a/docs/components/input-group.md +++ b/docs/components/input-group.md @@ -37,6 +37,12 @@ Place one add-on or button on either side of an input. You may also place one on <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)"> <span class="input-group-addon">.00</span> </div> +<br> +<div class="input-group"> + <span class="input-group-addon">$</span> + <span class="input-group-addon">0.00</span> + <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)"> +</div> {% endexample %} ## Sizing @@ -53,11 +59,6 @@ Add the relative form sizing classes to the `.input-group` itself and contents w <span class="input-group-addon" id="sizing-addon2">@</span> <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2"> </div> -<br> -<div class="input-group input-group-sm"> - <span class="input-group-addon" id="sizing-addon3">@</span> - <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3"> -</div> {% endexample %} ## Checkboxes and radio addons @@ -85,6 +86,32 @@ Place any checkbox or radio option within an input group's addon instead of text </div> {% endexample %} +## Multiple addons + +Multiple add-ons are supported and can be mixed with checkbox and radio input versions. + +{% example html %} +<div class="row"> + <div class="col-lg-6"> + <div class="input-group"> + <span class="input-group-addon"> + <input type="checkbox" aria-label="Checkbox for following text input"> + </span> + <span class="input-group-addon">$</span> + <input type="text" class="form-control" aria-label="Text input with checkbox"> + </div> + </div> + <div class="col-lg-6"> + <div class="input-group"> + <span class="input-group-addon">$</span> + <span class="input-group-addon">0.00</span> + <input type="text" class="form-control" aria-label="Text input with radio button"> + </div> + </div> +</div> +{% endexample %} + + ## Button addons Buttons in input groups are a bit different and require one extra level of nesting. Instead of `.input-group-addon`, you'll need to use `.input-group-btn` to wrap the buttons. This is required due to default browser styles that cannot be overridden. |
