Bootstrap 5: ejemplos de cuadrículas

Tabla de contenido

    Mostrar tabla de contenidos

A continuación, recopilamos algunos ejemplos de diseños de cuadrícula de Bootstrap 5.

Tres columnas iguales

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

col
col
col

Ejemplo

<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">
  <h2>Three Equal Columns</h2>
  <p>Use the .col class on a specified number of elements and Bootstrap will recognize how many elements there are (and create equal-width columns). In the example below, we use three col elements, which gets a width of 33.33% each.</p>
  <div class="row">
    <div class="col bg-success">.col</div>
    <div class="col bg-warning">.col</div>
    <div class="col bg-success">.col</div>
  </div>
</div>

</body>
</html>

Tres columnas iguales usando números

También puede utilizar números para controlar el ancho de la columna. Solo asegúrese de que la suma sume 12 o menos (no es necesario que utilice las 12 columnas disponibles):

col-4
col-4
col-4

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>

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">
  <h2>Three Equal Columns</h2>
  <p>You can also use numbers to control the column width. Just make sure that the sum always adds up to 12:</p>
  <div class="row">
    <div class="col-4 bg-success">.col-4</div>
    <div class="col-4 bg-warning">.col-4</div>
    <div class="col-4 bg-success">.col-4</div>
  </div>
</div>

</body>
</html>

Tres columnas desiguales

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

col-3
col-6
col-3

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>

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">
  <h2>Three Unequal Columns</h2>
  <p>To create unequal columns, you have to use numbers. The following example will create a 25%/50%/25% split:</p>
  <div class="row">
    <div class="col-3 bg-success">.col-3</div>
    <div class="col-6 bg-warning">.col-6</div>
    <div class="col-3 bg-success">.col-3</div>
  </div>
</div>

</body>
</html>

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 automáticamente su tamaño a su alrededor. El siguiente ejemplo creará una división del 25%/50%/25%:

col
col-6
col

Ejemplo

<div class="row">
  <div class="col">col</div>
  <div class="col-6">col-6</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">
  <h2>Three Unequal Columns</h2>
  <p>It is enough to only set the width of one column, and have the sibling columns automatically resize around it. The following example will create a 25%/50%/25% split:</p>
  <div class="row">
    <div class="col bg-success">.col</div>
    <div class="col-6 bg-warning">.col-6</div>
    <div class="col bg-success">.col</div>
  </div>
</div>

</body>
</html>

Más columnas iguales

1 of 2
2 of 2
1 of 4
2 of 4
3 of 4
4 of 4
1 of 6
2 of 6
3 of 6
4 of 6
5 of 6
6 of 6

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>

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">
  <h2>More Equal Columns</h2>
  <div class="row">
    <div class="col bg-success">1 of 2</div>
    <div class="col bg-warning">2 of 2</div>
  </div>
  <br>
  <div class="row">
    <div class="col bg-success">1 of 4</div>
    <div class="col bg-warning">2 of 4</div>
    <div class="col bg-success">3 of 4</div>
    <div class="col bg-warning">4 of 4</div>
  </div>
  <br>
  <div class="row">
    <div class="col bg-success">1 of 6</div>
    <div class="col bg-warning">2 of 6</div>
    <div class="col bg-success">3 of 6</div>
    <div class="col bg-warning">4 of 6</div>
    <div class="col bg-success">5 of 6</div>
    <div class="col bg-warning">6 of 6</div>
  </div>
</div>

</body>
</html>

Cols de fila

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

1 of 2
2 of 2

1 of 4
2 of 4
3 of 4
4 of 4

1 of 6
2 of 6
3 of 6
4 of 6
5 of 6
6 of 6

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>

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">
  <h2>Row Cols</h2>
  <p>The .row-cols-* classes are used to set the number of columns that should appear next to each other.</p>

  <div class="row row-cols-1">
    <div class="col bg-success">1 of 2</div>
    <div class="col bg-warning">2 of 2</div>
  </div>
  <br>
  <div class="row row-cols-2">
    <div class="col bg-success">1 of 4</div>
    <div class="col bg-warning">2 of 4</div>
    <div class="col bg-success">3 of 4</div>
    <div class="col bg-warning">4 of 4</div>
  </div>
  <br>
  <div class="row row-cols-3">
    <div class="col bg-success">1 of 6</div>
    <div class="col bg-warning">2 of 6</div>
    <div class="col bg-success">3 of 6</div>
    <div class="col bg-warning">4 of 6</div>
    <div class="col bg-success">5 of 6</div>
    <div class="col bg-warning">6 of 6</div>
  </div>
</div>

</body>
</html>

Más columnas desiguales

1 of 2
2 of 2
1 of 4
2 of 4
3 of 4
4 of 4
1 of 4
2 of 4
3 of 4
4 of 4

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>

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">
  <h2>More Unequal Columns</h2>
  <div class="row">
    <div class="col-8 bg-success">1 of 2</div>
    <div class="col-4 bg-warning">2 of 2</div>
  </div>
  <br>
  <div class="row">
    <div class="col-2 bg-success">1 of 4</div>
    <div class="col-2 bg-warning">2 of 4</div>
    <div class="col-2 bg-success">3 of 4</div>
    <div class="col-6 bg-warning">4  of 4</div>
  </div>
  <br>
  <div class="row">
    <div class="col-4 bg-success">1 of 4</div>
    <div class="col-6 bg-warning">2 of 4</div>
    <div class="col bg-success">3 of 4</div>
    <div class="col bg-warning">4  of 4</div>
  </div>
