not getting any kind of margin in bootstrap grid - html

Question

I was creating a template today using bootstrap. suddenly My grids are not getting any margin between them.
my markup are pretty simple:
<div class="container" div style="margin-top:50px;margin-bottom:50px">
<div class="row">
<div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 box">
<p>flacon</p>
</div>
<div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 box">
<p>flacon</p>
</div>
<div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 box">
<p>flacon</p>
</div>
<div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 box">
<p>flacon</p>
</div>
</div>
</div>
I didn't face anything like it before. please help me.

Answer 1

There is no margins between the columns in bootstrap but there is padding. When you set the background-color to white, that creates a background for the padding too which is why it looks continuous and not separated.
Add this:
<div class="col-sm-3">
<div class="white-box">
...
</div>
</div>
With .white-box whatever you want such as background-color: white;

Answer 2

The Bootstrap grid-system does not add any margins - instead it adds a padding inside the columns. You could build something like this:
<div class="container" div style="margin-top:50px;margin-bottom:50px">
<div class="row">
<div class="col-xs-3">
<div class="col-xs-12 box">
<p>flacon</p>
</div>
</div>
<div class="col-xs-3">
<div class="col-xs-12 box">
<p>flacon</p>
</div>
</div>
<div class="col-xs-3">
<div class="col-xs-12 box">
<p>flacon</p>
</div>
</div>
<div class="col-xs-3">
<div class="col-xs-12 box">
<p>flacon</p>
</div>
</div>
</div>
</div>
I also removed your many col-XX-3 classes as stated in my comment. For mor details see Bootstrap documentation
Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any .col-md- class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg- class is not present.