title: Bootstrap's card component example with 'kitchen sink' not working correctly
body: <p>I want to use the kitchen sink example from Bootstrap's card but if I use it at my site then it will not render the top border from the first list item like in the example and it's driving me crazy.</p>
  
  <p>This is what is should look like: <a href="https://getbootstrap.com/docs/4.0/components/card/#kitchen-sink" rel="nofollow noreferrer">example on bootstrap</a></p>
  
  <p>And if I paste the exact same code on my end (and on JSFiddle too) then it looks like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;div class="card" style="width: 18rem;"&gt;
    &lt;div class="card-body"&gt;
      &lt;h5 class="card-title"&gt;Card title&lt;/h5&gt;
      &lt;p class="card-text"&gt;Some quick example text to build on the card title and make up the bulk of the card's content.&lt;/p&gt;
    &lt;/div&gt;
    &lt;ul class="list-group list-group-flush"&gt;
      &lt;li class="list-group-item"&gt;Cras justo odio&lt;/li&gt;
      &lt;li class="list-group-item"&gt;Dapibus ac facilisis in&lt;/li&gt;
      &lt;li class="list-group-item"&gt;Vestibulum at eros&lt;/li&gt;
    &lt;/ul&gt;
    &lt;div class="card-body"&gt;
      &lt;a href="#" class="card-link"&gt;Card link&lt;/a&gt;
      &lt;a href="#" class="card-link"&gt;Another link&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>What am I missing? How can I add the top border like in the example without too much hacky css/code?</p>