Flask flash message not closing on clicking the 'x' button

Question

I have a flask python code for user login and change password. When I change password I need to flash a message whether password was changed correctly or not.

{% with messages = get_flashed_messages() %}
            {% if messages %}
                {% for message in messages %}
                    <div class="alert alert-primary alert-dismissible fade show" role="alert">
                        <span>{{ message }}</span>
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                {% endfor %}
            {% endif %}
          {% endwith %}

I have used the above code snippet to flash message. My problem is that when I click the 'X' icon to close the message, I does nothing. can anyone please tell me where I am doing wrong? Also is it possible to timeout the alert message (i.e. alert message disappears after a couple of seconds?) if yes then how?

NOTE: I have zero experience in Javascript or any other method. Please provide me answers through HTML,CSS or python only. Thank you

Answer 1

Without seeing the remainder of your code, I can only assume that the issue here is similar to mine.

I was following an outdated tutorial when I began seeing this issue of flash messages not closing and even the close button itself wasn't being placed correctly. The solution was to recheck the dependencies for CSS and JS on the bootstrap instruction page. I was using a jQuery version that apparently wasn't compatible with Bootstrap 4.

https://getbootstrap.com/docs/4.0/getting-started/introduction/

CSS

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

JS

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>