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 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

Answer 1

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 

Answer 2

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