Five equal columns in bootstrap 3
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 are 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;
}
}Here is a link to an example:
Bootstrap 3 Five equal column example
I usually use my columns as col-sm-<some number> 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.
Related protips:
Written by Brad Rice
Related protips
5 Responses
Add your response
I extrapolated your suggestion, but, I think, came up with a simpler technique: http://jsbin.com/UFoRIYex/740/edit
var cols = $(".container .item").length;
if (cols == 5){
$('div.item').removeClass('col-md-2..etc').addClass('col-md-3').css('width', '20%');
}
Very nice I was having and extra right and left 15px padding and update you css like this:
@media (min-width: 768px) {
div.col-sm-7.five-three {
width: 60% !important;
padding-right:0 !important;
}
div.col-sm-5.five-two {
width: 40% !important;
padding-left:0 !important;
}
}