From b19666f7e0d530ae948443ac8ac845251aab4059 Mon Sep 17 00:00:00 2001
From: FreddleSpl0it <patschul@posteo.de>
Date: Wed, 13 Apr 2022 16:37:52 +0200
Subject: [PATCH] [BS5] add layout spacing

---
 .../templates/admin/tab-config-admins.twig    |  28 +-
 .../templates/admin/tab-config-customize.twig |  26 +-
 data/web/templates/admin/tab-config-dkim.twig |  67 +++--
 data/web/templates/admin/tab-config-f2b.twig  |  14 +-
 .../templates/admin/tab-config-fwdhosts.twig  |   4 +-
 .../admin/tab-config-password-policy.twig     |   8 +-
 .../admin/tab-config-quarantine.twig          |  44 +--
 .../web/templates/admin/tab-config-quota.twig |   2 +-
 .../templates/admin/tab-config-rspamd.twig    |  16 +-
 data/web/templates/admin/tab-routing.twig     |  22 +-
 data/web/templates/admin/tab-sys-mails.twig   |  24 +-
 data/web/templates/debug.twig                 |   6 +-
 data/web/templates/modals/admin.twig          |  68 ++---
 data/web/templates/modals/footer.twig         |  36 ++-
 data/web/templates/modals/mailbox.twig        | 270 +++++++++---------
 15 files changed, 321 insertions(+), 314 deletions(-)

diff --git a/data/web/templates/admin/tab-config-admins.twig b/data/web/templates/admin/tab-config-admins.twig
index 5fd176c6..2c6e0ebd 100644
--- a/data/web/templates/admin/tab-config-admins.twig
+++ b/data/web/templates/admin/tab-config-admins.twig
@@ -1,5 +1,5 @@
 <div role="tabpanel" class="tab-pane fade show active" id="tab-config-admins" role="tabpanel" aria-labelledby="tab-config-admins">
-    <div class="card">
+    <div class="card mb-4">
       <div class="card-header bg-danger text-white">{{ lang.admin.admin_details }}</div>
       <div class="card-body">
         <div class="table-responsive">
@@ -135,33 +135,33 @@
                 </div>
                 <div class="card-body">
                   <form class="form-horizontal" autocapitalize="none" autocorrect="off" role="form" method="post">
-                    <div class="row">
+                    <div class="row mb-4">
                       <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="row">
+                    <div class="row mb-2">
                       <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="row">
+                    <div class="row mb-4">
                       <label class="control-label col-sm-3">{{ lang.admin.api_key }}:</label>
                       <div class="col-sm-9">
-                        <pre>{{ api.ro.api_key|default('-') }}</pre>
+                        <input type="text" class="form-control" value="{{ api.ro.api_key|default('-') }}" readonly />
                       </div>
                     </div>
-                    <div class="row">
+                    <div class="row mb-2">
                       <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="row">
+                    <div class="row mb-2">
                       <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="row">
+                    <div class="row mb-4">
                       <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="row">
+                    <div class="row mb-2">
                       <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="row">
+                    <div class="row mb-4">
                       <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>
+                        <input type="text" class="form-control" value="{{ api.rw.api_key|default('-') }}" readonly />
                       </div>
                     </div>
-                    <div class="row">
+                    <div class="row mb-2">
                       <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="row">
+                    <div class="row mb-2">
                       <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>
@@ -223,7 +223,7 @@
       </div>
     </div>
 
-  <div class="card">
+  <div class="card mb-4">
     <div class="card-header">{{ lang.admin.domain_admins }}</div>
     <div class="card-body">
       <div class="table-responsive">
diff --git a/data/web/templates/admin/tab-config-customize.twig b/data/web/templates/admin/tab-config-customize.twig
index b0484bf8..5dc16a55 100644
--- a/data/web/templates/admin/tab-config-customize.twig
+++ b/data/web/templates/admin/tab-config-customize.twig
@@ -6,7 +6,7 @@
       <p class="text-muted">{{ lang.admin.logo_info }}</p>
       <form class="form-inline" role="form" method="post" enctype="multipart/form-data">
         <p>
-          <input type="file" name="main_logo" accept="image/gif, image/jpeg, image/pjpeg, image/x-png, image/png, image/svg+xml"><br>
+          <input class="mb-4" type="file" name="main_logo" accept="image/gif, image/jpeg, image/pjpeg, image/x-png, image/png, image/svg+xml"><br>
           <button name="submit_main_logo" type="submit" class="btn btn-sm d-block d-sm-inline btn-secondary"><i class="bi bi-upload"></i> {{ lang.admin.upload }}</button>
         </p>
       </form>
@@ -62,19 +62,19 @@
       <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>
+          <div class="mb-2">
             <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>
+          <div class="mb-2">
             <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>
+          <div class="mb-2">
             <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>
+          <div class="mb-4">
             <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>
@@ -82,11 +82,15 @@
           <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 }}">
-                <option {% if ui_texts.ui_announcement_type == 'info' %}selected{% endif %} value="info">{{ lang.admin.ui_header_announcement_type_info }}</option>
-                <option {% if ui_texts.ui_announcement_type == 'warning' %}selected{% endif %} value="warning">{{ lang.admin.ui_header_announcement_type_warning }}</option>
-                <option {% if ui_texts.ui_announcement_type == 'danger' %}selected{% endif %} value="danger">{{ lang.admin.ui_header_announcement_type_danger }}</option>
-              </select></p>
+            <div class="row">
+              <div class="col-12 col-md-6 col-lg-4 col-xl-3">
+                <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 }}">
+                    <option {% if ui_texts.ui_announcement_type == 'info' %}selected{% endif %} value="info">{{ lang.admin.ui_header_announcement_type_info }}</option>
+                    <option {% if ui_texts.ui_announcement_type == 'warning' %}selected{% endif %} value="warning">{{ lang.admin.ui_header_announcement_type_warning }}</option>
+                    <option {% if ui_texts.ui_announcement_type == 'danger' %}selected{% endif %} value="danger">{{ lang.admin.ui_header_announcement_type_danger }}</option>
+                  </select></p>
+              </div>
+            </div>
             <p><textarea class="form-control" id="ui_announcement_text" name="ui_announcement_text" rows="7">{{ ui_texts.ui_announcement_text }}</textarea></p>
             <div class="checkbox">
               <label>
@@ -95,7 +99,7 @@
             </div>
           </div>
           <hr>
-          <div>
+          <div class="mb-4">
             <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 9ac2b915..872cddd5 100644
