Bootstrap 4-Sistema de Rejillas

Tutorial en español de bootstrap 4

En este video aprenderás como usar el sistema de rejilla en Bootstrap 4 o Grid System en Inglés. Bootstrap 4 Implementa un sistema de filas y columnas con los cuales podremos distribuir cada uno de los elementos del diseño en columnas y de esta manera obtenemos un sitio responsive (Amigable a dispositivos móviles).
Cada fila podrá contener módulos de hasta 12 columnas, por ejemplo si quisieras que en una fila hubiera 3 banners del mismo tamaño, solamente deberemos dividir la fila en 3 módulos de 4 columnas para así llegar a 12 y no pasarnos de este valor.

Bootstrap tiene predeterminados los siguientes prefijos para el sistema de rejilla, los cuales podremos usar como clases CSS.

  • container (envolver dentro de un contenedor todos os elementos para que se centren
  • container-fluid (envolver dentro de un contenedor todos los elementos a diferencia del anterior este se ajusta casi al ancho completo del navegador)
  • row (con esta clase escribiremos una fila)
  • col (con esta clase podremos hacer uso de las columnas dentro de una fila). Estas columnas tienen prefijos para las diferentes resoluciones como: col-sm (“small” o pequeños resoluciones como teléfonos), col-md (“medium” resoluciones medianas como tablets,), col-lg (“large”, resoluciones grandes como portátiles y pcs de escritorio), col-xl (“extralarge”, resoluciones extra grandes como televisores o computadores de escritorio con pantallas de alta resolución full hd o más)

Ver Vídeo

Te puede interesar...