Customizing number of columns in Bootstrap 3

Customizing number of columns in Bootstrap 3

For anyone who happens upon this question: This issue seems to have been resolved in a subsequent update to Bootstrap. You can now download a custom Bootstrap 3 build, specifying the number of desired columns with the @grid-columns setting.
Original Question:
I’m trying to customize the Bootstrap 3 grid system to use 24 columns rather than the default 12.
As recommended in a number of answers here, I’m attempting to customize the assets using Bootstrap’s “Customize and Download” page by modifying the @gridColumns, @gridColumnWidth, and @gridGutterWidth variables.
But Bootstrap 3 seems to have done away with those variables:

Bootstrap 3 customization page (e.g., no @gridColumns):
Bootstrap 2 customization page (e.g., @gridColumns option available):

What would be the recommended way of achieving this in Bootstrap 3? Many thanks!


Solution 1:

The customizer for Twitter’s Bootstrap 3.0.0 don’t have a option the set the number of grid columns. It will be planned for the next release 3.0.1, see:

Related:  How to include Glyphicons without using Bootstrap CSS

Also when you download the latest version from and compile your own version. setting @grid-columns in variables.less won’t be enough. The class names of the grid columns are hard coded in grid.less, you will have to change / add these too. See also:

Grid columns are defined dynamically with mixins in grid.less now. You can change @grid-columns to any number and recompile.

Solution 2:

This will set 24 columns if you’re compiling the bootstrap LESS yourself. Remember that the @grid-gutter-width has to be in px, em units won’t work.

@grid-gutter-width: 14px;
@grid-columns: 24;

Solution 3:

You can also check out

… I write more details about why you would want to use it in my blog post, in case you were curious.

To put it short and sweet…You don’t want to alter Twitter Bootstrap because it’s a project that updates with enough frequency that you’re going to get annoyed making your edits all the time.

Related:  Bootstrap glyphicons show wrong icon

This is good practice in general for open source projects — If there is anything you can do over top of them in a non-destructive and non-invasive manner, you should prefer to do that first. Your last ditch effort is to alter the source of the project.

Solution 4:

Late but I built out a solution to this using LESS that doesn’t require modification of Bootstrap.