Last Updated: September 29, 2021
·
63.84K
· bradrice

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:

Change the Bootstrap NavBar Breakpoint

5 Responses
Add your response

nice and simple! thanks for the tip!

over 1 year ago ·

I extrapolated your suggestion, but, I think, came up with a simpler technique: http://jsbin.com/UFoRIYex/740/edit

over 1 year ago ·

It's a good link for the issue: http://jsfiddle.net/sct3j/3/

over 1 year ago ·

var cols = $(".container .item").length;
if (cols == 5){
$('div.item').removeClass('col-md-2..etc').addClass('col-md-3').css('width', '20%');
}

over 1 year ago ·

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;
}
}

over 1 year ago ·