Django messages + bootstrap toast. How to make it work? - django

Question

Trying to get bootstrap popup and django messages to work. The problem is that I do not understand how to do it correctly so that if there is a message in the context, it would be displayed in the upper right part of the site.
Documentation: https://getbootstrap.com/docs/4.3/components/toasts/
Django v3.1.6 and Bootstrap v4.5
In the static files of the project there is bootstrap.bundle.js, it is also included in the base template. I'm not good at django in layout, so I will be very grateful for the most detailed answer.

Answer 1

You can modify the message classes shown in your template using MESSAGE_TAGS setting.
Add this to your settings.py
MESSAGE_TAGS = {
messages.DEBUG: 'alert-info',
messages.INFO: 'alert-info',
messages.SUCCESS: 'alert-success',
messages.WARNING: 'alert-warning',
messages.ERROR: 'alert-danger',
}
Then display them in your template (preferably at your base template)
{% for message in messages %}
<div class="alert {{ message.tags }} alert-dismissible shadow fade show" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
{{ message | safe }}
</div>
{% endfor %}

Answer 2

You need to
a) create a message in the view
b) add messages section to the template
in the template you need to add something like this:
{% if messages %}
<div class="add-your-bootstrap-classes-here-if-needed">
{% for msg in messages %}
<!-- add your message displaying html here -->
{% endfor %}
</div>
{% endif %}
in the view you just have to use one of the methods listed in Django messaging framework documentation https://docs.djangoproject.com/en/3.1/ref/contrib/messages/.

Answer 3

I use something like:
{% for message in messages %}
<div class="alert {% for tag in message.extra_tags.split %}
{{tag}} {%endfor%} fade show"
role="alert">
<div class="d-flex justify-content-end">
<button type="button"
class="close btn-sm btn btn-danger"
data-dismiss="alert"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<hr>
<p class="text-center">
{{ message | safe }}
</p>
</div>
{% endfor %}
{% block main%}
and in the view function, you should pass the extra_tags like this:
messages.success(self.request, "messge here", "alert-success alert-dismissible")