[BS5] change bootstrap general

data/web/templates/admin/tab-config-admins.twig

@@ -28,7 +28,7 @@
         </legend>
         <hr />
         <div class="row">
-          <div class="col-sm-3 col-xs-5 text-right">{{ lang.tfa.tfa }}:</div>
+          <div class="col-sm-3 col-xs-5 text-end">{{ lang.tfa.tfa }}:</div>
           <div class="col-sm-9 col-xs-7">
             <p id="tfa_pretty">{{ tfa_data.pretty }}</p>
             {% include 'tfa_keys.twig' %}
@@ -36,7 +36,7 @@
           </div>
         </div>
         <div class="row">
-          <div class="col-sm-3 col-xs-5 text-right">{{ lang.tfa.set_tfa }}:</div>
+          <div class="col-sm-3 col-xs-5 text-end">{{ lang.tfa.set_tfa }}:</div>
           <div class="col-sm-9 col-xs-7">
             <select data-style="btn btn-sm dropdown-toggle bs-placeholder btn-secondary" data-width="fit" id="selectTFA" class="selectpicker" title="{{ lang.tfa.select }}">
               <option value="yubi_otp">{{ lang.tfa.yubi_otp }}</option>
@@ -52,7 +52,7 @@
           <i class="bi bi-shield-fill-check"></i>
           {{ lang.fido2.fido2_auth }}</legend><hr />
         <div class="row">
-          <div class="col-sm-3 col-xs-12 text-right text-xs-left space20">{{ lang.fido2.known_ids }}:</div>
+          <div class="col-sm-3 col-xs-12 text-sm-end text-start space20">{{ lang.fido2.known_ids }}:</div>
           <div class="col-sm-9 col-xs-12">
             <div class="table-responsive">
               <table class="table table-striped table-hover table-condensed" id="fido2_keys">
@@ -80,7 +80,7 @@
         </div>
         <br>
         <div class="row" id="status-fido2">
-          <div class="col-sm-3 col-xs-5 text-right">{{ lang.fido2.register_status }}:</div>
+          <div class="col-sm-3 col-xs-5 text-end">{{ lang.fido2.register_status }}:</div>
           <div class="col-sm-9 col-xs-7">
             <div id="fido2-alerts">-</div>
           </div>

data/web/templates/admin/tab-mailq.twig

@@ -1,8 +1,8 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-mailq" role="tabpanel" aria-labelledby="tab-mailq">
   <div class="card">
     <div class="card-header">
-      {{ lang.admin.queue_manager }} <span class="badge badge-info table-lines"></span>
-      <div class="btn-group pull-right">
+      {{ lang.admin.queue_manager }} <span class="badge bg-info table-lines"></span>
+      <div class="btn-group ms-auto">
         <button class="btn btn-xs btn-secondary refresh_table" data-draw="draw_queue" data-table="queuetable">{{ lang.admin.refresh }}</button>
       </div>
     </div>

data/web/templates/debug.twig

@@ -42,7 +42,7 @@
               </div>
               <div class="col-sm-9">
                 <div class="progress">
-                  <div class="progress-bar progress-bar-info" role="progressbar" style="width:{{ vmail_df[4] }}"></div>
+                  <div class="progress-bar bg-info" role="progressbar" style="width:{{ vmail_df[4] }}"></div>
                 </div>
               </div>
             </div>
@@ -60,7 +60,7 @@
               <div class="col-sm-9">
                 {% if solr_status != false %}
                 <div class="progress">
-                  <div class="progress-bar progress-bar-info" role="progressbar" style="width:{{ solr_status.jvm.memory.raw['used%']|round }}%"></div>
+                  <div class="progress-bar bg-info" role="progressbar" style="width:{{ solr_status.jvm.memory.raw['used%']|round }}%"></div>
                 </div>
                 <p>{{ lang.debug.jvm_memory_solr }}: {{ (solr_status.jvm.memory.total - solr_status.jvm.memory.free) }} / {{ solr_status.jvm.memory.total }}
                   ({{ solr_status.jvm.memory.raw['used%']|round }}%)</p>
@@ -88,8 +88,8 @@
                   {{ container }} ({{ container_info.Config.Image }})
                   <br class="visible-xs" />
                   <small>({{ lang.debug.started_on }} <span class="parse_date">{{ container_info.State.StartedAtHR }}</span>)</small>
-                  <a href data-bs-toggle="modal" data-container="{{ container }}" data-bs-target="#RestartContainer" class="pull-right btn btn-xs btn-secondary">{{ lang.debug.restart_container }}
-                    <i class="pull-right bi
+                  <a href data-bs-toggle="modal" data-container="{{ container }}" data-bs-target="#RestartContainer" class="ms-auto btn btn-xs btn-secondary">{{ lang.debug.restart_container }}
+                    <i class="ms-auto bi
                     {% if container_info.State.Running == 1 %}
                     bi-record-fill text-success
                     {% elseif container_info.State %}
@@ -108,8 +108,8 @@
 
       <div role="tabpanel" class="tab-pane" id="tab-postfix-logs">
         <div class="card panel-xs-lg">
