How to Change Default Bootstrap Fluid Grid 12 Column Gutter Width

Question

I am looking to know if there is any simple solution known to change the gutter with on the fluid default 12 grid bootstrap system (2.3.0).

I am not familiar with LESS but if that is the answer, please also describe how to could be changed. The same with Sass.

Please note that it is perfectly acceptable to change the gutter width, by half or one fourth, for example if that may make things simpler.

The following goals must be met:

1. Must be able to update bootstrap in the future. This means not editing the actual bootstrap files.
2. Functionality should remain for all other objects.
3. Must be simple. Less than 10 lines of CSS. For example, an added class or something.

I have searched throughout Stack Overflow and still have no idea how I may go about doing something like this. To the best of my understanding, downloading a customized Bootstrap only renders custom gutter widths for non-fluid grids. I have coded my own fluid grid system before, so I understand the math, but I am worried there may be consequences and it would be helpful if any known issues on class overrides could be shared.

I promise to give credit where it is due.

UPDATE:

Changing the less variables as described in Yoda's answer is the way to go. Does anyone have any experience changing these less variables? For example, I believe the variables that have to be changed are the following:

// Fluid grid
// -------------------------
@fluidGridColumnWidth:    percentage(@gridColumnWidth/@gridRowWidth);
@fluidGridGutterWidth:    percentage(@gridGutterWidth/@gridRowWidth);

// 1200px min
@fluidGridColumnWidth1200:     percentage(@gridColumnWidth1200/@gridRowWidth1200);
@fluidGridGutterWidth1200:     percentage(@gridGutterWidth1200/@gridRowWidth1200);

// 768px-979px
@fluidGridColumnWidth768:      percentage(@gridColumnWidth768/@gridRowWidth768);
@fluidGridGutterWidth768:      percentage(@gridGutterWidth768/@gridRowWidth768);

How does one go about changing something like this? Perhaps:

@fluidGridGutterWidth768:      percentage(1.5);  

If anyone has done this before, I would appreciate a shove in the right direction.

Answer 1

The easiest way is probably to use the Customizable download that Twitter Bootstrap provides. Change the @fluidGridGutterWidth variable to suit your needs in the form. Download the less files from here. You can access the variable.less file from the github bootstrap project and then change this piece of code:

    // Fluid grid
// -------------------------
@fluidGridColumnWidth:    percentage(@gridColumnWidth/@gridRowWidth);
@fluidGridGutterWidth:    percentage(@gridGutterWidth/@gridRowWidth); // <= this one

I thought you had access to less files at first, then I realized you are using the customized gui on the website. Just download the less files, and make your changes. Then compile the less files to give you a css file or use less for development. You can use css or min.css for deployment.

Answer 2

I think you might be over thinking it. The problem with changing the LESS variables is that it will change it for all gutters. So if I like the 15px gutter for arranging the over all layout but want the gutter to be 5px for a form inside that grid it won't work.

Just create 2 css classes to override the areas you want to change the gutter.

Apply this at the "row" level.

.row-5-gutter{
    margin-left: -5px;
    margin-right: -5px;
}

Apply this at the "column" level.

.col-5-gutter{
    padding-left: 5px;
    padding-right: 5px;
}

demo: http://jsfiddle.net/tg7Ey/

Answer 3

I was looking for a simple solution for this problem, too. My goal was to use simple CSS, not LESS. This answer as like any other i found, based on compiling LESS or using the online compiler of bootstrap. So i tried to find my own solution.

Reading the documentation you will find the following about the gutter-width: Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.

Based on this i tried the following:

.container {padding-left:1px;padding-right:1px;}
.row {margin-left:-1px;margin-right:-1px;}
.row > div {padding-left:1px;padding-right:1px;}

From now the gutter width was only 2 pixel. My next problem was, that my intended width was an odd number. My solution was to remove the paddings and margins on the left and put them completely on the right:

.container {padding-left:0;padding-right:5px;}
.row {margin-left:0;margin-right:-5px;}
.row > div {padding-left:0;padding-right:5px;}

Now i have a 5 pixel gutter width.

I did not tested this in all possible scenarios you can use bootstrap. Especially you have to pay attention to use only column-div's inside a row-div inside a container-div. But in my case it was a very effective solution without touching the origin source code of bootstrap or using a LESS compiler.