add basic vertical button group support

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;

docs/components.html

@@ -263,6 +263,30 @@
 </div>
 </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>
 

docs/templates/pages/components.mustache

@@ -186,6 +186,30 @@
 </div>
 </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>
 

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);
+}