-          <div class="card-header">Postfix <span class="badge badge-info table-lines"></span>
-            <div class="btn-group pull-right">
+          <div class="card-header">Postfix <span class="badge bg-info table-lines"></span>
+            <div class="btn-group ms-auto">
               <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="general_syslog" data-table="postfix_log" data-log-url="postfix" data-nrows="100">+ 100</button>
               <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="general_syslog" data-table="postfix_log" data-log-url="postfix" data-nrows="1000">+ 1000</button>
               <button class="btn btn-xs btn-xs-lg btn-secondary refresh_table" data-draw="draw_postfix_logs" data-table="postfix_log">{{ lang.admin.refresh }}</button>
@@ -125,8 +125,8 @@
 
       <div role="tabpanel" class="tab-pane" id="tab-ui">
         <div class="card panel-xs-lg">
-          <div class="card-header"> Mailcow UI <span class="badge badge-info table-lines"></span>
-            <div class="btn-group pull-right">
+          <div class="card-header"> Mailcow UI <span class="badge bg-info table-lines"></span>
+            <div class="btn-group ms-auto">
               <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="mailcow_ui" data-table="ui_logs" data-log-url="ui" data-nrows="1000">+ 1000</button>
               <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="mailcow_ui" data-table="ui_logs" data-log-url="ui" data-nrows="10000">+ 10000</button>
               <button class="btn btn-xs btn-xs-lg btn-secondary refresh_table" data-draw="draw_ui_logs" data-table="ui_logs">{{ lang.admin.refresh }}</button>
@@ -142,8 +142,8 @@
 
       <div role="tabpanel" class="tab-pane" id="tab-sasl">
         <div class="card panel-xs-lg">
-          <div class="card-header">SASL <span class="badge badge-info table-lines"></span>
-            <div class="btn-group pull-right">
+          <div class="card-header">SASL <span class="badge bg-info table-lines"></span>
+            <div class="btn-group ms-auto">
               <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="sasl_log_table" data-table="sasl_logs" data-log-url="ui" data-nrows="1000">+ 1000</button>
               <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="sasl_log_table" data-table="sasl_logs" data-log-url="ui" data-nrows="10000">+ 10000</button>
               <button class="btn btn-xs btn-xs-lg btn-secondary refresh_table" data-draw="draw_sasl_logs" data-table="sasl_logs">{{ lang.admin.refresh }}</button>
@@ -159,8 +159,8 @@
 
       <div role="tabpanel" class="tab-pane" id="tab-dovecot-logs">
         <div class="card panel-xs-lg">
-          <div class="card-header">Dovecot <span class="badge badge-info table-lines"></span>
-            <div class="btn-group pull-right">
+          <div class="card-header">Dovecot <span class="badge bg-info table-lines"></span>
+            <div class="btn-group ms-auto">
               <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="general_syslog" data-table="dovecot_log" data-log-url="dovecot" data-nrows="100">+ 100</button>
               <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="general_syslog" data-table="dovecot_log" data-log-url="dovecot" data-nrows="1000">+ 1000</button>
               <button class="btn btn-xs btn-xs-lg btn-secondary refresh_table" data-draw="draw_dovecot_logs" data-table="dovecot_log">{{ lang.admin.refresh }}</button>
@@ -176,8 +176,8 @@
 
       <div role="tabpanel" class="tab-pane" id="tab-sogo-logs">
         <div class="card panel-xs-lg">
-          <div class="card-header">SOGo <span class="badge badge-info table-lines"></span>
-            <div class="btn-group pull-right">
+          <div class="card-header">SOGo <span class="badge bg-info table-lines"></span>
+            <div class="btn-group ms-auto">
               <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="general_syslog" data-table="sogo_log" data-log-url="sogo" data-nrows="100">+ 100</button>
               <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="general_syslog" data-table="sogo_log" data-log-url="sogo" data-nrows="1000">+ 1000</button>
               <button class="btn btn-xs btn-xs-lg btn-secondary refresh_table" data-draw="draw_sogo_logs" data-table="sogo_log">{{ lang.admin.refresh }}</button>
@@ -193,8 +193,8 @@
 
       <div role="tabpanel" class="tab-pane" id="tab-netfilter-logs">
         <div class="card panel-xs-lg">
-          <div class="card-header">Netfilter <span class="badge badge-info table-lines"></span>
-            <div class="btn-group pull-right">
+          <div class="card-header">Netfilter <span class="badge bg-info table-lines"></span>
+            <div class="btn-group ms-auto">
               <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="general_syslog" data-table="netfilter_log" data-log-url="netfilter" data-nrows="100">+ 100</button>
               <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="general_syslog" data-table="netfilter_log" data-log-url="netfilter" data-nrows="1000">+ 1000</button>
               <button class="btn btn-xs btn-xs-lg btn-secondary refresh_table" data-draw="draw_netfilter_logs" data-table="netfilter_log">{{ lang.admin.refresh }}</button>
@@ -210,8 +210,8 @@
 
       <div role="tabpanel" class="tab-pane" id="tab-rspamd-history">
         <div class="card panel-xs-lg">
-          <div class="card-header">Rspamd history <span class="badge badge-info table-lines"></span>
-            <div class="btn-group pull-right">
+          <div class="card-header">Rspamd history <span class="badge bg-info table-lines"></span>
+            <div class="btn-group ms-auto">
               <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="rspamd_history" data-table="rspamd_history" data-log-url="rspamd-history" data-nrows="100">+ 100</button>
               <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="rspamd_history" data-table="rspamd_history" data-log-url="rspamd-history" data-nrows="1000">+ 1000</button>
               <button class="btn btn-xs btn-xs-lg btn-secondary refresh_table" data-draw="draw_rspamd_history" data-table="rspamd_history">{{ lang.admin.refresh }}</button>
