Bootstrap 4 Ejemplos de cuadrícula

Tres columnas iguales

Usa la clase .col en un número específico de elementos y Bootstrap reconocerá cuántos elementos hay (y creará columnas de igual ancho). En el siguiente ejemplo, utilizamos tres elementos col, que obtienen un ancho de 33.33% cada uno.

Ejm

<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

Podemos usar también números para controlar el ancho de las columnas. Debes estar seguro que como mucho la suma de las columnas es 12, no es necesario que utilices las 12 columnas.

Ejm

<div class="row">
   <div class="col-4">col</div>
   <div class="col-4">col</div>
   <div class="col-4">col</div>
</div>

Tres columnas desiguales

Para crear columnas desiguales puedes usar números. El siguiente ejemplo creará una división del 25% / 50% / 25%.

Ejm

<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, es suficiente establecer solo el ancho de una columna y hacer que las columnas hermanas se redimensionen automáticamente a su alrededor. El siguiente ejemplo creará una división del 25% / 50% / 25%.

Ejm

<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

Ejm

<!-- 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>

Row Cols

También puede controlar cuántas columnas deben aparecer una al lado de la otra (independientemente de cuántas columnas), con las clases .row-cols- *.

Ejm

<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>

Igual alto

Si una de las columnas es más alta que la otra (debido a la altura del texto o CSS), el resto seguirá.

Ejm

<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.

Ejm

<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 Responsive

El sistema de cuadrícula Bootstrap 4 tiene cinco clases:

  • .col-: dispositivos extra pequeños: ancho de pantalla inferior a 576 px
  • .col-sm-: dispositivos pequeños: ancho de pantalla igual o superior a 576 px
  • .col-md-: dispositivos medianos: ancho de pantalla igual o superior a 768 px
  • .col-lg-: dispositivos grandes: ancho de pantalla igual o superior a 992 px
  • .col-xl-: dispositivos xlarge: 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.

Consejo: cada clase se escala, por lo que si deseas establecer los mismos anchos para sm y md, solo necesitas especificar sm.

Apilada 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):

Ejm

<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

Ejm

<!-- 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 clase .no-gutters al contenedor .row para eliminar las canaletas (espacio extra).

Ejm

<div class="row no-gutters">