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).

Answer 1

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/