@@ -232,8 +232,8 @@
 
       <div role="tabpanel" class="tab-pane" id="tab-autodiscover-logs">
         <div class="card panel-xs-lg">
-          <div class="card-header">Autodiscover <span class="badge badge-info table-lines"></span>
-            <div class="btn-group pull-right">
+          <div class="card-header">Autodiscover <span class="badge bg-info table-lines"></span>
+            <div class="btn-group ms-auto">
               <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="autodiscover_log" data-table="autodiscover_log" data-log-url="autodiscover" data-nrows="100">+ 100</button>
               <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="autodiscover_log" data-table="autodiscover_log" data-log-url="autodiscover" data-nrows="1000">+ 1000</button>
               <button class="btn btn-xs btn-xs-lg btn-secondary refresh_table" data-draw="draw_autodiscover_logs" data-table="autodiscover_log">{{ lang.admin.refresh }}</button>
@@ -249,8 +249,8 @@
 
       <div role="tabpanel" class="tab-pane" id="tab-watchdog-logs">
         <div class="card panel-xs-lg">
-          <div class="card-header">Watchdog <span class="badge badge-info table-lines"></span>
-            <div class="btn-group pull-right">
+          <div class="card-header">Watchdog <span class="badge bg-info table-lines"></span>
+            <div class="btn-group ms-auto">
               <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="watchdog" data-table="watchdog_log" data-log-url="watchdog" data-nrows="100">+ 100</button>
               <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="watchdog" data-table="watchdog_log" data-log-url="watchdog" data-nrows="1000">+ 1000</button>
               <button class="btn btn-xs btn-xs-lg btn-secondary refresh_table" data-draw="draw_watchdog_logs" data-table="watchdog_log">{{ lang.admin.refresh }}</button>
@@ -266,8 +266,8 @@
 
       <div role="tabpanel" class="tab-pane" id="tab-acme-logs">
         <div class="card panel-xs-lg">
-          <div class="card-header">ACME <span class="badge badge-info table-lines"></span>
-            <div class="btn-group pull-right">
+          <div class="card-header">ACME <span class="badge bg-info table-lines"></span>
+            <div class="btn-group ms-auto">
               <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="general_syslog" data-table="acme_log" data-log-url="acme" data-nrows="100">+ 100</button>
               <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="general_syslog" data-table="acme_log" data-log-url="acme" data-nrows="1000">+ 1000</button>
               <button class="btn btn-xs btn-xs-lg btn-secondary refresh_table" data-draw="draw_acme_logs" data-table="acme_log">{{ lang.admin.refresh }}</button>
@@ -283,8 +283,8 @@
 
       <div role="tabpanel" class="tab-pane" id="tab-api-logs">
         <div class="card panel-xs-lg">
-          <div class="card-header">API <span class="badge badge-info table-lines"></span>
-            <div class="btn-group pull-right">
+          <div class="card-header">API <span class="badge bg-info table-lines"></span>
+            <div class="btn-group ms-auto">
               <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="apilog" data-table="api_log" data-log-url="api" data-nrows="100">+ 100</button>
               <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="apilog" data-table="api_log" data-log-url="api" data-nrows="1000">+ 1000</button>
               <button class="btn btn-xs btn-xs-lg btn-secondary refresh_table" data-draw="draw_api_logs" data-table="api_log">{{ lang.admin.refresh }}</button>
@@ -300,8 +300,8 @@
 
       <div role="tabpanel" class="tab-pane" id="tab-api-rl">
         <div class="card panel-xs-lg">
-          <div class="card-header">Ratelimits <span class="badge badge-info table-lines"></span>
-            <div class="btn-group pull-right">
+          <div class="card-header">Ratelimits <span class="badge bg-info table-lines"></span>
+            <div class="btn-group ms-auto">
               <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="rllog" data-table="rl_log" data-log-url="ratelimited" data-nrows="100">+ 100</button>
               <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="rllog" data-table="rl_log" data-log-url="ratelimited" data-nrows="1000">+ 1000</button>
               <button class="btn btn-xs btn-xs-lg btn-secondary refresh_table" data-draw="draw_rl_logs" data-table="rl_log">{{ lang.admin.refresh }}</button>

data/web/templates/domainadmin.twig

