Five equal columns
Use two columns with class"col-sm-7 five-three" and class="col-sm-5 five-two"
Inside the first set use class="col-sm-4" three times
Inside the second div use class="col-sm6" two times
Example:
Column 1
Column 2
Column 3
Col 4
Col 5
HTML Code:
<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>
CSS Code:
div.col-sm-7.five-three { width: 60% !important; } div.col-sm-5.five-two { width: 40% !important; }