Ejemplos de cuadrícula de Bootstrap 4
A continuación, hemos recopilado algunos ejemplos de diseños de cuadrícula de Bootstrap 4.
tres columnas iguales
Use la .colclase en un número específico de elementos y Bootstrap reconocerá cuántos elementos hay (y creará columnas de igual ancho). En el ejemplo a continuación, usamos tres elementos col, que obtienen un ancho de 33.33% cada uno.
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 la columna. Solo asegúrese de que la suma sume 12 o menos (no es necesario que use 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>
Configuración del ancho de una columna
Sin embargo, es suficiente establecer solo el ancho de una columna y hacer que las columnas hermanas cambien de tamaño automáticamente a su 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
<!-- Two equal columns -->
<div class="row">
<div class="col">1 of 2</div>
<div class="col">2 of 2</div>
</div>
<!-- Four equal columns -->
<div class="row">
<div class="col">1 of 4</div>
<div class="col">2 of 4</div>
<div class="col">3
of 4</div>
<div class="col">4 of 4</div>
</div>
<!-- Six equal columns -->
<div class="row">
<div class="col">1 of 6</div>
<div class="col">2 of 6</div>
<div class="col">3
of 6</div>
<div class="col">4 of 6</div>
<div class="col">5
of 6</div>
<div class="col">6 of 6</div>
</div>
Columnas de fila
También puede controlar cuántas columnas deben aparecer una al lado de la otra (sin importar cuántas columnas), con las .row-cols-*clases:
Ejemplo
<div class="row row-cols-1">
<div class="col">1 of 2</div>
<div class="col">2 of 2</div>
</div>
<div class="row row-cols-2">
<div class="col">1 of 4</div>
<div class="col">2 of 4</div>
<div class="col">3
of 4</div>
<div class="col">4 of 4</div>
</div>
<div class="row row-cols-3">
<div class="col">1 of 6</div>
<div class="col">2 of 6</div>
<div class="col">3
of 6</div>
<div class="col">4 of 6</div>
<div class="col">5
of 6</div>
<div class="col">6 of 6</div>
</div>
Más columnas desiguales
Ejemplo
<!-- Two Unequal
Columns -->
<div class="row">
<div class="col-8">1 of 2</div>
<div class="col-4">2 of 2</div>
</div>
<!-- Four Unequal Columns -->
<div class="row">
<div class="col-2">1 of 4</div>
<div class="col-2">2 of 4</div>
<div class="col-2">3
of 4</div>
<div class="col-6">4 of 4</div>
</div>
<!-- Setting two column widths -->
<div class="row">
<div class="col-4">1 of 4</div>
<div class="col-6">2 of 4</div>
<div class="col">3
of 4</div>
<div class="col">4 of 4</div>
</div>
Altura igual
Si una de las columnas es más alta que la otra (debido a la altura del texto o CSS), el resto seguirá:
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, con otras dos columnas dentro de una de las columnas:
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 receptivas
El sistema de cuadrícula Bootstrap 4 tiene cinco clases:
.col-(dispositivos extrapequeñ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)
Las clases anteriores se pueden combinar para crear diseños más dinámicos y flexibles.
Sugerencia: cada clase se amplía, por lo que si desea establecer los mismos anchos para
smy md, solo necesita especificar sm.
Apilado a Horizontal
El siguiente ejemplo muestra cómo crear un diseño de columna que comienza apilado en dispositivos extra pequeños, antes de volverse 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
<!-- 50%/50% split on extra small devices and 75%/25% split on larger devices
-->
<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>
<!-- 58%/42% split
on extra small, small and medium devices and 66.3%/33.3% split on large and
xlarge devices -->
<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>
<!-- 25%/75% split on small devices, a 50%/50% split
on medium devices, and a 33%/66% split on large and xlarge devices. On extra
small devices, it will automatically stack (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 canalones
Agregue la .no-guttersclase al .rowcontenedor para eliminar canales (espacio extra):
De modo que en su mayor parte, cualquiera de nosotros acudirá al ejercicio de cualquier tipo de empleo excepto para aprovechar los objetivos del mismo.
Ejemplo
<div class="row no-gutters">