Clase 4: Bootstrap Práctico

Ejemplos concretos de componentes, grid, tarjetas, carruseles y botones

"Bootstrap es la herramienta que convierte líneas de código en interfaces profesionales"

Instalación Grid Tarjetas Carrusel Botones Colores Ejemplos

1) Instalación de Bootstrap por CDN

La forma más rápida de usar Bootstrap es incluirlo mediante CDN (Content Delivery Network). No necesitas descargar nada ni instalar dependencias.

¿Cómo agregar Bootstrap a tu página?

Simplemente agrega estas dos líneas en el <head> de tu archivo HTML:

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

Y antes de cerrar el </body>, agrega el JavaScript de Bootstrap:

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
¿Por qué CDN? El CDN distribuye el archivo desde servidores alrededor del mundo, lo que hace que tu página cargue más rápido. Además, si otros sitios usan el mismo CDN, el navegador puede usar la versión en caché.

Estructura básica de una página con Bootstrap

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mi página con Bootstrap</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container">
    <h1>¡Hola Bootstrap!</h1>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

2) Sistema de Grid

El grid de Bootstrap divide la pantalla en 12 columnas. Tú decides cuántas columnas ocupan tus elementos en diferentes tamaños de pantalla.

Esto permite crear diseños responsivos sin escribir mucho CSS. Bootstrap automáticamente ajusta los elementos al tamaño de la pantalla.

Ejemplo 1: Tres columnas iguales

<div class="row">
  <div class="col">Columna 1</div>
  <div class="col">Columna 2</div>
  <div class="col">Columna 3</div>
</div>

Resultado visual:

Columna 1
Columna 2
Columna 3

Ejemplo 2: Columnas con tamaños específicos

<div class="row">
  <div class="col-6">6 columnas (mitad)</div>
  <div class="col-3">3 columnas (1/4)</div>
  <div class="col-3">3 columnas (1/4)</div>
</div>

Resultado visual:

6 columnas (mitad)
3 columnas (1/4)
3 columnas (1/4)

Ejemplo 3: Responsive - diferentes tamaños en pantallas diferentes

<div class="row">
  <div class="col-12 col-md-6 col-lg-3">Contenido</div>
  <div class="col-12 col-md-6 col-lg-3">Contenido</div>
  <div class="col-12 col-md-6 col-lg-3">Contenido</div>
  <div class="col-12 col-md-6 col-lg-3">Contenido</div>
</div>

Resultado visual:

Celular: 12
Tablet: 6
Desktop: 3
Celular: 12
Tablet: 6
Desktop: 3
Celular: 12
Tablet: 6
Desktop: 3
Celular: 12
Tablet: 6
Desktop: 3

col-12

En móviles: ocupan todo el ancho (12 columnas)

col-md-6

En tablets (md): ocupan media pantalla (6 columnas)

col-lg-3

En desktops (lg): ocupan 1/4 de pantalla (3 columnas)

3) Tarjetas (Cards)

Las tarjetas son cajas con contenido que se usan para mostrar información de forma organizada. Pueden contener texto, imágenes, botones y más.

Ejemplo 1: Tarjeta simple con texto

<div class="card card-example">
  <div class="card-body">
    <h5 class="card-title">Título de la tarjeta</h5>
    <p class="card-text">Este es el contenido de texto de la tarjeta.</p>
    <a href="#" class="btn btn-primary">Leer más</a>
  </div>
</div>

Resultado visual:

Tarjeta con texto

Este es un ejemplo de tarjeta simple con texto descriptivo y un botón para más información.

Leer más

Ejemplo 2: Tarjeta con imagen

<div class="card card-example">
  <img src="https://via.placeholder.com/300x200" class="card-img-top" alt="Imagen">
  <div class="card-body">
    <h5 class="card-title">Tarjeta con imagen</h5>
    <p class="card-text">La imagen aparece en la parte superior de la tarjeta.</p>
    <a href="#" class="btn btn-success">Ver detalles</a>
  </div>
</div>

Resultado visual:

Imagen ejemplo
Tarjeta con imagen

La imagen aparece en la parte superior de la tarjeta y el contenido abajo.

Ver detalles

Ejemplo 3: Múltiples tarjetas en una fila

<div class="row">
  <div class="col-md-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Tarjeta 1</h5>
        <p class="card-text">Contenido...</p>
      </div>
    </div>
  </div>
</div>

Resultado visual:

Producto 1
Producto 1

Descripción del producto uno

Producto 2
Producto 2

Descripción del producto dos

Producto 3
Producto 3

Descripción del producto tres

4) Carrusel (Carousel)

Un carrusel es un componente que muestra imágenes una después de otra, con botones para navegar. Es útil para galerías, promociones y destacados.

Ejemplo: Carrusel básico

