Este tipo de mensajes se utilizan normalmente para proporcionar al usuario información contextual sobre el resultado de sus acciones.
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).
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).
Ejmplos;
¡Bien hecho! Has leído correctamente este mensaje tan importante.
¡Atento! Este mensaje requiere de tu atención, aunque no es tan importante.
¡Cuidado! Es muy importante que leas este mensaje de alerta.
¡Error! Haz algunos cambios antes de volver a enviar el formulario.
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:
¡Cuidado! Es muy importante que leas este mensaje de alerta.
Así se ve este ejemplo en tu navegador (pulsa sobre la X de la derecha para cerrar el mensaje):No olvides añadir el atributo data-dismiss="alert" al botón que cierra la alerta para que funcione bien en todos los dispositivos.
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:
¡Bien hecho! Has leído correctamenteeste mensaje tan importante.
¡Atento! Este mensaje ,requiere de tu atención. aunque no es tan importante.
¡Cuidado! Es muy importante que leaseste mensaje de alerta.
¡Error! Haz algunos cambios antes de volver a enviar el formulario.
Así se ve este ejemplo: