Bootstrap 5 desde Cero

📌 Introducción a Bootstrap 5

¿Qué es Bootstrap 5? Bootstrap es el framework de CSS más popular del mundo para desarrollar sitios web responsive y mobile-first. La versión 5 introduce mejoras significativas incluyendo la eliminación de la dependencia de jQuery.

Historia de Bootstrap:

Bootstrap fue creado por Mark Otto y Jacob Thornton en Twitter en 2011 como una herramienta interna para mejorar la consistencia entre las aplicaciones web internas de la compañía. Fue lanzado como código abierto en agosto de 2011.

Características principales de Bootstrap 5:

Sin jQuery: Ahora utiliza JavaScript vanilla moderno
Variables CSS: Personalización más fácil y flexible
Dark Mode: Soporte nativo para tema oscuro
Nuevo Logo: Rediseño completo de la identidad visual
Mejor accesibilidad: Componentes más accesibles por defecto

💡 Dato curioso: Bootstrap 5 es aproximadamente un 20% más ligero que Bootstrap 4 gracias a la eliminación de jQuery y la optimización del código CSS.

← Volver a temas

🔧 Instalación y Configuración

Método 1: CDN (Recomendado para principiantes)

<!-- CSS en el <head> -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- JS antes de </body> -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

Método 2: npm (Para proyectos profesionales)

# Instalar Bootstrap
npm install bootstrap

# Importar en tu archivo JS principal
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

Método 3: Descarga directa

Descarga Bootstrap desde getbootstrap.com
Extrae los archivos en tu proyecto
Enlaza los archivos CSS y JS localmente

⚠️ Importante: Para usar los componentes interactivos como modals, dropdowns y tooltips, necesitas incluir el archivo JavaScript de Bootstrap.

← Volver a temas

📐 Sistema Grid y Containers

Estructura del Grid System:

El sistema Grid de Bootstrap utiliza una serie de contenedores, filas y columnas para diseñar y alinear contenido. Está construido con flexbox y es totalmente responsive.

<div class="container">
  <div class="row">
    <div class="col-md-4">Columna 1</div>
    <div class="col-md-4">Columna 2</div>
    <div class="col-md-4">Columna 3</div>
  </div>
</div>

Tipos de Containers:

Clase	Descripción	Ancho Máximo
`.container`	Contenedor responsive con ancho máximo	Varía por breakpoint
`.container-fluid`	Contenedor de ancho completo (100%)	100% del viewport
`.container-{breakpoint}`	Contenedor que se activa en un breakpoint	Según breakpoint

Las 12 Columnas:

Bootstrap divide el ancho de la fila en 12 columnas. Puedes combinar clases para crear layouts complejos:

<div class="row">
  <div class="col-6 col-md-8">Columna ancha</div>
  <div class="col-6 col-md-4">Columna estrecha</div>
</div>

← Volver a temas

📱 Breakpoints y Responsive

Breakpoints de Bootstrap 5:

Breakpoint	Clase	Ancho
Extra small	`-`	< 576px
Small	`-sm`	≥ 576px
Medium	`-md`	≥ 768px
Large	`-lg`	≥ 992px
Extra large	`-xl`	≥ 1200px
Extra extra large	`-xxl`	≥ 1400px

Ejemplo de uso responsive:

<!-- Columna que ocupa todo en móvil, mitad en tablet, un tercio en desktop -->
<div class="col-12 col-md-6 col-lg-4">
  Contenido responsive
</div>

Clases de display responsive:

<!-- Ocultar en móvil, mostrar en desktop -->
<div class="d-none d-lg-block">Solo desktop</div>

<!-- Mostrar solo en móvil -->
<div class="d-block d-md-none">Solo móvil</div>

← Volver a temas

🧭 Navbar y Navegación

Navbar Responsive Básico:

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <div class="container">
    <a class="navbar-brand" href="#">Mi Marca</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item"><a class="nav-link active" href="#">Inicio</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Servicios</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Contacto</a></li>
      </ul>
    </div>
  </div>
</nav>

Variantes de color:

bg-primary - Azul (color principal)
bg-dark - Fondo oscuro
bg-light - Fondo claro
bg-success - Verde
bg-danger - Rojo

Navbar con formulario de búsqueda:

<form class="d-flex">
  <input class="form-control me-2" type="search" placeholder="Buscar">
  <button class="btn btn-outline-success" type="submit">Buscar</button>
</form>

← Volver a temas

🃏 Cards y Contenedores

Card Básica:

<div class="card" style="width: 18rem;">
  <img src="imagen.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Título de la Card</h5>
    <p class="card-text">Descripción del contenido de la card.</p>
    <a href="#" class="btn btn-primary">Ver más</a>
  </div>
</div>

Card con header y footer:

<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Título especial</h5>
    <p class="card-text">Contenido destacado.</p>
  </div>
  <div class="card-footer text-muted">
    Hace 2 días
  </div>
</div>

Grid de Cards:

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col"><div class="card">...</div></div>
  <div class="col"><div class="card">...</div></div>
  <div class="col"><div class="card">...</div></div>
</div>

💡 Tip: Usa card-group para crear un grupo de cards del mismo tamaño que se unen visualmente.

← Volver a temas

📝 Formularios y Validación

Formulario Básico:

<form>
  <div class="mb-3">
    <label class="form-label">Email</label>
    <input type="email" class="form-control" placeholder="nombre@email.com">
  </div>
  <div class="mb-3">
    <label class="form-label">Contraseña</label>
    <input type="password" class="form-control">
  </div>
  <button type="submit" class="btn btn-primary">Enviar</button>
</form>

Validación de Formularios:

<form class="needs-validation" novalidate>
  <div class="mb-3">
    <label class="form-label">Nombre</label>
    <input type="text" class="form-control" required>
    <div class="invalid-feedback">
      Por favor ingresa tu nombre
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Enviar</button>
</form>

Tipos de inputs HTML5:

type="email" - Validación de email
type="number" - Solo números
type="date" - Selector de fecha
type="tel" - Número telefónico
type="range" - Slider de rango

← Volver a temas

🔔 Modals y Alerts

Modal Básico:

<!-- Botón trigger -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#miModal">
  Abrir Modal
</button>

<!-- Modal -->
<div class="modal fade" id="miModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Título</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        Contenido del modal...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
        <button type="button" class="btn btn-primary">Guardar</button>
      </div>
    </div>
  </div>
</div>

Alerts:

<div class="alert alert-success" role="alert">
  ¡Operación exitosa!
</div>
<div class="alert alert-danger" role="alert">
  ¡Error! Algo salió mal.
</div>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
  ¡Advertencia!
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

💡 Tip: Los modals pueden tener diferentes tamaños usando modal-sm, modal-lg o modal-xl en el modal-dialog.

← Volver a temas

🎨 Personalización con Sass

Configuración de Sass:

// 1. Importar funciones de Bootstrap
@import "../../node_modules/bootstrap/scss/functions";

// 2. Sobrescribir variables
$primary: #7952b3;
$secondary: #563d7c;
$font-family-base: 'Roboto', sans-serif;
$border-radius: 0.5rem;

// 3. Importar Bootstrap
@import "../../node_modules/bootstrap/scss/bootstrap";

Variables personalizables principales:

$primary, $secondary - Colores del tema
$font-family-base - Tipografía principal
$border-radius - Radio de bordes
$spacer - Unidad base de espaciado
$grid-breakpoints - Puntos de quiebre

Compilar Sass:

# Con npm scripts
npm run build

# Con Sass CLI
sass scss/main.scss css/styles.css

⚠️ Importante: Siempre importa las funciones antes de sobrescribir variables, ya que algunas variables dependen de funciones para su cálculo.

← Volver a temas

🛠️ Utilidades y Helpers

Spacing (Espaciado):

<!-- margin: 1rem -->
<div class="m-3"></div>

<!-- padding: 2rem -->
<div class="p-4"></div>

<!-- margin-top: 1.5rem -->
<div class="mt-3"></div>

<!-- padding-x: 2rem (left y right) -->
<div class="px-4"></div>

Display y Flexbox:

<!-- Display -->
<div class="d-none"></div>      /* Oculto */
<div class="d-block"></div>     /* Block */
<div class="d-flex"></div>     /* Flexbox */
<div class="d-inline-block"></div>

<!-- Flexbox utilities -->
<div class="d-flex justify-content-center align-items-center">
  Contenido centrado