<div id="miCarrusel" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="imagen1.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="imagen2.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="imagen3.jpg" class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#miCarrusel" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#miCarrusel" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </button>
</div>

Resultado visual:

Notas importantes:
  • carousel-item active indica cuál es la primera imagen a mostrar
  • data-bs-ride="carousel" hace que el carrusel se mueva automáticamente
  • Los botones prev y next permiten navegar manualmente

5) Botones de Bootstrap

Bootstrap ofrece botones con estilos predefinidos. Cada uno tiene un propósito visual específico que ayuda al usuario a entender qué hacer.

Estructura básica de un botón

<button class="btn btn-primary">Botón</button>
<a href="#" class="btn btn-secondary">Enlace como botón</a>

Diferentes tipos de botones (por propósito)

Resultado visual:

Tamaños de botones

<button class="btn btn-primary btn-lg">Botón grande</button>
<button class="btn btn-primary">Botón normal</button>
<button class="btn btn-primary btn-sm">Botón pequeño</button>

Resultado visual:

Botones de contorno (outline)

<button class="btn btn-outline-primary">Outline</button>
<button class="btn btn-outline-danger">Outline</button>
<button class="btn btn-outline-success">Outline</button>

Resultado visual:

btn-primary

Botón principal para acciones principales (azul)

btn-danger

Advertencia o acciones destructivas (rojo)

btn-success

Confirmación o acciones positivas (verde)

btn-warning

Alertas o precaución (amarillo)

btn-outline-*

Botones con bordes, menos énfasis que los sólidos

btn-lg / btn-sm

Variaciones de tamaño para diferentes contextos

6) Sistema de colores de Bootstrap

Bootstrap define una paleta de colores estándar. Estos colores se usan en botones, alertas, fondos, textos y componentes. Conocerlos te ayuda a usar Bootstrap de forma consistente.

Colores principales y sus significados

Primary - #0d6efd
Acciones principales
Secondary - #6c757d
Acciones secundarias
Success - #198754
Confirmación positiva
Danger - #dc3545
Errores o acciones destructivas
Warning - #ffc107
Advertencias
Info - #0dcaf0
Información importante
color: #333; Light - #f8f9fa
Fondos claros
Dark - #212529
Textos oscuros

Cómo usar los colores en tu código

<!-- Botones con colores -->
<button class="btn btn-primary">Primario</button>
<button class="btn btn-success">Éxito</button>
<button class="btn btn-danger">Peligro</button>

<!-- Alertas con colores -->
<div class="alert alert-success">¡Operación exitosa!</div>
<div class="alert alert-danger">Ha ocurrido un error</div>

<!-- Texto con colores -->
<p class="text-primary">Texto en color primario</p>
<p class="text-danger">Texto en rojo</p>

<!-- Fondos con colores -->
<div class="bg-warning p-3">Fondo amarillo</div>
<div class="bg-info p-3">Fondo azul claro</div>

7) Ejemplos prácticos completos

Ejemplo 1: Página de producto

<div class="container mt-5">
  <div class="row">
    <div class="col-md-6">
      <img src="producto.jpg" class="img-fluid" alt="Producto">
    </div>
    <div class="col-md-6">
      <h1>Producto Premium</h1>
      <p class="text-muted">Descripción del producto...</p>
      <h3 class="text-success">$99.99</h3>
      <button class="btn btn-primary btn-lg">Comprar ahora</button>
    </div>
  </div>
</div>

Ejemplo 2: Galería de tarjetas

<div class="container mt-5">
  <h2 class="mb-4">Nuestros servicios</h2>
  <div class="row">
    <div class="col-md-4">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Servicio 1</h5>
          <p class="card-text">Descripción...</p>
        </div>
      </div>
    </div>
  </div>
</div>

Ejemplo 3: Sistema de alertas

<div class="alert alert-success" role="alert">
  ¡Éxito! Tu cuenta ha sido creada correctamente.
</div>

<div class="alert alert-warning" role="alert">
  ⚠️ Advencia: Tu sesión expirará en 5 minutos.
</div>

<div class="alert alert-danger" role="alert">
  ❌ Error: No se pudo procesar tu solicitud. Intenta nuevamente.
</div>

Resultado visual:

✓ ¡Éxito! Tu cuenta ha sido creada correctamente.
⚠️ Advertencia: Tu sesión expirará en 5 minutos.
❌ Error: No se pudo procesar tu solicitud. Intenta nuevamente.
Resumen de lo aprendido:
  • ✓ Bootstrap se instala fácilmente por CDN
  • ✓ El grid (12 columnas) permite crear layouts responsivos
  • ✓ Las tarjetas organizan contenido de forma modular
  • ✓ El carrusel muestra imágenes de forma automática
  • ✓ Los botones tienen estilos y colores predefinidos
  • ✓ El sistema de colores mantiene consistencia visual