Tabla de contenido
- ¿Qué es Bootstrap?
- ¿Por qué usar Bootstrap?
- Cómo incluir Bootstrap en tu proyecto
- El sistema de Grid
- Componentes esenciales
- Clases de utilidad
- ¿Bootstrap 4 o Bootstrap 5?
Si has visto sitios web con botones bien estilizados, formularios limpios y layouts responsivos sin mucho esfuerzo de CSS, hay muchas probabilidades de que estés viendo Bootstrap en acción. Es el framework CSS más descargado de la historia.
¿Qué es Bootstrap?
Bootstrap es un framework de CSS de código abierto creado originalmente por Twitter en 2011. Su objetivo es permitirte crear interfaces web responsivas y bien diseñadas con muy poco código personalizado.
En términos prácticos: en lugar de escribir CSS desde cero para hacer un botón, un menú de navegación o una tarjeta, Bootstrap te da clases predefinidas que ya tienen todo el estilo. Solo las añades a tu HTML y listo.
¿Por qué usar Bootstrap?
- Ahorra tiempo: en vez de escribir cientos de líneas de CSS, agregas clases y listo.
- Responsivo por defecto: todo en Bootstrap está diseñado para verse bien en móviles, tablets y escritorio.
- Consistencia: todos los componentes tienen un diseño uniforme y profesional.
- Documentación excelente: getbootstrap.com tiene todos los componentes con ejemplos de código copiables.
- Comunidad enorme: miles de temas, plantillas y extensiones disponibles.
Cómo incluir Bootstrap en tu proyecto
La forma más rápida es usando el CDN (Content Delivery Network). Solo añade estas líneas en tu HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mi proyecto con Bootstrap</title>
<!-- CSS de Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>Hola desde Bootstrap</h1>
<!-- JavaScript de Bootstrap (para componentes interactivos) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Con esto ya tienes Bootstrap listo para usar. No necesitas descargar nada.
El sistema de Grid
El sistema de Grid es la característica más importante de Bootstrap. Divide el ancho de la pantalla en 12 columnas y te permite especificar cuántas columnas ocupa cada elemento en diferentes tamaños de pantalla.
<div class="container">
<div class="row">
<!-- En escritorio: 2 columnas de 6. En móvil: apiladas (12 columnas c/u) -->
<div class="col-12 col-md-6">
<p>Columna izquierda</p>
</div>
<div class="col-12 col-md-6">
<p>Columna derecha</p>
</div>
</div>
</div>Los breakpoints (puntos de quiebre) de Bootstrap 5:
| Clase | Tamaño mínimo | Dispositivo |
|---|---|---|
col- | < 576px | Móvil |
col-sm- | ≥ 576px | Móvil grande |
col-md- | ≥ 768px | Tablet |
col-lg- | ≥ 992px | Escritorio |
col-xl- | ≥ 1200px | Escritorio grande |
Componentes esenciales
Bootstrap viene con docenas de componentes listos para usar. Aquí los más comunes:
Botones:
<button class="btn btn-primary">Primario</button>
<button class="btn btn-secondary">Secundario</button>
<button class="btn btn-danger">Eliminar</button>
<button class="btn btn-outline-primary">Outline</button>Navbar (barra de navegación):
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Mi Sitio</a>
<div class="navbar-nav">
<a class="nav-link" href="#">Inicio</a>
<a class="nav-link" href="#">Blog</a>
<a class="nav-link" href="#">Contacto</a>
</div>
</div>
</nav>Cards (tarjetas):
<div class="card" style="width: 18rem;">
<img src="imagen.webp" class="card-img-top" alt="Imagen">
<div class="card-body">
<h5 class="card-title">Título de la tarjeta</h5>
<p class="card-text">Descripción del contenido de la tarjeta.</p>
<a href="#" class="btn btn-primary">Ver más</a>
</div>
</div>Alertas:
<div class="alert alert-success">¡Operación exitosa!</div>
<div class="alert alert-danger">Ha ocurrido un error.</div>
<div class="alert alert-warning">Atención, revisa este campo.</div>Modal:
<!-- Botón que abre el modal -->
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#miModal">
Abrir modal
</button>
<!-- El modal -->
<div class="modal fade" id="miModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Título del modal</h5>
<button class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
Contenido del modal aquí.
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
<button class="btn btn-primary">Guardar</button>
</div>
</div>
</div>
</div>Clases de utilidad
Además de los componentes, Bootstrap incluye cientos de clases de utilidad para controlar margin, padding, colores, tipografía y más:
<!-- Margin y Padding -->
<div class="mt-3">Margin top 3</div>
<div class="p-4">Padding 4 en todos lados</div>
<div class="mb-2 px-3">Margin bottom 2, padding horizontal 3</div>
<!-- Texto -->
<p class="text-center">Centrado</p>
<p class="text-danger fw-bold">Texto rojo y negrita</p>
<p class="fs-4">Tamaño de fuente 4</p>
<!-- Colores de fondo -->
<div class="bg-primary text-white p-3">Fondo azul</div>
<div class="bg-light p-3">Fondo claro</div>
<!-- Display -->
<div class="d-flex justify-content-between align-items-center">
<span>Izquierda</span>
<span>Derecha</span>
</div>¿Bootstrap 4 o Bootstrap 5?
En 2021 se lanzó Bootstrap 5, la versión actual. Los cambios más importantes respecto a Bootstrap 4:
- No depende de jQuery: Bootstrap 5 es JavaScript puro, más rápido y sin dependencias.
- Nuevas clases de utilidad: más opciones de espaciado, color y display.
- Componentes mejorados: offcanvas, acordeón renovado, tooltips mejorados.
- Mejor soporte RTL (idiomas de derecha a izquierda).
Si empiezas un proyecto nuevo, usa Bootstrap 5. Si tienes un proyecto legacy con Bootstrap 4, no hay urgencia de migrar.
Bootstrap sigue siendo una de las herramientas más útiles para cualquier desarrollador web. No necesitas ser experto en CSS para crear interfaces profesionales. Con práctica, aprenderás a usar su sistema de grid y componentes de forma natural.
