From 9807b5ad8e977a2e445032b4e28a347c13c6cc74 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Thu, 14 May 2020 08:53:22 -0700
Subject: [PATCH] Simplify list-group borders to prevent double borders in
 cards

Consolidates some CSS and beefs up the selector to account for inherited border styles. Fixes #30793, a regression from v4.4.1 that shipped in #30497.
---
 scss/_card.scss                          | 13 +++++++------
 site/content/docs/5.0/components/card.md | 13 +++++++++++++
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/scss/_card.scss b/scss/_card.scss
index 230ab113ab1e..a2407c8b0f20 100644
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -33,6 +33,13 @@
       @include border-bottom-radius($card-inner-border-radius);
     }
   }
+
+  // Due to specificity of the above selector (`.card > .list-group`), we must
+  // use a child selector here to prevent double borders.
+  > .card-header + .list-group,
+  > .list-group + .card-footer {
+    border-top: 0;
+  }
 }
 
 .card-body {
@@ -80,12 +87,6 @@
   &:first-child {
     @include border-radius($card-inner-border-radius $card-inner-border-radius 0 0);
   }
-
-  + .list-group {
-    .list-group-item:first-child {
-      border-top: 0;
-    }
-  }
 }
 
 .card-footer {
diff --git a/site/content/docs/5.0/components/card.md b/site/content/docs/5.0/components/card.md
index 4bb116f0f9f4..3b250db735f3 100644
--- a/site/content/docs/5.0/components/card.md
+++ b/site/content/docs/5.0/components/card.md
@@ -101,6 +101,19 @@ Create lists of content in a card with a flush list group.
 </div>
 {{< /example >}}
 
+{{< example >}}
+<div class="card" style="width: 18rem;">
+  <ul class="list-group list-group-flush">
+    <li class="list-group-item">Cras justo odio</li>
+    <li class="list-group-item">Dapibus ac facilisis in</li>
+    <li class="list-group-item">Vestibulum at eros</li>
+  </ul>
+  <div class="card-footer">
+    Card footer
+  </div>
+</div>
+{{< /example >}}
+
 ### Kitchen sink
 
 Mix and match multiple content types to create the card you need, or throw everything in there. Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card.