Bootstrap
¿Qué es Bootstrap?
Sección titulada «¿Qué es Bootstrap?»Bootstrap es un framework de código abierto para construir sitios web y aplicaciones web adaptativas (responsives) a partir de HTML, CSS y JavaScript. Fue desarrollado originalmente por un equipo en Twitter y permite que las aplicaciones se vean bien en cualquier dispositivo, especialmente en teléfonos.
La Grilla Bootstrap
Sección titulada «La Grilla Bootstrap»El sistema de grilla de Bootstrap organiza zonas de la pantalla usando contenedores, filas y columnas. Está implementada con Flexbox y es completamente adaptativa. La grilla se compone de un máximo de 12 columnas y tantas filas como se necesiten.
<div class="container-fluid"> <div class="row"> <div class="col">Columna 1</div> <div class="col">Columna 2</div> <div class="col">Columna 3</div> </div></div>Visualizador de grilla, arrastra el slider para ajustar el ancho de las columnas:
Columnas de Distintos Tamaños
Sección titulada «Columnas de Distintos Tamaños»Para columnas de distintos tamaños, se indica cuántos espacios (de los 12
disponibles) ocupará cada columna. Por ejemplo, col-6 ocupa la mitad, col-4 un
tercio, y col-10 diez doceavos del ancho total.
<div class="row"> <div class="col-2">Pequeña</div> <div class="col-8">Grande</div> <div class="col-2">Pequeña</div></div>Estilos Bootstrap
Sección titulada «Estilos Bootstrap»Bootstrap aplica estilos visuales a los elementos HTML mediante clases CSS. Por
ejemplo, class="table" mejora el aspecto de una tabla, class="btn btn-success" crea
un botón verde, y class="thead-dark" da un encabezado oscuro a una tabla.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">@import 'bootstrap/dist/css/bootstrap.min.css';Pruebe usted mismo: edite las clases de columna (col-4, col-6, col-12…) o los
colores de botón (btn-primary, btn-danger, btn-warning…) y presione “Actualizar
vista” para ver el resultado real, renderizado con Bootstrap de verdad.
La grilla en acción: esta misma página Avanzado
Sección titulada «La grilla en acción: esta misma página »El layout que está viendo ahora mismo se puede construir con Bootstrap. La barra de
navegación usa navbar, el contenido central usa container con una fila centrada
mediante justify-content-center, y la columna principal limita el ancho con
col-md-10. Las tarjetas usan card con border-start para el borde izquierdo de
color.
<!-- Barra de navegación (ancho completo) --><nav class="navbar navbar-dark bg-dark px-4 d-flex justify-content-between"> <span class="navbar-brand fw-bold">Bootstrap Básico</span> <div class="d-flex gap-3"> <button class="btn btn-link text-white">Teoría</button> <button class="btn btn-link text-secondary">Práctica</button> </div></nav>
<!-- Contenido centrado con la grilla --><div class="container py-5"> <div class="row justify-content-center"> <div class="col-12 col-md-10"> <div class="card shadow-sm border-0 border-start border-4 border-success"> <div class="card-body p-4"> <h5 class="card-title">⚡ ¿Qué es Bootstrap?</h5> <p class="card-text text-muted">Bootstrap es un framework...</p> </div> </div> </div> </div></div>Clases utilizadas
Sección titulada «Clases utilizadas»| Clase | Descripción |
|---|---|
navbar navbar-dark bg-dark |
Barra de navegación con fondo oscuro y texto claro adaptado automáticamente. |
px-4 |
Padding horizontal de 1.5 rem a izquierda y derecha (utility de espaciado). |
d-flex justify-content-between |
Activa Flexbox y distribuye los hijos en los dos extremos de la fila. |
navbar-brand fw-bold |
Estilo de marca del navbar; fw-bold aplica font-weight: 700. |
btn btn-link text-white |
Botón con apariencia de enlace de texto; text-white controla el color. |
d-flex gap-3 |
Flexbox con separación de 1 rem entre los botones del menú. |
container py-5 |
Contenedor centrado de ancho máximo fijo; py-5 añade padding vertical de 3 rem. |
row justify-content-center |
Fila de la grilla que centra horizontalmente sus columnas hijas. |
col-12 col-md-10 |
Columna de ancho completo en móvil; en pantallas ≥ 768 px ocupa 10 de 12 espacios. |
card shadow-sm border-0 |
Componente tarjeta con sombra sutil y sin borde por defecto. |
border-start border-4 border-success |
Agrega un borde izquierdo de 4 px en color verde. |
card-body p-4 |
Área de contenido interna de la tarjeta; p-4 añade padding uniforme de 1.5 rem. |
text-muted |
Color de texto atenuado (gris #6c757d), para información secundaria. |
Bootstrap y Flexbox Avanzado
Sección titulada «Bootstrap y Flexbox »El sistema de grilla de Bootstrap está construido sobre Flexbox: no son tecnologías
separadas. Cuando escribe .row, Bootstrap aplica internamente
display: flex; flex-wrap: wrap, por lo que obtiene todo el comportamiento de Flexbox
automáticamente. Cada columna (.col, .col-4, etc.) es un flex item, Bootstrap
traduce el número de columna a flex-basis con porcentajes fijos. Un .col-4 equivale
a flex: 0 0 33.33%, y un .col sin número equivale a flex: 1 0 0%, por eso las
columnas iguales reparten el espacio automáticamente.
Autoevaluación
Sección titulada «Autoevaluación»Ejercicios prácticos
Sección titulada «Ejercicios prácticos»Escriba el nombre de clase correcto en cada campo. Use el botón Verificar para comprobar sus respuestas.
Ejercicio 1, Grilla de 12 columnas iguales
Sección titulada «Ejercicio 1, Grilla de 12 columnas iguales»Complete el código para crear una fila con 12 columnas iguales dentro de un
container-fluid.
<div class="">
<div class="">
<div class="">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">... (hasta 12)</div>
</div>
</div>Ejercicio 2, Columna de 10 espacios
Sección titulada «Ejercicio 2, Columna de 10 espacios»Cree una fila con tres columnas donde la del medio ocupa 10 de los 12 espacios disponibles.
<div class="row"> <div class="col">I</div> <div class="">Centro grande</div> <div class="col">D</div> </div>
Ejercicio 3, Botones con estilos Bootstrap
Sección titulada «Ejercicio 3, Botones con estilos Bootstrap»Aplique los estilos correctos para crear un botón rojo de eliminar y un botón verde de agregar.
<button class="btn ">Eliminar</button> <button class="btn ">Agregar</button>