Gutter-free columns for Twitter Bootstrap

gistfile1.scss

/*

Occasionally you need to eliminate the gutters from your grid columns. Include
this SCSS in your project and add a class of .row-nogutter to any <div class="row">
to magically remove its gutters. Not incredibly well-tested, but works for me.

This currently only works for standard (non-fluid) grids.

*/

@media (min-width: 768px) and (max-width: 979px) {
    .row-nogutter {
        margin-left: 0;
        [class*="span"] {
            margin-left: 0;
        }
        .span12 {	width: 724px; }
        .span11 {	width: 663px; }
        .span10 {	width: 604px; }
        .span9 {	width: 543px; }
        .span8 {	width: 482px; }
        .span7 {	width: 423px; }
        .span6 {	width: 362px; }
        .span5 {	width: 301px; }
        .span4 {	width: 242px; }
        .span3 {	width: 181px; }
        .span2 {	width: 120px; }
        .span1 {	width: 61px; }
        .offset12 {	margin-left: 724px; }
        .offset11 {	margin-left: 663px; }
        .offset10 {	margin-left: 604px; }
        .offset9 {	margin-left: 543px; }
        .offset8 {	margin-left: 482px; }
        .offset7 {	margin-left: 423px; }
        .offset6 {	margin-left: 362px; }
        .offset5 {	margin-left: 301px; }
        .offset4 {	margin-left: 242px; }
        .offset3 {	margin-left: 181px; }
        .offset2 {	margin-left: 120px; }
        .offset1 {	margin-left: 61px; }
    }
}

@media (min-width: 980px) and (max-width: 1199px) {
    .row-nogutter {
        margin-left: 0;
        [class*="span"] {
            margin-left: 0;
        }
        .span12 {	width: 940px; }
        .span11 {	width: 862px; }
        .span10 {	width: 783px; }
        .span9 {	width: 705px; }
        .span8 {	width: 627px; }
        .span7 {	width: 548px; }
        .span6 {	width: 470px; }
        .span5 {	width: 392px; }
        .span4 {	width: 313px; }
        .span3 {	width: 235px; }
        .span2 {	width: 157px; }
        .span1 {	width: 78px; }
        .offset12 {	margin-left: 940px; }
        .offset11 {	margin-left: 862px; }
        .offset10 {	margin-left: 783px; }
        .offset9 {	margin-left: 705px; }
        .offset8 {	margin-left: 627px; }
        .offset7 {	margin-left: 548px; }
        .offset6 {	margin-left: 470px; }
        .offset5 {	margin-left: 392px; }
        .offset4 {	margin-left: 313px; }
        .offset3 {	margin-left: 235px; }
        .offset2 {	margin-left: 157px; }
        .offset1 {	margin-left: 78px; }
    }
}

@media (min-width: 1200px) {
    .row-nogutter {
        margin-left: 0;
        [class*="span"] {
            margin-left: 0;
        }
        .span12 {	width: 1170px; }
        .span11 {	width: 1072px; }
        .span10 {	width: 975px; }
        .span9 {	width: 877px; }
        .span8 {	width: 780px; }
        .span7 {	width: 682px; }
        .span6 {	width: 585px; }
        .span5 {	width: 487px; }
        .span4 {	width: 390px; }
        .span3 {	width: 293px; }
        .span2 {	width: 195px; }
        .span1 {	width: 97px; }
        .offset12 {	margin-left: 1170px; }
        .offset11 {	margin-left: 1072px; }
        .offset10 {	margin-left: 975px; }
        .offset9 {	margin-left: 877px; }
        .offset8 {	margin-left: 780px; }
        .offset7 {	margin-left: 682px; }
        .offset6 {	margin-left: 585px; }
        .offset5 {	margin-left: 487px; }
        .offset4 {	margin-left: 390px; }
        .offset3 {	margin-left: 293px; }
        .offset2 {	margin-left: 195px; }
        .offset1 {	margin-left: 97px; }
    }
}