Customizing the Twitter Bootstrap default grid

Question

I'm trying to change the number of columns in the default Bootstrap grid from 12 to 8. According to the Bootstrap docs , this involves changing the @gridColumns variable and then customizing the grids in responsive.less.

I've tried to edit the grids in responsive.less (and the files it imports), but I can't get it right. What specific values do I need to change the grid from 12 columns to 8?

Answer 1

Open up variables.less it contains all of the variables you need to change near the bottom:

@gridColumns:             16;
@gridColumnWidth:         45px;
@gridGutterWidth:         16px;

Make sure you are loading the less and not the css