Fixes #7511: add support for nested button groups so you can use dropdowns in your button groups

3 files changed, 56 insertions, 0 deletions

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 131b0c6fa..e1260c7d5 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -3889,6 +3889,25 @@ button.close {
   border-bottom-right-radius: 6px;
 }
 
+.btn-group > .btn-group {
+  float: left;
+}
+
+.btn-group > .btn-group > .btn {
+  border-radius: 0;
+}
+
+.btn-group > .btn-group:last-child > .btn {
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+
+.btn-group > .btn-group:first-child > .btn {
+  margin-left: 0;
+  border-bottom-left-radius: 4px;
+  border-top-left-radius: 4px;
+}
+
 .btn-group .dropdown-toggle:active,
 .btn-group.open .dropdown-toggle {
   outline: 0;
diff --git a/docs/docs.html b/docs/docs.html
index cd90b1510..346725215 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -2919,6 +2919,28 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </div>
 {% endhighlight %}
 
+    <h3 id="btn-groups-nested">Nested button groups</h3>
+    <p>Place buttons groups within button groups when you want dropdown menus mixed with a series of buttons.</p>
+    <div class="bs-docs-example">
+      <div class="btn-group">
+        <button type="button" class="btn">1</button>
+        <button type="button" class="btn">2</button>
+        <button type="button" class="btn">3</button>
+
+        <div class="btn-group">
+          <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
+            Dropdown
+            <span class="caret"></span>
+          </button>
+          <ul class="dropdown-menu">
+            <li><a href="#">Dropdown link</a></li>
+            <li><a href="#">Dropdown link</a></li>
+            <li><a href="#">Dropdown link</a></li>
+           </ul>
+        </div>
+      </div>
+    </div>
+
     <h3 id="btn-groups-vertical">Vertical button groups</h3>
     <p>Make a set of buttons appear vertically stacked rather than horizontally.</p>
     <div class="bs-docs-example">
diff --git a/less/button-groups.less b/less/button-groups.less
index 884b0b272..3a72d90bf 100644
--- a/less/button-groups.less
+++ b/less/button-groups.less
@@ -73,6 +73,21 @@
   .border-right-radius(@border-radius-large);
 }
 
+// Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group)
+.btn-group > .btn-group {
+  float: left;
+}
+.btn-group > .btn-group > .btn {
+  border-radius: 0;
+}
+.btn-group > .btn-group:last-child > .btn {
+  .border-right-radius(@border-radius-base);
+}
+.btn-group > .btn-group:first-child > .btn {
+  margin-left: 0;
+  .border-left-radius(@border-radius-base);
+}
+
 // On active and open, don't show outline
 .btn-group .dropdown-toggle:active,
 .btn-group.open .dropdown-toggle {