El sistema de cuadrícula de Bootstrap está construido con flexbox y permite hasta 12 columnas en la página.
Si no desea utilizar las 12 columnas individualmente, puede agruparlas para crear columnas más anchas:
| span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 |
| span 4 | span 4 | span 4 | |||||||||
| span 4 | span 8 | ||||||||||
| span 6 | span 6 | ||||||||||
| span 12 | |||||||||||
El sistema de cuadrícula responde y las columnas se reorganizarán automáticamente según el tamaño de la pantalla.
Asegúrese de que la suma sume 12 o menos (no es necesario que usted utilice las 12 columnas disponibles).
El sistema de grilla Bootstrap 5 tiene seis clases:
.col- (dispositivos muy pequeños: ancho de pantalla inferior a 576 px)
.col-sm- (dispositivos pequeños - ancho de pantalla igual o mayor a 576px)
.col-md- (dispositivos medianos - ancho de pantalla igual o mayor a 768px)
.col-lg- (dispositivos grandes - ancho de pantalla igual o mayor a 992px)
.col-xl- (dispositivos extragrandes: ancho de pantalla igual o superior a 1200 px)
.col-xxl- (dispositivos xxlarge - ancho de pantalla igual o mayor a 1400px)
Las clases anteriores se pueden combinar para crear diseños más dinámicos y flexibles.
Consejo: Cada clase se amplía, por lo que si desea establecer los mismos anchos para sm y md, solo necesita especificar sm.
La siguiente es una estructura básica de una grilla Bootstrap 5:
<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>Primer ejemplo: crea una fila:
<div class="row">Luego, agregue la cantidad deseada de columnas (etiquetas con clases .col-*-* apropiadas). La primera estrella (*) representa la capacidad de respuesta: sm, md, lg, xl o xxl, mientras que la segunda estrella representa un número, que debe sumar 12 para cada fila.
Segundo ejemplo: en lugar de agregar un número a cada col, deje que bootstrap se encargue del diseño para crear columnas de igual ancho: dos " col" elementos=50 % de ancho para cada columna, mientras que tres columnas=33,33 % de ancho para cada columna. Cuatro columnas=25% de ancho, etc. También puede usar .col-sm|md|lg|xl|xxl para que las columnas respondan.
A continuación, recopilamos algunos ejemplos de diseños de cuadrícula básicos de Bootstrap 5.
El siguiente ejemplo muestra cómo crear tres columnas del mismo ancho, en todos Dispositivos y anchos de pantalla:
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>Pruébelo usted mismo →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid mt-3">
<h1>Three equal width columns</h1>
<p>Note: Try to add a new div with class="col" inside the row class - this will create four equal-width columns.</p>
<div class="row">
<div class="col p-3 bg-primary text-white">.col</div>
<div class="col p-3 bg-dark text-white">.col</div>
<div class="col p-3 bg-primary text-white">.col</div>
</div>
</div>
</body>
</html>
El siguiente ejemplo muestra cómo crear cuatro columnas de igual ancho comenzando en tabletas y escalando a escritorios extra grandes. En teléfonos móviles o pantallas de menos de 576 píxeles de ancho, las columnas se apilarán automáticamente uno encima del otro:
<div class="row">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
</div>Pruébelo usted mismo →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid mt-3">
<h1>Responsive Columns</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less than 576px wide.</p>
<div class="row">
<div class="col-sm-3 p-3 bg-primary text-white">.col</div>
<div class="col-sm-3 p-3 bg-dark text-white">.col</div>
<div class="col-sm-3 p-3 bg-primary text-white">.col</div>
<div class="col-sm-3 p-3 bg-dark text-white">.col</div>
</div>
</div>
</body>
</html>
El siguiente ejemplo muestra cómo obtener dos columnas de varios anchos comenzando en tabletas y escalado a escritorios adicionales de gran tamaño:
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>Pruébelo usted mismo →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid mt-3">
<h1>Two Unequal Responsive Columns</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less than 576px wide.</p>
<div class="row">
<div class="col-sm-4 p-3 bg-primary text-white">.col</div>
<div class="col-sm-8 p-3 bg-dark text-white">.col</div>
</div>
</div>
</body>
</html>
Consejo: Aprenderá más sobre el sistema de cuadrícula más adelante en este tutorial.