Tos Web Developer - Drupal Developer And Web Developer Helping Blog

I've created a method to do five columns using bootstrap 3. It requires you to nest two columns of with col-sm-7 and col-sm-5, then inside of the col-sm-7 three columns of col-sm4 and inside the col-sm-5 with two columns of col-sm-6.

There there is two column width overrides on the outside two columns to make sure the columns end up with equal width.

 <div class="col-sm-12">  
   <div class="row">  
    <div class="col-sm-7 five-three">  
     <div class="row">  
      <div class="col-sm-4">  
      Column 1  
      </div>  
      <div class="col-sm-4">  
      Column 2  
      </div>  
      <div class="col-sm-4">  
      Column 3  
      </div><!-- end inner row -->  
     </div>  
    </div>  
    <div class="col-sm-5 five-two">  
     <div class="row">  
      <div class="col-sm-6">  
       Col 4  
      </div>  
      <div class="col-sm-6">  
      Col 5  
      </div>  
     </div><!-- end inner row -->  
    </div>  
   </div>​<!-- end outer row -->  
  </div>  

This is the CSS you need to put in after your bootstrap loads to over-ride the column width on the col-sm-7 and col-sm-5

 @media (min-width: 768px) {  
   div.col-sm-7.five-three {  
   width: 60% !important;  
   }  
   div.col-sm-5.five-two {  
   width: 40% !important;  
   }  
 }  

I usually use my columns as col-sm- as I usually let things collapse after the small breakpoint. That's why I used the media breakpoint to allow the columns to go full screen after the small tablet size.

Thanks for following TOsTech

Like our Facebook page
https://goo.gl/2kaXBc

Subscribe us on YouTube and help us growing
https://goo.gl/BQuUy3

Follow on Instagram account
https://goo.gl/LVWUQ5

Also, Read And Follow our Blog
https://goo.gl/55WrBR

Follow on LinkedIn -
https://goo.gl/tXXfAy

Thank u and keep supporting👍

- TOsTech team

Stay Connected Stay Techy

TOsTech Team