From e663f3db72243b693ed732579f78161ec7b355dc Mon Sep 17 00:00:00 2001
From: FreddleSpl0it <patschul@posteo.de>
Date: Wed, 13 Apr 2022 14:07:07 +0200
Subject: [PATCH] [BS5] change form-group

---
 .../templates/admin/tab-config-admins.twig    |  26 +--
 .../templates/admin/tab-config-customize.twig |  12 +-
 data/web/templates/admin/tab-config-dkim.twig |  18 +-
 data/web/templates/admin/tab-config-f2b.twig  |  14 +-
 .../templates/admin/tab-config-fwdhosts.twig  |   4 +-
 .../admin/tab-config-password-policy.twig     |   6 +-
 .../admin/tab-config-quarantine.twig          |  20 +--
 .../web/templates/admin/tab-config-quota.twig |   6 +-
 .../templates/admin/tab-config-rsettings.twig |   6 +-
 .../templates/admin/tab-config-rspamd.twig    |   8 +-
 .../admin/tab-globalfilter-regex.twig         |   6 +-
 data/web/templates/admin/tab-routing.twig     |  18 +-
 data/web/templates/admin/tab-sys-mails.twig   |  14 +-
 data/web/templates/edit/admin.twig            |  12 +-
 data/web/templates/edit/alias.twig            |  12 +-
 data/web/templates/edit/aliasdomain.twig      |  12 +-
 data/web/templates/edit/app-passwd.twig       |  12 +-
 data/web/templates/edit/bcc.twig              |   8 +-
 data/web/templates/edit/domain.twig           |  34 ++--
 data/web/templates/edit/domainadmin.twig      |  18 +-
 data/web/templates/edit/filter.twig           |  10 +-
 data/web/templates/edit/mailbox.twig          |  56 +++---
 data/web/templates/edit/oauth2client.twig     |  10 +-
 data/web/templates/edit/recipient_map.twig    |   8 +-
 data/web/templates/edit/relayhost.twig        |  10 +-
 data/web/templates/edit/resource.twig         |  10 +-
 data/web/templates/edit/syncjob.twig          |  42 ++---
 data/web/templates/edit/tls_policy_map.twig   |  10 +-
 data/web/templates/edit/transport.twig        |  14 +-
 data/web/templates/mailbox/tab-filters.twig   |   8 +-
 data/web/templates/modals/admin.twig          |  44 ++---
 data/web/templates/modals/footer.twig         |  22 +--
 data/web/templates/modals/mailbox.twig        | 162 +++++++++---------
 data/web/templates/modals/quarantine.twig     |  18 +-
 data/web/templates/modals/user.twig           |  74 ++++----
 data/web/templates/oauth/authorize.twig       |   2 +-
 data/web/templates/qhandler.twig              |  14 +-
 data/web/templates/user/Pushover.twig         | 104 ++++++-----
 data/web/templates/user/Spamfilter.twig       |   2 +-
 39 files changed, 442 insertions(+), 444 deletions(-)

diff --git a/data/web/templates/admin/tab-config-admins.twig b/data/web/templates/admin/tab-config-admins.twig
index 84092fde..5fd176c6 100644
--- a/data/web/templates/admin/tab-config-admins.twig
+++ b/data/web/templates/admin/tab-config-admins.twig
@@ -3,7 +3,7 @@
       <div class="card-header bg-danger text-white">{{ lang.admin.admin_details }}</div>
       <div class="card-body">
         <div class="table-responsive">
-          <table class="table table-striped table-condensed" id="adminstable"></table>
+          <div id="adminstable"></div>
         </div>
         <div class="mass-actions-admin">
           <div class="btn-group">
@@ -92,7 +92,7 @@
         <hr />
         <div id="license" class="collapse">
           <form class="form-horizontal" autocapitalize="none" autocorrect="off" role="form" method="post">
-            <div class="form-group">
+            <div class="row">
               <label class="control-label col-sm-3" for="guid">{{ lang.admin.guid }}:</label>
               <div class="col-sm-9">
                 <div class="input-group">
@@ -108,7 +108,7 @@
                 </p>
               </div>
             </div>
-            <div class="form-group">
+            <div class="row">
               <div class="offset-sm-3 col-sm-9">
                 <p class="text-muted">{{ lang.admin.license_info|raw }}</p>
                 <div class="btn-group">
@@ -135,33 +135,33 @@
                 </div>
                 <div class="card-body">
                   <form class="form-horizontal" autocapitalize="none" autocorrect="off" role="form" method="post">
-                    <div class="form-group">
+                    <div class="row">
                       <label class="control-label col-sm-3" for="allow_from_ro">{{ lang.admin.api_allow_from }}:</label>
                       <div class="col-sm-9">
                         <textarea class="form-control textarea-code" rows="7" name="allow_from" id="allow_from_ro" {% if api.ro.skip_ip_check %}disabled{% endif %} required>{{ api.ro.allow_from }}</textarea>
                       </div>
                     </div>
-                    <div class="form-group">
+                    <div class="row">
                       <div class="offset-sm-3 col-sm-9">
                         <label>
                           <input type="checkbox" name="skip_ip_check" id="skip_ip_check_ro" {% if api.ro.skip_ip_check %}checked{% endif %}> {{ lang.admin.api_skip_ip_check }}
                         </label>
                       </div>
                     </div>
-                    <div class="form-group">
+                    <div class="row">
                       <label class="control-label col-sm-3">{{ lang.admin.api_key }}:</label>
                       <div class="col-sm-9">
                         <pre>{{ api.ro.api_key|default('-') }}</pre>
                       </div>
                     </div>
-                    <div class="form-group">
+                    <div class="row">
                       <div class="offset-sm-3 col-sm-9">
                         <label>
                           <input type="checkbox" name="active" {% if api.ro.active %}checked{% endif %}> {{ lang.admin.activate_api }}
                         </label>
                       </div>
                     </div>
-                    <div class="form-group">
+                    <div class="row">
                       <div class="offset-sm-3 col-sm-9">
                         <div class="btn-group">
                           <button class="btn btn-sm btn-xs-half d-block d-sm-inline btn-success" name="admin_api[ro]" type="submit" href="#"><i class="bi bi-check-lg"></i> {{ lang.admin.save }}</button>
@@ -180,33 +180,33 @@
                 </div>
                 <div class="card-body">
                   <form class="form-horizontal" autocapitalize="none" autocorrect="off" role="form" method="post">
-                    <div class="form-group">
+                    <div class="row">
                       <label class="control-label col-sm-3" for="allow_from_rw">{{ lang.admin.api_allow_from }}:</label>
                       <div class="col-sm-9">
                         <textarea class="form-control textarea-code" rows="7" name="allow_from" id="allow_from_rw" {% if api.rw.skip_ip_check %}disabled{% endif %} required>{{ api.rw.allow_from }}</textarea>
                       </div>
                     </div>
-                    <div class="form-group">
+                    <div class="row">
                       <div class="offset-sm-3 col-sm-9">
                         <label>
                           <input type="checkbox" name="skip_ip_check" id="skip_ip_check_rw" {% if api.rw.skip_ip_check %}checked{% endif %}> {{ lang.admin.api_skip_ip_check }}
                         </label>
                       </div>
                     </div>
-                    <div class="form-group">
+                    <div class="row">
                       <label class="control-label col-sm-3" for="admin_api_key">{{ lang.admin.api_key }}:</label>
                       <div class="col-sm-9">
                         <pre>{{ api.rw.api_key|default('-') }}</pre>
                       </div>
                     </div>
-                    <div class="form-group">
+                    <div class="row">
                       <div class="offset-sm-3 col-sm-9">
                         <label>
                           <input type="checkbox" name="active" {% if api.rw.active %}checked{% endif %}> {{ lang.admin.activate_api }}
                         </label>
                       </div>
                     </div>
-                    <div class="form-group">
+                    <div class="row">
                       <div class="offset-sm-3 col-sm-9">
                         <div class="btn-group">
                           <button class="btn btn-sm btn-xs-half d-block d-sm-inline btn-success" name="admin_api[rw]" type="submit" href="#"><i class="bi bi-check-lg"></i> {{ lang.admin.save }}</button>
diff --git a/data/web/templates/admin/tab-config-customize.twig b/data/web/templates/admin/tab-config-customize.twig
index 6ffe907c..b0484bf8 100644
--- a/data/web/templates/admin/tab-config-customize.twig
+++ b/data/web/templates/admin/tab-config-customize.twig
@@ -62,24 +62,24 @@
       <legend data-bs-target="#ui_texts" style="padding-top:20px" unselectable="on">{{ lang.admin.ui_texts }}</legend><hr />
       <div id="ui_texts">
         <form class="form" data-id="uitexts" role="form" method="post">
-          <div class="form-group">
+          <div>
             <label for="uitests_title_name">{{ lang.admin.title_name }}:</label>
             <input type="text" class="form-control" id="uitests_title_name" name="title_name" placeholder="mailcow UI" value="{{ ui_texts.title_name|raw }}">
           </div>
-          <div class="form-group">
+          <div>
             <label for="uitests_main_name">{{ lang.admin.main_name }}:</label>
             <input type="text" class="form-control" id="uitests_main_name" name="main_name" placeholder="mailcow UI" value="{{ ui_texts.main_name|raw }}">
           </div>
-          <div class="form-group">
+          <div>
             <label for="uitests_apps_name">{{ lang.admin.apps_name }}:</label>
             <input type="text" class="form-control" id="uitests_apps_name" name="apps_name" placeholder="{{ lang.header.apps }}" value="{{ ui_texts.apps_name|raw }}">
           </div>
-          <div class="form-group">
+          <div>
             <label for="help_text">{{ lang.admin.help_text }}:</label>
             <textarea class="form-control" id="help_text" name="help_text" rows="7">{{ ui_texts.help_text|raw }}</textarea>
           </div>
           <hr>
-          <div class="form-group">
+          <div>
             <p class="text-muted">{{ lang.admin.ui_header_announcement_help }}</p>
             <label for="ui_announcement_type">{{ lang.admin.ui_header_announcement }}:</label>
             <p><select multiple data-width="100%" id="ui_announcement_type" name="ui_announcement_type" class="selectpicker show-tick" data-max-options="1" title="{{ lang.admin.ui_header_announcement_select }}">
@@ -95,7 +95,7 @@
             </div>
           </div>
           <hr>
-          <div class="form-group">
+          <div>
             <label for="ui_footer">{{ lang.admin.ui_footer }}:</label>
             <textarea class="form-control" id="ui_footer" name="ui_footer" rows="7">{{ ui_texts.ui_footer }}</textarea>
           </div>
diff --git a/data/web/templates/admin/tab-config-dkim.twig b/data/web/templates/admin/tab-config-dkim.twig
index 15b778e7..9ac2b915 100644
--- a/data/web/templates/admin/tab-config-dkim.twig
+++ b/data/web/templates/admin/tab-config-dkim.twig
@@ -90,16 +90,16 @@
 
       <legend style="margin-top:40px">{{ lang.admin.dkim_add_key }}</legend><hr />
       <form class="form" data-id="dkim" role="form" method="post">
-        <div class="form-group">
+        <div>
           <label for="dkim_add_domains">{{ lang.admin.domain_s }}</label>
           <input class="form-control input-sm" id="dkim_add_domains" name="domains" placeholder="example.org, example.com" required>
           <small><i class="bi bi-arrow-return-right"></i> <a href="#" id="dkim_missing_keys">{{ lang.admin.dkim_domains_wo_keys }}</a></small>
         </div>
-        <div class="form-group">
+        <div>
           <label for="dkim_selector">{{ lang.admin.dkim_domains_selector }}</label>
           <input class="form-control input-sm" id="dkim_selector" name="dkim_selector" value="dkim" required>
         </div>
-        <div class="form-group">
+        <div>
           <select data-style="btn btn-secondary btn-sm" class="form-control" id="key_size" name="key_size" title="{{ lang.admin.dkim_key_length }}" required>
             <option data-subtext="bits">1024</option>
             <option data-subtext="bits">2048</option>
@@ -114,19 +114,19 @@
       <hr />
       <div id="import_dkim" class="collapse">
         <form class="form" data-id="dkim_import" role="form" method="post">
-          <div class="form-group">
+          <div>
             <label for="dkim_import_domain">{{ lang.admin.domain }}:</label>
             <input class="form-control input-sm" id="dkim_import_domain" name="domain" placeholder="example.org" required>
           </div>
-          <div class="form-group">
+          <div>
             <label for="dkim_import_selector">{{ lang.admin.dkim_domains_selector }}:</label>
             <input class="form-control input-sm" id="dkim_import_selector" name="dkim_selector" value="dkim" required>
           </div>
