No matter how hard I search online, I can't seem to find a clear answer about adding gutters to columns in Bootstrap 4. All the articles I come across talk about adding gutters in Bootstrap 3 or even removing them in Bootstrap 4. Is it possible to add equal gutters without causing columns to break and wrap? If so, how can this be achieved without affecting flexbox?
I have created a demonstration of the grid I'm working on in this JsFiddle. Any guidance or direction would be greatly appreciated.
.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
After some more research and understanding Bootstrap gutters better, I was able to find a solution to my problem. You can check out the updated version in this JsFiddle.
Thank you for all the help received.
Kind regards, -B.