From 633cf0a7229630b0048155539182ac20b4997691 Mon Sep 17 00:00:00 2001
From: Alex Tselegidis <alextselegidis@gmail.com>
Date: Tue, 23 Nov 2021 09:53:10 +0100
Subject: [PATCH] Adjusted the form elements based on the new Bootstrap 5
 structure

---
 .../components/manage_appointment_modal.php   | 60 ++++++------
 .../components/manage_unavailable_modal.php   | 20 ++--
 .../select_google_calendar_modal.php          |  4 +-
 .../working_plan_exceptions_modal.php         | 12 +--
 .../pages/account/account_login_page.php      |  6 +-
 .../pages/account/account_recovery_page.php   |  4 +-
 .../views/pages/admins/admins_page.php        | 62 ++++++------
 .../views/pages/booking/booking_step_1.php    |  4 +-
 .../views/pages/booking/booking_step_2.php    |  2 +-
 .../views/pages/booking/booking_step_3.php    | 32 +++----
 .../views/pages/calendar/calendar_page.php    |  2 +-
 .../views/pages/customers/customers_page.php  | 40 ++++----
 .../instance/instance_installation_page.php   | 40 ++++----
 .../views/pages/providers/providers_page.php  | 62 ++++++------
 .../pages/secretaries/secretaries_page.php    | 62 ++++++------
 .../service_categories_page.php               |  8 +-
 .../views/pages/services/services_page.php    | 36 +++----
 .../business_logic/business_logic_page.php    | 22 +++--
 .../settings/client_form/client_form_page.php | 26 ++---
 .../current_user/current_user_page.php        | 62 ++++++------
 .../pages/settings/general/general_page.php   | 64 ++++++-------
 .../legal_contents/legal_contents_page.php    | 28 +++---
 application/views/pages/users/users_page.php  | 96 +++++++++----------
 23 files changed, 378 insertions(+), 376 deletions(-)

diff --git a/application/views/components/manage_appointment_modal.php b/application/views/components/manage_appointment_modal.php
index e5289479..f716ca2a 100644
--- a/application/views/components/manage_appointment_modal.php
+++ b/application/views/components/manage_appointment_modal.php
@@ -23,8 +23,8 @@
 
                         <div class="row">
                             <div class="col-12 col-sm-6">
-                                <div class="form-group">
-                                    <label for="select-service" class="control-label">
+                                <div class="mb-3">
+                                    <label for="select-service" class="form-label">
                                         <?= lang('service') ?>
                                         <span class="text-danger">*</span>
                                     </label>
@@ -102,41 +102,41 @@
                                     </select>
                                 </div>
 
-                                <div class="form-group">
-                                    <label for="select-provider" class="control-label">
+                                <div class="mb-3">
+                                    <label for="select-provider" class="form-label">
                                         <?= lang('provider') ?>
                                         <span class="text-danger">*</span>
                                     </label>
                                     <select id="select-provider" class="required form-control"></select>
                                 </div>
 
-                                <div class="form-group">
-                                    <label for="appointment-location" class="control-label">
+                                <div class="mb-3">
+                                    <label for="appointment-location" class="form-label">
                                         <?= lang('location') ?>
                                     </label>
                                     <input id="appointment-location" class="form-control">
                                 </div>
 
-                                <div class="form-group">
-                                    <label for="appointment-notes" class="control-label"><?= lang('notes') ?></label>
+                                <div class="mb-3">
+                                    <label for="appointment-notes" class="form-label"><?= lang('notes') ?></label>
                                     <textarea id="appointment-notes" class="form-control" rows="3"></textarea>
                                 </div>
                             </div>
 
                             <div class="col-12 col-sm-6">
-                                <div class="form-group">
+                                <div class="mb-3">
                                     <label for="start-datetime"
-                                           class="control-label"><?= lang('start_date_time') ?></label>
+                                           class="form-label"><?= lang('start_date_time') ?></label>
                                     <input id="start-datetime" class="required form-control">
                                 </div>
 
-                                <div class="form-group">
-                                    <label for="end-datetime" class="control-label"><?= lang('end_date_time') ?></label>
+                                <div class="mb-3">
+                                    <label for="end-datetime" class="form-label"><?= lang('end_date_time') ?></label>
                                     <input id="end-datetime" class="required form-control">
                                 </div>
 
-                                <div class="form-group">
-                                    <label class="control-label"><?= lang('timezone') ?></label>
+                                <div class="mb-3">
+                                    <label class="form-label"><?= lang('timezone') ?></label>
 
                                     <ul>
                                         <li>
@@ -184,32 +184,32 @@
 
                         <div class="row">
                             <div class="col-12 col-sm-6">
-                                <div class="form-group">
-                                    <label for="first-name" class="control-label">
+                                <div class="mb-3">
+                                    <label for="first-name" class="form-label">
                                         <?= lang('first_name') ?>
                                         <span class="text-danger">*</span>
                                     </label>
                                     <input id="first-name" class="required form-control">
                                 </div>
 
-                                <div class="form-group">
-                                    <label for="last-name" class="control-label">
+                                <div class="mb-3">
+                                    <label for="last-name" class="form-label">
                                         <?= lang('last_name') ?>
                                         <span class="text-danger">*</span>
                                     </label>
                                     <input id="last-name" class="required form-control">
                                 </div>
 
-                                <div class="form-group">
-                                    <label for="email" class="control-label">
+                                <div class="mb-3">
+                                    <label for="email" class="form-label">
                                         <?= lang('email') ?>
                                         <span class="text-danger">*</span>
                                     </label>
                                     <input id="email" class="required form-control">
                                 </div>
 
-                                <div class="form-group">
-                                    <label for="phone-number" class="control-label">
+                                <div class="mb-3">
+                                    <label for="phone-number" class="form-label">
                                         <?= lang('phone_number') ?>
                                         <?php if (setting('require_phone_number') === '1'): ?>
                                             <span class="text-danger">*</span>
@@ -220,29 +220,29 @@
                                 </div>
                             </div>
                             <div class="col-12 col-sm-6">
-                                <div class="form-group">
-                                    <label for="address" class="control-label">
+                                <div class="mb-3">
+                                    <label for="address" class="form-label">
                                         <?= lang('address') ?>
                                     </label>
                                     <input id="address" class="form-control">
                                 </div>
 
-                                <div class="form-group">
-                                    <label for="city" class="control-label">
+                                <div class="mb-3">
+                                    <label for="city" class="form-label">
                                         <?= lang('city') ?>
                                     </label>
                                     <input id="city" class="form-control">
                                 </div>
 
-                                <div class="form-group">
-                                    <label for="zip-code" class="control-label">
+                                <div class="mb-3">
+                                    <label for="zip-code" class="form-label">
                                         <?= lang('zip_code') ?>
                                     </label>
                                     <input id="zip-code" class="form-control">
                                 </div>
 
-                                <div class="form-group">
-                                    <label for="customer-notes" class="control-label">
+                                <div class="mb-3">
+                                    <label for="customer-notes" class="form-label">
                                         <?= lang('notes') ?>
                                     </label>
                                     <textarea id="customer-notes" rows="2" class="form-control"></textarea>
diff --git a/application/views/components/manage_unavailable_modal.php b/application/views/components/manage_unavailable_modal.php
index edb0fbb7..9da5db72 100644
--- a/application/views/components/manage_unavailable_modal.php
+++ b/application/views/components/manage_unavailable_modal.php
@@ -18,31 +18,31 @@
                     <fieldset>
                         <input id="unavailable-id" type="hidden">
 
-                        <div class="form-group">
-                            <label for="unavailable-provider" class="control-label">
+                        <div class="mb-3">
+                            <label for="unavailable-provider" class="form-label">
                                 <?= lang('provider') ?>
                             </label>
                             <select id="unavailable-provider" class="form-control"></select>
                         </div>
 
-                        <div class="form-group">
-                            <label for="unavailable-start" class="control-label">
+                        <div class="mb-3">
+                            <label for="unavailable-start" class="form-label">
                                 <?= lang('start') ?>
                                 <span class="text-danger">*</span>
                             </label>
                             <input id="unavailable-start" class="form-control">
                         </div>
 
-                        <div class="form-group">
-                            <label for="unavailable-end" class="control-label">
+                        <div class="mb-3">
+                            <label for="unavailable-end" class="form-label">
                                 <?= lang('end') ?>
                                 <span class="text-danger">*</span>
                             </label>
                             <input id="unavailable-end" class="form-control">
                         </div>
 
-                        <div class="form-group">
-                            <label class="control-label"><?= lang('timezone') ?></label>
+                        <div class="mb-3">
+                            <label class="form-label"><?= lang('timezone') ?></label>
 
                             <ul>
                                 <li>
@@ -60,8 +60,8 @@
                             </ul>
                         </div>
 
-                        <div class="form-group">
-                            <label for="unavailable-notes" class="control-label">
+                        <div class="mb-3">
+                            <label for="unavailable-notes" class="form-label">
                                 <?= lang('notes') ?>
                             </label>
                             <textarea id="unavailable-notes" rows="3" class="form-control"></textarea>
diff --git a/application/views/components/select_google_calendar_modal.php b/application/views/components/select_google_calendar_modal.php
index d1d601f6..3827d65d 100644
--- a/application/views/components/select_google_calendar_modal.php
+++ b/application/views/components/select_google_calendar_modal.php
@@ -6,8 +6,8 @@
                 <button class="btn-close" data-bs-dismiss="modal"></button>
             </div>
             <div class="modal-body">
