Bootstrap Columns Hack - Add additional columns

In Bootstrap 3, you will get default 12 columns that we discussed earlier as well. From 1 to 12 you are able to select which width you need in your grid. For example you can have 3 columns in a row where you may use col-lg-4 as the class name for all 3 divs you create inside the row.

What if we need a customized columns which doesn't support by the default bootstrap css template. You still can add a small piece of code into bootstrap.css file and use it across the application.

Look at the following css;

 .col-xs-1-5,  
 .col-sm-1-5,  
 .col-md-1-5,  
 .col-lg-1-5 {  
   position: relative;  
   min-height: 1px;  
   padding-right: 10px;  
   padding-left: 10px;  
 }  
 .col-xs-1-5 {  
   width: 15%;  
   float: left;  
 }  
 @media (min-width: 768px) {  
 .col-sm-1-5 {  
     width: 15%;  
     float: left;  
   }  
 }  
 @media (min-width: 992px) {  
   .col-md-1-5 {  
     width: 15%;  
     float: left;  
   }  
 }  
 @media (min-width: 1200px) {  
   .col-lg-1-5 {  
     width: 15%;  
     float: left;  
   }  
 }  

in this code, you will get equally width of 15% columns. like below;

 <div class="row">              
             <div class="col-lg-1-5"></div>  
             <div class="col-lg-1-5"></div>  
             <div class="col-lg-1-5"></div>  
             <div class="col-lg-1-5"></div>  
             <div class="col-lg-1-5"></div>  
             <div class="col-lg-1-5"></div>              
 </div>  

So the 15*6 = 90 and you still have 10% left for a column. Just modify the above code to cater for another 10% column.

 /*10% column*/  
 .col-xs-1-0,  
 .col-sm-1-0,  
 .col-md-1-0,  
 .col-lg-1-0 {  
   position: relative;  
   min-height: 1px;  
   padding-right: 10px;  
   padding-left: 10px;  
 }  
 .col-xs-1-0 {  
   width: 10%;  
   float: left;  
 }  
 @media (min-width: 768px) {  
 .col-sm-1-0 {  
     width: 10%;  
     float: left;  
   }  
 }  
 @media (min-width: 992px) {  
   .col-md-1-0 {  
     width: 10%;  
     float: left;  
   }  
 }  
 @media (min-width: 1200px) {  
   .col-lg-1-0 {  
     width: 10%;  
     float: left;  
   }  
 }  

So the complete code for 100% for the page will be look like below;

 <div class="row">  
             <div class="col-lg-1-0"></div>  
             <div class="col-lg-1-5"></div>  
             <div class="col-lg-1-5"></div>  
             <div class="col-lg-1-5"></div>  
             <div class="col-lg-1-5"></div>  
             <div class="col-lg-1-5"></div>  
             <div class="col-lg-1-5"></div>              
</div>  

So you will get 15% equally divided 6 columns and a 10% column at first. This way, it is possible to add extra columns as much as needed.

Happy coding...!