Separate Buttons examples in Icon examples section and add code snippets

2 files changed, 102 insertions, 30 deletions

diff --git a/docs/base-css.html b/docs/base-css.html
index 1428e38ec..40bfbcf06 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -1770,30 +1770,66 @@ For example, <code>section</code> should be wrapped as inline.
           <p>Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.</p>
 
           <h4>Buttons</h4>
+
+          <h6>Button group in a button toolbar</h6>
           <div class="bs-docs-example">
-            <div class="btn-toolbar" style="margin-bottom: 9px">
+            <div class="btn-toolbar">
               <div class="btn-group">
                 <a class="btn" href="#"><i class="icon-align-left"></i></a>
                 <a class="btn" href="#"><i class="icon-align-center"></i></a>
                 <a class="btn" href="#"><i class="icon-align-right"></i></a>
                 <a class="btn" href="#"><i class="icon-align-justify"></i></a>
               </div>
-              <br><br>
-              <div class="btn-group">
-                <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
-                <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
-                <ul class="dropdown-menu">
-                  <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
-                  <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
-                  <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
-                  <li class="divider"></li>
-                  <li><a href="#"><i class="i"></i> Make admin</a></li>
-                </ul>
-              </div>
-              <br><br>
-              <a class="btn btn-small" href="#"><i class="icon-star"></i></a>
             </div>
           </div>
+<pre class="prettyprint linenums">
+&lt;div class="btn-toolbar"&gt;
+  &lt;div class="btn-group"&gt;
+
+    &lt;a class="btn" href="#"&gt;&lt;i class="icon-align-left"&gt;&lt;/i&gt;&lt;/a&gt;
+    &lt;a class="btn" href="#"&gt;&lt;i class="icon-align-center"&gt;&lt;/i&gt;&lt;/a&gt;
+    &lt;a class="btn" href="#"&gt;&lt;i class="icon-align-right"&gt;&lt;/i&gt;&lt;/a&gt;
+    &lt;a class="btn" href="#"&gt;&lt;i class="icon-align-justify"&gt;&lt;/i&gt;&lt;/a&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+          <h6>Dropdown in a button group</h6>
+          <div class="bs-docs-example">
+            <div class="btn-group">
+              <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
+              <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
+              <ul class="dropdown-menu">
+                <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
+                <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
+                <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
+                <li class="divider"></li>
+                <li><a href="#"><i class="i"></i> Make admin</a></li>
+              </ul>
+            </div>
+          </div>
+<pre class="prettyprint linenums">
+&lt;div class="btn-group"&gt;
+  &lt;a class="btn btn-primary" href="#"&gt;&lt;i class="icon-user icon-white"&gt;&lt;/i&gt; User&lt;/a&gt;
+  &lt;a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"&gt;&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
+  &lt;ul class="dropdown-menu"&gt;
+    &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-pencil"&gt;&lt;/i&gt; Edit&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-trash"&gt;&lt;/i&gt; Delete&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-ban-circle"&gt;&lt;/i&gt; Ban&lt;/a&gt;&lt;/li&gt;
+    &lt;li class="divider"&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="#"&gt;&lt;i class="i"&gt;&lt;/i&gt; Make admin&lt;/a&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;
+</pre>
+
+          <h6>Button</h6>
+          <div class="bs-docs-example">
+            <a class="btn btn-small" href="#"><i class="icon-star"></i></a>
+          </div>
+<pre class="prettyprint linenums">
+&lt;a class="btn btn-small" href="#"&gt;&lt;i class="icon-star"&gt;&lt;/i&gt;&lt;/a&gt;
+</pre>
+
 
           <h4>Navigation</h4>
           <div class="bs-docs-example">
diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index d8af4eaab..e1e14a4a0 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -1707,30 +1707,66 @@
           <p>{{_i}}Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.{{/i}}</p>
 
           <h4>{{_i}}Buttons{{/i}}</h4>
+
+          <h6>{{_i}}Button group in a button toolbar{{/i}}</h6>
           <div class="bs-docs-example">