-                <div class="form-group">
-                    <label for="google-calendar" class="control-label">
+                <div class="mb-3">
+                    <label for="google-calendar" class="form-label">
                         <?= lang('select_google_calendar_prompt') ?>
                     </label>
                     <select id="google-calendar" class="form-control"></select>
diff --git a/application/views/components/working_plan_exceptions_modal.php b/application/views/components/working_plan_exceptions_modal.php
index 7c085f0e..939a074e 100644
--- a/application/views/components/working_plan_exceptions_modal.php
+++ b/application/views/components/working_plan_exceptions_modal.php
@@ -7,18 +7,18 @@
                 <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
             </div>
             <div class="modal-body">
-                <div class="form-group">
-                    <label for="working-plan-exceptions-date"><?= lang('date') ?></label>
+                <div class="mb-3">
+                    <label class="form-label" for="working-plan-exceptions-date"><?= lang('date') ?></label>
                     <input class="form-control" id="working-plan-exceptions-date">
                 </div>
 
-                <div class="form-group">
-                    <label for="working-plan-exceptions-start"><?= lang('start') ?></label>
+                <div class="mb-3">
+                    <label class="form-label" for="working-plan-exceptions-start"><?= lang('start') ?></label>
                     <input class="form-control" id="working-plan-exceptions-start">
                 </div>
 
-                <div class="form-group">
-                    <label for="working-plan-exceptions-end"><?= lang('end') ?></label>
+                <div class="mb-3">
+                    <label class="form-label" for="working-plan-exceptions-end"><?= lang('end') ?></label>
                     <input class="form-control" id="working-plan-exceptions-end">
                 </div>
 
diff --git a/application/views/pages/account/account_login_page.php b/application/views/pages/account/account_login_page.php
index 38a58fc4..7472f8fc 100644
--- a/application/views/pages/account/account_login_page.php
+++ b/application/views/pages/account/account_login_page.php
@@ -17,20 +17,20 @@
 <div class="alert d-none"></div>
 
 <form id="login-form">
-    <div class="form-group">
+    <div class="mb-3">
         <label for="username"><?= lang('username') ?></label>
         <input type="text" id="username"
                placeholder="<?= lang('enter_username_here') ?>"
                class="form-control"/>
     </div>
-    <div class="form-group">
+    <div class="mb-3">
         <label for="password"><?= lang('password') ?></label>
         <input type="password" id="password"
                placeholder="<?= lang('enter_password_here') ?>"
                class="form-control"/>
     </div>
 
-    <div class="form-group">
+    <div class="mb-3">
         <button type="submit" id="login" class="btn btn-primary">
             <i class="fas fa-sign-in-alt me-2"></i>
             <?= lang('login') ?>
diff --git a/application/views/pages/account/account_recovery_page.php b/application/views/pages/account/account_recovery_page.php
index bfea9a4e..6a9bb9fd 100644
--- a/application/views/pages/account/account_recovery_page.php
+++ b/application/views/pages/account/account_recovery_page.php
@@ -11,11 +11,11 @@
 <div class="alert d-none"></div>
 
 <form>
-    <div class="form-group">
+    <div class="mb-3">
         <label for="username"><?= lang('username') ?></label>
         <input type="text" id="username" placeholder="<?= lang('enter_username_here') ?>" class="form-control"/>
     </div>
-    <div class="form-group">
+    <div class="mb-3">
         <label for="email"><?= lang('email') ?></label>
         <input type="text" id="email" placeholder="<?= lang('enter_email_here') ?>" class="form-control"/>
     </div>
diff --git a/application/views/pages/admins/admins_page.php b/application/views/pages/admins/admins_page.php
index 81c185f2..6ef8511c 100755
--- a/application/views/pages/admins/admins_page.php
+++ b/application/views/pages/admins/admins_page.php
@@ -97,93 +97,93 @@
 
             <div class="row">
                 <div class="admin-details col-12 col-md-6">
-                    <div class="form-group">
-                        <label for="admin-first-name">
+                    <div class="mb-3">
+                        <label class="form-label" for="admin-first-name">
                             <?= lang('first_name') ?>
                             <span class="text-danger">*</span>
                         </label>
                         <input id="admin-first-name" class="form-control required" maxlength="256">
                     </div>
 
-                    <div class="form-group">
-                        <label for="admin-last-name">
+                    <div class="mb-3">
+                        <label class="form-label" for="admin-last-name">
                             <?= lang('last_name') ?>
                             <span class="text-danger">*</span>
                         </label>
                         <input id="admin-last-name" class="form-control required" maxlength="512">
                     </div>
 
-                    <div class="form-group">
-                        <label for="admin-email">
+                    <div class="mb-3">
+                        <label class="form-label" for="admin-email">
                             <?= lang('email') ?>
                             <span class="text-danger">*</span>
                         </label>
                         <input id="admin-email" class="form-control required" maxlength="512">
                     </div>
 
-                    <div class="form-group">
-                        <label for="admin-phone-number">
+                    <div class="mb-3">
+                        <label class="form-label" for="admin-phone-number">
                             <?= lang('phone_number') ?>
                             <span class="text-danger">*</span>
                         </label>
                         <input id="admin-phone-number" class="form-control required" maxlength="128">
                     </div>
 
-                    <div class="form-group">
-                        <label for="admin-mobile-number">
+                    <div class="mb-3">
+                        <label class="form-label" for="admin-mobile-number">
                             <?= lang('mobile_number') ?>
 
                         </label>
                         <input id="admin-mobile-number" class="form-control" maxlength="128">
                     </div>
 
-                    <div class="form-group">
-                        <label for="admin-address">
+                    <div class="mb-3">
+                        <label class="form-label" for="admin-address">
                             <?= lang('address') ?>
                         </label>
                         <input id="admin-address" class="form-control" maxlength="256">
                     </div>
 
-                    <div class="form-group">
-                        <label for="admin-city">
+                    <div class="mb-3">
+                        <label class="form-label" for="admin-city">
                             <?= lang('city') ?>
 
                         </label>
                         <input id="admin-city" class="form-control" maxlength="256">
                     </div>
 
-                    <div class="form-group">
-                        <label for="admin-state">
+                    <div class="mb-3">
+                        <label class="form-label" for="admin-state">
                             <?= lang('state') ?>
                         </label>
                         <input id="admin-state" class="form-control" maxlength="128">
                     </div>
 
-                    <div class="form-group">
-                        <label for="admin-zip-code">
+                    <div class="mb-3">
+                        <label class="form-label" for="admin-zip-code">
                             <?= lang('zip_code') ?>
                         </label>
                         <input id="admin-zip-code" class="form-control" maxlength="64">
                     </div>
 
-                    <div class="form-group">
-                        <label for="admin-notes">
+                    <div class="mb-3">
+                        <label class="form-label" for="admin-notes">
                             <?= lang('notes') ?>
                         </label>
                         <textarea id="admin-notes" class="form-control" rows="3"></textarea>
                     </div>
                 </div>
                 <div class="admin-settings col-12 col-md-6">
-                    <div class="form-group">
-                        <label for="admin-username">
+                    <div class="mb-3">
+                        <label class="form-label" for="admin-username">
                             <?= lang('username') ?>
                             <span class="text-danger">*</span>
                         </label>
                         <input id="admin-username" class="form-control required" maxlength="256">
                     </div>
 
-                    <div class="form-group">
-                        <label for="admin-password">
+                    <div class="mb-3">
+                        <label class="form-label" for="admin-password">
                             <?= lang('password') ?>
                             <span class="text-danger">*</span>
                         </label>
@@ -191,8 +191,8 @@
                                autocomplete="new-password">
                     </div>
 
-                    <div class="form-group">
-                        <label for="admin-password-confirm">
+                    <div class="mb-3">
+                        <label class="form-label" for="admin-password-confirm">
                             <?= lang('retype_password') ?>
                             <span class="text-danger">*</span>
                         </label>
@@ -200,8 +200,8 @@
                                maxlength="512" autocomplete="new-password">
                     </div>
 
-                    <div class="form-group">
-                        <label for="admin-calendar-view">
+                    <div class="mb-3">
+                        <label class="form-label" for="admin-calendar-view">
                             <?= lang('calendar') ?>
                             <span class="text-danger">*</span>
                         </label>
@@ -211,8 +211,8 @@
                         </select>
                     </div>
 
-                    <div class="form-group">
-                        <label for="admin-timezone">
+                    <div class="mb-3">
+                        <label class="form-label" for="admin-timezone">
                             <?= lang('timezone') ?>
                             <span class="text-danger">*</span>
                         </label>
@@ -223,7 +223,7 @@
 
                     <div class="custom-control custom-switch">
                         <input type="checkbox" class="custom-control-input" id="admin-notifications">
-                        <label class="custom-control-label" for="admin-notifications">
+                        <label class="custom-form-label" for="admin-notifications">
                             <?= lang('receive_notifications') ?>
                         </label>
                     </div>
diff --git a/application/views/pages/booking/booking_step_1.php b/application/views/pages/booking/booking_step_1.php
index b10623bd..6f8a7d36 100644
--- a/application/views/pages/booking/booking_step_1.php
+++ b/application/views/pages/booking/booking_step_1.php
@@ -4,7 +4,7 @@
 
         <div class="row frame-content">
             <div class="col">
-                <div class="form-group">
+                <div class="mb-3">
                     <label for="select-service">
                         <strong><?= lang('service') ?></strong>
                     </label>
