Bootstrap 4 – Alertas
Bootstrap 4 proporciona una manera fácil de crear mensajes de alerta predefinidos.
Las alertas son creadas con la clase .alert seguido de las siguientes clases contextuales a elegir:
- .alert-success
- .alert-info
- .alert-warning
- .alert-danger
- .alert-primary
- .alert-secondary
- .alert-light
- .alert-dark
Ejm
<div class="alert alert-success"> <strong>Success!</strong> Indicates a successful or positive action. </div>
Links de alerta
Agrega la clase de enlace de alerta a cualquier enlace dentro del cuadro de alerta para crear “enlaces de colores coincidentes”.
Ejm
<div class="alert alert-success"> <strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>. </div>
Alertas de cierre
Para cerrar el mensaje de alerta, agrega una clase .alert-dismissible al contenedor de alertas. Luego agrega class = “close” y data-dismiss = “alert” a un enlace o elemento de botón (cuando hace clic en este, el cuadro de alerta desaparecerá).
Ejm
<div class="alert alert-success alert-dismissible"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>Success!</strong> Indicates a successful or positive action. </div>
Consejo: × (×) es una entidad HTML que es el icono preferido para los botones de cierre, en lugar de la letra “x”.
Alertas anidadas
Las clases .fade y .show agregan un efecto de desvanecimiento al cerrar el mensaje de alerta.
Ejm
<div class="alert alert-danger alert-dismissible fade show">