Attempting to replicate Bootstrap's Cards example in my project, I noticed that the top margin of each Card extends beyond the parent element, a border div.
If you need more information on how to utilize Card, refer to Bootstrap's documentation here. For a visual representation, see the image below:
https://i.sstatic.net/1JfSY.png
Despite copying the code, my generated Cards end up looking like this:
https://i.sstatic.net/a7rZ8.png
I desire to maintain that "gap" between the border and the Cards, yet in my implementation, the border embraces the Cards. The CSS styling on the Cards should theoretically give each Card a top margin, but I can't seem to configure the border div to accommodate that margin.
Various attempts have been made by adding margin and padding to the parent element, but yielding consistent results has proven difficult.
Is there anyone out there who knows how to resolve this issue?
The Codepen for reference is available here: link.
<h1>Your Cards</h1>
<div class="border border-1">
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
</div>
</div>