Construyendo un diseño responsive con Bootstrap Grid: Descubre cómo adaptar tus diseños a diferentes tamaños de pantalla utilizando las clases del sistema de grid de Bootstrap.

por
Tiempo de lectura: 3 minutos

Buenos días, en el tutorial de hoy, os voy a hablar sobre la estructura GRID de BOOTSTRAP.

El sistema de grid de Bootstrap es una de las características más destacadas y útiles de este framework CSS. Proporciona una estructura de filas y columnas que permite crear diseños flexibles y responsivos de manera sencilla.

El sistema de grid de Bootstrap se basa en una cuadrícula de 12 columnas. Cada fila (row) se divide en columnas que suman un total de 12 unidades. Las columnas pueden combinarse y ajustarse para crear diseños adaptables a diferentes tamaños de pantalla.

Para utilizar el sistema de grid de Bootstrap, se utilizan clases CSS predefinidas que se aplican a los elementos HTML. A continuación, te explico cómo se utilizan las principales clases:

  1. .container: Esta clase envuelve todo el contenido de la página y establece un ancho máximo y un margen lateral automático para centrar el contenido. Es el contenedor principal del grid de Bootstrap.
  2. .row: Se utiliza para crear una fila y agrupar las columnas. Las filas deben estar contenidas dentro de un .container o .container-fluid.
  3. .col: Esta clase se utiliza para definir una columna. Puedes especificar el número de columnas que ocupa en diferentes puntos de interrupción (breakpoints) utilizando las clases responsivas. Por ejemplo, .col-md-6 indica que la columna ocupará 6 columnas en dispositivos medianos (md), mientras que .col-lg-4 indica que ocupará 4 columnas en dispositivos grandes (lg).
  4. .offset: Se utiliza para agregar un espacio de offset (desplazamiento) a la izquierda de una columna. Por ejemplo, .offset-md-3 añade un espacio de offset de 3 columnas en dispositivos medianos.

Además de estas clases básicas, Bootstrap ofrece variaciones y combinaciones de clases para adaptar las columnas a diferentes tamaños de pantalla y crear diseños complejos. Algunas de las clases más comunes son:

  • .col-sm-*: Especifica el número de columnas que una columna ocupará en dispositivos pequeños (sm).
  • .col-md-*: Especifica el número de columnas que una columna ocupará en dispositivos medianos (md).
  • .col-lg-*: Especifica el número de columnas que una columna ocupará en dispositivos grandes (lg).
  • .col-xl-*: Especifica el número de columnas que una columna ocupará en dispositivos extra grandes (xl).
  • .col-*-offset-*: Añade un espacio de offset a la izquierda de una columna en un punto de interrupción específico.

A continuación te dejo una tabla, donde encontraras los puntos de ruptura y a partir de que medidas pega los saltos.

A continuación os dejo un ejemplo básico: 

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css">
    <title>Tu página con Bootstrap</title>
</head>

<body>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>

    <div class="row">
        <div class="col-md-6 bg-warning">
            Columna primera
        </div>
        <div class="col-md-6 bg-primary">
            Columna segunda
        </div>
        
    </div>

</body>

</html>

Lo que estamos haciendo en el ejemplo de arriba, es que a partir de 768 que es md, para arriba, de pongan distribuidas en 2 columnas, ya que 6+6 = 12 que es el total de las columnas de bootstrap.

Cuando empecemos a maquetar hemos de hacerlo First mobile e ir subiendo.

Espero que os guste, pero sobre todo que os sirva, cualquier duda no dudéis en dejar un comentario, y si os gusta déjanos tu ❤️

Post Views: 19

Deja un comentario