I'm trying to figure out how to add margin between elements in my code snippet without breaking the row. You can view the fiddle here.
Although a similar question has been asked on Stack Overflow here, I wasn't able to find a solution that works for me because adding padding is not an option in my case.
.row {
background: #f8f9fa;
margin-top: 20px;
}
.item {
border: solid 1px #6c757d;
padding: 10px;
}<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-6 item m-1">2</div>
<div class="col-6 item">4</div>
</div>
<div class="row">
<div class="col-8 item m-2">2</div>
<div class="col-4 item">1</div>
</div>
</div>