diff --git a/assets/js/lib/tagsinput.js b/assets/js/lib/tagsinput.js
index 1c063255..71a9015c 100644
--- a/assets/js/lib/tagsinput.js
+++ b/assets/js/lib/tagsinput.js
@@ -8,7 +8,7 @@
 
   var defaultOptions = {
     tagClass: function(item) {
-      return 'badge badge-info';
+      return 'badge bg-info';
     },
     focusClass: 'focus',
     itemValue: function(item) {
diff --git a/templates/AdminPages/_attachments.html.twig b/templates/AdminPages/_attachments.html.twig
index 6e1984b2..95ab8a10 100644
--- a/templates/AdminPages/_attachments.html.twig
+++ b/templates/AdminPages/_attachments.html.twig
@@ -26,18 +26,18 @@
                         {% if not attach.external %}
                             <br><br>
                             <h6>
-                                <span class="badge badge-primary">
+                                <span class="badge bg-primary">
                                     <i class="fas fa-fw {{ ext_to_fa_icon(attach.extension) }}"></i> {{ attach.filename }}
                                 </span>
                                 <br>
-                                <span class="badge badge-secondary">
+                                <span class="badge bg-secondary">
                                     <i class="fas fa-hdd fa-fw"></i> {{ attachment_manager.humanFileSize(attach) }}
                                 </span>
                             </h6>
                         {% else %}
                             <br><br>
                             <h6>
-                        <span class="badge badge-primary">
+                        <span class="badge bg-primary">
                             <i class="fas fa-fw fa-globe"></i> {% trans %}attachment.external{% endtrans %}
                         </span>
                             </h6>
@@ -54,7 +54,7 @@
                     {% else %}
                         <br><br>
                         <h6>
-                    <span class="badge badge-warning">
+                    <span class="badge bg-warning">
                         <i class="fas fa-exclamation-circle fa-fw"></i> {% trans %}attachment.file_not_found{% endtrans %}
                     </span>
                         </h6>
@@ -62,7 +62,7 @@
 
                     {% if attach.secure %}
                         <h6>
-                            <span class="badge badge-success">
+                            <span class="badge bg-success">
                                 <i class="fas fa-fw fa-shield-alt"></i> {% trans %}attachment.secure{% endtrans %}
                             </span>
                         </h6>
diff --git a/templates/Parts/edit/_attachments.html.twig b/templates/Parts/edit/_attachments.html.twig
index e2987635..5c7588c2 100644
--- a/templates/Parts/edit/_attachments.html.twig
+++ b/templates/Parts/edit/_attachments.html.twig
@@ -23,18 +23,18 @@
                     {% if not attach.external %}
                         <br><br>
                         <h6>
-                        <span class="badge badge-primary">
+                        <span class="badge bg-primary">
                             <i class="fas fa-fw {{ ext_to_fa_icon(attach.extension) }}"></i> {{ attach.filename }}
                         </span>
                             <br>
-                            <span class="badge badge-secondary">
+                            <span class="badge bg-secondary">
                             <i class="fas fa-hdd fa-fw"></i> {{ attachment_manager.humanFileSize(attach) }}
                         </span>
                         </h6>
                     {% else %}
                         <br><br>
                         <h6>
-                        <span class="badge badge-primary">
+                        <span class="badge bg-primary">
                             <i class="fas fa-fw fa-globe"></i> {% trans %}attachment.external{% endtrans %}
                         </span>
                         </h6>
@@ -52,7 +52,7 @@
                 {% else %}
                     <br><br>
                     <h6>
-                    <span class="badge badge-warning">
+                    <span class="badge bg-warning">
                         <i class="fas fa-exclamation-circle fa-fw"></i> {% trans %}attachment.file_not_found{% endtrans %}
                     </span>
                     </h6>
@@ -60,7 +60,7 @@
 
                 {% if attach.secure %}
                     <h6>
-                           <span class="badge badge-success">
+                           <span class="badge bg-success">
                                 <i class="fas fa-fw fa-shield-alt"></i> {% trans %}attachment.secure{% endtrans %}
                            </span>
                     </h6>
diff --git a/templates/Parts/info/_attachments_info.html.twig b/templates/Parts/info/_attachments_info.html.twig
index 7a998375..5f1dcc6e 100644
--- a/templates/Parts/info/_attachments_info.html.twig
+++ b/templates/Parts/info/_attachments_info.html.twig
@@ -31,26 +31,26 @@
             </td>
             <td class="align-middle h6">
                 {% if attachment.external %}
-                    <span class="badge badge-primary">
+                    <span class="badge bg-primary">
                             <i class="fas fa-fw fa-globe"></i> {% trans %}attachment.external{% endtrans %}
                         </span>
                 {% elseif attachment_manager.fileExisting(attachment) %}
-                    <span class="badge badge-secondary">
+                    <span class="badge bg-secondary">
                         <i class="fas fa-hdd fa-fw"></i> {{ attachment_manager.humanFileSize(attachment) }}
                     </span>
                 {% else %}
-                    <span class="badge badge-warning">
+                    <span class="badge bg-warning">
                         <i class="fas fa-exclamation-circle fa-fw"></i> {% trans %}attachment.file_not_found{% endtrans %}
                     </span>
                 {% endif %}
                 {% if attachment.secure %}
-                    <br><span class="badge badge-success">
+                    <br><span class="badge bg-success">
                         <i class="fas fa-fw fa-shield-alt"></i> {% trans %}attachment.secure{% endtrans %}
                     </span>
                 {% endif %}
                 {% if attachment == part.masterPictureAttachment %}
                     <br>
-                    <span class="badge badge-primary">
+                    <span class="badge bg-primary">
                         <i class="fas fa-id-card"></i> {% trans %}attachment.preview{% endtrans %}
                     </span>
                 {% endif %}
diff --git a/templates/Parts/info/_part_lots.html.twig b/templates/Parts/info/_part_lots.html.twig
index c57c69f8..48a455ee 100644
--- a/templates/Parts/info/_part_lots.html.twig
+++ b/templates/Parts/info/_part_lots.html.twig
@@ -20,14 +20,14 @@
                 {% if lot.storageLocation %}
                     {{ helper.structural_entity_link(lot.storageLocation) }}
                 {% else %}
-                    <span class="badge badge-pill badge-warning">
+                    <span class="badge rounded-pill bg-warning">
                         <i class="fas fa-question-circle fa-fw"></i> {% trans %}part_lots.location_unknown{% endtrans %}
                     </span>
                 {% endif %}
             </td>
             <td>
                 {% if lot.instockUnknown %}
-                    <span class="badge badge-pill badge-warning">
+                    <span class="badge rounded-pill bg-warning">
                         <i class="fas fa-question-circle fa-fw"></i> {% trans %}part_lots.instock_unknown{% endtrans %}
                     </span>
                 {% else %}
@@ -37,20 +37,20 @@
             <td>
                 <h6>
                     {% if lot.expirationDate %}
-                        <span class="badge badge-info" title="{% trans %}part_lots.expiration_date{% endtrans %}">
+                        <span class="badge bg-info" title="{% trans %}part_lots.expiration_date{% endtrans %}">
                             <i class="fas fa-calendar-alt fa-fw"></i> {{ lot.expirationDate | format_date() }}
                         </span>
                     {% endif %}
                     {% if lot.expired %}
                         <br>
-                        <span class="badge badge-warning">
+                        <span class="badge bg-warning">
                             <i class="fas fa-exclamation-circle fa-fw"></i>
                             {% trans %}part_lots.is_expired{% endtrans %}
                         </span>
                     {% endif %}
                     {% if lot.needsRefill %}
                         <br>
-                        <span class="badge badge-warning">
+                        <span class="badge bg-warning">
                             <i class="fas fa-dolly fa-fw"></i>
                             {% trans %}part_lots.need_refill{% endtrans %}
                         </span>
diff --git a/templates/Parts/info/_sidebar.html.twig b/templates/Parts/info/_sidebar.html.twig
index f6272fa1..2f4d61bc 100644
--- a/templates/Parts/info/_sidebar.html.twig
+++ b/templates/Parts/info/_sidebar.html.twig
@@ -18,7 +18,7 @@
 {% if part.mass %}
     <div>
         <h6>
-            <span class="badge badge-secondary" title="{% trans %}part.mass.tooltip{% endtrans %}"><i class="fas fa-weight-hanging fa-fw"></i> {{ part.mass | siFormat("g") }}</span>
+            <span class="badge bg-secondary" title="{% trans %}part.mass.tooltip{% endtrans %}"><i class="fas fa-weight-hanging fa-fw"></i> {{ part.mass | siFormat("g") }}</span>
         </h6>
     </div>
 {% endif %}
@@ -27,7 +27,7 @@
 {% if part.needsReview %}
     <div class="mt-1">
         <h6>
-            <span class="badge badge-warning"><i class="fas fa-ambulance fa-fw"></i> {% trans %}part.needs_review.badge{% endtrans %}</span>
+            <span class="badge bg-warning"><i class="fas fa-ambulance fa-fw"></i> {% trans %}part.needs_review.badge{% endtrans %}</span>
         </h6>
     </div>
 {% endif %}
@@ -36,7 +36,7 @@
 {% if part.favorite %}
     <div class="mt-1">
         <h6>
-            <span class="badge badge-success"><i class="fas fa-award fa-fw"></i> {% trans %}part.favorite.badge{% endtrans %}</span>
+            <span class="badge bg-success"><i class="fas fa-award fa-fw"></i> {% trans %}part.favorite.badge{% endtrans %}</span>
         </h6>
     </div>
 {% endif %}
@@ -44,7 +44,7 @@
 {% if part.obsolete %}
     <div class="mt-1">
         <h6>
-            <span class="badge badge-danger"><i class="fas fa-ghost fa-fw"></i> {% trans %}part.obsolete.badge{% endtrans %}</span>
+            <span class="badge bg-danger"><i class="fas fa-ghost fa-fw"></i> {% trans %}part.obsolete.badge{% endtrans %}</span>
         </h6>
     </div>
 {% endif %}
diff --git a/templates/Parts/info/show_part_info.html.twig b/templates/Parts/info/show_part_info.html.twig
index 6d647a11..57131725 100644
--- a/templates/Parts/info/show_part_info.html.twig
+++ b/templates/Parts/info/show_part_info.html.twig
@@ -45,7 +45,7 @@
                        href="#part_lots" role="tab">
                         <i class="fas fa-box fa-fw"></i>
                         {% trans %}part.part_lots.label{% endtrans %}
-                        <span class="badge badge-secondary">{{ part.partLots | length }}</span>
+                        <span class="badge bg-secondary">{{ part.partLots | length }}</span>
                     </a>
                 </li>
                 {% if part.comment is not empty %}
@@ -62,7 +62,7 @@
                         <a class="nav-link" data-bs-toggle="tab" role="tab" href="#specifications">
                             <i class="fas fa-atlas fa-fw"></i>
                             {% trans %}part.info.specifications{% endtrans %}
-                            <span class="badge badge-secondary">{{ part.parameters | length }}</span>
+                            <span class="badge bg-secondary">{{ part.parameters | length }}</span>
                         </a>
                     </li>
                 {% endif %}
@@ -72,7 +72,7 @@
                            href="#attachments" role="tab">
                             <i class="fas fa-paperclip fa-fw"></i>
                             {% trans %}attachment.labelp{% endtrans %}
-                            <span class="badge badge-secondary">{{ part.attachments | length }}</span>
+                            <span class="badge bg-secondary">{{ part.attachments | length }}</span>
                         </a>
                     </li>
                 {% endif %}
@@ -81,7 +81,7 @@
                         <a class="nav-link" id="supplier-tab" data-bs-toggle="tab" href="#suppliers" role="tab">
                             <i class="fas fa-shopping-cart fa-fw"></i>
                             {% trans %}vendor.partinfo.shopping_infos{% endtrans %}
-                            <span class="badge badge-secondary">{{ part.orderdetails | length }}</span>
+                            <span class="badge bg-secondary">{{ part.orderdetails | length }}</span>
                         </a>
                     </li>
                 {% endif %}
diff --git a/templates/Parts/lists/_parts_list.html.twig b/templates/Parts/lists/_parts_list.html.twig
index 7bafa405..e938c0a8 100644
--- a/templates/Parts/lists/_parts_list.html.twig
+++ b/templates/Parts/lists/_parts_list.html.twig
@@ -7,7 +7,7 @@
 
     <div class="d-none mb-2" id="select_panel">
         {# <span id="select_count"></span> #}
-        <span class="badge badge-secondary">{% trans with {'%count%': '<span id="select_count"></span>'} %}part_list.action.part_count{% endtrans %}</span>
+        <span class="badge bg-secondary">{% trans with {'%count%': '<span id="select_count"></span>'} %}part_list.action.part_count{% endtrans %}</span>
 
         <select class="selectpicker" name="action" id="select_action" data-controller="elements--selectpicker"
                 title="{% trans %}part_list.action.action.title{% endtrans %}" onchange="updateTargetSelect()" required>
diff --git a/templates/helper.twig b/templates/helper.twig
index 150c3001..8a6215e8 100644
--- a/templates/helper.twig
+++ b/templates/helper.twig
@@ -25,7 +25,7 @@
     {% endif %}
 {% endmacro %}
 
-{% macro string_to_tags(string, class="badge badge-info") %}
+{% macro string_to_tags(string, class="badge bg-info") %}
     {% for tag in string|split(',') %}
         <a href="{{ url('part_list_tags', {'tag': tag | trim}) }}" class="{{ class }}" >{{ tag | trim }}</a>
     {% endfor %}
@@ -33,16 +33,16 @@
 
 {% macro m_status_to_badge(status, class="badge") %}
     {% if status is not empty %}
-        {% set color = " badge-secondary" %}
+        {% set color = " bg-secondary" %}
 
         {% if status == "active" %}
-            {% set color = " badge-success" %}
+            {% set color = " bg-success" %}
         {% elseif status == "nrfnd" %}
-            {% set color = " badge-warning" %}
+            {% set color = " bg-warning" %}
         {% elseif status == "eol" %}
-            {% set color = " badge-warning" %}
+            {% set color = " bg-warning" %}
         {% elseif status == "discontinued" %}
-            {% set color = " badge-danger" %}
+            {% set color = " bg-danger" %}
         {% endif %}
 
         <span class="{{ class ~ color}}" title="{{ ("m_status." ~ status ~ ".help") | trans }}">