Started to upgrade from bootstrap 4 to 5.

templates/AdminPages/EntityAdminBase.html.twig

@@ -54,7 +54,7 @@
                             {% if timeTravel is defined and timeTravel is not null %}
                                 ({{ timeTravel|format_datetime('short') }})
                             {% endif %}
-                            <span class="float-right">{% block quick_links %}{% endblock %}</span>
+                            <span class="float-end">{% block quick_links %}{% endblock %}</span>
                         {% else %}
                             <strong>{% block new_title %}{% trans %}new.caption{% endtrans %}{% endblock %}</strong>
                         {% endif %}
@@ -139,7 +139,7 @@
                                 <div class="col-sm-9 offset-sm-3">
                                     <div class="btn-group">
                                         {{ form_widget(form.save) }}
-                                        <button type="button" class="btn {% if entity.id is not null %}btn-primary{% else %}btn-success{% endif %} dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                        <button type="button" class="btn {% if entity.id is not null %}btn-primary{% else %}btn-success{% endif %} dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                             <span class="sr-only">Toggle Dropdown</span>
                                         </button>
                                         <div class="dropdown-menu p-2">

templates/AdminPages/_attachments.html.twig

@@ -15,7 +15,7 @@
                 <div class="col-9">
                     {{ form_widget(attachment) }}
                 </div>
-                <div class="pl-0 col-3">
+                <div class="ps-0 col-3">
                     {{ delete_btn }}
 
                     {% set attach = attachment.vars.value %}

templates/AdminPages/_delete_form.html.twig

@@ -5,11 +5,11 @@
     <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ entity.id) }}">
     <div class="form-group">
         <div class=""></div>
-        <div class="col-sm offset-sm-3 pl-2">
+        <div class="col-sm offset-sm-3 ps-2">
             {% set delete_disabled = (not is_granted("delete", entity)) or (entity.group is defined and entity.id == 1) %}
             <div class="btn-group">
                 <button class="btn btn-danger" {% if delete_disabled %}disabled{% endif %}>{% trans %}entity.delete{% endtrans %}</button>
-                <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                     <span class="sr-only">Toggle Dropdown</span>
                 </button>
                 <div class="dropdown-menu p-2">
@@ -19,7 +19,7 @@
                 </div>
             </div>
             {% if entity.parent is defined  %}
-                <div class="ml-2 custom-control custom-checkbox custom-control-inline">
+                <div class="ms-2 custom-control custom-checkbox custom-control-inline">
                     <input type="checkbox" class="custom-control-input" id="recursive" name="delete_recursive">
                     <label class="custom-control-label" for="recursive">{% trans %}entity.delete.recursive{% endtrans %}</label>
                 </div>

templates/LabelSystem/dialog.html.twig

@@ -71,7 +71,7 @@
                     <div class="dropdown">
                         <button class="btn btn-info dropdown-toggle" type="button" id="loadProfilesButton"
                                 {% if not is_granted("@labels.create_labels") %}disabled{% endif %}
-                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                             {% trans %}label_generator.load_profile{% endtrans %}
                         </button>
                         <div class="dropdown-menu" aria-labelledby="loadProfilesButton">

templates/LabelSystem/dropdown_macro.html.twig

@@ -1,7 +1,7 @@
 {% macro profile_dropdown(type, id = null, include_text = true, btn_type = 'btn-secondary') %}
     <div class="dropdown">
         <button type="button" class="btn {{ btn_type }} dropdown-toggle" title="{% trans %}label_generator.label_btn{% endtrans %}"
-                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" {% if not is_granted("@labels.create_labels") %}disabled{% endif %}>
+                data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" {% if not is_granted("@labels.create_labels") %}disabled{% endif %}>
             <i class="fas fa-fw fa-qrcode"></i> {% if include_text %}{% trans %}label_generator.label_btn{% endtrans %}{% endif %}
         </button>
         <div class="dropdown-menu">

templates/Parts/edit/edit_part_info.html.twig

@@ -8,7 +8,7 @@
     <i class="fas fa-edit fa-fw" aria-hidden="true"></i>
     {% trans with {'%name%': part.name} %}part.edit.card_title{% endtrans %}
     <b><a href="{{ part|entityURL('info') }}" class="text-white">{{ part.name }}</a></b>
-    <div class="float-right">
+    <div class="float-end">
         {% trans %}id.label{% endtrans %}: {{ part.id }}
     </div>
 {% endblock %}
