From 71e9db41834ae1f9873e4047033f868be5e98036 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Mon, 23 Dec 2013 20:28:21 -0800
Subject: [PATCH] add callout about justified button group borders to address
 #11964

---
 components.html | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/components.html b/components.html
index 3bdf2df79e..cd38f85eb9 100644
--- 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>