@@ -79,7 +79,7 @@
                     </select>
                 </div>
 
-                <div class="form-group">
+                <div class="mb-3">
                     <label for="select-provider">
                         <strong><?= lang('provider') ?></strong>
                     </label>
diff --git a/application/views/pages/booking/booking_step_2.php b/application/views/pages/booking/booking_step_2.php
index 05d09345..8a1a8a8c 100644
--- a/application/views/pages/booking/booking_step_2.php
+++ b/application/views/pages/booking/booking_step_2.php
@@ -16,7 +16,7 @@
 
             <div class="col-12 col-md-6">
                 <div id="select-time">
-                    <div class="form-group">
+                    <div class="mb-3">
                         <label for="select-timezone"><?= lang('timezone') ?></label>
                         <?php component('timezone_dropdown','id="select-timezone" class="form-control" value="UTC"', ['timezones' => $grouped_timezones]) ?>
                     </div>
diff --git a/application/views/pages/booking/booking_step_3.php b/application/views/pages/booking/booking_step_3.php
index 46964577..9d026ae9 100644
--- a/application/views/pages/booking/booking_step_3.php
+++ b/application/views/pages/booking/booking_step_3.php
@@ -5,30 +5,30 @@
 
         <div class="row frame-content">
             <div class="col-12 col-md-6">
-                <div class="form-group">
-                    <label for="first-name" class="control-label">
+                <div class="mb-3">
+                    <label for="first-name" class="form-label">
                         <?= lang('first_name') ?>
                         <span class="text-danger">*</span>
                     </label>
                     <input type="text" id="first-name" class="required form-control" maxlength="100"/>
                 </div>
-                <div class="form-group">
-                    <label for="last-name" class="control-label">
+                <div class="mb-3">
+                    <label for="last-name" class="form-label">
                         <?= lang('last_name') ?>
                         <span class="text-danger">*</span>
                     </label>
                     <input type="text" id="last-name" class="required form-control" maxlength="120"/>
                 </div>
-                <div class="form-group">
-                    <label for="email" class="control-label">
+                <div class="mb-3">
+                    <label for="email" class="form-label">
                         <?= lang('email') ?>
                         <span class="text-danger">*</span>
                     </label>
                     <input type="text" id="email" class="required form-control" maxlength="120"/>
                 </div>
                 <?php if ($show_field['phone-number']) : ?>
-                    <div class="form-group">
-                        <label for="phone-number" class="control-label">
+                    <div class="mb-3">
+                        <label for="phone-number" class="form-label">
                             <?= lang('phone_number') ?>
                             <?= $require_phone_number === '1' ? '<span class="text-danger">*</span>' : '' ?>
                         </label>
@@ -40,32 +40,32 @@
 
             <div class="col-12 col-md-6">
                 <?php if ($show_field['address']) : ?>
-                    <div class="form-group">
-                        <label for="address" class="control-label">
+                    <div class="mb-3">
+                        <label for="address" class="form-label">
                             <?= lang('address') ?>
                         </label>
                         <input type="text" id="address" class="form-control" maxlength="120"/>
                     </div>
                 <?php endif; ?>
                 <?php if ($show_field['city']): ?>
-                    <div class="form-group">
-                        <label for="city" class="control-label">
+                    <div class="mb-3">
+                        <label for="city" class="form-label">
                             <?= lang('city') ?>
                         </label>
                         <input type="text" id="city" class="form-control" maxlength="120"/>
                     </div>
                 <?php endif; ?>
                 <?php if ($show_field['zip-code']) : ?>
-                    <div class="form-group">
-                        <label for="zip-code" class="control-label">
+                    <div class="mb-3">
+                        <label for="zip-code" class="form-label">
                             <?= lang('zip_code') ?>
                         </label>
                         <input type="text" id="zip-code" class="form-control" maxlength="120"/>
                     </div>
                 <?php endif; ?>
                 <?php if ($show_field['notes']) : ?>
-                    <div class="form-group">
-                        <label for="notes" class="control-label">
+                    <div class="mb-3">
+                        <label for="notes" class="form-label">
                             <?= lang('notes') ?>
                         </label>
                         <textarea id="notes" maxlength="500" class="form-control" rows="1"></textarea>
diff --git a/application/views/pages/calendar/calendar_page.php b/application/views/pages/calendar/calendar_page.php
index 3c401980..4738d0bc 100755
--- a/application/views/pages/calendar/calendar_page.php
+++ b/application/views/pages/calendar/calendar_page.php
@@ -75,7 +75,7 @@
 <div class="container-fluid backend-page" id="calendar-page">
     <div class="row" id="calendar-toolbar">
         <div id="calendar-filter" class="col-12 col-sm-5">
-            <div class="form-group calendar-filter-items">
+            <div class="mb-3 calendar-filter-items">
                 <select id="select-filter-item" class="form-control col"
                         data-tippy-content="<?= lang('select_filter_item_hint') ?>">
                 </select>
diff --git a/application/views/pages/customers/customers_page.php b/application/views/pages/customers/customers_page.php
index cd2de9a5..42402252 100755
--- a/application/views/pages/customers/customers_page.php
+++ b/application/views/pages/customers/customers_page.php
@@ -120,78 +120,78 @@
 
                     <div id="form-message" class="alert" style="display:none;"></div>
 
-                    <div class="form-group">
-                        <label class="control-label" for="first-name">
+                    <div class="mb-3">
+                        <label class="form-label" for="first-name">
                             <?= lang('first_name') ?>
                             <span class="text-danger">*</span>
                         </label>
                         <input id="first-name" class="form-control required">
                     </div>
 
-                    <div class="form-group">
-                        <label class="control-label" for="last-name">
+                    <div class="mb-3">
+                        <label class="form-label" for="last-name">
                             <?= lang('last_name') ?>
                             <span class="text-danger">*</span>
                         </label>
                         <input id="last-name" class="form-control required">
                     </div>
 
-                    <div class="form-group">
-                        <label class="control-label" for="email">
+                    <div class="mb-3">
+                        <label class="form-label" for="email">
                             <?= lang('email') ?>
                             <span class="text-danger">*</span>
                         </label>
                         <input id="email" class="form-control required">
                     </div>
 
-                    <div class="form-group">
-                        <label class="control-label" for="phone-number">
+                    <div class="mb-3">
+                        <label class="form-label" for="phone-number">
                             <?= lang('phone_number') ?>
                             <?= $require_phone_number === '1' ? '<span class="text-danger">*</span>' : ''; ?></label>
                         <input id="phone-number" class="form-control
                             <?= $require_phone_number === '1' ? 'required' : '' ?>">
                     </div>
 
-                    <div class="form-group">
-                        <label class="control-label" for="address">
+                    <div class="mb-3">
+                        <label class="form-label" for="address">
                             <?= lang('address') ?>
                         </label>
                         <input id="address" class="form-control">
                     </div>
 
-                    <div class="form-group">
-                        <label class="control-label" for="city">
+                    <div class="mb-3">
+                        <label class="form-label" for="city">
                             <?= lang('city') ?>
 
                         </label>
                         <input id="city" class="form-control">
                     </div>
 
-                    <div class="form-group">
-                        <label class="control-label" for="zip-code">
+                    <div class="mb-3">
+                        <label class="form-label" for="zip-code">
                             <?= lang('zip_code') ?>
                         </label>
                         <input id="zip-code" class="form-control">
                     </div>
 
-                    <div class="form-group">
-                        <label for="language">
+                    <div class="mb-3">
+                        <label class="form-label" for="language">
                             <?= lang('language') ?>
                             <span class="text-danger">*</span>
                         </label>
                         <select id="language" class="form-control required"></select>
                     </div>
 
-                    <div class="form-group">
-                        <label for="timezone">
+                    <div class="mb-3">
+                        <label class="form-label" for="timezone">
                             <?= lang('timezone') ?>
                             <span class="text-danger">*</span>
                         </label>
                         <?php component('timezone_dropdown', 'id="timezone" class="form-control required"') ?>
                     </div>
 
-                    <div class="form-group">
-                        <label class="control-label" for="notes">
+                    <div class="mb-3">
+                        <label class="form-label" for="notes">
                             <?= lang('notes') ?>
                         </label>
                         <textarea id="notes" rows="4" class="form-control"></textarea>
diff --git a/application/views/pages/instance/instance_installation_page.php b/application/views/pages/instance/instance_installation_page.php
index 985dc505..b487f703 100755
--- a/application/views/pages/instance/instance_installation_page.php
+++ b/application/views/pages/instance/instance_installation_page.php
@@ -46,38 +46,38 @@
         <div class="admin-settings col-12 col-sm-5">
             <h3>Administrator</h3>
 
-            <div class="form-group">
-                <label for="first-name" class="control-label">First Name</label>
+            <div class="mb-3">
+                <label for="first-name" class="form-label">First Name</label>
                 <input type="text" id="first-name" class="form-control"/>
             </div>
 
-            <div class="form-group">
-                <label for="last-name" class="control-label">Last Name</label>
+            <div class="mb-3">
+                <label for="last-name" class="form-label">Last Name</label>
                 <input type="text" id="last-name" class="form-control"/>
             </div>
 
-            <div class="form-group">
-                <label for="email" class="control-label">Email</label>
+            <div class="mb-3">
+                <label for="email" class="form-label">Email</label>
                 <input type="text" id="email" class="form-control"/>
             </div>
 
