Fixes #12344: Update docs to show workaround for using button element with justified...

diff --git a/docs/components.html b/docs/components.html
index 510abcc6675c28ca480b0a0f2dbacf5da893892e..aab22cfd89b2c439ba3f3beb6b5a2eeb01e699d2 100644 (file)
--- a/docs/components.html
+++ b/docs/components.html
@@ -363,19 +363,16 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
 </div>
 {% endhighlight %}
 
-  <h3 id="btn-groups-justified">Justified link variation</h3>
-  <p>Make a group of buttons stretch at the same size to span the entire width of its parent. Also works with button dropdowns within the button group.</p>
+  <h3 id="btn-groups-justified">Justified button groups</h3>
+  <p>Make a group of buttons stretch at equal sizes to span the entire width of its parent. Also works with button dropdowns within the button group.</p>
 
   <div class="bs-callout bs-callout-warning">
     <h4>Handling borders</h4>
     <p>Due to the specific HTML and CSS used to justify buttons (namely <code>display: table-cell</code>), the borders between them are doubled. In regular button groups, <code>margin-left: -1px</code> is used to stack the borders instead of removing them. However, <code>margin</code> doesn't work with <code>display: table-cell</code>. As a result, depending on your customizations to Bootstrap, you may wish to remove or re-color the borders.</p>
   </div>
 
-  <div class="bs-callout bs-callout-warning">
-    <h4>Element-specific usage</h4>
-    <p>This only works with <code>&lt;a&gt;</code> elements as the <code>&lt;button&gt;</code> doesn't pick up the styles we use to justify content (some <code>display: table-cell;</code>-fu).</p>
-  </div>
-
+  <h4>With <code>&lt;a&gt;</code> elements</h4>
+  <p>Just wrap a series of <code>.btn</code>s in <code>.btn-group.btn-group-justified</code>.</p>
   <div class="bs-example">
     <div class="btn-group btn-group-justified">
       <a class="btn btn-default" role="button">Left</a>
@@ -404,6 +401,35 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
 <div class="btn-group btn-group-justified">
   ...
 </div>
+{% endhighlight %}
+
+  <h4>With <code>&lt;button&gt;</code> elements</h4>
+  <p>To use justified button groups with <code>&lt;button&gt;</code> elements, <strong class="text-danger">you must wrap each button in a button group</strong>. Most browsers don't properly apply our CSS for justification to <code>&lt;button&gt;</code> elements, but since we support button dropdowns, we can workaround that.</p>
+  <div class="bs-example">
+    <div class="btn-group btn-group-justified">
+      <div class="btn-group">
+        <button type="button" class="btn btn-default">Left</button>
+      </div>
+      <div class="btn-group">
+        <button type="button" class="btn btn-default">Middle</button>
+      </div>
+      <div class="btn-group">
+        <button type="button" class="btn btn-default">Right</button>
+      </div>
+    </div>
+  </div>
+{% highlight html %}
+<div class="btn-group btn-group-justified">
+  <div class="btn-group">
+    <button type="button" class="btn btn-default">Left</button>
+  </div>
+  <div class="btn-group">
+    <button type="button" class="btn btn-default">Middle</button>
+  </div>
+  <div class="btn-group">
+    <button type="button" class="btn btn-default">Right</button>
+  </div>
+</div>
 {% endhighlight %}
 </div>