How to add vertical spacing between Bootstrap Cards - html

Question

I am working with boostrap cards, and the following is what I have them currently looking like:
Now what I'd like to do is add vertical space between the cards so that Card 1 and Card 3 aren't stuck together as well as Card 2 and Card 4.
The following is my code and setup for the cards I currently have:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">CARD 1</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">CARD 2</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">CARD 3</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">CARD 4</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>

Answer 1

Add Class mb-3 for <div class="col-sm-6 mb-3">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-6 mb-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">CARD 1</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-sm-6 mb-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">CARD 2</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-sm-6 mb-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">CARD 3</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-sm-6 mb-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">CARD 4</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>
if you want more space, bootstrap class available like mb-4 mb-5
more info here

Answer 2

Add margin-bottom: 20px inside a card class in css file. check the below simple css.
In style.css file
.card {
margin-bottom: 20px !important;
}

Answer 3

I would add something like this (SCSS):
div[class^="col-"] {
padding-top: 1rem;
padding-bottom: 1rem;
> h1,
> h2,
> h3,
> h4,
> h5,
> h6 {
margin-top: 0;
}
}
* + * {
:last-child {
margin-bottom: 0;
}
}
... to handle vertical spaces in general.