0

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"><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 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;
    }
Jhynnifer
  • 11
  • what is the reason for `.waffle > .col, .waffle > [class*="col-"] { padding-bottom: 4px; }` .. it does nothing because there are no `col` inside the `waffle` – Carol Skelly Apr 14 '17 at 14:45
  • That's kind of what I said, in the last project I worked on it worked on the parent element (the row), but this time it only affects the col if it's in that element. I'm not sure why the change, the code is exactly the same. – Jhynnifer Apr 14 '17 at 16:09
  • But the HTML structure isn't.. there is no col inside the waffle so how do you expect the padding to work? – Carol Skelly Apr 14 '17 at 16:10
  • Possible duplicate of [Is no padding on \`col\` in Bootstrap 4 Grid System normal?](http://stackoverflow.com/questions/43357693/is-no-padding-on-col-in-bootstrap-4-grid-system-normal) – Carol Skelly Apr 14 '17 at 16:12

1 Answers1

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.

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624