Guide to create custom columns for the bootstrap grid system

bootstrap_custom_column.md

Original post: Bootstrap 3: adding a new set of columns

Notice that Bootstrap's CSS uses a mobile first strategy, so it is important to define your xxs-grid (I should choose an other name) between the xs-grid and the sm-grid. See also: Bootstrap 3 mixin multiple make-*-column. For that reason you can not use the Less code from this question Bootstrap 3 extra large (xl) columns

1. Download the Bootstrap source code at: http://getbootstrap.com/getting-started/

2. In less/variables.less add:

   // horizontal mobiles
   @screen-xxs-min:             384px;
   @container-xxs: (336px + @grid-gutter-width);
   

3. Open less/grid.less change the .container class as follows:

   .container {
     .container-fixed();
     @media (min-width: @screen-xxs-min) {
       width: @container-xxs;
     }
   
     @media (min-width: @screen-sm-min) {
       width: @container-sm;
     }
     @media (min-width: @screen-md-min) {
       width: @container-md;
     }
     @media (min-width: @screen-lg-min) {
       width: @container-lg;
     }
   

   and between the Extra small grid and Small grid code add:

   @media (min-width: @screen-xss-min) {
     .make-grid(xss);
   }
   

4. In the 'less/mixins/grid-framework.less' file replace twice

   @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}"; 
   

   with

   @item: ~".col-xs-@{index}, .col-xxs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
   

5. And finally run grunt dist

6. (optional) Add the following code to the /less/mixins/grid.less file

   // Generate the small columns
   .make-xxs-column(@columns; @gutter: @grid-gutter-width) {
     position: relative;
     min-height: 1px;
     padding-left:  (@gutter / 2);
     padding-right: (@gutter / 2);
   
     @media (min-width: @screen-xxs-min) {
       float: left;
       width: percentage((@columns / @grid-columns));
     }
   }
   .make-xxs-column-offset(@columns) {
     @media (min-width: @screen-xxs-min) {
       margin-left: percentage((@columns / @grid-columns));
     }
   }
   .make-xxs-column-push(@columns) {
     @media (min-width: @screen-xxs-min) {
       left: percentage((@columns / @grid-columns));
     }
   }
   .make-xxs-column-pull(@columns) {
     @media (min-width: @screen-xxs-min) {
       right: percentage((@columns / @grid-columns));
     }
   }