Using the bootstrap alerts for messages

nnmon/templates/base.html

@@ -70,6 +70,14 @@
 			</div>
 		</div>
 
+		{% if messages %}
+			{% for message in messages %}
+				<div class="alert alert-{{ message.tags }} alert-dismissible" role="alert">
+					<button tye="button" class="close" data-dismiss="alert" aria-lable={% trans "Close" %}><span aria-hidden="true">&times;</span></button>
+					{{message|safe}}
+				</div>
+			{% endfor %}
+		{% endif %}
 		<div id="wrapper">
 			<div class="container-fluid">
 				<div class="row">

nnmon/templates/index.html

@@ -72,13 +72,6 @@
 {% endblock %}
 
 {%block content%}
-{% if messages %}
-<ul class="messages">
-	{% for message in messages %}
-	<li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message|safe }}</li>
-	{% endfor %}
-</ul>
-{% endif %}
 <div class="row">
 	<div class="col-xs-12 col-md-8" id="content">
 		<h2>{% trans "On the Internet, <strong>you</strong> decide what you do, right? <i>Maybe not!</i>" %}</h2>