CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
tino
tino

Reputation: 4830

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:

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

Upvotes: 18

Views: 31794

Answers (4)

BrandonReid
BrandonReid

Reputation: 1314

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;

Upvotes: 1

Drew R
Drew R

Reputation: 3088

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

Upvotes: 0

Tom
Tom

Reputation: 3656

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.

Upvotes: 0

Bass Jobsen
Bass Jobsen

Reputation: 49044

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.

Upvotes: 6

Related Questions