Ejemplo de rejilla Bootstrap 5
- Página anterior Rejilla BS5 XXL
- Página siguiente Plantilla básica BS5
A continuación, hemos organizado algunos ejemplos de diseño de cuadrícula de Bootstrap 5.
Tres columnas iguales
Usar en la cantidad especificada de elementos .col Clase, Bootstrap reconocerá cuántos elementos hay (y creará columnas de ancho igual). En el siguiente ejemplo, se usaron tres elementos col, cada uno con un ancho del 33.33%.
Ejemplo
<div class="row"> <div class="col">col</div> <div class="col">col</div> <div class="col">col</div> </div>
Tres columnas iguales usando números
También puede usar números para controlar el ancho de las columnas. Asegúrese de que la suma sea igual o menor que 12 (no es necesario usar todas las 12 columnas disponibles):
Ejemplo
<div class="row"> <div class="col-4">col-4</div> <div class="col-4">col-4</div> <div class="col-4">col-4</div> </div>
Tres columnas desiguales
Para crear columnas desiguales, debe usar números. El siguiente ejemplo creará una división de 25%/50%/25%:
Ejemplo
<div class="row"> <div class="col-3">col-3</div> <div class="col-6">col-6</div> <div class="col-3">col-3</div> </div>
Establecer el ancho de una columna
Sin embargo, establecer el ancho de una columna es suficiente, y dejar que las columnas hermanas se ajusten automáticamente alrededor. El siguiente ejemplo creará una división de 25%/50%/25%:
Ejemplo
<div class="row"> <div class="col">col</div> <div class="col-6">col-6</div> <div class="col">col</div> </div>
Más columnas iguales
Ejemplo
<!-- Dos columnas iguales --> <div class="row"> <div class="col">1 de 2</div> <div class="col">2 de 2</div> </div> <!-- Cuatro columnas iguales --> <div class="row"> <div class="col">1 de 4</div> <div class="col">2 de 4</div> <div class="col">3 de 4</div> <div class="col">4 de 4</div> </div> <!-- Seis columnas iguales --> <div class="row"> <div class="col">1 de 6</div> <div class="col">2 de 6</div> <div class="col">3 de 6</div> <div class="col">4 de 6</div> <div class="col">5 de 6</div> <div class="col">6 de 6</div> </div>
Row Cols
También puede usar .row-cols-* El número de columnas controladas debe aparecer al lado de las otras columnas (sin importar cuántas columnas haya):
Ejemplo
<div class="row row-cols-1"> <div class="col">1 de 2</div> <div class="col">2 de 2</div> </div> <div class="row row-cols-2"> <div class="col">1 de 4</div> <div class="col">2 de 4</div> <div class="col">3 de 4</div> <div class="col">4 de 4</div> </div> <div class="row row-cols-3"> <div class="col">1 de 6</div> <div class="col">2 de 6</div> <div class="col">3 de 6</div> <div class="col">4 de 6</div> <div class="col">5 de 6</div> <div class="col">6 de 6</div> </div>
Más columnas desiguales
Ejemplo
<!-- Dos columnas desiguales --> <div class="row"> <div class="col-8">1 de 2</div> <div class="col-4">2 de 2</div> </div> <!-- Cuatro columnas desiguales --> <div class="row"> <div class="col-2">1 de 4</div> <div class="col-2">2 de 4</div> <div class="col-2">3 de 4</div> <div class="col-6">4 de 4</div> </div> <!-- Estableciendo anchos de dos columnas --> <div class="row"> <div class="col-4">1 de 4</div> <div class="col-6">2 de 4</div> <div class="col">3 de 4</div> <div class="col">4 de 4</div> </div>
Altura igual
Si una columna es más alta que la otra (debido a texto o altura CSS), las demás seguirán:
Ejemplo
<div class="row"> <div class="col">Lorem ipsum...</div> <div class="col">col</div> <div class="col">col</div> </div>
Columnas anidadas
El siguiente ejemplo muestra cómo crear un diseño de dos columnas, donde una columna contiene dos columnas adicionales:
Ejemplo
<div class="row">
<div class="col-8">
.col-8
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
<div class="col-4">.col-4</div>
</div>
Clases de respuesta
El sistema de cuadrícula de Bootstrap 5 tiene cinco clases:
.col-(Dispositivos ultrapequeños - anchura de pantalla menor a 576px).col-sm-(Dispositivos pequeños - anchura de pantalla igual o mayor a 576px).col-md-(Dispositivos medianos - anchura de pantalla igual o mayor a 768 píxeles).col-lg-(Dispositivos grandes - anchura de pantalla igual o mayor a 992 píxeles).col-xl-(Dispositivos xlarge - anchura de pantalla igual o mayor a 1200px).col-xxl-(Dispositivos xxlarge - anchura de pantalla igual o mayor a 1400px)
Puede combinar las clases anteriores para crear una disposición más dinámica y flexible.
Consejo:Cada clase se amplía proporcionalmente, por lo que si desea sm y md Para establecer anchos iguales, solo es necesario especificar sm.
Apilado a horizontal
El siguiente ejemplo muestra cómo crear un diseño de columna, que comienza apilado en dispositivos ultrapequeños y luego se convierte en una disposición horizontal en dispositivos más grandes (sm, md, lg y xl):
Ejemplo
<div class="row"> <div class="col-sm-9">col-sm-9</div> <div class="col-sm-3">col-sm-3</div> </div> <div class="row"> <div class="col-sm">col-sm</div> <div class="col-sm">col-sm</div> <div class="col-sm">col-sm</div> </div>
Mezclar y combinar
Ejemplo
<!-- En dispositivos muy pequeños 50%/50% de división, en dispositivos grandes 75%/25% de división --> <div class="row"> <div class="col-6 col-sm-9">col-6 col-sm-9</div> <div class="col-6 col-sm-3">col-6 col-sm-3</div> </div> <!-- En dispositivos muy pequeños, pequeños, medianos 58%/42% de división, en dispositivos grandes y ultra grandes 66.3%/33.3% de división --> <div class="row"> <div class="col-7 col-lg-8">col-7 col-lg-8</div> <div class="col-5 col-lg-4">col-5 col-lg-4</div> </div> <!-- En dispositivos pequeños 25%/75% de división, en dispositivos medianos 50%/50% de división, en dispositivos grandes y ultra grandes 33%/66% de división. En dispositivos muy pequeños, se apilará automáticamente (100%) --> <div class="row"> <div class="col-sm-3 col-md-6 col-lg-4">col-sm-3 col-md-6 col-lg-4</div> <div class="col-sm-9 col-md-6 col-lg-8">col-sm-9 col-md-6 col-lg-8</div> </div>
sin gutter
Si desea cambiar el espacio entre columnas (espacio adicional), utilice cualquier .g-1|2|3|4|5 Clase (.g-4 es el valor predeterminado).
Si desea eliminar completamente la junta (gutter), utilice .g-0:
Ejemplo
<div class="row g-0">
- Página anterior Rejilla BS5 XXL
- Página siguiente Plantilla básica BS5
