Bootstrap 5 es la última versión importante de Bootstrap en la que se ha renovado la interfaz de usuario y se han realizado varios cambios. Las alertas proporcionan mensajes de retroalimentación contextuales para las acciones típicas del usuario con un puñado de mensajes de alerta disponibles y flexibles. Bootstrap permite mostrar estos mensajes de alerta en el sitio web utilizando clases predefinidas. Cada una de las clases tiene diferentes colores asociados a ellas.
Sintaxis:
<div class="alert alert-type"> Contents of the alert... <div>
Tipos: hay ocho tipos de alertas disponibles en Bootstrap 5. Las clases de estas alertas se indican a continuación:
- alerta-principal
- alerta-secundaria
- alerta-éxito
- alerta-peligro
- alerta-advertencia
- alerta-info
- luz de alerta
- alerta-oscuro
Ejemplo 1: este ejemplo muestra los primeros cuatro tipos de alertas en Bootstrap 5.
HTML
<!DOCTYPE html> <html> <head> <title> Bootstrap 5 | Alerts </title> <!-- Load Bootstrap --> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"> </head> <body> <div style="text-align: center; width:600px;"> <h1 style="color: green;"> GeeksforGeeks </h1> </div> <div id="canvas" style="width: 600px; height: 200px; margin: 20px;"> <div class="alert alert-primary" role="alert"> GeeksforGeeks </div> <div class="alert alert-secondary" role="alert"> GeeksforGeeks </div> <div class="alert alert-success" role="alert"> GeeksforGeeks </div> <div class="alert alert-danger" role="alert"> GeeksforGeeks </div> </div> </body> </html>
Producción:
Ejemplo 2: este ejemplo muestra los siguientes cuatro tipos de alertas en Bootstrap 5.
HTML
<!DOCTYPE html> <html> <head> <title> Bootstrap 5 | Alerts </title> <!-- Load Bootstrap --> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"> </head> <body> <div style="text-align: center; width: 600px;"> <h1 style="color: green;"> GeeksforGeeks </h1> </div> <div id="canvas" style="width: 600px; height: 200px; margin: 20px;"> <div class="alert alert-warning" role="alert"> GeeksforGeeks </div> <div class="alert alert-info" role="alert"> GeeksforGeeks </div> <div class="alert alert-light" role="alert"> GeeksforGeeks </div> <div class="alert alert-dark" role="alert"> GeeksforGeeks </div> </div> </body> </html>
Producción:
