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.