--- a/data/web/templates/admin/tab-config-dkim.twig
+++ b/data/web/templates/admin/tab-config-dkim.twig
@@ -9,18 +9,21 @@
       </div>
       {% for domain, domain_data in dkim_domains %}
         {% if domain_data.dkim %}
-          <div class="row collapse in dkim_key_valid">
+          <div class="row collapse show dkim_key_valid">
             <div class="col-md-1"><input type="checkbox" data-id="dkim" name="multi_select" value="{{ domain }}"></div>
             <div class="col-md-3">
               <p>{{ lang.admin.domain }}: <strong>{{ domain }}</strong>
-              <p class="dkim-label"><span class="badge fs-5 bg-success">{{ lang.admin.dkim_key_valid }}</span></p>
-              <p class="dkim-label"><span class="badge fs-5 bg-primary">{{ lang.admin.dkim_domains_selector }} '{{ domain_data.dkim.dkim_selector }}'</span></p>
-              <p class="dkim-label"><span class="badge fs-5 bg-info">{{ domain_data.dkim.length }} bit</span></p>
+              <p class="dkim-label"><span class="badge fs-6 bg-success">{{ lang.admin.dkim_key_valid }}</span></p>
+              <p class="dkim-label"><span class="badge fs-6 bg-primary">{{ lang.admin.dkim_domains_selector }} '{{ domain_data.dkim.dkim_selector }}'</span></p>
+              <p class="dkim-label"><span class="badge fs-6 bg-info">{{ domain_data.dkim.length }} bit</span></p>
               </p>
             </div>
             <div class="col-md-8">
-              <pre>{{ domain_data.dkim.dkim_txt }}</pre>
-              <p data-bs-toggle="modal" data-bs-target="#showDKIMprivKey" id="dkim_priv" style="cursor:pointer;margin-top:-8pt" data-priv-key="{{ domain_data.dkim.privkey }}"><small><i class="bi bi-arrow-return-right"></i> {{ lang.admin.dkim_private_key }}</small></p>
+              <textarea class="form-control" rows="6" readonly>{{ domain_data.dkim.dkim_txt }}</textarea>
+              <small>
+                <i class="bi bi-arrow-return-right"></i> 
+                <a href="#" data-bs-toggle="modal" data-bs-target="#showDKIMprivKey" id="dkim_priv" data-priv-key="{{ domain_data.dkim.privkey }}"> {{ lang.admin.dkim_private_key }}</a>
+              </small>
             </div>
             <hr class="d-block d-md-none">
           </div>
@@ -28,7 +31,7 @@
           <div class="row collapse in dkim_key_missing">
             <div class="col-md-1"><input class="dkim_missing" type="checkbox" data-id="dkim" name="multi_select" value="{{ domain }}" disabled></div>
             <div class="col-md-3">
-              <p>{{ lang.admin.domain }}: <strong>{{ domain }}</strong><br><span class="badge fs-5 bg-danger">{{ lang.admin.dkim_key_missing }}</span></p>
+              <p>{{ lang.admin.domain }}: <strong>{{ domain }}</strong><br><span class="badge fs-6 bg-danger">{{ lang.admin.dkim_key_missing }}</span></p>
             </div>
             <div class="col-md-8"><pre>-</pre></div>
             <hr class="d-block d-md-none">
@@ -40,9 +43,9 @@
               <div class="col-md-1"><input type="checkbox" data-id="dkim" name="multi_select" value="{{ alias_domain }}"></div>
               <div class="col-md-2 offset-md-1">
                 <p><small>↳ Alias-Domain: <strong>{{ alias_domain }}</strong></small>
-                <p class="dkim-label"><span class="badge fs-5 bg-success">{{ lang.admin.dkim_key_valid }}</span></p>
-                <p class="dkim-label"><span class="badge fs-5 bg-primary">Selector '{{ alias_domain_data.dkim.dkim_selector }}'</span></p>
-                <p class="dkim-label"><span class="badge fs-5 bg-info">{{ alias_domain_data.dkim.length }} bit</span></p>
+                <p class="dkim-label"><span class="badge fs-6 bg-success">{{ lang.admin.dkim_key_valid }}</span></p>
+                <p class="dkim-label"><span class="badge fs-6 bg-primary">Selector '{{ alias_domain_data.dkim.dkim_selector }}'</span></p>
+                <p class="dkim-label"><span class="badge fs-6 bg-info">{{ alias_domain_data.dkim.length }} bit</span></p>
                 </p>
               </div>
               <div class="col-md-8">
@@ -55,7 +58,7 @@
             <div class="row collapse in dkim_key_missing">
               <div class="col-md-1"><input class="dkim_missing" type="checkbox" data-id="dkim" name="multi_select" value="{{ alias_domain }}" disabled></div>
               <div class="col-md-2 offset-md-1">
-                <p><small>↳ Alias-Domain: <strong>{{ alias_domain }}</strong><br></small><span class="badge fs-5 bg-danger">{{ lang.admin.dkim_key_missing }}</span></p>
+                <p><small>↳ Alias-Domain: <strong>{{ alias_domain }}</strong><br></small><span class="badge fs-6 bg-danger">{{ lang.admin.dkim_key_missing }}</span></p>
               </div>
               <div class="col-md-8"><pre>-</pre></div>
               <hr class="d-block d-md-none">
@@ -68,9 +71,9 @@
           <div class="col-md-1"><input type="checkbox" data-id="dkim" name="multi_select" value="{{ blind }}"></div>
           <div class="col-md-3">
             <p>{{ lang.admin.domain }}: <strong>{{ blind }}</strong>
-            <p class="dkim-label"><span class="badge fs-5 bg-warning">{{ lang.admin.dkim_key_unused }}</span></p>
-            <p class="dkim-label"><span class="badge fs-5 bg-primary">Selector '{{ data.dkim.dkim_selector }}'</span></p>
-            <p class="dkim-label"><span class="badge fs-5 bg-info">{{ data.dkim.length }} bit</span></p>
+            <p class="dkim-label"><span class="badge fs-6 bg-warning">{{ lang.admin.dkim_key_unused }}</span></p>
+            <p class="dkim-label"><span class="badge fs-6 bg-primary">Selector '{{ data.dkim.dkim_selector }}'</span></p>
+            <p class="dkim-label"><span class="badge fs-6 bg-info">{{ data.dkim.length }} bit</span></p>
             </p>
           </div>
           <div class="col-md-8">
@@ -90,20 +93,22 @@
 
       <legend style="margin-top:40px">{{ lang.admin.dkim_add_key }}</legend><hr />
       <form class="form" data-id="dkim" role="form" method="post">
-        <div>
+        <div class="mb-4">
           <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>
+        <div class="mb-2">
           <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>
