Alertas de Bootstrap4

Bootstrap 4 permite implementar alertas fácilmente.

Las alertas se pueden crear usando.alertla clase, y luego agregando.alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-lighto.alert-darkla clase para lograrlo:

Ejemplo

<div class="alert alert-success"> <strong>¡Éxito!</strong>Indica que la operación especificada se completó con éxito.</div>

Pruébalo »

Añadir enlaces a las alertas

Dentro de la alerta, agregue en la etiqueta del enlace laalert-linkclase para establecer enlaces que coincidan con el color de la alerta:

Ejemplo

<div class="alert alert-success"> <strong>¡Éxito!</strong>Debes leer atentamente<a href="#" class="alert-link">este mensaje</a>。 </div>

Pruébalo »

Cerrar alertas

Podemos agregar en el div de la alerta la.alert-dismissibleclase, y luego agregar en el enlace del botón de cierre laclass="close"ydata-dismiss="alert"clase para configurar la operación de cierre de la alerta.

Ejemplo

<div class="alert alert-success alert-dismissible"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>¡Éxito!</strong>Indica que la operación especificada se completó con éxito.</div>

Pruébalo »

Consejo:× (×) es un carácter de entidad HTML que representa la operación de cierre, no la letra 'x'.

Animación de alertas

.fadey.showLa clase se utiliza para establecer los efectos de desvanecimiento (fade in y fade out) de la alerta al cerrarse.

Ejemplo

Pruébalo »

Otras extensiones