From: Mark Otto <markdotto@gmail.com>
Date: Tue, 27 Dec 2016 22:37:17 +0000 (-0800)
Subject: follow up to the fix for #20506 with some docs examples of input groups in button... 
X-Git-Tag: v4.0.0-alpha.6~135
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=a28f1199439b2ef33db3d387ab57df99b347b7c6;p=thirdparty%2Fbootstrap.git

follow up to the fix for #20506 with some docs examples of input groups in button toolbars
---

diff --git a/docs/components/button-group.md b/docs/components/button-group.md
index f4c164749c..59a18e2627 100644
--- a/docs/components/button-group.md
+++ b/docs/components/button-group.md
@@ -47,6 +47,36 @@ Combine sets of button groups into button toolbars for more complex components.
 </div>
 {% endexample %}
 
+Feel free to mix input groups with button groups in your toolbars. Similar to the example above, you'll likely need some utilities though to space things properly.
+
+{% example html %}
+<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
+  <div class="btn-group mr-2" role="group" aria-label="First group">
+    <button type="button" class="btn btn-secondary">1</button>
+    <button type="button" class="btn btn-secondary">2</button>
+    <button type="button" class="btn btn-secondary">3</button>
+    <button type="button" class="btn btn-secondary">4</button>
+  </div>
+  <div class="input-group">
+    <span class="input-group-addon" id="btnGroupAddon">@</span>
+    <input type="text" class="form-control" placeholder="Input group example" aria-describedby="btnGroupAddon">
+  </div>
+</div>
+
+<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
+  <div class="btn-group" role="group" aria-label="First group">
+    <button type="button" class="btn btn-secondary">1</button>
+    <button type="button" class="btn btn-secondary">2</button>
+    <button type="button" class="btn btn-secondary">3</button>
+    <button type="button" class="btn btn-secondary">4</button>
+  </div>
+  <div class="input-group">
+    <span class="input-group-addon" id="btnGroupAddon2">@</span>
+    <input type="text" class="form-control" placeholder="Input group example" aria-describedby="btnGroupAddon2">
+  </div>
+</div>
+{% endexample %}
+
 ## Sizing
 
 Instead of applying button sizing classes to every button in a group, just add `.btn-group-*` to each `.btn-group`, including each one when nesting multiple groups.