aboutsummaryrefslogtreecommitdiff
path: root/docs
diff options
context:
space:
mode:
Diffstat (limited to 'docs')
-rw-r--r--docs/components/input-group.md37
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.