From b54264cde0b1e72fbb463e4aa272ed1c2876bd02 Mon Sep 17 00:00:00 2001
From: Mark Otto <markotto@twitter.com>
Date: Tue, 19 Jun 2012 14:42:46 -0700
Subject: [PATCH] add basic vertical button group support

---
 docs/assets/css/bootstrap.css            | 42 ++++++++++++++++++++++++
 docs/components.html                     | 24 ++++++++++++++
 docs/templates/pages/components.mustache | 24 ++++++++++++++
 less/button-groups.less                  | 30 +++++++++++++++++
 4 files changed, 120 insertions(+)

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 3389eb4031..d957e861a3 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -3171,6 +3171,48 @@ input[type="submit"].btn.btn-mini {
   filter: alpha(opacity=75);
 }
 
+.btn-group-vertical {
+  display: inline-block;
+}
+
+.btn-group-vertical .btn {
+  display: block;
+  float: none;
+  width: 100%;
+  margin-left: 0;
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
+}
+
+.btn-group-vertical .btn + .btn {
+  margin-top: -1px;
+}
+
+.btn-group-vertical .btn:first-child {
+  -webkit-border-radius: 4px 4px 0 0;
+     -moz-border-radius: 4px 4px 0 0;
+          border-radius: 4px 4px 0 0;
+}
+
+.btn-group-vertical .btn:last-child {
+  -webkit-border-radius: 0 0 4px 4px;
+     -moz-border-radius: 0 0 4px 4px;
+          border-radius: 0 0 4px 4px;
+}
+
+.btn-group-vertical .btn-large:first-child {
+  -webkit-border-radius: 6px 6px 0 0;
+     -moz-border-radius: 6px 6px 0 0;
+          border-radius: 6px 6px 0 0;
+}
+
+.btn-group-vertical .btn-large:last-child {
+  -webkit-border-radius: 0 0 6px 6px;
+     -moz-border-radius: 0 0 6px 6px;
+          border-radius: 0 0 6px 6px;
+}
+
 .alert {
   padding: 8px 35px 8px 14px;
   margin-bottom: 18px;
diff --git a/docs/components.html b/docs/components.html
index ce931783f4..3b3f5a7830 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -263,6 +263,30 @@
 &lt;/div&gt;
 </pre>
 
+
+  <hr class="bs-docs-separator">
+
+
+  <h2>Vertical button groups</h2>
+  <p>Make a set of buttons appear vertically stacked rather than horizontally.</p>
+  <div class="bs-docs-example">
+    <div class="btn-group btn-group-vertical">
+      <button type="button" class="btn"><i class="icon-align-left"></i></button>
+      <button type="button" class="btn"><i class="icon-align-center"></i></button>
+      <button type="button" class="btn"><i class="icon-align-right"></i></button>
+      <button type="button" class="btn"><i class="icon-align-justify"></i></button>
+    </div>
+  </div>
+<pre class="prettyprint linenums">
+&lt;div class="btn-group btn-group-vertical"&gt;
+  ...
+&lt;/div&gt;
+</pre>
+
+
+  <hr class="bs-docs-separator">
+
+
   <h3>Checkbox and radio flavors</h3>
   <p>Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View <a href="./javascript.html#buttons">the Javascript docs</a> for that.</p>
 
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 1c33073a8e..f3d92dda6b 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -186,6 +186,30 @@
 &lt;/div&gt;
 </pre>
 
+
+  <hr class="bs-docs-separator">
+
+
+  <h2>{{_i}}Vertical button groups{{/i}}</h2>
+  <p>{{_i}}Make a set of buttons appear vertically stacked rather than horizontally.{{/i}}</p>
+  <div class="bs-docs-example">
+    <div class="btn-group btn-group-vertical">
+      <button type="button" class="btn"><i class="icon-align-left"></i></button>
+      <button type="button" class="btn"><i class="icon-align-center"></i></button>
+      <button type="button" class="btn"><i class="icon-align-right"></i></button>
+      <button type="button" class="btn"><i class="icon-align-justify"></i></button>
+    </div>
+  </div>
+<pre class="prettyprint linenums">
+&lt;div class="btn-group btn-group-vertical"&gt;
+  ...
+&lt;/div&gt;
+</pre>
+
+
+  <hr class="bs-docs-separator">
+
+
   <h3>{{_i}}Checkbox and radio flavors{{/i}}</h3>
   <p>{{_i}}Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View <a href="./javascript.html#buttons">the Javascript docs</a> for that.{{/i}}</p>
 
diff --git a/less/button-groups.less b/less/button-groups.less
index 5338c5a450..e3c1de8adf 100644
--- a/less/button-groups.less
+++ b/less/button-groups.less
@@ -189,3 +189,33 @@
   }
 }
 
+
+
+// Vertical button groups
+// ----------------------
+
+.btn-group-vertical {
+  display: inline-block; // makes buttons only take up the width they need
+}
+.btn-group-vertical .btn {
+  display: block;
+  float: none;
+  margin-left: 0;
+  width: 100%;
+  .border-radius(0);
+}
+.btn-group-vertical .btn + .btn {
+  margin-top: -1px;
+}
+.btn-group-vertical .btn:first-child {
+  .border-radius(4px 4px 0 0);
+}
+.btn-group-vertical .btn:last-child {
+  .border-radius(0 0 4px 4px);
+}
+.btn-group-vertical .btn-large:first-child {
+  .border-radius(6px 6px 0 0);
+}
+.btn-group-vertical .btn-large:last-child {
+  .border-radius(0 0 6px 6px);
+}