-          <div class="form-group">
+          <div>
             <label for="private_key_file">{{ lang.admin.private_key }}: (RSA PKCS#8)</label>
             <textarea class="form-control input-sm" rows="10" name="private_key_file" id="private_key_file" required placeholder="-----BEGIN RSA KEY-----"></textarea>
           </div>
-          <div class="form-group">
+          <div>
             <label>
               <input type="checkbox" name="overwrite_existing" value="1"> {{ lang.admin.dkim_overwrite_key }}
             </label>
@@ -141,7 +141,7 @@
       <hr />
       <div id="duplicate_dkim" class="collapse">
         <form class="form-horizontal" data-id="dkim_duplicate" role="form" method="post">
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="from_domain">{{ lang.admin.dkim_from }}:</label>
             <div class="col-sm-10">
               <select data-style="btn btn-secondary btn-sm"
@@ -155,7 +155,7 @@
               </select>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="to_domain">{{ lang.admin.dkim_to }}:</label>
             <div class="col-sm-10">
               <select
diff --git a/data/web/templates/admin/tab-config-f2b.twig b/data/web/templates/admin/tab-config-f2b.twig
index 03b1d601..0a2a8097 100644
--- a/data/web/templates/admin/tab-config-f2b.twig
+++ b/data/web/templates/admin/tab-config-f2b.twig
@@ -3,26 +3,26 @@
     <div class="card-header">{{ lang.admin.f2b_parameters }}</div>
     <div class="card-body">
       <form class="form" data-id="f2b" role="form" method="post">
-        <div class="form-group">
+        <div>
           <label for="f2b_ban_time">{{ lang.admin.f2b_ban_time }}:</label>
           <input type="number" class="form-control" id="f2b_ban_time" name="ban_time" value="{{ f2b_data.ban_time }}" required>
         </div>
-        <div class="form-group">
+        <div>
           <label for="f2b_max_attempts">{{ lang.admin.f2b_max_attempts }}:</label>
           <input type="number" class="form-control" id="f2b_max_attempts" name="max_attempts" value="{{ f2b_data.max_attempts }}" required>
         </div>
-        <div class="form-group">
+        <div>
           <label for="f2b_retry_window">{{ lang.admin.f2b_retry_window }}:</label>
           <input type="number" class="form-control" id="f2b_retry_window" name="retry_window" value="{{ f2b_data.retry_window }}" required>
         </div>
-        <div class="form-group">
+        <div>
           <label for="f2b_netban_ipv4">{{ lang.admin.f2b_netban_ipv4 }}:</label>
           <div class="input-group">
             <span class="input-group-text">/</span>
             <input type="number" class="form-control" id="f2b_netban_ipv4" name="netban_ipv4" value="{{ f2b_data.netban_ipv4 }}" required>
           </div>
         </div>
-        <div class="form-group">
+        <div>
           <label for="f2b_netban_ipv6">{{ lang.admin.f2b_netban_ipv6 }}:</label>
           <div class="input-group">
             <span class="input-group-text">/</span>
@@ -31,11 +31,11 @@
         </div>
         <hr>
         <p class="text-muted">{{ lang.admin.f2b_list_info|raw }}</p>
-        <div class="form-group">
+        <div>
           <label for="f2b_whitelist">{{ lang.admin.f2b_whitelist }}:</label>
           <textarea class="form-control" id="f2b_whitelist" name="whitelist" rows="5">{{ f2b_data.whitelist }}</textarea>
         </div>
-        <div class="form-group">
+        <div>
           <label for="f2b_blacklist">{{ lang.admin.f2b_blacklist }}:</label>
           <textarea class="form-control" id="f2b_blacklist" name="blacklist" rows="5">{{ f2b_data.blacklist }}</textarea>
         </div>
diff --git a/data/web/templates/admin/tab-config-fwdhosts.twig b/data/web/templates/admin/tab-config-fwdhosts.twig
index 7605a937..462a89b5 100644
--- a/data/web/templates/admin/tab-config-fwdhosts.twig
+++ b/data/web/templates/admin/tab-config-fwdhosts.twig
@@ -21,11 +21,11 @@
       <legend>{{ lang.admin.add_forwarding_host }}</legend><hr />
       <p class="text-muted">{{ lang.admin.forwarding_hosts_add_hint }}</p>
       <form class="form" data-id="fwdhost" role="form" method="post">
-        <div class="form-group">
+        <div>
           <label for="fwdhost_hostname">{{ lang.admin.host }}</label>
           <input class="form-control" id="fwdhost_hostname" name="hostname" placeholder="example.org" required>
         </div>
-        <div class="form-group">
+        <div>
           <select data-width="200px" class="form-control" id="filter_spam" name="filter_spam" title="{{ lang.user.spamfilter }}" required>
             <option value="1">{{ lang.admin.active }}</option>
             <option value="0">{{ lang.admin.inactive }}</option>
diff --git a/data/web/templates/admin/tab-config-password-policy.twig b/data/web/templates/admin/tab-config-password-policy.twig
index d83d977f..8702cd7c 100644
--- a/data/web/templates/admin/tab-config-password-policy.twig
+++ b/data/web/templates/admin/tab-config-password-policy.twig
@@ -5,7 +5,7 @@
       <form class="form-horizontal" data-id="passwordpolicy" role="form" method="post">
         {% for name, value in password_complexity %}
           {% if name == 'length' %}
-            <div class="form-group">
+            <div class="row">
               <label class="control-label col-sm-3" for="length">{{ lang.admin.password_length }}:</label>
               <div class="col-sm-2">
                 <input type="number" class="form-control" min="3" max="64" name="length" id="length" value="{{ value }}" required>
@@ -13,7 +13,7 @@
             </div>
           {% else %}
             <input type="hidden" name="{{ name }}" value="0">
-            <div class="form-group">
+            <div class="row">
               <div class="offset-sm-3 col-sm-9">
                 <label>
                   <input type="checkbox" name="{{ name }}" id="{{ name }}" value="1" {% if value == 1 %}checked{% endif %}> {{ lang.admin['password_policy_'~name] }}
@@ -22,7 +22,7 @@
             </div>
           {% endif %}
         {% endfor %}
-        <div class="form-group">
+        <div class="row">
           <div class="offset-sm-3 col-sm-9">
             <div class="btn-group">
               <button class="btn btn-sm d-block d-sm-inline btn-success" data-item="passwordpolicy" data-action="edit_selected" data-id="passwordpolicy" data-api-url='edit/passwordpolicy' data-api-attr='{}' href="#"><i class="bi bi-check-lg"></i> {{ lang.admin.save }}</button>
diff --git a/data/web/templates/admin/tab-config-quarantine.twig b/data/web/templates/admin/tab-config-quarantine.twig
index 821e7b22..9cc0175c 100644
--- a/data/web/templates/admin/tab-config-quarantine.twig
+++ b/data/web/templates/admin/tab-config-quarantine.twig
@@ -6,58 +6,58 @@
       <div class="alert alert-info">{{ lang.quarantine.disabled_by_config }}</div>
       {% endif %}
       <form class="form-horizontal" data-id="quarantine" role="form" method="post">
-        <div class="form-group">
+        <div class="row">
           <label class="col-sm-4 control-label" for="quarantine_retention_size">{{ lang.admin.quarantine_retention_size|raw }}</label>
           <div class="col-sm-8">
             <input type="number" class="form-control" id="quarantine_retention_size" name="retention_size" value="{{ q_data.retention_size }}" placeholder="0" required>
           </div>
         </div>
-        <div class="form-group">
+        <div class="row">
           <label class="col-sm-4 control-label" for="quarantine_max_size">{{ lang.admin.quarantine_max_size|raw }}</label>
           <div class="col-sm-8">
             <input type="number" class="form-control" id="quarantine_max_size" name="max_size" value="{{ q_data.max_size }}" placeholder="0" required>
           </div>
         </div>
-        <div class="form-group">
+        <div class="row">
           <label class="col-sm-4 control-label" for="quarantine_max_score">{{ lang.admin.quarantine_max_score|raw }}</label>
           <div class="col-sm-8">
             <input type="number" class="form-control" id="quarantine_max_score" name="max_score" value="{{ q_data.max_score }}" placeholder="9999.0">
           </div>
         </div>
-        <div class="form-group">
+        <div class="row">
           <label class="col-sm-4 control-label" for="quarantine_max_age">{{ lang.admin.quarantine_max_age|raw }}</label>
           <div class="col-sm-8">
             <input type="number" class="form-control" id="quarantine_max_age" name="max_age" value="{{ q_data.max_age }}" min="1" required>
           </div>
         </div>
         <hr>
-        <div class="form-group">
+        <div class="row">
           <label class="col-sm-4 control-label" for="quarantine_redirect"><i class="bi bi-box-arrow-right"></i> {{ lang.admin.quarantine_redirect|raw }}</label>
           <div class="col-sm-8">
             <input type="email" class="form-control" id="quarantine_redirect" name="redirect" value="{{ q_data.redirect }}" placeholder="">
           </div>
         </div>
-        <div class="form-group">
+        <div class="row">
           <label class="col-sm-4 control-label" for="quarantine_bcc"><i class="bi bi-files"></i> {{ lang.admin.quarantine_bcc|raw }}</label>
           <div class="col-sm-8">
             <input type="email" class="form-control" id="quarantine_bcc" name="bcc" value="{{ q_data.bcc }}" placeholder="">
           </div>
         </div>
         <hr>
-        <div class="form-group">
+        <div class="row">
           <label class="col-sm-4 control-label" for="quarantine_sender">{{ lang.admin.quarantine_notification_sender }}:</label>
           <div class="col-sm-8">
             <input type="email" class="form-control" id="quarantine_sender" name="sender" value="{{ q_data.sender }}" placeholder="quarantine@localhost">
           </div>
         </div>
-        <div class="form-group">
+        <div class="row">
           <label class="col-sm-4 control-label" for="quarantine_subject">{{ lang.admin.quarantine_notification_subject }}:</label>
           <div class="col-sm-8">
             <input type="text" class="form-control" id="quarantine_subject" name="subject" value="{{ q_data.subject }}" placeholder="Spam Quarantine Notification">
           </div>
         </div>
         <hr>
-        <div class="form-group">
+        <div class="row">
           <label class="col-sm-4 control-label" for="quarantine_release_format">{{ lang.admin.quarantine_release_format }}:</label>
           <div class="col-sm-8">
             <select data-width="100%" id="quarantine_release_format" name="release_format" class="selectpicker" title="{{ lang.tfa.select }}">
@@ -66,7 +66,7 @@
             </select>
           </div>
         </div>
-        <div class="form-group">
+        <div class="row">
           <label class="col-sm-4 control-label" for="exclude_domains">{{ lang.admin.quarantine_exclude_domains }}:</label>
           <div class="col-sm-8">
             <select data-width="100%" name="exclude_domains" class="selectpicker" title="{{ lang.tfa.select }}" multiple>
diff --git a/data/web/templates/admin/tab-config-quota.twig b/data/web/templates/admin/tab-config-quota.twig
index 5a6ca086..673354bc 100644
--- a/data/web/templates/admin/tab-config-quota.twig
+++ b/data/web/templates/admin/tab-config-quota.twig
@@ -6,13 +6,13 @@
       <form class="form" role="form" data-id="quota_notification" method="post">
         <div class="row">
           <div class="col-sm-6">
-            <div class="form-group">
+            <div>
               <label for="quota_notification_sender">{{ lang.admin.quota_notification_sender }}:</label>
               <input type="email" class="form-control" id="quota_notification_sender" name="sender" value="{{ qn_data.sender }}" placeholder="quota-warning@localhost">
             </div>
           </div>
           <div class="col-sm-6">
-            <div class="form-group">
+            <div>
               <label for="quota_notification_subject">{{ lang.admin.quota_notification_subject }}:</label>
               <input type="text" class="form-control" id="quota_notification_subject" name="subject" value="{{ qn_data.subject }}" placeholder="Quota warning">
             </div>
@@ -32,7 +32,7 @@
         </div>
         <div class="row">
           <div class="col-sm-10">
-            <div class="form-group">
+            <div>
               <br>
               <a type="button" class="btn btn-sm d-block d-sm-inline btn-success" data-action="edit_selected"
                  data-item="quota_notification"
diff --git a/data/web/templates/admin/tab-config-rsettings.twig b/data/web/templates/admin/tab-config-rsettings.twig
index 44702f61..7ba22ae3 100644
--- a/data/web/templates/admin/tab-config-rsettings.twig
+++ b/data/web/templates/admin/tab-config-rsettings.twig
@@ -44,15 +44,15 @@
                   <div id="{{ rsetting.details.id }}" class="tab-pane">
                     <form class="form" data-id="rsettings" role="form" method="post">
                       <input type="hidden" name="active" value="0">
-                      <div class="form-group">
+                      <div>
                         <label for="rsettings_desc">{{ lang.admin.rsetting_desc }}:</label>
                         <input type="text" class="form-control" id="rsettings_desc" name="desc" value="{{ rsetting.details.desc }}">
                       </div>
-                      <div class="form-group">
+                      <div>
                         <label for="rsettings_content">{{ lang.admin.rsetting_content }}:</label>
                         <textarea class="form-control" id="rsettings_content" name="content" rows="10">{{ rsetting.details.content }}</textarea>
                       </div>
-                      <div class="form-group">
+                      <div>
                         <label>
                           <input type="checkbox" name="active" value="1" {% if rsetting.details.active %}checked{% endif %}> {{ lang.admin.active }}
                         </label>
diff --git a/data/web/templates/admin/tab-config-rspamd.twig b/data/web/templates/admin/tab-config-rspamd.twig
index 251fe58b..4fc5a1ad 100644
--- a/data/web/templates/admin/tab-config-rspamd.twig
+++ b/data/web/templates/admin/tab-config-rspamd.twig
@@ -10,26 +10,26 @@
         </div>
         <div class="col-sm-9 col-12">
           <form class="form-horizontal" autocapitalize="none" data-id="admin" autocorrect="off" role="form" method="post">
-            <div class="form-group">
+            <div class="row">
               <div class="offset-sm-3 col-sm-9">
                 <label>
                   <a href="/rspamd/" target="_blank"><i class="bi bi-window"></i> Rspamd UI</a>
                 </label>
               </div>
             </div>
-            <div class="form-group">
+            <div class="row">
               <label class="control-label col-sm-3" for="rspamd_ui_pass">{{ lang.admin.password }}:</label>
               <div class="col-sm-9">
                 <input type="password" class="form-control" id="rspamd_ui_pass" name="rspamd_ui_pass" autocomplete="new-password" required>
               </div>
             </div>
-            <div class="form-group">
+            <div class="row">
               <label class="control-label col-sm-3" for="rspamd_ui_pass2">{{ lang.admin.password_repeat }}:</label>
               <div class="col-sm-9">
                 <input type="password" class="form-control" id="rspamd_ui_pass2" name="rspamd_ui_pass2" autocomplete="new-password" required>
               </div>
             </div>
-            <div class="form-group">
+            <div class="row">
               <div class="offset-sm-3 col-sm-9">
                 <button type="submit" class="btn btn-sm d-block d-sm-inline btn-success" id="rspamd_ui" name="rspamd_ui" href="#"><i class="bi bi-check-lg"></i> {{ lang.admin.save }}</button>
               </div>
diff --git a/data/web/templates/admin/tab-globalfilter-regex.twig b/data/web/templates/admin/tab-globalfilter-regex.twig
index 26239a77..e0d90a54 100644
--- a/data/web/templates/admin/tab-globalfilter-regex.twig
+++ b/data/web/templates/admin/tab-globalfilter-regex.twig
@@ -6,7 +6,7 @@
     <div class="card-body">
       <p>{{ lang.admin.rspamd_global_filters_info }}</p>
       <div id="confirm_show_rspamd_global_filters"{% if show_rspamd_global_filters %} class="d-none"{% endif %}>
-        <div class="form-group">
+        <div class="row">
           <div class="offset-sm-2 col-sm-10">
             <label>
               <input type="checkbox" id="show_rspamd_global_filters"> {{ lang.admin.rspamd_global_filters_agree }}
@@ -28,13 +28,13 @@
         <hr>
         <span class="anchor" id="{{ rspamd_regex_map.map }}"></span>
         <form class="form-horizontal" data-cached-form="false" data-id="{{ rspamd_regex_map.map }}" role="form" method="post">
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-3" for="{{ rspamd_regex_map.map }}">{{ rspamd_regex_desc }}<br><small>{{ rspamd_regex_map.map }}</small></label>
             <div class="col-sm-9">
               <textarea id="{{ rspamd_regex_map.map }}" spellcheck="false" autocorrect="off" autocapitalize="none" class="form-control textarea-code" rows="10" name="rspamd_map_data" required>{{ rspamd_regex_map.data }}</textarea>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <div class="offset-sm-3 col-sm-9">
               <button class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary validate_rspamd_regex" data-regex-map="{{ rspamd_regex_map.map }}" href="#">{{ lang.add.validate }}</button>
               <button class="btn btn-sm btn-xs-half d-block d-sm-inline btn-success submit_rspamd_regex" data-action="edit_selected" data-id="{{ rspamd_regex_map.map }}" data-item="{{ rspamd_regex_map.map }}" data-api-url='edit/rspamd-map' data-api-attr='{}' href="#" disabled>{{ lang.edit.save }}</button>
diff --git a/data/web/templates/admin/tab-routing.twig b/data/web/templates/admin/tab-routing.twig
index 0efab724..637753c7 100644
--- a/data/web/templates/admin/tab-routing.twig
+++ b/data/web/templates/admin/tab-routing.twig
@@ -23,15 +23,15 @@
       <div class="row">
         <div class="col-md-8">
           <form class="form" data-id="rlyhost" role="form" method="post">
-            <div class="form-group">
+            <div>
               <label for="rlyhost_hostname">{{ lang.admin.host }}</label>
               <input class="form-control" id="rlyhost_hostname" name="hostname" placeholder='[0.0.0.0], [0.0.0.0]:25, host:25, host, [host]:25' required>
             </div>
-            <div class="form-group">
+            <div>
               <label for="rlyhost_username">{{ lang.admin.username }}</label>
               <input class="form-control" id="rlyhost_username" name="username">
             </div>
-            <div class="form-group">
+            <div>
               <label for="rlyhost_password">{{ lang.admin.password }}</label>
               <input class="form-control" id="rlyhost_password" name="password">
             </div>
@@ -66,28 +66,28 @@
       <div class="row">
         <div class="col-md-8">
           <form class="form" data-id="transport" role="form" method="post">
-            <div class="form-group">
+            <div>
               <label for="transport_destination">{{ lang.admin.destination }}</label>
               <input class="form-control" id="transport_destination" name="destination" placeholder='{{ lang.admin.transport_dest_format }}' required>
             </div>
-            <div class="form-group">
+            <div>
               <label for="transport_nexthop">{{ lang.admin.nexthop }}</label>
               <input class="form-control" id="transport_nexthop" name="nexthop" placeholder='host:25, host, [host]:25, [0.0.0.0]:25' required>
             </div>
-            <div class="form-group">
+            <div>
               <label for="transport_username">{{ lang.admin.username }}</label>
               <input class="form-control" id="transport_username" name="username">
             </div>
-            <div class="form-group">
+            <div>
               <label for="transport_password">{{ lang.admin.password }}</label>
               <input class="form-control" id="transport_password" name="password">
             </div>
-            <div class="form-group">
+            <div>
               <label>
                 <input type="checkbox" name="is_mx_based" value="1"> {{ lang.admin.lookup_mx|raw }}
               </label>
             </div>
-            <div class="form-group">
+            <div>
               <label>
                 <input type="checkbox" name="active" value="1"> {{ lang.admin.active }}
               </label>
diff --git a/data/web/templates/admin/tab-sys-mails.twig b/data/web/templates/admin/tab-sys-mails.twig
index 475c4f3b..139a318a 100644
--- a/data/web/templates/admin/tab-sys-mails.twig
+++ b/data/web/templates/admin/tab-sys-mails.twig
@@ -3,13 +3,13 @@
     <div class="card-header">{{ lang.admin.sys_mails }}</div>
     <div class="card-body">
       <form class="form-horizontal" autocapitalize="none" data-id="admin" autocorrect="off" role="form" method="post">
-        <div class="form-group">
+        <div class="row">
           <label class="control-label col-sm-2" for="admin_mass_from">{{ lang.admin.from }}:</label>
           <div class="col-sm-10">
             <input type="email" class="form-control" id="admin_mass_from" name="mass_from" value="noreply@{{ mailcow_hostname }}" required>
           </div>
         </div>
-        <div class="form-group">
+        <div class="row">
           <label class="control-label col-sm-2" for="admin_mass_subject">{{ lang.admin.subject }}:</label>
           <div class="col-sm-10">
             <input type="text" class="form-control" id="admin_mass_subject" name="mass_subject" required>
@@ -18,7 +18,7 @@
         {% for domain in all_domains %}
 
         {% endfor %}
-        <div class="form-group">
+        <div class="row">
           <label class="control-label col-sm-2" for="mass_subject">{{ lang.admin.include_exclude }}:
             <p class="text-muted">{{ lang.admin.include_exclude_info|raw }}</p>
           </label>
@@ -39,27 +39,27 @@
             </select>
           </div>
         </div>
-        <div class="form-group">
+        <div class="row">
           <label class="control-label col-sm-2" for="mass_text">{{ lang.admin.text }}:</label>
           <div class="col-sm-10">
             <textarea class="form-control" rows="10" name="mass_text" id="mass_text" required></textarea>
           </div>
         </div>
-        <div class="form-group">
+        <div class="row">
           <label class="control-label col-sm-2" for="mass_html">{{ lang.admin.html }} ({{ lang.admin.optional }}):</label>
           <div class="col-sm-10">
             <textarea class="form-control" rows="10" name="mass_html" id="mass_html"></textarea>
             <p class="small"><i class="bi bi-arrow-return-right"></i> <a target="_blank" href="https://templates.mailchimp.com/resources/html-to-text/">{{ lang.admin.convert_html_to_text }}</a></p>
           </div>
         </div>
-        <div class="form-group">
+        <div class="row">
           <div class="offset-sm-2 col-sm-10">
             <label>
               <input type="checkbox" id="mass_disarm"> {{ lang.admin.activate_send }}
             </label>
           </div>
         </div>
-        <div class="form-group">
+        <div class="row">
           <div class="offset-sm-2 col-sm-10">
             <button class="btn btn-sm d-block d-sm-inline btn-success" type="submit" id="mass_send" name="mass_send" disabled><i class="bi bi-envelope-fill"></i> {{ lang.admin.send }}</button>
           </div>
diff --git a/data/web/templates/edit/admin.twig b/data/web/templates/edit/admin.twig
index 9108b337..9202868c 100644
--- a/data/web/templates/edit/admin.twig
+++ b/data/web/templates/edit/admin.twig
@@ -6,40 +6,40 @@
 <br>
 <form class="form-horizontal" data-id="editadmin" role="form" method="post" autocomplete="off">
   <input type="hidden" value="0" name="active">
-  <div class="form-group">
+  <div class="row">
     <label class="control-label col-sm-2" for="username_new">{{ lang.edit.username }}</label>
     <div class="col-sm-10">
       <input class="form-control" type="text" name="username_new" onkeyup="this.value = this.value.toLowerCase();" required value="{{ admin }}" />
       &rdsh; <kbd>a-z - _ .</kbd>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row">
     <label class="control-label col-sm-2" for="password">{{ lang.edit.password }} (<a href="#" class="generate_password">{{ lang.edit.generate }}</a>)</label>
     <div class="col-sm-10">
       <input type="password" data-pwgen-field="true" data-hibp="true" class="form-control" name="password" placeholder="" autocomplete="new-password">
     </div>
   </div>
-  <div class="form-group">
+  <div class="row">
     <label class="control-label col-sm-2" for="password2">{{ lang.edit.password_repeat }}</label>
     <div class="col-sm-10">
       <input type="password" data-pwgen-field="true" class="form-control" name="password2" autocomplete="new-password">
     </div>
   </div>
-  <div class="form-group">
+  <div class="row">
     <div class="offset-sm-2 col-sm-10">
       <div class="checkbox">
         <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row">
     <div class="offset-sm-2 col-sm-10">
       <div class="checkbox">
         <label><input type="checkbox" value="1" name="disable_tfa"> {{ lang.tfa.disable_tfa }}</label>
       </div>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row">
     <div class="offset-sm-2 col-sm-10">
       <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-api-reload-location="/admin" data-id="editadmin" data-item="{{ admin }}" data-api-url='edit/admin' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
     </div>
diff --git a/data/web/templates/edit/alias.twig b/data/web/templates/edit/alias.twig
index 32dea52e..1a4af751 100644
--- a/data/web/templates/edit/alias.twig
+++ b/data/web/templates/edit/alias.twig
@@ -9,13 +9,13 @@
   {% if not skip_sogo %}
   <input type="hidden" value="0" name="sogo_visible">
   {% endif %}
-  <div class="form-group">
+  <div class="row">
     <label class="control-label col-sm-2" for="address">{{ lang.edit.alias }}</label>
     <div class="col-sm-10">
       <input class="form-control" type="text" name="address" value="{{ result.address }}" />
     </div>
   </div>
-  <div class="form-group">
+  <div class="row">
     <label class="control-label col-sm-2" for="goto">{{ lang.edit.target_address|raw }}</label>
     <div class="col-sm-10">
       <textarea id="textarea_alias_goto" class="form-control" autocapitalize="none" autocorrect="off" rows="10" id="goto" name="goto" required>{{ goto|replace({',': ', '}) }}</textarea>
@@ -38,27 +38,27 @@
     </div>
   </div>
   <hr>
-  <div class="form-group">
+  <div class="row">
     <label class="control-label col-sm-2" for="private_">{{ lang.edit.private_comment }}</label>
     <div class="col-sm-10">
       <input maxlength="160" class="form-control" type="text" name="private_comment" value="{{ result.private_comment }}" />
     </div>
   </div>
-  <div class="form-group">
+  <div class="row">
     <label class="control-label col-sm-2" for="public_comment">{{ lang.edit.public_comment }}</label>
     <div class="col-sm-10">
       <input maxlength="160" class="form-control" type="text" name="public_comment" value="{{ result.public_comment }}" />
     </div>
   </div>
   <hr>
-  <div class="form-group">
+  <div class="row">
     <div class="offset-sm-2 col-sm-10">
       <div class="checkbox">
         <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row">
     <div class="offset-sm-2 col-sm-10">
       <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="editalias" data-item="{{ alias }}" data-api-url='edit/alias' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
     </div>
diff --git a/data/web/templates/edit/aliasdomain.twig b/data/web/templates/edit/aliasdomain.twig
index 6ab6378f..b78efe50 100644
--- a/data/web/templates/edit/aliasdomain.twig
+++ b/data/web/templates/edit/aliasdomain.twig
@@ -5,7 +5,7 @@
 <h4>{{ lang.edit.edit_alias_domain }}</h4>
 <form class="form-horizontal" data-id="editaliasdomain" role="form" method="post">
   <input type="hidden" value="0" name="active">
-  <div class="form-group">
+  <div class="row">
     <label class="control-label col-sm-2" for="target_domain">{{ lang.edit.target_domain }}</label>
     <div class="col-sm-10">
       <select class="full-width-select" data-live-search="true" id="addSelectDomain" name="target_domain" required>
@@ -15,14 +15,14 @@
       </select>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row">
     <div class="offset-sm-2 col-sm-10">
       <div class="checkbox">
         <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row">
     <div class="offset-sm-2 col-sm-10">
       <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="editaliasdomain" data-item="{{ alias_domain }}" data-api-url='edit/alias-domain' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
     </div>
@@ -30,16 +30,16 @@
 </form>
 <hr>
 <form data-id="domratelimit" class="form-inline well" method="post">
-  <div class="form-group">
+  <div class="row">
     <label class="control-label">{{ lang.acl.ratelimit }}</label>
     <input name="rl_value" type="number" value="{{ rl.value }}" autocomplete="off" class="form-control" placeholder="{{ lang.ratelimit.disabled }}">
   </div>
-  <div class="form-group">
+  <div class="row">
     <select name="rl_frame" class="form-control">
       {% include 'mailbox/rl-frame.twig' %}
     </select>
   </div>
-  <div class="form-group">
+  <div class="row">
     <button class="btn btn-xs-lg d-block d-sm-inline btn-secondary" data-action="edit_selected" data-id="domratelimit" data-item="{{ alias_domain }}" data-api-url='edit/rl-domain' data-api-attr='{}' href="#">{{ lang.admin.save }}</button>
   </div>
 </form>
diff --git a/data/web/templates/edit/app-passwd.twig b/data/web/templates/edit/app-passwd.twig
index a9ed97db..5b795595 100644
--- a/data/web/templates/edit/app-passwd.twig
+++ b/data/web/templates/edit/app-passwd.twig
@@ -6,32 +6,32 @@
 <form class="form-horizontal" data-pwgen-length="32" data-id="editapp" role="form" method="post">
   <input type="hidden" value="0" name="active">
   <input type="hidden" value="0" name="protocols">
-  <div class="form-group">
+  <div class="row">
     <label class="control-label col-sm-2" for="app_name">{{ lang.edit.app_name }}</label>
     <div class="col-sm-10">
       <input type="text" class="form-control" name="app_name" id="app_name" value="{{ result.name }}" required maxlength="255">
     </div>
   </div>
-  <div class="form-group">
+  <div class="row">
     <label class="control-label col-sm-2" for="password">{{ lang.edit.password }} (<a href="#" class="generate_password">{{ lang.edit.generate }}</a>)</label>
     <div class="col-sm-10">
       <input type="password" data-pwgen-field="true" data-hibp="true" class="form-control" name="password" placeholder="" autocomplete="new-password">
     </div>
   </div>
-  <div class="form-group">
+  <div class="row">
     <label class="control-label col-sm-2" for="password2">{{ lang.edit.password_repeat }}</label>
     <div class="col-sm-10">
       <input type="password" data-pwgen-field="true" class="form-control" name="password2" autocomplete="new-password">
     </div>
   </div>
-  <div class="form-group">
+  <div class="row">
     <div class="offset-sm-2 col-sm-10">
       <div class="checkbox">
         <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row">
     <label class="control-label col-sm-2" for="protocols">{{ lang.edit.app_passwd_protocols }}</label>
     <div class="col-sm-10">
       <select class="full-width-select" data-live-search="true" id="protocols" name="protocols" multiple>
@@ -44,7 +44,7 @@
       </select>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row">
     <div class="offset-sm-2 col-sm-10">
       <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="editapp" data-item="{{ result.id }}" data-api-url='edit/app-passwd' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
     </div>
diff --git a/data/web/templates/edit/bcc.twig b/data/web/templates/edit/bcc.twig
index e57e928d..4ae50c0c 100644
--- a/data/web/templates/edit/bcc.twig
+++ b/data/web/templates/edit/bcc.twig
@@ -6,14 +6,14 @@
 <br>
 <form class="form-horizontal" data-id="editbcc" role="form" method="post">
   <input type="hidden" value="0" name="active">
-  <div class="form-group">
+  <div class="row">
     <label class="control-label col-sm-2" for="bcc_dest">{{ lang.mailbox.bcc_destination }}</label>
     <div class="col-sm-10">
       <input value="{{ result.bcc_dest }}" type="text" class="form-control" name="bcc_dest" id="bcc_dest">
       <small>{{ lang.edit.bcc_dest_format|raw }}</small>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row">
     <label class="control-label col-sm-2" for="type">{{ lang.mailbox.bcc_map_type }}</label>
     <div class="col-sm-10">
       <select id="addFilterType" name="type" id="type" required>
@@ -22,14 +22,14 @@
       </select>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row">
     <div class="offset-sm-2 col-sm-10">
       <div class="checkbox">
         <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row">
     <div class="offset-sm-2 col-sm-10">
       <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="editbcc" data-item="{{ bcc }}" data-api-url='edit/bcc' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
     </div>
diff --git a/data/web/templates/edit/domain.twig b/data/web/templates/edit/domain.twig
index 1a79c29e..5e4ebc84 100644
--- a/data/web/templates/edit/domain.twig
+++ b/data/web/templates/edit/domain.twig
@@ -17,13 +17,13 @@
       <input type="hidden" value="0" name="gal">
       <input type="hidden" value="0" name="relay_all_recipients">
       <input type="hidden" value="0" name="relay_unknown_only">
-      <div class="form-group" data-acl="{{ acl.domain_desc }}">
+      <div class="row" data-acl="{{ acl.domain_desc }}">
         <label class="control-label col-sm-2" for="description">{{ lang.edit.description }}</label>
         <div class="col-sm-10">
           <input type="text" class="form-control" name="description" value="{{ result.description }}">
         </div>
       </div>
-      <div class="form-group">
+      <div class="row">
         <label class="control-label col-sm-2" for="relayhost">{{ lang.edit.relayhost }}</label>
         <div class="col-sm-10">
           <select data-acl="{{ acl.domain_relayhost }}" data-live-search="true" id="relayhost" name="relayhost" class="form-control">
@@ -42,37 +42,37 @@
         </div>
       </div>
       {% if mailcow_cc_role == 'admin' %}
-      <div class="form-group">
+      <div class="row">
         <label class="control-label col-sm-2" for="aliases">{{ lang.edit.max_aliases }}</label>
         <div class="col-sm-10">
           <input type="number" class="form-control" name="aliases" value="{{ result.max_num_aliases_for_domain }}">
         </div>
       </div>
-      <div class="form-group">
+      <div class="row">
         <label class="control-label col-sm-2" for="mailboxes">{{ lang.edit.max_mailboxes }}</label>
         <div class="col-sm-10">
           <input type="number" class="form-control" name="mailboxes" value="{{ result.max_num_mboxes_for_domain }}">
         </div>
       </div>
-      <div class="form-group">
+      <div class="row">
         <label class="control-label col-sm-2" for="defquota">{{ lang.edit.mailbox_quota_def }}</label>
         <div class="col-sm-10">
           <input type="number" class="form-control" name="defquota" value="{{ (result.def_quota_for_mbox / 1048576) }}">
         </div>
       </div>
-      <div class="form-group">
+      <div class="row">
         <label class="control-label col-sm-2" for="maxquota">{{ lang.edit.max_quota }}</label>
         <div class="col-sm-10">
           <input type="number" class="form-control" name="maxquota" value="{{ (result.max_quota_for_mbox / 1048576) }}">
         </div>
       </div>
-      <div class="form-group">
+      <div class="row">
         <label class="control-label col-sm-2" for="quota">{{ lang.edit.domain_quota }}</label>
         <div class="col-sm-10">
           <input type="number" class="form-control" name="quota" value="{{ (result.max_quota_for_domain / 1048576) }}">
         </div>
       </div>
-      <div class="form-group">
+      <div class="row">
         <label class="control-label col-sm-2">{{ lang.edit.backup_mx_options }}</label>
         <div class="col-sm-10">
           <div class="checkbox">
@@ -88,7 +88,7 @@
         </div>
       </div>
       {% endif %}
-      <div class="form-group">
+      <div class="row">
         <div class="offset-sm-2 col-sm-10">
           <div class="checkbox">
             <label><input type="checkbox" value="1" name="gal"{% if result.gal == '1' %} checked{% endif %}> {{ lang.edit.gal }}</label>
@@ -97,14 +97,14 @@
         </div>
       </div>
       <hr>
-      <div class="form-group">
+      <div class="row">
         <div class="offset-sm-2 col-sm-10">
           <div class="checkbox">
             <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}{% if mailcow_cc_role != 'admin' %} disabled{% endif %}> {{ lang.edit.active }}</label>
           </div>
         </div>
       </div>