-          <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>
-          </select>
+        <div class="row mb-4">
+          <div class="col-12 col-md-6 col-lg-4 col-xl-3">
+            <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>
+            </select>
+          </div>
         </div>
         <button class="btn btn-sm d-block d-sm-inline btn-success" data-action="add_item" data-id="dkim" data-api-url='add/dkim' data-api-attr='{}' href="#"><i class="bi bi-plus-lg"></i> {{ lang.admin.add }}</button>
       </form>
@@ -114,19 +119,19 @@
       <hr />
       <div id="import_dkim" class="collapse">
         <form class="form" data-id="dkim_import" role="form" method="post">
-          <div>
+          <div class="mb-2">
             <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>
+          <div class="mb-2">
             <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>
+          <div class="mb-4">
             <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>
+          <div class="mb-2">
             <label>
               <input type="checkbox" name="overwrite_existing" value="1"> {{ lang.admin.dkim_overwrite_key }}
             </label>
@@ -141,9 +146,9 @@
       <hr />
       <div id="duplicate_dkim" class="collapse">
         <form class="form-horizontal" data-id="dkim_duplicate" role="form" method="post">
-          <div class="row">
-            <label class="control-label col-sm-2" for="from_domain">{{ lang.admin.dkim_from }}:</label>
-            <div class="col-sm-10">
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end" for="from_domain">{{ lang.admin.dkim_from }}:</label>
+            <div class="col-sm-10 col-md-6 col-lg-4 col-xl-3">
               <select data-style="btn btn-secondary btn-sm"
                       data-live-search="true"
                       data-id="dkim_duplicate"
@@ -155,9 +160,9 @@
               </select>
             </div>
           </div>
-          <div class="row">
-            <label class="control-label col-sm-2" for="to_domain">{{ lang.admin.dkim_to }}:</label>
-            <div class="col-sm-10">
+          <div class="row mb-4">
+            <label class="control-label col-sm-2 text-sm-end" for="to_domain">{{ lang.admin.dkim_to }}:</label>
+            <div class="col-sm-10 col-md-6 col-lg-4 col-xl-3">
               <select
                 data-live-search="true"
                 data-style="btn btn-secondary btn-sm"
diff --git a/data/web/templates/admin/tab-config-f2b.twig b/data/web/templates/admin/tab-config-f2b.twig
index 0a2a8097..fb433ac3 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>
+        <div class="mb-4">
           <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>
+        <div class="mb-4">
           <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>
+        <div class="mb-4">
           <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>
+        <div class="mb-4">
           <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>
+        <div class="mb-4">
           <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>
+        <div class="mb-2">
           <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>
+        <div class="mb-4">
           <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 462a89b5..43300297 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>
+        <div class="mb-2">
           <label for="fwdhost_hostname">{{ lang.admin.host }}</label>
           <input class="form-control" id="fwdhost_hostname" name="hostname" placeholder="example.org" required>
         </div>
-        <div>
+        <div class="mb-4">
           <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 8702cd7c..a677b022 100644
--- a/data/web/templates/admin/tab-config-password-policy.twig
+++ b/data/web/templates/admin/tab-config-password-policy.twig
@@ -5,15 +5,15 @@
       <form class="form-horizontal" data-id="passwordpolicy" role="form" method="post">
         {% for name, value in password_complexity %}
           {% if name == 'length' %}
-            <div class="row">
-              <label class="control-label col-sm-3" for="length">{{ lang.admin.password_length }}:</label>
+            <div class="row mb-4">
+              <label class="control-label col-sm-3 text-sm-end" 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>
               </div>
             </div>
           {% else %}
             <input type="hidden" name="{{ name }}" value="0">
-            <div class="row">
+            <div class="row mb-2">
               <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="row">
+        <div class="row mt-4 mb-2">
           <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 9cc0175c..31c0259b 100644
--- a/data/web/templates/admin/tab-config-quarantine.twig
+++ b/data/web/templates/admin/tab-config-quarantine.twig
@@ -6,69 +6,69 @@
       <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="row">
-          <label class="col-sm-4 control-label" for="quarantine_retention_size">{{ lang.admin.quarantine_retention_size|raw }}</label>
+        <div class="row mb-4">
+          <label class="col-sm-4 control-label text-sm-end" 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="row">
-          <label class="col-sm-4 control-label" for="quarantine_max_size">{{ lang.admin.quarantine_max_size|raw }}</label>
+        <div class="row mb-4">
+          <label class="col-sm-4 control-label text-sm-end" 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="row">
-          <label class="col-sm-4 control-label" for="quarantine_max_score">{{ lang.admin.quarantine_max_score|raw }}</label>
+        <div class="row mb-4">
+          <label class="col-sm-4 control-label text-sm-end" 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="row">
-          <label class="col-sm-4 control-label" for="quarantine_max_age">{{ lang.admin.quarantine_max_age|raw }}</label>
+        <div class="row mb-4">
+          <label class="col-sm-4 control-label text-sm-end" 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="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="row mb-4">
+          <label class="col-sm-4 control-label text-sm-end" 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="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="row mb-4">
+          <label class="col-sm-4 control-label text-sm-end" 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="row">
-          <label class="col-sm-4 control-label" for="quarantine_sender">{{ lang.admin.quarantine_notification_sender }}:</label>
+        <div class="row mb-2">
+          <label class="col-sm-4 control-label text-sm-end" 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="row">
-          <label class="col-sm-4 control-label" for="quarantine_subject">{{ lang.admin.quarantine_notification_subject }}:</label>
+        <div class="row mb-4">
+          <label class="col-sm-4 control-label text-sm-end" 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="row">
-          <label class="col-sm-4 control-label" for="quarantine_release_format">{{ lang.admin.quarantine_release_format }}:</label>
-          <div class="col-sm-8">
+        <div class="row mb-2">
+          <label class="col-sm-4 control-label text-sm-end" for="quarantine_release_format">{{ lang.admin.quarantine_release_format }}:</label>
+          <div class="col-sm-8 col-md-6 col-lg-4 col-xl-3">
             <select data-width="100%" id="quarantine_release_format" name="release_format" class="selectpicker" title="{{ lang.tfa.select }}">
               <option {% if q_data.release_format == 'raw' %}selected{% endif %} value="raw">{{ lang.admin.quarantine_release_format_raw }}</option>
               <option {% if q_data.release_format == 'attachment' %}selected{% endif %} value="attachment">{{ lang.admin.quarantine_release_format_att }}</option>
             </select>
           </div>
         </div>