</div>

</body>
</html>

Igual altura

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

Lorem ipsum dolor sit amet, cibo sensibus interesset no sit. Et dolor possim volutpat qui. No malis tollit iriure eam, et vel tale zril blandit, rebum vidisse nostrum qui eu. No nostrud dolorem legendos mea, ea eum mucius oporteat platonem.Eam an case scribentur, ei clita causae cum, alia debet eu vel.
col
col

Ejemplo

<div class="row">
  <div class="col">Lorem ipsum...</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">
  <h2>Equal Height</h2>
  <p>If one of the column is taller than the other, the rest will follow.</p>
</div>

<div class="container-fluid">
  <div class="row">
    <div class="col bg-success">Lorem ipsum dolor sit amet, cibo sensibus interesset no sit. Et dolor possim volutpat qui. No malis tollit iriure eam, et vel tale zril blandit, rebum vidisse nostrum qui eu. No nostrud dolorem legendos mea, ea eum mucius oporteat platonem.Eam an case scribentur, ei clita causae cum, alia debet eu vel.</div>
    <div class="col bg-warning">.col</div>
    <div class="col bg-success">.col</div>
  </div>
</div>

</body>
</html>

Columnas anidadas

col-8
col-6
col-6
col-4

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>

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">
  <h2>Nested Columns</h2>
  <p>Add columns inside other columns:</p>
</div>

<div class="container-fluid">
  <div class="row">
    <div class="col-8 bg-warning p-4">
      .col-8
      <div class="row">
        <div class="col-6 bg-light p-2">.col-6</div>
        <div class="col-6 bg-secondary p-2">.col-6</div>
      </div>
    </div>
    <div class="col-4 bg-success p-4">.col-4</div>
  </div>
</div>

</body>
</html>

Clases Responsivas

El sistema de cuadrícula Bootstrap 5 tiene cinco 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 xxl - 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.

Apilado en horizontal

col-sm-9
col-sm-3
col-sm
col-sm
col-sm

El siguiente ejemplo muestra cómo crear un diseño de columnas que comienza apilado en dispositivos muy 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><

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>Stacked to Horizontal</h1>
  <p>Resize the browser window to see the effect.</p> 
  <p>This example demonstrates a 75%/25% split on small, medium, large and xlarge devices. On extra small devices, it will stack (100% width).</p>      
  <div class="container-fluid">     
    <div class="row">
      <div class="col-sm-9 bg-success">col-sm-9</div>
      <div class="col-sm-3 bg-warning">col-sm-3</div>
    </div>
  </div>
  <br>
  <p>This example demonstrates a 33% split on small, medium, large and xlarge devices. On extra small devices, it will stack (100% width).</p>      
  <div class="container-fluid">     
    <div class="row">
      <div class="col-sm bg-success">col-sm</div>
      <div class="col-sm bg-warning">col-sm</div>
      <div class="col-sm bg-success">col-sm</div>
    </div>
  </div>
</div>
    
</body>
</html>

Mezclar y combinar

col-6 col-sm-9
col-6 col-sm-3
col-7 col-lg-8
col-5 col-lg-4
col-sm-3 col-md-6 col-lg-4
col-sm-9 col-md-6 col-lg-8

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>

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>Mix and Match</h1>
  <p>Resize the browser window to see the effect.</p> 
  <p>This example demonstrates a 50%/50% split on extra small devices and 75%/25% split on larger devices.</p>      
  <div class="container-fluid">     
    <div class="row">
      <div class="col-6 col-sm-9 bg-success">col-6 col-sm-9</div>
      <div class="col-6 col-sm-3 bg-warning">col-6 col-sm-3</div>
    </div>
  </div>
  <br>
  <p>This example demonstrates a 58%/42% split on extra small, small and medium devices and 66.3%/33.3% split on large and xlarge devices.</p>      
  <div class="container-fluid">     
    <div class="row">
      <div class="col-7 col-lg-8 bg-success">col-7 col-lg-8</div>
      <div class="col-5 col-lg-4 bg-warning">col-5 col-lg-4</div>
    </div>
  </div>
  <br>
  <p>This example demonstrates a 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%).</p>      
  <div class="container-fluid">     
    <div class="row">
      <div class="col-sm-3 col-md-6 col-lg-4 bg-success">col-sm-3 col-md-6 col-lg-4</div>
      <div class="col-sm-9 col-md-6 col-lg-8 bg-warning">col-sm-9 col-md-6 col-lg-8</div>
    </div>
  </div>
</div>

</body>
</html>

Sin canalones

Para cambiar los medianiles (espacio adicional) entre columnas, use cualquiera de las clases .g-1|2|3|4|5 (.g-4 es el valor predeterminado).

Para eliminar el canal por completo, utilice .g-0:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Ejemplo

<div class="row g-0">

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>No Gutters</h1>
  <p>To change the gutters (extra space) between columns, use any of the <code class="w3-codespan">.g-1|2|3|4|5</code> classes 
  (<code class="w3-codespan">.g-4</code> is default). </p>
  <p>To remove the gutters completely, use <code class="w3-codespan">.g-0</code>:</p>

  <div class="container-fluid">
    <div class="row g-0">
      <div class="col-3 bg-success">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </div>
      <div class="col-9 bg-warning">
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
      </div>
    </div>
  </div>
</div>

</body>
</html>