# Columnas de ancho específico

A continuación se incluyen algunos ejemplos de uso del sistema de rejilla que nos ayudarán a comprender mejor su funcionamiento.

## Selección de tamaño de las columnas solo para pantallas medianas

En el siguiente ejemplo se han creado 3 filas, la primera dividida en 2 columnas de tamaño desigual, la segunda en 3 columnas de igual tamaño y la tercera en 2 columnas también de igual tamaño.

```markup
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>
```

En la siguiente imagen se puede ver el resultado para pantallas de tamaño mediano (tamaños de md en adelante):

![](https://1054187771-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwrBJxgy_ZRPvMOsNE_%2F-LwrBLlal1mEQfNCAW2m%2F-LwrBQkOuzx1zMRpGgtE%2Fejemplo-col-ancho-especifico-1.png?generation=1577179034683309\&alt=media)

> Para poder visualizar las columnas se ha añadido una clase CSS que establece color para el borde y el fondo de las cajas. Por defecto, ni la etiqueta DIV ni las etiquetas .col-\* establecen apariencia (ni color de borde ni de fondo), solamente establecen la anchura, y por lo tanto al renderizar el código anterior tal cual las cajas se verán transparentes.

Dado que las columnas se han especificado únicamente mediante las clases `.col-md-*` esto creará estas divisiones solo para las pantallas medianas y grandes, pero no para los tamaños de pantalla más pequeños. En este último caso las columnas se ampliarán para ocupar todo el ancho y por lo tanto se mostrarán apiladas de la forma:

![](https://1054187771-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwrBJxgy_ZRPvMOsNE_%2F-LwrBLlal1mEQfNCAW2m%2F-LwrBQkQ5Ys440d06Q4n%2Fejemplo-col-ancho-especifico-2.png?generation=1577179034607705\&alt=media)

## Selección de dos tamaños de columna: pequeño y mediano

Si no queremos que las columnas se muestren apiladas para tamaños de pantalla pequeños podemos indicar también la disposición para esos casos mediante las clases `.col-*` además de las que ya teníamos con `.col-md-*`. Por ejemplo:

```markup
<!-- En pantallas pequeñas aparecerá una columna que ocupará todo el ancho
y otra que ocupará la mitad de la pantalla -->
<div class="row">
  <div class="col-12 col-md-8">.col-12 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- En pantallas medianas se indica que cada columna ocupe la mitad
del ancho disponible -->
<div class="row">
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Como no se indica el tamaño para pantallas grandes las columnas
siempre ocuparán el 50% -->
<div class="row">
  <div class="col-6">.col-6</div>
  <div class="col-6">.col-6</div>
</div>
```

En la siguiente imagen se puede ver como quedaría el código de ejemplo para pantallas medianas y grandes (tamaños de md en adelante):\
![](https://1054187771-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwrBJxgy_ZRPvMOsNE_%2F-LwrBLlal1mEQfNCAW2m%2F-LwrBQkSln_CePZxxPNa%2Fejemplo-col-2.png?generation=1577179034807861\&alt=media)

En el caso de pantallas pequeñas las columnas se verían de la forma:

![](https://1054187771-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwrBJxgy_ZRPvMOsNE_%2F-LwrBLlal1mEQfNCAW2m%2F-LwrBQkUfjLsaI7pnt77%2Fejemplo-col-3.png?generation=1577179035172721\&alt=media)

## Selección de tres tamaños: extra pequeño, pequeño y mediano

Si queremos tener un mayor control podemos especificar también el tamaño de las columnas para las pantallas tipo *small* con las clases `.col-sm-*`. Por ejemplo:

```markup
<div class="row">
  <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>
```

A continuación se incluye una previsualización de este código de ejemplo para pantallas medianas y grandes (tamaños md, lg y xl):

![](https://1054187771-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwrBJxgy_ZRPvMOsNE_%2F-LwrBLlal1mEQfNCAW2m%2F-LwrBQkWx3sFJvwiYgua%2Fejemplo-col-4.png?generation=1577179034889091\&alt=media)

El mismo código pero en pantallas tipo *small* (tamaño sm) se mostraría como:

![](https://1054187771-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwrBJxgy_ZRPvMOsNE_%2F-LwrBLlal1mEQfNCAW2m%2F-LwrBQkYKeDzecMd82Ae%2Fejemplo-col-6.png?generation=1577179035105906\&alt=media)

Y en el caso de pantallas pequeñas se vería de la forma:

![](https://1054187771-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwrBJxgy_ZRPvMOsNE_%2F-LwrBLlal1mEQfNCAW2m%2F-LwrBQk_TmXyaXMnfMiT%2Fejemplo-col-7.png?generation=1577179034990935\&alt=media)

Además de los tres tamaños indicados en este último ejemplo para la primera columna (`.col-12 .col-sm-6 .col-md-8`) podríamos añadir también, si lo necesitamos, el tamaño para pantallas grandes y extra grandes con col-lg y col-xl-. Por ejemplo, podríamos haber definido la siguiente columna:

```markup
<div class="col-12 col-sm-6 col-md-8 col-lg-9 col-xl-10">...</div>
```

En resumen, podemos indicar **para cada columna** todos los tamaños que queramos de entre los disponibles (con .col-, .col-sm-, .col-md-, .col-lg- y .col-xl-). Sin embargo, **esto solo lo tendremos que hacer** cuando necesitemos establecer un ancho de columna distinto para cada tamaño de pantalla. Si para todos los tamaños de pantalla necesitamos el mismo ancho entonces utilizaremos solamente la clase .col-. Es decir, no tendría sentido escribir algo como "col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6", ya que se conseguiría el mismo efecto que si hubieramos puesto solamente "col-6".

Por lo tanto, solo añadiremos más de una clase cuando necesitemos establecer anchos distintos entre esos tamaños, y además si solo vamos a diferenciar entre 2 tamaños solo será necesario usar 2 etiquetas. Por ejemplo si queremos diferenciar solamente entre movil y escritorio solamente tendríamos que añadir la clase .col- y la clase .col-md-.