-        <div class="row">
-          <label class="col-sm-4 control-label" for="exclude_domains">{{ lang.admin.quarantine_exclude_domains }}:</label>
-          <div class="col-sm-8">
+        <div class="row mb-4">
+          <label class="col-sm-4 control-label text-sm-end" for="exclude_domains">{{ lang.admin.quarantine_exclude_domains }}:</label>
+          <div class="col-sm-8 col-md-6 col-lg-4 col-xl-3">
             <select data-width="100%" name="exclude_domains" class="selectpicker" title="{{ lang.tfa.select }}" multiple>
               {% for domain in all_domains %}
                 <option {% if domain in q_data.exclude_domains %}selected{% endif %}>{{ domain }}</option>
diff --git a/data/web/templates/admin/tab-config-quota.twig b/data/web/templates/admin/tab-config-quota.twig
index 673354bc..c8df9e97 100644
--- a/data/web/templates/admin/tab-config-quota.twig
+++ b/data/web/templates/admin/tab-config-quota.twig
@@ -4,7 +4,7 @@
     <div class="card-body">
       <p>{{ lang.admin.quota_notifications_info }}</p>
       <form class="form" role="form" data-id="quota_notification" method="post">
-        <div class="row">
+        <div class="row mb-4">
           <div class="col-sm-6">
             <div>
               <label for="quota_notification_sender">{{ lang.admin.quota_notification_sender }}:</label>
diff --git a/data/web/templates/admin/tab-config-rspamd.twig b/data/web/templates/admin/tab-config-rspamd.twig
index 4fc5a1ad..31cb39cc 100644
--- a/data/web/templates/admin/tab-config-rspamd.twig
+++ b/data/web/templates/admin/tab-config-rspamd.twig
@@ -5,31 +5,31 @@
     </div>
     <div class="card-body">
       <div class="row">
-        <div class="col-12 d-block d-sm-none">
-          <img class="img-responsive" src="/img/rspamd_logo.png" alt="Rspamd UI">
+        <div class="col-12 d-flex d-sm-none mb-4">
+          <img class="img-responsive mx-auto" src="/img/rspamd_logo.png" alt="Rspamd UI">
         </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="row">
+            <div class="row mb-4">
               <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="row">
-              <label class="control-label col-sm-3" for="rspamd_ui_pass">{{ lang.admin.password }}:</label>
+            <div class="row mb-2">
+              <label class="control-label col-sm-3 text-sm-end" 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="row">
-              <label class="control-label col-sm-3" for="rspamd_ui_pass2">{{ lang.admin.password_repeat }}:</label>
+            <div class="row mb-4">
+              <label class="control-label col-sm-3 text-sm-end" 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="row">
+            <div class="row mb-4">
               <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-routing.twig b/data/web/templates/admin/tab-routing.twig
index 637753c7..7e31fd3d 100644
--- a/data/web/templates/admin/tab-routing.twig
+++ b/data/web/templates/admin/tab-routing.twig
@@ -1,5 +1,5 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-routing" role="tabpanel" aria-labelledby="tab-routing">
-  <div class="card">
+  <div class="card mb-4">
     <div class="card-header">{{ lang.admin.relayhosts }}</div>
     <div class="card-body">
       <p style="margin-bottom:40px">{{ lang.admin.relayhosts_hint|raw }}</p>
@@ -23,15 +23,15 @@
       <div class="row">
         <div class="col-md-8">
           <form class="form" data-id="rlyhost" role="form" method="post">
-            <div>
+            <div class="mb-2">
               <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>
+            <div class="mb-2">
               <label for="rlyhost_username">{{ lang.admin.username }}</label>
               <input class="form-control" id="rlyhost_username" name="username">
             </div>
-            <div>
+            <div class="mb-4">
               <label for="rlyhost_password">{{ lang.admin.password }}</label>
               <input class="form-control" id="rlyhost_password" name="password">
             </div>
@@ -42,7 +42,7 @@
     </div>
   </div>
 
-  <div class="card">
+  <div class="card mb-4">
     <div class="card-header">{{ lang.admin.transport_maps }}</div>
     <div class="card-body">
       <p style="margin-bottom:40px">{{ lang.admin.transports_hint|raw }}</p>
@@ -66,28 +66,28 @@
       <div class="row">
         <div class="col-md-8">
           <form class="form" data-id="transport" role="form" method="post">
-            <div>
+            <div class="mb-2">
               <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>
+            <div class="mb-2">
               <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>
+            <div class="mb-2">
               <label for="transport_username">{{ lang.admin.username }}</label>
               <input class="form-control" id="transport_username" name="username">
             </div>
-            <div>
+            <div class="mb-4">
               <label for="transport_password">{{ lang.admin.password }}</label>
               <input class="form-control" id="transport_password" name="password">
             </div>
-            <div>
+            <div class="mb-2">
               <label>
                 <input type="checkbox" name="is_mx_based" value="1"> {{ lang.admin.lookup_mx|raw }}
               </label>
             </div>
-            <div>
+            <div class="mb-4">
               <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 139a318a..ff6e3532 100644
--- a/data/web/templates/admin/tab-sys-mails.twig
+++ b/data/web/templates/admin/tab-sys-mails.twig
@@ -3,14 +3,14 @@
     <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="row">
-          <label class="control-label col-sm-2" for="admin_mass_from">{{ lang.admin.from }}:</label>
+        <div class="row mb-2">
+          <label class="control-label col-sm-2 text-sm-end" 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="row">
-          <label class="control-label col-sm-2" for="admin_mass_subject">{{ lang.admin.subject }}:</label>
+        <div class="row mb-4">
+          <label class="control-label col-sm-2 text-sm-end" 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>
           </div>
@@ -18,8 +18,8 @@
         {% for domain in all_domains %}
 
         {% endfor %}
-        <div class="row">
-          <label class="control-label col-sm-2" for="mass_subject">{{ lang.admin.include_exclude }}:
+        <div class="row mb-4">
+          <label class="control-label col-sm-2 text-sm-end" for="mass_subject">{{ lang.admin.include_exclude }}:
             <p class="text-muted">{{ lang.admin.include_exclude_info|raw }}</p>
           </label>
           <div class="col-sm-5">
@@ -39,27 +39,27 @@
             </select>
           </div>
         </div>
-        <div class="row">
-          <label class="control-label col-sm-2" for="mass_text">{{ lang.admin.text }}:</label>
+        <div class="row mb-2">
+          <label class="control-label col-sm-2 text-sm-end" 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="row">
-          <label class="control-label col-sm-2" for="mass_html">{{ lang.admin.html }} ({{ lang.admin.optional }}):</label>
+        <div class="row mb-4">
+          <label class="control-label col-sm-2 text-sm-end" 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="row">
+        <div class="row mb-2">
           <div class="offset-sm-2 col-sm-10">
             <label>
               <input type="checkbox" id="mass_disarm"> {{ lang.admin.activate_send }}
             </label>
           </div>
         </div>
