Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Non-Destructive Sass Twitter Bootstrap Gutterless Fluid Grid Hack

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 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;
}
}
<div class="gutterless">
<div class="row-fluid">
<div class="span3"></div>
<div class="span9"></div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.