@@ -99,7 +99,7 @@
         <div class="col-sm-9 offset-sm-3">
             <div class="btn-group">
                 {{ form_widget(form.save) }}
-                <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                     <span class="sr-only">Toggle Dropdown</span>
                 </button>
                 <div class="dropdown-menu">

templates/Parts/info/_attachments_info.html.twig

@@ -69,7 +69,7 @@
                     </a>
 
                     <div class="btn-group" role="group">
-                        <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-boundary="window">
+                        <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-boundary="window">
                         </button>
                         <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                             <span class="text-muted dropdown-item-text" ><i class="fas fa-lightbulb fa-fw"></i> <b>ID:</b> {{ attachment.iD }}</span>

templates/Parts/info/_order_infos.html.twig

@@ -64,7 +64,7 @@
                 </td>
                 <td> {# Action for order information #}
                     <div class="btn-group">
-                        <button type="button" class="btn btn-info btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-boundary="window">
+                        <button type="button" class="btn btn-info btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-boundary="window">
                             Action
                         </button>
                         <div class="dropdown-menu">

templates/Parts/info/_tools.html.twig

@@ -15,7 +15,7 @@
             <i class="fas fa-clone"></i>
             {% trans %}part.clone.btn{% endtrans %}
         </a>
-        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
+        <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
             <span class="caret"></span>
         </button>
         <div class="dropdown-menu" role="menu">
@@ -38,7 +38,7 @@
                 <i class="fa fa-trash fa-fw"></i>
                 {% trans %}part.delete{% endtrans %}
             </button>
-            <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                 <span class="sr-only">Toggle Dropdown</span>
             </button>
             <div class="dropdown-menu p-2">

templates/Parts/info/show_part_info.html.twig

@@ -20,7 +20,7 @@
     {% if timeTravel != null %}
         <i>({{ timeTravel | format_datetime('short') }})</i>
     {% endif %}
-    <div class="float-right">
+    <div class="float-end">
         {% trans %}id.label{% endtrans %}: {{ part.id }}
     </div>
 {% endblock %}

templates/Parts/lists/_action_bar.html.twig

@@ -1,6 +1,6 @@
 <div class="row mb-3">
     <div class="col">
-        <a href="{{ url('part_new', url_options) }}" class="btn btn-success float-left {% if not is_granted("@parts.create") or (entity is defined and entity.notSelectable) %}disabled{% endif %}"><i class="fas fa-plus-square fa-fw"></i>
+        <a href="{{ url('part_new', url_options) }}" class="btn btn-success float-start {% if not is_granted("@parts.create") or (entity is defined and entity.notSelectable) %}disabled{% endif %}"><i class="fas fa-plus-square fa-fw"></i>
             {% trans%}part.create.btn{% endtrans %}</a>
     </div>
 </div>

templates/Parts/lists/_info_card.html.twig

@@ -7,7 +7,7 @@
     <div class="card-header">
         <a class="card-link" data-toggle="collapse" href="#entityInfo">
             {% if entity.masterPictureAttachment is not null and attachment_manager.isFileExisting(entity.masterPictureAttachment) %}
-                <img class="hoverpic ml-0 mr-0 d-inline" data-thumbnail="{{ entity.masterPictureAttachment | entityURL('file_view') }}" src="{{ attachment_thumbnail(entity.masterPictureAttachment, 'thumbnail_sm') }}">
+                <img class="hoverpic ms-0 me-0 d-inline" data-thumbnail="{{ entity.masterPictureAttachment | entityURL('file_view') }}" src="{{ attachment_thumbnail(entity.masterPictureAttachment, 'thumbnail_sm') }}">
             {% endif %}
             {{ header_label | trans }}: <b>{{ entity.name }}</b>
         </a>

templates/Statistics/statistics.html.twig

@@ -8,7 +8,7 @@
     {% trans %}statistics.title{% endtrans %}{% endblock %}
 
 {% block card_body %}
-    <ul class="nav nav-tabs ml-3 mr-3 mt-2" id="statistics_tabs" role="tablist">
+    <ul class="nav nav-tabs ms-3 me-3 mt-2" id="statistics_tabs" role="tablist">
         <li class="nav-item">
             <a class="nav-link active" id="parts-tab" data-toggle="tab" href="#parts" role="tab" aria-controls="home" aria-selected="true">
                 {% trans %}statistics.parts{% endtrans %}

templates/Tools/ReelCalculator/main.html.twig

@@ -19,7 +19,7 @@
                 <label for="reel_dia_inner" class="col-sm-4 col-form-label">{% trans %}tools.reel_calc.inner_dia{% endtrans %} <var>d<sub>0</sub></var>:</label>
                 <div class="col-sm-8 input-group">
                     <div class="input-group-prepend">
-                        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
+                        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
                         <div class="dropdown-menu">
                             <h6 class="dropdown-header">{% trans %}tools.reel_calc.load_preset{% endtrans %}</h6>
                             <button class="dropdown-item" data-target="reel_dia_inner" data-value="60" onclick="loadPreset(this);">60 mm Reel</button>
@@ -45,7 +45,7 @@
                 <label for="reel_tape_thick" class="col-sm-4 col-form-label">{% trans %}tools.reel_calc.tape_thick{% endtrans %} <var>a</var>:</label>
                 <div class="col-sm-8 input-group">
                     <div class="input-group-prepend">
-                        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
+                        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
                         <div class="dropdown-menu">
                             <h6 class="dropdown-header">{% trans %}tools.reel_calc.load_preset{% endtrans %}</h6>
                             <button class="dropdown-item" data-target="reel_tape_thick" data-value="0.8" onclick="loadPreset(this);">8 mm Paper Tape 0603 (0.8 mm)</button>
@@ -67,7 +67,7 @@
                 <label for="reel_part_distance" class="col-sm-4 col-form-label">{% trans %}tools.reel_calc.part_distance{% endtrans %} <var>b</var>:</label>
                 <div class="col-sm-8 input-group">
                     <div class="input-group-prepend">
-                        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
+                        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
                         <div class="dropdown-menu">
                             <h6 class="dropdown-header">{% trans %}tools.reel_calc.load_preset{% endtrans %}</h6>
                             <button class="dropdown-item" data-target="reel_part_distance" data-value="4" onclick="loadPreset(this);">8 mm Paper Tape 0603/0805/1206 (4 mm)</button>

templates/Users/backup_codes.html.twig

@@ -20,7 +20,7 @@
                     <div class="card-body">
                         <ul class="row list-unstyled" id="backup_codes_list">
                         {% for code in user.backupCodes %}
-                            <h4 class="col-6"><li><i class="far fa-square fa-fw"></i><span class="text-monospace text-dark ml-1">{{ code }}</span></li></h4>
+                            <h4 class="col-6"><li><i class="far fa-square fa-fw"></i><span class="text-monospace text-dark ms-1">{{ code }}</span></li></h4>
                         {% endfor %}
                         </ul>
                     </div>

templates/_navbar.html.twig

@@ -1,66 +1,83 @@
 <nav class="navbar navbar-expand-md navbar-light bg-light border-bottom shadow-sm fixed-top py-0" id="navbar">
+    <div class="container-fluid">
+        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#sidebar-container">
+            <span class="sr-only">{% trans %}sidebar.toggle{% endtrans %}</span>
+            <!-- <span class="navbar-toggler-icon"></span> -->
+            <i class="fas fa-folder-open fa-lg fa-fw"></i>
+        </button>
 
-    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#sidebar-container">
-        <span class="sr-only">{% trans %}sidebar.toggle{% endtrans %}</span>
-        <!-- <span class="navbar-toggler-icon"></span> -->
-        <i class="fas fa-folder-open fa-lg fa-fw"></i>
-    </button>
+        <a class="navbar-brand" href="{{ path('homepage') }}"><i class="fa fa-microchip"
+                                                                 aria-hidden="true"></i> {{ partdb_title }}</a>
 
-    <a class="navbar-brand" href="{{ path('homepage') }}"><i class="fa fa-microchip" aria-hidden="true"></i> {{ partdb_title }}</a>
-
-    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
-        <!-- <span class="navbar-toggler-icon"></span> -->
-        <i class="fas fa-bars  fa-lg"></i>
-    </button>
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent"
+                aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
+            <!-- <span class="navbar-toggler-icon"></span> -->
+            <i class="fas fa-bars  fa-lg"></i>
+        </button>
 
 
+        <div class="collapse navbar-collapse" id="navbarContent">
+            <ul class="navbar-nav me-auto">
+                {% if is_granted("@tools.label_scanner") %}
+                    <li class="nav-item">
+                        <a class="nav-link"
+                           href="{{ url("scan_dialog") }}">{% trans %}navbar.scanner.link{% endtrans %}</a>
+                    </li>
+                {% endif %}
+            </ul>
 
-    <div class="collapse navbar-collapse" id="navbarContent">
-        <ul class="navbar-nav mr-auto">
-            {% if is_granted("@tools.label_scanner") %}
-                <li class="nav-item">
-                    <a class="nav-link" href="{{ url("scan_dialog") }}">{% trans %}navbar.scanner.link{% endtrans %}</a>
-                </li>
-            {% endif %}
-        </ul>
 
-        <div class="form-inline my-2 my-lg-0 ml-auto" id="searchbar">
-            <!-- Searchbar -->
             {% include "_navbar_search.html.twig" %}
-        </div>
 
-        <ul class="navbar-nav ml-3" id="login-content">
-            <li class="nav-item dropdown">
-                <a href="#" class="dropdown-toggle link-anchor nav-link" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
-                    {% if app.user %}<i class="fa fa-user" aria-hidden="true"></i>{% else %}<i class="far fa-user" aria-hidden="true"></i>{% endif %} <span class="caret"></span></a>
-                <ul class="dropdown-menu dropdown-menu-right" id="login-menu">
-                    {% if app.user %}
-                        <a class="dropdown-item disabled" href="#" >{% trans %}user.loggedin.label{% endtrans %} <b>{{ app.user.firstName }} {{app.user.lastName}}</b> (@{{app.user.name}})</a>
-                        <a class="dropdown-item" href="{{ path("user_settings") }}"><i class="fa fa-cogs fa-fw" aria-hidden="true"></i> {% trans %}user.settings.label{% endtrans %}</a>
-                        <a class="dropdown-item" href="{{ path("user_info_self") }}"><i class="fa fa-info-circle fa-fw" aria-hidden="true"></i> {% trans %}user.info.label{% endtrans %}</a>
-                        <li role="separator" class="dropdown-divider"></li>
-                        <a class="dropdown-item"  href="{{ path('logout') }}" data-turbo="false"><i class="fa fa-sign-out-alt fa-fw" aria-hidden="true"></i> {% trans %}user.logout{% endtrans %}</a>
-                    {% else %}
-                        <a class="dropdown-item" href="{{ path('login', {'_target_path': app.request.pathinfo | loginPath}) }}" id="login-link"><i class="fa fa-sign-in-alt fa-fw" aria-hidden="true"></i> {% trans %}user.login{% endtrans %}</a>
-                    {% endif %}
-                    <li role="separator" class="dropdown-divider" id="toggleDarkmodeSeparator" hidden></li>
-                    <div class="px-4 px-3" id="toggleDarkmodeContainer" hidden>
-                        <div class="custom-control custom-switch">
-                            <input type="checkbox" class="custom-control-input" id="toggleDarkmode">
-                            <label class="custom-control-label" for="toggleDarkmode">{% trans %}ui.toggle_darkmode{% endtrans %}</label>
+
+            <ul class="navbar-nav ms-3" id="login-content">
+                <li class="nav-item dropdown">
+                    <a href="#" class="dropdown-toggle link-anchor nav-link" data-bs-toggle="dropdown" role="button"
+                       aria-haspopup="true" aria-expanded="false" id="navbar-user-dropdown-btn" data-bs-reference="window">
+                        {% if app.user %}<i class="fa fa-user" aria-hidden="true"></i>{% else %}<i class="far fa-user"
+                                                                                                   aria-hidden="true"></i>{% endif %}
+                        <span class="caret"></span></a>
+                    <ul class="dropdown-menu dropdown-menu-end" id="login-menu" aria-labelledby="navbar-user-dropdown-btn">
+                        {% if app.user %}
+                            <a class="dropdown-item disabled" href="#">{% trans %}user.loggedin.label{% endtrans %}
+                                <b>{{ app.user.firstName }} {{ app.user.lastName }}</b> (@{{ app.user.name }})</a>
+                            <a class="dropdown-item" href="{{ path("user_settings") }}"><i class="fa fa-cogs fa-fw"
+                                                                                           aria-hidden="true"></i> {% trans %}user.settings.label{% endtrans %}
+                            </a>
+                            <a class="dropdown-item" href="{{ path("user_info_self") }}"><i
+                                        class="fa fa-info-circle fa-fw"
+                                        aria-hidden="true"></i> {% trans %}user.info.label{% endtrans %}</a>
+                            <li role="separator" class="dropdown-divider"></li>
+                            <a class="dropdown-item" href="{{ path('logout') }}" data-turbo="false"><i
+                                        class="fa fa-sign-out-alt fa-fw"
+                                        aria-hidden="true"></i> {% trans %}user.logout{% endtrans %}</a>
+                        {% else %}
+                            <a class="dropdown-item"
+                               href="{{ path('login', {'_target_path': app.request.pathinfo | loginPath}) }}"
+                               id="login-link"><i class="fa fa-sign-in-alt fa-fw"
+                                                  aria-hidden="true"></i> {% trans %}user.login{% endtrans %}</a>
+                        {% endif %}
+                        <li role="separator" class="dropdown-divider" id="toggleDarkmodeSeparator" hidden></li>
+                        <div class="px-4 px-3" id="toggleDarkmodeContainer" hidden>
+                            <div class="custom-control custom-switch">
+                                <input type="checkbox" class="custom-control-input" id="toggleDarkmode">
+                                <label class="custom-control-label"
+                                       for="toggleDarkmode">{% trans %}ui.toggle_darkmode{% endtrans %}</label>
+                            </div>
                         </div>
-                    </div>
-                    <li role="separator" class="dropdown-divider"></li>
-                    <h6 class="dropdown-header">{% trans %}user.language_select{% endtrans %}</h6>
-                    <div id="locale-select-menu">
-                    {% for locale in locale_menu %}
-                        <a class="dropdown-item" data-turbo="false" href="{{ path(app.request.attributes.get('_route'),
-                            app.request.attributes.get('_route_params')|merge({'_locale': locale})) }}">
-                            {{ locale|language_name }} ({{ locale|upper }})</a>
-                    {% endfor %}
-                    </div>
-                </ul>
-            </li>
-        </ul>
+                        <li role="separator" class="dropdown-divider"></li>
+                        <h6 class="dropdown-header">{% trans %}user.language_select{% endtrans %}</h6>
+                        <div id="locale-select-menu">
+                            {% for locale in locale_menu %}
+                                <a class="dropdown-item" data-turbo="false"
+                                   href="{{ path(app.request.attributes.get('_route'),
+                                       app.request.attributes.get('_route_params')|merge({'_locale': locale})) }}">
+                                    {{ locale|language_name }} ({{ locale|upper }})</a>
+                            {% endfor %}
+                        </div>
+                    </ul>
+                </li>
+            </ul>
+        </div>
     </div>
 </nav>

