/*
* @Descripción: Permite hacer 5 columnas responsive en boostrap ocupando el maximo de pantalla
* @Autor: Jorge Palacios Zaratiegui
* @Fecha: 11/08/2016
*/

/* 5 columnas */
.col-xs-2con4,
.col-sm-2con4,
.col-md-2con4,
.col-lg-2con4
{
  position: relative;
  min-height: 1px;
  padding-right: 10px;
  padding-left: 10px;
}
.col-xs-2con4
{
  width: 20%;
  float: left;
}
@media (min-width: 768px)
{
  .col-sm-2con4
  {
    width: 20%;
    float: left;
  }
}
@media (min-width: 992px)
{
  .col-md-2con4
  {
    width: 20%;
    float: left;
  }
}
@media (min-width: 1200px)
{
  .col-lg-2con4
  {
    width: 20%;
    float: left;
  }
}

/*
EJEMPLO PARA HACER 7 COLUMNAS:
------------------------------

Pasos:
	1.- si deseas hacer 5 columnas divides 100 / 5 = 20%
	2.- si deseas hacer 7 columnas divides 100 / 7 = 14.2857142857%
entonces en el caso de 7 el css quedaria de la siguiente forma

.col-xs-17,
.col-sm-17,
.col-md-17,
.col-lg-17 {
position: relative;
min-height: 1px;
max-height: 100%;
padding-bottom: 0px;
margin-bottom: 0px;
padding-right: 10px;
padding-left: 10px;
}
.col-xs-17 {
width: 14.2857142857%;
float: left;
}
@media (min-width: 768px) {
.col-sm-17 {
width: 14.2857142857%;
float: left;
}
}
@media (min-width: 992px) {
.col-md-17 {
width: 14.2857142857%;
float: left;
}
}
@media (min-width: 1200px) {
.col-lg-17 {
width: 14.2857142857%;
float: left;
}
}
*/