diff --git a/scss/_list-group.scss b/scss/_list-group.scss index 057eb8057dab..b148c5c47293 100644 --- a/scss/_list-group.scss +++ b/scss/_list-group.scss @@ -132,7 +132,7 @@ // useful within other components (e.g., cards). .list-group-flush { - .list-group-item { + > .list-group-item { border-right-width: 0; border-left-width: 0; @include border-radius(0); @@ -140,10 +140,8 @@ &:first-child { border-top-width: 0; } - } - &:last-child { - .list-group-item:last-child { + &:last-child { border-bottom-width: 0; } } diff --git a/site/content/docs/4.3/components/list-group.md b/site/content/docs/4.3/components/list-group.md index a9bb3acd2228..c258119bbf26 100644 --- a/site/content/docs/4.3/components/list-group.md +++ b/site/content/docs/4.3/components/list-group.md @@ -112,6 +112,56 @@ Add `.list-group-horizontal` to change the layout of list group items from verti {{< /list-group.inline >}} {{< /example >}} +## Nested + +Listed group and listed group flush with nested lists inside of them. + +{{< example >}} +
+

List Group

+
+
Group item
+
+

List Group Horizontal

+
+
Group item 1
+
Group item 2
+
Group item 3
+
+
+
+

List Group

+
+
Group item 1
+
Group item 2
+
Group item 3
+
+
+
+ +

List Group Flush

+
+
Group item
+
+

List Group Horizontal

+
+
Group item 1
+
Group item 2
+
Group item 3
+
+
+
+

List Group

+
+
Group item 1
+
Group item 2
+
Group item 3
+
+
+
+
+{{< /example >}} + ## Contextual classes Use contextual classes to style list items with a stateful background and color.