-            <div class="btn-toolbar" style="margin-bottom: 9px">
+            <div class="btn-toolbar">
               <div class="btn-group">
                 <a class="btn" href="#"><i class="icon-align-left"></i></a>
                 <a class="btn" href="#"><i class="icon-align-center"></i></a>
                 <a class="btn" href="#"><i class="icon-align-right"></i></a>
                 <a class="btn" href="#"><i class="icon-align-justify"></i></a>
               </div>
-              <br><br>
-              <div class="btn-group">
-                <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> {{_i}}User{{/i}}</a>
-                <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
-                <ul class="dropdown-menu">
-                  <li><a href="#"><i class="icon-pencil"></i> {{_i}}Edit{{/i}}</a></li>
-                  <li><a href="#"><i class="icon-trash"></i> {{_i}}Delete{{/i}}</a></li>
-                  <li><a href="#"><i class="icon-ban-circle"></i> {{_i}}Ban{{/i}}</a></li>
-                  <li class="divider"></li>
-                  <li><a href="#"><i class="i"></i> {{_i}}Make admin{{/i}}</a></li>
-                </ul>
-              </div>
-              <br><br>
-              <a class="btn btn-small" href="#"><i class="icon-star"></i></a>
             </div>
           </div>{{! /bs-docs-example }}
+<pre class="prettyprint linenums">
+&lt;div class="btn-toolbar"&gt;
+  &lt;div class="btn-group"&gt;
+
+    &lt;a class="btn" href="#"&gt;&lt;i class="icon-align-left"&gt;&lt;/i&gt;&lt;/a&gt;
+    &lt;a class="btn" href="#"&gt;&lt;i class="icon-align-center"&gt;&lt;/i&gt;&lt;/a&gt;
+    &lt;a class="btn" href="#"&gt;&lt;i class="icon-align-right"&gt;&lt;/i&gt;&lt;/a&gt;
+    &lt;a class="btn" href="#"&gt;&lt;i class="icon-align-justify"&gt;&lt;/i&gt;&lt;/a&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+          <h6>{{_i}}Dropdown in a button group{{/i}}</h6>
+          <div class="bs-docs-example">
+            <div class="btn-group">
+              <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> {{_i}}User{{/i}}</a>
+              <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
+              <ul class="dropdown-menu">
+                <li><a href="#"><i class="icon-pencil"></i> {{_i}}Edit{{/i}}</a></li>
+                <li><a href="#"><i class="icon-trash"></i> {{_i}}Delete{{/i}}</a></li>
+                <li><a href="#"><i class="icon-ban-circle"></i> {{_i}}Ban{{/i}}</a></li>
+                <li class="divider"></li>
+                <li><a href="#"><i class="i"></i> {{_i}}Make admin{{/i}}</a></li>
+              </ul>
+            </div>
+          </div>{{! /bs-docs-example }}
+<pre class="prettyprint linenums">
+&lt;div class="btn-group"&gt;
+  &lt;a class="btn btn-primary" href="#"&gt;&lt;i class="icon-user icon-white"&gt;&lt;/i&gt; {{_i}}User{{/i}}&lt;/a&gt;
+  &lt;a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"&gt;&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
+  &lt;ul class="dropdown-menu"&gt;
+    &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-pencil"&gt;&lt;/i&gt; {{_i}}Edit{{/i}}&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-trash"&gt;&lt;/i&gt; {{_i}}Delete{{/i}}&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-ban-circle"&gt;&lt;/i&gt; {{_i}}Ban{{/i}}&lt;/a&gt;&lt;/li&gt;
+    &lt;li class="divider"&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="#"&gt;&lt;i class="i"&gt;&lt;/i&gt; {{_i}}Make admin{{/i}}&lt;/a&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;
+</pre>
+
+          <h6>{{_i}}Button{{/i}}</h6>
+          <div class="bs-docs-example">
+            <a class="btn btn-small" href="#"><i class="icon-star"></i></a>
+          </div>{{! /bs-docs-example }}
+<pre class="prettyprint linenums">
+&lt;a class="btn btn-small" href="#"&gt;&lt;i class="icon-star"&gt;&lt;/i&gt;&lt;/a&gt;
+</pre>
+
 
           <h4>{{_i}}Navigation{{/i}}</h4>
           <div class="bs-docs-example">