How to adjust gutter in Bootstrap 3 grid system?

Question

The new Bootstrap 3 grid system is great. It's more powerful for responsive design at all screen sizes, and much easier for nested.

But I have one issue I could not figure out. How do I add precise gap between the columns? Say I have container 960px, 3 columns at 310px and 2 gutters at 15px in between 3 columns. How do I do that?

Answer 1

You could create a CSS class for this and apply it to your columns. Since the gutter (spacing between columns) is controlled by padding in Bootstrap 3, adjust the padding accordingly:

.col {
  padding-right:7px;
  padding-left:7px;
}

Demo: http://bootply.com/93473

EDIT If you only want the spacing between columns you can select all cols except first and last like this..

.col:not(:first-child,:last-child) {
  padding-right:7px;
  padding-left:7px;
}

Updated Bootply

For Bootstrap 4 see: Remove gutter space for a specific div only