add example of multiple add-ons to docs

diff --git a/docs/components/input-group.md b/docs/components/input-group.md
index 841ebb2d5fd592f61cda5ed1686cd626c8f754e0..36c11c7d0248ad80f57875456bce6ebbc09e94eb 100644 (file)
--- 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.