From 98a97d0fea20bf462d9212ee6f4c15ac3e693968 Mon Sep 17 00:00:00 2001
From: Romain Estievenart <res@odoo.com>
Date: Mon, 29 Aug 2022 06:58:57 +0000
Subject: [PATCH] [IMP] *: removes .form-group
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

this commit removes the usage of .form-group class which is deprecated
since BS5.

Here is the css rules that was used:

a) https://github.com/twbs/bootstrap/blob/8fa0d3010112dca5dd6dd501173415856001ba8b/dist/css/bootstrap.css#L1997
As we can see, it simply adds a `margin-bottom` of `1rem` which
corresponds to the `.mb-3` BS class.

b) https://github.com/twbs/bootstrap/blob/8fa0d3010112dca5dd6dd501173415856001ba8b/dist/css/bootstrap.css#L2326
As we already checked all `form-inline` in [1] and [2], we don't have to
do anything about these rules.

'''Breaking change: Dropped form-specific layout classes for our grid
system.
Use our grid and utilities instead of .form-group, .form-row, or
.form-inline.'''

https://getbootstrap.com/docs/5.0/migration/#forms

Notes:
- `position: relative` is already on `#new-password-group`.
- `.field-db`, `#editor-media-image`, `.unsplash_img_container` and
`#url-form-group` seems unused.
- Sometimes margins are unnecessary because of blocks overlapping.
  (e.g. `margin-bottom` is not needed if margin-top is set on the
  following node)
- CSS rules applied on `.s_website_form_rows > .form-group` are now in
the XML by adding `mb-0 py-2` BS classes.

Follow-up of:
[1] https://github.com/odoo/odoo/pull/97967
[2] https://github.com/odoo/enterprise/pull/30343

closes odoo/odoo#100052

Related: odoo/enterprise#31261
Signed-off-by: Adrien Dieudonné (adr) <adr@odoo.com>
---
 .../views/templates.xml                       |  2 +-
 .../static/src/scss/signup_policy.scss        |  2 +-
 .../views/auth_signup_login_templates.xml     | 10 ++---
 addons/auth_totp/views/templates.xml          |  2 +-
 .../l10n_ar_website_sale/views/templates.xml  |  4 +-
 .../src/js/mass_mailing_link_dialog_fix.js    |  2 +-
 .../mass_mailing_sms_templates_portal.xml     |  4 +-
 .../views/payment_portal_templates.xml        |  6 +--
 .../views/payment_authorize_templates.xml     | 16 +++----
 .../views/payment_demo_templates.xml          |  6 +--
 addons/portal/static/src/scss/portal.scss     |  4 --
 addons/portal/views/portal_templates.xml      |  6 +--
 addons/purchase/views/portal_templates.xml    |  2 +-
 addons/sale/views/variant_templates.xml       |  2 +-
 .../src/legacy/xml/name_and_signature.xml     |  2 +-
 .../static/src/legacy/xml/web_calendar.xml    |  2 +-
 addons/web/views/webclient_templates.xml      |  4 +-
 .../media_dialog/video_selector.xml           |  2 +-
 .../static/src/js/wysiwyg/widgets/link.js     |  2 +-
 .../src/js/wysiwyg/widgets/link_dialog.js     |  4 +-
 .../static/src/scss/web_editor.common.scss    | 11 -----
 addons/web_editor/static/src/xml/wysiwyg.xml  | 18 ++++----
 addons/website/data/website_data.xml          | 16 +++----
 addons/website/data/website_demo.xml          |  4 +-
 .../src/components/dialog/edit_menu.xml       |  4 +-
 .../src/components/dialog/page_properties.js  |  2 +-
 .../static/src/components/dialog/seo.xml      |  6 +--
 .../src/components/translator/translator.js   |  3 +-
 .../src/snippets/s_website_form/001.scss      |  8 ----
 .../website/static/src/xml/website.editor.xml |  6 +--
 addons/website/static/src/xml/website.xml     |  2 +-
 .../static/src/xml/website_form_editor.xml    |  2 +-
 .../website/views/snippets/s_website_form.xml |  2 +-
 addons/website/views/website_templates.xml    |  6 +--
 .../website_crm_partner_assign_templates.xml  | 44 +++++++++----------
 .../views/website_customer_templates.xml      |  2 +-
 .../static/src/js/booth_register.js           |  6 +--
 .../event_booth_registration_templates.xml    | 10 ++---
 .../views/event_booth_templates.xml           |  2 +-
 .../event_booth_registration_templates.xml    | 12 ++---
 .../js/website_event_track_proposal_form.js   | 10 ++---
 .../views/event_track_templates_proposal.xml  |  6 +--
 .../website_hr_recruitment_templates.xml      | 16 +++----
 .../views/website_links_template.xml          | 10 ++---
 .../views/snippets_templates.xml              | 10 ++---
 .../views/donation_templates.xml              |  8 ++--
 .../website_profile/views/website_profile.xml | 18 ++++----
 addons/website_sale/views/templates.xml       | 32 +++++++-------
 .../static/src/js/slides_course_tag_add.js    |  8 ++--
 .../static/src/xml/slide_management.xml       |  2 +-
 .../src/xml/website_slides_channel_tag.xml    |  6 +--
 .../static/src/xml/website_slides_share.xml   |  2 +-
 .../static/src/xml/website_slides_upload.xml  | 22 +++++-----
 .../static/src/js/slides_upload.js            |  4 +-
 .../static/src/xml/website_slide_upload.xml   |  2 +-
 55 files changed, 190 insertions(+), 216 deletions(-)

diff --git a/addons/auth_password_policy_portal/views/templates.xml b/addons/auth_password_policy_portal/views/templates.xml
index e7d188053e3..82f6a37dcbd 100644
--- a/addons/auth_password_policy_portal/views/templates.xml
+++ b/addons/auth_password_policy_portal/views/templates.xml
@@ -1,7 +1,7 @@
 <odoo>
     <template id="portal_my_security" inherit_id="portal.portal_my_security"
               name="Password policy data for portal">
-        <xpath expr="//div[hasclass('form-group')][input[@name='new1']]" position="attributes">
+        <xpath expr="//div[input[@name='new1']]" position="attributes">
             <attribute name="id">new-password-group</attribute>
         </xpath>
         <!-- only put meter on first "new password" field since both must be identical -->