-      <div class="form-group">
+      <div class="row">
         <div class="offset-sm-2 col-sm-10">
           <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="editdomain" data-item="{{ domain }}" data-api-url='edit/domain' data-api-attr='{}' href="#">{{ lang.admin.save }}</button>
         </div>
@@ -124,16 +124,16 @@
   </div>
   <div id="dratelimit" class="tab-pane fade" role="tabpanel" aria-labelledby="domain-ratelimit">
     <form data-id="domratelimit" class="form-inline well" method="post">
-      <div class="form-group">
+      <div class="row">
         <label class="control-label">{{ lang.edit.ratelimit }}</label>
         <input name="rl_value" type="number" value="{{ rl.value }}" autocomplete="off" class="form-control" placeholder="{{ lang.ratelimit.disabled }}">
       </div>
-      <div class="form-group">
+      <div class="row">
         <select name="rl_frame" class="form-control">
           {% include 'mailbox/rl-frame.twig' %}
         </select>
       </div>
-      <div class="form-group">
+      <div class="row">
         <button data-acl="{{ acl.ratelimit }}" class="btn btn-xs-lg d-block d-sm-inline btn-secondary" data-action="edit_selected" data-id="domratelimit" data-item="{{ domain }}" data-api-url='edit/rl-domain' data-api-attr='{}' href="#">{{ lang.admin.save }}</button>
       </div>
     </form>
