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