[SOLVED] How to add consistent grid-gutter-width across multiple breakpoints in bootstrap 3.1.1

How to add consistent grid-gutter-width across multiple breakpoints in bootstrap 3.1.1

I'm using the latest bootstrap and I'm not having luck adding a simple margin between items in a responsive grid. I have a simple grid that scales from 4 / 3 / 2 / 1 columns based on the col setting (col-lg / col-md / col-sm / col-xs)

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <!-- put stuff in here -->
    </div>
  </div>
</div>

I'd like a simple way to override the default style (or the less property directly) to get a simple margin between items w/ the above layout.

By default this stacks correctly but each item is directly next to one another. How can I achieve the gutter width required with the least amount of hacking?

Solution

In BS3, the "gutter" is created using padding, instead of margins so easiest way to create the look of a gutter is by using a container inside the col-*..

http://bootply.com/113815

See this article to understand the Bootstrap 3 gutter:

http://blog.codeply.com/2016/04/06/how-the-bootstrap-grid-really-works/