27

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 the bootstrap site and i tried changing the grid variables in the variables.less file and recompile bootstrap.less using Crunch but for both trials i still have the same result .it is still 12 columns !!! when i try to set a div to be span12 it still takes the whole screen ?

Can anyone guide me to what's wrong i am doing or if someone can generate a 16 and 24 columns versions and send them to me that would be perfect

Dan
  • 9,391
  • 5
  • 41
  • 73
Joseph Girgis
  • 3,115
  • 4
  • 19
  • 20

10 Answers10

18

This method is for an older version of Bootstrap - Version 2.3.1

Click this link to customize bootstrap: http://twitter.github.com/bootstrap/customize.html

You will find examples such as this. Change the parameters to fit your needs.

16 Grid system with Gutter
@gridColumns: 16
@gridColumnWidth: 45px
@gridGutterWidth: 15px
@gridColumnWidth1200: 52.5px
@gridGutterWidth1200: 22.5px
@gridColumnWidth768: 31.5px
@gridGutterWidth768: 15px

16 Grid system without Gutter
@gridColumns: 16
@gridColumnWidth: 60px
@gridGutterWidth: 0px
@gridColumnWidth1200: 75px
@gridGutterWidth1200: 0px
@gridColumnWidth768: 46.5px
@gridGutterWidth768: 0px

24 Grid system with Gutter
@gridColumns: 24
@gridColumnWidth: 30px
@gridGutterWidth: 1px
@gridColumnWidth1200: 35px
@gridGutterWidth1200: 15px
@gridColumnWidth768: 21px
@gridGutterWidth768: 10px

24 Grid system without Gutter
@gridColumns: 24
@gridColumnWidth: 40px
@gridGutterWidth: 0px
@gridColumnWidth1200: 50px
@gridGutterWidth1200: 0px
@gridColumnWidth768: 31px
@gridGutterWidth768: 0px
shloosh
  • 525
  • 7
  • 10
Hasan Atbinici
  • 189
  • 1
  • 3
16

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

Hakkı
  • 811
  • 2
  • 13
  • 23
  • this is a pretty decent work around I suppose. Will have to do for now. – Piotr Kula Feb 24 '15 at 12:37
  • I still don't understand, how does this make a 12 col grid? – anansharm Jun 15 '15 at 18:27
  • 1
    it is not making 12 column grid. bootstrap splits 12 column your screen. col-md-12 equals width: 100% – Hakkı Jun 17 '15 at 13:15
  • This puts extra padding on first and last col-md-1...any suggested work arounds? As easy as a media css to remove padding-left on first and padding-right on last? – Terry May 12 '16 at 14:18
10

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

Community
  • 1
  • 1
Intenex
  • 1,907
  • 3
  • 20
  • 33
  • I did that in every possible way you can imagine i used the customization page and i compiled the less files using Crunch and simpless and when i look at the css file i find span16 defined but any element that has the class span12 still fill the whole screen as if i didn't do anything !! if you have a customized version with 16 columns can you send it to me.that would be really great . Thanks – Joseph Girgis Jul 22 '12 at 15:28
  • Are you using a fluid-grid? If fluid, you'll have to change the variables 'fluidGridColumnWidth' and 'fluidGridGutterWidth' too to be proportionally smaller (divide by 1.33 for 16 columns) or else span12 will still take up 100% of the width and span16 will take up 134% of the width. Try this, see how it works for you: https://s3.amazonaws.com/intenex/bootstrap16columns.zip. If it still doesn't work, let me know and I'll test it out on my end and see what's happening. – Intenex Jul 23 '12 at 05:00
  • Link no longer works, making this answer useless. – Ian Kemp Mar 01 '21 at 16:53
4

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.
Ian Kemp
  • 28,293
  • 19
  • 112
  • 138
Maciej Gurban
  • 5,615
  • 4
  • 40
  • 55
3

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

User
  • 29
  • 1
  • 1
1

Here is a quick and easy way I found to do 16 columns using nesting...

.no-padding {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
<div class="row">
  <div class="col-md-3 no-padding">
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
  </div>
  <div class="col-md-3 no-padding">
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
  </div>
  <div class="col-md-3 no-padding">
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
  </div>
  <div class="col-md-3 no-padding">
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
  </div>
</div>
<!-- row -->
nico-c-anemone
  • 21
  • 3
  • interesting approach, not sure if this would punish me later but im going to try it just to see how it looks on screen! – Andy Mar 01 '18 at 20:41
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

Arun Prasad E S
  • 9,489
  • 8
  • 74
  • 87
1

Updated 2018

Revisiting this question for the latest Bootstrap 4. Now that Bootstrap 4 is flexbox, and includes auto-layout columns, it's easy to create layouts with any number of n columns...

16 columns

<div class="row">
            <div class="col">
                1
            </div>
            <div class="col">
                2
            </div>
            <div class="col">
                ... to 16
            </div>
</div>

24 columns

<div class="row">
            <div class="col">
                1
            </div>
            <div class="col">
                2
            </div>
            <div class="col">
                ... to 24
            </div>
</div>

Demo: https://www.codeply.com/go/4sQGt2qKyr

Also see: N number of columns in Bootstrap 4

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
-1

Set 24 Columns:

960
35px Column
5px Gutter

1200
40px Column
10px Gutter

768
29px Column
3px Gutter

User
  • 29
  • 1
  • 1
-1

You can override the width attribute with percentage like this:

    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>

It will even maintain the responsive capabilities.

Chieu Nhat Nang
  • 41
  • 3