How to use bootstrap with 16 or 24 columns

Question

I need some help setting bootstrap 2.0.4 to be 16 or 24 column instead of the default 12 columns i can\'t understand what am i doing wrong i tried the customize option on th

Answer 1

I use Grid 30 columns for my project (Grid 24 and 100 also available)

https://github.com/zirafa/bootstrap-grid-only

some customization may be required depending on you requirement

Answer 2

Edit: Creating grids with custom number of columns has been restored, and can be done on Bootstrap's customization page.

For reasons unknown to me, the latest version of Bootstrap (3.0.0/1) doesn't allow you to create grid different than 12 columns, which is a big shame.

What we can do currently, and which will in turn allow for creating more customized bootstrap packages, is to set up your own Bootstrap customizer.

Edit: I just tried it. Installing all the dependencies went quite smooth while sticking to guidelines on their Docs GitHub page.

Sample generated 24 column grid

Editor required inserting some code along with jsfiddle link. There's no point in pasting anything though.

Answer 3

Set 24 Columns:

960
35px Column
5px Gutter

1200
40px Column
10px Gutter

768
29px Column
3px Gutter

Answer 4

For 24 colums you can split main div

<div class="col-md-12">

    <div class="col-md-6">
        <div class="col-md-1">nothing</div>
        <div class="col-md-1">nothing</div>
        <div class="col-md-1">nothing</div>
        <div class="col-md-1">nothing</div>
        <div class="col-md-1">nothing</div>
        <div class="col-md-1">nothing</div>
        <div class="col-md-1">nothing</div>
        <div class="col-md-1">nothing</div>
        <div class="col-md-1">nothing</div>
        <div class="col-md-1">nothing</div>
        <div class="col-md-1">nothing</div>
        <div class="col-md-1">nothing</div>
    </div>

    <div class="col-md-6">12 here</div>

</div>

codepen demo

Answer 5

16 Column

960px

45px *16 =720 Column

15px *16 =240 Gutter

1200px

53px *16 =848 Column

22px *16 =352 Gutter

768px

33px *16 =528 Column

15px *16 =240 Gutter

Answer 6

Simple enough to alter in less - http://twitter.github.com/bootstrap/scaffolding.html#gridCustomization

You'll want to change the variables there to what you want -

e.g.

@gridColumns: 24
@gridColumnWidth: 30px
@gridGutterWidth: 10px

If using a fluid-grid, you'll want to change these variables proportionally too, otherwise span12 will still take up 100% of the width and span24 will take up 200%

@fluidGridColumnWidth
@fluidGridGutterWidth

As stated:

How to customize

Modifying the grid means changing the three @grid* variables and recompiling Bootstrap. Change the grid variables in variables.less and use one of the four ways documented to recompile. If you're adding more columns, be sure to add the CSS for those in grid.less.

You can change the variables and download the new css right here: http://twitter.github.com/bootstrap/download.html#variables

Here's a compiled example that should work for 16 columns (haven't tested, let me know how it works): https://s3.amazonaws.com/intenex/bootstrap16columns.zip