diff --git a/addons/auth_password_policy_signup/static/src/scss/signup_policy.scss b/addons/auth_password_policy_signup/static/src/scss/signup_policy.scss
index 251e334413a..1b22a1259a5 100644
--- a/addons/auth_password_policy_signup/static/src/scss/signup_policy.scss
+++ b/addons/auth_password_policy_signup/static/src/scss/signup_policy.scss
@@ -1,4 +1,4 @@
-.form-group.field-password {
+.field-password {
   position: relative;
   meter.o_password_meter {
     bottom: calc(#{$input-height} / 2 - 7px);
diff --git a/addons/auth_signup/views/auth_signup_login_templates.xml b/addons/auth_signup/views/auth_signup_login_templates.xml
index 620cb9d4af4..d17bb05df61 100644
--- a/addons/auth_signup/views/auth_signup_login_templates.xml
+++ b/addons/auth_signup/views/auth_signup_login_templates.xml
@@ -11,26 +11,26 @@
 
         <template id="auth_signup.fields" name="Auth Signup/ResetPassword form fields">
 
-            <div class="form-group field-login">
+            <div class="mb-3 field-login">
                 <label for="login">Your Email</label>
                 <input type="text" name="login" t-att-value="login" id="login" class="form-control form-control-sm" autofocus="autofocus"
                     autocapitalize="off" required="required" t-att-readonly="'readonly' if only_passwords else None"/>
             </div>
 
-            <div class="form-group field-name">
+            <div class="mb-3 field-name">
                 <label for="name">Your Name</label>
                 <input type="text" name="name" t-att-value="name" id="name" class="form-control form-control-sm" placeholder="e.g. John Doe"
                     required="required" t-att-readonly="'readonly' if only_passwords else None"
                     t-att-autofocus="'autofocus' if login and not only_passwords else None" />
             </div>
 
-            <div class="form-group field-password pt-2">
+            <div class="mb-3 field-password pt-2">
                 <label for="password">Password</label>
                 <input type="password" name="password" id="password" class="form-control form-control-sm"
                     required="required" t-att-autofocus="'autofocus' if only_passwords else None"/>
             </div>
 
-            <div class="form-group field-confirm_password">
+            <div class="mb-3 field-confirm_password">
                 <label for="confirm_password">Confirm Password</label>
                 <input type="password" name="confirm_password" id="confirm_password" class="form-control form-control-sm" required="required"/>
             </div>
@@ -78,7 +78,7 @@
                     </t>
 
                     <t t-if="not token">
-                        <div class="form-group field-login">
+                        <div class="mb-3 field-login">
                             <label for="login" class="col-form-label">Your Email</label>
                             <input type="text" name="login" t-att-value="login" id="login" class="form-control"
                                 autofocus="autofocus" required="required" autocapitalize="off"/>
diff --git a/addons/auth_totp/views/templates.xml b/addons/auth_totp/views/templates.xml
index 417e9994165..670f25a4786 100644
--- a/addons/auth_totp/views/templates.xml
+++ b/addons/auth_totp/views/templates.xml
@@ -14,7 +14,7 @@
                     </div>
                     <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
                     <input type="hidden" name="redirect" t-att-value="redirect"/>
-                    <div class="form-group">
+                    <div class="mb-3">
                         <label class="fw-bold" for="totp_token">Authentication Code</label>
                         <input id="totp_token" name="totp_token" class="form-control mb-2"
                                 autocomplete="off" inputmode="numeric" autofocus="autofocus" required="required" placeholder="e.g. 123456"/>
diff --git a/addons/l10n_ar_website_sale/views/templates.xml b/addons/l10n_ar_website_sale/views/templates.xml
index 8dbd1e80263..572bca41d2a 100644
--- a/addons/l10n_ar_website_sale/views/templates.xml
+++ b/addons/l10n_ar_website_sale/views/templates.xml
@@ -4,7 +4,7 @@
     <template id="partner_info" name="Argentinean partner">
 
         <!-- show afip responsibility -->
-        <div t-attf-class="form-group #{error.get('l10n_ar_afip_responsibility_type_id') and 'o_has_error' or ''} col-xl-6">
+        <div t-attf-class="mb-3 #{error.get('l10n_ar_afip_responsibility_type_id') and 'o_has_error' or ''} col-xl-6">
             <label class="col-form-label" for="l10n_ar_afip_responsibility_type_id">AFIP Responsibility</label>
             <t t-if="partner.can_edit_vat()">
                 <select name="l10n_ar_afip_responsibility_type_id" t-attf-class="form-select #{error.get('l10n_ar_afip_responsibility_type_id') and 'is-invalid' or ''}">
@@ -23,7 +23,7 @@
         </div>
 
         <!-- show identification type -->
-        <div t-attf-class="form-group #{error.get('l10n_latam_identification_type_id') and 'o_has_error' or ''} col-xl-6">
+        <div t-attf-class="mb-3 #{error.get('l10n_latam_identification_type_id') and 'o_has_error' or ''} col-xl-6">
             <label class="col-form-label" for="l10n_latam_identification_type_id">Identification Type</label>
             <t t-if="partner.can_edit_vat()">
                 <select name="l10n_latam_identification_type_id" t-attf-class="form-select #{error.get('l10n_latam_identification_type_id') and 'is-invalid' or ''}">
diff --git a/addons/mass_mailing/static/src/js/mass_mailing_link_dialog_fix.js b/addons/mass_mailing/static/src/js/mass_mailing_link_dialog_fix.js
index 6b46340b4eb..e580b3e41ce 100644
--- a/addons/mass_mailing/static/src/js/mass_mailing_link_dialog_fix.js
+++ b/addons/mass_mailing/static/src/js/mass_mailing_link_dialog_fix.js
@@ -38,7 +38,7 @@ LinkDialog.include({
                 };
                 $el.remove();
 
-                this.$('.form-group .o_btn_preview.btn-' + type)
+                this.$('label > .o_btn_preview.btn-' + type)
                     .css(_.pick(this.__realMMColors[type], 'background-color', 'color'));
             });
             $previewArea.remove();
diff --git a/addons/mass_mailing_sms/views/mass_mailing_sms_templates_portal.xml b/addons/mass_mailing_sms/views/mass_mailing_sms_templates_portal.xml
index bf5a7683dc0..791b7c10150 100644
--- a/addons/mass_mailing_sms/views/mass_mailing_sms_templates_portal.xml
+++ b/addons/mass_mailing_sms/views/mass_mailing_sms_templates_portal.xml
@@ -9,7 +9,7 @@
 
                         <form t-att-action="'/sms/%s/unsubscribe/%s' % (mailing_id, trace_code)" method="post">
                             <p>Please enter your phone number</p>
-                            <div class="form-group row">
+                            <div class="mb-3 row">
                                 <label for="sms_number" class="col-sm-2 col-form-label">Number</label>
                                 <div class="col-sm-10">
                                     <input type="text" class="form-control" name="sms_number" id="sms_number" t-att-required="true"/>
@@ -18,7 +18,7 @@
                             <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
                             <input type="hidden" name="trace_code" t-att-value="trace_code"/>
                             <input type="hidden" name="mailing_id" t-att-value="mailing_id"/>
-                            <div class="form-group row">
+                            <div class="mb-3 row">
                                 <div class="col-sm-10 offset-sm-2">
                                     <button type="submit" class="btn btn-primary">Unsubscribe me</button>
                                 </div>
diff --git a/addons/payment/views/payment_portal_templates.xml b/addons/payment/views/payment_portal_templates.xml
index 66143a25e6a..d1a1564dc0a 100644
--- a/addons/payment/views/payment_portal_templates.xml
+++ b/addons/payment/views/payment_portal_templates.xml
@@ -126,7 +126,7 @@
                         <div class="col-lg-6">
                             <div>
                                 <t t-call="payment.transaction_status"/>
-                                <div class="form-group row">
+                                <div class="mb-3 row">
                                     <label for="form_partner_name" class="col-md-3 col-form-label">
                                         From
                                     </label>
@@ -135,7 +135,7 @@
                                           t-esc="tx.partner_name"/>
                                 </div>
                                 <hr/>
-                                <div class="form-group row">
+                                <div class="mb-3 row">
                                     <label for="form_reference" class="col-md-3 col-form-label">
                                         Reference
                                     </label>
@@ -144,7 +144,7 @@
                                           t-esc="tx.reference"/>
                                 </div>
                                 <hr/>
-                                <div class="form-group row">
+                                <div class="mb-3 row">
                                     <label for="form_amount" class="col-md-3 col-form-label">
                                         Amount
                                     </label>
diff --git a/addons/payment_authorize/views/payment_authorize_templates.xml b/addons/payment_authorize/views/payment_authorize_templates.xml
index da07c90c4fc..22a980de511 100644
--- a/addons/payment_authorize/views/payment_authorize_templates.xml
+++ b/addons/payment_authorize/views/payment_authorize_templates.xml
@@ -3,42 +3,42 @@
 
     <template id="inline_form">
         <div t-if="provider.authorize_payment_method_type == 'credit_card'" t-attf-id="o_authorize_form_{{provider_id}}" class="o_authorize_form">
-            <div class="form-group">
+            <div class="mb-3">
                 <label t-attf-for="o_authorize_card_{{provider_id}}" class="col-form-label">Card Number</label>
                 <input type="text" t-attf-id="o_authorize_card_{{provider_id}}" required="" maxlength="19" class="form-control"/>
             </div>
             <div class="row">
-                <div class="col-sm-8 form-group">
+                <div class="col-sm-8 mb-3">
                     <label t-attf-for="o_authorize_month_{{provider_id}}">Expiration</label>
                     <div class="input-group">
                         <input type="number" t-attf-id="o_authorize_month_{{provider_id}}" placeholder="MM" min="1" max="12" required="" class="form-control"/>
                         <input type="number" t-attf-id="o_authorize_year_{{provider_id}}" placeholder="YY" min="00" max="99" required="" class="form-control"/>
                     </div>
                 </div>
-                <div class="col-sm-4 form-group">
+                <div class="col-sm-4 mb-3">
                     <label t-attf-for="o_authorize_code_{{provider_id}}">Card Code</label>
                     <input type="number" t-attf-id="o_authorize_code_{{provider_id}}" max="9999" class="form-control"/>
                 </div>
             </div>
         </div>
         <div t-else="" t-attf-id="o_authorize_form_{{provider_id}}" class="o_authorize_form">
-            <div class="form-group">
+            <div class="mb-3">
                 <label t-attf-for="o_authorize_bank_name_{{provider_id}}" class="col-form-label">Bank Name</label>
                 <input type="text" t-attf-id="o_authorize_bank_name_{{provider_id}}" required="" class="form-control"/>
             </div>
-            <div class="form-group">
+            <div class="mb-3">
                 <label t-attf-for="o_authorize_account_name_{{provider_id}}" class="col-form-label">Name On Account</label>
                 <input type="text" t-attf-id="o_authorize_account_name_{{provider_id}}" required="" class="form-control"/>
             </div>
-            <div class="form-group">
+            <div class="mb-3">
                 <label t-attf-for="o_authorize_account_number_{{provider_id}}" class="col-form-label">Account Number</label>
                 <input type="text" t-attf-id="o_authorize_account_number_{{provider_id}}" required="" class="form-control"/>
             </div>
-            <div class="form-group">
+            <div class="mb-3">
                 <label t-attf-for="o_authorize_aba_number_{{provider_id}}" class="col-form-label">ABA Routing Number</label>
                 <input type="text" t-attf-id="o_authorize_aba_number_{{provider_id}}" required="" class="form-control"/>
             </div>
-            <div class="form-group">
+            <div class="mb-3">
                 <label t-attf-for="o_authorize_account_type_{{provider_id}}" class="col-form-label">Bank Account Type</label>
                 <select t-attf-id="o_authorize_account_type_{{provider_id}}" required="" class="form-select">
                     <option value="checking">Personal Checking</option>
diff --git a/addons/payment_demo/views/payment_demo_templates.xml b/addons/payment_demo/views/payment_demo_templates.xml
index e99035c4e5c..7058aee8eee 100644
--- a/addons/payment_demo/views/payment_demo_templates.xml
+++ b/addons/payment_demo/views/payment_demo_templates.xml
@@ -4,11 +4,11 @@
     <template id="inline_form">
         <div t-attf-id="demo-container-{{provider_id}}">
             <div class="row">
-                <div class="form-group">
+                <div class="mb-3">
                     <input name="provider_id" type="hidden" id="provider_id" t-att-value="id"/>
                     <input name="partner_id" type="hidden" t-att-value="partner_id"/>
                 </div>
-                <div class="form-group col mt-0 mb-0">
+                <div class="col mt-0 mb-0">
                     <label for="customer_input" class="mt-0">
                         <small><b>Payment Details (test data)</b></small>
                     </label>
@@ -18,7 +18,7 @@
                            class="form-control"
                            placeholder="XXXX XXXX XXXX XXXX"/>
                 </div>
-                <div class="form-group col mb-0">
+                <div class="col mb-0">
                     <label for="simulated_payment_state" class="mt-0">
                         <small><b>Payment Status</b></small>
                     </label>
diff --git a/addons/portal/static/src/scss/portal.scss b/addons/portal/static/src/scss/portal.scss
index d21616868ff..ef7360cf63c 100644
--- a/addons/portal/static/src/scss/portal.scss
+++ b/addons/portal/static/src/scss/portal.scss
@@ -534,10 +534,6 @@ form label {
             max-width: initial;
             margin: initial;
         }
-        .form-group {
-            // for the absolutely positioned meter on new password
-            position: relative;
-        }
         label, button {
             @extend .text-nowrap;
         }
diff --git a/addons/portal/views/portal_templates.xml b/addons/portal/views/portal_templates.xml
index 9ff33680d61..9a2f233023a 100644
--- a/addons/portal/views/portal_templates.xml
+++ b/addons/portal/views/portal_templates.xml
@@ -494,7 +494,7 @@
                 <form action="/my/security" method="post" class="oe_reset_password_form">
                     <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
                     <input type="hidden" name="op" value="password"/>
-                    <div class="form-group">
+                    <div class="mb-3">
                         <label for="current">Password:</label>
                         <input type="password" t-attf-class="form-control form-control-sm {{ 'is-invalid' if get_error(errors, 'password.old') else '' }}"
                                id="current" name="old"
@@ -503,7 +503,7 @@
                             <t t-esc="get_error(errors, 'password.old')"/>
                         </div>
                     </div>
-                    <div class="form-group">
+                    <div class="mb-3">
                         <label for="new">New Password:</label>
                         <input type="password" t-attf-class="form-control form-control-sm {{ 'is-invalid' if get_error(errors, 'password.new1') else '' }}"
                                id="new" name="new1"
@@ -512,7 +512,7 @@
                             <t t-esc="get_error(errors, 'password.new1')"/>
                         </div>
                     </div>
-                    <div class="form-group">
+                    <div class="mb-3">
                         <label for="new2">Verify New Password:</label>
                         <input type="password" t-attf-class="form-control form-control-sm {{ 'is-invalid' if get_error(errors, 'password.new2') else '' }}"
                                id="new2" name="new2"
diff --git a/addons/purchase/views/portal_templates.xml b/addons/purchase/views/portal_templates.xml
index 162f06ff8f3..e294d82ea74 100644
--- a/addons/purchase/views/portal_templates.xml
+++ b/addons/purchase/views/portal_templates.xml
@@ -298,7 +298,7 @@
                                     <form t-attf-action="/my/purchase/#{order.id}/update?access_token=#{order.access_token}" method="post">
                                       <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
                                       <div class="container">
-                                        <div class="form-group">
+                                        <div class="mb-3">
                                           <div class="input-group date">
                                               <input type="text" class="form-control datetimepicker-input o-purchase-datetimepicker" t-attf-id="datetimepicker_#{line.id}" t-att-name="line.id"
                                                 data-toggle="datetimepicker" data-date-format="YYYY-MM-DD" t-attf-data-target="#datetimepicker_#{line.id}"/>
diff --git a/addons/sale/views/variant_templates.xml b/addons/sale/views/variant_templates.xml
index 8afbbe2faee..7c0bf9eaf14 100644
--- a/addons/sale/views/variant_templates.xml
+++ b/addons/sale/views/variant_templates.xml
@@ -39,7 +39,7 @@
                     <t t-if="ptal.attribute_id.display_type == 'radio'">
                         <ul t-att-data-attribute_id="ptal.attribute_id.id" t-attf-class="list-inline list-unstyled o_wsale_product_attribute #{'d-none' if single_and_custom else ''}">
                             <t t-foreach="ptal.product_template_value_ids._only_active()" t-as="ptav">
-                                <li class="list-inline-item form-group js_attribute_value" style="margin: 0;">
+                                <li class="list-inline-item mb-3 js_attribute_value" style="margin: 0;">
                                     <label class="col-form-label">
                                         <div class="form-check">
                                             <input type="radio"
diff --git a/addons/web/static/src/legacy/xml/name_and_signature.xml b/addons/web/static/src/legacy/xml/name_and_signature.xml
index 762b52c4168..448e91308bb 100644
--- a/addons/web/static/src/legacy/xml/name_and_signature.xml
+++ b/addons/web/static/src/legacy/xml/name_and_signature.xml
@@ -39,7 +39,7 @@
     <!-- Template for the widget webSignNameAndDraw. -->
     <t t-name="web.sign_name_and_signature">
         <div class="o_web_sign_name_and_signature">
-            <div class="o_web_sign_name_group form-group">
+            <div class="o_web_sign_name_group">
                 <label class="col-form-label" t-att-for="'o_web_sign_name_input_' + widget.htmlId">Full Name</label>
                 <input type="text" name="signer" t-att-id="'o_web_sign_name_input_' + widget.htmlId" class="o_web_sign_name_input form-control" t-att-value="widget.defaultName" placeholder="Type your name to sign" required=""/>
             </div>
diff --git a/addons/web/static/src/legacy/xml/web_calendar.xml b/addons/web/static/src/legacy/xml/web_calendar.xml
index 7d3120d9273..6d511f565c3 100644
--- a/addons/web/static/src/legacy/xml/web_calendar.xml
+++ b/addons/web/static/src/legacy/xml/web_calendar.xml
@@ -139,7 +139,7 @@
     </t>
 
     <main t-name="CalendarView.quick_create" class="o_calendar_quick_create">
-        <div class="form-group">
+        <div class="mb-3">
             <label for='name' class='col-form-label o_form_label'>Meeting Subject:</label>
             <input type='text' name='name' class="o_input o_required_modifier" t-att-value="widget.dataTemplate.name or None"/>
         </div>
diff --git a/addons/web/views/webclient_templates.xml b/addons/web/views/webclient_templates.xml
index 6bd9fc692aa..bd03ca1061a 100644
--- a/addons/web/views/webclient_templates.xml
+++ b/addons/web/views/webclient_templates.xml
@@ -132,7 +132,7 @@
             <form class="oe_login_form" role="form" t-attf-action="/web/login" method="post" onsubmit="this.action = '/web/login' + location.hash">
                 <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
 
-                <div class="form-group field-db" t-if="databases and len(databases) &gt; 1">
+                <div class="mb-3" t-if="databases and len(databases) &gt; 1">
                     <label for="db" class="col-form-label">Database</label>
                     <div t-attf-class="input-group {{'input-group-sm' if form_small else ''}}">
                         <input type="text" name="db" t-att-value="request.db" id="db" t-attf-class="form-control #{'form-control-sm' if form_small else ''}" required="required" readonly="readonly"/>
@@ -145,7 +145,7 @@
                     <input type="text" placeholder="Email" name="login" t-att-value="login" id="login" t-attf-class="form-control #{'form-control-sm' if form_small else ''}" required="required" autofocus="autofocus" autocapitalize="off"/>
                 </div>
 
-                <div class="mb-3 form-group">
+                <div class="mb-3">
                     <label for="password" class="form-label">Password</label>
                     <input type="password" placeholder="Password" name="password" id="password" t-attf-class="form-control #{'form-control-sm' if form_small else ''}" required="required" autocomplete="current-password" t-att-autofocus="'autofocus' if login else None" maxlength="4096"/>
                 </div>
diff --git a/addons/web_editor/static/src/components/media_dialog/video_selector.xml b/addons/web_editor/static/src/components/media_dialog/video_selector.xml
index a2f6d185b83..5e9b44f4cf7 100644
--- a/addons/web_editor/static/src/components/media_dialog/video_selector.xml
+++ b/addons/web_editor/static/src/components/media_dialog/video_selector.xml
@@ -19,7 +19,7 @@
 <t t-name="web_editor.VideoSelector" owl="1">
     <form action="#" class="row">
         <div class="col mt-4 o_video_dialog_form">
-            <div class="form-group mb-2">
+            <div class="mb-2">
                 <label class="col-form-label" for="o_video_text">
                     <b>Video code </b>(URL or Embed)
                 </label>
diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/link.js b/addons/web_editor/static/src/js/wysiwyg/widgets/link.js
index 205ed485ce4..049f01bbe46 100644
--- a/addons/web_editor/static/src/js/wysiwyg/widgets/link.js
+++ b/addons/web_editor/static/src/js/wysiwyg/widgets/link.js
@@ -479,7 +479,7 @@ const Link = Widget.extend({
         var $linkUrlInput = this.$('#o_link_dialog_url_input');
         let value = $linkUrlInput.val();
         let isLink = value.indexOf('@') < 0;
-        this.$('input[name="is_new_window"]').closest('.form-group').toggleClass('d-none', !isLink);
+        this.$('input[name="is_new_window"]').closest('.row').toggleClass('d-none', !isLink);
         this.$('.o_strip_domain').toggleClass('d-none', value.indexOf(window.location.origin) !== 0);
         this.options.wysiwyg && this.options.wysiwyg.odooEditor.historyPauseSteps('_onURLInput');
         this._adaptPreview();
diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/link_dialog.js b/addons/web_editor/static/src/js/wysiwyg/widgets/link_dialog.js
index e5ce390bbf2..4c400062281 100644
--- a/addons/web_editor/static/src/js/wysiwyg/widgets/link_dialog.js
+++ b/addons/web_editor/static/src/js/wysiwyg/widgets/link_dialog.js
@@ -36,7 +36,7 @@ const _DialogLinkWidget = Link.extend({
         var data = this._getData();
         if (data === null) {
             var $url = this.$('input[name="url"]');
-            $url.closest('.form-group').addClass('o_has_error').find('.form-control, .form-select').addClass('is-invalid');
+            $url.closest('.o_url_input').addClass('o_has_error').find('.form-control, .form-select').addClass('is-invalid');
             $url.focus();
             return Promise.reject();
         }
@@ -174,7 +174,7 @@ const _DialogLinkWidget = Link.extend({
      */
     _onURLInput: function () {
         this._super(...arguments);
-        this.$('#o_link_dialog_url_input').closest('.form-group').removeClass('o_has_error').find('.form-control, .form-select').removeClass('is-invalid');
+        this.$('#o_link_dialog_url_input').closest('.o_url_input').removeClass('o_has_error').find('.form-control, .form-select').removeClass('is-invalid');
     },
 });
 
diff --git a/addons/web_editor/static/src/scss/web_editor.common.scss b/addons/web_editor/static/src/scss/web_editor.common.scss
index e3bf0f30055..c7f3af43022 100644
--- a/addons/web_editor/static/src/scss/web_editor.common.scss
+++ b/addons/web_editor/static/src/scss/web_editor.common.scss
@@ -602,17 +602,6 @@ a.o_underline {
                         }
                     }
                 }
-
-                // select media dialog unsplash error
-                #editor-media-image .unsplash_img_container .unsplash_error .mx-auto {
-                    width: 100%;
-
-                    .form-group {
-                        input.w-100 {
-                            min-width: 100px;
-                        }
-                    }
-                }
             }
         }
     }
diff --git a/addons/web_editor/static/src/xml/wysiwyg.xml b/addons/web_editor/static/src/xml/wysiwyg.xml
index 2934dc698d6..e41cf3b4ff8 100644
--- a/addons/web_editor/static/src/xml/wysiwyg.xml
+++ b/addons/web_editor/static/src/xml/wysiwyg.xml
@@ -60,7 +60,7 @@
 
     <!-- Alt Dialog (allows to change alt and title of page images) -->
     <form t-name="wysiwyg.widgets.alt" action="#">
-        <div class="form-group row">
+        <div class="mb-3 row">
             <label class="col-md-3 col-form-label" for="alt"
                    title="'Alt tag' specifies an alternate text for an image, if the image cannot be displayed (slow connection, missing image, screen reader ...).">
                Description <small>(ALT Tag)</small>
@@ -69,7 +69,7 @@
                 <input class="form-control" id="alt" required="required" t-att-value="widget.alt" type="text"/>
             </div>
         </div>
-        <div class="form-group row">
+        <div class="mb-3 row">
             <label class="col-md-3 col-form-label" for="title"
                    title="'Title tag' is shown as a tooltip when you hover the picture.">
                Tooltip  <small>(TITLE Tag)</small>
@@ -84,13 +84,13 @@
     <div t-name="wysiwyg.widgets.link" class="o_link_dialog">
         <div class="row">
             <form class="col-lg-8">
-                <div t-attf-class="form-group row#{widget.needLabel ? '' : ' d-none'}">
+                <div t-attf-class="mb-3 row#{widget.needLabel ? '' : ' d-none'}">
                     <label class="col-form-label col-md-3" for="o_link_dialog_label_input">Link Label</label>
                     <div class="col-md-9">
                         <input type="text" name="label" class="form-control" id="o_link_dialog_label_input" required="required" t-att-value="widget.data.content"/>
                     </div>
                 </div>
-                <div t-attf-class="form-group row o_url_input#{widget.isButton ? ' d-none' : ''}">
+                <div t-attf-class="mb-3 row o_url_input#{widget.isButton ? ' d-none' : ''}">
                     <label class="col-form-label col-md-3" for="o_link_dialog_url_input">URL or Email</label>
                     <div class="col-md-9">
                         <input type="text" name="url" class="form-control" id="o_link_dialog_url_input" required="required"/>
@@ -102,7 +102,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="form-group row">
+                <div class="mb-3 row">
                     <label class="col-form-label col-md-3">Type</label>
                     <div class="col-md-9 d-flex align-items-center">
                         <div t-attf-class="#{widget.colorCombinationClass ? ('p-2 ' + widget.colorCombinationClass) : ''}">
@@ -117,7 +117,7 @@
                     </div>
                 </div>
                 <div id="o_link_dialog_button_opts_collapse" class="collapse">
-                    <div class="form-group row">
+                    <div class="mb-3 row">
                         <label class="col-form-label col-md-3">Size</label>
                         <div class="col-md-9">
                             <select name="link_style_size" class="form-select link-style">
@@ -127,7 +127,7 @@
                             </select>
                         </div>
                     </div>
-                    <div class="form-group row">
+                    <div class="mb-3 row">
                         <label class="col-form-label col-md-3">Style</label>
                         <div class="col-md-9">
                             <select name="link_style_shape" class="form-select link-style">
@@ -142,7 +142,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="form-group row" t-if="!widget.isButton &amp;&amp; !widget.options.forceNewWindow">
+                <div class="mb-3 row" t-if="!widget.isButton &amp;&amp; !widget.options.forceNewWindow">
                     <div class="offset-md-3 col-md-9">
                         <label class="o_switch">
                             <input type="checkbox" name="is_new_window" t-att-checked="widget.data.isNewWindow ? 'checked' : undefined"/>
@@ -153,7 +153,7 @@
                 </div>
             </form>
             <div class="col-lg-4 o_link_dialog_preview">
-                <div class="form-group text-center">
+                <div class="mb-3 text-center">
                     <label>Preview</label>
                     <div t-attf-class="#{widget.colorCombinationClass ? ('p-2 ' + widget.colorCombinationClass) : ''}"
                          style="overflow-x: auto; max-width: 100%; max-height: 200px;">
diff --git a/addons/website/data/website_data.xml b/addons/website/data/website_data.xml
index f5765dc8ff7..de829b0a375 100644
--- a/addons/website/data/website_data.xml
+++ b/addons/website/data/website_data.xml
@@ -53,7 +53,7 @@
                                     <div class="container">
                                         <form id="contactus_form" action="/website/form/" method="post" enctype="multipart/form-data" class="o_mark_required" data-mark="*" data-model_name="mail.mail" data-success-mode="redirect" data-success-page="/contactus-thank-you" data-pre-fill="true">
                                             <div class="s_website_form_rows row s_col_no_bgcolor">
-                                                <div class="form-group col-12 s_website_form_field s_website_form_custom s_website_form_required" data-type="char" data-name="Field">
+                                                <div class="mb-0 py-2 col-12 s_website_form_field s_website_form_custom s_website_form_required" data-type="char" data-name="Field">
                                                     <div class="row s_col_no_resize s_col_no_bgcolor">
                                                         <label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="contact1">
                                                             <span class="s_website_form_label_content">Name</span>
@@ -64,7 +64,7 @@
                                                         </div>
                                                     </div>
                                                 </div>
-                                                <div class="form-group col-12 s_website_form_field s_website_form_custom" data-type="char" data-name="Field">
+                                                <div class="mb-0 py-2 col-12 s_website_form_field s_website_form_custom" data-type="char" data-name="Field">
                                                     <div class="row s_col_no_resize s_col_no_bgcolor">
                                                         <label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="contact2">
                                                             <span class="s_website_form_label_content">Phone Number</span>
@@ -74,7 +74,7 @@
                                                         </div>
                                                     </div>
                                                 </div>
-                                                <div class="form-group col-12 s_website_form_field s_website_form_required" data-type="email" data-name="Field">
+                                                <div class="mb-0 py-2 col-12 s_website_form_field s_website_form_required" data-type="email" data-name="Field">
                                                     <div class="row s_col_no_resize s_col_no_bgcolor">
                                                         <label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="contact3">
                                                             <span class="s_website_form_label_content">Email</span>
@@ -85,7 +85,7 @@
                                                         </div>
                                                     </div>
                                                 </div>
-                                                <div class="form-group col-12 s_website_form_field s_website_form_custom" data-type="char" data-name="Field">
+                                                <div class="mb-0 py-2 col-12 s_website_form_field s_website_form_custom" data-type="char" data-name="Field">
                                                     <div class="row s_col_no_resize s_col_no_bgcolor">
                                                         <label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="contact4">
                                                             <span class="s_website_form_label_content">Company</span>
@@ -95,7 +95,7 @@
                                                         </div>
                                                     </div>
                                                 </div>
-                                                <div class="form-group col-12 s_website_form_field s_website_form_required" data-type="char" data-name="Field">
+                                                <div class="mb-0 py-2 col-12 s_website_form_field s_website_form_required" data-type="char" data-name="Field">
                                                     <div class="row s_col_no_resize s_col_no_bgcolor">
                                                         <label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="contact5">
                                                             <span class="s_website_form_label_content">Subject</span>
@@ -106,7 +106,7 @@
                                                         </div>
                                                     </div>
                                                 </div>
-                                                <div class="form-group col-12 s_website_form_field s_website_form_custom s_website_form_required" data-type="text" data-name="Field">
+                                                <div class="mb-0 py-2 col-12 s_website_form_field s_website_form_custom s_website_form_required" data-type="text" data-name="Field">
                                                     <div class="row s_col_no_resize s_col_no_bgcolor">
                                                         <label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="contact6">
                                                             <span class="s_website_form_label_content">Question</span>
@@ -116,7 +116,7 @@
                                                         </div>
                                                     </div>
                                                 </div>
-                                                <div class="form-group col-12 s_website_form_field s_website_form_dnone">
+                                                <div class="mb-0 py-2 col-12 s_website_form_field s_website_form_dnone">
                                                     <div class="row s_col_no_resize s_col_no_bgcolor">
                                                         <label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="contact7">
                                                             <span class="s_website_form_label_content">Email To</span>
@@ -126,7 +126,7 @@
                                                         </div>
                                                     </div>
                                                 </div>
-                                                <div class="form-group col-12 s_website_form_submit" data-name="Submit Button">
+                                                <div class="mb-0 py-2 col-12 s_website_form_submit" data-name="Submit Button">
                                                     <div style="width: 200px;" class="s_website_form_label"/>
                                                     <a href="#" role="button" class="btn btn-primary btn-lg s_website_form_send">Submit</a>
                                                     <span id="s_website_form_result"></span>
diff --git a/addons/website/data/website_demo.xml b/addons/website/data/website_demo.xml
index 181bfa75965..efa76e5c318 100644
--- a/addons/website/data/website_demo.xml
+++ b/addons/website/data/website_demo.xml
@@ -93,7 +93,7 @@
 
                                             <h2 class="mt-4">Form</h2>
                                             <form>
-                                                <div class="form-group">
+                                                <div class="mb-3">
                                                     <label for="exampleInputEmail1">Email address</label>
                                                     <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email"/>
                                                     <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
@@ -288,7 +288,7 @@
                                                 <hr class="my-4"/>
                                                 <div class="row">
                                                     <div class="col-7">
-                                                        <div class="form-group row">
+                                                        <div class="mb-3 row">
                                                             <label class="col-2 col-form-label">Label</label>
                                                             <div class="col-10">
                                                                 <input type="email" class="form-control" placeholder="placeholder"/>
diff --git a/addons/website/static/src/components/dialog/edit_menu.xml b/addons/website/static/src/components/dialog/edit_menu.xml
index e02eb32aae0..65c7ca982c7 100644
--- a/addons/website/static/src/components/dialog/edit_menu.xml
+++ b/addons/website/static/src/components/dialog/edit_menu.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 <t t-name="website.MenuDialog" owl="1">
     <WebsiteDialog title="title" closeOnClick="false" primaryClick.bind="this.onClickOk" secondaryClick="props.close">
-        <div class="o_menu_dialog_form form-group row">
+        <div class="o_menu_dialog_form mb-3 row">
             <label class="col-form-label col-md-3">
                 Name
             </label>
@@ -10,7 +10,7 @@
                 <input type="text" t-model="name.input.value" class="form-control" t-att-class="{ 'is-invalid': name.input.hasError }" t-ref="autofocus"/>
             </div>
         </div>
-        <div t-if="!props.isMegaMenu" class="form-group row">
+        <div t-if="!props.isMegaMenu" class="mb-3 row">
             <label class="col-form-label col-md-3">
                 Url or Email
             </label>
diff --git a/addons/website/static/src/components/dialog/page_properties.js b/addons/website/static/src/components/dialog/page_properties.js
index 28bf4437a84..25195a6d360 100644
--- a/addons/website/static/src/components/dialog/page_properties.js
+++ b/addons/website/static/src/components/dialog/page_properties.js
@@ -143,7 +143,7 @@ export class DuplicatePageDialog extends Component {
 DuplicatePageDialog.components = {WebsiteDialog};
 DuplicatePageDialog.template = xml`
 <WebsiteDialog close="props.close" primaryClick="() => this.duplicate()">
-    <div class="form-group row">
+    <div class="mb-3 row">
         <label class="col-form-label col-md-3">
             Page Name
         </label>
diff --git a/addons/website/static/src/components/dialog/seo.xml b/addons/website/static/src/components/dialog/seo.xml
index 6af181a4a10..32d3d6053b5 100644
--- a/addons/website/static/src/components/dialog/seo.xml
+++ b/addons/website/static/src/components/dialog/seo.xml
@@ -120,13 +120,13 @@
     <section>
         <div class="row">
             <div class="col-lg-6">
-                <div class="form-group">
+                <div class="mb-3">
                     <label for="website_meta_title">
                         Title <i class="fa fa-question-circle-o" title="The title will take a default value unless you specify one."/>
                     </label>
                     <input type="text" t-model="seoContext.title" t-att-disabled="!props.canEditTitle" class="form-control" placeholder="Keep empty to use default value" maxlength="70" size="70" t-ref="autofocus"/>
                 </div>
-                <div class="form-group">
+                <div class="mb-3">
                     <label for="website_meta_description">
                         Description <i class="fa fa-question-circle-o" t-att-title="props.previewDescription"/>
                     </label>
@@ -135,7 +135,7 @@
                         <span t-esc="descriptionWarning"/>
                     </div>
                 </div>
-                <div class="form-group" t-if='props.canEditUrl'>
+                <div class="mb-3" t-if='props.canEditUrl'>
                     <label for="website_seo_name">
                         Custom Url <i class="fa fa-question-circle-o" t-att-title="props.seoNameHelp" />
                     </label>
diff --git a/addons/website/static/src/components/translator/translator.js b/addons/website/static/src/components/translator/translator.js
index 63d5b0002ca..82c857988e5 100644
--- a/addons/website/static/src/components/translator/translator.js
+++ b/addons/website/static/src/components/translator/translator.js
@@ -16,8 +16,7 @@ export class AttributeTranslateDialog extends Component {
 
         useEffect(() => {
             this.translation = $(this.props.node).data('translation');
-
-            const $group = $('<div/>', {class: 'form-group'}).appendTo(this.formEl.el);
+            const $group = $('<div/>', {class: 'mb-3'}).appendTo(this.formEl.el);
             _.each(this.translation, function (node, attr) {
                 const $node = $(node);
                 const $label = $('<label class="col-form-label"></label>').text(attr);
diff --git a/addons/website/static/src/snippets/s_website_form/001.scss b/addons/website/static/src/snippets/s_website_form/001.scss
index cc5dd2751c1..ee0904a35c0 100644
--- a/addons/website/static/src/snippets/s_website_form/001.scss
+++ b/addons/website/static/src/snippets/s_website_form/001.scss
@@ -44,14 +44,6 @@
         display: none;
     }
 
-    // The snippet editor uses padding and not margin.
-    // This will include bootstrap margin in the dragable y axes
-    .s_website_form_rows > .form-group {
-        margin-bottom: 0;
-        padding-top: 0.5rem;
-        padding-bottom: 0.5rem;
-    }
-
     .s_website_form_submit, .s_website_form_recaptcha {
         .s_website_form_label {
             float: left;
diff --git a/addons/website/static/src/xml/website.editor.xml b/addons/website/static/src/xml/website.editor.xml
index ddda1a4e206..b2c12f67da0 100644
--- a/addons/website/static/src/xml/website.editor.xml
+++ b/addons/website/static/src/xml/website.editor.xml
@@ -39,7 +39,7 @@
     </t>
     <!-- Anchor Name option dialog -->
     <div t-name="website.dialog.anchorName">
-        <div class="form-group row">
+        <div class="mb-3 row">
             <label class="col-form-label col-md-3" for="anchorName">Choose an anchor name</label>
             <div class="col-md-9">
                 <input type="text" class="form-control o_input_anchor_name" id="anchorName" t-attf-value="#{currentAnchor}" placeholder="Anchor name"/>
@@ -52,7 +52,7 @@
 
     <!-- Add a Google Font option dialog -->
     <div t-name="website.dialog.addGoogleFont">
-        <div class="form-group row">
+        <div class="mb-3 row">
             <label class="col-form-label col-md-3" for="google_font_html">Google Font address</label>
             <div class="col-md-9">
                 <textarea id="google_font_html" class="form-control o_input_google_font"
@@ -102,7 +102,7 @@
     </t>
     <div t-name="website.s_google_map_modal">
         <p>Use Google Map on your website (Contact Us page, snippets, etc).</p>
-        <div class="form-group row mb-0">
+        <div class="row mb-0">
             <label class="col-sm-2 col-form-label" for="pin_address">API Key</label>
             <div class="col">
                 <div class="input-group">
diff --git a/addons/website/static/src/xml/website.xml b/addons/website/static/src/xml/website.xml
index 8a5e979a94d..72001cee845 100644
--- a/addons/website/static/src/xml/website.xml
+++ b/addons/website/static/src/xml/website.xml
@@ -10,7 +10,7 @@
                     </header>
                     <main class="modal-body">
                         <form role="form" t-att-id="id">
-                            <div class="form-group row mb0">
+                            <div class="row mb0">
                                 <label for="page-name" class="col-md-3 col-form-label">
                                     <t t-esc="field_name"/>
                                 </label>
diff --git a/addons/website/static/src/xml/website_form_editor.xml b/addons/website/static/src/xml/website_form_editor.xml
index cf5b4704dea..79b033672cd 100644
--- a/addons/website/static/src/xml/website_form_editor.xml
+++ b/addons/website/static/src/xml/website_form_editor.xml
@@ -33,7 +33,7 @@
     <!-- Generic Field Layout -->
     <!-- Changes made here needs to be reflected in the different Form view (Contact Us, Jobs, ...) -->
     <t t-name="website.form_field">
-        <div t-attf-class="form-group s_website_form_field #{field.formatInfo.col or 'col-12'} #{field.custom and 's_website_form_custom' or ''} #{(field.required and 's_website_form_required' or '') or (field.modelRequired and 's_website_form_model_required' or '')} #{field.hidden and 's_website_form_field_hidden' or ''} #{field.dnone and 's_website_form_dnone' or ''}"
+        <div t-attf-class="s_website_form_field mb-3 #{field.formatInfo.col or 'col-12'} #{field.custom and 's_website_form_custom' or ''} #{(field.required and 's_website_form_required' or '') or (field.modelRequired and 's_website_form_model_required' or '')} #{field.hidden and 's_website_form_field_hidden' or ''} #{field.dnone and 's_website_form_dnone' or ''}"
             t-att-data-type="field.type"
             data-name="Field">
             <div t-if="field.formatInfo.labelPosition != 'none' and field.formatInfo.labelPosition != 'top'" class="row s_col_no_resize s_col_no_bgcolor">
diff --git a/addons/website/views/snippets/s_website_form.xml b/addons/website/views/snippets/s_website_form.xml
index 09d1076432f..d3e5f6a8768 100644
--- a/addons/website/views/snippets/s_website_form.xml
+++ b/addons/website/views/snippets/s_website_form.xml
@@ -6,7 +6,7 @@
         <div class="container">
             <form action="/website/form/" method="post" enctype="multipart/form-data" class="o_mark_required" data-mark="*" data-pre-fill="true">
                 <div class="s_website_form_rows row s_col_no_bgcolor">
-                    <div class="form-group col-12 s_website_form_submit" data-name="Submit Button">
+                    <div class="mb-0 py-2 col-12 s_website_form_submit" data-name="Submit Button">
                         <div style="width: 200px;" class="s_website_form_label"/>
                         <a href="#" role="button" class="btn btn-primary btn-lg s_website_form_send">Submit</a>
                         <span id="s_website_form_result"></span>
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index b22195fa04a..5e884a2f397 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -2222,7 +2222,7 @@
                             <span class="mt-1">Wrong password</span>
                         </div>
                     </div>
-                    <div class="form-group">
+                    <div class="mb-3">
                         <div class="input-group">
                             <input type="hidden" name="url" t-att-value="path" />
                             <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()" />
@@ -2285,12 +2285,12 @@
                             <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                         </header>
                         <main class="modal-body">
-                            <div class="form-group row mb0">
+                            <div class="row mb0">
                                 <label for="page-name" class="col-md-12 col-form-label">
                                     <p>The selected templates will be reset to their factory settings.</p>
                                 </label>
                             </div>
-                            <div class="form-group row mb0">
+                            <div class="row mb0">
                                 <label for="page-name" class="col-md-9 col-form-label">
                                     <p>Type '<i class="confirm_word">yes</i>' in the box below if you want to confirm.</p>
                                 </label>
diff --git a/addons/website_crm_partner_assign/views/website_crm_partner_assign_templates.xml b/addons/website_crm_partner_assign/views/website_crm_partner_assign_templates.xml
index df861831907..3431bca8d36 100644
--- a/addons/website_crm_partner_assign/views/website_crm_partner_assign_templates.xml
+++ b/addons/website_crm_partner_assign/views/website_crm_partner_assign_templates.xml
@@ -61,7 +61,7 @@
             <div class="d-flex p-2">
                 <t t-call="website.pager"/>
                 <form action="" method="get" class="ms-auto">
-                    <div class="form-group">
+                    <div class="mb-3">
                         <input t-if="country_all" type="hidden" name="country_all" value="True" />
                         <input type="text" name="search" class="search-query form-control" placeholder="Search" t-att-value="searches.get('search', '')"/>
                     </div>
@@ -268,15 +268,15 @@
                             <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                         </header>
                         <main class="modal-body" id="new-opp-dialog">
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label class="col-form-label hdd4" for="contact_name">Contact name</label>
                                 <input type='text' name="contact_name" class="form-control contact_name"/>
                             </div>
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label class="col-form-label h4dd" for="title">Opportunity</label>
                                 <input type='text' name="title" class="form-control title"/>
                             </div>
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label class="col-form-label hdd4" for="description">Description</label>
                                 <textarea rows="3" name="description" class="form-control description"></textarea>
                             </div>
@@ -427,11 +427,11 @@
                                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                             </header>
                             <main class="modal-body" id="sign-dialog">
-                                <div class="form-group">
+                                <div class="mb-3">
                                     <label class="col-form-label" for="comment">What is the next action? When? What is the expected revenue?</label>
                                     <input type="text" name="comment" id="comment" class="form-control comment_interested"/>
                                 </div>
-                                <div class="form-group">
+                                <div class="mb-3">
                                     <label class="col-form-label" for="customer_contacted">I have contacted the customer</label>
                                     <input type="checkbox" name="customer_contacted" id="customer_contacted" class="contacted_interested"/>
                                 </div>
@@ -456,15 +456,15 @@
                                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                             </header>
                             <main class="modal-body" id="sign-dialog">
-                                <div class="form-group">
+                                <div class="mb-3">
                                     <label class="col-form-label" for="comment">Why aren't you interested in this lead?</label>
                                     <input type="text" name="comment" id="comment" class="form-control comment_desinterested"/>
                                 </div>
-                                <div class="form-group">
+                                <div class="mb-3">
                                     <label class="col-form-label" for="contacted_desinterested">I have contacted the customer</label>
                                     <input type="checkbox" name="contacted_desinterested" id="contacted_desinterested" class="contacted_desinterested"/>
                                 </div>
-                                <div class="form-group">
+                                <div class="mb-3">
                                     <label class="col-form-label" for="customer_mark_spam">This lead is a spam</label>
                                     <input type="checkbox" name="customer_mark_spam" id="customer_mark_spam" class="customer_mark_spam"/>
                                 </div>
@@ -620,7 +620,7 @@
                                             <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                         </header>
                                         <main class="modal-body" id="sign-dialog">
-                                            <div class="form-group">
+                                            <div class="mb-3">
                                                 <div class="row align-items-center">
                                                     <div class="col-auto flex-grow-1">
                                                         <div class="input-group">
@@ -637,7 +637,7 @@
                                                     </div>
                                                 </div>
                                             </div>
-                                            <div class="form-group">
+                                            <div class="mb-3">
                                                 <div class="row">
                                                     <div class="col-md-5">
                                                         <label>Priority:</label>
@@ -675,7 +675,7 @@
                                                     </div>
                                                 </div>
                                             </div>
-                                            <div class="form-group">
+                                            <div class="mb-3">
                                                 <div class="row">
                                                     <div class="col-md-5">
                                                         <label class="col-form-label" for="next_activity">Next Activity</label>
@@ -700,7 +700,7 @@
                                                     </div>
                                                 </div>
                                             </div>
-                                            <div class="form-group">
+                                            <div class="mb-3">
                                                 <label class="col-form-label" for="activity_summary">Details Next Activity</label>
                                                 <textarea rows="6" name="activity_summary" class="form-control activity_summary"><t t-esc="user_activity.summary"/></textarea>
                                             </div>
@@ -724,37 +724,37 @@
                                         </header>
                                         <main class="modal-body" id="sign-dialog">
                                             <t t-if="opportunity.partner_name">
-                                                <div class="form-group">
+                                                <div class="mb-3">
                                                     <label class="col-form-label" for="partner_name">Customer Name</label>
                                                     <input type="text" name="partner_name" class="form-control partner_name" t-att-value="opportunity.partner_name"/>
                                                 </div>
                                             </t>
                                             <t t-if="not opportunity.partner_name">
-                                                <div class="form-group">
+                                                <div class="mb-3">
                                                     <label class="col-form-label" for="partner_name">Customer Name</label>
                                                     <input type="text" name="partner_name" class="form-control partner_name" t-att-value="opportunity.contact_name"/>
                                                 </div>
                                             </t>
-                                            <div class="form-group">
+                                            <div class="mb-3">
                                                 <label class="col-form-label" for="phone">Phone</label>
                                                 <input type="text" name="phone" class="form-control phone" t-att-value="opportunity.phone"/>
                                             </div>
-                                            <div class="form-group">
+                                            <div class="mb-3">
                                                 <label class="col-form-label" for="mobile">Mobile</label>
                                                 <input type="text" name="mobile" class="form-control mobile" t-att-value="opportunity.mobile"/>
                                             </div>
-                                            <div class="form-group">
+                                            <div class="mb-3">
                                                 <label class="col-form-label" for="email_from">Email</label>
                                                 <input type="text" name="email_from" class="form-control email_from" t-att-value="opportunity.email_from"/>
                                             </div>
-                                            <div class="form-group">
+                                            <div class="mb-3">
                                                 <label class="col-form-label" for="street">Address</label>
                                                 <input type="text" name="street" class="form-control street" t-att-value="opportunity.street" placeholder="Street"/>
                                             </div>
-                                            <div class="form-group">
+                                            <div class="mb-3">
                                                 <input type="text" name="street2" class="form-control street2" t-att-value="opportunity.street2" placeholder="Street2"/>
                                             </div>
-                                            <div class="form-group">
+                                            <div class="mb-3">
                                                 <div class="row">
                                                     <div class="col-md-5">
                                                         <input type="text" name="city" class="form-control city" t-att-value="opportunity.city" placeholder="City"/>
@@ -774,7 +774,7 @@
                                                     </div>
                                                 </div>
                                             </div>
-                                            <div class="form-group">
+                                            <div class="mb-3">
                                                 <select name="country_id" class="form-select country_id">
                                                     <option>Countries...</option>
                                                     <t t-foreach="countries or []" t-as="country">
diff --git a/addons/website_customer/views/website_customer_templates.xml b/addons/website_customer/views/website_customer_templates.xml
index 6f216fa55e6..ee5310d7e46 100644
--- a/addons/website_customer/views/website_customer_templates.xml
+++ b/addons/website_customer/views/website_customer_templates.xml
@@ -23,7 +23,7 @@
                                <t t-set="classname" t-value="'float-start'"/>
                             </t>
                             <form action="" method="get" class="navbar-search ms-auto pagination">
-                                <div class="form-group">
+                                <div class="mb-3">
                                     <input type="text" name="search" class="search-query form-control"
                                         placeholder="Search" t-att-value="post.get('search', '')"/>
                                 </div>
diff --git a/addons/website_event_booth/static/src/js/booth_register.js b/addons/website_event_booth/static/src/js/booth_register.js
index 5123f86b42e..b0cf87ea5ba 100644
--- a/addons/website_event_booth/static/src/js/booth_register.js
+++ b/addons/website_event_booth/static/src/js/booth_register.js
@@ -79,10 +79,8 @@ publicWidget.registry.boothRegistration = publicWidget.Widget.extend({
     _isConfirmationFormValid($form) {
         const formErrors = [];
 
-        $form.find('.form-group').each(function (index, field) {
-            let $field = $(field);
-            let input = $field.find('.form-control');
-
+        $form.find('.form-control').each(function () {
+            let input = $(this);
             input.removeClass('is-invalid');
             if (input.length && !input[0].checkValidity()) {
                 input.addClass('is-invalid');
diff --git a/addons/website_event_booth/views/event_booth_registration_templates.xml b/addons/website_event_booth/views/event_booth_registration_templates.xml
index 2ab3fa40c61..8dac981af27 100644
--- a/addons/website_event_booth/views/event_booth_registration_templates.xml
+++ b/addons/website_event_booth/views/event_booth_registration_templates.xml
@@ -14,7 +14,7 @@
                     <h4 class="mt32">
                         <strong>Contact Details</strong>
                     </h4>
-                    <div class="row form-group">
+                    <div class="row mb-3">
                         <label class="col-form-label col-sm-auto">
                             <span>Name</span>
                             <span> *</span>
@@ -24,7 +24,7 @@
                                    t-att-value="default_contact.get('name', '')"/>
                         </div>
                     </div>
-                    <div class="row form-group">
+                    <div class="row mb-3">
                         <label class="col-form-label col-sm-auto">
                             <span>Email</span>
                             <span> *</span>
@@ -34,14 +34,14 @@
                                    t-att-value="default_contact.get('email', '')"/>
                         </div>
                     </div>
-                    <div class="row form-group">
+                    <div class="row mb-3">
                         <label class="col-form-label col-sm-auto">Phone</label>
                         <div class="col-sm">
                             <input type="tel" class="form-control" name="contact_phone"
                                    t-att-value="default_contact.get('phone', '')"/>
                         </div>
                     </div>
-                    <div class="row form-group">
+                    <div class="row mb-3">
                         <label class="col-form-label col-sm-auto">Mobile</label>
                         <div class="col-sm">
                             <input type="tel" class="form-control" name="contact_mobile"
@@ -53,7 +53,7 @@
                     <i class="fa fa-exclamation-triangle me-2" role="img" aria-label="Error" title="Error"/>
                     <span class="o_wbooth_registration_error_message"/>
                 </div>
-                <div class="form-group">
+                <div class="mb-3">
                     <div class="d-grid col-sm-6 offset-sm-3 mt-5">
                         <button type="submit" class="btn btn-primary fw-bold o_wbooth_registration_confirm">
                             Book my Booths
diff --git a/addons/website_event_booth/views/event_booth_templates.xml b/addons/website_event_booth/views/event_booth_templates.xml
index cd8a3aadb5b..f3915542f0d 100644
--- a/addons/website_event_booth/views/event_booth_templates.xml
+++ b/addons/website_event_booth/views/event_booth_templates.xml
@@ -85,7 +85,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="row form-group">
+                            <div class="row">
                                 <div class="col-sm-2 offset-sm-1">
                                     <label for="booth_id" class="control-label">Booths</label>
                                 </div>
diff --git a/addons/website_event_booth_exhibitor/views/event_booth_registration_templates.xml b/addons/website_event_booth_exhibitor/views/event_booth_registration_templates.xml
index a4d8a11f4ac..6187dbbe0c3 100644
--- a/addons/website_event_booth_exhibitor/views/event_booth_registration_templates.xml
+++ b/addons/website_event_booth_exhibitor/views/event_booth_registration_templates.xml
@@ -13,7 +13,7 @@
                 <div class="form-text text-muted mb16">
                     This booth type allows you to have visibility on the event website. Please fill in this form
                 </div>
-                <div class="row form-group">
+                <div class="row mb-3">
                     <label class="col-form-label col-sm-auto" for="sponsor_name">
                         <span>Name</span>
                         <span class="mandatory_mark"> *</span>
@@ -22,7 +22,7 @@
                         <input class="form-control" type="text" name="sponsor_name" id="sponsor_name" required="True"/>
                     </div>
                 </div>
-                <div class="row form-group">
+                <div class="row mb-3">
                     <label class="col-form-label col-sm-auto" for="sponsor_email">
                         <span>Email</span>
                         <span class="mandatory_mark"> *</span>
@@ -31,25 +31,25 @@
                         <input class="form-control" type="email" name="sponsor_email" id="sponsor_email" required="True"/>
                     </div>
                 </div>
-                <div class="row form-group">
+                <div class="row mb-3">
                     <label class="col-form-label col-sm-auto" for="sponsor_phone">Phone</label>
                     <div class="col-sm">
                         <input class="form-control" type="text" name="sponsor_phone" id="sponsor_phone"/>
                     </div>
                 </div>
-                <div class="row form-group">
+                <div class="row mb-3">
                     <label class="col-form-label col-sm-auto" for="sponsor_slogan">Slogan</label>
                     <div class="col-sm">
                         <input class="form-control" type="text" name="sponsor_slogan" id="sponsor_slogan"/>
                     </div>
                 </div>
-                <div class="row form-group" t-if="booth_category.exhibitor_type != 'sponsor'">
+                <div class="row mb-3" t-if="booth_category.exhibitor_type != 'sponsor'">
                     <label class="col-form-label col-sm-auto" for="sponsor_description">Description</label>
                     <div class="col-sm">
                         <textarea class="form-control" name="sponsor_description" id="sponsor_description"/>
                     </div>
                 </div>
-                <div class="row form-group">
+                <div class="row mb-3">
                     <label class="col-form-label col-sm-auto" for="sponsor_image">Picture</label>
                     <div class="col-sm">
                         <input name="sponsor_image" type="file" accept="image/*"/>
diff --git a/addons/website_event_track/static/src/js/website_event_track_proposal_form.js b/addons/website_event_track/static/src/js/website_event_track_proposal_form.js
index 6dff8848948..e173c21fb0b 100644
--- a/addons/website_event_track/static/src/js/website_event_track_proposal_form.js
+++ b/addons/website_event_track/static/src/js/website_event_track_proposal_form.js
@@ -40,17 +40,17 @@ publicWidget.registry.websiteEventTrackProposalForm = publicWidget.Widget.extend
         var formErrors = [];
 
         // 1) Valid Form Inputs
-        this.$('.form-group').each(function (index, field) {
-            var $field = $(field);
+        this.$('.form-control').each(function () {
+            var $formControl = $(this);
             // Validate current input, if not select2 field.
-            var inputs = $field.find('.form-control').not('.o_wetrack_select2_tags');
+            var inputs = $formControl.not('.o_wetrack_select2_tags');
             var invalidInputs = inputs.toArray().filter(function (input) {
                 return !input.checkValidity();
             });
 
-            $field.find('.form-control').removeClass('o_wetrack_input_error is-invalid');
+            $formControl.removeClass('o_wetrack_input_error is-invalid');
             if (invalidInputs.length) {
-                $field.find('.form-control').addClass('o_wetrack_input_error is-invalid');
+                $formControl.addClass('o_wetrack_input_error is-invalid');
                 formErrors.push('invalidFormInputs');
             }
         });
diff --git a/addons/website_event_track/views/event_track_templates_proposal.xml b/addons/website_event_track/views/event_track_templates_proposal.xml
index 8e65220f19d..9e1d9dad2d7 100644
--- a/addons/website_event_track/views/event_track_templates_proposal.xml
+++ b/addons/website_event_track/views/event_track_templates_proposal.xml
@@ -59,7 +59,7 @@
                                         <div class="col-sm">
                                             <textarea name="description" class="form-control" required="True"/>
                                         </div>
-                                    </div>    
+                                    </div>
                                     <div class="row mb-3">
                                         <label class="col-form-label col-sm-auto" for="tags" style="width: 200px">Categories</label>
                                         <div class="col-sm o_website_event_track_proposal_form_tags">
@@ -97,8 +97,8 @@
                                         <div class="col-sm"><textarea name="partner_biography" class="form-control"/></div>
                                     </div>
                                 </div>
-                                <t t-call="website_event_track.event_track_proposal_contact_details"/>   
-                                <div class="form-group o_form_buttons">
+                                <t t-call="website_event_track.event_track_proposal_contact_details"/>
+                                <div class="o_form_buttons">
                                     <button type="submit" class="btn btn-primary o_wetrack_proposal_submit_button">Submit Proposal</button>
                                     <span class="o_wetrack_proposal_error_section text-danger d-none ml8">
                                         <i class="fa fa-close mr4" role="img" aria-label="Error" title="Error"/>
diff --git a/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml b/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml
index 97003fbc341..8c4ed2d76b6 100644
--- a/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml
+++ b/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml
@@ -144,7 +144,7 @@
                             data-success-mode="redirect" data-success-page="/job-thank-you"
                             hide-change-model="true">
                             <section class="col-8 s_website_form_rows row s_col_no_bgcolor">
-                                <div class="col-12 mb-3 s_website_form_field s_website_form_required s_website_form_model_required"
+                                <div class="col-12 mb-0 py-2 s_website_form_field s_website_form_required s_website_form_model_required"
                                     data-type="char" data-name="Field">
                                     <div class="row s_col_no_resize s_col_no_bgcolor">
                                         <label class="col-4 col-sm-auto s_website_form_label" style="width: 200px" for="recruitment1">
@@ -159,7 +159,7 @@
                                         </div>
                                     </div>
                                 </div>
-                                <div class="col-12 mb-3 s_website_form_field s_website_form_required"
+                                <div class="col-12 mb-0 py-2 s_website_form_field s_website_form_required"
                                     data-type="email" data-name="Field">
                                     <div class="row s_col_no_resize s_col_no_bgcolor">
                                         <label class="col-4 col-sm-auto s_website_form_label" style="width: 200px" for="recruitment2">
@@ -174,7 +174,7 @@
                                         </div>
                                     </div>
                                 </div>
-                                <div class="col-12 mb-3 s_website_form_field s_website_form_required"
+                                <div class="col-12 mb-0 py-2 s_website_form_field s_website_form_required"
                                     data-type="char" data-name="Field">
                                     <div class="row s_col_no_resize s_col_no_bgcolor">
                                         <label class="col-4 col-sm-auto s_website_form_label" style="width: 200px" for="recruitment3">
@@ -189,7 +189,7 @@
                                         </div>
                                     </div>
                                 </div>
-                                <div class="col-12 mb-3 s_website_form_field s_website_form_required"
+                                <div class="col-12 mb-0 py-2 s_website_form_field s_website_form_required"
                                     data-type="char" data-name="Field">
                                     <div class="row s_col_no_resize s_col_no_bgcolor">
                                         <label class="col-4 col-sm-auto s_website_form_label" style="width: 200px" for="recruitment4">
@@ -206,7 +206,7 @@
                                         </div>
                                     </div>
                                 </div>
-                                <div class="col-12 mb-3 s_website_form_field s_website_form_custom"
+                                <div class="col-12 mb-0 py-2 s_website_form_field s_website_form_custom"
                                     data-type="binary" data-name="Field">
                                     <div class="row s_col_no_resize s_col_no_bgcolor">
                                         <label class="col-4 col-sm-auto s_website_form_label" style="width: 200px" for="recruitment6">
@@ -220,7 +220,7 @@
                                     </div>
                                     <span class="text-muted" style="margin-left: 200px; font-size: 0.8rem">The resume is optional if you have a Linkedin profile</span>
                                 </div>
-                                <div class="col-12 mb-3 s_website_form_field"
+                                <div class="col-12 mb-0 py-2 s_website_form_field"
                                     data-type="text" data-name="Field">
                                     <div class="row s_col_no_resize s_col_no_bgcolor">
                                         <label class="col-4 col-sm-auto s_website_form_label" style="width: 200px" for="recruitment5">
@@ -234,7 +234,7 @@
                                         </div>
                                     </div>
                                 </div>
-                                <div class="col-12 mb-3 s_website_form_field s_website_form_dnone">
+                                <div class="col-12 mb-0 py-2 s_website_form_field s_website_form_dnone">
                                     <div class="row s_col_no_resize s_col_no_bgcolor">
                                         <label class="col-4 col-sm-auto s_website_form_label" style="width: 200px" for="recruitment7">
                                             <span class="s_website_form_label_content">Job</span>
@@ -246,7 +246,7 @@
                                         </div>
                                     </div>
                                 </div>
-                                <div class="col-12 mb-3 s_website_form_field s_website_form_dnone">
+                                <div class="col-12 mb-0 py-2 s_website_form_field s_website_form_dnone">
                                     <div class="row s_col_no_resize s_col_no_bgcolor">
                                         <label class="col-4 col-sm-auto s_website_form_label" style="width: 200px" for="recruitment8">
                                             <span class="s_website_form_label_content">Department</span>
diff --git a/addons/website_links/views/website_links_template.xml b/addons/website_links/views/website_links_template.xml
index 39708f2d684..c6b7d2d43b1 100644
--- a/addons/website_links/views/website_links_template.xml
+++ b/addons/website_links/views/website_links_template.xml
@@ -10,7 +10,7 @@
                         <div class="col-md-7">
                             <form id="o_website_links_link_tracker_form">
 
-                                <div class="form-group row" id="url-form-group">
+                                <div class="mb-3 row">
                                     <label class="col-md-3 col-form-label text-start">URL</label>
 
                                     <div class="col-md-9">
@@ -19,7 +19,7 @@
                                 </div>
 
                                 <div class="o_website_links_utm_forms">
-                                    <div class="form-group row">
+                                    <div class="mb-3 row">
                                         <label class="col-md-3 col-form-label">Campaign <i class="fa fa-info-circle" data-bs-toggle="tooltip" data-bs-placement="top" role="img" aria-label="Tooltip info" title="Defines the context of your link. It might be an event you want to promote or a special promotion."></i></label>
 
                                         <div class="col-md-9">
@@ -27,7 +27,7 @@
                                         </div>
                                     </div>
 
-                                    <div class="form-group row">
+                                    <div class="mb-3 row">
                                         <label class="col-md-3 col-form-label">Medium <i class="fa fa-info-circle" data-bs-toggle="tooltip" data-bs-placement="top" role="img" aria-label="Tooltip info" title="Defines the medium used to share your link. It might be an email, or a Facebook Ads for instance."></i></label>
 
                                         <div class="col-md-9">
@@ -35,7 +35,7 @@
                                         </div>
                                     </div>
 
-                                    <div class="form-group row">
+                                    <div class="mb-3 row">
                                         <label class="col-md-3 col-form-label">Source <i class="fa fa-info-circle" data-bs-toggle="tooltip" data-bs-placement="top" role="img" aria-label="Tooltip info" title="Defines the source from which your traffic will come from, Facebook or Twitter for instance."></i></label>
 
                                         <div class="col-md-9">
@@ -44,7 +44,7 @@
                                     </div>
                                 </div>
 
-                                <div class="form-group row">
+                                <div class="mb-3 row">
                                     <div class="offset-md-3 col-md-9">
                                         <button type="submit" class="btn btn-primary" id="btn_shorten_url" data-clipboard-text="">Get tracked link</button>
 
diff --git a/addons/website_mass_mailing/views/snippets_templates.xml b/addons/website_mass_mailing/views/snippets_templates.xml
index ac37bbdb70c..1f8366e0727 100644
--- a/addons/website_mass_mailing/views/snippets_templates.xml
+++ b/addons/website_mass_mailing/views/snippets_templates.xml
@@ -58,7 +58,7 @@
             <form id="newsletter_form" action="/website/form/" method="post" enctype="multipart/form-data" class="o_mark_required"
                   data-mark="*" data-model_name="mailing.contact" data-success-mode="message" hide-change-model="true">
                 <div class="s_website_form_rows row s_col_no_bgcolor">
-                    <div class="mb-3 col-12 s_website_form_field s_website_form_model_required" data-type="char" data-name="Field">
+                    <div class="mb-0 py-2 col-12 s_website_form_field s_website_form_model_required" data-type="char" data-name="Field">
                         <div class="row s_col_no_resize s_col_no_bgcolor">
                             <label class="col-form-label col-sm-auto s_website_form_label" style="width: 250px" for="mailing_sub1">
                                 <span class="s_website_form_label_content">Your Name</span>
@@ -69,7 +69,7 @@
                             </div>
                         </div>
                     </div>
-                    <div class="mb-3 col-12 s_website_form_field s_website_form_model_required" data-type="email" data-name="Field">
+                    <div class="mb-0 py-2 col-12 s_website_form_field s_website_form_model_required" data-type="email" data-name="Field">
                         <div class="row s_col_no_resize s_col_no_bgcolor">
                             <label class="col-form-label col-sm-auto s_website_form_label" style="width: 250px" for="mailing_sub2">
                                 <span class="s_website_form_label_content">Your Email</span>
@@ -80,7 +80,7 @@
                             </div>
                         </div>
                     </div>
-                    <div class="mb-3 col-12 s_website_form_field s_website_form_model_required" data-type="many2many" data-name="Field">
+                    <div class="mb-0 py-2 col-12 s_website_form_field s_website_form_model_required" data-type="many2many" data-name="Field">
                         <div class="row s_col_no_resize s_col_no_bgcolor">
                             <label class="col-sm-auto s_website_form_label" style="width: 250px" for="mailing_list_">
                                 <span class="s_website_form_label_content">Subscribe to</span>
@@ -103,7 +103,7 @@
                             </div>
                         </div>
                     </div>
-                    <div class="mb-3 col-12 s_website_form_field s_website_form_custom s_website_form_required" data-type="boolean" data-name="Field">
+                    <div class="mb-0 py-2 col-12 s_website_form_field s_website_form_custom s_website_form_required" data-type="boolean" data-name="Field">
                         <div class="row s_col_no_resize s_col_no_bgcolor">
                             <label class="col-sm-auto s_website_form_label" style="width: 250px;" for="mailing_sub3">
                                 <span class="s_website_form_label_content">I agree to receive updates</span>
@@ -120,7 +120,7 @@
                             </div>
                         </div>
                     </div>
-                    <div class="mb-3 col-12 s_website_form_submit" data-name="Submit Button">
+                    <div class="mb-0 py-2 col-12 s_website_form_submit" data-name="Submit Button">
                         <div style="width: 250px;" class="s_website_form_label"/>
                         <a href="#" role="button" class="btn btn-primary btn-lg s_website_form_send">Subscribe</a>
                         <span id="s_website_form_result"></span>
diff --git a/addons/website_payment/views/donation_templates.xml b/addons/website_payment/views/donation_templates.xml
index 3fc848d42dc..42c9bafb642 100644
--- a/addons/website_payment/views/donation_templates.xml
+++ b/addons/website_payment/views/donation_templates.xml
@@ -9,21 +9,21 @@
                 <t t-set="donation_confirm_button_label">Donate Now</t>
                 <h3 class="o_page_header mt16 mb4">Donation</h3>
                 <div class="row">
-                    <div t-attf-class="form-group #{error.get('name') and 'o_has_error' or ''} col-lg-12 div_name">
+                    <div t-attf-class="mb-3 #{error.get('name') and 'o_has_error' or ''} col-lg-12 div_name">
                         <label class="col-form-label fw-bold" for="name">Name
                             <span class="s_website_form_mark"> *</span>
                         </label>
                         <input t-att-readonly="'1' if 'name' in partner_details and partner_id else None" type="text" name="name" t-attf-class="form-control #{error.get('name') and 'is-invalid' or ''}" t-att-value="partner_details.get('name')" />
                     </div>
                     <div class="w-100"/>
-                    <div t-attf-class="form-group #{error.get('email') and 'o_has_error' or ''} col-lg-6" id="div_email">
+                    <div t-attf-class="mb-3 #{error.get('email') and 'o_has_error' or ''} col-lg-6" id="div_email">
                         <label class="col-form-label fw-bold" for="email">Email
                             <span class="s_website_form_mark"> *</span>
                         </label>
                         <input t-att-readonly="'1' if 'email' in partner_details and partner_id else None" type="email" name="email" t-attf-class="form-control #{error.get('email') and 'is-invalid' or ''}" t-att-value="partner_details.get('email')" />
                     </div>
                     <t t-set="country_id" t-value="partner_details.get('country_id')"/>
-                    <div t-attf-class="form-group #{error.get('country_id') and 'o_has_error' or ''} col-lg-6 div_country">
+                    <div t-attf-class="mb-3 #{error.get('country_id') and 'o_has_error' or ''} col-lg-6 div_country">
                         <label class="col-form-label fw-bold" for="country_id">Country
                             <span class="s_website_form_mark"> *</span>
                         </label>
@@ -37,7 +37,7 @@
                         </select>
                     </div>
                     <div class="w-100"/>
-                    <div class="form-group col-lg-12 o_donation_payment_form">
+                    <div class="mb-3 col-lg-12 o_donation_payment_form">
                         <div class="col-lg-6 px-0">
                             <label class="col-form-label fw-bold">Amount (<t t-out="currency.symbol"/>)</label>
                             <t t-set="donation_layout" t-value="donation_options.get('customAmount')"/>
diff --git a/addons/website_profile/views/website_profile.xml b/addons/website_profile/views/website_profile.xml
index 8ab2ee3048c..20aa45ed81b 100644
--- a/addons/website_profile/views/website_profile.xml
+++ b/addons/website_profile/views/website_profile.xml
@@ -97,7 +97,7 @@
                                     <i class="fa fa-trash-o float-sm-none float-md-end"></i>
                                 </a>
                             </div>
-                            <div class="form-group mt-3 mb-0 pt-2 border-top">
+                            <div class="my-3 mb-0 pt-2 border-top">
                                 <label class="text-primary" for="user_website_published" t-if="user.id == uid"><span class="fw-bold">Public profile</span></label>
                                 <div class=" mb-0 float-end" t-if="user.id == uid">
                                     <input type="checkbox" class="mt8" name="website_published" id="user_website_published" value="True" t-if="not user.website_published"/>
@@ -112,20 +112,20 @@
                         <div class="card-body">
                             <div class="row">
                                 <input name="user_id" t-att-value="user.id" type="hidden"/>
-                                <div class="form-group col-12">
+                                <div class="mb-3 col-12">
                                     <label class="text-primary mb-1 d-block" for="user_name"><span class="fw-bold">Name</span></label>
                                     <div>
                                         <input type="text" class="form-control" name="name" id="user_name" required="True" t-attf-value="#{user.name}"/>
                                     </div>
                                 </div>
 
-                                <div class="form-group col-6">
+                                <div class="mb-3 col-6">
                                     <label class="mb-1 text-primary" for="user_website"><span class="fw-bold">Website</span></label>
                                     <div>
                                         <input type="text" class="form-control" name="website" id="user_website" t-attf-value="#{user.partner_id.website or ''}"/>
                                     </div>
                                 </div>
-                                <div class="form-group col-6">
+                                <div class="mb-3 col-6">
                                     <div t-if="email_required" class="alert alert-danger alert-dismissable oe_email_required" role="alert">
                                         <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                                         <p>Please enter a valid email address in order to receive notifications from answers or comments.</p>
@@ -135,13 +135,13 @@
                                         <input type="text" class="form-control" name="email" id="user_email" required="True" t-attf-value="#{user.partner_id.email}"/>
                                     </div>
                                 </div>
-                                <div class="form-group col-6">
+                                <div class="mb-3 col-6">
                                     <label class="mb-1 text-primary" for="user_city"><span class="fw-bold">City</span></label>
                                     <div>
                                         <input type="text" class="form-control" name="city" id="user_city" t-attf-value="#{user.partner_id.city or ''}"/>
                                     </div>
                                 </div>
-                                <div class="form-group col-6">
+                                <div class="mb-3 col-6">
                                     <label class="mb-1 text-primary"><span class="fw-bold">Country</span></label>
                                     <div>
                                         <select class="form-select" name="country">
@@ -152,7 +152,7 @@
                                          </select>
                                     </div>
                                 </div>
-                                <div class="form-group col-12">
+                                <div class="mb-3 col-12">
                                     <label class="mb-1 text-primary" for="description"><span class="fw-bold">Biography</span></label>
                                     <textarea name="description" id="description" style="min-height: 120px"
                                         class="form-control o_wysiwyg_loader"><t t-esc="user.partner_id.website_description"/></textarea>
@@ -509,8 +509,8 @@
             <div class="container">
                 <h1 class="py-4 text-white d-inline-block">All Users</h1>
                 <div class="py-4 float-end">
-                    <strong class="form-group text-white me-2">Rank by :</strong>
-                    <div class="form-group btn-group">
+                    <strong class="mb-3 text-white me-2">Rank by :</strong>
+                    <div class="mb-3 btn-group">
                         <a t-attf-class="btn btn-secondary #{ 'active' if group_by == 'week' else ''}"
                             t-att-href="'/profile/users?' + keep_query('search', group_by='week')">This week</a>
                         <a t-attf-class="btn btn-secondary #{ 'active' if group_by == 'month' else ''}"
diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index 22c05f48502..d9876574a5e 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -1237,7 +1237,7 @@
                                 <div class="container">
                                     <form action="/website/form/" method="post" enctype="multipart/form-data" class="o_mark_required s_website_form_no_recaptcha" data-mark="*" data-force_action="shop.sale.order" data-model_name="sale.order" data-success-mode="redirect" data-success-page="/shop/payment" hide-change-model="true">
                                         <div class="s_website_form_rows row s_col_no_bgcolor">
-                                            <div class="form-group col-12 s_website_form_field" data-type="char" data-name="Field">
+                                            <div class="mb-0 py-2 col-12 s_website_form_field" data-type="char" data-name="Field">
                                                 <div class="row s_col_no_resize s_col_no_bgcolor">
                                                     <label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="sale1">
                                                         <span class="s_website_form_label_content">Your Reference</span>
@@ -1247,7 +1247,7 @@
                                                     </div>
                                                 </div>
                                             </div>
-                                            <div class="form-group col-12 s_website_form_field s_website_form_custom" data-type="text" data-name="Field">
+                                            <div class="mb-0 py-2 col-12 s_website_form_field s_website_form_custom" data-type="text" data-name="Field">
                                                 <div class="row s_col_no_resize s_col_no_bgcolor">
                                                     <label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="sale2">
                                                         <span class="s_website_form_label_content">Give us your feedback</span>
@@ -1257,7 +1257,7 @@
                                                     </div>
                                                 </div>
                                             </div>
-                                            <div class="form-group col-12 s_website_form_field s_website_form_custom" data-type="binary" data-name="Field">
+                                            <div class="mb-0 py-2 col-12 s_website_form_field s_website_form_custom" data-type="binary" data-name="Field">
                                                 <div class="row s_col_no_resize s_col_no_bgcolor">
                                                     <label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="sale3">
                                                         <span class="s_website_form_label_content">Upload a document</span>
@@ -1267,7 +1267,7 @@
                                                     </div>
                                                 </div>
                                             </div>
-                                            <div class="form-group col-12 s_website_form_submit s_website_form_no_submit_options">
+                                            <div class="mb-0 py-2 col-12 s_website_form_submit s_website_form_no_submit_options">
                                                 <div style="width: 200px;" class="s_website_form_label"/>
                                                 <a role="button" href="/shop/checkout" class="btn btn-secondary float-start"><span class="fa fa-chevron-left"/> Previous</a>
                                                 <a role="button" class="btn btn-primary float-end s_website_form_send" href="/shop/confirm_order">Next <span class="fa fa-chevron-right" /></a>
@@ -1741,48 +1741,48 @@
                                 </t>
                                 <form t-if="account_on_checkout != 'mandatory' or not is_public_user" action="/shop/address" method="post" class="checkout_autoformat">
                                     <div class="row">
-                                        <div t-attf-class="form-group #{error.get('name') and 'o_has_error' or ''} col-lg-12 div_name">
+                                        <div t-attf-class="mb-3 #{error.get('name') and 'o_has_error' or ''} col-lg-12 div_name">
                                             <label class="col-form-label" for="name">Name</label>
                                             <input type="text" name="name" t-attf-class="form-control #{error.get('name') and 'is-invalid' or ''}" t-att-value="'name' in checkout and checkout['name']" />
                                         </div>
                                         <div class="w-100"/>
-                                        <div t-attf-class="form-group #{error.get('email') and 'o_has_error' or ''} col-lg-6" id="div_email">
+                                        <div t-attf-class="mb-3 #{error.get('email') and 'o_has_error' or ''} col-lg-6" id="div_email">
                                             <label t-attf-class="col-form-label #{mode[1] == 'shipping' and 'label-optional' or ''}" for="email">Email</label>
                                             <input type="email" name="email" t-attf-class="form-control #{error.get('email') and 'is-invalid' or ''}" t-att-value="'email' in checkout and checkout['email']" />
                                         </div>
-                                        <div t-attf-class="form-group #{error.get('phone') and 'o_has_error' or ''} col-lg-6" id="div_phone">
+                                        <div t-attf-class="mb-3 #{error.get('phone') and 'o_has_error' or ''} col-lg-6" id="div_phone">
                                             <label class="col-form-label" for="phone">Phone</label>
                                             <input type="tel" name="phone" t-attf-class="form-control #{error.get('phone') and 'is-invalid' or ''}" t-att-value="'phone' in checkout and checkout['phone']" />
                                         </div>
                                         <div class="w-100"/>
-                                        <div t-attf-class="form-group #{error.get('street') and 'o_has_error' or ''} col-lg-12 div_street">
+                                        <div t-attf-class="mb-3 #{error.get('street') and 'o_has_error' or ''} col-lg-12 div_street">
                                             <label class="col-form-label" for="street">Street <span class="d-none d-md-inline"> and Number</span></label>
                                             <input type="text" name="street" t-attf-class="form-control #{error.get('street') and 'is-invalid' or ''}" t-att-value="'street' in checkout and checkout['street']" />
                                         </div>
-                                        <div t-attf-class="form-group #{error.get('street2') and 'o_has_error' or ''} col-lg-12 div_street2">
+                                        <div t-attf-class="mb-3 #{error.get('street2') and 'o_has_error' or ''} col-lg-12 div_street2">
                                             <label class="col-form-label label-optional" for="street2">Street 2</label>
                                             <input type="text" name="street2" t-attf-class="form-control #{error.get('street2') and 'is-invalid' or ''}" t-att-value="'street2' in checkout and checkout['street2']" />
                                         </div>
                                         <div class="w-100"/>
                                         <t t-set='zip_city' t-value='country and [x for x in country.get_address_fields() if x in ["zip", "city"]] or ["city", "zip"]'/>
                                         <t t-if="'zip' in zip_city and zip_city.index('zip') &lt; zip_city.index('city')">
-                                            <div t-attf-class="form-group #{error.get('zip') and 'o_has_error' or ''} col-md-4 div_zip">
+                                            <div t-attf-class="mb-3 #{error.get('zip') and 'o_has_error' or ''} col-md-4 div_zip">
                                                 <label class="col-form-label label-optional" for="zip">Zip Code</label>
                                                 <input type="text" name="zip" t-attf-class="form-control #{error.get('zip') and 'is-invalid' or ''}" t-att-value="'zip' in checkout and checkout['zip']" />
                                             </div>
                                         </t>
-                                        <div t-attf-class="form-group #{error.get('city') and 'o_has_error' or ''} col-md-8 div_city">
+                                        <div t-attf-class="mb-3 #{error.get('city') and 'o_has_error' or ''} col-md-8 div_city">
                                             <label class="col-form-label" for="city">City</label>
                                             <input type="text" name="city" t-attf-class="form-control #{error.get('city') and 'is-invalid' or ''}" t-att-value="'city' in checkout and checkout['city']" />
                                         </div>
                                         <t t-if="'zip' in zip_city and zip_city.index('zip') &gt; zip_city.index('city')">
-                                            <div t-attf-class="form-group #{error.get('zip') and 'o_has_error' or ''} col-md-4 div_zip">
+                                            <div t-attf-class="mb-3 #{error.get('zip') and 'o_has_error' or ''} col-md-4 div_zip">
                                                 <label class="col-form-label label-optional" for="zip">Zip Code</label>
                                                 <input type="text" name="zip" t-attf-class="form-control #{error.get('zip') and 'is-invalid' or ''}" t-att-value="'zip' in checkout and checkout['zip']" />
                                             </div>
                                         </t>
                                         <div class="w-100"/>
-                                        <div t-attf-class="form-group #{error.get('country_id') and 'o_has_error' or ''} col-lg-6 div_country">
+                                        <div t-attf-class="mb-3 #{error.get('country_id') and 'o_has_error' or ''} col-lg-6 div_country">
                                             <label class="col-form-label" for="country_id">Country</label>
                                             <select id="country_id" name="country_id" t-attf-class="form-select #{error.get('country_id') and 'is-invalid' or ''}" t-att-mode="mode[1]">
                                                 <option value="">Country...</option>
@@ -1793,7 +1793,7 @@
                                                 </t>
                                             </select>
                                         </div>
-                                        <div t-attf-class="form-group #{error.get('state_id') and 'o_has_error' or ''} col-lg-6 div_state" t-att-style="(not country or not country.state_ids) and 'display: none'">
+                                        <div t-attf-class="mb-3 #{error.get('state_id') and 'o_has_error' or ''} col-lg-6 div_state" t-att-style="(not country or not country.state_ids) and 'display: none'">
                                             <label class="col-form-label" for="state_id">State / Province</label>
                                             <select name="state_id" t-attf-class="form-select #{error.get('state_id') and 'is-invalid' or ''}" data-init="1">
                                                 <option value="">State / Province...</option>
@@ -1848,12 +1848,12 @@
             <div class="w-100"/>
             <t t-set='vat_warning' t-value="'vat' in checkout and checkout['vat'] and not can_edit_vat" />
             <t t-if="mode == ('new', 'billing') or (mode == ('edit', 'billing') and (can_edit_vat or 'vat' in checkout and checkout['vat']))">
-                <div t-attf-class="form-group #{error.get('company_name') and 'o_has_error' or ''} col-lg-6 mb-0">
+                <div t-attf-class="mb-3 #{error.get('company_name') and 'o_has_error' or ''} col-lg-6 mb-0">
                     <label class="col-form-label fw-normal label-optional" for="company_name">Company Name</label>
                     <input type="text" name="company_name" t-attf-class="form-control #{error.get('company_name') and 'is-invalid' or ''}" t-att-value="'commercial_company_name' in checkout and checkout['commercial_company_name'] or 'company_name' in checkout and checkout['company_name']" t-att-readonly="'1' if vat_warning else None" />
                     <small t-if="vat_warning" class="form-text text-muted d-block d-lg-none">Changing company name is not allowed once document(s) have been issued for your account. Please contact us directly for this operation.</small>
                 </div>
-                <div t-attf-class="form-group #{error.get('vat') and 'o_has_error' or ''} col-lg-6 div_vat mb-0">
+                <div t-attf-class="mb-3 #{error.get('vat') and 'o_has_error' or ''} col-lg-6 div_vat mb-0">
                     <label class="col-form-label fw-normal label-optional" for="vat">TIN / VAT </label>
                     <input type="text" name="vat" t-attf-class="form-control #{error.get('vat') and 'is-invalid' or ''}" t-att-value="'vat' in checkout and checkout['vat']" t-att-readonly="'1' if vat_warning else None"/>
                     <small t-if="vat_warning" class="form-text text-muted d-block d-lg-none">Changing VAT number is not allowed once document(s) have been issued for your account. Please contact us directly for this operation.</small>
diff --git a/addons/website_slides/static/src/js/slides_course_tag_add.js b/addons/website_slides/static/src/js/slides_course_tag_add.js
index 487e55a203a..c6afb3a664a 100644
--- a/addons/website_slides/static/src/js/slides_course_tag_add.js
+++ b/addons/website_slides/static/src/js/slides_course_tag_add.js
@@ -201,7 +201,7 @@ var TagCourseDialog = Dialog.extend({
         var $tagInput = this.$('#tag_id');
         if ($tagInput.length !== 0){
             var $tagSelect2Container = $tagInput
-                .closest('.form-group')
+                .parent()
                 .find('.select2-container');
             $tagSelect2Container.removeClass('is-invalid is-valid');
             if ($tagInput.is(':invalid')) {
@@ -211,7 +211,7 @@ var TagCourseDialog = Dialog.extend({
                 var $tagGroupInput = this.$('#tag_group_id');
                 if ($tagGroupInput.length !== 0){
                     var $tagGroupSelect2Container = $tagGroupInput
-                        .closest('.form-group')
+                        .parent()
                         .find('.select2-container');
                     if ($tagGroupInput.is(':invalid')) {
                         $tagGroupSelect2Container.addClass('is-invalid');
@@ -244,7 +244,7 @@ var TagCourseDialog = Dialog.extend({
      */
     _hideTagGroup: function () {
         var $tag_group_id = this.$('#tag_group_id');
-        var $tagGroupSelect2Container = $tag_group_id.closest('.form-group');
+        var $tagGroupSelect2Container = $tag_group_id.parent();
         $tagGroupSelect2Container.hide();
         $tag_group_id.removeAttr("required");
         $tag_group_id.select2("val", "");
@@ -259,7 +259,7 @@ var TagCourseDialog = Dialog.extend({
      */
     _showTagGroup: function () {
         var $tag_group_id = this.$('#tag_group_id');
-        var $tagGroupSelect2Container = $tag_group_id.closest('.form-group');
+        var $tagGroupSelect2Container = $tag_group_id.parent();
         $tagGroupSelect2Container.show();
         $tag_group_id.attr("required", "required");
     },
diff --git a/addons/website_slides/static/src/xml/slide_management.xml b/addons/website_slides/static/src/xml/slide_management.xml
index f2258e9884d..b3ab288ab61 100644
--- a/addons/website_slides/static/src/xml/slide_management.xml
+++ b/addons/website_slides/static/src/xml/slide_management.xml
@@ -18,7 +18,7 @@
             <form action="/slides/category/add" method="POST" id="slide_category_add_form">
                 <input type="hidden" name="csrf_token" t-att-value="csrf_token"/>
                 <input type="hidden" name="channel_id" t-att-value="widget.channelId"/>
-                <div class="form-group row">
+                <div class="mb-3 row">
                     <label for="section_name" class="col-sm-3 col-form-label">Section name</label>
                     <div class="col-sm-9">
                         <input type="text" autocomplete="off" class="form-control" name="name" id="section_name" required="required" placeholder='e.g. "Introduction"'/>
diff --git a/addons/website_slides/static/src/xml/website_slides_channel_tag.xml b/addons/website_slides/static/src/xml/website_slides_channel_tag.xml
index 081032e0a4e..f0983a9e07e 100644
--- a/addons/website_slides/static/src/xml/website_slides_channel_tag.xml
+++ b/addons/website_slides/static/src/xml/website_slides_channel_tag.xml
@@ -3,13 +3,13 @@
 <templates xml:space="preserve">
 
     <t t-name="website.slides.tag.add">
-        <div class="form-group">
+        <div class="mb-3">
             <form action="/slides/channel/tag/add" method="POST" id="slides_channel_tag_add_form">
-                <div class="form-group">
+                <div class="mb-3">
                     <label for="tag_id" class="col-form-label">Tag</label>
                     <input class="form-control" id="tag_id" required="required"/>
                 </div>
-                <div class="form-group">
+                <div class="mb-3">
                     <label id="tag_group_label" for="tag_group_id" class="col-form-label">Tag Group</label>
                     <input class="form-control" id="tag_group_id"/>
                 </div>
diff --git a/addons/website_slides/static/src/xml/website_slides_share.xml b/addons/website_slides/static/src/xml/website_slides_share.xml
index e82888b9039..aeab0090dfd 100644
--- a/addons/website_slides/static/src/xml/website_slides_share.xml
+++ b/addons/website_slides/static/src/xml/website_slides_share.xml
@@ -58,7 +58,7 @@
     <t t-name="website.slide.share.email">
         <h5 class="mt-4">Share by Email</h5>
         <div t-if="!widget.session.is_website_user">
-            <form class="form-group o_wslides_js_share_email" role="form">
+            <form class="o_wslides_js_share_email" role="form">
                 <div class="input-group">
                     <input type="text" class="form-control" placeholder="friend1@email.com, friend2@email.com"/>
                     <button class="btn btn-primary" type="button"
diff --git a/addons/website_slides/static/src/xml/website_slides_upload.xml b/addons/website_slides/static/src/xml/website_slides_upload.xml
index 04f2d897be0..a9790d8589e 100644
--- a/addons/website_slides/static/src/xml/website_slides_upload.xml
+++ b/addons/website_slides/static/src/xml/website_slides_upload.xml
@@ -58,19 +58,19 @@
         Slide Category common form part template
     -->
     <t t-name="website.slide.upload.modal.common">
-        <div class="form-group">
+        <div class="mb-3">
             <label for="name" class="col-form-label">Title</label>
             <input id="name" name="name" placeholder="Title" class="form-control" required="required" autocomplete="off"/>
         </div>
-        <div t-if="!widget.defaultCategoryID" class="form-group">
+        <div t-if="!widget.defaultCategoryID" class="mb-3">
             <label for="category_id" class="col-form-label">Section</label>
             <input class="form-control" id="category_id"/>
         </div>
-        <div class="form-group">
+        <div class="mb-3">
             <label for="tag_ids" class="col-form-label">Tags</label>
             <input id="tag_ids" name="tag_ids" type="hidden"/>
         </div>
-        <div class="form-group">
+        <div class="mb-3">
             <label for="duration" class="col-form-label">Estimated Completion Time</label>
             <div class="input-group">
                 <input type="number" id="duration" min="0" name="duration" placeholder='e.g. "15"' class="form-control" autocomplete="off"/>
@@ -87,7 +87,7 @@
             <form class="clearfix">
                 <div class="row">
                     <div id="o_wslides_js_slide_upload_left_column" class="col-md-6">
-                        <div class="form-group">
+                        <div class="mb-3">
                             <label for="source_type" class="col-form-label">Document Source</label><br/>
                             <div class="form-check ms-2">
                                 <input class="form-check-input" type="radio" name="source_type" id="source_type_local_file" data-value="local_file" checked="checked"/>
@@ -102,11 +102,11 @@
                                 </label>
                             </div>
                         </div>
-                        <div class="form-group o_wslides_js_slide_upload_local_file">
+                        <div class="mb-3 o_wslides_js_slide_upload_local_file">
                             <label for="upload" class="col-form-label">Choose a PDF</label>
                             <input id="upload" name="file" class="form-control h-100" accept="application/pdf" type="file" required="required"/>
                         </div>
-                        <div class="form-group o_wslides_js_slide_upload_external d-none">
+                        <div class="mb-3 o_wslides_js_slide_upload_external d-none">
                             <label for="document_google_url" class="col-form-label">Document Link</label>
                             <input id="document_google_url" name="document_google_url" class="form-control h-100" autocomplete="off"
                                 placeholder='e.g "https://drive.google.com/file/..."'/>
@@ -163,7 +163,7 @@
             <form class="clearfix">
                 <div class="row">
                     <div id="o_wslides_js_slide_upload_left_column" class="col-md-6">
-                        <div class="form-group">
+                        <div class="mb-3">
                             <label for="source_type" class="col-form-label">Image Source</label><br/>
                             <div class="form-check ms-2">
                                 <input class="form-check-input" type="radio" name="source_type" id="source_type_local_file" data-value="local_file" checked="checked"/>
@@ -178,11 +178,11 @@
                                 </label>
                             </div>
                         </div>
-                        <div class="form-group o_wslides_js_slide_upload_local_file">
+                        <div class="mb-3 o_wslides_js_slide_upload_local_file">
                             <label for="upload" class="col-form-label">Choose an Image</label>
                             <input id="upload" name="file" class="form-control h-100" accept="image/*" type="file" required="required"/>
                         </div>
-                        <div class="form-group o_wslides_js_slide_upload_external d-none">
+                        <div class="mb-3 o_wslides_js_slide_upload_external d-none">
                             <label for="image_google_url" class="col-form-label">Image Link</label>
                             <input id="image_google_url" name="image_google_url" class="form-control h-100" autocomplete="off"
                                 placeholder='e.g "https://drive.google.com/file/..."'/>
@@ -237,7 +237,7 @@
             <form class="clearfix">
                 <div class="row">
                     <div id="o_wslides_js_slide_upload_left_column" class="col-md-6">
-                        <div class="form-group">
+                        <div class="mb-3">
                             <label for="video_url" class="col-form-label">Video Link</label>
                             <input id="video_url" name="video_url" class="form-control" autocomplete="off"
                                 placeholder='e.g "https://www.youtube.com/watch?v=ebBez6bcSEc"' required="required"/>
diff --git a/addons/website_slides_survey/static/src/js/slides_upload.js b/addons/website_slides_survey/static/src/js/slides_upload.js
index 23b64345a0c..ab5ca5479d4 100644
--- a/addons/website_slides_survey/static/src/js/slides_upload.js
+++ b/addons/website_slides_survey/static/src/js/slides_upload.js
@@ -24,7 +24,7 @@ SlidesUpload.SlideUploadDialog.include({
         const $inputElement = this.$("input#name");
         if (ev.added) {
             this.$('.o_error_no_certification').addClass('d-none');
-            this.$('#certification_id').closest('.form-group').find('.select2-container').removeClass('is-invalid');
+            this.$('#certification_id').parent().find('.select2-container').removeClass('is-invalid');
             if (ev.added.text && !$inputElement.val().trim()) {
                 $inputElement.val(ev.added.text);
             }
@@ -84,7 +84,7 @@ SlidesUpload.SlideUploadDialog.include({
         var $certificationInput = this.$('#certification_id');
         if ($certificationInput.length !== 0) {
             var $select2Container = $certificationInput
-                .closest('.form-group')
+                .parent()
                 .find('.select2-container');
             var $errorContainer = $('.o_error_no_certification');
             $select2Container.removeClass('is-invalid is-valid');
diff --git a/addons/website_slides_survey/static/src/xml/website_slide_upload.xml b/addons/website_slides_survey/static/src/xml/website_slide_upload.xml
index d936c2f68a8..17578aa9ad8 100644
--- a/addons/website_slides_survey/static/src/xml/website_slide_upload.xml
+++ b/addons/website_slides_survey/static/src/xml/website_slide_upload.xml
@@ -5,7 +5,7 @@
             <form class="clearfix">
                 <div class="row">
                     <div id="o_wslides_js_slide_upload_left_column" class="col-md-6">
-                        <div class="form-group">
+                        <div class="mb-3">
                             <label for="certification_id" class="col-form-label">Certification</label>
                             <input class="form-control" id="certification_id" required="required"/>
                             <span class="o_error_no_certification text-danger d-none">Please select a certification.</span>