templates/_navbar_search.html.twig

@@ -1,10 +1,10 @@
-<form action="{{ url('parts_search') }}" method="get">
-    <div class="dropdown d-inline">
-        <button class="btn btn-light dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+<form action="{{ url('parts_search') }}" class="d-flex my-lg-0 ms-auto" method="get">
+    <div class="dropdown">
+        <button class="btn btn-light dropdown-toggle my-2" type="button" id="navbar-search-options" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-bs-auto-close="inside">
             {% trans %}search.options.label{% endtrans %}
             <span class="caret"></span>
         </button>
-        <div class="dropdown-menu" aria-labelledby="SearchOptions">
+        <div class="dropdown-menu" aria-labelledby="navbar-search-options">
             <div class="px-1 py-2">
                 <div class="custom-control custom-checkbox">
                     <input type="checkbox" class="custom-control-input" id="search_name"  name="name" value="1" checked>
@@ -64,6 +64,6 @@
         </div>
     </div>
 
-    <input type="search" class="form-control mr-sm-2" placeholder="{% trans %}search.placeholder{% endtrans %}" name="keyword">
+    <input type="search" class="form-control me-sm-2 my-2" placeholder="{% trans %}search.placeholder{% endtrans %}" name="keyword">
     <button type="submit" class="form btn btn-outline-secondary my-2">{% trans %}search.submit{% endtrans %}</button>
 </form>

