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

i'm running issue here. i've used background images in each of 8 columns in row , need add white space between them. i've created 2 classes here , should work, wrong. also, i've used in past project , both thin-gutters , waffle used in row element, waffle works on child element of col.

here's 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"><a href="#">ceramic tile</a></h2>         </div>         <div class="col-12 col-md-6 col-xl-3 product-images waffle carpet">             <h2 class="product-title"><a href="#"> carpet</a></h2>         </div>         <div class="col-12 col-md-6 col-xl-3 product-images waffle hardwood">             <h2 class="product-title"><a href="#">hardwood</a></h2>         </div>         <div class="col-12 col-md-6 col-xl-3 product-images waffle countertops">             <h2 class="product-title"><a href="#">countertops</a></h2>         </div>         <div class="col-12 col-md-6 col-xl-3 product-images waffle laminate">             <h2 class="product-title"><a href="#">laminate</a></h2>         </div>         <div class="col-12 col-md-6 col-xl-3 product-images waffle stone-tile">             <h2 class="product-title"><a href="#">stone tile</a></h2>         </div>         <div class="col-12 col-md-6 col-xl-3 product-images waffle vinyl">             <h2 class="product-title"><a href="#">vinyl</a></h2>         </div>         <div class="col-12 col-md-6 col-xl-3 product-images waffle area-rugs">             <h2 class="product-title"><a href="#">area rugs</a></h2>         </div>     </div> </div> 

and 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;     } 

add margin-bottom 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 spacing utils can used margins , padding. example,

mb-2 margin bottom of 2 spacing units.