Skip to content


Subversion checkout URL

You can clone with
Download ZIP


Reconciling Bootstrap-sass with Bootstrap Issue #1778 for span16 #119

daidekman opened this Issue · 3 comments

3 participants


Forgive me if this is a naive noob question, but I am trying to understand how to adjust the grid system to accommodate up to .span16. It seems that others have had this problem with a potential solution here:

twbs/bootstrap#1778 (comment)

The suggestion is to modify mixins.less. Since we are using sass here, it is not clear to me where to find and modify this file. What is the best approach to achieving these spans while using this gem?

Many thanks.


These variables control what you're after. If you override them before @importing "bootstrap" our Sass grid system (should) automagically generate .span1...16 classes, as well as offsets, input spans etc. You'll need to tweak the sizings to fit, but there seems to be some values you can try in that linked issue. You also only need to override the tablet/large definitions if you'll be using the responsive files.

// --------------------------------------------------

// Default, 940px
// -------------------------
$gridColumns:             12;
$gridColumnWidth:         60px;
$gridGutterWidth:         20px;
$gridRowWidth:            ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1));

// Portrait tablet to default desktop
// -------------------------
$gridColumnWidthTablet:   42px;
$gridGutterWidthTablet:   20px;

// Large desktop and up
// -------------------------
$gridColumnWidthLarge:    70px;
$gridGutterWidthLarge:    30px;

Let me know how you get on.


Thanks for the quick reply. Unfortunately, I'm still struggling with this.

As a test of setting the proper layout, I am aiming for a 16 column responsive grid with a max-width of 1280px.

My simple math is: 16 columns x ( 60px width + 20px gutter) = 1280px. When I set this up, a div with span16 is much wider than 1280px and results in a horizontal scrollbar. I have set up an adjacent div with fixed width: 1280px to compare. A span12 matches the 1280px wide div, which is odd. Something must be off in my setup and I can't discern what it is. My setup on the top lines of my css.scss file is like this:

$gridColumns: 16;
$gridColumnWidth: 60px;
$gridGutterWidth: 20px;
$gridColumnWidthLarge: 60px;
$gridGutterWidthLarge: 20px;
$gridRowWidth: ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1));
@import 'bootstrap';
@import 'bootstrap-responsive';

Any advice would be most welcome.


It seems that this code in not in master branch yet (only in 2.0.3). You can try using 2.0.3 branch by modifying your Gemfile:

gem 'bootstrap-sass', :git => "git://", :branch => "2.0.3"

and then running bundle install

With this branch, 16 columns grid works for me, but I also use compass-rails and have this javascript issue: #134, so I have to disable compass-rails gem or remove //= require bootstrap from my application.js.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.