add .btn-block for a full-width button option

3 files changed, 62 insertions, 42 deletions

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index c59a7fd97..700d92d78 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -3019,6 +3019,16 @@ button.close {
   line-height: 16px;
 }
 
+.btn-block {
+  display: block;
+  width: 100%;
+  padding-right: 0;
+  padding-left: 0;
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
 .btn-primary.active,
 .btn-warning.active,
 .btn-danger.active,
diff --git a/docs/base-css.html b/docs/base-css.html
index 4f0df407d..f827380ac 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -1439,26 +1439,34 @@ For example, <code>section</code> should be wrapped as inline.
           <p>IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled <code>button</code> elements, rendering text gray with a nasty text-shadow that we cannot fix.</p>
 
 
-          <hr class="bs-docs-separator">
-
-
           <h2>Button sizes</h2>
           <p>Fancy larger or smaller buttons? Add <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code> for two additional sizes.</p>
-          <p>
-            <button type="button" class="btn btn-large btn-primary">Primary action</button>
-            <button type="button" class="btn btn-large">Action</button>
-          </p>
-          <p>
-            <button type="button" class="btn btn-small btn-primary">Primary action</button>
-            <button type="button" class="btn btn-small">Action</button>
-          </p>
-          <p>
-            <button type="button" class="btn btn-mini btn-primary">Primary action</button>
-            <button type="button" class="btn btn-mini">Action</button>
-          </p>
-
-
-          <hr class="bs-docs-separator">
+          <div class="bs-docs-example">
+            <p>
+              <button type="button" class="btn btn-large btn-primary">Primary action</button>
+              <button type="button" class="btn btn-large">Action</button>
+            </p>
+            <p>
+              <button type="button" class="btn btn-small btn-primary">Primary action</button>
+              <button type="button" class="btn btn-small">Action</button>
+            </p>
+            <p>
+              <button type="button" class="btn btn-mini btn-primary">Primary action</button>
+              <button type="button" class="btn btn-mini">Action</button>
+            </p>
+          </div>
+<pre class="prettyprint linenums">
+&lt;button class="btn btn-large" type="button"&gt;Large button&lt;/button&gt;
+&lt;button class="btn btn-small" type="button"&gt;Small button&lt;/button&gt;
+&lt;button class="btn btn-mini" type="button"&gt;Mini button&lt;/button&gt;
+</pre>
+          <p>Create block level buttons&mdash;those that span the full width of a parent&mdash; by adding <code>.btn-block</code>.</p>
+          <div class="bs-docs-example">
+            <div class="well" style="max-width: 400px; margin: 0 auto;">
+              <button type="button" class="btn btn-large btn-block">Block level button</button>
+            </div>
+          </div>
+          <pre class="prettyprint linenums">&lt;button class="btn btn-large btn-block" type="button"&gt;Block level button&lt;/button&gt;</pre>
 
 
           <h2>Disabled state</h2>
@@ -1491,9 +1499,6 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
 </pre>
 
 
-          <hr class="bs-docs-separator">
-
-
           <h2>One class, multiple tags</h2>
           <p>Use the <code>.btn</code> class on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.</p>
           <form class="bs-docs-example">
diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index a2685aab3..248ffa042 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -1376,26 +1376,34 @@
           <p>{{_i}}IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled <code>button</code> elements, rendering text gray with a nasty text-shadow that we cannot fix.{{/i}}</p>
 
 
-          <hr class="bs-docs-separator">
-
-
           <h2>{{_i}}Button sizes{{/i}}</h2>
           <p>{{_i}}Fancy larger or smaller buttons? Add <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code> for two additional sizes.{{/i}}</p>
-          <p>
-            <button type="button" class="btn btn-large btn-primary">{{_i}}Primary action{{/i}}</button>
-            <button type="button" class="btn btn-large">{{_i}}Action{{/i}}</button>
-          </p>
-          <p>
-            <button type="button" class="btn btn-small btn-primary">{{_i}}Primary action{{/i}}</button>
-            <button type="button" class="btn btn-small">{{_i}}Action{{/i}}</button>
-          </p>
-          <p>
-            <button type="button" class="btn btn-mini btn-primary">{{_i}}Primary action{{/i}}</button>
-            <button type="button" class="btn btn-mini">{{_i}}Action{{/i}}</button>
-          </p>
-
-
-          <hr class="bs-docs-separator">
+          <div class="bs-docs-example">
+            <p>
+              <button type="button" class="btn btn-large btn-primary">{{_i}}Primary action{{/i}}</button>
+              <button type="button" class="btn btn-large">{{_i}}Action{{/i}}</button>
+            </p>
+            <p>
+              <button type="button" class="btn btn-small btn-primary">{{_i}}Primary action{{/i}}</button>
+              <button type="button" class="btn btn-small">{{_i}}Action{{/i}}</button>
+            </p>
+            <p>
+              <button type="button" class="btn btn-mini btn-primary">{{_i}}Primary action{{/i}}</button>
+              <button type="button" class="btn btn-mini">{{_i}}Action{{/i}}</button>
+            </p>
+          </div>
+<pre class="prettyprint linenums">
+&lt;button class="btn btn-large" type="button"&gt;{{_i}}Large button{{/i}}&lt;/button&gt;
+&lt;button class="btn btn-small" type="button"&gt;{{_i}}Small button{{/i}}&lt;/button&gt;
+&lt;button class="btn btn-mini" type="button"&gt;{{_i}}Mini button{{/i}}&lt;/button&gt;
+</pre>
+          <p>{{_i}}Create block level buttons&mdash;those that span the full width of a parent&mdash; by adding <code>.btn-block</code>.{{/i}}</p>
+          <div class="bs-docs-example">
+            <div class="well" style="max-width: 400px; margin: 0 auto;">
+              <button type="button" class="btn btn-large btn-block">{{_i}}Block level button{{/i}}</button>
+            </div>
+          </div>
+          <pre class="prettyprint linenums">&lt;button class="btn btn-large btn-block" type="button"&gt;{{_i}}Block level button{{/i}}&lt;/button&gt;</pre>
 
 
           <h2>{{_i}}Disabled state{{/i}}</h2>
@@ -1428,9 +1436,6 @@
 </pre>
 
 
-          <hr class="bs-docs-separator">
-
-
           <h2>{{_i}}One class, multiple tags{{/i}}</h2>
           <p>{{_i}}Use the <code>.btn</code> class on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.{{/i}}</p>
           <form class="bs-docs-example">