-        <div class="row">
+        <div class="row mb-2">
           <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/debug.twig b/data/web/templates/debug.twig
index b7fa91b6..d801c2ad 100644
--- a/data/web/templates/debug.twig
+++ b/data/web/templates/debug.twig
@@ -30,7 +30,7 @@
     <div class="tab-content" style="padding-top:20px">
       <div class="debug-log-info">{{ lang.debug.log_info|format(log_lines+1)|raw }}</div>
       <div role="tabpanel" class="tab-pane active" id="tab-containers">
-        <div class="card">
+        <div class="card mb-4">
           <div class="card-header">
             <h3 class="card-title">{{ lang.debug.disk_usage }}</h3>
           </div>
@@ -48,7 +48,7 @@
             </div>
           </div>
         </div>
-        <div class="card">
+        <div class="card mb-4">
           <div class="card-header">
             <h3 class="card-title">{{ lang.debug.solr_status }}</h3>
           </div>
@@ -77,7 +77,7 @@
             </div>
           </div>
         </div>
-        <div class="card">
+        <div class="card mb-4">
           <div class="card-header">
             <h3 class="card-title">{{ lang.debug.containers_info }}</h3>
           </div>
diff --git a/data/web/templates/modals/admin.twig b/data/web/templates/modals/admin.twig
index 207f46fb..a51e2731 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="row">
-            <label class="control-label col-sm-2" for="desc">{{ lang.admin.rsetting_desc }}:</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end" 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="row">
-            <label class="control-label col-sm-2" for="content">{{ lang.admin.rsetting_content }}:</label>
+          <div class="row mb-4">
+            <label class="control-label col-sm-2 text-sm-end" 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="row">
+          <div class="row mb-2">
             <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="row">
+          <div class="row mb-4">
             <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,15 +50,15 @@
       </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="row">
-            <label class="control-label col-sm-2" for="username">{{ lang.admin.username }}:</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end" 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="row">
-            <label class="control-label col-sm-2" for="name">{{ lang.admin.admin_domains }}:</label>
+          <div class="row mb-4">
+            <label class="control-label col-sm-2 text-sm-end" 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>
                 {% for domain in domains %}
@@ -67,26 +67,26 @@
               </select>
             </div>
           </div>
-          <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="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end" 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="row">
-            <label class="control-label col-sm-2" for="password2">{{ lang.admin.password_repeat }}:</label>
+          <div class="row mb-4">
+            <label class="control-label col-sm-2 text-sm-end" 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="row">
+          <div class="row mb-2">
             <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="row">
+          <div class="row mb-4">
             <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="row">
+          <div class="row mb-4">
             <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="row">
+          <div class="row mb-4">
             <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="row">
-            <label class="control-label col-sm-2" for="redirect_uri">{{ lang.admin.oauth2_redirect_uri }}:</label>
+          <div class="row mb-4">
+            <label class="control-label col-sm-2 text-sm-end" 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="row">
+          <div class="row mb-4">
             <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="row">
-            <label class="control-label col-sm-2" for="username">{{ lang.admin.username }}:</label>
+          <div class="row mb-4">
+            <label class="control-label col-sm-2 text-sm-end" 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="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="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end" 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="row">
-            <label class="control-label col-sm-2" for="password2">{{ lang.admin.password_repeat }}:</label>
+          <div class="row mb-4">
+            <label class="control-label col-sm-2 text-sm-end" 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="row">
+          <div class="row mb-2">
             <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="row">
+          <div class="row mb-4">
             <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="row">
