Bootstrap:Adding margin to column grid without affecting layout

1. add row class to first div
2. column classes for different views in 2nd div
3. Then start your content div or say <button>. Here you will add other class for giving extra css work.You can give proper width in terms of percentage so that your final layout wont breaks

As the content <button>encloses within the column div and the column div here is transparent,we are only able to see the exact width of the content . So we  find margin in between content.

div class="choices row">
div id="img1" class="col-xs-12 col-sm-6 col-md-3 choice" data-value="potato">
<button class="btn btn-default">
<img src="images/circleactivity/potato.png">
</button>
/div>

div id="img2" class="col-xs-12 col-sm-6 col-md-3 choice" data-value="tomato">
<button class="btn btn-default">
<img src="images/circleactivity/tomato.png">
</button>
/div>
div id="img3" class="col-xs-12 col-sm-6 col-md-3 choice" data-value="strawberry">
<button class="btn btn-default">
<img src="images/circleactivity/strawberry.png">
</button>
/div>

div id="img4" class="col-xs-12 col-sm-6 col-md-3 choice" data-value="ladysfinger">
<button class="btn btn-default">
<img src="images/circleactivity/ladysfinger.png">
</button>
/div>

/div>