Cajas de Alerta Informativas (Alerts)
Aprende a comunicar retroalimentación visual al usuario mediante cajas de alerta contextuales con .alert, enlaces resaltados con .alert-link y alertas descartables con animación fade.
Cajas de Alerta Contextuales (.alert)
Las alertas proporcionan mensajes contextuales de retroalimentación para acciones comunes de usuario (como confirmaciones de guardado, advertencias de expiración o fallos de autenticación).
<div class="alert alert-success" role="alert">
¡Tu perfil ha sido actualizado con éxito!
</div>Enlaces y Encabezados dentro de Alertas
- Enlaces en Alertas (
.alert-link): Aplica un contraste cromático armonizado con el color de la alerta para que los enlaces no se pierdan en el fondo. - Encabezados (
.alert-heading): Estructura alertas extensas con un título destacado y separador horizontal<hr>.
Alertas Descartables con Botón de Cierre (Dismissible)
Para que el usuario pueda cerrar la alerta con un clic en la esquina, agrega la clase .alert-dismissible, las clases de animación fade show y un botón de cierre con data-bs-dismiss="alert":
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Aviso:</strong> Tu sesión expirará en 5 minutos.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Cerrar"></button>
</div>⚡ Alertas Interactivas y Descartables con Bootstrap 5
Haz clic en el botón de la esquina (la "X") de la alerta amarilla para ver la animación suave de descarte fade out sin recargar la página:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Alertas en Bootstrap 5</title>
<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: 680px;">
<h4 class="fw-bold text-dark mb-3">Mensajes Informativos en Kilopolis</h4>
<!-- 1. Alerta de Éxito con Enlace -->
<div class="alert alert-success d-flex align-items-center rounded-3 shadow-sm mb-3" role="alert">
<span class="fs-4 me-3">✅</span>
<div>
<strong>¡Inscripción Exitosa!</strong> Puedes revisar tu horario de clases en el
<a class="alert-link">panel de estudiante</a>.
</div>
</div>
<!-- 2. Alerta Descartable con botón de cierre -->
<div class="alert alert-warning alert-dismissible fade show rounded-3 shadow-sm mb-3" role="alert">
<h5 class="alert-heading fw-bold">⚠️ Atención: Mantenimiento Programado</h5>
<p class="mb-2">
La plataforma realizará una actualización de servidores el próximo domingo a las 02:00 AM UTC.
</p>
<hr>
<p class="mb-0 small text-dark">
Puedes descartar este aviso haciendo clic en la cruz de la derecha.
</p>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Cerrar"></button>
</div>
<!-- 3. Alerta de Error Crítico -->
<div class="alert alert-danger rounded-3 shadow-sm" role="alert">
<strong>Error 403:</strong> No cuentas con permisos de administrador para ejecutar esta operación.
</div>
</div>
<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.