@@ -16,7 +16,7 @@
 
     {# TFA #}
     <div class="row">
-      <div class="col-sm-3 col-xs-5 text-right">{{ lang.tfa.tfa }}</div>
+      <div class="col-sm-3 col-xs-5 text-end">{{ lang.tfa.tfa }}</div>
       <div class="col-sm-9 col-xs-7">
         <p id="tfa_pretty">{{ tfa_data.pretty }}</p>
         {% include 'tfa_keys.twig' %}
@@ -24,7 +24,7 @@
       </div>
     </div>
     <div class="row">
-      <div class="col-sm-3 col-xs-5 text-right">{{ lang.tfa.set_tfa }}</div>
+      <div class="col-sm-3 col-xs-5 text-end">{{ lang.tfa.set_tfa }}</div>
       <div class="col-sm-9 col-xs-7">
         <select id="selectTFA" class="selectpicker" title="{{ lang.tfa.select }}">
           <option value="yubi_otp">{{ lang.tfa.yubi_otp }}</option>
@@ -38,12 +38,12 @@
     <hr>
     {# FIDO2 #}
     <div class="row">
-      <div class="col-sm-3 col-xs-5 text-right">
+      <div class="col-sm-3 col-xs-5 text-end">
         <p><i class="bi bi-shield-fill-check"></i> {{ lang.fido2.fido2_auth }}</p>
       </div>
     </div>
     <div class="row">
-      <div class="col-sm-3 col-xs-5 text-right">{{ lang.fido2.known_ids }}:</div>
+      <div class="col-sm-3 col-xs-5 text-end">{{ lang.fido2.known_ids }}:</div>
       <div class="col-sm-9 col-xs-7">
         <div class="table-responsive">
           <table class="table table-striped table-hover table-condensed" id="fido2_keys">
@@ -70,7 +70,7 @@
     </div>
     <br>
     <div class="row" id="status-fido2">
-      <div class="col-sm-3 col-xs-5 text-right">{{ lang.fido2.register_status }}:</div>
+      <div class="col-sm-3 col-xs-5 text-end">{{ lang.fido2.register_status }}:</div>
       <div class="col-sm-9 col-xs-7">
         <div id="fido2-alerts">-</div>
       </div>

data/web/templates/index.twig

@@ -18,14 +18,14 @@
         {% endif %}
         <form method="post" autofill="off">
           <div class="form-group">
-            <label class="sr-only" for="login_user">{{ lang.login.username }}</label>
+            <label class="visually-hidden" for="login_user">{{ lang.login.username }}</label>
             <div class="input-group">
               <div class="input-group-text"><i class="bi bi-person-fill"></i></div>
               <input name="login_user" autocorrect="off" autocapitalize="none" type="{% if is_mobileconfig %}email{% else %}text{% endif %}" id="login_user" class="form-control" placeholder="{{ lang.login.username }}" required="" autofocus="" autocomplete="username">
             </div>
           </div>
           <div class="form-group">
-            <label class="sr-only" for="pass_user">{{ lang.login.password }}</label>
+            <label class="visually-hidden" for="pass_user">{{ lang.login.password }}</label>
             <div class="input-group">
               <div class="input-group-text"><i class="bi bi-lock-fill"></i></div>
               <input name="pass_user" type="password" id="pass_user" class="form-control" placeholder="{{ lang.login.password }}" required="" autocomplete="current-password">
@@ -42,10 +42,10 @@
               </div>
             </div>
             {% if not oauth2_request %}
-            <button type="button" {% if available_languages|length == 1 %}disabled="true"{% endif %} class="btn btn-xs-lg btn-secondary pull-right dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <button type="button" {% if available_languages|length == 1 %}disabled="true"{% endif %} class="btn btn-xs-lg btn-secondary ms-auto dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
               <span class="flag-icon flag-icon-{{ mailcow_locale }}"></span>
             </button>
-            <ul class="dropdown-menu pull-right login">
+            <ul class="dropdown-menu ms-auto login">
               {% for key, val in available_languages %}
                 <li>
                   <a class="dropdown-item {% if mailcow_locale == key %}active{% endif %}" href="?{{ query_string({'lang': key}) }}">

data/web/templates/mailbox/tab-bcc.twig

@@ -1,8 +1,8 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-bcc" role="tabpanel" aria-labelledby="tab-bcc">
   <div class="card">
     <div class="card-header">
-      {{ lang.mailbox.bcc_maps }} <span class="badge badge-info table-lines"></span>
-      <div class="btn-group pull-right hidden-xs">
+      {{ lang.mailbox.bcc_maps }} <span class="badge bg-info table-lines"></span>
+      <div class="btn-group ms-auto hidden-xs">
         <button class="btn btn-xs btn-success" href="#" data-acl="{{ acl.bcc_maps }}" data-bs-toggle="modal" data-bs-target="#addBCCModalAdmin"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_bcc_entry }}</button>
         <button class="btn btn-xs btn-secondary refresh_table" data-draw="draw_bcc_table" data-table="bcc_table">{{ lang.admin.refresh }}</button>
         <button type="button" class="btn btn-xs btn-secondary dropdown-toggle" data-bs-toggle="dropdown">{{ lang.mailbox.table_size }}
@@ -38,8 +38,8 @@
   </div>
   <div class="card{% if mailcow_cc_role != 'admin' %} hidden{% endif %}">
     <div class="card-header">
-      {{ lang.mailbox.recipient_maps }} <span class="badge badge-info table-lines"></span>
-      <div class="btn-group pull-right hidden-xs">
+      {{ lang.mailbox.recipient_maps }} <span class="badge bg-info table-lines"></span>
+      <div class="btn-group ms-auto hidden-xs">
         <button class="btn btn-xs btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addRecipientMapModalAdmin"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_recipient_map_entry }}</button>
         <button class="btn btn-xs btn-secondary refresh_table" data-draw="draw_recipient_map_table" data-table="recipient_map_table">{{ lang.admin.refresh }}</button>
         <button type="button" class="btn btn-xs btn-secondary dropdown-toggle" data-bs-toggle="dropdown">{{ lang.mailbox.table_size }}

data/web/templates/mailbox/tab-domain-aliases.twig

