Customizing number of columns in Bootstrap 3

Customizing number of columns in Bootstrap 3

Update:
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.
http://getbootstrap.com/customize/
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):
http://getbootstrap.com/customize/
Bootstrap 2 customization page (e.g., @gridColumns option available):
http://getbootstrap.com/2.3.2/customize.html

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

Solutions/Answers:

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: https://github.com/twbs/bootstrap/issues/10985

Related:  How to include Glyphicons without using Bootstrap CSS

Also when you download the latest version from github.com/twbs/bootstrap/archive/master.zip 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: https://github.com/twbs/bootstrap/issues/10990

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 http://tmaiaroto.github.io/gridline/

… I write more details about why you would want to use it in my blog post, http://www.shift8creative.com/posts/view/flexible-twitter-bootstrap-grid 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.
https://github.com/drew-r/bootstrap-n-column

References