diff options
| -rw-r--r-- | scss/_card.scss | 13 | ||||
| -rw-r--r-- | site/docs/4.5/components/card.md | 14 |
2 files changed, 21 insertions, 6 deletions
diff --git a/scss/_card.scss b/scss/_card.scss index fabe9f367..5ec2bcbea 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 { @@ -83,12 +90,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/docs/4.5/components/card.md b/site/docs/4.5/components/card.md index b234eeaa5..18e1c0fab 100644 --- a/site/docs/4.5/components/card.md +++ b/site/docs/4.5/components/card.md @@ -107,6 +107,20 @@ Create lists of content in a card with a flush list group. {% endcapture %} {% include example.html content=example %} +{% capture 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> +{% endcapture %} +{% include example.html content=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. |