3 min de lectura

Utilizar un grid es la forma más efectiva de crear el diseño de una página web. Con Bootstrap, podemos usar grids responsivos de forma sencilla y rápida.
Este Framework incluye 4 clases predefinidas en su tercera versión; trabaja para distintos tipos de dispositivos (celulares, tablets, escritorios y escritorios grandes). Gracias a esto puedes controlar como el diseño se renderizará para los diferentes tamaños de pantalla.

Teléfonos (menor a 768px) Tablets (mayor o igual a 768px) Escritorio (mayor o igual a 992px) Escritorio grande (mayor o igual a 1200px)
Ancho máximo de un contenedor auto 728px 940px 1170px
Prefijo de clase CSS .col-xs- .col-sm- .col-md- .col-lg-
Ancho máximo por columna auto 60px 78px 95px

Ejemplo 1 – Grid responsivo.


 

Un grid para mostrar 9 columnas medianas y 18 columnas pequeñas (divididas en 2 filas).


 

Existen 4 clases más que nos apoyan para hacer elementos visibles en tamaños de pantalla especificos.
Cada una de ellas con tres variaciones según el valor de la propiedad display de CSS (inline, block, inline-block):

  • .visible-xs-*
  • .visible-sm-*
  • .visible-md-*
  • .visible-lg-*

Ejemplo 2 – Grid usando las clases visible.


 

Un grid con ciertos elementos que solo son visibles en tablets y en teléfonos.


 

Por otro lado, existe la contraparte de esta clase, es decir, que los elementos NO sean visibles.
Para ello, las variantes ya no son necesarias y solo existen las 4 clases:

  • .hidden-xs
  • .hidden-sm
  • .hidden-md
  • .hidden-lg

Ejemplo 3- Grid usando las clases hidden.


 

Un grid con ciertos elementos que no son visibles en tablets y en teléfonos.

 


Da click aquí para descargar los ejemplos.

DEJA UNA RESPUESTA

Please enter your comment!
Please enter your name here