@@ -1,8 +1,8 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-domain-aliases" role="tabpanel" aria-labelledby="tab-domain-aliases">
   <div class="card">
     <div class="card-header">
-      {{ lang.mailbox.domain_aliases }} <span class="badge badge-info table-lines"></span>
-      <div class="btn-group pull-right hidden-xs">
+      {{ lang.mailbox.domain_aliases }} <span class="badge bg-info table-lines"></span>
+      <div class="btn-group ms-auto hidden-xs">
         <button class="btn btn-xs btn-success" href="#" data-acl="{{ acl.alias_domains }}" data-bs-toggle="modal" data-bs-target="#addAliasDomainModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_domain_alias }}</button>
         <button class="btn btn-xs btn-secondary refresh_table" data-draw="draw_aliasdomain_table" data-table="aliasdomain_table">{{ lang.admin.refresh }}</button>
         <button type="button" class="btn btn-xs btn-secondary dropdown-toggle" data-bs-toggle="dropdown">{{ lang.mailbox.table_size }}

data/web/templates/mailbox/tab-domains.twig

@@ -1,8 +1,8 @@
 <div role="tabpanel" class="tab-pane fade show active" id="tab-domains" role="tabpanel" aria-labelledby="tab-domains">
   <div class="card">
     <div class="card-header">
-      {{ lang.mailbox.domains }} <span class="badge badge-info table-lines"></span>
-      <div class="btn-group pull-right hidden-xs">
+      {{ lang.mailbox.domains }} <span class="badge bg-info table-lines"></span>
+      <div class="btn-group ms-auto hidden-xs">
         {% if mailcow_cc_role == 'admin' %}
           <button class="btn btn-xs btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addDomainModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_domain }}</button>
         {% endif %}

data/web/templates/mailbox/tab-filters.twig

@@ -1,8 +1,8 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-filters" role="tabpanel" aria-labelledby="tab-filters">
   <div class="card">
     <div class="card-header">
-      {{ lang.mailbox.filters }} <span class="badge badge-info table-lines"></span>
-      <div class="btn-group pull-right hidden-xs">
+      {{ lang.mailbox.filters }} <span class="badge bg-info table-lines"></span>
+      <div class="btn-group ms-auto hidden-xs">
         <button class="btn btn-xs btn-success" href="#" data-acl="{{ acl.filters }}" data-bs-toggle="modal" data-bs-target="#addFilterModalAdmin"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_filter }}</button>
         <button class="btn btn-xs btn-secondary refresh_table" data-draw="draw_filter_table" data-table="filter_table">{{ lang.admin.refresh }}</button>
         <button type="button" class="btn btn-xs btn-secondary dropdown-toggle" data-bs-toggle="dropdown">{{ lang.mailbox.table_size }}</button>

data/web/templates/mailbox/tab-mailboxes.twig

@@ -1,8 +1,8 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-mailboxes" role="tabpanel" aria-labelledby="tab-mailboxes">
   <div class="card">
     <div class="card-header">
-      {{ lang.mailbox.mailboxes }} <span class="badge badge-info table-lines"></span>
-      <div class="btn-group pull-right hidden-xs">
+      {{ lang.mailbox.mailboxes }} <span class="badge bg-info table-lines"></span>
+      <div class="btn-group ms-auto hidden-xs">
         <button class="btn btn-xs btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addMailboxModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_mailbox }}</button>
         <button class="btn btn-xs btn-secondary refresh_table" data-draw="draw_mailbox_table" data-table="mailbox_table">{{ lang.admin.refresh }}</button>
         <button type="button" class="btn btn-xs btn-secondary dropdown-toggle" data-bs-toggle="dropdown">{{ lang.mailbox.table_size }}</button>

data/web/templates/mailbox/tab-mbox-aliases.twig

@@ -1,8 +1,8 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-mbox-aliases" role="tabpanel" aria-labelledby="tab-mbox-aliases">
   <div class="card">
     <div class="card-header">
-      {{ lang.mailbox.aliases }} <span class="badge badge-info table-lines"></span>
-      <div class="btn-group pull-right hidden-xs">
+      {{ lang.mailbox.aliases }} <span class="badge bg-info table-lines"></span>
+      <div class="btn-group ms-auto hidden-xs">
         <button class="btn btn-xs btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addAliasModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_alias }}</button>
         <button class="btn btn-xs btn-secondary refresh_table" data-draw="draw_alias_table" data-table="alias_table">{{ lang.admin.refresh }}</button>
         <button type="button" class="btn btn-xs btn-secondary dropdown-toggle" data-bs-toggle="dropdown">{{ lang.mailbox.table_size }}</button>

data/web/templates/mailbox/tab-resources.twig

@@ -1,8 +1,8 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-resources" role="tabpanel" aria-labelledby="tab-resources">
   <div class="card">
     <div class="card-header">
-      {{ lang.mailbox.resources }} <span class="badge badge-info table-lines"></span>
-      <div class="btn-group pull-right hidden-xs">
+      {{ lang.mailbox.resources }} <span class="badge bg-info table-lines"></span>
+      <div class="btn-group ms-auto hidden-xs">
         <button class="btn btn-xs btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addResourceModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_resource }}</button>
         <button class="btn btn-xs btn-secondary refresh_table" data-draw="draw_resource_table" data-table="resource_table">{{ lang.admin.refresh }}</button>
         <button type="button" class="btn btn-xs btn-secondary dropdown-toggle" data-bs-toggle="dropdown">{{ lang.mailbox.table_size }}</button>

