Skip to content

Unidad 5: Layout en Bootstrap

5.1 Introducción al Sistema de Rejilla (Grid System)

Bootstrap utiliza un sistema de rejilla flexible y responsivo basado en filas y columnas para organizar el contenido de una manera estructurada y adaptable. Este sistema facilita la creación de diseños que se ajustan automáticamente a diferentes tamaños de pantalla, lo que lo hace ideal para el desarrollo de sitios web responsivos.

🔹 ¿Cómo funciona el Grid System?

  • Una página se divide en una rejilla de 12 columnas.
  • Se agrupan dentro de filas (.row) para asegurar una alineación adecuada.
  • Se colocan dentro de contenedores (.container, .container-fluid) para definir el ancho del diseño.
  • El sistema usa breakpoints para adaptar el contenido a diferentes dispositivos.

Ejemplo básico del Grid System

1
2
3
4
5
6
7
<div class="container">
    <div class="row">
        <div class="col">Columna 1</div>
        <div class="col">Columna 2</div>
        <div class="col">Columna 3</div>
    </div>
</div>
En este ejemplo, cada .col ocupará el mismo espacio dentro de la fila.

Grid System

5.2 Contenedores en Bootstrap

Los contenedores son el elemento base del layout en Bootstrap. Se encargan de envolver las filas y columnas, proporcionando márgenes y controlando el ancho del contenido.

Tipos de contenedores

Tipo Descripción
.container Establece un ancho fijo basado en el viewport.
.container-fluid Ocupa el 100% del ancho de la pantalla.
.container-{breakpoint} Define un contenedor responsivo según el tamaño del viewport.

Ejemplo de .container (ancho fijo según el viewport)

1
2
3
4
5
<div class="container" 
     style="border: 2px solid red; background-color: lightgray; padding: 20px;"
    >
    <p>Este es un contenedor estándar con ancho limitado.</p>
</div>

En este ejemplo, el contenedor mantiene un ancho fijo que varía según el tamaño de la pantalla.

Ejemplo de .container-fluid (ancho completo)

1
2
3
4
5
<div class="container-fluid" 
     style="border: 2px solid blue; background-color: lightblue; padding: 20px;"
     >
    <p>Este contenedor ocupa todo el ancho de la pantalla.</p>
</div>

Aquí, el contenedor se expande por completo sin importar el tamaño de la pantalla.

Ejemplo de .container-md (cambia en función del tamaño de pantalla)

1
2
3
4
5
<div class="container-md" 
     style="border: 2px solid green; background-color: lightgreen; padding: 20px;"
    >
    <p>Este contenedor cambia su ancho en pantallas medianas y grandes.</p>
</div>

En este caso, el contenedor se comporta como .container-fluid en pantallas pequeñas pero se ajusta a un ancho fijo en pantallas medianas (md) y más grandes.

Contenedores en Bootstrap

5.3 Filas y Columnas en Bootstrap

Las filas (.row) son fundamentales en el sistema de rejilla. Agrupan columnas y aseguran que estén correctamente alineadas dentro del contenedor.

Columnas en Bootstrap

  • Se pueden definir con .col-{n} donde n va de 1 a 12.
  • También se pueden usar sin número (.col), lo que hace que las columnas se distribuyan automáticamente.

Ejemplo de filas y columnas

<div class="container">
    <div class="row">
        <div class="col-4">Columna 4</div>
        <div class="col-8">Columna 8</div>
    </div>
</div>
En este ejemplo, la primera columna ocupa 4 de 12 partes y la segunda 8 de 12 partes.

Anidación de Columnas

Las columnas pueden contener filas dentro de ellas para estructuras más complejas.

Ejemplo de anidación de columnas

<div class="container">
    <div class="row">
        <div class="col-6">
            <div class="row">
                <div class="col-6">Anidada 1</div>
                <div class="col-6">Anidada 2</div>
            </div>
        </div>
        <div class="col-6">Columna 6</div>
    </div>
