La Grid de Bootstrap
El sistema de grid de Bootstrap es una de sus características más potentes. Te permite estructurar contenido de manera flexible y responsiva usando contenedores, filas, columnas y algunas opciones adicionales como offset. Aquí te explico cada componente con ejemplos:
1. Contenedor (container)
El contenedor es el elemento principal que encapsula el contenido de tu grid. Bootstrap ofrece tres tipos:
.container: Tiene un ancho fijo y se adapta en función del tamaño de la pantalla..container-fluid: Ocupa el 100% del ancho de la pantalla..container-{breakpoint}: Cambia de ancho fijo a fluido dependiendo del punto de quiebre (breakpoint).
Ejemplo:
html
<div class="container">
Contenido aquí dentro
</div>
<div class="container-fluid">
Contenido fluido
</div>
2. Filas (row)
Las filas dividen tu diseño horizontalmente y son necesarias para contener las columnas.
Ejemplo:
html
<div class="container">
<div class="row">
<div class="col">Columna 1</div>
<div class="col">Columna 2</div>
</div>
</div>
3. Columnas (col)
Las columnas dentro de una fila usan un sistema de 12 columnas. Puedes especificar cuántas ocupará cada una con clases como .col-4 o .col-6.
Ejemplo:
html
<div class="container">
<div class="row">
<div class="col-6">Columna 1 (6 columnas)</div>
<div class="col-6">Columna 2 (6 columnas)</div>
</div>
</div>
4. Columnas dentro de columnas
Puedes anidar columnas colocando filas dentro de columnas.
Ejemplo:
html
<div class="container">
<div class="row">
<div class="col">
<div class="row">
<div class="col-6">Anidado 1</div>
<div class="col-6">Anidado 2</div>
</div>
</div>
<div class="col">Columna separada</div>
</div>
</div>
5. Offset
El offset agrega espacio en blanco a la izquierda de una columna para centrar o alinear el contenido.
Ejemplo:
html
<div class="container">
<div class="row">
<div class="col-4 offset-4">Columna centrada</div>
</div>
</div>
6. Responsividad
Puedes usar los puntos de quiebre para controlar el diseño en diferentes tamaños de pantalla:
- Extra pequeño (por defecto):
<576px - Pequeño (
sm):>=576px - Mediano (
md):>=768px - Grande (
lg):>=992px - Extra grande (
xl):>=1200px - Extra extra grande (
xxl):>=1400px
Ejemplo:
html
<div class="container">
<div class="row">
<div class="col-12 col-md-6 col-lg-4">Responsivo 1</div>
<div class="col-12 col-md-6 col-lg-4">Responsivo 2</div>
<div class="col-12 col-md-6 col-lg-4">Responsivo 3</div>
</div>
</div>
7. Gap (espaciado entre filas y columnas)
A partir de Bootstrap 5, puedes usar clases como g-2 para controlar el espacio entre filas y columnas.
Ejemplo:
html
<div class="container">
<div class="row g-3">
<div class="col">Columna 1</div>
<div class="col">Columna 2</div>
</div>
</div>
Con esto tienes una visión completa de cómo usar el sistema de grid en Bootstrap. ¡Adelante, prueba y crea diseños fantásticos!
