Flask Bootstrap Alerts and Close Button not displaying correctly-CodePudding

I am trying to get bootstraps alerts working but I think I missing something. Here is a cut down version of my code that displays the issues...

Python File

from flask import Flask, render_template
from flask_bootstrap import Bootstrap

app = Flask(__name__)
Bootstrap(app)

@app.route("/", methods=['GET', 'POST'])
def settings() -> None:
    return render_template('settings.html')

if __name__ == "__main__":
    app.run(debug=True)

HTML Template

{% extends "bootstrap/base.html" %}

{% block content %}

<div  role="alert">
    <strong>Holy guacamole!</strong> You should check in on some of those fields below.
    <button type="button"  data-bs-dismiss="alert" aria-label="Close"> 
</button>
</div>

{% endblock %}

When running this the alert doesn't display. When the fade class is removed it does display. I strongly suspect that the alert immediately fades upon page load but I can't figure out why.

The second issue is that the btn-close class doesn't display a lovely X but a square grey button. Why doesn't this load the bootstrap image? This is also the case when I remove the <button type="button" data-bs-dismiss="alert" aria-label="Close"> from the alert and have it display in the content in its own right.

CodePudding user response：

This may work for you:-

HTML Template

{% extends "bootstrap/base.html" %}

{% block content %}

<div  id="myAlert" role="alert">
    <strong>Holy guacamole!</strong> You should check in on some of those fields below.
    <button onclick="btnClicked()" type="button"  data-bs-dismiss="alert" aria-label="Close"> 
</button>
</div>

{% endblock %}

{% blockjs %} /*JS block if you have any, or simply put it in script tag*/
function btnClicked(){
    document.getElementById("myAlert").classList.add('fade');
}
{% endblock %}

By doing this, the modal will fade out according to the time interval given in bootstrap class when the button is clicked.

CodePudding user response：

The cause of the issues was the use of an older Flask-Bootstrap which only support Bootstrap 2 or 3. The components that I wanted to use were not available in these versions.

I found a couple of options:

Use a native Bootstrap setup:

Follow the Get Started in setting up Bootstrap on the site. For convivence copy the Bootstrap’s CSS and JS section into a file called base.html and add it to all the required html pages. For example...

base.html

<!doctype html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  </head>

  <body>

    <br/>
    <div >
        {% block content %}
        {% endblock %}
    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL jjXkk Q2h455rYXK/7HAuoJl 0I4" crossorigin="anonymous"></script>
  </body>
</html>

index.html

{% extends "base.html" %}

{% block content %}
{% endblock %}

Use Bootstrap-Flask

Bootstrap-Flask - Bootstrap 4 & 5 helper for your Flask projects.
Migrate from Flask-Bootstrap