</div>

Filas y Columnas en Bootstrap

5.4 Breakpoints y Diseño Responsivo

Los breakpoints permiten adaptar el diseño según el tamaño de la pantalla. Bootstrap usa los siguientes puntos de quiebre:

Breakpoint Tamaño mínimo
col- <576px (extra pequeño)
col-sm- ≥576px (pequeño)
col-md- ≥768px (mediano)
col-lg- ≥992px (grande)
col-xl- ≥1200px (extra grande)
col-xxl- ≥1400px (extra-extra grande)

Uso de Breakpoints

Podemos definir el número de columnas según el tamaño de la pantalla:

Ejemplo de columnas responsivas

<div class="container">
    <div class="row">
        <div class="col-md-6 col-lg-4">Columna responsiva</div>
        <div class="col-md-6 col-lg-4">Columna responsiva</div>
        <div class="col-md-6 col-lg-4">Columna responsiva</div>
    </div>
</div>
- En pantallas medianas (md), habrá 2 columnas. - En pantallas grandes (lg), habrá 3 columnas. - En pantallas pequeñas (<md), se mostrarán 1 columna.

Vista de las columnas en diferentes tamaños de pantalla:

Para pantallas grandes >lg (≥992px):

Breakpoints y Diseño Responsivo

Para pantallas medianas ≥md (≥768px):

Breakpoints y Diseño Responsivo

Para pantallas pequeñas <md (<768px):

Breakpoints y Diseño Responsivo

5.4.1 Maquetacíon de una página web clásica HTML5 y bootstrap

Ejemplo de maquetación clásica con Bootstrap

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Maquetación Clásica</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <style>
        .header, .footer { background-color: #343a40; color: white; text-align: center; padding: 20px; }
        .menu { background-color: #6c757d; color: white; padding: 20px; }
        .content { background-color: #f8f9fa; padding: 20px; }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <header class="header">Cabecera</header>
        </div>
        <div class="row">
            <nav class="menu text-center">Menú de navegación</nav>
        </div>
        <div class="row">
            <aside class="col-md-3 menu">Menú lateral</aside>
            <section class="col-md-9 content">Contenido principal</section>
        </div>
        <div class="row">
            <footer class="footer">Pie de página</footer>
        </div>
    </div>
</body>
</html>
En este ejemplo, se ha maquetado una página web clásica con Bootstrap. Se han definido áreas para la cabecera, menú de navegación, menú lateral, contenido principal y pie de página.

Maquetación Clásica con Bootstrap

5.5 Alineación y Distribución con Flexbox

Propiedades de alineación:

  • justify-content-*: Alinea horizontalmente.
    • start | center | end | between | around
  • align-items-*: Alinea verticalmente.
    • start | center | end | baseline | stretch
  • align-self-*: Alinea un elemento específico.
    • start | center | end | baseline | stretch
  • align-content-*: Alinea varias líneas.
    • start | center | end | between | around | stretch
  • flex-rowy flex-column: Define la dirección de los elementos.

Alineación Vertical

Podemos alinear las columnas verticalmente dentro de una fila usando align-items-start, align-items-center, y align-items-end.

Ejemplo de alineación vertical

<div class="container text-center">
    <div class="row align-items-start bg-light" style="height: 200px;">
        <div class="col bg-primary text-white p-3">Arriba</div>
        <div class="col bg-secondary text-white p-3">Arriba</div>
        <div class="col bg-success text-white p-3">Arriba</div>
    </div>
    <div class="row align-items-center bg-light" style="height: 200px;">
        <div class="col bg-primary text-white p-3">Centro</div>
        <div class="col bg-secondary text-white p-3">Centro</div>
        <div class="col bg-success text-white p-3">Centro</div>
    </div>
    <div class="row align-items-end bg-light" style="height: 200px;">
        <div class="col bg-primary text-white p-3">Abajo</div>
        <div class="col bg-secondary text-white p-3">Abajo</div>
        <div class="col bg-success text-white p-3">Abajo</div>
    </div>
</div>
En este ejemplo: - align-items-start alinea las columnas en la parte superior. - align-items-center las centra verticalmente. - align-items-end las alinea en la parte inferior.

Alineación Vertical en Bootstrap

🔹 Alineación Vertical Individual

También podemos alinear columnas individuales dentro de una fila usando align-self-*.

Ejemplo de alineación vertical individual

<div class="container text-center">
    <div class="row bg-light" style="height: 200px;">
        <div class="col align-self-start bg-primary text-white p-3">Arriba</div>
        <div class="col align-self-center bg-secondary text-white p-3">Centro</div>
        <div class="col align-self-end bg-success text-white p-3">Abajo</div>
    </div>
</div>
Aquí: - align-self-start coloca la columna en la parte superior. - align-self-center la mantiene centrada. - align-self-end la posiciona en la parte inferior.

Alineación Vertical Individual en Bootstrap

🔹 Alineación Horizontal (justify-content-)

Para alinear columnas horizontalmente, usamos justify-content-*.

Ejemplo de alineación horizontal

<div class="container text-center">
    <div class="row justify-content-start bg-light">
        <div class="col-4 bg-primary text-white p-3">Inicio</div>
    </div>
    <div class="row justify-content-center bg-light">
        <div class="col-4 bg-secondary text-white p-3">Centro</div>
    </div>
    <div class="row justify-content-end bg-light">
        <div class="col-4 bg-success text-white p-3">Final</div>
    </div>
    <div class="row justify-content-around bg-light">
        <div class="col-3 bg-danger text-white p-3">Alrededor</div>
        <div class="col-3 bg-warning text-dark p-3">Alrededor</div>
    </div>
    <div class="row justify-content-between bg-light">
        <div class="col-3 bg-info text-white p-3">Entre</div>
        <div class="col-3 bg-dark text-white p-3">Entre</div>
    </div>
</div>
En este ejemplo: - justify-content-start alinea las columnas a la izquierda. - justify-content-center las centra horizontalmente. - justify-content-end las alinea a la derecha. - justify-content-around distribuye las columnas con espacio alrededor. - justify-content-between las separa con el máximo espacio entre ellas.

Alineación Horizontal en Bootstrap

🔹 Column Breaks (Salto de columna)

Para hacer que una columna pase a la siguiente línea, usamos w-100.

Ejemplo de salto de columna

<div class="container text-center">
    <div class="row">
        <div class="col-6 bg-primary text-white p-3">Columna 1</div>
        <div class="col-6 bg-secondary text-white p-3">Columna 2</div>
        <div class="w-100"></div>
        <div class="col bg-success text-white p-3">Nueva fila</div>
    </div>
</div>
w-100 fuerza un salto de línea, haciendo que la última columna aparezca en una nueva fila.

Column Breaks en Bootstrap

Column Wrapping

Cuando hay más columnas de las que caben en una fila, Bootstrap las envuelve automáticamente en una nueva línea.

Ejemplo de Column Wrapping

<div class="container text-center">
    <div class="row">
        <div class="col-4 bg-primary text-white p-3">Columna 1</div>
        <div class="col-4 bg-secondary text-white p-3">Columna 2</div>
        <div class="col-4 bg-success text-white p-3">Columna 3</div>
        <div class="col-4 bg-danger text-white p-3">Columna 4</div>
    </div>
</div>
Como hay cuatro columnas de 4 partes cada una en un sistema de 12 columnas, la última columna se ajusta automáticamente en una nueva fila.

Column Wrapping en Bootstrap

Offsetting Columns

Para desplazar columnas dentro de una fila, usamos offset-{n}.

Ejemplo de Offsetting Columns

<div class="container text-center">
    <div class="row">
        <div class="col-md-4 offset-md-2 bg-primary text-white p-3">Desplazada</div>
        <div class="col-md-4 offset-md-2 bg-secondary text-white p-3">Normal</div>
    </div>
</div>
offset-md-2 deja un espacio de 2 columnas antes de la primera columna, desplazándola a la derecha.

Offsetting Columns en Bootstrap

Margins en Columnas

Podemos agregar márgenes personalizados a las columnas con m-*.

clase significado descripción
m-* all Márgenes en todas las direcciones.
mt-* top Márgenes en la parte superior.
me-* end Márgenes a la derecha.
mb-* bottom Márgenes en la parte inferior.
ms-* start Márgenes a la izquierda.
mx-* x-axis Márgenes horizontales.
my-* y-axis Márgenes verticales.

Ejemplo de márgenes en columnas

<div class="container text-center">
    <div class="row">
        <div class="col-md-4 me-auto bg-primary text-white p-3">Margen a la derecha</div>
        <div class="col-md-4 bg-secondary text-white p-3">Columna normal</div>
    </div>
</div>
me-auto aplica margen automático a la derecha, empujando la columna hacia la izquierda.

Conclusión

Estos ejemplos muestran cómo usar Flexbox en Bootstrap para controlar la alineación horizontal y vertical, los saltos de columna, el column wrapping, el offset y el margen automático. Con estas herramientas, podemos diseñar layouts más flexibles y responsivos sin necesidad de CSS adicional.

5.5.1 Ejemplos de uso de Flexbox en Bootstrap

Bootstrap usa Flexbox para la alineación y distribución de los elementos dentro de las filas.

Uso de d-flex en Bootstrap

La clase d-flex en Bootstrap permite convertir un elemento en un contenedor flexible, facilitando la alineación y distribución de sus elementos internos.

Ejemplo de uso de d-flex

1
2
3
4
5
<div class="d-flex justify-content-between bg-light p-3">
    <div class="p-2 bg-primary text-white">Elemento 1</div>
    <div class="p-2 bg-secondary text-white">Elemento 2</div>
    <div class="p-2 bg-success text-white">Elemento 3</div>
</div>
En este ejemplo, d-flex alinea los elementos en una fila y justify-content-between los distribuye con espacio entre ellos.

Ejemplo de d-flex con alineación vertical

html linenum="1" <div class="d-flex flex-column align-items-center bg-light p-3" style="height: 200px;"> <div class="p-2 bg-danger text-white">Elemento 1</div> <div class="p-2 bg-warning text-dark">Elemento 2</div> <div class="p-2 bg-info text-white">Elemento 3</div> </div> Aquí, d-flex flex-column organiza los elementos en columna, y align-items-center los alinea verticalmente en el centro.

Ejemplo de alineación con Flexbox

<div class="d-flex justify-content-center align-items-center" style="height: 200px; background: lightgray;">
    <div>Elemento centrado</div>
</div>
  • justify-content-center centra horizontalmente.
  • align-items-center centra verticalmente.

Ejemplo de alineación con Flexbox

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo de Flexbox en Bootstrap</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <style>
        .box { background-color: lightblue; padding: 10px; border: 1px solid blue; }
    </style>
</head>
<body>
    <div class="container">
        <h2 class="text-center my-4">Ejemplo de Alineación con Flexbox</h2>

        <div class="row mb-3">
            <div class="col d-flex justify-content-start box">Justificado a la izquierda</div>
        </div>

        <div class="row mb-3">
            <div class="col d-flex justify-content-center box">Centrado horizontalmente</div>
        </div>

        <div class="row mb-3">
            <div class="col d-flex justify-content-end box">Justificado a la derecha</div>
        </div>

        <div class="row mb-3">
            <div class="col d-flex justify-content-between box">Espaciado entre elementos</div>
        </div>

        <div class="row mb-3" style="height: 200px; background-color: lightgray;">
            <div class="col d-flex align-items-start box">Alineado arriba</div>
            <div class="col d-flex align-items-center box">Alineado al centro</div>
            <div class="col d-flex align-items-end box">Alineado abajo</div>
        </div>
    </div>
</body>
</html>
En este ejemplo, se han alineado y distribuido los elementos horizontal y verticalmente utilizando Flexbox.

Ejemplo de Alineación con Flexbox

5.6 Uso de Gutters (Espaciado entre Columnas)

Los gutters en Bootstrap son los espaciados que separan las columnas dentro de una fila (.row). Ayudan a mantener un diseño limpio y legible, asegurando que los elementos dentro de las columnas no queden demasiado juntos.

🔹 Clases de Gutters en Bootstrap

Bootstrap proporciona varias clases para controlar los gutters de forma fácil y flexible:

Clase Descripción
g-{n} Aplica un espaciado uniforme entre columnas (0-5).
gx-{n} Controla el espaciado horizontal entre columnas.
gy-{n} Controla el espaciado vertical entre filas.
g-0 Elimina el espaciado entre columnas.

Ejemplo de Gutters en Bootstrap

Ejemplo de uso de Gutters

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<div class="container px-4 text-center">
    <div class="row gx-5">
        <div class="col">
            <div class="p-3 border bg-light">Columna con `gx-5`</div>
        </div>
        <div class="col">
            <div class="p-3 border bg-light">Columna con `gx-5`</div>
        </div>
    </div>
</div>

En este ejemplo, gx-5 aplica un espaciado horizontal amplio entre columnas.

Ejemplo de espaciado entre columnas

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<div class="container text-center">
    <div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
        <div class="col">
        <div class="p-3">Row column</div>
        </div>
        <div class="col">
        <div class="p-3">Row column</div>
        </div>
        <div class="col">
        <div class="p-3">Row column</div>
        </div>
        <div class="col">
        <div class="p-3">Row column</div>
        </div>
        <div class="col">
        <div class="p-3">Row column</div>
        </div>
        <div class="col">
        <div class="p-3">Row column</div>
        </div>
        <div class="col">
        <div class="p-3">Row column</div>
        </div>
        <div class="col">
        <div class="p-3">Row column</div>
        </div>
        <div class="col">
        <div class="p-3">Row column</div>
        </div>
        <div class="col">
        <div class="p-3">Row column</div>
        </div>
    </div>
</div>

Ejemplo de Gutters Verticales

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<div class="container text-center overflow-hidden">
    <div class="row gy-5">
        <div class="col-6">
            <div class="p-3 border bg-light">Fila 1</div>
        </div>
        <div class="col-6">
            <div class="p-3 border bg-light">Fila 1</div>
        </div>
        <div class="col-6">
            <div class="p-3 border bg-light">Fila 2</div>
        </div>
        <div class="col-6">
            <div class="p-3 border bg-light">Fila 2</div>
        </div>
    </div>
</div>

gy-5 añade un espaciado vertical grande entre filas.

Ejemplo de eliminación de Gutters

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<div class="container px-4 text-center">
    <div class="row g-0">
        <div class="col">
            <div class="p-3 border bg-light">Columna sin separación</div>
        </div>
        <div class="col">
            <div class="p-3 border bg-light">Columna sin separación</div>
        </div>
    </div>
</div>
g-0 elimina completamente el espacio entre las columnas, haciéndolas adyacentes.

Resumen

Los gutters permiten controlar de manera eficiente el espaciado entre columnas y filas en Bootstrap, mejorando la legibilidad y estructura visual de la página. Con clases como g-{n}, gx-{n} y gy-{n}, podemos personalizar fácilmente el diseño para distintos tamaños de pantalla.

Conclusión

El sistema de rejilla de Bootstrap permite diseñar páginas web de manera rápida y eficiente. Con contenedores, filas y columnas, breakpoints y Flexbox, podemos construir layouts responsivos sin necesidad de escribir código CSS desde cero. 🚀