</div>

Text utilities:

text-center, text-start, text-end - Alineación
text-primary, text-success - Colores
fw-bold, fst-italic - Peso y estilo
text-uppercase, text-lowercase - Transformación

← Volver a temas

🌙 Dark Mode y Temas

Activar Dark Mode:

<!-- En el HTML -->
<html data-bs-theme="dark">

<!-- O con JavaScript -->
<script>
  document.documentElement.setAttribute('data-bs-theme', 'dark');
</script>

Toggle Dark/Light con botón:

<button class="btn btn-primary" id="themeToggle">
  Cambiar tema
</button>

<script>
  const toggle = document.getElementById('themeToggle');
  toggle.addEventListener('click', () => {
    const current = document.documentElement.getAttribute('data-bs-theme');
    document.documentElement.setAttribute('data-bs-theme', current === 'dark' ? 'light' : 'dark');
  });
</script>

Clases específicas para dark mode:

text-bg-primary - Texto con fondo primario
navbar-dark - Navbar para fondos oscuros
table-dark - Tabla oscura

💡 Tip: Bootstrap 5.3+ soporta auto-detección del tema del sistema usando prefers-color-scheme en CSS.

← Volver a temas

🏆 Proyecto Final

Estructura del Proyecto:

Vamos a crear una landing page completa utilizando todos los conceptos aprendidos:

<!-- Estructura base -->
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="bootstrap.min.css" rel="stylesheet">
  <link href="styles.css" rel="stylesheet">
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-primary">...</nav>
  
  <header class="hero">...</header>
  
  <section class="features">...</section>
  
  <section class="pricing">...</section>
  
  <footer class="bg-dark text-white py-4">...</footer>
  
  <script src="bootstrap.bundle.min.js"></script>
</body>
</html>

Componentes a incluir:

Navbar responsive con logo y menú
Hero section con CTA buttons
Grid de features con cards e íconos
Sección de precios con tablas
Formulario de contacto con validación
Footer con enlaces y redes sociales

🎯 Objetivo: Al completar este proyecto, habrás dominado Bootstrap 5 y podrás crear sitios web profesionales responsive de manera rápida y eficiente.

← Volver a temas

¿Qué es Bootstrap 5?

Framework de CSS

Para Qué Sirve

Características Principales

💡 ¿Sabías qué?

Arquitectura de Bootstrap 5

HTML5 + CSS3

Bootstrap Grid

Componentes

Utilidades

📊 Sistema Grid

💾 Componentes

🔒 Utilidades

📖 Temas del Curso

Módulo 1: Fundamentos

Módulo 2: Componentes

Módulo 3: Avanzado

📌 Introducción a Bootstrap 5

Historia de Bootstrap:

Características principales de Bootstrap 5:

🔧 Instalación y Configuración

Método 1: CDN (Recomendado para principiantes)

Método 2: npm (Para proyectos profesionales)

Método 3: Descarga directa

📐 Sistema Grid y Containers

Estructura del Grid System:

Tipos de Containers:

Las 12 Columnas:

📱 Breakpoints y Responsive

Breakpoints de Bootstrap 5:

Ejemplo de uso responsive:

Clases de display responsive:

🧭 Navbar y Navegación

Navbar Responsive Básico:

Variantes de color:

Navbar con formulario de búsqueda:

🃏 Cards y Contenedores

Card Básica:

Card con header y footer:

Grid de Cards:

📝 Formularios y Validación

Formulario Básico:

Validación de Formularios:

Tipos de inputs HTML5:

🔔 Modals y Alerts

Modal Básico:

Alerts:

🎨 Personalización con Sass

Configuración de Sass:

Variables personalizables principales:

Compilar Sass:

🛠️ Utilidades y Helpers

Spacing (Espaciado):

Display y Flexbox:

Text utilities:

🌙 Dark Mode y Temas

Activar Dark Mode:

Toggle Dark/Light con botón:

Clases específicas para dark mode:

🏆 Proyecto Final

Estructura del Proyecto:

Componentes a incluir:

Ejemplos de Código

Navbar Responsive

Grid System

Card Component

Modal Dialog

👨‍💻 Desarrollado por Isaac Esteban Haro Torres