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

diff --git a/docs/components/card.md b/docs/components/card.md
index 3d112c501f45e58cf6dabc9cca39211328a3c283..9be52fd2f56c4831457318796a83ad96c3088b4d 100644 (file)
--- a/docs/components/card.md
+++ b/docs/components/card.md
@@ -51,6 +51,16 @@ Cards support a wide variety of content, including images, text, list groups, li
 </div>
 {% endexample %}
 
+{% 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">

diff --git a/scss/_list-group.scss b/scss/_list-group.scss
index 8b940adefc4d0320e9f4b707949ceda415c4f7fb..5115e56fa2b35bc7b7a49609c3ae1157e735ad17 100644 (file)
--- 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;
+    }
+  }
 }