Cinco colunas iguais no bootstrap 3

Eu criei um método para fazer cinco colunas usando bootstrap 3. Ele requer que você aninhe duas colunas de com col-sm-7 e col-sm-5, então dentro de col-sm-7 três colunas de col-sm4 e dentro do col-sm-5 com duas colunas de col-sm-6.

Existem duas substituições de largura de coluna nas duas colunas externas para garantir que as colunas terminem com a mesma largura.

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

Este é o css que você precisa colocar após o bootstrap carregar para substituir a largura da coluna no col-sm-7 e 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;
    }
}

Aqui está um link para um exemplo:
Bootstrap 3 Exemplo de cinco colunas iguais

Eu geralmente uso minhas colunas como col-sm- <algum número>, pois normalmente deixo as coisas entrarem em colapso após o pequeno ponto de interrupção. É por isso que usei o ponto de interrupção de mídia para permitir que as colunas entrem em tela inteira após o tamanho do tablet pequeno.

Respostas relacionadas:

Alterar o ponto de interrupção do Bootstrap NavBar