Nested card in card groups are displayed wrong

[jhhazelaar]

I have a card-group with nested cards in de card-body of the grouped. This nested card act like they are grouped. Nested card doesn't have a left border or no rounded corner just like the grouped cards.

Maybe adding some > to de card scss. I didn't have the time to figure out the solutions, sorry for that.

[jhhazelaar]

I don't think this is the best way. But for now it's a solution:

.card-group {
  .card {
    @include media-breakpoint-up(sm) {
      .card {
        border: $card-border-width solid $card-border-color;
        @include border-radius($card-border-radius);

        &:not(:first-child):not(:last-child):not(:only-child) {
          @include border-radius($card-border-radius);
        }
      }
    }
  }
}

[Johann-S]

Bug reports must include a live demo of the problem. Per our contributing guidelines, please create a reduced test case via CodePen or JS Bin and report back with your link, Bootstrap version, and specific browser and OS details.

[jhhazelaar]

Sorry, here it is: https://codepen.io/jhhazelaar/pen/LOWWKw

[Johann-S]

Can you update your CodePen to our latest release please ?
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.min.css

[jhhazelaar]

Still the same issue. Sorry for the incompetence, first time creating an issue

[Johann-S]

don't worry that's ok 👍

[gijsbotje]

maybe using .card-group > .card everywhere would be a good solution
@Johann-S what'd you think?

[Johann-S]

It's seems we try to avoid child selector in Bootstrap 🤔
maybe @andresgalante have ideas on how to fix that ?

[andresgalante]

Thanks a lot @jhhazelaar for reporting this one.

Hi @Johann-S to me this is a really good case for a child selector, since we want to select just .card child and nothing else.

The other option is to undo the styles for card-group card on nested cards which will add way more specificity and styles. I've send a PR so we can discuss more concrete ideas