-            <div class="form-group">
-                <label for="phone-number" class="control-label">Phone Number</label>
+            <div class="mb-3">
+                <label for="phone-number" class="form-label">Phone Number</label>
                 <input type="text" id="phone-number" class="form-control"/>
             </div>
 
-            <div class="form-group">
-                <label for="username" class="control-label">Username</label>
+            <div class="mb-3">
+                <label for="username" class="form-label">Username</label>
                 <input type="text" id="username" class="form-control"/>
             </div>
 
-            <div class="form-group">
-                <label for="password" class="control-label">Password</label>
+            <div class="mb-3">
+                <label for="password" class="form-label">Password</label>
                 <input type="password" id="password" class="form-control"/>
             </div>
 
-            <div class="form-group">
-                <label for="retype-password" class="control-label">Retype Password</label>
+            <div class="mb-3">
+                <label for="retype-password" class="form-label">Retype Password</label>
                 <input type="password" id="retype-password" class="form-control"/>
             </div>
         </div>
@@ -85,18 +85,18 @@
         <div class="company-settings col-12 col-sm-5">
             <h3>Company</h3>
 
-            <div class="form-group">
-                <label for="company-name" class="control-label">Company Name</label>
+            <div class="mb-3">
+                <label for="company-name" class="form-label">Company Name</label>
                 <input type="text" id="company-name" class="form-control"/>
             </div>
 
-            <div class="form-group">
-                <label for="company-email" class="control-label">Company Email</label>
+            <div class="mb-3">
+                <label for="company-email" class="form-label">Company Email</label>
                 <input type="text" id="company-email" class="form-control"/>
             </div>
 
-            <div class="form-group">
-                <label for="company-link" class="control-label">Company Link</label>
+            <div class="mb-3">
+                <label for="company-link" class="form-label">Company Link</label>
                 <input type="text" id="company-link" class="form-control"/>
             </div>
         </div>
diff --git a/application/views/pages/providers/providers_page.php b/application/views/pages/providers/providers_page.php
index 80fd9d0e..ee2af617 100755
--- a/application/views/pages/providers/providers_page.php
+++ b/application/views/pages/providers/providers_page.php
@@ -123,94 +123,94 @@
 
                     <div class="row">
                         <div class="provider-details col-12 col-md-6">
-                            <div class="form-group">
-                                <label for="provider-first-name">
+                            <div class="mb-3">
+                                <label class="form-label" for="provider-first-name">
                                     <?= lang('first_name') ?>
                                     <span class="text-danger">*</span>
                                 </label>
                                 <input id="provider-first-name" class="form-control required" maxlength="256">
                             </div>
 
-                            <div class="form-group">
-                                <label for="provider-last-name">
+                            <div class="mb-3">
+                                <label class="form-label" for="provider-last-name">
                                     <?= lang('last_name') ?>
                                     <span class="text-danger">*</span>
                                 </label>
                                 <input id="provider-last-name" class="form-control required" maxlength="512">
                             </div>
 
-                            <div class="form-group">
-                                <label for="provider-email">
+                            <div class="mb-3">
+                                <label class="form-label" for="provider-email">
                                     <?= lang('email') ?>
                                     <span class="text-danger">*</span>
                                 </label>
                                 <input id="provider-email" class="form-control required" max="512">
                             </div>
 
-                            <div class="form-group">
-                                <label for="provider-phone-number">
+                            <div class="mb-3">
+                                <label class="form-label" for="provider-phone-number">
                                     <?= lang('phone_number') ?>
                                     <span class="text-danger">*</span>
                                 </label>
                                 <input id="provider-phone-number" class="form-control required" max="128">
                             </div>
 
-                            <div class="form-group">
-                                <label for="provider-mobile-number">
+                            <div class="mb-3">
+                                <label class="form-label" for="provider-mobile-number">
                                     <?= lang('mobile_number') ?>
 
                                 </label>
                                 <input id="provider-mobile-number" class="form-control" maxlength="128">
                             </div>
 
-                            <div class="form-group">
-                                <label for="provider-address">
+                            <div class="mb-3">
+                                <label class="form-label" for="provider-address">
                                     <?= lang('address') ?>
                                 </label>
                                 <input id="provider-address" class="form-control" maxlength="256">
                             </div>
 
-                            <div class="form-group">
-                                <label for="provider-city">
+                            <div class="mb-3">
+                                <label class="form-label" for="provider-city">
                                     <?= lang('city') ?>
 
                                 </label>
                                 <input id="provider-city" class="form-control" maxlength="256">
                             </div>
 
-                            <div class="form-group">
-                                <label for="provider-state">
+                            <div class="mb-3">
+                                <label class="form-label" for="provider-state">
                                     <?= lang('state') ?>
                                 </label>
                                 <input id="provider-state" class="form-control" maxlength="256">
                             </div>
 
-                            <div class="form-group">
-                                <label for="provider-zip-code">
+                            <div class="mb-3">
+                                <label class="form-label" for="provider-zip-code">
                                     <?= lang('zip_code') ?>
 
                                 </label>
                                 <input id="provider-zip-code" class="form-control" maxlength="64">
                             </div>
 
-                            <div class="form-group">
-                                <label for="provider-notes">
+                            <div class="mb-3">
+                                <label class="form-label" for="provider-notes">
                                     <?= lang('notes') ?>
                                 </label>
                                 <textarea id="provider-notes" class="form-control" rows="3"></textarea>
                             </div>
                         </div>
                         <div class="provider-settings col-12 col-md-6">
-                            <div class="form-group">
-                                <label for="provider-username">
+                            <div class="mb-3">
+                                <label class="form-label" for="provider-username">
                                     <?= lang('username') ?>
                                     <span class="text-danger">*</span>
                                 </label>
                                 <input id="provider-username" class="form-control required" maxlength="256">
                             </div>
 
-                            <div class="form-group">
-                                <label for="provider-password">
+                            <div class="mb-3">
+                                <label class="form-label" for="provider-password">
                                     <?= lang('password') ?>
                                     <span class="text-danger">*</span>
                                 </label>
@@ -218,8 +218,8 @@
                                        maxlength="512" autocomplete="new-password">
                             </div>
 
-                            <div class="form-group">
-                                <label for="provider-password-confirm">
+                            <div class="mb-3">
+                                <label class="form-label" for="provider-password-confirm">
                                     <?= lang('retype_password') ?>
                                     <span class="text-danger">*</span>
                                 </label>
@@ -228,8 +228,8 @@
                                        autocomplete="new-password">
                             </div>
 
-                            <div class="form-group">
-                                <label for="provider-calendar-view">
+                            <div class="mb-3">
+                                <label class="form-label" for="provider-calendar-view">
                                     <?= lang('calendar') ?>
                                     <span class="text-danger">*</span>
                                 </label>
@@ -239,8 +239,8 @@
                                 </select>
                             </div>
 
-                            <div class="form-group">
-                                <label for="provider-timezone">
+                            <div class="mb-3">
+                                <label class="form-label" for="provider-timezone">
                                     <?= lang('timezone') ?>
                                     <span class="text-danger">*</span>
                                 </label>
@@ -251,7 +251,7 @@
 
                             <div class="custom-control custom-switch">
                                 <input type="checkbox" class="custom-control-input" id="provider-notifications">
-                                <label class="custom-control-label" for="provider-notifications">
+                                <label class="custom-form-label" for="provider-notifications">
                                     <?= lang('receive_notifications') ?>
                                 </label>
                             </div>
diff --git a/application/views/pages/secretaries/secretaries_page.php b/application/views/pages/secretaries/secretaries_page.php
index 5470bb3d..e1d8971b 100755
--- a/application/views/pages/secretaries/secretaries_page.php
+++ b/application/views/pages/secretaries/secretaries_page.php
@@ -99,92 +99,92 @@
 
             <div class="row">
                 <div class="secretary-details col-12 col-md-6">
-                    <div class="form-group">
-                        <label for="secretary-first-name">
+                    <div class="mb-3">
+                        <label class="form-label" for="secretary-first-name">
                             <?= lang('first_name') ?>
                             <span class="text-danger">*</span>
                         </label>
                         <input id="secretary-first-name" class="form-control required" maxlength="256">
                     </div>
 
-                    <div class="form-group">
-                        <label for="secretary-last-name">
+                    <div class="mb-3">
+                        <label class="form-label" for="secretary-last-name">
                             <?= lang('last_name') ?>
                             <span class="text-danger">*</span>
                         </label>
                         <input id="secretary-last-name" class="form-control required" maxlength="512">
                     </div>
 
-                    <div class="form-group">
-                        <label for="secretary-email">
+                    <div class="mb-3">
+                        <label class="form-label" for="secretary-email">
                             <?= lang('email') ?>
                             <span class="text-danger">*</span>
                         </label>
                         <input id="secretary-email" class="form-control required" maxlength="512">
                     </div>
 
-                    <div class="form-group">
-                        <label for="secretary-phone-number">
+                    <div class="mb-3">
+                        <label class="form-label" for="secretary-phone-number">
                             <?= lang('phone_number') ?>
                             <span class="text-danger">*</span>
                         </label>
                         <input id="secretary-phone-number" class="form-control required" maxlength="128">
                     </div>
 
-                    <div class="form-group">
-                        <label for="secretary-mobile-number">
+                    <div class="mb-3">
+                        <label class="form-label" for="secretary-mobile-number">
                             <?= lang('mobile_number') ?>
 
                         </label>
                         <input id="secretary-mobile-number" class="form-control" maxlength="128">
                     </div>
 
