Boostrap Col vs Webkit Column [closed] - html

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I am always having this issue and I always solved it using webkit-columns. But I wanna know if there is a better way to do it with Bootstrap.
4 boxes inside a grid.
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-3"></div>
<div class="col-sm-3"></div>
<div class="col-sm-3"></div>
</div>
This gives me the 4 boxes but the last box have more margin than the others. I want all of them to have the same margin, but 0 on the corners like the image:
--- EDIT FOR CLARIFY ---
For Clarify my question im gonna add this jsfiddle you see the blue box ? i want to the red boxes start and end with the blue box, can you do that ? not add margin to the blue box, the blue box must be 100% and the other box must be aligned with the first and end of that box
Here i do what i want: Jsfiddle but here im using -webkit-column just for show you, if you can do this with bootstrap that would be nice.

Answer 1

Im gonna share this Demo I created. I hope it gets you somewhere.
HTML
<div class="container">
<div class="row">
<div class="col-sm-3 custom-col">
<div class="child-div">
</div>
</div>
<div class="col-sm-3 custom-col">
<div class="child-div">
</div>
</div>
<div class="col-sm-3 custom-col">
<div class="child-div">
</div>
</div>
<div class="col-sm-3 custom-col">
<div class="child-div">
</div>
</div>
</div>
</div>
CSS
.col-sm-3.custom-col{
height:250px;
/* outline: 1px solid green; */
padding: 5px;
}
.child-div{
height:100%;
width:100%;
background-color:red;
}
UPDATE
I updated the fiddle. HERE