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?

Nonah

This seems nice. The first result i like. Most just don't display the padding which makes the text go stand against the edge. I try to reproduce your answer using jsfiddle. jsfiddle.net/0ddum192 But I don't have a gutter. Does someone know what goes wrong? – Awe

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

Exurb

But this way it will add padding to the first child as well. This is not exactly what I want. What I am thinking is, maybe I can add make the container 975px, and add padding-right: 15px; to .col. When screen size change, I have to remove that padding-right: 15px;. Also, if I have other elements on the page. I need to add this padding-right: 15px; and remove it when screen size change. I am not sure if this is the best way to handle the columns with gutter in Bootstrap 3. – Nonah

I don't think that you need to mention first child or the last child as all the column elements in bootstrap 3 adhere to the same margin or padding on the left and the right side. – Depth

Answer 2

To define a 3 column grid you could use the customizer or download the source set your less variables and recompile.

To learn more about the grid and the columns / gutter widths, please also read:

• Bootstrap 3 - Set Container Width to 940px Maximum for Desktops?
• Why does Bootstrap 3 force the container width to certain sizes?
• Bootstrap 3 Gutter Size
• Reduce the gutter (default 30px) on smaller devices in Bootstrap3?

In you case with a container of 960px consider the medium grid (see also: http://getbootstrap.com/css/#grid). This grid will have a max container width of 970px. When setting @grid-columns:3; and setting @grid-gutter-width:15px; in variables.less you will get:

15px | 1st column (298.33) | 15px | 2nd column (298.33) |15px | 3th column (298.33) | 15px

Accentor

+1 Downloading the LESS file, in regards to Bootstrap 3.3.6, is perhaps the most efficient way to do this. Who really wants to go into a .CSS file and manually modify x number of Bootstraps selectors??? and only to do it again when another Bootstrap project is needed? Allow LESS to do all the heavy lifting. – Prologize

Answer 3

(Posted on behalf of the OP).

I believe I figured it out.

In my case, I added [class*="col-"] {padding: 0 7.5px;};.

Then added .row {margin: 0 -7.5px;}.

This works pretty well, except there is 1px margin on both sides. So I just make .row {margin: 0 -7.5px;} to .row {margin: 0 -8.5px;}, then it works perfectly.

I have no idea why there is a 1px margin. Maybe someone can explain it?

See the sample I created:

Demo
Code

Hordein

When you're nesting rows or you have rows with one or two columns, you need to be a bit more specific: div[class^="col-"]:not(:first-child) { padding-left:7px; } div[class^="col-"]:not(:last-child) { padding-right:7px; } – Scrivener