add callout about justified button group borders to address #11964

diff --git a/components.html b/components.html
index 3bdf2df79ee9d98ca1c01398fc25ed16067b2f03..cd38f85eb99694d7b17a7800d38948d72ec20d4d 100644 (file)
--- a/components.html
+++ b/components.html
@@ -371,6 +371,11 @@ base_url: "../"
     <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>
 
+    <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>