data/web/templates/mailbox/tab-syncjobs.twig

@@ -1,8 +1,8 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-syncjobs"  role="tabpanel" aria-labelledby="tab-syncjobs">
   <div class="card">
     <div class="card-header">
-      {{ lang.mailbox.sync_jobs }} <span class="badge badge-info table-lines"></span>
-      <div class="btn-group pull-right hidden-xs">
+      {{ lang.mailbox.sync_jobs }} <span class="badge bg-info table-lines"></span>
+      <div class="btn-group ms-auto hidden-xs">
         <button data-acl="{{ acl.syncjobs }}" class="btn btn-xs btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addSyncJobModalAdmin"><i class="bi bi-plus-lg"></i> {{ lang.user.create_syncjob }}</button>
         <button class="btn btn-xs btn-secondary refresh_table" data-draw="draw_sync_job_table" data-table="sync_job_table">{{ lang.admin.refresh }}</button>
         <button type="button" class="btn btn-xs btn-secondary dropdown-toggle" data-bs-toggle="dropdown">{{ lang.mailbox.table_size }}</button>

data/web/templates/mailbox/tab-tls-policy.twig

@@ -1,8 +1,8 @@
 <div role="tabpanel" class="tab-pane fade{% if mailcow_cc_role != 'admin' %} d-none{% endif %}" id="tab-tls-policy" role="tabpanel" aria-labelledby="tab-tls-policy">
   <div class="card">
     <div class="card-header">
-      {{ lang.mailbox.tls_policy_maps_long }} <span class="badge badge-info table-lines"></span>
-      <div class="btn-group pull-right hidden-xs">
+      {{ lang.mailbox.tls_policy_maps_long }} <span class="badge bg-info table-lines"></span>
+      <div class="btn-group ms-auto hidden-xs">
         <button class="btn btn-xs btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addTLSPolicyMapAdmin"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_tls_policy_map }}</button>
         <button class="btn btn-xs btn-secondary refresh_table" data-draw="draw_tls_policy_table" data-table="tls_policy_table">{{ lang.admin.refresh }}</button>
         <button type="button" class="btn btn-xs btn-secondary dropdown-toggle" data-bs-toggle="dropdown">{{ lang.mailbox.table_size }}</button>

data/web/templates/quarantine.twig

@@ -5,8 +5,8 @@
   <div class="col-md-12">
     <div class="card card-xs-lg">
       <div class="card-header">
-        {{ lang.quarantine.quarantine }} <span class="badge badge-info table-lines"></span>
-        <div class="btn-group pull-right">
+        {{ lang.quarantine.quarantine }} <span class="badge bg-info table-lines"></span>
+        <div class="btn-group ms-auto">
           <button class="btn btn-xs btn-xs-lg btn-secondary refresh_table" data-draw="draw_quarantine_table" data-table="quarantinetable">{{ lang.quarantine.refresh }}</button>
           <button type="button" class="btn btn-xs btn-xs-lg btn-secondary dropdown-toggle" data-bs-toggle="dropdown">{{ lang.quarantine.table_size }}</button>
           <ul class="dropdown-menu" data-table-id="quarantinetable" role="menu">

data/web/templates/user/tab-user-auth.twig

@@ -4,7 +4,7 @@
     <div class="card-body">
       {% if not skip_sogo %}
       <div class="row">
-        <div class="hidden-xs col-md-3 col-xs-5 text-right"></div>
+        <div class="hidden-xs col-md-3 col-xs-5 text-end"></div>
         <div class="col-md-3 col-xs-12">
           {% if dual_login and allow_admin_email_login == 'n' %}
             <button disabled class="btn btn-secondary btn-block btn-xs-lg">
@@ -19,7 +19,7 @@
       </div>
       <hr>
       <div class="row">
-        <div class="hidden-xs col-md-3 col-xs-5 text-right"></div>
+        <div class="hidden-xs col-md-3 col-xs-5 text-end"></div>
         <div class="col-md-9 col-xs-12">
           <p class="text-muted text-muted-mt-0">{{ lang.user.direct_protocol_access|raw }}</p>
           {% if mailboxdata.attributes.imap_access == 1 %}<div class="badge fs-5 bg-success label-protocol-access">IMAP <i class="bi bi-check-lg"></i></div>{% else %}<div class="badge fs-5 bg-danger label-protocol-access">IMAP <i class="bi bi-x-lg"></i></div>{% endif %}
@@ -32,10 +32,10 @@
       <hr>
       {% endif %}
       <div class="row">
-        <div class="col-md-3 col-xs-12 text-right text-xs-left space20">{{ lang.user.in_use }}:</div>
+        <div class="col-md-3 col-xs-12 text-sm-end text-start space20">{{ lang.user.in_use }}:</div>
         <div class="col-md-5 col-xs-12">
           <div class="progress">
