Bootstrap 4 card-deck with wrapper element

I'm working with Angular (v4.3.1) and Bootstrap (v4.0.0-alpha.6). A template contains two subcomponents like so:

<div class="card-deck">
    <comp1></comp1>
    <comp2></comp2>
</div>

Both subcomponent's templates have as root element's class the .card Bootstrap class.

<div class="card">
    ...
</div>

This, once compiled results in the following HTML

<div class="card-deck">
    <comp1 _nghost-c3="">
        <div _ngcontent-c3="" class="card">
            ...
        </div>
    </comp1>
    <comp2 _nghost-c4="">
        <div _ngcontent-c4="" class="card">
            ...
        </div>
    </comp2>
</div>

The problem is that the .card-deck styling doesn't get applyed properly if there is an element wrapping the .card elements.

A Bootstrap only example, the problem is strictly related to Bootstrap css and not Angular obviously.

<!DOCTYPE html>
<html>

<head>
  <link data-require="bootstrap@4.0.5" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
  <script data-require="bootstrap@4.0.5" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <!--  Displayed properly  -->
  <div id="deck-without-wrapper" class="card-deck">
    <div class="card">
      <div class="card-block">
        <p>Card1</p>
      </div>
    </div>
    <div class="card">
      <div class="card-block">
        <p>Card2</p>
      </div>
    </div>
  </div>
  <br>

  <!--  NOT displayed properly  -->
  <div id="deck-with-wrapper" class="card-deck">
    <div id="wrapper1">
      <div class="card">
        <div class="card-block">
          <p>Card1</p>
        </div>
      </div>
    </div>
    <div id="wrapper2">
      <div class="card">
        <div class="card-block">
          <p>Card2</p>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Anyone knows a way to get both the components structure and the styling working?

Bootstrap 4 card-deck with wrapper element

1 Answers