-                    <div class="form-group">
-                        <label for="secretary-address">
+                    <div class="mb-3">
+                        <label class="form-label" for="secretary-address">
                             <?= lang('address') ?>
                         </label>
                         <input id="secretary-address" class="form-control" maxlength="256">
                     </div>
 
-                    <div class="form-group">
-                        <label for="secretary-city">
+                    <div class="mb-3">
+                        <label class="form-label" for="secretary-city">
                             <?= lang('city') ?>
                         </label>
                         <input id="secretary-city" class="form-control" maxlength="256">
                     </div>
 
-                    <div class="form-group">
-                        <label for="secretary-state">
+                    <div class="mb-3">
+                        <label class="form-label" for="secretary-state">
                             <?= lang('state') ?>
                         </label>
                         <input id="secretary-state" class="form-control" maxlength="128">
                     </div>
 
-                    <div class="form-group">
-                        <label for="secretary-zip-code">
+                    <div class="mb-3">
+                        <label class="form-label" for="secretary-zip-code">
                             <?= lang('zip_code') ?>
                         </label>
                         <input id="secretary-zip-code" class="form-control" maxlength="64">
                     </div>
 
-                    <div class="form-group">
-                        <label for="secretary-notes">
+                    <div class="mb-3">
+                        <label class="form-label" for="secretary-notes">
                             <?= lang('notes') ?>
                         </label>
                         <textarea id="secretary-notes" class="form-control" rows="3"></textarea>
                     </div>
                 </div>
                 <div class="secretary-settings col-12 col-md-6">
-                    <div class="form-group">
-                        <label for="secretary-username">
+                    <div class="mb-3">
+                        <label class="form-label" for="secretary-username">
                             <?= lang('username') ?>
                             <span class="text-danger">*</span>
                         </label>
                         <input id="secretary-username" class="form-control required" maxlength="256">
                     </div>
 
-                    <div class="form-group">
-                        <label for="secretary-password">
+                    <div class="mb-3">
+                        <label class="form-label" for="secretary-password">
                             <?= lang('password') ?>
                             <span class="text-danger">*</span>
                         </label>
@@ -192,8 +192,8 @@
                                maxlength="512" autocomplete="new-password">
                     </div>
 
-                    <div class="form-group">
-                        <label for="secretary-password-confirm">
+                    <div class="mb-3">
+                        <label class="form-label" for="secretary-password-confirm">
                             <?= lang('retype_password') ?>
                             <span class="text-danger">*</span>
                         </label>
@@ -201,8 +201,8 @@
                                maxlength="512" autocomplete="new-password">
                     </div>
 
-                    <div class="form-group">
-                        <label for="secretary-calendar-view">
+                    <div class="mb-3">
+                        <label class="form-label" for="secretary-calendar-view">
                             <?= lang('calendar') ?>
                             <span class="text-danger">*</span>
                         </label>
@@ -212,8 +212,8 @@
                         </select>
                     </div>
 
-                    <div class="form-group">
-                        <label for="secretary-timezone">
+                    <div class="mb-3">
+                        <label class="form-label" for="secretary-timezone">
                             <?= lang('timezone') ?>
                             <span class="text-danger">*</span>
                         </label>
@@ -224,7 +224,7 @@
 
                     <div class="custom-control custom-switch">
                         <input type="checkbox" class="custom-control-input" id="secretary-notifications">
-                        <label class="custom-control-label" for="secretary-notifications">
+                        <label class="custom-form-label" for="secretary-notifications">
                             <?= lang('receive_notifications') ?>
                         </label>
                     </div>
diff --git a/application/views/pages/service_categories/service_categories_page.php b/application/views/pages/service_categories/service_categories_page.php
index ecaa98cc..f17ed14c 100755
--- a/application/views/pages/service_categories/service_categories_page.php
+++ b/application/views/pages/service_categories/service_categories_page.php
@@ -94,16 +94,16 @@
 
             <input type="hidden" id="category-id">
 
-            <div class="form-group">
-                <label for="category-name">
+            <div class="mb-3">
+                <label class="form-label" for="category-name">
                     <?= lang('name') ?>
                     <span class="text-danger">*</span>
                 </label>
                 <input id="category-name" class="form-control required">
             </div>
 
-            <div class="form-group">
-                <label for="category-description">
+            <div class="mb-3">
+                <label class="form-label" for="category-description">
                     <?= lang('description') ?>
 
                 </label>
diff --git a/application/views/pages/services/services_page.php b/application/views/pages/services/services_page.php
index 74c96575..dd2f313e 100755
--- a/application/views/pages/services/services_page.php
+++ b/application/views/pages/services/services_page.php
@@ -93,47 +93,47 @@
 
             <input type="hidden" id="service-id">
 
-            <div class="form-group">
-                <label for="service-name">
+            <div class="mb-3">
+                <label class="form-label" for="service-name">
                     <?= lang('name') ?>
                     <span class="text-danger">*</span>
                 </label>
                 <input id="service-name" class="form-control required" maxlength="128">
             </div>
 
-            <div class="form-group">
-                <label for="service-duration">
+            <div class="mb-3">
+                <label class="form-label"  for="service-duration">
                     <?= lang('duration_minutes') ?>
                     <span class="text-danger">*</span>
                 </label>
                 <input id="service-duration" class="form-control required" type="number" min="<?= EVENT_MINIMUM_DURATION ?>">
             </div>
 
-            <div class="form-group">
-                <label for="service-price">
+            <div class="mb-3">
+                <label class="form-label"  for="service-price">
                     <?= lang('price') ?>
                     <span class="text-danger">*</span>
                 </label>
                 <input id="service-price" class="form-control required">
             </div>
 
-            <div class="form-group">
-                <label for="service-currency">
+            <div class="mb-3">
+                <label class="form-label"  for="service-currency">
                     <?= lang('currency') ?>
 
                 </label>
                 <input id="service-currency" class="form-control" maxlength="32">
             </div>
 
-            <div class="form-group">
-                <label for="service-category">
+            <div class="mb-3">
+                <label class="form-label"  for="service-category">
                     <?= lang('category') ?>
                 </label>
                 <select id="service-category" class="form-control"></select>
             </div>
 
-            <div class="form-group">
-                <label for="service-availabilities-type">
+            <div class="mb-3">
+                <label class="form-label"  for="service-availabilities-type">
                     <?= lang('availabilities_type') ?>
 
                 </label>
@@ -147,24 +147,24 @@
                 </select>
             </div>
 
-            <div class="form-group">
-                <label for="service-attendants-number">
+            <div class="mb-3">
+                <label class="form-label"  for="service-attendants-number">
                     <?= lang('attendants_number') ?>
                     <span class="text-danger">*</span>
                 </label>
                 <input id="service-attendants-number" class="form-control required" type="number" min="1">
             </div>
 
-            <div class="form-group">
-                <label for="service-location">
+            <div class="mb-3">
+                <label class="form-label"  for="service-location">
                     <?= lang('location') ?>
 
                 </label>
                 <input id="service-location" class="form-control">
             </div>
 
-            <div class="form-group">
-                <label for="service-description">
+            <div class="mb-3">
+                <label class="form-label"  for="service-description">
                     <?= lang('description') ?>
                 </label>
                 <textarea id="service-description" rows="4" class="form-control"></textarea>
diff --git a/application/views/pages/settings/business_logic/business_logic_page.php b/application/views/pages/settings/business_logic/business_logic_page.php
index 9d837d07..247576db 100755
--- a/application/views/pages/settings/business_logic/business_logic_page.php
+++ b/application/views/pages/settings/business_logic/business_logic_page.php
@@ -59,9 +59,10 @@
                 <div class="row">
                     <div class="col-12 col-sm-7 working-plan-wrapper">
                         <h4><?= lang('working_plan') ?></h4>
-                        <span class="form-text text-muted mb-4">
-                                <?= lang('edit_working_plan_hint') ?>
-                            </span>
+                        
+                        <div class="form-text text-muted mb-4">
+                            <?= lang('edit_working_plan_hint') ?>
+                        </div>
 
                         <table class="working-plan table table-striped">
                             <thead>
@@ -84,22 +85,23 @@
                         <br>
 
                         <h4><?= lang('book_advance_timeout') ?></h4>
-                        <div class="form-group">
-                            <label for="book-advance-timeout"
-                                   class="control-label"><?= lang('timeout_minutes') ?></label>
+                        <div class="mb-3">
+                            <label for="book-advance-timeout" class="form-label">
+                                <?= lang('timeout_minutes') ?>
+                            </label>
                             <input id="book-advance-timeout" data-field="book_advance_timeout" class="form-control"
                                    type="number" min="15">
-                            <p class="form-text text-muted">
+                            <div class="form-text text-muted">
                                 <?= lang('book_advance_timeout_hint') ?>
-                            </p>
+                            </div>
                         </div>
                     </div>
                     <div class="col-12 col-sm-5 breaks-wrapper">
                         <h4><?= lang('breaks') ?></h4>
 
                         <span class="form-text text-muted">
-                                <?= lang('edit_breaks_hint') ?>
-                            </span>
+                            <?= lang('edit_breaks_hint') ?>
+                        </span>
 
                         <div class="mt-2">
                             <button type="button" class="add-break btn btn-primary">
diff --git a/application/views/pages/settings/client_form/client_form_page.php b/application/views/pages/settings/client_form/client_form_page.php
index 0021fbf4..2b999cbf 100755
--- a/application/views/pages/settings/client_form/client_form_page.php
+++ b/application/views/pages/settings/client_form/client_form_page.php
@@ -56,7 +56,7 @@
 
                 <div class="wrapper row">
                     <div class="col-12 col-sm-3">
