Sistema de Rejilla
El sistema de rejilla de Bootstrap se basa en la creación o disposición del contenido de nuestra web dentro de rejillas flexibles, las cuales se escalarán al tamaño y posición adecuada de forma automática dependiendo del tamaño de la pantalla en la que se rendericen.
Elemento contenedor
El sistema de rejilla tiene que ser utilizado dentro de uno de los dos elementos contenedores que provee Bootstrap: container ó container-fluid. Es importante tener en cuenta que estos elementos se utilizan como raíz de la rejilla y no se podrán anidar unos dentro de otros.
Si lo que queremos es que el contenido de nuestra web aparezca centrado y con un ancho fijo entonces podemos utilizar la etiqueta .container, de la forma:
Por el contrario, si queremos que el contenido de nuestra web pueda ocupar todo el ancho disponible (hay que tener en mente todos los tamaños de pantalla, incluso las muy grandes), podemos usar la etiqueta .container-fluid:
Funcionamiento del sistema de rejilla
El sistema de rejilla está pensado para ayudarnos en la disposición de los contenidos de nuestra web y su adaptación a los diferentes tamaños de pantalla de forma automática. Para ello tenemos que poner el contenido dentro de celdas o columnas que irán dentro de filas. Cada fila se puede dividir hasta en 12 columnas, pero seremos nosotros los que definiremos el número de columnas deseado para cada tamaño de pantalla.
A continuación se detalla el funcionamiento de este sistema:
Las columnas irán agrupadas dentro de filas (
.row).Las filas (
.row) se deben colocar dentro de una etiqueta contenedora:.container(para ancho fijo) o.container-fluid(para poder ocupar todo el ancho), esto permitirá alinear las celdas y asignarles el espaciado correcto.El contenido se debe disponer dentro de columnas o celdas, las cuales deben de ser el único hijo posible de las filas (
.row), las cuales, a su vez, serán el único hijo posible del contenedor (.containero.container-fluid).Al seguir este orden el sistema de rejilla funcionará correctamente, creando el espaciado interior y los márgenes apropiados dependiendo de las dimensiones de la pantalla.
Cada fila se puede dividir hasta un máximo de 12 columnas, pero somos nosotros los que tendremos que definir el número de columnas en el que queremos dividir cada fila y su ancho para cada tamaño de pantalla. Por ejemplo: 3 columnas de igual ancho.
Si el tamaño total de las columnas de una fila excede de 12 el tamaño sobrante se colocará en la siguiente fila.
El tamaño de las columnas se especificará con clases css que Bootstrap define para cada tamaño de pantalla, por ejemplo
.col-md-XX, dondeXXes el tamaño de la columna, que podrá tomar valores entre 1 y 12.
En la siguiente tabla se muestra un resumen del sistema de rejilla de Bootstrap, su comportamiento según el tamaño del dispositivo y las clases CSS que nos permiten controlarlo:
Pantalla
Prefijo de la clase
Ancho del contenedor
Tamaño extra pequeño Teléfonos (<768px)
.col-xs-
Ninguno (automático)
Tamaño pequeño Tablets (≥768px)
.col-sm-
750px
Tamaño medio Escritorios (≥992px)
.col-md-
970px
Tamaño grande Escritorios (≥1200px)
.col-lg-
1170px
Es importante destacar al definir estas clases no solo se aplican para ese tamaño de pantalla sino para los superiores también. Por ejemplo al indicar el tamaño de las columnas con las clases para tablets (.col-sm-), también se aplicará para los tamaños de pantalla medianos y grandes (si no hubieran otras clases para estos tamaños que los sobreescribieran).
Ejemplos
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 de escritorio
En el siguiente ejemplo se han creado 3 filas, la primera dividida 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.
En la siguiente imagen se puede ver el resultado para una pantalla mediana (de escritorio):
Dado que las columnas se han especificado únicamente mediante las clases .col-md-* esto creará estas divisiones solo para las pantallas de escritorio medianas y grandes, pero no para los tamaños de pantalla pequeños (tablets y móviles). En estos dos últimos casos las columnas se ampliarán para ocupar todo el ancho y por lo tanto se mostrarán apiladas de la forma:
Selección del tamaño para móvil y escritorio
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-xs-* además de las que ya teníamos .col-md-*. Por ejemplo:
En la siguiente imagen se puede ver como quedaría el código de ejemplo para pantallas medianas (md) y grandes (lg):
En el caso de pantallas pequeñas las columnas se verían de la forma:
Selección del tamaño para móvil, tablet y escritorio
Si queremos tener un mayor control podemos especificar también el tamaño de las columnas para las pantallas tipo tablet con las clases .col-sm-*. Por ejemplo:
A continuación se incluye una previsualización de este código de ejemplo para pantallas medianas y grandes:
El mismo código pero en pantallas tipo tablet se mostraría como:
Y en el caso de pantallas pequeñas (xs) se vería de la forma:
Última actualización
¿Te fue útil?
