fixes #9632: button spacing in narrow viewports

assets/css/docs.css

@@ -438,10 +438,14 @@ body {
 }
 
 /* Buttons */
-.bs-example > .btn {
+.bs-example > .btn,
+.bs-example > .btn-group {
   margin-top: 5px;
   margin-bottom: 5px;
 }
+.bs-example > .btn-toolbar + .btn-toolbar {
+  margin-top: 10px;
+}
 
 /* Forms */
 .bs-example-control-sizing select,
@@ -536,6 +540,10 @@ body {
 .bs-example-tooltips {
   text-align: center;
 }
+.bs-example-tooltips > .btn {
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
 
 /* Popovers */
 .bs-example-popover {

components.html

@@ -160,34 +160,40 @@ base_url: "../"
     <h3 id="btn-groups-sizing">Button group sizing</h3>
     <p>Instead of applying button sizing classes to every button in a group, just add <code>.btn-group-*</code> to the <code>.btn-group</code>.</p>
     <div class="bs-example">
+      <div class="btn-toolbar">
         <div class="btn-group btn-group-lg">
           <button type="button" class="btn btn-default">Left</button>
           <button type="button" class="btn btn-default">Middle</button>
           <button type="button" class="btn btn-default">Right</button>
         </div>
+      </div>
+      <div class="btn-toolbar">
         <div class="btn-group">
           <button type="button" class="btn btn-default">Left</button>
           <button type="button" class="btn btn-default">Middle</button>
           <button type="button" class="btn btn-default">Right</button>
         </div>
+      </div>
+      <div class="btn-toolbar">
         <div class="btn-group btn-group-sm">
           <button type="button" class="btn btn-default">Left</button>
           <button type="button" class="btn btn-default">Middle</button>
           <button type="button" class="btn btn-default">Right</button>
         </div>
+      </div>
+      <div class="btn-toolbar">
         <div class="btn-group btn-group-xs">
           <button type="button" class="btn btn-default">Left</button>
           <button type="button" class="btn btn-default">Middle</button>
           <button type="button" class="btn btn-default">Right</button>
         </div>
       </div>
+    </div>
 {% highlight html %}
-<div class="btn-toolbar">
-  <div class="btn-group btn-group-lg">...</div>
-  <div class="btn-group">...</div>
-  <div class="btn-group btn-group-sm">...</div>
-  <div class="btn-group btn-group-xs">...</div>
-</div>
+<div class="btn-group btn-group-lg">...</div>
+<div class="btn-group">...</div>
+<div class="btn-group btn-group-sm">...</div>
+<div class="btn-group btn-group-xs">...</div>
 {% endhighlight %}
 
     <h3 id="btn-groups-nested">Nested button groups</h3>
@@ -324,7 +330,6 @@ base_url: "../"
     <h3 id="btn-dropdowns-single">Single button dropdowns</h3>
     <p>Turn a button into a dropdown toggle with some basic markup changes.</p>
     <div class="bs-example">
-      <div class="btn-toolbar" style="margin-bottom: 10px;">
       <div class="btn-group">
         <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default <span class="caret"></span></button>
         <ul class="dropdown-menu">
@@ -386,7 +391,6 @@ base_url: "../"
         </ul>
       </div><!-- /btn-group -->
     </div>
-    </div>
 {% highlight html %}
 <!-- Single button -->
 <div class="btn-group">
@@ -406,7 +410,6 @@ base_url: "../"
     <h3 id="btn-dropdowns-split">Split button dropdowns</h3>
     <p>Similarly, create split button dropdowns with the same markup changes, only with a separate button.</p>
     <div class="bs-example">
-      <div class="btn-toolbar" style="margin: 0;">
       <div class="btn-group">
         <button type="button" class="btn btn-default">Default</button>
         <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
@@ -473,7 +476,6 @@ base_url: "../"
           <li><a href="#">Separated link</a></li>
         </ul>
       </div><!-- /btn-group -->
-      </div><!-- /btn-toolbar -->
     </div>
 {% highlight html %}
 <!-- Split button -->
@@ -495,7 +497,7 @@ base_url: "../"
     <h3 id="btn-dropdowns-sizes">Works with all button sizes</h3>
     <p>Button dropdowns work with buttons of all sizes.</p>
     <div class="bs-example">
-      <div class="btn-toolbar" style="margin: 0;">
+      <div class="btn-toolbar">
         <div class="btn-group">
           <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
             Large button <span class="caret"></span>
@@ -508,6 +510,8 @@ base_url: "../"
             <li><a href="#">Separated link</a></li>
           </ul>
         </div><!-- /btn-group -->
+      </div><!-- /btn-toolbar -->
+      <div class="btn-toolbar">
         <div class="btn-group">
           <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
             Small button <span class="caret"></span>
@@ -520,6 +524,8 @@ base_url: "../"
             <li><a href="#">Separated link</a></li>
           </ul>
         </div><!-- /btn-group -->
+      </div><!-- /btn-toolbar -->
+      <div class="btn-toolbar">
         <div class="btn-group">
           <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
             Extra small button <span class="caret"></span>