-                        <div class="form-group">
+                        <div class="mb-3">
                             <label for="show-phone-number">
                                 <?= lang('phone_number') ?>
                             </label>
@@ -72,7 +72,7 @@
                                 </span>
                             </button>
                         </div>
-                        <div class="form-group">
+                        <div class="mb-3">
                             <label for="show-address">
                                 <?= lang('address') ?>
                             </label>
@@ -88,7 +88,7 @@
                                 </span>
                             </button>
                         </div>
-                        <div class="form-group">
+                        <div class="mb-3">
                             <label for="show-city">
                                 <?= lang('city') ?>
                             </label>
@@ -104,7 +104,7 @@
                                 </span>
                             </button>
                         </div>
-                        <div class="form-group">
+                        <div class="mb-3">
                             <label for="show-zip-code">
                                 <?= lang('zip_code') ?>
                             </label>
@@ -120,7 +120,7 @@
                                 </span>
                             </button>
                         </div>
-                        <div class="form-group">
+                        <div class="mb-3">
                             <label for="show-notes">
                                 <?= lang('notes') ?>
                             </label>
@@ -139,10 +139,10 @@
                     </div>
 
                     <div class="col-12 col-sm-9">
-                        <div class="form-group">
+                        <div class="mb-3">
                             <div class="custom-control custom-switch">
                                 <input type="checkbox" class="custom-control-input" id="customer-notifications">
-                                <label class="custom-control-label" for="customer-notifications">
+                                <label class="custom-form-label" for="customer-notifications">
                                     <?= lang('customer_notifications') ?>
                                 </label>
                             </div>
@@ -150,10 +150,10 @@
                                     <?= lang('customer_notifications_hint') ?>
                                 </span>
                         </div>
-                        <div class="form-group">
+                        <div class="mb-3">
                             <div class="custom-control custom-switch">
                                 <input type="checkbox" class="custom-control-input" id="require-captcha">
-                                <label class="custom-control-label" for="require-captcha">
+                                <label class="custom-form-label" for="require-captcha">
                                     CAPTCHA
                                 </label>
                             </div>
@@ -161,10 +161,10 @@
                                     <?= lang('require_captcha_hint') ?>
                                 </span>
                         </div>
-                        <div class="form-group">
+                        <div class="mb-3">
                             <div class="custom-control custom-switch">
                                 <input type="checkbox" class="custom-control-input" id="require-phone-number">
-                                <label class="custom-control-label" for="require-phone-number">
+                                <label class="custom-form-label" for="require-phone-number">
                                     <?= lang('phone_number') ?>
                                 </label>
                             </div>
@@ -172,10 +172,10 @@
                                     <?= lang('require_phone_number_hint') ?>
                                 </span>
                         </div>
-                        <div class="form-group">
+                        <div class="mb-3">
                             <div class="custom-control custom-switch">
                                 <input type="checkbox" class="custom-control-input" id="display-any-provider">
-                                <label class="custom-control-label" for="display-any-provider">
+                                <label class="custom-form-label" for="display-any-provider">
                                     <?= lang('any_provider') ?>
                                 </label>
                             </div>
diff --git a/application/views/pages/settings/current_user/current_user_page.php b/application/views/pages/settings/current_user/current_user_page.php
index f01f214b..c4aafad2 100644
--- a/application/views/pages/settings/current_user/current_user_page.php
+++ b/application/views/pages/settings/current_user/current_user_page.php
@@ -56,75 +56,75 @@
 
                     <input type="hidden" id="user-id">
 
-                    <div class="form-group">
-                        <label for="first-name">
+                    <div class="mb-3">
+                        <label class="form-label" for="first-name">
                             <?= lang('first_name') ?>
                             <span class="text-danger">*</span>
                         </label>
                         <input id="first-name" class="form-control required">
                     </div>
 
-                    <div class="form-group">
-                        <label for="last-name">
+                    <div class="mb-3">
+                        <label class="form-label" for="last-name">
                             <?= lang('last_name') ?>
                             <span class="text-danger">*</span>
                         </label>
                         <input id="last-name" class="form-control required">
                     </div>
 
-                    <div class="form-group">
-                        <label for="email">
+                    <div class="mb-3">
+                        <label class="form-label" for="email">
                             <?= lang('email') ?>
                             <span class="text-danger">*</span>
                         </label>
                         <input id="email" class="form-control required">
                     </div>
 
-                    <div class="form-group">
-                        <label for="phone-number">
+                    <div class="mb-3">
+                        <label class="form-label" for="phone-number">
                             <?= lang('phone_number') ?>
                             <span class="text-danger">*</span>
                         </label>
                         <input id="phone-number" class="form-control required">
                     </div>
 
-                    <div class="form-group">
-                        <label for="mobile-number">
+                    <div class="mb-3">
+                        <label class="form-label" for="mobile-number">
                             <?= lang('mobile_number') ?>
                         </label>
                         <input id="mobile-number" class="form-control">
                     </div>
 
-                    <div class="form-group">
-                        <label for="address">
+                    <div class="mb-3">
+                        <label class="form-label" for="address">
                             <?= lang('address') ?>
                         </label>
                         <input id="address" class="form-control">
                     </div>
 
-                    <div class="form-group">
-                        <label for="city">
+                    <div class="mb-3">
+                        <label class="form-label" for="city">
                             <?= lang('city') ?>
                         </label>
                         <input id="city" class="form-control">
                     </div>
 
-                    <div class="form-group">
-                        <label for="state">
+                    <div class="mb-3">
+                        <label class="form-label" for="state">
                             <?= lang('state') ?>
                         </label>
                         <input id="state" class="form-control">
                     </div>
 
-                    <div class="form-group">
-                        <label for="zip-code">
+                    <div class="mb-3">
+                        <label class="form-label" for="zip-code">
                             <?= lang('zip_code') ?>
                         </label>
                         <input id="zip-code" class="form-control">
                     </div>
 
-                    <div class="form-group">
-                        <label for="notes">
+                    <div class="mb-3">
+                        <label class="form-label" for="notes">
                             <?= lang('notes') ?>
                         </label>
                         <textarea id="notes" class="form-control" rows="3"></textarea>
@@ -136,31 +136,31 @@
                         <?= lang('system_login') ?>
                     </legend>
 
-                    <div class="form-group">
-                        <label for="username">
+                    <div class="mb-3">
+                        <label class="form-label" for="username">
                             <?= lang('username') ?>
                             <span class="text-danger">*</span>
                         </label>
                         <input id="username" class="form-control required">
                     </div>
 
-                    <div class="form-group">
-                        <label for="password">
+                    <div class="mb-3">
+                        <label class="form-label" for="password">
                             <?= lang('password') ?>
                         </label>
                         <input type="password" id="password" class="form-control" autocomplete="new-password">
                     </div>
 
-                    <div class="form-group">
-                        <label for="retype-password">
+                    <div class="mb-3">
+                        <label class="form-label" for="retype-password">
                             <?= lang('retype_password') ?>
                         </label>
                         <input type="password" id="retype-password" class="form-control"
                                autocomplete="new-password">
                     </div>
 
-                    <div class="form-group">
-                        <label for="calendar-view"><?= lang('calendar') ?>
+                    <div class="mb-3">
+                        <label class="form-label" for="calendar-view"><?= lang('calendar') ?>
                             <span class="text-danger">*</span>
                         </label>
                         <select id="calendar-view" class="form-control required">
@@ -169,8 +169,8 @@
                         </select>
                     </div>
 
-                    <div class="form-group">
-                        <label for="timezone">
+                    <div class="mb-3">
+                        <label class="form-label" for="timezone">
                             <?= lang('timezone') ?>
                         </label>
                         <?= render_timezone_dropdown('id="timezone" class="form-control"') ?>
@@ -178,7 +178,7 @@
 
                     <div class="custom-control custom-switch">
                         <input type="checkbox" class="custom-control-input" id="user-notifications">
-                        <label class="custom-control-label" for="user-notifications">
+                        <label class="custom-form-label" for="user-notifications">
                             <?= lang('receive_notifications') ?>
                         </label>
                     </div>
diff --git a/application/views/pages/settings/general/general_page.php b/application/views/pages/settings/general/general_page.php
index b959f515..a9c48104 100755
--- a/application/views/pages/settings/general/general_page.php
+++ b/application/views/pages/settings/general/general_page.php
@@ -54,40 +54,40 @@
 
                     <div class="wrapper row">
                         <div class="col-12 col-sm-6">
-                            <div class="form-group">
-                                <label for="company-name">
+                            <div class="mb-3">
+                                <label class="form-label" for="company-name">
                                     <?= lang('company_name') ?>
                                     <span class="text-danger">*</span>
                                 </label>
                                 <input id="company-name" data-field="company_name" class="required form-control">
-                                <span class="form-text text-muted">
+                                <div class="form-text text-muted">
                                     <?= lang('company_name_hint') ?>
-                                </span>
+                                </div>
                             </div>
 
-                            <div class="form-group">
-                                <label for="company-email">
+                            <div class="mb-3">
+                                <label class="form-label" for="company-email">
                                     <?= lang('company_email') ?>
                                     <span class="text-danger">*</span>
                                 </label>
                                 <input id="company-email" data-field="company_email" class="required form-control">
