6.15. Mensajes de alerta (Bootstrap 3, el manual oficial)

Este tipo de mensajes se utilizan normalmente para proporcionar al usuario información contextual sobre el resultado de sus acciones.

6.15.1. Ejemplo sencillo

Para mostrar un mensaje de alerta, encierra dentro de un elemento con la clase .alert tanto el texto del mensaje como el botón opcional para ocultar la alerta. Además de esta clase base, también debes aplicar cualquiera de las otras cuatro clases .alert-* para indicar explícitamente el tipo de mensaje (advertencia, error, éxito, información).

Nota Los mensajes de alerta no definen un estilo por defecto. Por eso es obligatorio indicar siempre tanto la clase base .alert como uno de sus modificadores (.alert-success, etc.) El motivo es que en la práctica no tiene sentido mostrar un mensaje de alerta neutro (por ejemplo, de color gris claro), ya que las alertas siempre son de algún tipo (advertencia, error, éxito, información).

Ejemplo:

<div class="alert alert-success">...</div>
<div class="alert alert-info">...</div>
<div class="alert alert-warning">...</div>
<div class="alert alert-danger">...</div>

Así se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debería tener este ejemplo:

Figura 6.49 Mensajes de alerta en Bootstrap 3

6.15.2. Cerrando los mensajes de alerta

Opcionalmente los mensajes de alerta pueden mostrar un botón de cierre para ocultar la alerta. Para que funcione este comportamiento, es necesario incluir el plugin alerts de JavaScript. Ejemplo:

<div class="alert alert-warning alert-dismissable">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  <strong>¡Cuidado!</strong> Es muy importante que leas este mensaje de alerta.
</div>

Así se ve este ejemplo en tu navegador (pulsa sobre la X de la derecha para cerrar el mensaje):

Y esta es la imagen del aspecto que debería tener este ejemplo:

Figura 6.50 Cerrando mensajes de alerta en Bootstrap 3

No olvides añadir el atributo data-dismiss="alert" al botón que cierra la alerta para que funcione bien en todos los dispositivos.

6.15.3. Añadiendo enlaces a las alertas

Si el mensaje de la alerta contiene enlaces, resulta conveniente aplicarles la clase .alert-link para que su aspecto se adapte al del resto del mensaje. Ejemplo:

<div class="alert alert-success">
  <a href="#" class="alert-link">...</a>
</div>

<div class="alert alert-info">
  <a href="#" class="alert-link">...</a>
</div>

<div class="alert alert-warning">
  <a href="#" class="alert-link">...</a>
</div>

<div class="alert alert-danger">
  <a href="#" class="alert-link">...</a>
</div>

Así se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debería tener este ejemplo:

Figura 6.51 Mensajes de alerta con enlaces en Bootstrap 3