Introducción a Bootstrap 5 y Primeros Pasos
Aprende qué es Bootstrap 5, sus novedades frente a versiones anteriores, inclusión mediante CDN oficial de jsDelivr y la estructura básica de una página adaptable.
¿Qué es Bootstrap 5?
Bootstrap es el framework de código abierto más popular del mundo para diseñar sitios y aplicaciones web adaptables (responsive) y con enfoque móvil prioritario (mobile-first). Provee un catálogo completo de componentes prediseñados y clases utilitarias listas para usar.
| Característica | Bootstrap 4 (Antiguo) | Bootstrap 5.3 (Moderno) |
|---|---|---|
| Dependencia de JavaScript | Requería jQuery obligatoriamente. | Vanilla JavaScript puro (cero jQuery, mayor velocidad). |
| Personalización | Preprocesador Sass rígido. | Variables CSS nativas y soporte para modo oscuro automático. |
| Sistema de Rejilla | Hasta breakpoint xl (1200px). |
Nuevo breakpoint ultra-panorámico xxl (≥1400px). |
| Iconos y Utilidades | Dependiente de fuentes de terceros. | Bootstrap Icons nativo y potente API de utilidades. |
Inclusión Rápida mediante CDN Oficial
Para utilizar Bootstrap 5 en tus proyectos, enlaza la hoja de estilos en la sección <head> y el paquete de scripts (bundle) antes del cierre de <body>:
<!-- CSS compilado de Bootstrap 5.3 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bundle JS (incluye Popper para modales y dropdowns) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>- Meta Viewport Obligatorio: Para que el diseño responsivo funcione en móviles, tu HTML siempre debe incluir:
<meta name="viewport" content="width=device-width, initial-scale=1">. - Sandbox de Kilopolis: Los estilos y scripts de Bootstrap 5 ya están vinculados en este editor interactivo para pruebas instantáneas.
⚡ Plantilla Básica de Inicio con Bootstrap 5
Un contenedor responsivo con tarjeta de presentación, botón interactivo e insignias de bienvenida estilizadas con Bootstrap 5:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mi Primer Proyecto Bootstrap 5</title>
<!-- CSS de Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light p-4">
<div class="container" style="max-width: 600px;">
<div class="card shadow-sm border-0 rounded-4">
<div class="card-body p-4 text-center">
<span class="badge bg-primary-subtle text-primary fw-bold px-3 py-2 rounded-pill mb-3">
Bootstrap 5 · Kilopolis Academia
</span>
<h1 class="card-title h3 fw-bold text-dark mb-2">
¡Hola Mundo con Bootstrap 5!
</h1>
<p class="card-text text-secondary mb-4">
Construye interfaces elegantes y 100% adaptables en minutos combinando clases utilitarias de espaciado, sombra y color sin redactar código CSS manual.
</p>
<div class="d-flex justify-content-center gap-2">
<button class="btn btn-primary px-4 fw-semibold shadow-sm" onclick="alert('¡Bienvenido al curso de Bootstrap 5 en Kilopolis!')">
Comenzar Ahora »
</button>
<button class="btn btn-outline-secondary px-3" onclick="alert('Explorando componentes...')">
Documentación
</button>
</div>
</div>
</div>
</div>
<!-- Bundle JS de Bootstrap 5 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.🚀 ¿Quieres dominar Manual Completo de Bootstrap 5.3 y crear proyectos reales?
Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.
🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.