-                                <span class="form-text text-muted">
+                                <div class="form-text text-muted">
                                     <?= lang('company_email_hint') ?>
-                                </span>
+                                </div>
                             </div>
 
-                            <div class="form-group">
-                                <label for="company-link">
+                            <div class="mb-3">
+                                <label class="form-label" for="company-link">
                                     <?= lang('company_link') ?>
                                     <span class="text-danger">*</span>
                                 </label>
                                 <input id="company-link" data-field="company_link" class="required form-control">
-                                <span class="form-text text-muted">
+                                <div class="form-text text-muted">
                                     <?= lang('company_link_hint') ?>
-                                </span>
+                                </div>
                             </div>
-                            <div class="form-group">
-                                <label for="date-format">
+                            <div class="mb-3">
+                                <label class="form-label" for="date-format">
                                     <?= lang('date_format') ?>
                                 </label>
                                 <select class="form-control" id="date-format" data-field="date_format">
@@ -95,24 +95,24 @@
                                     <option value="MDY">MDY</option>
                                     <option value="YMD">YMD</option>
                                 </select>
-                                <span class="form-text text-muted">
+                                <div class="form-text text-muted">
                                     <?= lang('date_format_hint') ?>
-                                </span>
+                                </div>
                             </div>
-                            <div class="form-group">
-                                <label for="time-format">
+                            <div class="mb-3">
+                                <label class="form-label" for="time-format">
                                     <?= lang('time_format') ?>
                                 </label>
                                 <select class="form-control" id="time-format" data-field="time_format">
                                     <option value="<?= TIME_FORMAT_REGULAR ?>">H:MM AM/PM</option>
                                     <option value="<?= TIME_FORMAT_MILITARY ?>">HH:MM</option>
                                 </select>
-                                <span class="form-text text-muted">
+                                <div class="form-text text-muted">
                                     <?= lang('time_format_hint') ?>
-                                </span>
+                                </div>
                             </div>
-                            <div class="form-group">
-                                <label for="first-weekday">
+                            <div class="mb-3">
+                                <label class="form-label" for="first-weekday">
                                     <?= lang('first_weekday') ?>
                                 </label>
                                 <select class="form-control" id="first-weekday" data-field="first_weekday">
@@ -124,27 +124,27 @@
                                     <option value="friday"><?= lang('friday') ?></option>
                                     <option value="saturday"><?= lang('saturday') ?></option>
                                 </select>
-                                <span class="form-text text-muted">
+                                <div class="form-text text-muted">
                                     <?= lang('first_weekday_hint') ?>
-                                </span>
+                                </div>
                             </div>
                         </div>
                         <div class="col-12 col-sm-6">
-                            <div class="form-group">
-                                <label for="google-analytics-code">
+                            <div class="mb-3">
+                                <label class="form-label" for="google-analytics-code">
                                     Google Analytics ID</label>
                                 <input id="google-analytics-code" placeholder="UA-XXXXXXXX-XX or G-XXXXXXXXXX"
                                        data-field="google_analytics_code" class="form-control">
-                                <span class="form-text text-muted">
+                                <div class="form-text text-muted">
                                     <?= lang('google_analytics_code_hint') ?>
-                                </span>
+                                </div>
                             </div>
-                            <div class="form-group">
-                                <label for="api-token">API Token</label>
+                            <div class="mb-3">
+                                <label class="form-label" for="api-token">API Token</label>
                                 <input id="api-token" data-field="api_token" class="form-control">
-                                <span class="form-text text-muted">
+                                <div class="form-text text-muted">
                                     <?= lang('api_token_hint') ?>
-                                </span>
+                                </div>
                             </div>
 
 
diff --git a/application/views/pages/settings/legal_contents/legal_contents_page.php b/application/views/pages/settings/legal_contents/legal_contents_page.php
index f21d32f9..0257e759 100755
--- a/application/views/pages/settings/legal_contents/legal_contents_page.php
+++ b/application/views/pages/settings/legal_contents/legal_contents_page.php
@@ -54,58 +54,58 @@
                     <div class="col-12 col-sm-11 col-md-10 col-lg-9">
                         <h4><?= lang('cookie_notice') ?></h4>
 
-                        <div class="form-group">
+                        <div class="mb-3">
                             <div class="custom-control custom-checkbox">
                                 <input class="custom-control-input" type="checkbox" id="display-cookie-notice">
-                                <label class="custom-control-label" for="display-cookie-notice">
+                                <label class="custom-form-label" for="display-cookie-notice">
                                     <?= lang('display_cookie_notice') ?>
                                 </label>
                             </div>
                         </div>
 
-                        <div class="form-group">
+                        <div class="mb-3">
                             <label><?= lang('cookie_notice_content') ?></label>
-                            <textarea id="cookie-notice-content" cols="30" rows="10" class="form-group"></textarea>
+                            <textarea id="cookie-notice-content" cols="30" rows="10" class="mb-3"></textarea>
                         </div>
 
                         <br>
 
                         <h4><?= lang('terms_and_conditions') ?></h4>
 
-                        <div class="form-group">
-                            <div class="form-group">
+                        <div class="mb-3">
+                            <div class="mb-3">
                                 <div class="custom-control custom-checkbox">
                                     <input class="custom-control-input" type="checkbox"
                                            id="display-terms-and-conditions">
-                                    <label class="custom-control-label" for="display-terms-and-conditions">
+                                    <label class="custom-form-label" for="display-terms-and-conditions">
                                         <?= lang('display_terms_and_conditions') ?>
                                     </label>
                                 </div>
                             </div>
                         </div>
 
-                        <div class="form-group">
+                        <div class="mb-3">
                             <label><?= lang('terms_and_conditions_content') ?></label>
                             <textarea id="terms-and-conditions-content" cols="30" rows="10"
-                                      class="form-group"></textarea>
+                                      class="mb-3"></textarea>
                         </div>
 
                         <h4><?= lang('privacy_policy') ?></h4>
 
-                        <div class="form-group">
-                            <div class="form-group">
+                        <div class="mb-3">
+                            <div class="mb-3">
                                 <div class="custom-control custom-checkbox">
                                     <input class="custom-control-input" type="checkbox" id="display-privacy-policy">
-                                    <label class="custom-control-label" for="display-privacy-policy">
+                                    <label class="custom-form-label" for="display-privacy-policy">
                                         <?= lang('display_privacy_policy') ?>
                                     </label>
                                 </div>
                             </div>
                         </div>
 
-                        <div class="form-group">
+                        <div class="mb-3">
                             <label><?= lang('privacy_policy_content') ?></label>
-                            <textarea id="privacy-policy-content" cols="30" rows="10" class="form-group"></textarea>
+                            <textarea id="privacy-policy-content" cols="30" rows="10" class="mb-3"></textarea>
                         </div>
                     </div>
                 </div>
diff --git a/application/views/pages/users/users_page.php b/application/views/pages/users/users_page.php
index b05e3b24..2a0bf8b7 100755
--- a/application/views/pages/users/users_page.php
+++ b/application/views/pages/users/users_page.php
@@ -168,7 +168,7 @@
 
                             <div class="row">
                                 <div class="provider-details col-12 col-md-6">
-                                    <div class="form-group">
+                                    <div class="mb-3">
                                         <label for="provider-first-name">
                                             <?= lang('first_name') ?>
                                             <span class="text-danger">*</span>
@@ -176,7 +176,7 @@
                                         <input id="provider-first-name" class="form-control required" maxlength="256">
                                     </div>
 
-                                    <div class="form-group">
+                                    <div class="mb-3">
                                         <label for="provider-last-name">
                                             <?= lang('last_name') ?>
                                             <span class="text-danger">*</span>
@@ -184,7 +184,7 @@
                                         <input id="provider-last-name" class="form-control required" maxlength="512">
                                     </div>
 
-                                    <div class="form-group">
+                                    <div class="mb-3">
                                         <label for="provider-email">
                                             <?= lang('email') ?>
                                             <span class="text-danger">*</span>
@@ -192,7 +192,7 @@
                                         <input id="provider-email" class="form-control required" max="512">
                                     </div>
 
-                                    <div class="form-group">
+                                    <div class="mb-3">
                                         <label for="provider-phone-number">
                                             <?= lang('phone_number') ?>
                                             <span class="text-danger">*</span>
@@ -200,7 +200,7 @@
                                         <input id="provider-phone-number" class="form-control required" max="128">
                                     </div>
 
-                                    <div class="form-group">
+                                    <div class="mb-3">
                                         <label for="provider-mobile-number">
                                             <?= lang('mobile_number') ?>
 
@@ -208,14 +208,14 @@
                                         <input id="provider-mobile-number" class="form-control" maxlength="128">
                                     </div>
 
-                                    <div class="form-group">
+                                    <div class="mb-3">
                                         <label for="provider-address">
                                             <?= lang('address') ?>
                                         </label>
                                         <input id="provider-address" class="form-control" maxlength="256">
                                     </div>
 
-                                    <div class="form-group">
+                                    <div class="mb-3">
                                         <label for="provider-city">
                                             <?= lang('city') ?>
 
@@ -223,14 +223,14 @@
                                         <input id="provider-city" class="form-control" maxlength="256">
                                     </div>
 
-                                    <div class="form-group">
+                                    <div class="mb-3">
                                         <label for="provider-state">
                                             <?= lang('state') ?>
                                         </label>
                                         <input id="provider-state" class="form-control" maxlength="256">
                                     </div>
 
