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

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.

Apply

it's pretty odd that every answer under is for an alert and not a toast. p.s. yours is ok by my problem was my outdated Bootstrap. toast was introduced in 4.0.0 but mine was v3.3.7 – Utter

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">&times;</span>
        </button>
        {{ message | safe }}
    </div>
{% endfor %}

Kirstinkirstyn

Two problems. First, from django.contrib.messages import constants as messages - need to add to settings. Second, when the message is displayed, the close button doesn't work. Is it possible to fix? – Audly

this is a bootstrap alert, not a toast. they're different: getbootstrap.com/docs/4.4/components/alerts & getbootstrap.com/docs/4.4/components/toasts accordingly – Utter

Answer 2

building on dan's answer for newer bootstrap versions (5.3):

add this to settings.py

from django.contrib import messages

MESSAGE_TAGS = {
    messages.DEBUG: 'alert-info',
    messages.INFO: 'alert-info',
    messages.SUCCESS: 'alert-success',
    messages.WARNING: 'alert-warning',
    messages.ERROR: 'alert-danger',
}

use this in the template:

{% for message in messages %}
  <div class="alert alert-dismissible {{ message.tags }}" role="alert">
    <div>{{ message | safe }}</div>
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  </div>
{% endfor %}

Damaris

works with BS 5.1 too – Artois

Answer 3

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/.

Darell

Answer 4

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">&times;</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")

Photoflash

Answer 5

about the same as the previous answer, but for bootstrap5:

(add import for settings.py)

# settings.py
from django.contrib import messages

MESSAGE_TAGS = {
    messages.DEBUG: 'alert-info',
    messages.INFO: 'alert-info',
    messages.SUCCESS: 'alert-success',
    messages.WARNING: 'alert-warning',
    messages.ERROR: 'alert-danger',
}

replace data-dismiss with data-bs-dismiss(bootstrap5 change)

<!--base.html-->
{% for message in messages %}
    <div class="alert {{ message.tags }} alert-dismissible shadow fade show" role="alert">
        <button type="button" class="close" data-bs-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
        {{ message | safe }}
    </div>
{% endfor %}

Misstate