Trying to add white space vertically between cols in a row - Bootstrap 4 - multiple-columns

Question

I'm running into an issue here. I've used background images in each of my 8 columns in a row and now I need to add white space between them. I've created two classes here and they SHOULD work, but something is wrong. Also, I've used this in a past project and both thin-gutters and waffle were used in the row element, but now waffle only works on the child element of the col.
Here's my code...
<div id="products">
<div class="container-fluid">
<div class="row thin-gutters text-center">
<div class="col-12 col-md-6 col-xl-3 product-images waffle ceramic-tile">
<h2 class="product-title">Ceramic Tile</h2>
</div>
<div class="col-12 col-md-6 col-xl-3 product-images waffle carpet">
<h2 class="product-title"> carpet</h2>
</div>
<div class="col-12 col-md-6 col-xl-3 product-images waffle hardwood">
<h2 class="product-title">hardwood</h2>
</div>
<div class="col-12 col-md-6 col-xl-3 product-images waffle countertops">
<h2 class="product-title">countertops</h2>
</div>
<div class="col-12 col-md-6 col-xl-3 product-images waffle laminate">
<h2 class="product-title">laminate</h2>
</div>
<div class="col-12 col-md-6 col-xl-3 product-images waffle stone-tile">
<h2 class="product-title">stone tile</h2>
</div>
<div class="col-12 col-md-6 col-xl-3 product-images waffle vinyl">
<h2 class="product-title">vinyl</h2>
</div>
<div class="col-12 col-md-6 col-xl-3 product-images waffle area-rugs">
<h2 class="product-title">area rugs</h2>
</div>
</div>
</div>
and my css...
.thin-gutters {
margin-right: -2px;
margin-left: -2px;
}
#media (min-width: 576px) {
.thin-gutters {
margin-right: -2px;
margin-left: -2px;
}
}
#media (min-width: 768px) {
.thin-gutters {
margin-right: -2px;
margin-left: -2px;
}
}
#media (min-width: 992px) {
.thin-gutters {
margin-right: -2px;
margin-left: -2px;
}
}
#media (min-width: 1200px) {
.thin-gutters {
margin-right: -2px;
margin-left: -2px;
}
}
.thin-gutters > .col,
.thin-gutters > [class*="col-"] {
padding-right: 2px;
padding-left: 2px;
}
.waffle {
margin-bottom: 4px;
}
.waffle > .col,
.waffle > [class*="col-"] {
padding-bottom: 4px;
}

Answer 1

Add margin-bottom to the columns..
.thin-gutters > .col,
.thin-gutters > [class*="col-"] {
padding-right: 2px;
padding-left: 2px;
margin-bottom: 10px;
}
http://www.codeply.com/go/N9snQAKA4K
--
Update Bootstrap 4 beta
Now the spacing utils can be used for margins and padding. For example,
mb-2 for margin bottom of 2 spacing units.