fixes #17433: improve borders on .list-group-flush to remove dupe borders when appropro

2 files changed, 22 insertions, 0 deletions

diff --git a/docs/components/card.md b/docs/components/card.md
index 3d112c501..9be52fd2f 100644
--- a/docs/components/card.md
+++ b/docs/components/card.md
@@ -53,6 +53,16 @@ Cards support a wide variety of content, including images, text, list groups, li
 
 {% example html %}
 <div class="card">
+  <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>
+{% endexample %}
+
+{% example html %}
+<div class="card">
   <img class="card-img-top" data-src="holder.js/100px180/?text=Image cap" alt="Card image cap">
   <div class="card-block">
     <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
diff --git a/scss/_list-group.scss b/scss/_list-group.scss
index 8b940adef..5115e56fa 100644
--- a/scss/_list-group.scss
+++ b/scss/_list-group.scss
@@ -37,6 +37,18 @@
     border-width: $list-group-border-width 0;
     border-radius: 0;
   }
+
+  &:first-child {
+    .list-group-item:first-child {
+      border-top: 0;
+    }
+  }
+
+  &:last-child {
+    .list-group-item:last-child {
+      border-bottom: 0;
+    }
+  }
 }