-                                    <div class="form-group">
+                                    <div class="mb-3">
                                         <label for="provider-zip-code">
                                             <?= lang('zip_code') ?>
 
@@ -238,7 +238,7 @@
                                         <input id="provider-zip-code" class="form-control" maxlength="64">
                                     </div>
 
-                                    <div class="form-group">
+                                    <div class="mb-3">
                                         <label for="provider-notes">
                                             <?= lang('notes') ?>
                                         </label>
@@ -246,7 +246,7 @@
                                     </div>
                                 </div>
                                 <div class="provider-settings col-12 col-md-6">
-                                    <div class="form-group">
+                                    <div class="mb-3">
                                         <label for="provider-username">
                                             <?= lang('username') ?>
                                             <span class="text-danger">*</span>
@@ -254,7 +254,7 @@
                                         <input id="provider-username" class="form-control required" maxlength="256">
                                     </div>
 
-                                    <div class="form-group">
+                                    <div class="mb-3">
                                         <label for="provider-password">
                                             <?= lang('password') ?>
                                             <span class="text-danger">*</span>
@@ -263,7 +263,7 @@
                                                maxlength="512" autocomplete="new-password">
                                     </div>
 
-                                    <div class="form-group">
+                                    <div class="mb-3">
                                         <label for="provider-password-confirm">
                                             <?= lang('retype_password') ?>
                                             <span class="text-danger">*</span>
@@ -273,7 +273,7 @@
                                                autocomplete="new-password">
                                     </div>
 
-                                    <div class="form-group">
+                                    <div class="mb-3">
                                         <label for="provider-calendar-view">
                                             <?= lang('calendar') ?>
                                             <span class="text-danger">*</span>
@@ -284,7 +284,7 @@
                                         </select>
                                     </div>
 
-                                    <div class="form-group">
+                                    <div class="mb-3">
                                         <label for="provider-timezone">
                                             <?= lang('timezone') ?>
                                             <span class="text-danger">*</span>
@@ -296,7 +296,7 @@
 
                                     <div class="custom-control custom-switch">
                                         <input type="checkbox" class="custom-control-input" id="provider-notifications">
-                                        <label class="custom-control-label" for="provider-notifications">
+                                        <label class="custom-form-label" for="provider-notifications">
                                             <?= lang('receive_notifications') ?>
                                         </label>
                                     </div>
@@ -457,7 +457,7 @@
 
                     <div class="row">
                         <div class="secretary-details col-12 col-md-6">
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label for="secretary-first-name">
                                     <?= lang('first_name') ?>
                                     <span class="text-danger">*</span>
@@ -465,7 +465,7 @@
                                 <input id="secretary-first-name" class="form-control required" maxlength="256">
                             </div>
 
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label for="secretary-last-name">
                                     <?= lang('last_name') ?>
                                     <span class="text-danger">*</span>
@@ -473,7 +473,7 @@
                                 <input id="secretary-last-name" class="form-control required" maxlength="512">
                             </div>
 
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label for="secretary-email">
                                     <?= lang('email') ?>
                                     <span class="text-danger">*</span>
@@ -481,7 +481,7 @@
                                 <input id="secretary-email" class="form-control required" maxlength="512">
                             </div>
 
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label for="secretary-phone-number">
                                     <?= lang('phone_number') ?>
                                     <span class="text-danger">*</span>
@@ -489,7 +489,7 @@
                                 <input id="secretary-phone-number" class="form-control required" maxlength="128">
                             </div>
 
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label for="secretary-mobile-number">
                                     <?= lang('mobile_number') ?>
 
@@ -497,35 +497,35 @@
                                 <input id="secretary-mobile-number" class="form-control" maxlength="128">
                             </div>
 
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label for="secretary-address">
                                     <?= lang('address') ?>
                                 </label>
                                 <input id="secretary-address" class="form-control" maxlength="256">
                             </div>
 
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label for="secretary-city">
                                     <?= lang('city') ?>
                                 </label>
                                 <input id="secretary-city" class="form-control" maxlength="256">
                             </div>
 
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label for="secretary-state">
                                     <?= lang('state') ?>
                                 </label>
                                 <input id="secretary-state" class="form-control" maxlength="128">
                             </div>
 
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label for="secretary-zip-code">
                                     <?= lang('zip_code') ?>
                                 </label>
                                 <input id="secretary-zip-code" class="form-control" maxlength="64">
                             </div>
 
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label for="secretary-notes">
                                     <?= lang('notes') ?>
                                 </label>
@@ -533,7 +533,7 @@
                             </div>
                         </div>
                         <div class="secretary-settings col-12 col-md-6">
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label for="secretary-username">
                                     <?= lang('username') ?>
                                     <span class="text-danger">*</span>
@@ -541,7 +541,7 @@
                                 <input id="secretary-username" class="form-control required" maxlength="256">
                             </div>
 
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label for="secretary-password">
                                     <?= lang('password') ?>
                                     <span class="text-danger">*</span>
@@ -550,7 +550,7 @@
                                        maxlength="512" autocomplete="new-password">
                             </div>
 
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label for="secretary-password-confirm">
                                     <?= lang('retype_password') ?>
                                     <span class="text-danger">*</span>
@@ -559,7 +559,7 @@
                                        maxlength="512" autocomplete="new-password">
                             </div>
 
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label for="secretary-calendar-view">
                                     <?= lang('calendar') ?>
                                     <span class="text-danger">*</span>
@@ -570,7 +570,7 @@
                                 </select>
                             </div>
 
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label for="secretary-timezone">
                                     <?= lang('timezone') ?>
                                     <span class="text-danger">*</span>
@@ -582,7 +582,7 @@
 
                             <div class="custom-control custom-switch">
                                 <input type="checkbox" class="custom-control-input" id="secretary-notifications">
-                                <label class="custom-control-label" for="secretary-notifications">
+                                <label class="custom-form-label" for="secretary-notifications">
                                     <?= lang('receive_notifications') ?>
                                 </label>
                             </div>
@@ -663,7 +663,7 @@
 
                     <div class="row">
                         <div class="admin-details col-12 col-md-6">
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label for="admin-first-name">
                                     <?= lang('first_name') ?>
                                     <span class="text-danger">*</span>
@@ -671,7 +671,7 @@
                                 <input id="admin-first-name" class="form-control required" maxlength="256">
                             </div>
 
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label for="admin-last-name">
                                     <?= lang('last_name') ?>
                                     <span class="text-danger">*</span>
@@ -679,7 +679,7 @@
                                 <input id="admin-last-name" class="form-control required" maxlength="512">
                             </div>
 
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label for="admin-email">
                                     <?= lang('email') ?>
                                     <span class="text-danger">*</span>
@@ -687,7 +687,7 @@
                                 <input id="admin-email" class="form-control required" maxlength="512">
                             </div>
 
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label for="admin-phone-number">
                                     <?= lang('phone_number') ?>
                                     <span class="text-danger">*</span>
@@ -695,7 +695,7 @@
                                 <input id="admin-phone-number" class="form-control required" maxlength="128">
                             </div>
 
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label for="admin-mobile-number">
                                     <?= lang('mobile_number') ?>
 
@@ -703,14 +703,14 @@
                                 <input id="admin-mobile-number" class="form-control" maxlength="128">
                             </div>
 
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label for="admin-address">
                                     <?= lang('address') ?>
                                 </label>
                                 <input id="admin-address" class="form-control" maxlength="256">
                             </div>
 
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label for="admin-city">
                                     <?= lang('city') ?>
 
@@ -718,21 +718,21 @@
                                 <input id="admin-city" class="form-control" maxlength="256">
                             </div>
 
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label for="admin-state">
                                     <?= lang('state') ?>
                                 </label>
                                 <input id="admin-state" class="form-control" maxlength="128">
                             </div>
 
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label for="admin-zip-code">
                                     <?= lang('zip_code') ?>
                                 </label>
                                 <input id="admin-zip-code" class="form-control" maxlength="64">
                             </div>
 
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label for="admin-notes">
                                     <?= lang('notes') ?>
                                 </label>
@@ -740,7 +740,7 @@
                             </div>
                         </div>
                         <div class="admin-settings col-12 col-md-6">
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label for="admin-username">
                                     <?= lang('username') ?>
                                     <span class="text-danger">*</span>
@@ -748,7 +748,7 @@
                                 <input id="admin-username" class="form-control required" maxlength="256">
                             </div>
 
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label for="admin-password">
                                     <?= lang('password') ?>
                                     <span class="text-danger">*</span>
@@ -757,7 +757,7 @@
                                        autocomplete="new-password">
                             </div>
 
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label for="admin-password-confirm">
                                     <?= lang('retype_password') ?>
                                     <span class="text-danger">*</span>
@@ -766,7 +766,7 @@
                                        maxlength="512" autocomplete="new-password">
                             </div>
 
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label for="admin-calendar-view">
                                     <?= lang('calendar') ?>
                                     <span class="text-danger">*</span>
@@ -777,7 +777,7 @@
                                 </select>
                             </div>
 
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label for="admin-timezone">
                                     <?= lang('timezone') ?>
                                     <span class="text-danger">*</span>
@@ -789,7 +789,7 @@
 
                             <div class="custom-control custom-switch">
                                 <input type="checkbox" class="custom-control-input" id="admin-notifications">
-                                <label class="custom-control-label" for="admin-notifications">
+                                <label class="custom-form-label" for="admin-notifications">
                                     <?= lang('receive_notifications') ?>
                                 </label>
                             </div>