Bruno R
Este sistema de Boostrap es la forma mas rapida y facil de crear un diseño de sitio web responsive
Es un sistema construido en FlexBox con enfoque mobile first.
Es totalmente receptivo y utiliza un sistema de 12 columnas (doce columnas disponibles por fila) y seis niveles de respuesta predeterminados.
Resumen de las respuestas predeterminadas:
Esta tabla nos muestra que si utilizamos la .col-sm-* esta se aplicara en todos los tamaños de pantalla si no se especifican las clases para los otros breakpoints.
(esto se repite si por ejemplo utilizamos .col-lg-* en este caso a partir de este breakpoint el tamaño de la columna seria el mismo en los tamaños superiores).
Para crear un sistema de filas y columnas, primero se genera un .container, dentro la fila con la clase row y en esta fila disponemos las columnas con las dimensiones que queramos:
<div class="container">
<!--Fila con dos columnas en un ratio equivalente 1:1-->
<div class="row">
<div class="col-md-6">Column left</div>
<div class="col-md-6">Column right</div>
</div>
<!--Fila con dos columnas en un ratio de 1:2-->
<div class="row">
<div class="col-md-4">Column left</div>
<div class="col-md-8">Column right</div>
</div>
</div>Observando con atencion las filas anteriores, se puede notar que la suma de columnas en col-md-* nunca supera 12. Teniendo esto como base se pueden crear muchos diseños a partir de jugar con los ratios de estas columnas.
Es posible crear columnas del mismo tamaño para todos los tamaños de pantalla utilizando .col (sin nada mas) para cada una de las columnas que queramos tener con el mismo width.
<div class="container">
<!--Fila con dos columnas iguales-->
<div class="row">
<div class="col">Column one</div>
<div class="col">Column two</div>
</div>
<!--Fila con tres columnas iguales-->
<div class="row">
<div class="col">Column one</div>
<div class="col">Column two</div>
<div class="col">Column three</div>
</div>
</div>Tambien se podria combinar estas dos caracteristicas haciendo que una de las columnas tenga un ancho definido y las otras se “amolden” a ella con las medidas-col que les sobre:
<div class="container">
<!--De nuevo fila con dos columnas iguales-->
<div class="row">
<div class="col">Column one</div>
<div class="col">Column two</div>
</div>
<!--Fila con tres columnas divididas en un ratio de 1:2:1-->
<div class="row">
<div class="col">Column one</div>
<div class="col-sm-6">Column two</div>
<div class="col">Column three</div>
</div>
</div>Ahora para crear diseños responsive podemos utilizar distintas distribuciones de columnas segun el breakpoint:
<div class="container">
<!--Aca estamos creando un diseño de dos columnas
para un breakpoint mediano y un diseño de 3 columnas para
un BP large-->
<div class="row">
<div class="col-md-4 col-lg-3">Column one</div>
<div class="col-md-8 col-lg-6">Column two</div>
<div class="col-md-12 col-lg-3">Column three</div>
</div>
</div>En el codigo cuando el tamaño de pantalla es md el numero de col supera 12 por lo que el sobrante pasaria a la siguiente linea. 😁
Las columnas de la cuadricula de Boostrap tambien son anidables, por lo que podemos colocar filas y columnas en una columna existente.
La formula para incorporar estas nuevas columnas sera el mismo que para contenedores, el numero de col en una fila debe ser igual o menor a 12.
<div class="container">
<div class="row">
<div class="col-sm-8">Column left</div>
<div class="col-sm-4">
<!--Columna derecha con filas y columnas anidadas
-->
<div class="row">
<div class="col-12"></div>
</div>
<div class="row">
<div class="col-6"></div>
<div class="col-6"></div>
</div>
</div>
</div>
</div>Se puede usar la clase col-{BP}-auto para ajustar la columna al ancho natural de su contenido.
<div class="container">
<div class="row justify-content-md-center">
<div class="col-md-3">Column left</div>
<div class="col-md-auto">Variable width column</div>
<div class="col-md-3">Column right</div>
</div>
<div class="row">
<div class="col">Column left</div>
<div class="col-auto">Variable width column</div>
<div class="col">Column right</div>
</div>
</div>En estos casos las columnas -auto van a tener un width equivalente al de su contenido, si pusieramos a todas con auto, y el tamaño maximo del contenedor no es suficiente para manterlo sucederia un wrap en la linea que seria feo visualmente.
Para alinear en los ejes X e Y seria igual que con FlexBox.
<div class="container">
<!--Aca se mueve a la parte superior de la fila-->
<div class="row align-items-start">
<div class="col">Column one</div>
<div class="col">Column two</div>
<div class="col">Column three</div>
</div>
<!--Aca se mueve a la parte central de la fila-->
<div class="row align-items-center">
<div class="col">Column one</div>
<div class="col">Column two</div>
<div class="col">Column three</div>
</div>
<!--Aca se mueve a la parte inferior de la fila-->
<div class="row align-items-end">
<div class="col">Column one</div>
<div class="col">Column two</div>
<div class="col">Column three</div>
</div>
</div>Hay que tener en cuenta que se moveran hasta ocupar el alto del contenido, independiente del tamaño de la fila.
<div class="container">
<div class="row">
<div class="col align-self-start">Column one</div>
<div class="col align-self-center">Column two</div>
<div class="col align-self-end">Column three</div>
</div>
</div>Es lo mismo que flexbox, hasta tenemos el around y between.
Incluso podemos cambiar el orden visual:
<div class="container">
<div class="row">
<div class="col order-last">First, but ordered at last</div>
<div class="col">Second, but unordered</div>
<div class="col order-first">Last, but ordered at first</div>
</div>
</div>Tambien mediante order-*
<div class="container">
<div class="row">
<div class="col order-4">First, but ordered at last</div>
<div class="col">Second, but ordered at first</div>
<div class="col order-1">Last, but ordered at second</div>
</div>
</div>Podemos mover las columnas hacia la derecha con fines de alineacion mediante offset-* u offset-{BP}-*.
<div class="container">
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-8"></div>
</div>
<div class="row">
<div class="col-sm-8 offset-sm-4"><!--Column with 4 columns offset--></div>
</div>
</div>Esta clase compensa las columnas aumentando su margen izquierdo.
Se pueden eliminar los gutters predeterinados entre columnas mediante .g-0 en row.
Podemos hacer uso de width al 100% con la clase w-100 para que una columna ocupe todo el ancho del contenedor y asi forzar un salto de linea para las otras columnas.
<div class="container">
<!-- Romper columnas en todos las pantallas -->
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="w-100"></div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
<!-- Romper columnas excepto en xl -->
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="w-100 d-xl-none"></div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
</div>Nota como tengo que utilizar un div de mas para forzar un comportamiento…. boostrap me parece muy sucio tecnicamente.