'Bootstrap 4 adding gutters to columns is it possible?

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.

htmlcssbootstrap-4


Solution 1:[1]

I have just found a solution that works for me.

<div class="col col-4 col-lg-2 bg-primary border border-white"></div>

border border-white

Doesn't actually create a space but gives the effect of space between cols. Only works if you have a bg-color obviously

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 mrpeebs

Related Questions