BOOTSTRAP:ADDING MARGIN TO COLUMN GRID WITHOUT AFFECTING LAYOUT

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

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 a 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>