Bootstrap 4 adding gutters to columns is it possible?

Question

I've been scouring the web looking for an answer but I can't seem to find a answer regarding adding gutters to columns in BS4. Any articles I find that talk about adding gutters are referencing BS3. Even the BS4 Docs talk about removing them, but as far as I can tell there isn't any, right?

Is it even possible to add equal gutters that don't cause cols to break and wrap? If so how would you do it without messing with flex box?

I have a JsFiddle demonstrating the grid I'm trying to add gutters to. Any help I could get, or even if I could be pointed in the right direction I'd be grateful.

.sec-accent {
  background-color: #fafcf5;
}

.blue {
  background-color: #9999cc;
}

<div class="container">
    <div class="row">
      <div class="col-sm-12 blue" style="height:500px;">
        Hello World
      </div>
    </div>

    <div class="row">
      <div class="col-sm-4 blue" style="height:500px;">
        Hello World
      </div>
      <div class="col-sm-8 blue" style="height:500px;">
        Hello World
      </div>
    </div>

    <div class="row">
      <div class="col-sm-4 blue" style="height:500px;">
        Hello World
      </div>
      <div class="col-sm-4 blue" style="height:500px;">
        Hello World
      </div>
      <div class="col-sm-4 blue" style="height:500px;">
        Hello World
      </div>
    </div>

    <div class="row">
      <div class="col-sm-6 blue" style="height:500px;">
        Hello World
      </div>
      <div class="col-sm-6 blue" style="height:500px;">
        Hello World
      </div>
    </div>

    <div class="row">
      <div class="col-sm-12 blue" style="height:500px;">
        Hello World
      </div>
    </div>
  </div>

EDIT: 9 April 2018

I can see where I have mis-interpreted bootstrap gutters now and after some more digging I was able to come up with a solution to my problem.

Added here in this JsFiddle for anyone looking for a solution like mine.

Thanks again for the assistance.

Regards, -B.

Answer 1

I think you have misunderstood about the gutters. Bootstrap 3 and 4 both already have 30px gutters between columns. The problem in your code is you have used the .blue class right in the divs with col-* class. You need to do this the other way. You should leave that div with only the col-* class. Try this code.

<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <div class="blue" style="height:500px;">
                Hello World
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-4">
            <div class="blue" style="height:500px;">
                Hello World
            </div>
        </div>
        <div class="col-sm-8">
            <div class="blue" style="height:500px;">
                Hello World
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-4">
            <div class="blue" style="height:500px;">
                Hello World
            </div>
        </div>
        <div class="col-sm-4">
            <div class="blue" style="height:500px;">
                Hello World
            </div>
        </div>
        <div class="col-sm-4">
            <div class="blue" style="height:500px;">
                Hello World
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-6">
            <div class="blue" style="height:500px;">
                Hello World
            </div>
        </div>
        <div class="col-sm-6">
            <div class="blue" style="height:500px;">
                Hello World
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-12">
            <div class="blue" style="height:500px;">
                Hello World
            </div>
        </div>
    </div>
</div>