Non-Destructive Sass Twitter Bootstrap Gutterless Fluid Grid Hack

README.md

Non-Destructive Sass Twitter Bootstrap Gutterless Fluid Grid Hack

Why?

Sometimes I need a row sans gutters. This uses the same mixins and whathaveyou to create another grid that sits alongside the normal grid.

Difference in Markup

You'll need to wrap your .row-fluid in a .gutterless div.

_gutterless_fluid_grid.scss

// Gutterless Grid
.gutterless {
  // Taken from _grid.scss
  // @include grid-fluid($fluidGridColumnWidth, $fluidGridGutterWidth);
     @include grid-fluid(8.333333333%,          0); // 100%/12 columns

  // Reset utility classes due to specificity
  [class*="span"].hide,
  .row-fluid [class*="span"].hide {
    display: none;
  }

  [class*="span"].pull-right,
  .row-fluid [class*="span"].pull-right {
    float: right;
  }
}

index.html

<div class="gutterless">
  <div class="row-fluid">
    <div class="span3"></div>
    <div class="span9"></div>
  </div>
</div>