diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 7ef011cec6..0d5a5a6eb3 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -3388,6 +3388,7 @@ input[type="submit"].btn.btn-mini {
   *margin-left: .3em;
   font-size: 0;
   white-space: nowrap;
+  vertical-align: middle;
 }
 
 .btn-group:first-child {
diff --git a/less/button-groups.less b/less/button-groups.less
index 77496d6ab8..7bd639aac4 100644
--- a/less/button-groups.less
+++ b/less/button-groups.less
@@ -7,6 +7,7 @@
 .btn-group {
   position: relative;
   font-size: 0; // remove as part 1 of font-size inline-block hack
+  vertical-align: middle; // match .btn alignment given font-size hack above
   white-space: nowrap; // prevent buttons from wrapping when in tight spaces (e.g., the table on the tests page)
   .ie7-restore-left-whitespace();
 }
diff --git a/less/tests/css-tests.html b/less/tests/css-tests.html
index c922f07db3..1ab21f1bf3 100644
--- a/less/tests/css-tests.html
+++ b/less/tests/css-tests.html
@@ -597,6 +597,23 @@
   <h1>Forms</h1>
 </div>
 
+<h4>Buttons and button groups</h4>
+<form class="form-inline">
+  <button class="btn btn-success">Save</button>
+  <button class="btn btn-info">Add new</button>
+  <div class="btn-group">
+    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
+      <i class="icon-user"></i> User
+      <span class="caret"></span>
+    </a>
+    <ul class="dropdown-menu">
+      <li><a href="#">Profile</a></li>
+      <li class="divider"></li>
+      <li><a href="#">Sign Out</a></li>
+    </ul>
+  </div>
+</form>
+
 <h4>Horizontal form errors</h4>
 <form class="form-horizontal">
   <div class="control-group error">