Crispy forms bootstrap5

config/settings.py

@@ -48,6 +48,7 @@ DJANGO_APPS = [
 # Third party apps
 THIRD_PARTY_APPS = [
     "crispy_forms",
+    "crispy_bootstrap5",
     "rest_framework",
     "django_filters",
 ]
@@ -196,7 +197,8 @@ EMAIL_HOST_USER = config("USER_EMAIL")
 EMAIL_HOST_PASSWORD = config("USER_PASSWORD")
 
 # crispy config
-CRISPY_TEMPLATE_PACK = "bootstrap4"
+CRISPY_ALLOWED_TEMPLATE_PACKS = "bootstrap5"
+CRISPY_TEMPLATE_PACK = "bootstrap5"
 
 LOGIN_REDIRECT_URL = "/"
 LOGOUT_REDIRECT_URL = "/"

templates/core/post_add.html

@@ -12,29 +12,17 @@
     </ol>
 </nav>
 
-{% if messages %}
-    {% for message in messages %}
-        {% if message.tags == 'error' %}
-            <div class="alert alert-danger">
-                <i class="fas fa-exclamation-circle"></i>{{ message }}
-            </div>
-        {% else %}
-            <div class="alert alert-success">
-                <i class="fas fa-check-circle"></i>{{ message }}
-            </div>
-        {% endif %}
-    {% endfor %}
-{% endif %}
+{% include 'snippets/messages.html' %}
 
 <div class="row">
     <div class="col-md-6 mx-auto">
-        <div class="card pb-3">
-            <p class="form-title">Item Post & Update Form</p>
-            <div class="container"><br>
+        <div class="card">
+            <p class="form-title">Post Form</p>
+            <div class="card-body">
                 <form action="" method="POST">{% csrf_token %}
                     {{ form|crispy }}
-                    <input class="btn btn-primary" type="submit" value="POST">
-                    <a class="btn btn-danger" href="{% url 'home' %}" style="float: right;">Cancel</a>
+                    <input class="btn btn-primary" type="submit" value="Save">
+                    <a class="btn" href="{% url 'home' %}" style="float: right;">Cancel</a>
                 </form>
             </div>
         </div>

templates/snippets/messages.html

@@ -0,0 +1,14 @@
+
+{% if messages %}
+    {% for message in messages %}
+        {% if message.tags == 'error' %}
+            <div class="alert alert-danger">
+                <i class="fas fa-exclamation-circle"></i>{{ message }}
+            </div>
+        {% else %}
+            <div class="alert alert-success">
+                <i class="fas fa-check-circle"></i>{{ message }}
+            </div>
+        {% endif %}
+    {% endfor %}
+{% endif %}