Construir una página web completa con Bootstrap significa combinar grillas, navegación, formularios y componentes en un solo proyecto funcional y responsivo.
¿Llegaste hasta aquí? Eso ya dice mucho de ti. En esta lección final vas a unir todo lo que aprendiste y construir algo real: una página de inicio para una pequeña empresa mexicana. Sin atajos. Sin trucos raros. Solo Bootstrap y lo que ya sabes.
La página que vas a construir
Imagina que Sofía, diseñadora freelance en Monterrey, necesita una página web para "Tortillería Don Cuco", un negocio familiar con tres sucursales en Nuevo León. El dueño quiere mostrar su menú, un formulario de contacto y un mapa de ubicaciones.
Sofía tiene dos horas. Tú vas a seguir sus pasos.
Esta página tendrá cuatro secciones:
- Barra de navegación (navbar)
- Hero o encabezado principal (jumbotron con botón)
- Sección de productos (tarjetas en rejilla)
- Formulario de contacto
Paso 1: La estructura base del proyecto
Antes de escribir una sola clase de Bootstrap, necesitas el archivo HTML con los enlaces correctos. Así empieza todo proyecto:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tortillería Don Cuco</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Aquí va tu contenido -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
El meta viewport es lo que hace que tu página se vea bien en celular. Sin él, Bootstrap no funciona correctamente. Sofía siempre empieza por aquí antes de escribir cualquier otra cosa.
Paso 2: La barra de navegación responsiva
Una navbar de Bootstrap colapsa automáticamente en celular. Eso significa que en pantallas pequeñas aparece el botón de hamburguesa, y en pantallas grandes se ven todos los enlaces. Sofía la construye así:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Don Cuco</a>
<button class="navbar-toggler" type="button"
data-bs-toggle="collapse" data-bs-target="#menu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="menu">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#menu">Menú</a></li>
<li class="nav-item"><a class="nav-link" href="#contacto">Contacto</a></li>
<li class="nav-item"><a class="nav-link" href="#ubicaciones">Sucursales</a></li>
</ul>
</div>
</div>
</nav>
Fíjate en ms-auto. Esa clase empuja el menú hacia la derecha. Es un detalle pequeño, pero hace que la navbar se vea profesional de inmediato.
Paso 3: El hero o encabezado principal
El "hero" es la primera sección grande que ve el visitante. Sofía quiere que sea llamativo y con un botón de acción. Lo logra con clases de utilidad de Bootstrap:
<section class="bg-warning text-dark text-center py-5">
<div class="container">
<h1 class="display-4 fw-bold">Las mejores tortillas de Monterrey</h1>
<p class="lead">Hechas a mano desde 1987. Tres sucursales en Nuevo León.</p>
<a href="#contacto" class="btn btn-dark btn-lg mt-3">Hacer un pedido</a>
</div>
</section>
display-4 hace el título muy grande. lead hace el párrafo más legible. py-5 agrega espacio arriba y abajo. Todo sin escribir CSS propio.
El resultado: una sección limpia, centrada y con buen contraste en cualquier pantalla.
Paso 4: La sección de productos con tarjetas
Aquí es donde la rejilla brilla. Sofía quiere mostrar tres productos: tortillas de maíz, tortillas de harina y tostadas. En pantallas grandes, tres columnas. En celular, una columna. Así lo hace:
<section id="menu" class="py-5">
<div class="container">
<h2 class="text-center mb-4">Nuestros productos</h2>
<div class="row g-4">
<div class="col-12 col-md-4">
<div class="card h-100 shadow-sm">
<div class="card-body">
<h5 class="card-title">Tortillas de maíz</h5>
<p class="card-text">El sabor de siempre. Paquete de 30 piezas.</p>
<p class="fw-bold">$18 el kilo</p>
</div>
</div>
</div>
<div class="col-12 col-md-4">
<div class="card h-100 shadow-sm">
<div class="card-body">
<h5 class="card-title">Tortillas de harina</h5>
<p class="card-text">Suaves y grandes. Ideales para burritos.</p>
<p class="fw-bold">$25 el kilo</p>
</div>
</div>
</div>
<div class="col-12 col-md-4">
<div class="card h-100 shadow-sm">
<div class="card-body">
<h5 class="card-title">Tostadas</h5>
<p class="card-text">Crujientes y doradas. Paquete de 20 piezas.</p>
<p class="fw-bold">$22 el paquete</p>
</div>
</div>
</div>
</div>
</div>
</section>
h-100 hace que todas las tarjetas tengan la misma altura. g-4 agrega espacio entre columnas. shadow-sm da una sombra sutil que da sensación de profundidad. Tres clases. Gran diferencia.
Paso 5: El formulario de contacto
Sofía agrega un formulario simple para pedidos por WhatsApp. Usa todo lo que aprendiste en la lección anterior:
<section id="contacto" class="bg-light py-5">
<div class="container">
<h2 class="text-center mb-4">Haz tu pedido</h2>
<div class="row justify-content-center">
<div class="col-12 col-md-6">
<form>
<div class="mb-3">
<label class="form-label">Tu nombre</label>
<input type="text" class="form-control" placeholder="Ej. Carlos Ramírez">
</div>
<div class="mb-3">
<label class="form-label">Teléfono</label>
<input type="tel" class="form-control" placeholder="Ej. 81 1234 5678">
</div>
<div class="mb-3">
<label class="form-label">Producto</label>
<select class="form-select">
<option>Tortillas de maíz</option>
<option>Tortillas de harina</option>
<option>Tostadas</option>
</select>
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="urgente">
<label class="form-check-label" for="urgente">Entrega el mismo día</label>
</div>
<button type="submit" class="btn btn-warning w-100">Enviar pedido</button>
</form>
</div>
</div>
</div>
</section>
justify-content-center centra la columna del formulario. w-100 hace que el botón ocupe todo el ancho. El resultado: un formulario limpio, centrado y perfectamente responsivo.
Errores comunes al integrar todo
Carlos, estudiante de diseño en la CDMX, armó su primera página completa pero cometió tres errores que son muy frecuentes. ¿Los reconoces?
Error 1: Olvidar el container.
Sin container, el contenido se pega a los bordes de la pantalla. Se ve mal en desktop. Siempre envuelve tus secciones en un <div class="container">.
Error 2: Mezclar IDs y anclas mal.
Carlos puso href="#contacto" en la navbar, pero la sección tenía id="formulario". Los enlaces no funcionaban. Revisa que el id de la sección coincida exactamente con el href del enlace.
Error 3: No probar en celular.
Carlos diseñó todo en su laptop. Cuando abrió la página en su celular Motorola, las tarjetas no colapsaban bien. ¿Por qué? Olvidó el meta viewport. Esa línea es obligatoria.
Evita estos tres errores y tu página funcionará desde el primer intento.
Lo que puedes construir ahora mismo
Aprendiste Bootstrap desde cero. Empezaste entendiendo qué es un framework. Después dominaste la rejilla, los colores, los componentes, la navegación, los formularios y las tablas. Hoy lo uniste todo.
Eso no es poco. Muchos desarrolladores junior en México consiguen su primer trabajo freelance con exactamente este nivel de conocimiento. En plataformas como Workana o Freelancer.com, una página web sencilla con Bootstrap se cobra entre $2,500 y $8,000 dependiendo del cliente.
El siguiente paso es tuyo. Puedes tomar este proyecto de Don Cuco y adaptarlo para un negocio real de tu colonia, de tu familia o de un cliente. Cambia los colores, los textos y las imágenes. La estructura ya la tienes.
Lo que aprendiste en este curso
- Qué es Bootstrap y por qué te ahorra horas de trabajo
- Cómo funciona la rejilla de 12 columnas para diseños responsivos
- Cómo usar colores, tipografía y espaciado con clases de utilidad
- Cómo crear navbars, tarjetas, botones y alertas
- Cómo construir formularios y tablas accesibles y limpios
- Cómo unir todo en una página completa y funcional
Eres capaz de construir páginas web reales. Ahora ve y hazlo.