BOOTSTRAP 16 COLUMN GRID SOLUTION

Most of the novice Bootstrap developers think that with Bootstrap they can only convert a 12 column grid Photoshop design into a responsive HTML. Recently, one my developer friend was working on project which he was doing for a client in Dubai. The design had been approved and the client wanted HTML based on Bootstrap framework.

Unfortunately the home page was designed in 16 column grid system. My friend asked me if I can be any help, I have been using the Bootstrap for 12 column grid designs and didn’t experience such situation. As the Bootstrap CSS file has styles for only 12 columns, for example it starts from ‘col-sm-1’ and goes up to ‘col-sm-12’ which shows that it doesn’t support 16 column grid designs.

I tried to find online help for this situation but couldn’t find anything or might be my search queries weren’t good enough. After the flop search, I started playing around with the CSS and HTML to get a solution and yes I did it ;). I have got the solution which I am going to share with you.

I am going to convert the following 16 grid column design into html using Bootstrap responsive frame work:

Here is the solution, it is really easy; you just need some nested DIV and a little CSS changes to get the 16 column grid HTML in Bootstrap.

HTML CODE:

          <div class="row">
 		<div class="col-sm-6">
 			<div class="row">
                 <div class="col-sm-3">
                     <span class="box1">col1</span>
                 </div>
                 <div class="col-sm-3">
                     <span class="box2">col2</span>
                 </div>
                 <div class="col-sm-3">
                     <span class="box3">col3</span>
                 </div>
                 <div class="col-sm-3">
                     <span class="box4">col4</span>
                 </div>
 			</div> <!-- .row -->       
 		</div><!-- .span6 -->
 
          <div class="col-sm-6">
          	<div class="row">
                 <div class="col-sm-3">
                     <span class="box5">col5</span>
                 </div>
                 <div class="col-sm-3">
                     <span class="box6">col6</span>
                 </div>
                 <div class="col-sm-3">
                     <span class="box7">col7</span>
                 </div>
                 <div class="col-sm-3">
                     <span class="box8">col8</span>
                 </div>
             </div> <!-- .row --> 
          </div><!-- .span6 -->
  </div>          

CSS CODE

     <style>
 	.col-sm-6, .col-sm-3 { padding:0;}
	 /* To remove the default bootstrap grid 15px left and right padding  */
 	.row { margin:0;} /* to set the margin-right:-15px; and margin-left:-15px to 0px */
 	.box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8{
	 background:#00CCFF; height:100px; text-align:center; padding-top:40px;
	 display:block; margin:10px; }
 
 	.box1, .box5 { background:#aab501;}
 	.box2, .box6 { background:#00a5b5;}
 	.box3, .box7 { background:#b50464;}
 	.box4, .box8 { background:#8aa9c1;}
 
 
 	</style>