templates/_sidebar.html.twig

@@ -19,7 +19,7 @@
         <div class="input-group input-group-sm mb-2 mt-1">
             <div class="input-group-prepend">
                 <button class="btn btn-light dropdown-toggle" type="button"
-                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
+                        data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                 ><span class="sidebar-title" id="tree-categories-title">{% trans %}category.labelp{% endtrans %}</span></button>
                 <ul class="dropdown-menu" aria-labelledby="dropdownCat">
                     {{ _self.sidebar_dropdown('tree-categories') }}
@@ -34,7 +34,7 @@
         <div class="input-group input-group-sm mb-2 mt-2">
             <div class="input-group-prepend">
                 <button class="btn btn-light dropdown-toggle" type="button"
-                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
+                        data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                 ><span class="sidebar-title" id="tree-devices-title">{% trans %}device.labelp{% endtrans %}</span></button>
 
                 <ul class="dropdown-menu" aria-labelledby="dropdownDev">
@@ -51,7 +51,7 @@
         <div class="input-group input-group-sm mb-2 mt-2">
             <div class="input-group-prepend">
                 <button class="btn btn-light dropdown-toggle" type="button"
-                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
+                        data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                 ><span class="sidebar-title" id="tree-tools-title">{% trans %}tools.label{% endtrans %}</span></button>
 
                 <ul class="dropdown-menu" aria-labelledby="dropdownTools">

