Double bottom border: Card with .card-header + .list-group

[hiddewie]

When making a card and using a .card-header with a .list-group, a double border is present (bottom of the header and top of the list group). I think this is not intended.

As far as I've seen this has been a problem since BS 4 alpha-5.

HTML:

<div class="card">
  <h3 class="card-header">Test header</h3>
  <ul class="list-group list-group-flush">
    <li class="list-group-item justify-content-between">
      Some content
    </li>
    <li class="list-group-item justify-content-between">
      Some content
    </li>
  </ul>
</div>

Screenshot:

Details

Operating system: Windows 10
Browser: Chrome 55.0.2883.87 m (Also validated on Firefox 50.1.0 and Opera 42.0.2393.94)
Test case: http://www.bootply.com/ZkNFalLacR

[psorensen]

@hiddewie One possible solution:

.card-header + .list-group .list-group-item:first-of-type {
  border-top: none;
}
.card-header + .list-group .list-group-item:last-of-type {
  border-bottom: none;
}

[Starsam80]

Ref: #19047

[martinbean]

@mdo Is this being addressed? Just ran into this issue myself.

[hiddewie]

Thank you @mdo and @gijsbotje!