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.
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!
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
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.
This will set 24 columns if you’re compiling the bootstrap LESS yourself. Remember that the
@grid-gutter-width has to be in
em units won’t work.
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.
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.
Late but I built out a solution to this using LESS that doesn’t require modification of Bootstrap.
- Database Administration Tutorials
- Programming Tutorials & IT News
- Linux & DevOps World
- Ebook Reviews
- PES Matches, Skills & News