Menu
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/
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!
557
Bootstrap uses a standard 12 column layout, and this cannot be changed. The idea is to combine these columns to have a more flexible website design. For example, if you want 3 columns, you should create elements that each take up 4 columns.
Bootstrap was made for a 12-col usage. If you want to have more columns, you need to define your custom responsive grid, with the help of Bootstrap Less variables (see here). You'll mainly need to change these variables : @grid-columns : Number of columns in the grid. @grid-gutter-width Padding between columns.
Bootstrap uses a 12-column grid system that can update itself responsively based on screen size. There are only 38 highly composite numbers below the one million threshold, including 120, 2520, 5040, 55440 and 720720.
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.
137
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
