Bootstrap te proporciona una manera fácil para crear mensajes de alerta. Para ello debes de utilizar la clase .alert, seguida de una de estas cuatro clases contextuales: .alert-success, .alert-info, .alert-warning o .alert-danger:
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap: Alertas - Webdisenia</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>Alertas</h2>
<div class="alert alert-success">
<strong>Success!</strong> Este cuadro de alerta suele utilizarse para indicar acciones exitosas o positivas.</div>
<div class="alert alert-info">
<strong>Info!</strong> Este cuadro de alerta suele utilizarse para indicar información sobre una acción.</div>
<div class="alert alert-warning">
<strong>Warning!</strong> Este cuadro de alerta suele utilizase para indicar una advertencia que podría necesitar atención.</div>
<div class="alert alert-danger">
<strong>Danger!</strong> Este cuadro de alerta suele utilizarse para indicar una acción potencialmente peligrosa o negativa.</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
Resultado en el navegador:
Cerrar los mensajes de alerta
Puedes añadir a los mensajes de alerta un botón de cierre para ocultar la alerta una vez leída. Para ello es necesario añadir class=”close” y data-dismiss=”alert”
Ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap: alertas - Webdisenia</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>Alertas</h2>
Los elementos class="close" y data-dismiss="alert" se utilizan para cerrar los mensajes de alerta.
<div class="alert alert-warning alert-dismissable">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>¡Cuidado!</strong> Es muy importante que leas este mensaje de alerta.</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
× (x) es un entidad HTML que es el icono preferido para botones de cierre, en vez de la letra “x”.
Resultado en el navegador:
Añadiendo enlaces a las alertas
Si el mensaje de la alerta contiene enlaces, deberías utilizar la clase .alert-link para que su aspecto se adapte al del resto del mensaje.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap: alertas - Webdisenia</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>Alertas</h2>
<div class="alert alert-success">
<strong>¡Bien hecho!</strong> Has leído correctamente <a href="#" class="alert-link">este mensaje</a>.
</div>
<div class="alert alert-info">
<strong>¡Atento!</strong> Este mensaje <a href="#" class="alert-link">requiere de tu atención</a>, aunque no es tan importante.
</div>
<div class="alert alert-warning">
<strong>¡Cuidado!</strong> Es muy importante que leas <a href="#" class="alert-link">este mensaje de alerta</a>.
</div>
<div class="alert alert-danger">
<strong>¡Error!</strong> <a href="#" class="alert-link">Haz algunos cambios</a> antes de volver a enviar el formulario.
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
Resultado en el navegador:
