pythontwitter-bootstrapflaskfrontendflash-message

Flash messages not picking up bootstrap styling

First off thanks for the help.

I created a small flask web app to track items "to-do". As part of the app, I have added a number of flash messages to assist with the login, registrations, etc. I seem to have the information feeding to the browswer correctly, but the styling from the bootstrap classes are not show just plain text messages.

Here is the base html of the flask app.


<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='ToDoList.css')}}" />
    
    </head>
    <body>
        <header class="site-header">
            <nav class="navbar navbar-expand-sm navbar-dark bg-steel fixed-top">
              <div class="container">
                <a class="navbar-brand mr-4" href="/">Just Do It Already</a>
                  <div class="navbar-nav ">
                    <a class="nav-item nav-link" href="{{ url_for('profile') }}">Profile</a>
                     {% if current_user.is_authenticated %}
                           <a class="nav-item nav-link" href="{{ url_for('logout') }}">Logout</a>
                           <a class="nav-item nav-link" href="{{ url_for('new_post') }}">New Task</a>
                     {% else %}
                            <a class="nav-item nav-link" href="{{ url_for('log_in') }}">Login</a> 
                            <a class="nav-item nav-link" href="{{ url_for('register') }}">Register</a>          
                    {% endif %}
                  </div>
                  </div>
              </div>
            </div>
            </nav>
          </header>
          <main role="main" class="container">
            <div class='row'>
              <div class="col-md-8 mx-auto">
                {% with messages = get_flashed_messages(with_categories=true) %}
                  {% if messages %}
                    {% for category, message in messages %}
                      <div class="alert alert-{{ category }}">
                        {{ message }}
                      </div>
                {% endfor %}
            {% endif %}
        {% endwith %}

        {% block body %}
        {% endblock %}
      </div>
      </div>
      </main>
      
    
    
        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    </body>
</html>

My flask messages all contain categories that show in the chrome dev tools inspection, just the message is not styled.

Any idea what i missed here? output in chrome

Solution

  • There is no alert-error class in bootstrap, you need to use alert-danger or alert-warning. you can see all the options here

    <div class="alert alert-primary" role="alert">
  A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
  A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
  A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert—check it out!
</div>

    So your category should be danger or warning, for example:

    flash('Login failed etc etc', 'danger')