-            <div class="progress-bar progress-bar-{{ mailboxdata.percent_class }}" role="progressbar" aria-valuenow="{{ mailboxdata.percent_in_use }}" aria-valuemin="0" aria-valuemax="100" style="min-width:2em;width: {{ mailboxdata.percent_in_use }}%;">
+            <div class="progress-bar bg-{{ mailboxdata.percent_class }}" role="progressbar" aria-valuenow="{{ mailboxdata.percent_in_use }}" aria-valuemin="0" aria-valuemax="100" style="min-width:2em;width: {{ mailboxdata.percent_in_use }}%;">
               {{ mailboxdata.percent_in_use }}%
             </div>
           </div>
@@ -47,12 +47,12 @@
       <hr>
       {# FIDO2 #}
       <div class="row">
-        <div class="col-sm-3 col-xs-12 text-right text-xs-left">
+        <div class="col-sm-3 col-xs-12 text-sm-end text-start">
           <p><i class="bi bi-shield-fill-check"></i> {{ lang.fido2.fido2_auth }}</p>
         </div>
       </div>
       <div class="row">
-        <div class="col-sm-3 col-xs-12 text-right text-xs-left space20">
+        <div class="col-sm-3 col-xs-12 text-sm-end text-start space20">
           {{ lang.fido2.known_ids }}:
         </div>
         <div class="col-sm-9 col-xs-12">
@@ -81,7 +81,7 @@
       </div>
       <br>
       <div class="row" id="status-fido2">
-        <div class="col-sm-3 col-xs-5 text-right">{{ lang.fido2.register_status }}:</div>
+        <div class="col-sm-3 col-xs-5 text-end">{{ lang.fido2.register_status }}:</div>
         <div class="col-sm-9 col-xs-7">
           <div id="fido2-alerts">-</div>
         </div>
@@ -89,7 +89,7 @@
       </div>
       <hr>
       <div class="row">
-        <div class="col-md-3 col-xs-12 text-right text-xs-left space20"><i class="bi bi-file-earmark-text"></i> {{ lang.user.apple_connection_profile }}:</div>
+        <div class="col-md-3 col-xs-12 text-sm-end text-start space20"><i class="bi bi-file-earmark-text"></i> {{ lang.user.apple_connection_profile }}:</div>
         <div class="col-md-9 col-xs-12">
           <p><i class="bi bi-file-earmark-post"></i> <a href="/mobileconfig.php?only_email">{{ lang.user.email }}</a> <small>IMAP, SMTP</small></p>
           <p class="text-muted">{{ lang.user.apple_connection_profile_mailonly }}</p>
@@ -100,7 +100,7 @@
         </div>
       </div>
       <div class="row">
-        <div class="col-md-3 col-xs-12 text-right text-xs-left space20"><i class="bi bi-file-earmark-text"></i> {{ lang.user.apple_connection_profile }}<br />{{ lang.user.with_app_password }}:</div>
+        <div class="col-md-3 col-xs-12 text-sm-end text-start space20"><i class="bi bi-file-earmark-text"></i> {{ lang.user.apple_connection_profile }}<br />{{ lang.user.with_app_password }}:</div>
         <div class="col-md-9 col-xs-12">
           <p><i class="bi bi-file-earmark-post"></i> <a href="/mobileconfig.php?only_email&amp;app_password">{{ lang.user.email }}</a> <small>IMAP, SMTP</small></p>
           <p class="text-muted">{{ lang.user.apple_connection_profile_mailonly }} {{ lang.user.apple_connection_profile_with_app_password }}</p>

data/web/templates/user/tab-user-details.twig

@@ -3,7 +3,7 @@
     <div class="card-header">{{ lang.user.mailbox_details }}</div>
     <div class="card-body">
       <div class="row">
-        <div class="col-sm-4 col-md-3 col-xs-12 text-right text-xs-left"><i class="bi bi-pin-angle"></i> {{ lang.user.direct_aliases }}:
+        <div class="col-sm-4 col-md-3 col-xs-12 text-sm-end text-start"><i class="bi bi-pin-angle"></i> {{ lang.user.direct_aliases }}:
           <p class="small">{{ lang.user.direct_aliases_desc }}</p>
         </div>
         <div class="col-sm-8 col-md-9 col-xs-12">
@@ -20,7 +20,7 @@
       </div>
       <br>
       <div class="row">
-        <div class="col-sm-4 col-md-3 col-xs-12 text-right text-xs-left"><i class="bi bi-share"></i> {{ lang.user.shared_aliases }}:
+        <div class="col-sm-4 col-md-3 col-xs-12 text-sm-end text-start"><i class="bi bi-share"></i> {{ lang.user.shared_aliases }}:
           <p class="small">{{ lang.user.shared_aliases_desc }}</p>
         </div>
         <div class="col-sm-8 col-md-9 col-xs-12">
@@ -37,7 +37,7 @@
       </div>
       <hr>
       <div class="row">
-        <div class="col-sm-4 col-md-3 col-xs-12 text-right text-xs-left space20">{{ lang.user.aliases_also_send_as }}:</div>
+        <div class="col-sm-4 col-md-3 col-xs-12 text-sm-end text-start space20">{{ lang.user.aliases_also_send_as }}:</div>
         <div class="col-sm-8 col-md-9 col-xs-12">
           <p>
             {% if user_get_alias_details.aliases_also_send_as == '*' %}
@@ -51,13 +51,13 @@
         </div>
       </div>
       <div class="row">
-        <div class="col-sm-4 col-md-3 col-xs-12 text-right text-xs-left space20">{{ lang.user.aliases_send_as_all }}:</div>
+        <div class="col-sm-4 col-md-3 col-xs-12 text-sm-end text-start space20">{{ lang.user.aliases_send_as_all }}:</div>
         <div class="col-sm-8 col-md-9 col-xs-12">
           <p>{% if not user_get_alias_details.aliases_send_as_all %}<i class="bi bi-x-lg"></i>{% endif %}</p>
         </div>
       </div>
       <div class="row">
-        <div class="col-sm-4 col-md-3 col-xs-12 text-right text-xs-left space20">{{ lang.user.is_catch_all }}:</div>
+        <div class="col-sm-4 col-md-3 col-xs-12 text-sm-end text-start space20">{{ lang.user.is_catch_all }}:</div>
         <div class="col-sm-8 col-md-9 col-xs-12">
           <p>{% if not user_get_alias_details.is_catch_all %}<i class="bi bi-x-lg"></i>{% endif %}</p>
         </div>

data/web/templates/user/tab-user-settings.twig

@@ -4,7 +4,7 @@
     <div class="card-body">
       {# Show tagging options #}
       <div class="row">
-        <div class="col-sm-3 col-xs-12 text-right text-xs-left text-xs-bold space20">{{ lang.user.tag_handling }}:</div>
+        <div class="col-sm-3 col-xs-12 text-sm-end text-start text-xs-bold space20">{{ lang.user.tag_handling }}:</div>
         <div class="col-sm-9 col-xs-12">
           <div class="btn-group" data-acl="{{ acl.delimiter_action }}">
             <button type="button" class="btn btn-sm btn-xs-third visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary{% if get_tagging_options == 'subfolder' %} active{% endif %}"
@@ -33,7 +33,7 @@
       </div>
       {# Show TLS policy options #}
       <div class="row">
-        <div class="col-sm-3 col-xs-12 text-right text-xs-left text-xs-bold space20">{{ lang.user.tls_policy }}:</div>
+        <div class="col-sm-3 col-xs-12 text-sm-end text-start text-xs-bold space20">{{ lang.user.tls_policy }}:</div>
         <div class="col-sm-9 col-xs-12">
           <div class="btn-group" data-acl="{{ acl.tls_policy }}">
             <button type="button" class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary{% if get_tls_policy.tls_enforce_in == '1' %} active"{% endif %}"
@@ -55,7 +55,7 @@
       </div>
       {# Show quarantine_notification options #}
       <div class="row">
-        <div class="col-sm-3 col-xs-12 text-right text-xs-left text-xs-bold space20">{{ lang.user.quarantine_notification }}:</div>
+        <div class="col-sm-3 col-xs-12 text-sm-end text-start text-xs-bold space20">{{ lang.user.quarantine_notification }}:</div>
         <div class="col-sm-9 col-xs-12">
           <div class="btn-group" data-acl="{{ acl.quarantine_notification }}">
             <button type="button" class="btn btn-sm btn-xs-quart visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary{% if quarantine_notification == 'never' %} active{% endif %}"
@@ -88,7 +88,7 @@
         </div>
       </div>
       <div class="row">
-        <div class="col-sm-3 col-xs-12 text-right text-xs-left text-xs-bold space20">{{ lang.user.quarantine_category }}:</div>
+        <div class="col-sm-3 col-xs-12 text-sm-end text-start text-xs-bold space20">{{ lang.user.quarantine_category }}:</div>
         <div class="col-sm-9 col-xs-12">
           <div class="btn-group" data-acl="{{ acl.quarantine_category }}">
             <button type="button" class="btn btn-sm btn-xs-third visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary{% if quarantine_category == 'reject' %} active{% endif %}"
@@ -117,14 +117,14 @@
       {% if not skip_sogo %}
       <hr>
       <div class="row">
-        <div class="col-sm-3 col-xs-12 text-right text-xs-left text-xs-bold space20">{{ lang.user.eas_reset }}:</div>
+        <div class="col-sm-3 col-xs-12 text-sm-end text-start text-xs-bold space20">{{ lang.user.eas_reset }}:</div>
         <div class="col-sm-9 col-xs-12">
           <button class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary" data-acl="{{ acl.eas_reset }}" data-action="delete_selected" data-text="{{ lang.user.eas_reset }}?" data-item="{{ mailcow_cc_username }}" data-id="eas_cache" data-api-url='delete/eas_cache' href="#">{{ lang.user.eas_reset_now }}</button>
           <p class="text-muted">{{ lang.user.eas_reset_help|raw }}</p>
         </div>
       </div>
       <div class="row">
-        <div class="col-sm-3 col-xs-12 text-right text-xs-left text-xs-bold space20">{{ lang.user.sogo_profile_reset }}:</div>
+        <div class="col-sm-3 col-xs-12 text-sm-end text-start text-xs-bold space20">{{ lang.user.sogo_profile_reset }}:</div>
         <div class="col-sm-9 col-xs-12">
           <button class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary" data-acl="{{ acl.sogo_profile_reset }}" data-action="delete_selected" data-text="{{ lang.user.sogo_profile_reset }}?" data-item="{{ mailcow_cc_username }}" data-id="sogo_profile" data-api-url='delete/sogo_profile' href="#">{{ lang.user.sogo_profile_reset_now }}</button>
           <p class="text-muted">{{ lang.user.sogo_profile_reset_help|raw }}</p>