Use the new notification api.

src/tjts5901/templates/base.html

@@ -88,17 +88,39 @@
         {% endblock %}
       </header>
       <main class="content">
-        {% for message in get_flashed_messages() %}
-          <div class="container">
-            <div class="flash alert alert-primary">{{ message }}</div>
-          </div>
-        {% endfor %}
-
         {% block content %}
           <!-- MAIN CONTENT BLOCK MISSING -->
         {% endblock %}
       </main>
 
+      {# Flash messages #}
+      <div class="position-fixed top-0 right-0 p-3 m-5">
+        <div class="container toast-container" id="messages">
+          {% for message in get_notifications() %}
+            {% if message['type'] == 'success' %}
+              {# Show success messages for 10 seconds #}
+              <div class="toast show bg-success text-white" role="alert" aria-live="assertive" aria-atomic="true" data-delay="10000">
+            {% elif message['type'] == 'error' %}
+              <div class="toast show bg-danger text-white" role="alert" aria-live="assertive" aria-atomic="true">
+            {% else %}
+              <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
+            {% endif %}
+
+                <div class="toast-header">
+                  <strong class="mr-auto">{{ message['title'] }}</strong>
+                  <small><time datetime="{{message['created_at'].isoformat()}}">{{ message['created_at']|timeformat }}</time></small>
+                  <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="{{_("Close")}}">
+                    <span aria-hidden="true">&times;</span>
+                  </button>
+                </div>
+                <div class="toast-body">
+                  {{ message['message'] }}
+                </div>
+              </div>
+          {% endfor %}
+        </div>
+      </div>  
+
     <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
     <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>