@@ -191,20 +191,20 @@
         <p>{{ lang.edit.quota_warning_bcc_info|raw }}</p>
         <form class="form-horizontal" data-id="quota_bcc">
           <input type="hidden" value="0" name="active">
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="script_data">{{ lang.edit.target_address|raw }}:</label>
             <div class="col-sm-10">
               <textarea spellcheck="false" autocorrect="off" autocapitalize="none" class="form-control" rows="10" id="bcc_rcpt" name="bcc_rcpt">{{ quota_notification_bcc.bcc_rcpts|join("\n") }}</textarea>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <div class="offset-sm-2 col-sm-10">
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="active"{% if quota_notification_bcc.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
               </div>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <div class="offset-sm-2 col-sm-10">
               <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="quota_bcc" data-item="quota_bcc" data-api-url='edit/quota_notification_bcc' data-api-attr='{"domain":"{{ domain }}"}' href="#">{{ lang.edit.save }}</button>
             </div>
diff --git a/data/web/templates/edit/domainadmin.twig b/data/web/templates/edit/domainadmin.twig
index 4b7041d5..f5c99c54 100644
--- a/data/web/templates/edit/domainadmin.twig
+++ b/data/web/templates/edit/domainadmin.twig
@@ -6,14 +6,14 @@
 <br>
 <form class="form-horizontal" data-id="editdomainadmin" role="form" method="post" autocomplete="off">
   <input type="hidden" value="0" name="active">
-  <div class="form-group">
+  <div class="row">
     <label class="control-label col-sm-2" for="username_new">{{ lang.edit.username }}</label>
     <div class="col-sm-10">
       <input class="form-control" type="text" name="username_new" value="{{ domain_admin }}" required onkeyup="this.value = this.value.toLowerCase();" />
       &rdsh; <kbd>a-z - _ .</kbd>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row">
     <label class="control-label col-sm-2" for="domains">{{ lang.edit.domains }}</label>
     <div class="col-sm-10">
       <select data-live-search="true" class="full-width-select" name="domains" multiple required>
@@ -26,33 +26,33 @@
       </select>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row">
     <label class="control-label col-sm-2" for="password">{{ lang.edit.password }} (<a href="#" class="generate_password">{{ lang.edit.generate }}</a>)</label>
     <div class="col-sm-10">
       <input type="password" data-pwgen-field="true" data-hibp="true" class="form-control" name="password" placeholder="" autocomplete="new-password">
     </div>
   </div>
-  <div class="form-group">
+  <div class="row">
     <label class="control-label col-sm-2" for="password2">{{ lang.edit.password_repeat }}</label>
     <div class="col-sm-10">
       <input type="password" data-pwgen-field="true" class="form-control" name="password2" autocomplete="new-password">
     </div>
   </div>
-  <div class="form-group">
+  <div class="row">
     <div class="offset-sm-2 col-sm-10">
       <div class="checkbox">
         <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row">
     <div class="offset-sm-2 col-sm-10">
       <div class="checkbox">
         <label><input type="checkbox" value="1" name="disable_tfa"> {{ lang.tfa.disable_tfa }}</label>
       </div>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row">
     <div class="offset-sm-2 col-sm-10">
       <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-api-reload-location="/admin" data-id="editdomainadmin" data-item="{{ domain_admin }}" data-api-url='edit/domain-admin' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
     </div>
@@ -64,14 +64,14 @@
       <p class="text-muted">ACL</p>
     </div>
     <div class="col-sm-10">
-      <div class="form-group">
+      <div class="row">
         <select id="da_acl" name="da_acl" size="10" data-container="body" multiple>
           {% for acl, val in da_acls %}
           <option value="{{ acl }}"{% if val == 1 %} selected{% endif %}>{{ lang.acl[acl] }}</option>
           {% endfor %}
         </select>
       </div>
-      <div class="form-group">
+      <div class="row">
         <button class="btn btn-xs-lg d-block d-sm-inline btn-secondary" data-action="edit_selected" data-id="daacl" data-item="{{ domain_admin }}" data-api-url='edit/da-acl' data-api-attr='{}' href="#">{{ lang.admin.save }}</button>
       </div>
     </div>
diff --git a/data/web/templates/edit/filter.twig b/data/web/templates/edit/filter.twig
index 2f3e7ae8..df01265e 100644
--- a/data/web/templates/edit/filter.twig
+++ b/data/web/templates/edit/filter.twig
@@ -5,13 +5,13 @@
 <h4>Filter</h4>
 <form class="form-horizontal" data-id="editfilter" role="form" method="post">
   <input type="hidden" value="0" name="active">
-  <div class="form-group">
+  <div class="row">
     <label class="control-label col-sm-2" for="script_desc">{{ lang.edit.sieve_desc }}</label>
     <div class="col-sm-10">
       <input type="text" class="form-control" name="script_desc" id="script_desc" value="{{ result.script_desc }}" required maxlength="255">
     </div>
   </div>
-  <div class="form-group">
+  <div class="row">
     <label class="control-label col-sm-2" for="filter_type">{{ lang.edit.sieve_type }}</label>
     <div class="col-sm-10">
       <select id="addFilterType" name="filter_type" id="filter_type" required>
@@ -20,20 +20,20 @@
       </select>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row">
     <label class="control-label col-sm-2" for="script_data">Script:</label>
     <div class="col-sm-10">
       <textarea spellcheck="false" autocorrect="off" autocapitalize="none" class="form-control textarea-code" rows="20" id="script_data" name="script_data" required>{{ result.script_data|raw }}</textarea>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row">
     <div class="offset-sm-2 col-sm-10">
       <div class="checkbox">
         <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row">
     <div class="offset-sm-2 col-sm-10">
       <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="editfilter" data-item="{{ result.id }}" data-api-url='edit/filter' data-api-attr='{}' href="#">{{ lang.edit.validate_save }}</button>
     </div>
diff --git a/data/web/templates/edit/mailbox.twig b/data/web/templates/edit/mailbox.twig
index 5f6106c5..5c3d54cc 100644
--- a/data/web/templates/edit/mailbox.twig
+++ b/data/web/templates/edit/mailbox.twig
@@ -16,13 +16,13 @@
       <input type="hidden" value="0" name="force_pw_update">
       <input type="hidden" value="0" name="sogo_access">
       <input type="hidden" value="0" name="protocol_access">
-      <div class="form-group">
+      <div class="row">
         <label class="control-label col-sm-2" for="name">{{ lang.edit.full_name }}</label>
         <div class="col-sm-10">
           <input type="text" class="form-control" name="name" value="{{ result.name }}">
         </div>
       </div>
-      <div class="form-group">
+      <div class="row">
         <label class="control-label col-sm-2" for="quota">{{ lang.edit.quota_mb }}
           <br><span id="quotaBadge" class="badge">max. {{ (result.max_new_quota / 1048576) }} MiB</span>
         </label>
@@ -31,7 +31,7 @@
           <small class="text-muted">0 = ∞</small>
         </div>
       </div>
-      <div class="form-group">
+      <div class="row">
         <label class="control-label col-sm-2" for="sender_acl">{{ lang.edit.sender_acl }}</label>
         <div class="col-sm-10">
           <select data-live-search="true" data-width="100%" style="width:100%" id="editSelectSenderACL" name="sender_acl" size="10" multiple>
@@ -69,7 +69,7 @@
           <small class="text-muted">{{ lang.edit.sender_acl_info|raw }}</small>
         </div>
       </div>
-      <div class="form-group">
+      <div class="row">
         <label class="control-label col-sm-2" for="relayhost">{{ lang.edit.relayhost }}</label>
         <div class="col-sm-10">
           <select data-acl="{{ acl.mailbox_relayhost }}" data-live-search="true" id="relayhost" name="relayhost" class="form-control mb-4">
@@ -89,7 +89,7 @@
           <small class="text-muted">{{ lang.edit.mailbox_relayhost_info }}</small>
         </div>
       </div>
-      <div class="form-group">
+      <div class="row">
         <label class="control-label col-sm-2">{{ lang.user.quarantine_notification }}</label>
         <div class="col-sm-10">
           <div class="btn-group" data-acl="{{ acl.quarantine_notification }}">
@@ -121,7 +121,7 @@
           <p class="text-muted"><small>{{ lang.user.quarantine_notification_info }}</small></p>
         </div>
       </div>
-      <div class="form-group">
+      <div class="row">
         <label class="control-label col-sm-2">{{ lang.user.quarantine_category }}</label>
         <div class="col-sm-10">
           <div class="btn-group" data-acl="{{ acl.quarantine_category }}">
@@ -147,7 +147,7 @@
           <p class="text-muted"><small>{{ lang.user.quarantine_category_info }}</small></p>
         </div>
       </div>
-      <div class="form-group">
+      <div class="row">
         <label class="control-label col-sm-2" for="sender_acl">{{ lang.user.tls_policy }}</label>
         <div class="col-sm-10">
           <div class="btn-group" data-acl="{{ acl.tls_policy }}">
@@ -166,19 +166,19 @@
           </div>
         </div>
       </div>
-      <div class="form-group">
+      <div class="row">
         <label class="control-label col-sm-2" for="password">{{ lang.edit.password }} (<a href="#" class="generate_password">{{ lang.edit.generate }}</a>)</label>
         <div class="col-sm-10">
           <input type="password" data-pwgen-field="true" data-hibp="true" class="form-control" name="password" placeholder="{{ lang.edit.unchanged_if_empty }}" autocomplete="new-password">
         </div>
       </div>
-      <div class="form-group">
+      <div class="row">
         <label class="control-label col-sm-2" for="password2">{{ lang.edit.password_repeat }}</label>
         <div class="col-sm-10">
           <input type="password" data-pwgen-field="true" class="form-control" name="password2" autocomplete="new-password">
         </div>
       </div>
-      <div data-acl="{{ acl.extend_sender_acl }}" class="form-group">
+      <div data-acl="{{ acl.extend_sender_acl }}" class="row">
         <label class="control-label col-sm-2" for="extended_sender_acl">{{ lang.edit.extended_sender_acl }}</label>
         <div class="col-sm-10">
           {% if sender_acl_handles.external_sender_aliases %}
@@ -188,7 +188,7 @@
           <small class="text-muted">{{ lang.edit.extended_sender_acl_info|raw }}</small>
         </div>
       </div>
-      <div class="form-group">
+      <div class="row">
         <label class="control-label col-sm-2" for="protocol_access">{{ lang.edit.allowed_protocols }}</label>
         <div class="col-sm-10">
           <select data-acl="{{ acl.protocol_access }}" name="protocol_access" multiple class="form-control">
@@ -199,7 +199,7 @@
           </select>
         </div>
       </div>
-      <div hidden data-acl="{{ acl.smtp_ip_access }}" class="form-group">
+      <div hidden data-acl="{{ acl.smtp_ip_access }}" class="row">
         <label class="control-label col-sm-2" for="allow_from_smtp">{{ lang.edit.allow_from_smtp }}</label>
         <div class="col-sm-10">
           <input type="text" class="form-control" name="allow_from_smtp" value="{{ allow_from_smtp }}" placeholder="1.1.1.1, 10.2.0.0/24, ...">
@@ -207,7 +207,7 @@
         </div>
       </div>
       <hr>
-      <div class="form-group">
+      <div class="row">
         <div class="offset-sm-2 col-sm-10">
           <select name="active" class="form-control">
             <option value="1"{% if result.active == '1' %} selected{% endif %}>{{ lang.edit.active }}</option>
@@ -216,7 +216,7 @@
           </select>
         </div>
       </div>
-      <div class="form-group">
+      <div class="row">
         <div class="offset-sm-2 col-sm-10">
           <div class="checkbox">
             <label><input type="checkbox" value="1" name="force_pw_update"{% if result.attributes.force_pw_update == '1' %} checked{% endif %}> {{ lang.edit.force_pw_update }}</label>
@@ -225,7 +225,7 @@
         </div>
       </div>
       {% if not skip_sogo %}
-      <div data-acl="{{ acl.sogo_access }}" class="form-group">
+      <div data-acl="{{ acl.sogo_access }}" class="row">
         <div class="offset-sm-2 col-sm-10">
           <div class="checkbox">
             <label><input type="checkbox" value="1" name="sogo_access"{% if result.attributes.sogo_access == '1' %} checked{% endif %}> {{ lang.edit.sogo_access }}</label>
@@ -234,7 +234,7 @@
         </div>
       </div>
       {% endif %}
-      <div class="form-group">
+      <div class="row">
         <div class="offset-sm-2 col-sm-10">
           <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="editmailbox" data-item="{{ result.username }}" data-api-url='edit/mailbox' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
         </div>
@@ -253,34 +253,34 @@
         <div class="col-sm-10">
           <p class="text-muted">{{ lang.user.pushover_info|format(mailbox)|raw }}</p>
           <p class="text-muted">{{ lang.edit.pushover_vars|raw }}: <code>{SUBJECT}</code>, <code>{SENDER}</code></p>
-          <div class="form-group">
+          <div class="row">
             <div class="row">
               <div class="col-sm-6">
-                <div class="form-group">
+                <div class="row">
                   <label for="token">API Token/Key (Application)</label>
                   <input type="text" class="form-control" name="token" maxlength="30" value="{{ pushover_data.token }}" required>
                 </div>
               </div>
               <div class="col-sm-6">
-                <div class="form-group">
+                <div class="row">
                   <label for="key">User/Group Key</label>
                   <input type="text" class="form-control" name="key" maxlength="30" value="{{ pushover_data.key }}" required>
                 </div>
               </div>
               <div class="col-sm-6">
-                <div class="form-group">
+                <div class="row">
                   <label for="title">{{ lang.edit.pushover_title }}</label>
                   <input type="text" class="form-control" name="title" value="{{ pushover_data.title }}" placeholder="Mail">
                 </div>
               </div>
               <div class="col-sm-6">
-                <div class="form-group">
+                <div class="row">
                   <label for="text">{{ lang.edit.pushover_text }}</label>
                   <input type="text" class="form-control" name="text" value="{{ pushover_data.text }}" placeholder="You've got mail 📧">
                 </div>
               </div>
               <div class="col-sm-12">
-                <div class="form-group">
+                <div class="row">
                   <label for="text">{{ lang.edit.pushover_sender_array|raw }}</label>
                   <input type="text" class="form-control" name="senders" value="{{ pushover_data.senders }}" placeholder="sender1@example.com, sender2@example.com">
                 </div>
@@ -298,7 +298,7 @@
               </div>
               <div class="col-sm-12">
                 <div id="po_advanced" class="collapse">
-                  <div class="form-group">
+                  <div class="row">
                     <label for="text">{{ lang.edit.pushover_sender_regex }}</label>
                     <input type="text" class="form-control" name="senders_regex" value="{{ pushover_data.senders_regex }}" placeholder="/(.*@example\.org$|^foo@example\.com$)/i" regex="true">
                     <div class="checkbox">
@@ -328,14 +328,14 @@
           <p class="text-muted">ACL</p>
         </div>
         <div class="col-sm-10">
-          <div class="form-group">
+          <div class="row">
             <select id="user_acl" name="user_acl" size="10" multiple>
               {% for acl, val in user_acls %}
                 <option value="{{ acl }}"{% if val == 1 %} selected{% endif %}>{{ lang.acl[acl] }}</option>
               {% endfor %}
             </select>
           </div>
-          <div class="form-group">
+          <div class="row">
             <button class="btn btn-xs-lg d-block d-sm-inline btn-secondary" data-action="edit_selected" data-id="useracl" data-item="{{ mailbox }}" data-api-url='edit/user-acl' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
           </div>
         </div>
@@ -349,15 +349,15 @@
           <p class="text-muted">{{ lang.acl.ratelimit }}</p>
         </div>
         <div class="col-sm-10">
-          <div class="form-group">
+          <div class="row">
             <input name="rl_value" type="number" autocomplete="off" value="{{ rl.value }}" class="form-control" placeholder="{{ lang.ratelimit.disabled }}">
           </div>
-          <div class="form-group">
+          <div class="row">
             <select name="rl_frame" class="form-control">
               {% include 'mailbox/rl-frame.twig' %}
             </select>
           </div>
-          <div class="form-group">
+          <div class="row">
             <button class="btn btn-xs-lg d-block d-sm-inline btn-secondary" data-action="edit_selected" data-id="mboxratelimit" data-item="{{ mailbox }}" data-api-url='edit/rl-mbox' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
           </div>
           <p class="text-muted">{{ lang.edit.mbox_rl_info }}</p>
diff --git a/data/web/templates/edit/oauth2client.twig b/data/web/templates/edit/oauth2client.twig
index c98f46eb..8290ca15 100644
--- a/data/web/templates/edit/oauth2client.twig
+++ b/data/web/templates/edit/oauth2client.twig
@@ -4,31 +4,31 @@
 {% if result %}
 <h4>OAuth2</h4>
 <form data-id="oauth2client" class="form-horizontal" role="form" method="post">
-  <div class="form-group">
+  <div class="row">
     <label class="control-label col-sm-2" for="client_id">{{ lang.edit.client_id }}</label>
     <div class="col-sm-10">
       <input type="text" class="form-control" name="client_id" id="client_id" value="{{ result.client_id }}" disabled>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row">
     <label class="control-label col-sm-2" for="client_secret">{{ lang.edit.client_secret }}</label>
     <div class="col-sm-10">
       <input type="text" class="form-control" name="client_secret" id="client_secret" value="{{ result.client_secret }}" disabled>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row">
     <label class="control-label col-sm-2" for="scope">{{ lang.edit.scope }}</label>
     <div class="col-sm-10">
       <input type="text" class="form-control" name="scope" id="scope" value="{{ result.scope }}" disabled>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row">
     <label class="control-label col-sm-2" for="redirect_uri">{{ lang.edit.redirect_uri }}</label>
     <div class="col-sm-10">
       <input type="text" class="form-control" name="redirect_uri" id="redirect_uri" value="{{ result.redirect_uri }}">
     </div>
   </div>
-  <div class="form-group">
+  <div class="row">
     <div class="offset-sm-2 col-sm-10">
       <button class="btn btn-xs-lg d-block d-sm-inline btn-secondary" data-action="edit_selected" data-id="oauth2client" data-item="{{ oauth2client }}" data-api-url='edit/oauth2-client' data-api-attr='{}' href="#">{{ lang.admin.save }}</button>
     </div>
diff --git a/data/web/templates/edit/recipient_map.twig b/data/web/templates/edit/recipient_map.twig
index 87100f42..a3e59214 100644
--- a/data/web/templates/edit/recipient_map.twig
+++ b/data/web/templates/edit/recipient_map.twig
@@ -6,28 +6,28 @@
 <br>
 <form class="form-horizontal" data-id="edit_recipient_map" role="form" method="post">
   <input type="hidden" value="0" name="active">
-  <div class="form-group">
+  <div class="row">
     <label class="control-label col-sm-2" for="recipient_map_new">{{ lang.mailbox.recipient_map_old }}</label>
     <div class="col-sm-10">
       <input value="{{ result.recipient_map_old }}" type="text" class="form-control" name="recipient_map_old" id="recipient_map_old">
       <small>{{ lang.mailbox.recipient_map_old_info }}</small>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row">
     <label class="control-label col-sm-2" for="recipient_map_new">{{ lang.mailbox.recipient_map_new }}</label>
     <div class="col-sm-10">
       <input value="{{ result.recipient_map_new }}" type="text" class="form-control" name="recipient_map_new" id="recipient_map_new">
       <small>{{ lang.mailbox.recipient_map_new_info }}</small>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row">
     <div class="offset-sm-2 col-sm-10">
       <div class="checkbox">
         <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row">
     <div class="offset-sm-2 col-sm-10">
       <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="edit_recipient_map" data-item="{{ map }}" data-api-url='edit/recipient_map' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
     </div>
diff --git a/data/web/templates/edit/relayhost.twig b/data/web/templates/edit/relayhost.twig
index d248c720..b7b190fd 100644
--- a/data/web/templates/edit/relayhost.twig
+++ b/data/web/templates/edit/relayhost.twig
@@ -5,33 +5,33 @@
 <h4>{{ lang.edit.resource }}</h4>
 <form class="form-horizontal" role="form" method="post" data-id="editrelayhost">
   <input type="hidden" value="0" name="active">
-  <div class="form-group">
+  <div class="row">
     <label class="control-label col-sm-2" for="hostname">{{ lang.add.hostname }}</label>
     <div class="col-sm-10">
       <input type="text" class="form-control" name="hostname" value="{{ result.hostname }}" required>
       <p class="text-muted">{{ lang.add.relayhost_wrapped_tls_info|raw }}</p>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row">
     <label class="control-label col-sm-2" for="username">{{ lang.add.username }}</label>
     <div class="col-sm-10">
       <input type="text" class="form-control" name="username" value="{{ result.username }}">
     </div>
   </div>
-  <div class="form-group">
+  <div class="row">
     <label class="control-label col-sm-2" for="password">{{ lang.add.password }}</label>
     <div class="col-sm-10">
       <input type="text" data-hibp="true" class="form-control" name="password" value="{{ result.password }}">
     </div>
   </div>
-  <div class="form-group">
+  <div class="row">
     <div class="offset-sm-2 col-sm-10">
       <div class="checkbox">
         <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row">
     <div class="offset-sm-2 col-sm-10">
       <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="editrelayhost" data-item="{{ result.id }}" data-api-url='edit/relayhost' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
     </div>
diff --git a/data/web/templates/edit/resource.twig b/data/web/templates/edit/resource.twig
index a40f6d17..effdc692 100644
--- a/data/web/templates/edit/resource.twig
+++ b/data/web/templates/edit/resource.twig
@@ -5,13 +5,13 @@
 <h4>{{ lang.edit.resource }}</h4>
 <form class="form-horizontal" role="form" method="post" data-id="editresource">
   <input type="hidden" value="0" name="active">
-  <div class="form-group">
+  <div class="row">
     <label class="control-label col-sm-2" for="description">{{ lang.add.description }}</label>
     <div class="col-sm-10">
       <input type="text" class="form-control" name="description" value="{{ result.description }}" required>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row">
     <label class="control-label col-sm-2" for="domain">{{ lang.edit.kind }}</label>
     <div class="col-sm-10">
       <select name="kind" title="{{ lang.edit.select }}" required>
@@ -21,7 +21,7 @@
       </select>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row">
     <label class="control-label col-sm-2" for="multiple_bookings_select">{{ lang.add.multiple_bookings }}</label>
     <div class="col-sm-10">
       <select name="multiple_bookings_select" id="editSelectMultipleBookings" title="{{ lang.add.select }}" required>
@@ -36,14 +36,14 @@
       <input type="hidden" name="multiple_bookings" id="multiple_bookings">
     </div>
   </div>
-  <div class="form-group">
+  <div class="row">
     <div class="offset-sm-2 col-sm-10">
       <div class="checkbox">
         <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row">
     <div class="offset-sm-2 col-sm-10">
       <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="editresource" data-item="{{ result.name }}" data-api-url='edit/resource' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
     </div>
diff --git a/data/web/templates/edit/syncjob.twig b/data/web/templates/edit/syncjob.twig
index 000b6780..570b3873 100644
--- a/data/web/templates/edit/syncjob.twig
+++ b/data/web/templates/edit/syncjob.twig
@@ -11,31 +11,31 @@
     <input type="hidden" value="0" name="skipcrossduplicates">
     <input type="hidden" value="0" name="active">
     <input type="hidden" value="0" name="subscribeall">
-    <div class="form-group">
+    <div class="row">
       <label class="control-label col-sm-2" for="host1">{{ lang.edit.hostname }}</label>
       <div class="col-sm-10">
         <input type="text" class="form-control" name="host1" id="host1" value="{{ result.host1 }}">
       </div>
     </div>
-    <div class="form-group">
+    <div class="row">
       <label class="control-label col-sm-2" for="port1">Port</label>
       <div class="col-sm-10">
         <input type="number" class="form-control" name="port1" id="port1" min="1" max="65535" value="{{ result.port1 }}">
       </div>
     </div>
-    <div class="form-group">
+    <div class="row">
       <label class="control-label col-sm-2" for="user1">{{ lang.edit.username }}</label>
       <div class="col-sm-10">
         <input type="text" class="form-control" name="user1" id="user1" value="{{ result.user1 }}">
       </div>
     </div>
-    <div class="form-group">
+    <div class="row">
       <label class="control-label col-sm-2" for="password1">{{ lang.edit.password }}</label>
       <div class="col-sm-10">
         <input type="password" class="form-control" name="password1" id="password1" value="{{ result.password1 }}">
       </div>
     </div>
-    <div class="form-group">
+    <div class="row">
       <label class="control-label col-sm-2" for="enc1">{{ lang.edit.encryption }}</label>
       <div class="col-sm-10">
         <select id="enc1" name="enc1">
@@ -45,110 +45,110 @@
         </select>
       </div>
     </div>
-    <div class="form-group">
+    <div class="row">
       <label class="control-label col-sm-2" for="mins_interval">{{ lang.edit.mins_interval }}</label>
       <div class="col-sm-10">
         <input type="number" class="form-control" name="mins_interval" min="1" max="43800" value="{{ result.mins_interval }}" required>
         <small class="text-muted">1-43800</small>
       </div>
     </div>
-    <div class="form-group">
+    <div class="row">
       <label class="control-label col-sm-2" for="subfolder2">{{ lang.edit.subfolder2|raw }}</label>
       <div class="col-sm-10">
         <input type="text" class="form-control" name="subfolder2" id="subfolder2" value="{{ result.subfolder2 }}">
       </div>
     </div>
-    <div class="form-group">
+    <div class="row">
       <label class="control-label col-sm-2" for="maxage">{{ lang.edit.maxage|raw }}</label>
       <div class="col-sm-10">
         <input type="number" class="form-control" name="maxage" id="maxage" min="0" max="32000" value="{{ result.maxage }}">
         <small class="text-muted">0-32000</small>
       </div>
     </div>
-    <div class="form-group">
+    <div class="row">
       <label class="control-label col-sm-2" for="maxbytespersecond">{{ lang.edit.maxbytespersecond|raw }}</label>
       <div class="col-sm-10">
         <input type="number" class="form-control" name="maxbytespersecond" id="maxbytespersecond" min="0" max="125000000" value="{{ result.maxbytespersecond }}">
         <small class="text-muted">0-125000000</small>
       </div>
     </div>
-    <div class="form-group">
+    <div class="row">
       <label class="control-label col-sm-2" for="timeout1">{{ lang.add.timeout1 }}</label>
       <div class="col-sm-10">
         <input type="number" class="form-control" name="timeout1" id="timeout1" min="1" max="32000" value="{{ result.timeout1 }}">
         <small class="text-muted">1-32000</small>
       </div>
     </div>
-    <div class="form-group">
+    <div class="row">
       <label class="control-label col-sm-2" for="timeout2">{{ lang.add.timeout2 }}</label>
       <div class="col-sm-10">
         <input type="number" class="form-control" name="timeout2" id="timeout2" min="1" max="32000" value="{{ result.timeout2 }}">
         <small class="text-muted">1-32000</small>
       </div>
     </div>
-    <div class="form-group">
+    <div class="row">
       <label class="control-label col-sm-2" for="exclude">{{ lang.edit.exclude }}</label>
       <div class="col-sm-10">
         <input type="text" class="form-control" name="exclude" id="exclude" value="{{ result.exclude }}">
       </div>
     </div>
-    <div class="form-group">
+    <div class="row">
       <label class="control-label col-sm-2" for="custom_params">{{ lang.add.custom_params }}</label>
       <div class="col-sm-10">
         <input type="text" class="form-control" name="custom_params" id="custom_params" value="{{ result.custom_params }}" placeholder="--dry --some-param=xy --other-param=yx">
         <small class="text-muted">{{ lang.add.custom_params_hint }}</small>
       </div>
     </div>
-    <div class="form-group">
+    <div class="row">
       <div class="offset-sm-2 col-sm-10">
         <div class="checkbox">
           <label><input type="checkbox" value="1" name="delete2duplicates"{% if result.delete2duplicates == '1' %} checked{% endif %}> {{ lang.edit.delete2duplicates }} (--delete2duplicates)</label>
         </div>
       </div>
     </div>
-    <div class="form-group">
+    <div class="row">
       <div class="offset-sm-2 col-sm-10">
         <div class="checkbox">
           <label><input type="checkbox" value="1" name="delete1"{% if result.delete1 == '1' %} checked{% endif %}> {{ lang.edit.delete1 }} (--delete1)</label>
         </div>
       </div>
     </div>
-    <div class="form-group">
+    <div class="row">
       <div class="offset-sm-2 col-sm-10">
         <div class="checkbox">
           <label><input type="checkbox" value="1" name="delete2"{% if result.delete2 == '1' %} checked{% endif %}> {{ lang.edit.delete2 }} (--delete2)</label>
         </div>
       </div>
     </div>
-    <div class="form-group">
+    <div class="row">
       <div class="offset-sm-2 col-sm-10">
         <div class="checkbox">
           <label><input type="checkbox" value="1" name="automap"{% if result.automap == '1' %} checked{% endif %}> {{ lang.edit.automap }} (--automap)</label>
         </div>
       </div>
     </div>
-    <div class="form-group">
+    <div class="row">
       <div class="offset-sm-2 col-sm-10">
         <div class="checkbox">
           <label><input type="checkbox" value="1" name="skipcrossduplicates"{% if result.skipcrossduplicates == '1' %} checked{% endif %}> {{ lang.edit.skipcrossduplicates }} (--skipcrossduplicates)</label>
         </div>
       </div>
     </div>
-    <div class="form-group">
+    <div class="row">
       <div class="offset-sm-2 col-sm-10">
         <div class="checkbox">
           <label><input type="checkbox" value="1" name="subscribeall"{% if result.subscribeall == '1' %} checked{% endif %}> {{ lang.add.subscribeall }} (--subscribeall)</label>
         </div>
       </div>
     </div>
-    <div class="form-group">
+    <div class="row">
       <div class="offset-sm-2 col-sm-10">
         <div class="checkbox">
           <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
         </div>
       </div>
     </div>
-    <div class="form-group">
+    <div class="row">
       <div class="offset-sm-2 col-sm-10">
         <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="editsyncjob" data-item="{{ result.id }}" data-api-url='edit/syncjob' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
       </div>
diff --git a/data/web/templates/edit/tls_policy_map.twig b/data/web/templates/edit/tls_policy_map.twig
index 9855552c..a99cdcd1 100644
--- a/data/web/templates/edit/tls_policy_map.twig
+++ b/data/web/templates/edit/tls_policy_map.twig
@@ -6,14 +6,14 @@
 <br>
 <form class="form-horizontal" data-id="edit_tls_policy_maps" role="form" method="post">
   <input type="hidden" value="0" name="active">
-  <div class="form-group">
+  <div class="row">
     <label class="control-label col-sm-2" for="dest">{{ lang.mailbox.tls_map_dest }}</label>
     <div class="col-sm-10">
       <input value="{{ result.dest }}" type="text" class="form-control" name="dest" id="dest">
       <small>{{ lang.mailbox.tls_map_dest_info }}</small>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row">
     <label class="control-label col-sm-2" for="policy">{{ lang.mailbox.tls_map_policy }}</label>
     <div class="col-sm-10">
       <select class="full-width-select" name="policy" required>
@@ -23,21 +23,21 @@
       </select>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row">
     <label class="control-label col-sm-2" for="parameters">{{ lang.mailbox.tls_map_parameters }}</label>
     <div class="col-sm-10">
       <input value="{{ result.parameters }}" type="text" class="form-control" name="parameters" id="parameters">
       <small>{{ lang.mailbox.tls_map_parameters_info }}</small>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row">
     <div class="offset-sm-2 col-sm-10">
       <div class="checkbox">
         <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row">
     <div class="offset-sm-2 col-sm-10">
       <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="edit_tls_policy_maps" data-item="{{ map }}" data-api-url='edit/tls-policy-map' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
     </div>
diff --git a/data/web/templates/edit/transport.twig b/data/web/templates/edit/transport.twig
index 971cc210..e8fe347f 100644
--- a/data/web/templates/edit/transport.twig
+++ b/data/web/templates/edit/transport.twig
@@ -6,45 +6,45 @@
 <form class="form-horizontal" role="form" method="post" data-id="edittransport">
   <input type="hidden" value="0" name="active">
   <input type="hidden" value="0" name="is_mx_based">
-  <div class="form-group">
+  <div class="row">
     <label class="control-label col-sm-2" for="destination">{{ lang.add.destination }}</label>
     <div class="col-sm-10">
       <input type="text" class="form-control" name="destination" value="{{ result.destination }}" required>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row">
     <label class="control-label col-sm-2" for="nexthop">{{ lang.edit.nexthop }}</label>
     <div class="col-sm-10">
       <input type="text" class="form-control" name="nexthop" placeholder='[0.0.0.0], [0.0.0.0]:25, host:25, host, [host]:25' value="{{ result.nexthop }}" required>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row">
     <label class="control-label col-sm-2" for="username">{{ lang.add.username }}</label>
     <div class="col-sm-10">
       <input type="text" class="form-control" name="username" value="{{ result.username }}">
     </div>
   </div>
-  <div class="form-group">
+  <div class="row">
     <label class="control-label col-sm-2" for="password">{{ lang.add.password }}</label>
     <div class="col-sm-10">
       <input type="text" data-hibp="true" class="form-control" name="password" value="{{ result.password }}">
     </div>
   </div>
-  <div class="form-group">
+  <div class="row">
     <div class="offset-sm-2 col-sm-10">
       <div class="checkbox">
         <label><input type="checkbox" value="1" name="is_mx_based"{% if result.is_mx_based == '1' %} checked{% endif %}> {{ lang.edit.lookup_mx|raw }}</label>
       </div>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row">
     <div class="offset-sm-2 col-sm-10">
       <div class="checkbox">
         <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row">
     <div class="offset-sm-2 col-sm-10">
       <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="edittransport" data-item="{{ result.id }}" data-api-url='edit/transport' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
     </div>
diff --git a/data/web/templates/mailbox/tab-filters.twig b/data/web/templates/mailbox/tab-filters.twig
index 4ea2b4f2..88b60d93 100644
--- a/data/web/templates/mailbox/tab-filters.twig
+++ b/data/web/templates/mailbox/tab-filters.twig
@@ -39,12 +39,12 @@
       <div class="col-lg-6">
         <h5>Global Prefilter</h5>
         <form class="form-horizontal" data-cached-form="false" role="form" data-id="add_prefilter">
-          <div class="form-group">
+          <div class="row">
             <div class="col-sm-12">
               <textarea autocorrect="off" spellcheck="false" autocapitalize="none" class="form-control textarea-code script_data" rows="10" name="script_data" required>{{ global_filters.prefilter }}</textarea>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <div class="col-sm-10 add_filter_btns">
               <div class="btn-group">
                 <button class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary validate_sieve" href="#">{{ lang.add.validate }}</button>
@@ -57,12 +57,12 @@
       <div class="col-lg-6">
         <h5>Global Postfilter</h5>
         <form class="form-horizontal" data-cached-form="false" role="form" data-id="add_postfilter">
-          <div class="form-group">
+          <div class="row">
             <div class="col-sm-12">
               <textarea autocorrect="off" spellcheck="false" autocapitalize="none" class="form-control textarea-code script_data" rows="10" name="script_data" required>{{ global_filters.postfilter }}</textarea>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <div class="col-sm-10 add_filter_btns">
               <div class="btn-group">
                 <button class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary validate_sieve" href="#">{{ lang.add.validate }}</button>
diff --git a/data/web/templates/modals/admin.twig b/data/web/templates/modals/admin.twig
index 8badf536..207f46fb 100644
--- a/data/web/templates/modals/admin.twig
+++ b/data/web/templates/modals/admin.twig
@@ -8,26 +8,26 @@
       </div>
       <div class="modal-body">
         <form class="form-horizontal" data-cached-form="true" data-id="rsetting" role="form" method="post">
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="desc">{{ lang.admin.rsetting_desc }}:</label>
             <div class="col-sm-10">
               <input type="text" class="form-control" id="adminRspamdSettingsDesc" name="desc" required>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="content">{{ lang.admin.rsetting_content }}:</label>
             <div class="col-sm-10">
               <textarea class="form-control" id="adminRspamdSettingsContent" name="content" rows="10"></textarea>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <div class="offset-sm-2 col-sm-10">
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="active" checked> {{ lang.admin.active }}</label>
               </div>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <div class="offset-sm-2 col-sm-10">
               <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="add_item" data-id="rsetting" data-api-url='add/rsetting' data-api-attr='{}' href="#"><i class="bi bi-plus-lg"></i> {{ lang.admin.add }}</button>
             </div>
@@ -50,14 +50,14 @@
       </div>
       <div class="modal-body">
         <form class="form-horizontal" data-cached-form="true" data-id="add_domain_admin" role="form" method="post" autocomplete="off">
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="username">{{ lang.admin.username }}:</label>
             <div class="col-sm-10">
               <input type="text" class="form-control" name="username" onkeyup="this.value = this.value.toLowerCase();" required>
               &rdsh; <kbd>a-z - _ .</kbd>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="name">{{ lang.admin.admin_domains }}:</label>
             <div class="col-sm-10">
               <select title="{{ lang.admin.search_domain_da }}" class="full-width-select" name="domains" size="5" multiple>
@@ -67,26 +67,26 @@
               </select>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="password">{{ lang.admin.password }} (<a href="#" class="generate_password">{{ lang.admin.generate }}</a>)</label>
             <div class="col-sm-10">
               <input type="password" class="form-control" data-pwgen-field="true" data-hibp="true" name="password" placeholder="" autocomplete="new-password" required>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="password2">{{ lang.admin.password_repeat }}:</label>
             <div class="col-sm-10">
               <input type="password" class="form-control" data-pwgen-field="true" name="password2" placeholder="" autocomplete="new-password" required>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <div class="offset-sm-2 col-sm-10">
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="active" checked> {{ lang.admin.active }}</label>
               </div>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <div class="offset-sm-2 col-sm-10">
               <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="add_item" data-id="add_domain_admin" data-api-url='add/domain-admin' data-api-attr='{}' href="#"><i class="bi bi-plus-lg"></i> {{ lang.admin.add }}</button>
             </div>
@@ -108,13 +108,13 @@
       <div class="modal-body">
         <form class="form-horizontal" data-cached-form="false" data-id="fido2ChangeFn" role="form" method="post" autocomplete="off">
           <input type="hidden" class="form-control" name="fido2_cid" id="fido2_cid">
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-4" for="fido2_fn">{{ lang.fido2.fn }}:</label>
             <div class="col-sm-8">
               <input type="text" class="form-control" name="fido2_fn">
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <div class="offset-sm-4 col-sm-8">
               <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="fido2ChangeFn" data-item="null" data-api-url='edit/fido2-fn' data-api-attr='{}' href="#">{{ lang.admin.save }}</button>
             </div>
@@ -134,13 +134,13 @@
       </div>
       <div class="modal-body">
         <form class="form-horizontal" data-cached-form="true" data-id="add_oauth2_client" role="form" method="post">
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="redirect_uri">{{ lang.admin.oauth2_redirect_uri }}:</label>
             <div class="col-sm-10">
               <input type="text" class="form-control" name="redirect_uri" required>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <div class="offset-sm-2 col-sm-10">
               <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="add_item" data-id="add_oauth2_client" data-api-url='add/oauth2-client' data-api-attr='{}' href="#"><i class="bi bi-plus-lg"></i> {{ lang.admin.add }}</button>
             </div>
@@ -160,33 +160,33 @@
       </div>
       <div class="modal-body">
         <form class="form-horizontal" data-cached-form="true" data-id="add_admin" role="form" method="post" autocomplete="off">
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="username">{{ lang.admin.username }}:</label>
             <div class="col-sm-10">
               <input type="text" class="form-control" name="username" onkeyup="this.value = this.value.toLowerCase();" required>
               &rdsh; <kbd>a-z - _ .</kbd>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="password">{{ lang.admin.password }} (<a href="#" class="generate_password">{{ lang.admin.generate }}</a>):</label>
             <div class="col-sm-10">
               <input type="password" class="form-control" data-pwgen-field="true" data-hibp="true" name="password" placeholder="" autocomplete="new-password" required>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="password2">{{ lang.admin.password_repeat }}:</label>
             <div class="col-sm-10">
               <input type="password" class="form-control" data-pwgen-field="true" name="password2" placeholder="" autocomplete="new-password" required>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <div class="offset-sm-2 col-sm-10">
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="active" checked> {{ lang.admin.active }}</label>
               </div>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <div class="offset-sm-2 col-sm-10">
               <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="add_item" data-id="add_admin" data-api-url='add/admin' data-api-attr='{}' href="#"><i class="bi bi-plus-lg"></i> {{ lang.admin.add }}</button>
             </div>
@@ -208,20 +208,20 @@
         <form class="form-horizontal" data-cached-form="true" id="test_transport_form" role="form" method="post">
           <input type="hidden" class="form-control" name="transport_id" id="transport_id">
           <input type="hidden" class="form-control" name="transport_type" id="transport_type">
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="mail_from">{{ lang.admin.relay_from }}</label>
             <div class="col-sm-10">
               <input type="text" class="form-control" name="mail_from" placeholder="relay@example.org">
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="mail_rcpt">{{ lang.admin.relay_rcpt }}</label>
             <div class="col-sm-10">
               <input type="text" class="form-control" name="mail_rcpt" placeholder="null@hosted.mailcow.de" value="null@hosted.mailcow.de">
               <p class="text-muted">{{ lang.admin.transport_test_rcpt_info|raw }}</p>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <div class="offset-sm-2 col-sm-10">
               <button class="btn btn-xs-lg d-block d-sm-inline btn-secondary" id="test_transport" href="#">{{ lang.admin.relay_run }}</button>
             </div>
diff --git a/data/web/templates/modals/footer.twig b/data/web/templates/modals/footer.twig
index 2576ef8b..101fb0f2 100644
--- a/data/web/templates/modals/footer.twig
+++ b/data/web/templates/modals/footer.twig
@@ -8,22 +8,22 @@
       </div>
       <div class="modal-body">
         <form role="form" method="post">
-          <div class="form-group">
+          <div>
             <input type="text" class="form-control" name="key_id" placeholder="{{ lang.tfa.key_id }}" autocomplete="off" required>
           </div>
           <hr>
           <p class="text-muted">{{ lang.tfa.api_register|format(ui_texts.main_name)|raw }}</p>
-          <div class="form-group">
+          <div>
             <input type="text" class="form-control" name="yubico_id" placeholder="Yubico API ID" autocomplete="off" required>
           </div>
-          <div class="form-group">
+          <div>
             <input type="text" class="form-control" name="yubico_key" placeholder="Yubico API Key" autocomplete="off" required>
           </div>
           <hr>
-          <div class="form-group">
+          <div>
             <input type="password" class="form-control" name="confirm_password" placeholder="{{ lang.user.password_now }}" autocomplete="off" required>
           </div>
-          <div class="form-group">
+          <div>
             <div class="input-group">
               <span class="input-group-text" id="yubi-addon"><img alt="Yubicon Icon" src="/img/yubi.ico"></span>
               <input type="text" name="otp_token" class="form-control" placeholder="Touch Yubikey" aria-describedby="yubi-addon">
@@ -46,10 +46,10 @@
       </div>
       <div class="modal-body">
         <form role="form" method="post" id="webauthn_reg_form">
-          <div class="form-group">
+          <div>
             <input type="text" class="form-control" name="key_id" placeholder="{{ lang.tfa.key_id }}" autocomplete="off" required>
           </div>
-          <div class="form-group">
+          <div>
             <input type="password" class="form-control" name="confirm_password" placeholder="{{ lang.user.password_now }}" autocomplete="off" required>
           </div>
           <hr>
@@ -82,10 +82,10 @@
       </div>
       <div class="modal-body">
         <form role="form" method="post">
-          <div class="form-group">
+          <div>
             <input type="text" class="form-control" name="key_id" placeholder="{{ lang.tfa.key_id_totp }}" autocomplete="off" required>
           </div>
-          <div class="form-group">
+          <div>
             <input type="password" class="form-control" name="confirm_password" placeholder="{{ lang.user.password_now }}" autocomplete="off" required>
           </div>
           <hr>
@@ -144,7 +144,7 @@
       <div class="modal-body">
         {% if pending_tfa_method == 'yubi_otp' %}
         <form role="form" method="post">
-          <div class="form-group">
+          <div>
             <div class="input-group">
               <span class="input-group-text" id="yubi-addon"><img alt="Yubicon Icon" src="/img/yubi.ico"></span>
               <input type="text" name="token" class="form-control" autocomplete="off" placeholder="Touch Yubikey" aria-describedby="yubi-addon">
@@ -156,7 +156,7 @@
         {% endif %}
         {% if pending_tfa_method == 'totp' %}
         <form role="form" method="post">
-          <div class="form-group">
+          <div>
             <div class="input-group">
               <span class="input-group-text" id="tfa-addon"><i class="bi bi-shield-lock-fill"></i></span>
               <input type="number" min="000000" max="999999" name="token" class="form-control" placeholder="123456" autocomplete="one-time-code" aria-describedby="tfa-addon">
diff --git a/data/web/templates/modals/mailbox.twig b/data/web/templates/modals/mailbox.twig
index d07eef68..82e42426 100644
--- a/data/web/templates/modals/mailbox.twig
+++ b/data/web/templates/modals/mailbox.twig
@@ -8,13 +8,13 @@
       </div>
       <div class="modal-body">
         <form class="form-horizontal" data-cached-form="true" data-id="add_mailbox" role="form" autocomplete="off">
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="local_part">{{ lang.add.mailbox_username }}</label>
             <div class="col-sm-10">
               <input type="text" pattern="[A-Za-z0-9\.!#$%&'*+/=?^_`{|}~-]+" autocorrect="off" autocapitalize="none" class="form-control" name="local_part" required>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="domain">{{ lang.add.domain }}</label>
             <div class="col-sm-10">
               <select class="full-width-select" data-live-search="true" id="addSelectDomain" name="domain" required>
@@ -24,13 +24,13 @@
               </select>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="name">{{ lang.add.full_name }}</label>
             <div class="col-sm-10">
               <input type="text" class="form-control" name="name">
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="addInputQuota">{{ lang.add.quota_mb }}
               <br /><span id="quotaBadge" class="badge">max. - MiB</span>
             </label>
@@ -40,19 +40,19 @@
               <div class="badge fs-5 bg-warning addInputQuotaExhausted" style="display:none;">{{ lang.warning.quota_exceeded_scope }}</div>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="password">{{ lang.add.password }} (<a href="#" class="generate_password">{{ lang.add.generate }}</a>)</label>
             <div class="col-sm-10">
               <input type="password" data-pwgen-field="true" data-hibp="true" class="form-control" name="password" placeholder="" autocomplete="new-password" required>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="password2">{{ lang.add.password_repeat }}</label>
             <div class="col-sm-10">
               <input type="password" data-pwgen-field="true" class="form-control" name="password2" placeholder="" autocomplete="new-password" required>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <div class="offset-sm-2 col-sm-10">
               <select name="active" class="form-control">
                 <option value="1" selected>{{ lang.add.active }}</option>
@@ -62,7 +62,7 @@
             </div>
           </div>
           <hr>
-          <div class="form-group">
+          <div class="row">
             <div class="offset-sm-2 col-sm-10">
               <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="add_item" data-id="add_mailbox" data-api-url='add/mailbox' data-api-attr='{}' href="#">{{ lang.admin.add }}</button>
             </div>
@@ -82,50 +82,50 @@
       </div>
       <div class="modal-body">
         <form class="form-horizontal" data-cached-form="true" data-id="add_domain" role="form">
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="domain">{{ lang.add.domain }}</label>
             <div class="col-sm-10">
               <input type="text" autocorrect="off" autocapitalize="none" class="form-control" name="domain" required>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="description">{{ lang.add.description }}</label>
             <div class="col-sm-10">
               <input type="text" class="form-control" name="description">
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="aliases">{{ lang.add.max_aliases }}</label>
             <div class="col-sm-10">
               <input type="number" class="form-control" name="aliases" value="400" required>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="mailboxes">{{ lang.add.max_mailboxes }}</label>
             <div class="col-sm-10">
               <input type="number" class="form-control" name="mailboxes" value="10" required>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="defquota">{{ lang.add.mailbox_quota_def }}</label>
             <div class="col-sm-10">
               <input type="number" class="form-control" name="defquota" value="3072" required>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="maxquota">{{ lang.add.mailbox_quota_m }}</label>
             <div class="col-sm-10">
               <input type="number" class="form-control" name="maxquota" value="10240" required>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="quota">{{ lang.add.domain_quota_m }}</label>
             <div class="col-sm-10">
               <input type="number" class="form-control" name="quota" value="10240" required>
             </div>
           </div>
           {% if not skip_sogo %}
-          <div class="form-group">
+          <div class="row">
             <div class="offset-sm-2 col-sm-10">
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="gal" checked> {{ lang.edit.gal }}</label>
@@ -134,7 +134,7 @@
             </div>
           </div>
           {% endif %}
-          <div class="form-group">
+          <div class="row">
             <div class="offset-sm-2 col-sm-10">
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="active" checked> {{ lang.add.active }}</label>
@@ -142,7 +142,7 @@
             </div>
           </div>
           <hr>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="rl_frame">{{ lang.acl.ratelimit }}</label>
             <div class="col-sm-7">
               <input name="rl_value" type="number" class="form-control" placeholder="{{ lang.ratelimit.disabled }}">
@@ -154,13 +154,13 @@
             </div>
           </div>
           <hr>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="dkim_selector">{{ lang.admin.dkim_domains_selector }}</label>
             <div class="col-sm-10">
               <input class="form-control" id="dkim_selector" name="dkim_selector" value="dkim">
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="key_size">{{ lang.admin.dkim_key_length }}</label>
             <div class="col-sm-10">
               <select data-style="btn btn-secondary btn-sm" class="form-control" id="key_size" name="key_size">
@@ -170,7 +170,7 @@
             </div>
           </div>
           <hr>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2">{{ lang.add.backup_mx_options }}</label>
             <div class="col-sm-10">
               <div class="checkbox">
@@ -185,7 +185,7 @@
             </div>
           </div>
           <hr>
-          <div class="form-group">
+          <div class="row">
             <div class="offset-sm-2 col-sm-10 btn-group">
               {% if not skip_sogo %}
               <button class="btn btn-xs-lg btn-xs-half d-block d-sm-inline btn-secondary" data-action="add_item" data-id="add_domain" data-api-url='add/domain' data-api-attr='{}' href="#">{{ lang.add.add_domain_only }}</button>
@@ -214,13 +214,13 @@
       </div>
       <div class="modal-body">
         <form class="form-horizontal" data-cached-form="true" role="form" data-id="add_resource">
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="description">{{ lang.add.description }}</label>
             <div class="col-sm-10">
               <input type="text" class="form-control" name="description" required>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="domain">{{ lang.add.domain }}</label>
             <div class="col-sm-10">
               <select data-live-search="true" name="domain" title="{{ lang.add.select }}" required>
@@ -230,7 +230,7 @@
               </select>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="domain">{{ lang.add.kind }}</label>
             <div class="col-sm-10">
               <select name="kind" title="{{ lang.add.select }}" required>
@@ -240,7 +240,7 @@
               </select>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="multiple_bookings_select">{{ lang.add.multiple_bookings }}</label>
             <div class="col-sm-10">
               <select name="multiple_bookings_select" id="multiple_bookings_select" title="{{ lang.add.select }}" required>
@@ -255,14 +255,14 @@
               <input type="hidden" name="multiple_bookings" id="multiple_bookings">
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <div class="offset-sm-2 col-sm-10">
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="active" checked> {{ lang.add.active }}</label>
               </div>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <div class="offset-sm-2 col-sm-10">
               <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="add_item" data-id="add_resource" data-api-url='add/resource' data-api-attr='{}' href="#">{{ lang.admin.add }}</button>
             </div>
@@ -283,14 +283,14 @@
       <div class="modal-body">
         <form class="form-horizontal" data-cached-form="true" role="form" data-id="add_alias">
           <input type="hidden" value="0" name="active">
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="address">{{ lang.add.alias_address }}</label>
             <div class="col-sm-10">
               <textarea autocorrect="off" autocapitalize="none" class="form-control" rows="5" name="address" id="address" required></textarea>
               <p>{{ lang.add.alias_address_info|raw }}</p>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="goto">{{ lang.add.target_address }}</label>
             <div class="col-sm-10">
               <textarea id="textarea_alias_goto" autocorrect="off" autocapitalize="none" class="form-control" rows="5" id="goto" name="goto" required></textarea>
@@ -313,14 +313,14 @@
               {% endif %}
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <div class="offset-sm-2 col-sm-10">
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="active" checked> {{ lang.add.active }}</label>
               </div>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <div class="offset-sm-2 col-sm-10">
               <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="add_item" data-id="add_alias" data-api-url='add/alias' data-api-attr='{}' href="#">{{ lang.admin.add }}</button>
             </div>
@@ -341,14 +341,14 @@
       <div class="modal-body">
         <form class="form-horizontal" data-cached-form="true" role="form" data-id="add_alias_domain">
           <input type="hidden" value="0" name="active">
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="alias_domain">{{ lang.add.alias_domain }}</label>
             <div class="col-sm-10">
               <textarea autocorrect="off" autocapitalize="none" class="form-control" rows="5" name="alias_domain" id="alias_domain" required></textarea>
               <p>{{ lang.add.alias_domain_info|raw }}</p>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="target_domain">{{ lang.add.target_domain }}</label>
             <div class="col-sm-10">
               <select data-live-search="true" name="target_domain" title="{{ lang.add.select }}" required>
@@ -358,7 +358,7 @@
               </select>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <div class="offset-sm-2 col-sm-10">
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="active" checked> {{ lang.add.active }}</label>
@@ -366,7 +366,7 @@
             </div>
           </div>
           <hr>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="rl_frame">{{ lang.acl.ratelimit }}</label>
             <div class="col-sm-7">
               <input name="rl_value" type="number" class="form-control" placeholder="{{ lang.ratelimit.disabled }}">
@@ -378,13 +378,13 @@
             </div>
           </div>
           <hr>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="dkim_selector2">{{ lang.admin.dkim_domains_selector }}</label>
             <div class="col-sm-10">
               <input class="form-control" id="dkim_selector2" name="dkim_selector" value="dkim">
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="key_size2">{{ lang.admin.dkim_key_length }}</label>
             <div class="col-sm-10">
               <select data-style="btn btn-secondary btn-sm" class="form-control" id="key_size2" name="key_size">
@@ -394,7 +394,7 @@
             </div>
           </div>
           <hr>
-          <div class="form-group">
+          <div class="row">
             <div class="offset-sm-2 col-sm-10">
               <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="add_item" data-id="add_alias_domain" data-api-url='add/alias-domain' data-api-attr='{}' href="#">{{ lang.admin.add }}</button>
             </div>
@@ -415,7 +415,7 @@
       <div class="modal-body">
         <p class="text-muted">{{ lang.add.syncjob_hint }}</p>
         <form class="form-horizontal" data-cached-form="true" role="form" data-id="add_syncjob">
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="username">{{ lang.add.username }}</label>
             <div class="col-sm-10">
               <select data-live-search="true" name="username" required>
@@ -425,32 +425,32 @@
               </select>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="host1">{{ lang.add.hostname }}</label>
             <div class="col-sm-10">
               <input type="text" class="form-control" name="host1" required>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="port1">{{ lang.add.port }}</label>
             <div class="col-sm-10">
               <input type="number" class="form-control" name="port1" min="1" max="65535" value="143" required>
               <small class="text-muted">1-65535</small>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="user1">{{ lang.add.username }}</label>
             <div class="col-sm-10">
               <input type="text" class="form-control" name="user1" required>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="password1">{{ lang.add.password }}</label>
             <div class="col-sm-10">
               <input type="password" class="form-control" name="password1" required>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="enc1">{{ lang.add.enc_method }}</label>
             <div class="col-sm-10">
               <select name="enc1" title="{{ lang.add.select }}" required>
@@ -460,110 +460,110 @@
               </select>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="mins_interval">{{ lang.add.mins_interval }}</label>
             <div class="col-sm-10">
               <input type="number" class="form-control" name="mins_interval" min="1" max="43800" value="20" required>
               <small class="text-muted">1-43800</small>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="subfolder2">{{ lang.edit.subfolder2|raw }}</label>
             <div class="col-sm-10">
               <input type="text" class="form-control" name="subfolder2" value="">
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="maxage">{{ lang.edit.maxage|raw }}</label>
             <div class="col-sm-10">
               <input type="number" class="form-control" name="maxage" min="0" max="32000" value="0">
               <small class="text-muted">0-32000</small>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="maxbytespersecond">{{ lang.edit.maxbytespersecond|raw }}</label>
             <div class="col-sm-10">
               <input type="number" class="form-control" name="maxbytespersecond" min="0" max="125000000" value="0">
               <small class="text-muted">0-125000000</small>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="timeout1">{{ lang.edit.timeout1 }}</label>
             <div class="col-sm-10">
               <input type="number" class="form-control" name="timeout1" min="1" max="32000" value="600">
               <small class="text-muted">1-32000</small>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="timeout2">{{ lang.edit.timeout2 }}</label>
             <div class="col-sm-10">
               <input type="number" class="form-control" name="timeout2" min="1" max="32000" value="600">
               <small class="text-muted">1-32000</small>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="exclude">{{ lang.add.exclude }}</label>
             <div class="col-sm-10">
               <input type="text" class="form-control" name="exclude" value="(?i)spam|(?i)junk">
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="custom_params">{{ lang.add.custom_params }}</label>
             <div class="col-sm-10">
               <input type="text" class="form-control" name="custom_params" placeholder="--dry --some-param=xy --other-param=yx">
               <small class="text-muted">{{ lang.add.custom_params_hint }}</small>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <div class="offset-sm-2 col-sm-10">
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="delete2duplicates" checked> {{ lang.add.delete2duplicates }} (--delete2duplicates)</label>
               </div>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <div class="offset-sm-2 col-sm-10">
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="delete1"> {{ lang.add.delete1 }} (--delete1)</label>
               </div>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <div class="offset-sm-2 col-sm-10">
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="delete2"> {{ lang.add.delete2 }} (--delete2)</label>
               </div>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <div class="offset-sm-2 col-sm-10">
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="automap" checked> {{ lang.add.automap }} (--automap)</label>
               </div>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <div class="offset-sm-2 col-sm-10">
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="skipcrossduplicates"> {{ lang.add.skipcrossduplicates }} (--skipcrossduplicates)</label>
               </div>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <div class="offset-sm-2 col-sm-10">
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="subscribeall" checked> {{ lang.add.subscribeall }} (--subscribeall)</label>
               </div>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <div class="offset-sm-2 col-sm-10">
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="active" checked> {{ lang.add.active }}</label>
               </div>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <div class="offset-sm-2 col-sm-10">
               <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="add_item" data-id="add_syncjob" data-api-url='add/syncjob' data-api-attr='{}' href="#">{{ lang.admin.add }}</button>
             </div>
@@ -583,7 +583,7 @@
       </div>
       <div class="modal-body">
         <form class="form-horizontal" data-cached-form="true" role="form" data-id="add_filter">
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="username">{{ lang.add.username }}</label>
             <div class="col-sm-10">
               <select data-live-search="true" name="username" required>
@@ -593,7 +593,7 @@
               </select>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="filter_type">{{ lang.add.sieve_type }}</label>
             <div class="col-sm-10">
               <select id="addFilterType" name="filter_type" required>
@@ -602,19 +602,19 @@
               </select>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="script_desc">{{ lang.add.sieve_desc }}</label>
             <div class="col-sm-10">
               <input type="text" class="form-control" id="script_desc" name="script_desc" required maxlength="255">
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="script_data">Script:</label>
             <div class="col-sm-10">
               <textarea autocorrect="off" spellcheck="false" autocapitalize="none" class="form-control textarea-code script_data" rows="20" name="script_data" required></textarea>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <div class="offset-sm-2 col-sm-10">
               <p class="text-muted">{{ lang.add.activate_filter_warn }}</p>
               <div class="checkbox">
@@ -622,7 +622,7 @@
               </div>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <div class="offset-sm-2 col-sm-10 add_filter_btns btn-group">
               <button class="btn btn-xs-lg btn-xs-half d-block d-sm-inline btn-secondary validate_sieve" href="#">{{ lang.add.validate }}</button>
               <button class="btn btn-xs-lg btn-xs-half d-block d-sm-inline btn-success add_sieve_script" data-action="add_item" data-id="add_filter" data-api-url='add/filter' data-api-attr='{}' href="#" disabled>{{ lang.admin.add }}</button>
@@ -645,7 +645,7 @@
       </div>
       <div class="modal-body">
         <form class="form-horizontal" data-cached-form="true" role="form" data-id="add_bcc">
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="local_dest">{{ lang.mailbox.bcc_local_dest }}</label>
             <div class="col-sm-10">
               <select id="bcc-local-dest" data-live-search="true" data-size="20" name="local_dest" required>
@@ -653,7 +653,7 @@
               </select>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="type">{{ lang.mailbox.bcc_map_type }}</label>
             <div class="col-sm-10">
               <select name="type" required>
@@ -662,21 +662,21 @@
               </select>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="bcc_dest">{{ lang.mailbox.bcc_destination }}</label>
             <div class="col-sm-10">
               <input type="text" class="form-control" name="bcc_dest">
               <small>{{ lang.add.bcc_dest_format|raw }}</small>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <div class="offset-sm-2 col-sm-10">
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="active" checked> {{ lang.add.active }}</label>
               </div>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <div class="offset-sm-2 col-sm-10">
               <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="add_item" data-id="add_bcc" data-api-url='add/bcc' data-api-attr='{}' href="#">{{ lang.admin.add }}</button>
             </div>
@@ -696,28 +696,28 @@
       </div>
       <div class="modal-body">
         <form class="form-horizontal" data-cached-form="true" role="form" data-id="add_recipient_map">
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="recipient_map_old">{{ lang.mailbox.recipient_map_old }}</label>
             <div class="col-sm-10">
               <input type="text" class="form-control" name="recipient_map_old">
               <small>{{ lang.mailbox.recipient_map_old_info }}</small>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="recipient_map_new">{{ lang.mailbox.recipient_map_new }}</label>
             <div class="col-sm-10">
               <input type="text" class="form-control" name="recipient_map_new">
               <small>{{ lang.mailbox.recipient_map_new_info }}</small>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <div class="offset-sm-2 col-sm-10">
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="active" checked> {{ lang.add.active }}</label>
               </div>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <div class="offset-sm-2 col-sm-10">
               <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="add_item" data-id="add_recipient_map" data-api-url='add/recipient_map' data-api-attr='{}' href="#">{{ lang.admin.add }}</button>
             </div>
@@ -737,14 +737,14 @@
       </div>
       <div class="modal-body">
         <form class="form-horizontal" data-cached-form="true" role="form" data-id="add_tls_policy_map">
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="dest">{{ lang.mailbox.tls_map_dest }}</label>
             <div class="col-sm-10">
               <input type="text" class="form-control" name="dest">
               <small>{{ lang.mailbox.tls_map_dest_info }}</small>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="policy">{{ lang.mailbox.tls_map_policy }}</label>
             <div class="col-sm-10">
               <select class="full-width-select" name="policy" required>
@@ -759,21 +759,21 @@
               </select>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="parameters">{{ lang.mailbox.tls_map_parameters }}</label>
             <div class="col-sm-10">
               <input type="text" class="form-control" name="parameters">
               <small>{{ lang.mailbox.tls_map_parameters_info }}</small>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <div class="offset-sm-2 col-sm-10">
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="active" checked> {{ lang.add.active }}</label>
               </div>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <div class="offset-sm-2 col-sm-10">
               <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="add_item" data-id="add_tls_policy_map" data-api-url='add/tls-policy-map' data-api-attr='{}' href="#">{{ lang.admin.add }}</button>
             </div>
diff --git a/data/web/templates/modals/quarantine.twig b/data/web/templates/modals/quarantine.twig
index 8d4b75d3..4721dcc8 100644
--- a/data/web/templates/modals/quarantine.twig
+++ b/data/web/templates/modals/quarantine.twig
@@ -7,42 +7,42 @@
       </div>
       <div class="modal-body">
         <div id="qid_error" style="display:none" class="alert alert-danger"></div>
-        <div class="form-group">
+        <div>
           <label for="qid_detail_symbols"><h4>{{ lang.quarantine.rspamd_result }}:</h4></label>
           <p>{{ lang.quarantine.spam_score }}: <span id="qid_detail_score"></span></p>
           <hr>
           <p id="qid_detail_symbols"></p>
         </div>
-        <div class="form-group">
+        <div>
           <label for="qid_detail_subj"><h4>{{ lang.quarantine.subj }}:</h4></label>
           <p id="qid_detail_subj"></p>
         </div>
-        <div class="form-group">
+        <div>
           <label for="qid_detail_recipients"><h4>{{ lang.quarantine.recipients }}:</h4></label>
           <p id="qid_detail_recipients"></p>
         </div>
-        <div class="form-group">
+        <div>
           <label for="qid_detail_hfrom"><h4>{{ lang.quarantine.sender_header }}:</h4></label>
           <p><span class="mail-address-item" id="qid_detail_hfrom"></span></p>
         </div>
-        <div class="form-group">
+        <div>
           <label for="qid_detail_efrom"><h4>{{ lang.quarantine.sender }}:</h4></label>
           <p><span class="mail-address-item" id="qid_detail_efrom"></span></p>
         </div>
-        <div class="form-group">
+        <div>
           <label for="qid_detail_fuzzy"><h4>Fuzzy Hashes:</h4></label>
           <p id="qid_detail_fuzzy"></p>
         </div>
-        <div class="form-group" id="qTextPlain">
+        <div id="qTextPlain">
           <label for="qid_detail_text"><h4>{{ lang.quarantine.text_plain_content }}:</h4></label>
           <pre id="qid_detail_text"></pre>
         </div>
-        <div class="form-group" id="qTextHtml">
+        <div id="qTextHtml">
           <label for="qid_detail_text_from_html"><h4>{{ lang.quarantine.text_from_html_content }}:</h4></label>
           <pre id="qid_detail_text_from_html"></pre>
         </div>
         {% if acl.quarantine_attachments == 1 %}
-        <div class="form-group">
+        <div>
           <label for="qid_detail_atts"><h4>{{ lang.quarantine.atts }}:</h4></label>
           <div id="qid_detail_atts">-</div>
         </div>
diff --git a/data/web/templates/modals/user.twig b/data/web/templates/modals/user.twig
index e99589ce..352715ad 100644
--- a/data/web/templates/modals/user.twig
+++ b/data/web/templates/modals/user.twig
@@ -10,13 +10,13 @@
       <div class="modal-body">
         <form class="form-horizontal" data-cached-form="false" data-id="fido2ChangeFn" role="form" method="post" autocomplete="off">
           <input type="hidden" class="form-control" name="fido2_cid" id="fido2_cid">
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-4" for="fido2_fn">{{ lang.fido2.fn }}:</label>
             <div class="col-sm-8">
               <input type="text" class="form-control" name="fido2_fn">
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <div class="offset-sm-4 col-sm-8">
               <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="fido2ChangeFn" data-item="null" data-api-url='edit/fido2-fn' data-api-attr='{}' href="#">{{ lang.admin.save }}</button>
             </div>
@@ -37,32 +37,32 @@
       <div class="modal-body">
         <p>{{ lang.add.syncjob_hint }}</p>
         <form class="form-horizontal" data-cached-form="true" role="form" data-id="add_syncjob">
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="host1">{{ lang.add.hostname }}</label>
             <div class="col-sm-10">
               <input type="text" class="form-control" name="host1" required>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="port1">{{ lang.add.port }}</label>
             <div class="col-sm-10">
               <input type="number" class="form-control" name="port1" min="1" max="65535" value="143" required>
               <small class="text-muted">1-65535</small>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="user1">{{ lang.add.username }}</label>
             <div class="col-sm-10">
               <input type="text" class="form-control" name="user1" required>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="password1">{{ lang.add.password }}</label>
             <div class="col-sm-10">
               <input type="password" class="form-control" name="password1" data-hibp="true" required>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="enc1">{{ lang.add.enc_method }}</label>
             <div class="col-sm-10">
               <select name="enc1" title="{{ lang.add.select }}" required>
@@ -72,109 +72,109 @@
               </select>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="mins_interval">{{ lang.add.mins_interval }}</label>
             <div class="col-sm-10">
               <input type="number" class="form-control" name="mins_interval" min="1" max="43800" value="20" required>
               <small class="text-muted">1-43800</small>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="subfolder2">{{ lang.edit.subfolder2|raw }}</label>
             <div class="col-sm-10">
               <input type="text" class="form-control" name="subfolder2" value="">
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="maxage">{{ lang.edit.maxage|raw }}</label>
             <div class="col-sm-10">
               <input type="number" class="form-control" name="maxage" min="0" max="32000" value="0">
               <small class="text-muted">0-32000</small>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="maxbytespersecond">{{ lang.edit.maxbytespersecond|raw }}</label>
             <div class="col-sm-10">
               <input type="number" class="form-control" name="maxbytespersecond" min="0" max="125000000" value="0">
               <small class="text-muted">0-125000000</small>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="timeout1">{{ lang.edit.timeout1 }}</label>
             <div class="col-sm-10">
               <input type="number" class="form-control" name="timeout1" min="1" max="32000" value="600">
               <small class="text-muted">1-32000</small>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="timeout2">{{ lang.edit.timeout2 }}</label>
             <div class="col-sm-10">
               <input type="number" class="form-control" name="timeout2" min="1" max="32000" value="600">
               <small class="text-muted">1-32000</small>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="exclude">{{ lang.add.exclude }}</label>
             <div class="col-sm-10">
               <input type="text" class="form-control" name="exclude" value="(?i)spam|(?i)junk">
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="custom_params">{{ lang.add.custom_params }}</label>
             <div class="col-sm-10">
               <input type="text" class="form-control" name="custom_params" placeholder="--delete2folders --otheroption">
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <div class="offset-sm-2 col-sm-10">
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="delete2duplicates" checked> {{ lang.add.delete2duplicates }} (--delete2duplicates)</label>
               </div>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <div class="offset-sm-2 col-sm-10">
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="delete1"> {{ lang.add.delete1 }} (--delete1)</label>
               </div>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <div class="offset-sm-2 col-sm-10">
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="delete2"> {{ lang.add.delete2 }} (--delete2)</label>
               </div>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <div class="offset-sm-2 col-sm-10">
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="automap" checked> {{ lang.add.automap }} (--automap)</label>
               </div>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <div class="offset-sm-2 col-sm-10">
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="skipcrossduplicates"> {{ lang.add.skipcrossduplicates }} (--skipcrossduplicates)</label>
               </div>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <div class="offset-sm-2 col-sm-10">
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="subscribeall" checked> {{ lang.add.subscribeall }} (--subscribeall)</label>
               </div>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <div class="offset-sm-2 col-sm-10">
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="active" checked> {{ lang.add.active }}</label>
               </div>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <div class="offset-sm-2 col-sm-10">
               <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="add_item" data-id="add_syncjob" data-api-url='add/syncjob' data-api-attr='{}' href="#">{{ lang.admin.add }}</button>
             </div>
@@ -194,26 +194,26 @@
       </div>
       <div class="modal-body">
         <form class="form-horizontal" data-cached-form="true" role="form" data-pwgen-length="32" data-id="add_apppasswd">
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="app_name">{{ lang.add.app_name }}</label>
             <div class="col-sm-10">
               <input type="text" class="form-control" name="app_name" required>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="app_passwd">{{ lang.user.password }} (<a href="#" class="generate_password">{{ lang.user.generate }}</a>)</label>
             <div class="col-sm-10">
               <input type="password" data-pwgen-field="true" data-hibp="true" class="form-control" name="app_passwd" autocomplete="new-password" required>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="app_passwd2">{{ lang.user.password_repeat }}</label>
             <div class="col-sm-10">
               <input type="password" data-pwgen-field="true" class="form-control" name="app_passwd2" autocomplete="new-password" required>
               <p class="text-muted">{{ lang.user.new_password_description }}</p>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-2" for="protocols">{{ lang.add.app_passwd_protocols }}</label>
             <div class="col-sm-10">
               <select class="full-width-select" data-live-search="true" id="protocols" name="protocols" multiple>
@@ -226,14 +226,14 @@
               </select>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <div class="offset-sm-2 col-sm-10">
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="active" checked> {{ lang.add.active }}</label>
               </div>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <div class="offset-sm-2 col-sm-10">
               <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="add_item" data-id="add_apppasswd" data-api-url='add/app-passwd' data-api-attr='{}' href="#">{{ lang.admin.add }}</button>
             </div>
@@ -270,13 +270,13 @@
       </div>
       <div class="modal-body">
         <form class="form-horizontal" data-cached-form="false" data-id="pwchange" role="form" method="post" autocomplete="off">
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-3" for="user_new_pass">{{ lang.user.new_password }} (<a href="#" class="generate_password">{{ lang.user.generate }}</a>)</label>
             <div class="col-sm-5">
               <input type="password" data-pwgen-field="true" data-hibp="true" class="form-control" name="user_new_pass" autocomplete="new-password" required>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-3" for="user_new_pass2">{{ lang.user.new_password_repeat }}</label>
             <div class="col-sm-5">
               <input type="password" data-pwgen-field="true" class="form-control" name="user_new_pass2" autocomplete="new-password" required>
@@ -284,13 +284,13 @@
             </div>
           </div>
           <hr>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-3" for="user_old_pass">{{ lang.user.password_now }}</label>
             <div class="col-sm-5">
               <input type="password" class="form-control" name="user_old_pass" autocomplete="off" required>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <div class="offset-sm-3 col-sm-9">
               <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="pwchange" data-item="null" data-api-url='edit/self' data-api-attr='{}' href="#">{{ lang.user.change_password }}</button>
             </div>
@@ -306,13 +306,13 @@
     <div class="modal-content">
       <div class="modal-body">
         <form class="form-horizontal" data-cached-form="false" data-id="pwchange" role="form" method="post" autocomplete="off">
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-3" for="user_new_pass">{{ lang.user.new_password }} (<a href="#" class="generate_password">{{ lang.user.generate }}</a>)</label>
             <div class="col-sm-5">
               <input type="password" data-pwgen-field="true" data-hibp="true" class="form-control" name="user_new_pass" autocomplete="new-password" required>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-3" for="user_new_pass2">{{ lang.user.new_password_repeat }}</label>
             <div class="col-sm-5">
               <input type="password" data-pwgen-field="true" class="form-control" name="user_new_pass2" autocomplete="new-password" required>
@@ -320,13 +320,13 @@
             </div>
           </div>
           <hr>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-3" for="user_old_pass">{{ lang.user.password_now }}</label>
             <div class="col-sm-5">
               <input type="password" class="form-control" name="user_old_pass" autocomplete="off" required>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <div class="offset-sm-3 col-sm-9">
               <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="pwchange" data-item="null" data-api-url='edit/self' data-api-attr='{}' href="#">{{ lang.user.change_password }}</button>
             </div>
diff --git a/data/web/templates/oauth/authorize.twig b/data/web/templates/oauth/authorize.twig
index 6f78ec00..4e29dcf0 100644
--- a/data/web/templates/oauth/authorize.twig
+++ b/data/web/templates/oauth/authorize.twig
@@ -11,7 +11,7 @@
       <dd>{{ lang.oauth2.profile_desc }}</dd>
     </dl>
     <form class="form-horizontal" autocapitalize="none" autocorrect="off" role="form" method="post">
-      <div class="form-group">
+      <div class="row">
         <div class="col-sm-10 text-center">
           <button class="btn btn-success" name="authorized" type="submit" value="1">{{ lang.oauth2.permit }}</button>
           <a href="#" class="btn btn-secondary" onclick="window.history.back()" role="button">{{ lang.oauth2.deny }}</a>
diff --git a/data/web/templates/qhandler.twig b/data/web/templates/qhandler.twig
index 9ca12114..b8b87255 100644
--- a/data/web/templates/qhandler.twig
+++ b/data/web/templates/qhandler.twig
@@ -32,34 +32,34 @@
         <legend id="qtitle" data-hash="{{ hash }}">{{ lang.quarantine.remove }}</legend><hr />
         {% endif %}
         <div id="qid_error" style="display:none" class="alert alert-danger"></div>
-        <div class="form-group">
+        <div>
           <label for="qid_detail_symbols"><h4>{{ lang.quarantine.rspamd_result }}:</h4></label>
           <p>{{ lang.quarantine.spam_score }}: <span id="qid_detail_score"></span></p>
           <p id="qid_detail_symbols"></p>
         </div>
-        <div class="form-group">
+        <div>
           <label for="qid_detail_subj"><h4>{{ lang.quarantine.subj }}:</h4></label>
           <p id="qid_detail_subj"></p>
         </div>
-        <div class="form-group">
+        <div>
           <label for="qid_detail_hfrom"><h4>{{ lang.quarantine.sender_header }}:</h4></label>
           <p><span class="mail-address-item" id="qid_detail_hfrom"></span></p>
         </div>
-        <div class="form-group">
+        <div>
           <label for="qid_detail_efrom"><h4>{{ lang.quarantine.sender }}:</h4></label>
           <p><span class="mail-address-item" id="qid_detail_efrom"></span></p>
         </div>
-        <div class="form-group">
+        <div>
           <label for="qid_detail_recipients"><h4>{{ lang.quarantine.recipients }}:</h4></label>
           <p id="qid_detail_recipients"></p>
         </div>
-        <div class="form-group">
+        <div>
           <label for="qid_detail_fuzzy"><h4>Fuzzy Hashes:</h4></label>
           <p id="qid_detail_fuzzy"></p>
         </div>
         <div id="qactions">
           <form method="post" autofill="off">
-            <div class="form-group">
+            <div>
               {% if action == 'release' %}
               <button type="submit" class="btn btn-success" name="quick_release" value="{{ hash }}">{{ lang.quarantine.confirm }}</button>
               {% endif %}
diff --git a/data/web/templates/user/Pushover.twig b/data/web/templates/user/Pushover.twig
index f9c6f2c1..f68cb833 100644
--- a/data/web/templates/user/Pushover.twig
+++ b/data/web/templates/user/Pushover.twig
@@ -10,60 +10,58 @@
       <div class="col-sm-10">
         <p class="text-muted">{{ lang.user.pushover_info|format(mailcow_cc_username)|raw }}</p>
         <p class="text-muted">{{ lang.user.pushover_vars|raw }}: <code>{SUBJECT}</code>, <code>{SENDER}</code></p>
-        <div class="form-group">
-          <div class="row">
-            <div class="col-sm-6">
+        <div class="row">
+          <div class="col-sm-6">
+            <div class="form-group">
+              <label for="token">API Token/Key (Application)</label>
+              <input type="text" class="form-control" name="token" maxlength="30" value="{{ pushover_data.token }}" required>
+            </div>
+          </div>
+          <div class="col-sm-6">
+            <div class="form-group">
+              <label for="key">User/Group Key</label>
+              <input type="text" class="form-control" name="key" maxlength="30" value="{{ pushover_data.key }}" required>
+            </div>
+          </div>
+          <div class="col-sm-6">
+            <div class="form-group">
+              <label for="title">{{ lang.user.pushover_title }}</label>
+              <input type="text" class="form-control" name="title" value="{{ pushover_data.title }}" placeholder="Mail">
+            </div>
+          </div>
+          <div class="col-sm-6">
+            <div class="form-group">
+              <label for="text">{{ lang.user.pushover_text }}</label>
+              <input type="text" class="form-control" name="text" value="{{ pushover_data.text }}" placeholder="You've got mail 📧">
+            </div>
+          </div>
+          <div class="col-sm-12">
+            <div class="form-group">
+              <label for="text">{{ lang.user.pushover_sender_array|raw }}</label>
+              <input type="text" class="form-control" name="senders" value="{{ pushover_data.senders }}" placeholder="sender1@example.com, sender2@example.com">
+            </div>
+          </div>
+          <div class="col-sm-12">
+            <div class="checkbox">
+              <label><input type="checkbox" value="1" name="active"{% if pushover_data.active == '1' %} checked{% endif %}> {{ lang.user.active }}</label>
+            </div>
+          </div>
+          <div class="col-sm-12">
+            <legend style="cursor:pointer;margin-top:10px" data-bs-target="#po_advanced" unselectable="on" data-bs-toggle="collapse">
+              <i style="font-size:10pt;" class="bi bi-plus-square"></i> {{ lang.user.advanced_settings }}
+            </legend>
+            <hr />
+          </div>
+          <div class="col-sm-12">
+            <div id="po_advanced" class="collapse">
               <div class="form-group">
-                <label for="token">API Token/Key (Application)</label>
-                <input type="text" class="form-control" name="token" maxlength="30" value="{{ pushover_data.token }}" required>
-              </div>
-            </div>
-            <div class="col-sm-6">
-              <div class="form-group">
-                <label for="key">User/Group Key</label>
-                <input type="text" class="form-control" name="key" maxlength="30" value="{{ pushover_data.key }}" required>
-              </div>
-            </div>
-            <div class="col-sm-6">
-              <div class="form-group">
-                <label for="title">{{ lang.user.pushover_title }}</label>
-                <input type="text" class="form-control" name="title" value="{{ pushover_data.title }}" placeholder="Mail">
-              </div>
-            </div>
-            <div class="col-sm-6">
-              <div class="form-group">
-                <label for="text">{{ lang.user.pushover_text }}</label>
-                <input type="text" class="form-control" name="text" value="{{ pushover_data.text }}" placeholder="You've got mail 📧">
-              </div>
-            </div>
-            <div class="col-sm-12">
-              <div class="form-group">
-                <label for="text">{{ lang.user.pushover_sender_array|raw }}</label>
-                <input type="text" class="form-control" name="senders" value="{{ pushover_data.senders }}" placeholder="sender1@example.com, sender2@example.com">
-              </div>
-            </div>
-            <div class="col-sm-12">
-              <div class="checkbox">
-                <label><input type="checkbox" value="1" name="active"{% if pushover_data.active == '1' %} checked{% endif %}> {{ lang.user.active }}</label>
-              </div>
-            </div>
-            <div class="col-sm-12">
-              <legend style="cursor:pointer;margin-top:10px" data-bs-target="#po_advanced" unselectable="on" data-bs-toggle="collapse">
-                <i style="font-size:10pt;" class="bi bi-plus-square"></i> {{ lang.user.advanced_settings }}
-              </legend>
-              <hr />
-            </div>
-            <div class="col-sm-12">
-              <div id="po_advanced" class="collapse">
-                <div class="form-group">
-                  <label for="text">{{ lang.user.pushover_sender_regex }}</label>
-                  <input type="text" class="form-control" name="senders_regex" value="{{ pushover_data.senders_regex }}" placeholder="/(.*@example\.org$|^foo@example\.com$)/i" regex="true">
-                  <div class="checkbox">
-                    <label><input type="checkbox" value="1" name="evaluate_x_prio"{% if pushover_data.attributes.evaluate_x_prio == '1' %} checked{% endif %}> {{ lang.user.pushover_evaluate_x_prio|raw }}</label>
-                  </div>
-                  <div class="checkbox">
-                    <label><input type="checkbox" value="1" name="only_x_prio"{% if pushover_data.attributes.only_x_prio == '1' %} checked{% endif %}> {{ lang.user.pushover_only_x_prio|raw }}</label>
-                  </div>
+                <label for="text">{{ lang.user.pushover_sender_regex }}</label>
+                <input type="text" class="form-control" name="senders_regex" value="{{ pushover_data.senders_regex }}" placeholder="/(.*@example\.org$|^foo@example\.com$)/i" regex="true">
+                <div class="checkbox">
+                  <label><input type="checkbox" value="1" name="evaluate_x_prio"{% if pushover_data.attributes.evaluate_x_prio == '1' %} checked{% endif %}> {{ lang.user.pushover_evaluate_x_prio|raw }}</label>
+                </div>
+                <div class="checkbox">
+                  <label><input type="checkbox" value="1" name="only_x_prio"{% if pushover_data.attributes.only_x_prio == '1' %} checked{% endif %}> {{ lang.user.pushover_only_x_prio|raw }}</label>
                 </div>
               </div>
             </div>
diff --git a/data/web/templates/user/Spamfilter.twig b/data/web/templates/user/Spamfilter.twig
index 44ad33a1..13aa371e 100644
--- a/data/web/templates/user/Spamfilter.twig
+++ b/data/web/templates/user/Spamfilter.twig
@@ -3,7 +3,7 @@
   <div class="row">
     <div class="col-sm-12">
       <form class="form-horizontal" role="form" data-id="spam_score" method="post">
-        <div class="form-group">
+        <div class="row">
           <div class="col-lg-8 col-sm-12">
             <div id="spam_score" data-provide="slider" data-acl="{{ acl.spam_score }}"></div>
             <input id="spam_score_value" name="spam_score" type="hidden" value="{{ user_spam_score }}">