<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="{% static 'css/toastr.css' %}" media="all">
<script type="text/javascript" src="{% static 'js/toastr.min.js' %}"></script>
{% for message in messages %}
<div class="toast notification bg-{% if message.tags == 'error' %}danger{% else %}{{message.tags}}{% endif %}" role="alert" aria-live="assertive" aria-atomic="true" data-delay="5000">
<div class="toast-header">
<strong class="mr-auto">
{% if message.tags == 'error' %}
<i class="fas fa-times mr-2"></i>
{% elif message.tags == 'warning' %}
<i class="fas fa-exclamation mr-2"></i>
{% elif message.tags == 'info' %}
<i class="fas fa-info mr-2"></i>
{% elif message.tags == 'success' %}
<i class="fas fa-check mr-2"></i>
{% endif %}
{{message.tags|capfirst}}
</strong>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
{{message|safe}}
</div>
</div>
{% endfor %}
...
{% include 'message.html' %}
...
<!-- and at the end:-->
<script src="{% static 'js/jquery-3.4.1.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
{% if messages %}
<script>
{% for message in messages %}
$(document).ready(function () {
$('.toast').toast('show');
});
{% endfor %}
</script>
{% endif %}
.notification{
position: absolute;
top: 5rem;
right: 1rem;
}