28

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?

halfer
  • 19,824
  • 17
  • 99
  • 186
Darren Li
  • 381
  • 1
  • 3
  • 6
  • 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. http://jsfiddle.net/0ddum192/ But I don't have a gutter. Does someone know what goes wrong? – clankill3r Aug 13 '14 at 19:40

3 Answers3

17

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

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • 2
    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. – Darren Li Nov 11 '13 at 17:50
  • 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. – Sanket Sahu Jan 07 '14 at 09:18
6

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:

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
Community
  • 1
  • 1
Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224
  • 2
    +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. – klewis Mar 09 '16 at 15:14
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

halfer
  • 19,824
  • 17
  • 99
  • 186
  • 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; }` – Esger Jan 15 '15 at 08:05