From: Mark Otto <markdotto@gmail.com>
Date: Mon, 8 Feb 2016 07:48:47 +0000 (-0800)
Subject: add example of multiple add-ons to docs
X-Git-Tag: v4.0.0-alpha.3~267
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=9c3ba540b432f4fc0249c37766d165adfa5df76d;p=thirdparty%2Fbootstrap.git

add example of multiple add-ons to docs
---

diff --git a/docs/components/input-group.md b/docs/components/input-group.md
index 841ebb2d5f..36c11c7d02 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.