¿Cómo instalar Bootstrap en tu proyecto web? | Bootstrap y Diseño Responsivo

Agregar Bootstrap a tu proyecto es tan sencillo como copiar unas líneas de código en tu archivo HTML.

¿No lo crees? Hoy vas a ver cómo hacerlo paso a paso. Y al final de esta lección, tendrás una página real con Bootstrap funcionando en tu computadora.

Dos caminos, un mismo destino

Existen dos formas principales de instalar Bootstrap. La primera es usar un CDN (Content Delivery Network). La segunda es descargar Bootstrap en tu computadora. Cada una tiene sus ventajas. Vamos a ver cuál te conviene más.

Piensa en esto: ¿alguna vez has visto una tienda que recibe su mercancía directo del proveedor sin guardar nada en bodega? Eso es un CDN. El navegador de tu usuario descarga Bootstrap directamente desde servidores de internet, no desde tu proyecto.

La historia de Rodrigo y su primera página

Rodrigo tiene 23 años y estudia administración en Monterrey. Quiere aprender a hacer sitios web para ofrecer sus servicios como freelance. Escuchó que Bootstrap es lo más fácil para empezar. Un sábado por la tarde, abrió su editor de texto y lo intentó.

Escribió su primer archivo HTML básico. Luego buscó en la documentación oficial de Bootstrap la sección que dice "CDN". Copió dos líneas de código y las pegó en su archivo. En menos de diez minutos, tenía una página funcionando con estilos de Bootstrap.

¿Qué hizo exactamente? Mira este código:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mi primera página con Bootstrap</title>
  <link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
    rel="stylesheet"
  >
</head>
<body>

  <div class="container">
    <h1 class="mt-4 text-primary">¡Hola, Bootstrap!</h1>
    <p class="lead">Esta es mi primera página responsiva.</p>
    <button class="btn btn-success">Enviar</button>
  </div>

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

Rodrigo abrió ese archivo en su navegador. Vio el título azul, el texto grande y el botón verde. "Esto es demasiado fácil", pensó. Y tenía razón.

¿Qué hace cada línea del CDN?

No basta con copiar y pegar. Necesitas entender qué estás haciendo.

La etiqueta <link> en el <head> carga el CSS de Bootstrap. Eso le da los estilos visuales a tu página: colores, fuentes, botones, márgenes. La etiqueta <script> al final del <body> carga el JavaScript de Bootstrap. Ese JS es necesario para componentes como menús desplegables, modales y carruseles.

Una regla importante: el <script> siempre va antes del cierre de </body>, no en el <head>. Si lo pones en el lugar equivocado, algunos componentes no funcionarán.

También nota la línea <meta name="viewport"...>. Esa línea le dice al navegador que adapte el tamaño de la página al celular. Sin ella, tu diseño responsivo no funcionará correctamente en móviles.

Ventajas y desventajas del CDN

	CDN	Descarga local
Velocidad para empezar	Muy rápida	Requiere descargar archivos
Necesita internet	Sí	No
Para producción	Sí, con buenas prácticas	Sí, con control total
Ideal para	Prototipos y aprender	Proyectos grandes o sin conexión

Para aprender, para hacer pruebas y para proyectos pequeños, el CDN es perfecto. Es lo que usarás durante este curso.

La historia de Sofía y el proyecto para Liverpool

Sofía trabaja como desarrolladora junior en una agencia de diseño en Ciudad de México. Un cliente importante, una tienda de ropa con distribución en varios centros comerciales Liverpool, les pidió un micrositio para una promoción. La agencia no podía depender de internet externo para los archivos de Bootstrap. El sitio se iba a probar en una sala de juntas sin conexión estable.

Sofía descargó Bootstrap directamente desde el sitio oficial. Descomprimió el archivo y encontró dos carpetas: css y js. Copió esas carpetas a su proyecto. Luego cambió las rutas en su HTML para apuntar a los archivos locales.

Así quedó su <link>:

<link href="css/bootstrap.min.css" rel="stylesheet">

Y su <script>:

<script src="js/bootstrap.bundle.min.js"></script>

El sitio funcionó perfectamente sin internet. Sofía entregó el proyecto a tiempo. El cliente quedó contento.

Ese es el poder de saber cuándo usar cada opción.

¿Cómo estructurar tu proyecto local?

Cuando usas la descarga local, tu carpeta de proyecto debe verse así:

mi-proyecto/
├── index.html
├── css/
│   └── bootstrap.min.css
├── js/
│   └── bootstrap.bundle.min.js
└── img/

Esta estructura es ordenada y fácil de mantener. Puedes agregar tu propio CSS en una carpeta css/ junto al de Bootstrap. Solo crea un archivo como estilos.css y enlázalo después del de Bootstrap. Así tus estilos personalizados tendrán prioridad.

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/estilos.css" rel="stylesheet">

El orden importa. Si enlazas tu CSS primero, Bootstrap puede sobreescribir tus estilos.

Errores comunes al instalar Bootstrap

Casi todos los principiantes cometen los mismos errores. Aquí los más frecuentes para que tú los evites.

Error 1: Olvidar la meta etiqueta de viewport. Sin <meta name="viewport" content="width=device-width, initial-scale=1.0">, tu sitio no se verá bien en celulares. Bootstrap necesita esa línea para funcionar como se espera.

Error 2: Poner el script en el <head>. El JavaScript de Bootstrap debe ir al final del <body>. Si lo pones en el <head>, la página carga más lento y algunos componentes pueden fallar.

Error 3: Usar versiones mezcladas. Si usas el CSS de Bootstrap 5 y el JS de Bootstrap 4, habrá conflictos. Asegúrate de que ambos archivos sean de la misma versión.

Error 4: Rutas incorrectas en la descarga local. Si tu archivo index.html está en la raíz del proyecto y escribes href="bootstrap.min.css" en lugar de href="css/bootstrap.min.css", el archivo no cargará. Revisa siempre la ruta relativa.

Error 5: No guardar el archivo antes de abrir en el navegador. Parece obvio, pero pasa más de lo que crees. Guarda siempre con Ctrl + S antes de recargar tu página.

Tu primera página completa con Bootstrap

Vamos a hacer algo concreto. Crea un archivo llamado index.html en una carpeta nueva. Pega este código completo:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Portafolio de prueba</title>
  <link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
    rel="stylesheet"
  >
</head>
<body>

  <nav class="navbar navbar-dark bg-dark">
    <div class="container">
      <span class="navbar-brand">Mi Portafolio</span>
    </div>
  </nav>

  <div class="container mt-5">
    <h1 class="text-center">Bienvenido a mi sitio</h1>
    <p class="text-center text-muted">
      Desarrolladora web freelance en Guadalajara
    </p>
    <div class="text-center mt-3">
      <a href="#" class="btn btn-primary me-2">Ver proyectos</a>
      <a href="#" class="btn btn-outline-secondary">Contacto</a>
    </div>
  </div>

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

Abre ese archivo en tu navegador. Verás una barra de navegación oscura, un título centrado y dos botones. Todo sin escribir una sola línea de CSS propio. Eso es Bootstrap en acción.

Ahora prueba reducir la ventana de tu navegador. ¿Ves cómo el contenido se adapta? Eso es el diseño responsivo funcionando desde el primer momento.

Lo que aprendiste hoy

Instalaste Bootstrap de dos formas distintas. Entendiste para qué sirve cada opción. Y creaste tu primera página real con Bootstrap. Eso es un avance enorme. En la siguiente lección vas a aprender el sistema de grillas, que es el corazón de cómo Bootstrap organiza el contenido en pantalla.