templates/_toast.html.twig

@@ -9,11 +9,11 @@
 
 <div class="toast shadow" role="alert" aria-live="assertive" aria-atomic="true" data-delay="5000" {{ stimulus_controller('common/toast') }}>
     <div class="toast-header {{ flash_bg }}">
-        {# <img src="..." class="rounded mr-2" alt="...">#}
-        <i class="fas fa-fw {{ flash_symbol }} mr-2"></i>
-        <strong class="mr-auto">{{ flash_title|trans }}</strong>
+        {# <img src="..." class="rounded me-2" alt="...">#}
+        <i class="fas fa-fw {{ flash_symbol }} me-2"></i>
+        <strong class="me-auto">{{ flash_title|trans }}</strong>
         <small class="{% if "text-white" in flash_bg %}text-white{% else %}text-muted{% endif %}">{{ "now" | format_datetime("short", "short") }}</small>
-        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
+        <button type="button" class="ms-2 mb-1 close" data-dismiss="toast" aria-label="Close">
             <span aria-hidden="true">&times;</span>
         </button>
     </div>

templates/base.html.twig

@@ -75,11 +75,11 @@
                     </nav>
                 </div>
 
-                <div class="col-md-9 col-lg-10 offset-md-3 offset-lg-2 pl-0" id="main">
+                <div class="col-md-9 col-lg-10 offset-md-3 offset-lg-2 ps-0" id="main">
                     <button class="btn btn-outline-dark btn-sm p-0" type="button" id="sidebar-toggle-button" title="{% trans %}sidebar.big.toggle{% endtrans %}">
                         <i class="fas fa-angle-left"></i>
                     </button>
-                    <div class="container-fluid mr-0 pr-0" id="content-container">
+                    <div class="container-fluid me-0 pe-0" id="content-container">
                         <turbo-frame id="content" data-turbo-action="advance">
                             {# Here will be the real content be injected#}
 

templates/homepage.html.twig

@@ -1,7 +1,7 @@
 {% extends "base.html.twig" %}
 
 {% block content %}
-    <div class="jumbotron">
+    <div class="bg-light rounded p-3">
         <h1 class="display-3">{{ partdb_title }}</h1>
         <h4>
             {% trans %}version.caption{% endtrans %}: {{ shivas_app_version }}

templates/security/2fa_base_form.html.twig

@@ -34,7 +34,7 @@
         {% if displayTrustedOption %}
             <div class="form-group row mt-3">
                 <div class="offset-3">
-                    <div class="custom-checkbox custom-control ml-2">
+                    <div class="custom-checkbox custom-control ms-2">
                         <input id="_trusted" class="custom-control-input" type="checkbox" name="{{ trustedParameterName }}" />
                         <label class="custom-control-label" for="_trusted">{% trans %}tfa.code.trusted_pc{% endtrans %}</label>
                     </div>
@@ -50,7 +50,7 @@
         <div class="form-group-row">
             <div class="offset-3">
                 <button type="submit" class="btn btn-primary" value="{{ "login"|trans({}, 'SchebTwoFactorBundle') }}">{% trans %}login.btn{% endtrans %}</button>
-                <a class="ml-2" href="{{ logoutPath }}">{% trans %}user.logout{% endtrans %}</a>
+                <a class="ms-2" href="{{ logoutPath }}">{% trans %}user.logout{% endtrans %}</a>
             </div>
         </div>
         {% endblock %}

templates/security/U2F/u2f_login.html.twig

@@ -10,7 +10,7 @@
     <div id="u2fpressbutton" style="display: none;" class="h4 text-center">{{ 'r_u2f_two_factor.pressbutton'|trans }}</div>
     <div id="u2fError"></div>
     <p class="widget"><input id="_auth_code" type="hidden" autocomplete="off" name="_auth_code" /></p>
-    <a class="ml-2" href="{{ logoutPath }}">{% trans %}user.logout{% endtrans %}</a>
+    <a class="ms-2" href="{{ logoutPath }}">{% trans %}user.logout{% endtrans %}</a>
 {% endblock %}
 
 {% block submit_btn %}