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">&times;</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">