-            <label class="control-label col-sm-2" for="mail_from">{{ lang.admin.relay_from }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end" 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="row">
-            <label class="control-label col-sm-2" for="mail_rcpt">{{ lang.admin.relay_rcpt }}</label>
+          <div class="row mb-4">
+            <label class="control-label col-sm-2 text-sm-end" 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="row">
+          <div class="row mb-4">
             <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 101fb0f2..352c97cb 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>
+          <div class="mb-4">
             <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>
+          <div class="mb-2">
             <input type="text" class="form-control" name="yubico_id" placeholder="Yubico API ID" autocomplete="off" required>
           </div>
-          <div>
+          <div class="mb-4">
             <input type="text" class="form-control" name="yubico_key" placeholder="Yubico API Key" autocomplete="off" required>
           </div>
           <hr>
-          <div>
+          <div class="mb-4">
             <input type="password" class="form-control" name="confirm_password" placeholder="{{ lang.user.password_now }}" autocomplete="off" required>
           </div>
-          <div>
+          <div class="mb-4">
             <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">
@@ -45,23 +45,23 @@
         <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
       </div>
       <div class="modal-body">
-        <form role="form" method="post" id="webauthn_reg_form">
-          <div>
+        <form class="d-flex flex-column" role="form" method="post" id="webauthn_reg_form">
+          <div class="mb-2">
             <input type="text" class="form-control" name="key_id" placeholder="{{ lang.tfa.key_id }}" autocomplete="off" required>
           </div>
-          <div>
+          <div class="mb-4">
             <input type="password" class="form-control" name="confirm_password" placeholder="{{ lang.user.password_now }}" autocomplete="off" required>
           </div>
           <hr>
-          <center>
+          <div class="text-center">
             <div style="cursor:pointer" id="start_webauthn_register">
               <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24">
                 <path d="M17.81 4.47c-.08 0-.16-.02-.23-.06C15.66 3.42 14 3 12.01 3c-1.98 0-3.86.47-5.57 1.41-.24.13-.54.04-.68-.2-.13-.24-.04-.55.2-.68C7.82 2.52 9.86 2 12.01 2c2.13 0 3.99.47 6.03 1.52.25.13.34.43.21.67-.09.18-.26.28-.44.28zM3.5 9.72c-.1 0-.2-.03-.29-.09-.23-.16-.28-.47-.12-.7.99-1.4 2.25-2.5 3.75-3.27C9.98 4.04 14 4.03 17.15 5.65c1.5.77 2.76 1.86 3.75 3.25.16.22.11.54-.12.7-.23.16-.54.11-.7-.12-.9-1.26-2.04-2.25-3.39-2.94-2.87-1.47-6.54-1.47-9.4.01-1.36.7-2.5 1.7-3.4 2.96-.08.14-.23.21-.39.21zm6.25 12.07c-.13 0-.26-.05-.35-.15-.87-.87-1.34-1.43-2.01-2.64-.69-1.23-1.05-2.73-1.05-4.34 0-2.97 2.54-5.39 5.66-5.39s5.66 2.42 5.66 5.39c0 .28-.22.5-.5.5s-.5-.22-.5-.5c0-2.42-2.09-4.39-4.66-4.39-2.57 0-4.66 1.97-4.66 4.39 0 1.44.32 2.77.93 3.85.64 1.15 1.08 1.64 1.85 2.42.19.2.19.51 0 .71-.11.1-.24.15-.37.15zm7.17-1.85c-1.19 0-2.24-.3-3.1-.89-1.49-1.01-2.38-2.65-2.38-4.39 0-.28.22-.5.5-.5s.5.22.5.5c0 1.41.72 2.74 1.94 3.56.71.48 1.54.71 2.54.71.24 0 .64-.03 1.04-.1.27-.05.53.13.58.41.05.27-.13.53-.41.58-.57.11-1.07.12-1.21.12zM14.91 22c-.04 0-.09-.01-.13-.02-1.59-.44-2.63-1.03-3.72-2.1-1.4-1.39-2.17-3.24-2.17-5.22 0-1.62 1.38-2.94 3.08-2.94 1.7 0 3.08 1.32 3.08 2.94 0 1.07.93 1.94 2.08 1.94s2.08-.87 2.08-1.94c0-3.77-3.25-6.83-7.25-6.83-2.84 0-5.44 1.58-6.61 4.03-.39.81-.59 1.76-.59 2.8 0 .78.07 2.01.67 3.61.1.26-.03.55-.29.64-.26.1-.55-.04-.64-.29-.49-1.31-.73-2.61-.73-3.96 0-1.2.23-2.29.68-3.24 1.33-2.79 4.28-4.6 7.51-4.6 4.55 0 8.25 3.51 8.25 7.83 0 1.62-1.38 2.94-3.08 2.94s-3.08-1.32-3.08-2.94c0-1.07-.93-1.94-2.08-1.94s-2.08.87-2.08 1.94c0 1.71.66 3.31 1.87 4.51.95.94 1.86 1.46 3.27 1.85.27.07.42.35.35.61-.05.23-.26.38-.47.38z"></path>
               </svg>
               <p>{{ lang.tfa.start_webauthn_validation }}</p>
-              <hr>
             </div>
-          </center>
+          </div>
+          <hr>
           <p id="webauthn_status_reg"></p>
           <div class="alert alert-danger" style="display:none" id="webauthn_return_code"></div>
           <input type="hidden" name="token" id="webauthn_register_data"/>
@@ -82,16 +82,16 @@
       </div>
       <div class="modal-body">
         <form role="form" method="post">
-          <div>
+          <div class="mb-2">
             <input type="text" class="form-control" name="key_id" placeholder="{{ lang.tfa.key_id_totp }}" autocomplete="off" required>
           </div>
-          <div>
+          <div class="mb-4">
             <input type="password" class="form-control" name="confirm_password" placeholder="{{ lang.user.password_now }}" autocomplete="off" required>
           </div>
           <hr>
           <input type="hidden" value="{{ totp_secret }}" name="totp_secret">
           <input type="hidden" name="tfa_method" value="totp">
-          <ol>
+          <ol class="mb-4">
             <li>
               <p>{{ lang.tfa.scan_qr_code }}</p>
               <img id="tfa-qr-img" data-totp-secret="{{ totp_secret }}" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=">
@@ -121,12 +121,10 @@
       <div class="modal-body">
         <form role="form" method="post">
           <div class="input-group">
-            <input type="password" class="form-control input-xs-lg" name="confirm_password" placeholder="{{ lang.user.password_now }}" autocomplete="off" required>
-            <span class="input-group-btn">
-              <input type="hidden" name="tfa_method" value="none">
-              <button class="btn btn-sm d-block d-sm-inline btn-danger" type="submit" name="set_tfa">{{ lang.tfa.delete_tfa|replace({" ": "&nbsp;"})|raw }}</button>
-            </span>
+            <input type="password" class="form-control" name="confirm_password" placeholder="{{ lang.user.password_now }}" autocomplete="off" required>
+            <button class="btn btn-sm d-block d-sm-inline btn-danger" type="submit" name="set_tfa">{{ lang.tfa.delete_tfa|replace({" ": "&nbsp;"})|raw }}</button>
           </div>
+          <input type="hidden" name="tfa_method" value="none">
         </form>
       </div>
     </div>
diff --git a/data/web/templates/modals/mailbox.twig b/data/web/templates/modals/mailbox.twig
index 82e42426..432b03a5 100644
--- a/data/web/templates/modals/mailbox.twig
+++ b/data/web/templates/modals/mailbox.twig
@@ -8,14 +8,14 @@
       </div>
       <div class="modal-body">
         <form class="form-horizontal" data-cached-form="true" data-id="add_mailbox" role="form" autocomplete="off">
-          <div class="row">
-            <label class="control-label col-sm-2" for="local_part">{{ lang.add.mailbox_username }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end" 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="row">
-            <label class="control-label col-sm-2" for="domain">{{ lang.add.domain }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end" 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>
                 {% for domain in domains %}
@@ -24,14 +24,14 @@
               </select>
             </div>
           </div>
-          <div class="row">
-            <label class="control-label col-sm-2" for="name">{{ lang.add.full_name }}</label>
+          <div class="row mb-4">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end" for="name">{{ lang.add.full_name }}</label>
             <div class="col-sm-10">
               <input type="text" class="form-control" name="name">
             </div>
           </div>
-          <div class="row">
-            <label class="control-label col-sm-2" for="addInputQuota">{{ lang.add.quota_mb }}
+          <div class="row mb-4">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end" for="addInputQuota">{{ lang.add.quota_mb }}
               <br /><span id="quotaBadge" class="badge">max. - MiB</span>
             </label>
             <div class="col-sm-10">
@@ -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="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="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end" 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="row">
-            <label class="control-label col-sm-2" for="password2">{{ lang.add.password_repeat }}</label>
+          <div class="row mb-4">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end" 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="row">
+          <div class="row mb-4">
             <div class="offset-sm-2 col-sm-10">
               <select name="active" class="form-control">
                 <option value="1" selected>{{ lang.add.active }}</option>
@@ -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="row">
-            <label class="control-label col-sm-2" for="domain">{{ lang.add.domain }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end" 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="row">
-            <label class="control-label col-sm-2" for="description">{{ lang.add.description }}</label>
+          <div class="row mb-4">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end" for="description">{{ lang.add.description }}</label>
             <div class="col-sm-10">
               <input type="text" class="form-control" name="description">
             </div>
           </div>
-          <div class="row">
-            <label class="control-label col-sm-2" for="aliases">{{ lang.add.max_aliases }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end" 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="row">
-            <label class="control-label col-sm-2" for="mailboxes">{{ lang.add.max_mailboxes }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end" 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="row">
-            <label class="control-label col-sm-2" for="defquota">{{ lang.add.mailbox_quota_def }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end" 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="row">
-            <label class="control-label col-sm-2" for="maxquota">{{ lang.add.mailbox_quota_m }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end" 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="row">
-            <label class="control-label col-sm-2" for="quota">{{ lang.add.domain_quota_m }}</label>
+          <div class="row mb-4">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end" 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="row">
+          <div class="row mb-2">
             <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="row">
+          <div class="row mb-4">
             <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,8 +142,8 @@
             </div>
           </div>
           <hr>
-          <div class="row">
-            <label class="control-label col-sm-2" for="rl_frame">{{ lang.acl.ratelimit }}</label>
+          <div class="row mb-4">
+            <label class="control-label col-sm-2 text-sm-end" 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 }}">
             </div>
@@ -154,14 +154,14 @@
             </div>
           </div>
           <hr>
-          <div class="row">
-            <label class="control-label col-sm-2" for="dkim_selector">{{ lang.admin.dkim_domains_selector }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end" 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="row">
-            <label class="control-label col-sm-2" for="key_size">{{ lang.admin.dkim_key_length }}</label>
+          <div class="row mb-4">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end" 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">
                 <option data-subtext="bits">1024</option>
@@ -170,8 +170,8 @@
             </div>
           </div>
           <hr>
-          <div class="row">
-            <label class="control-label col-sm-2">{{ lang.add.backup_mx_options }}</label>
+          <div class="row mb-4">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end">{{ lang.add.backup_mx_options }}</label>
             <div class="col-sm-10">
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="backupmx"> {{ lang.add.relay_domain }}</label>
@@ -185,7 +185,7 @@
             </div>
           </div>
           <hr>
-          <div class="row">
+          <div class="row mb-4">
             <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,14 +214,14 @@
       </div>
       <div class="modal-body">
         <form class="form-horizontal" data-cached-form="true" role="form" data-id="add_resource">
-          <div class="row">
-            <label class="control-label col-sm-2" for="description">{{ lang.add.description }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end" for="description">{{ lang.add.description }}</label>
             <div class="col-sm-10">
               <input type="text" class="form-control" name="description" required>
             </div>
           </div>
-          <div class="row">
-            <label class="control-label col-sm-2" for="domain">{{ lang.add.domain }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end" for="domain">{{ lang.add.domain }}</label>
             <div class="col-sm-10">
               <select data-live-search="true" name="domain" title="{{ lang.add.select }}" required>
                 {% for domain in domains %}
@@ -230,8 +230,8 @@
               </select>
             </div>
           </div>
-          <div class="row">
-            <label class="control-label col-sm-2" for="domain">{{ lang.add.kind }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end" for="domain">{{ lang.add.kind }}</label>
             <div class="col-sm-10">
               <select name="kind" title="{{ lang.add.select }}" required>
                 <option value="location">Location</option>
@@ -240,8 +240,8 @@
               </select>
             </div>
           </div>
-          <div class="row">
-            <label class="control-label col-sm-2" for="multiple_bookings_select">{{ lang.add.multiple_bookings }}</label>
+          <div class="row mb-4">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end" 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>
                 <option value="0">{{ lang.mailbox.booking_null }}</option>
@@ -255,14 +255,14 @@
               <input type="hidden" name="multiple_bookings" id="multiple_bookings">
             </div>
           </div>
-          <div class="row">
+          <div class="row mb-2">
             <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="row">
+          <div class="row mb-4">
             <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,15 +283,15 @@
       <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="row">
-            <label class="control-label col-sm-2" for="address">{{ lang.add.alias_address }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end" 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="row">
-            <label class="control-label col-sm-2" for="goto">{{ lang.add.target_address }}</label>
+          <div class="row mb-4">
+            <label class="control-label col-sm-2 text-sm-end" 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>
               <p>{{ lang.add.target_address_info|raw }}</p>
@@ -313,14 +313,14 @@
               {% endif %}
             </div>
           </div>
-          <div class="row">
+          <div class="row mb-2">
             <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="row">
+          <div class="row mb-4">
             <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,15 +341,15 @@
       <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="row">
-            <label class="control-label col-sm-2" for="alias_domain">{{ lang.add.alias_domain }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end" 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="row">
-            <label class="control-label col-sm-2" for="target_domain">{{ lang.add.target_domain }}</label>
+          <div class="row mb-4">
+            <label class="control-label col-sm-2 text-sm-end" 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>
                 {% for domain in domains %}
@@ -358,7 +358,7 @@
               </select>
             </div>
           </div>
-          <div class="row">
+          <div class="row mb-4">
             <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,8 +366,8 @@
             </div>
           </div>
           <hr>
-          <div class="row">
-            <label class="control-label col-sm-2" for="rl_frame">{{ lang.acl.ratelimit }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end" 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 }}">
             </div>
@@ -378,14 +378,14 @@
             </div>
           </div>
           <hr>
-          <div class="row">
-            <label class="control-label col-sm-2" for="dkim_selector2">{{ lang.admin.dkim_domains_selector }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end" 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="row">
-            <label class="control-label col-sm-2" for="key_size2">{{ lang.admin.dkim_key_length }}</label>
+          <div class="row mb-4">
+            <label class="control-label col-sm-2 text-sm-end" 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">
                 <option data-subtext="bits">1024</option>
@@ -394,7 +394,7 @@
             </div>
           </div>
           <hr>
-          <div class="row">
+          <div class="row mb-4">
             <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,8 +415,8 @@
       <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="row">
-            <label class="control-label col-sm-2" for="username">{{ lang.add.username }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end" for="username">{{ lang.add.username }}</label>
             <div class="col-sm-10">
               <select data-live-search="true" name="username" required>
                 {% for mailbox in mailboxes %}
@@ -425,33 +425,33 @@
               </select>
             </div>
           </div>
-          <div class="row">
-            <label class="control-label col-sm-2" for="host1">{{ lang.add.hostname }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end" for="host1">{{ lang.add.hostname }}</label>
             <div class="col-sm-10">
               <input type="text" class="form-control" name="host1" required>
             </div>
           </div>
-          <div class="row">
-            <label class="control-label col-sm-2" for="port1">{{ lang.add.port }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end" 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="row">
-            <label class="control-label col-sm-2" for="user1">{{ lang.add.username }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end" for="user1">{{ lang.add.username }}</label>
             <div class="col-sm-10">
               <input type="text" class="form-control" name="user1" required>
             </div>
           </div>
-          <div class="row">
-            <label class="control-label col-sm-2" for="password1">{{ lang.add.password }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end" for="password1">{{ lang.add.password }}</label>
             <div class="col-sm-10">
               <input type="password" class="form-control" name="password1" required>
             </div>
           </div>
-          <div class="row">
-            <label class="control-label col-sm-2" for="enc1">{{ lang.add.enc_method }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end" for="enc1">{{ lang.add.enc_method }}</label>
             <div class="col-sm-10">
               <select name="enc1" title="{{ lang.add.select }}" required>
                 <option value="SSL" selected>SSL</option>
@@ -460,110 +460,110 @@
               </select>
             </div>
           </div>
-          <div class="row">
-            <label class="control-label col-sm-2" for="mins_interval">{{ lang.add.mins_interval }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end" 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="row">
-            <label class="control-label col-sm-2" for="subfolder2">{{ lang.edit.subfolder2|raw }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end" 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="row">
-            <label class="control-label col-sm-2" for="maxage">{{ lang.edit.maxage|raw }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end" 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="row">
-            <label class="control-label col-sm-2" for="maxbytespersecond">{{ lang.edit.maxbytespersecond|raw }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end" 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="row">
-            <label class="control-label col-sm-2" for="timeout1">{{ lang.edit.timeout1 }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end" 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="row">
-            <label class="control-label col-sm-2" for="timeout2">{{ lang.edit.timeout2 }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end" 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="row">
-            <label class="control-label col-sm-2" for="exclude">{{ lang.add.exclude }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end" 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="row">
-            <label class="control-label col-sm-2" for="custom_params">{{ lang.add.custom_params }}</label>
+          <div class="row mb-4">
+            <label class="control-label col-sm-2 text-sm-end" 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="row">
+          <div class="row mb-2">
             <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="row">
+          <div class="row mb-2">
             <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="row">
+          <div class="row mb-2">
             <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="row">
+          <div class="row mb-2">
             <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="row">
+          <div class="row mb-2">
             <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="row">
+          <div class="row mb-4">
             <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="row">
+          <div class="row mb-2">
             <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="row">
+          <div class="row mb-4">
             <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,8 +583,8 @@
       </div>
       <div class="modal-body">
         <form class="form-horizontal" data-cached-form="true" role="form" data-id="add_filter">
-          <div class="row">
-            <label class="control-label col-sm-2" for="username">{{ lang.add.username }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end" for="username">{{ lang.add.username }}</label>
             <div class="col-sm-10">
               <select data-live-search="true" name="username" required>
                 {% for mailbox in mailboxes %}
@@ -593,8 +593,8 @@
               </select>
             </div>
           </div>
-          <div class="row">
-            <label class="control-label col-sm-2" for="filter_type">{{ lang.add.sieve_type }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end" for="filter_type">{{ lang.add.sieve_type }}</label>
             <div class="col-sm-10">
               <select id="addFilterType" name="filter_type" required>
                 <option value="prefilter">Prefilter</option>
@@ -602,27 +602,27 @@
               </select>
             </div>
           </div>
-          <div class="row">
-            <label class="control-label col-sm-2" for="script_desc">{{ lang.add.sieve_desc }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end" 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="row">
-            <label class="control-label col-sm-2" for="script_data">Script:</label>
+          <div class="row mb-4">
+            <label class="control-label col-sm-2 text-sm-end" 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>
+              <p class="text-muted">{{ lang.add.activate_filter_warn }}</p>
             </div>
           </div>
-          <div class="row">
+          <div class="row mb-2">
             <div class="offset-sm-2 col-sm-10">
-              <p class="text-muted">{{ lang.add.activate_filter_warn }}</p>
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="active" checked> {{ lang.add.active }}</label>
               </div>
             </div>
           </div>
-          <div class="row">
+          <div class="row mb-4">
             <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,16 +645,16 @@
       </div>
       <div class="modal-body">
         <form class="form-horizontal" data-cached-form="true" role="form" data-id="add_bcc">
-          <div class="row">
-            <label class="control-label col-sm-2" for="local_dest">{{ lang.mailbox.bcc_local_dest }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end" 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>
                 <option selected>{{ lang.footer.loading }}</option>
               </select>
             </div>
           </div>
-          <div class="row">
-            <label class="control-label col-sm-2" for="type">{{ lang.mailbox.bcc_map_type }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end" for="type">{{ lang.mailbox.bcc_map_type }}</label>
             <div class="col-sm-10">
               <select name="type" required>
                 <option value="sender">{{ lang.mailbox.bcc_sender_map }}</option>
@@ -662,21 +662,21 @@
               </select>
             </div>
           </div>
-          <div class="row">
-            <label class="control-label col-sm-2" for="bcc_dest">{{ lang.mailbox.bcc_destination }}</label>
+          <div class="row mb-4">
+            <label class="control-label col-sm-2 text-sm-end" 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="row">
+          <div class="row mb-2">
             <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="row">
+          <div class="row mb-4">
             <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="row">
-            <label class="control-label col-sm-2" for="recipient_map_old">{{ lang.mailbox.recipient_map_old }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end" 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="row">
-            <label class="control-label col-sm-2" for="recipient_map_new">{{ lang.mailbox.recipient_map_new }}</label>
+          <div class="row mb-4">
+            <label class="control-label col-sm-2 text-sm-end" 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="row">
+          <div class="row mb-2">
             <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="row">
+          <div class="row mb-4">
             <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,15 +737,15 @@
       </div>
       <div class="modal-body">
         <form class="form-horizontal" data-cached-form="true" role="form" data-id="add_tls_policy_map">
-          <div class="row">
-            <label class="control-label col-sm-2" for="dest">{{ lang.mailbox.tls_map_dest }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end" 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="row">
-            <label class="control-label col-sm-2" for="policy">{{ lang.mailbox.tls_map_policy }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end" for="policy">{{ lang.mailbox.tls_map_policy }}</label>
             <div class="col-sm-10">
               <select class="full-width-select" name="policy" required>
                 <option value="none">none</option>
@@ -759,21 +759,21 @@
               </select>
             </div>
           </div>
-          <div class="row">
-            <label class="control-label col-sm-2" for="parameters">{{ lang.mailbox.tls_map_parameters }}</label>
+          <div class="row mb-4">
+            <label class="control-label col-sm-2 text-sm-end" 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="row">
+          <div class="row mb-2">
             <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="row">
+          <div class="row mb-4">
             <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>