From 9ea13513342b14e6b8d4e10e162b618a6ab2cce0 Mon Sep 17 00:00:00 2001
From: Romeo Fragomeli <rfr@odoo.com>
Date: Wed, 6 Jul 2022 08:10:07 +0000
Subject: [PATCH] [REF] *: BS5: Migrate forms and inputs

- BS5 uses native inputs instead of pseudo-element for some
  input like checkbox, radio, ...
  in BS5 input checkbox don't have "virtual visual" checkbox anymore
  (::before), so we remove the relative's rules

- removed `.custom-control` class

- `form-switch` use a new layout system in BS5 we adapt the code to
  match the Bootstrap approach (inline SVG).

- In tests, we don't check the exact value of the background as it
  change in community/enterprise, and it's difficult to check the value
  of an SVG.

- Overflow in progressbar is now hidden.
  -> we had to restore it.

- In BS5 margins in forms/inputs has been changed
  -> we had to restore it (e.g. 'mb-3')

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

- .input-group-append and .input-group-prepend
> Dropped .input-group-append and .input-group-prepend.
> You can now just add buttons and .input-group-text as direct
> children of the input groups.

Ref:
[1] https://getbootstrap.com/docs/5.1/migration/#forms

Task ID: 2766483

Part-of: odoo/odoo#95450
---
 .../channel_invitation_form.xml               |  8 +--
 addons/mail_group/views/portal_templates.xml  |  8 +--
 addons/portal/views/portal_templates.xml      | 26 ++++-----
 .../static/src/xml/pricelist_report.xml       |  8 +--
 .../views/sale_portal_templates.xml           | 24 ++++----
 .../views/templates.xml                       | 16 ++---
 .../src/js/fields_form_page_description.js    | 12 ++--
 .../src/scss/survey_templates_form.scss       |  2 +-
 addons/survey/views/survey_templates.xml      | 14 ++---
 .../survey_templates_user_input_session.xml   |  2 +-
 .../static/src/core/checkbox/checkbox.scss    |  9 ---
 .../src/core/commands/command_palette.xml     |  8 +--
 .../core/debug/profiling/profiling_item.xml   |  4 +-
 .../src/legacy/js/_deprecated/basic_fields.js |  2 +-
 addons/web/static/src/legacy/js/core/dom.js   |  6 +-
 .../src/legacy/js/fields/basic_fields.js      |  9 +--
 .../src/legacy/js/fields/basic_fields_owl.js  |  2 +-
 .../src/legacy/scss/bootstrap_overridden.scss | 18 ++++++
 .../src/legacy/scss/bootstrap_review.scss     | 12 ----
 addons/web/static/src/legacy/xml/base.xml     |  2 +-
 addons/web/static/src/legacy/xml/kanban.xml   |  4 +-
 .../web/static/src/legacy/xml/week_days.xml   |  2 +-
 .../database_manager.create_form.qweb.html    |  4 +-
 .../database_manager.master_input.qweb.html   |  4 +-
 .../src/public/database_manager.qweb.html     |  4 +-
 .../web/static/src/webclient/webclient.scss   | 47 +--------------
 .../tests/legacy/fields/basic_fields_tests.js | 25 +++++---
 .../tests/legacy/widgets/week_days_tests.js   |  4 +-
 addons/web/views/webclient_templates.xml      |  4 +-
 .../static/src/scss/web_editor.common.scss    | 12 ----
 .../website/static/src/xml/website.editor.xml |  4 +-
 .../static/src/xml/website_form_editor.xml    |  8 +--
 addons/website/views/website_templates.xml    | 22 +++----
 addons/website/views/website_views.xml        |  8 +--
 .../website_crm_partner_assign_templates.xml  | 24 +++-----
 .../views/event_leaderboard_templates.xml     | 16 ++---
 .../static/src/js/website_forum.js            |  6 +-
 addons/website_forum/views/website_forum.xml  | 50 ++++++++--------
 addons/website_mail/static/src/js/follow.js   |  2 +-
 .../views/website_mail_templates.xml          |  4 +-
 .../views/snippets/s_group.xml                |  4 +-
 .../views/snippets_templates.xml              |  6 +-
 .../website_profile/views/website_profile.xml | 16 ++---
 .../static/src/js/website_sale.js             |  9 +--
 .../static/src/scss/website_sale.scss         | 12 ++--
 addons/website_sale/views/templates.xml       | 58 ++++++++-----------
 .../views/website_sale_templates.xml          |  4 +-
 .../static/src/xml/slide_quiz_create.xml      | 18 +++---
 .../static/src/xml/website_slides_share.xml   | 25 ++++----
 .../src/xml/website_slides_unsubscribe.xml    |  8 +--
 .../static/src/xml/website_slides_upload.xml  |  4 +-
 .../views/website_slides_templates_course.xml | 10 ++--
 .../website_slides_templates_homepage.xml     |  6 +-
 .../views/website_slides_templates_lesson.xml | 20 +++----
 .../website_slides_templates_lesson_embed.xml |  4 +-
 .../views/website_slides_templates_utils.xml  |  8 +--
 56 files changed, 251 insertions(+), 407 deletions(-)

diff --git a/addons/mail/static/src/components/channel_invitation_form/channel_invitation_form.xml b/addons/mail/static/src/components/channel_invitation_form/channel_invitation_form.xml
index c4f6c4c2860..fdcfd488f6c 100644
--- a/addons/mail/static/src/components/channel_invitation_form/channel_invitation_form.xml
+++ b/addons/mail/static/src/components/channel_invitation_form/channel_invitation_form.xml
@@ -43,11 +43,9 @@
                     <div class="mx-3 mt-2 mb-3">
                         <div class="input-group">
                             <input class="form-control" type="text" t-att-value="channelInvitationForm.thread.invitationLink" readonly="" t-on-focus="channelInvitationForm.onFocusInvitationLinkInput" />
-                            <div class="input-group-append">
-                                <button class="btn btn-primary" t-on-click="channelInvitationForm.onClickCopy">
-                                    <i class="fa fa-copy"/>
-                                </button>
-                            </div>
+                            <button class="btn btn-primary" t-on-click="channelInvitationForm.onClickCopy">
+                                <i class="fa fa-copy"/>
+                            </button>
                         </div>
                         <t t-if="channelInvitationForm.accessRestrictedToGroupText">
                             <div class="o_ChannelInvitationForm_accessRestrictedToGroup mt-2" t-esc="channelInvitationForm.accessRestrictedToGroupText"/>
diff --git a/addons/mail_group/views/portal_templates.xml b/addons/mail_group/views/portal_templates.xml
index 3c3f38cd9f9..99eeb04983e 100644
--- a/addons/mail_group/views/portal_templates.xml
+++ b/addons/mail_group/views/portal_templates.xml
@@ -47,12 +47,8 @@
                         <div class="o_mail_group" t-att-data-id="group.id" t-att-data-is-member="force_unsubscribe or is_member">
                             <div class="input-group o_mg_subscribe_form">
                                 <input type="email" name="email" class="o_mg_subscribe_email form-control" t-att-value="email" placeholder="your email..." t-att-readonly="int(bool(email))"/>
-                                <div t-if="force_unsubscribe or is_member" class="input-group-append">
-                                   <button href="#" class="btn btn-outline-primary o_mg_subscribe_btn">Unsubscribe</button>
-                                </div>
-                                <div t-else="" class="input-group-append">
-                                   <button href="#" class="btn btn-primary o_mg_subscribe_btn">Subscribe</button>
-                                </div>
+                               <button t-if="force_unsubscribe or is_member" href="#" class="btn btn-outline-primary o_mg_subscribe_btn">Unsubscribe</button>
+                               <button t-else="" href="#" class="btn btn-primary o_mg_subscribe_btn">Subscribe</button>
                             </div>
                         </div>
                     </div>
diff --git a/addons/portal/views/portal_templates.xml b/addons/portal/views/portal_templates.xml
index 96cdbaa56cc..ece75a73f5e 100644
--- a/addons/portal/views/portal_templates.xml
+++ b/addons/portal/views/portal_templates.xml
@@ -321,23 +321,19 @@
                 </div>
                 <form t-if="searchbar_inputs" class="form-inline o_portal_search_panel ml-lg-4 col-xl-4 col-md-5">
                     <div class="input-group input-group-sm w-100">
-                        <div class="input-group-prepend">
-                            <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"/>
-                            <div class="dropdown-menu" role="menu">
-                                <t t-foreach='searchbar_inputs' t-as='input'>
-                                    <a t-att-href="'#' + input_value['input']"
-                                        t-attf-class="dropdown-item#{search_in == input_value['input'] and ' active' or ''}">
-                                        <span t-out="input_value['label']"/>
-                                    </a>
-                                </t>
-                            </div>
+                        <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"/>
+                        <div class="dropdown-menu" role="menu">
+                            <t t-foreach='searchbar_inputs' t-as='input'>
+                                <a t-att-href="'#' + input_value['input']"
+                                    t-attf-class="dropdown-item#{search_in == input_value['input'] and ' active' or ''}">
+                                    <span t-out="input_value['label']"/>
+                                </a>
+                            </t>
                         </div>
                         <input type="text" class="form-control form-control-sm" placeholder="Search" t-att-value='search' name="search"/>
-                        <span class="input-group-append">
-                            <button class="btn btn-secondary o_wait_lazy_js" type="submit">
-                                <span class="fa fa-search"/>
-                            </button>
-                        </span>
+                        <button class="btn btn-secondary o_wait_lazy_js" type="submit">
+                            <span class="fa fa-search"/>
+                        </button>
                     </div>
                 </form>
             </div>
diff --git a/addons/product/static/src/xml/pricelist_report.xml b/addons/product/static/src/xml/pricelist_report.xml
index 256dc9ce045..624cb4033d1 100644
--- a/addons/product/static/src/xml/pricelist_report.xml
+++ b/addons/product/static/src/xml/pricelist_report.xml
@@ -5,11 +5,9 @@
         <span>
             <div class="input-group">
                 <input type="number" name="qty_to_add" class="o_input o_product_qty form-control text-right" value="1" min="1"/>
-                <div class="input-group-append">
-                    <button class="btn btn-secondary o_add_qty text-right form-control" type="submit" title="Add a quantity">
-                        <i class="fa fa-plus"/>
-                    </button>
-                </div>
+                <button class="btn btn-secondary o_add_qty text-right form-control" type="submit" title="Add a quantity">
+                    <i class="fa fa-plus"/>
+                </button>
             </div>
             <span class="o_badges">
                 <t t-set="quantities" t-value="widget.quantities"/>
diff --git a/addons/sale_management/views/sale_portal_templates.xml b/addons/sale_management/views/sale_portal_templates.xml
index 257127eb64b..66597c32404 100644
--- a/addons/sale_management/views/sale_portal_templates.xml
+++ b/addons/sale_management/views/sale_portal_templates.xml
@@ -75,22 +75,18 @@
             <t t-if="sale_order.state in ['draft', 'sent'] and line.sale_order_option_ids">
                 <div class="input-group js_quantity_container pull-right">
 
-                    <div class="input-group-prepend d-print-none">
-                        <span class="input-group-text d-none d-md-inline-block">
-                            <a t-att-data-line-id="line.id" t-att-data-remove="True" href="#" class="js_update_line_json" aria-label="Remove one" title="Remove one">
-                                <span class="fa fa-minus"/>
-                            </a>
-                        </span>
-                    </div>
+                    <span class="d-print-none input-group-text d-none d-md-inline-block">
+                        <a t-att-data-line-id="line.id" t-att-data-remove="True" href="#" class="js_update_line_json" aria-label="Remove one" title="Remove one">
+                            <span class="fa fa-minus"/>
+                        </a>
+                    </span>
                     <!-- TODO add uom in this case too -->
                     <input type="text" class="js_quantity form-control" t-att-data-line-id="line.id" t-att-value="line.product_uom_qty"/>
-                    <div class="input-group-append d-print-none">
-                        <span class="input-group-text d-none d-md-inline-block">
-                            <a t-att-data-line-id="line.id" href="#" class="js_update_line_json" aria-label="Add one" title="Add one">
-                                <span class="fa fa-plus"/>
-                            </a>
-                        </span>
-                    </div>
+                    <span class="d-print-none input-group-text d-none d-md-inline-block">
+                        <a t-att-data-line-id="line.id" href="#" class="js_update_line_json" aria-label="Add one" title="Add one">
+                            <span class="fa fa-plus"/>
+                        </a>
+                    </span>
                 </div>
             </t>
             <t t-else="">
diff --git a/addons/sale_product_configurator/views/templates.xml b/addons/sale_product_configurator/views/templates.xml
index 919cd41e221..0bad040ccd1 100644
--- a/addons/sale_product_configurator/views/templates.xml
+++ b/addons/sale_product_configurator/views/templates.xml
@@ -8,17 +8,13 @@
 
     <template id="product_quantity_config">
         <div class="css_quantity input-group">
-            <div class="input-group-prepend">
-                <button t-attf-href="#" class="btn btn-primary float_left js_add_cart_json d-none d-md-inline-block" aria-label="Remove one" title="Remove one">
-                    <i class="fa fa-minus"></i>
-                </button>
-            </div>
+            <button t-attf-href="#" class="btn btn-primary float_left js_add_cart_json d-none d-md-inline-block" aria-label="Remove one" title="Remove one">
+                <i class="fa fa-minus"></i>
+            </button>
             <input type="text" class="js_quantity form-control quantity" data-min="1" name="add_qty" t-att-value="add_qty or 1"/>
-            <div class="input-group-append">
-                <button t-attf-href="#" class="btn btn-primary float_left js_add_cart_json d-none d-md-inline-block" aria-label="Add one" title="Add one">
-                    <i class="fa fa-plus"></i>
-                </button>
-            </div>
+            <button t-attf-href="#" class="btn btn-primary float_left js_add_cart_json d-none d-md-inline-block" aria-label="Add one" title="Add one">
+                <i class="fa fa-plus"></i>
+            </button>
         </div>
     </template>
 
diff --git a/addons/survey/static/src/js/fields_form_page_description.js b/addons/survey/static/src/js/fields_form_page_description.js
index ebbe42d015a..d8ccd146bcd 100644
--- a/addons/survey/static/src/js/fields_form_page_description.js
+++ b/addons/survey/static/src/js/fields_form_page_description.js
@@ -19,13 +19,11 @@ var FormDescriptionPage = FieldChar.extend({
         this.$el.addClass('col');
         var $inputGroup = $('<div class="input-group">');
         this.$el = $inputGroup.append(this.$el);
-        var $button = $(
-            '<div class="input-group-append">\
-                <button type="button" title="Open section" class="btn oe_edit_only o_icon_button">\
-                    <i class="fa fa-fw o_button_icon fa-external-link"/>\
-                </button>\
-            </div>'
-        );
+        var $button = $(`
+            <button type="button" title="Open section" class="btn oe_edit_only o_icon_button">
+                <i class="fa fa-fw o_button_icon fa-external-link"/>
+            </button>
+        `);
         this.$el = this.$el.append($button);
         $button.on('click', this._onClickEdit.bind(this));
 
diff --git a/addons/survey/static/src/scss/survey_templates_form.scss b/addons/survey/static/src/scss/survey_templates_form.scss
index cb04286e295..42919a4b225 100644
--- a/addons/survey/static/src/scss/survey_templates_form.scss
+++ b/addons/survey/static/src/scss/survey_templates_form.scss
@@ -114,7 +114,7 @@ _::-webkit-full-page-media, _:future, :root .o_survey_wrap {
         }
     }
 
-    .o_survey_form_date .input-group-append {
+    .o_survey_form_date [data-toggle="datetimepicker"]  {
         right: 0;
         bottom: 5px;
         top: auto;
diff --git a/addons/survey/views/survey_templates.xml b/addons/survey/views/survey_templates.xml
index ba5583a238f..5527e9f2e63 100644
--- a/addons/survey/views/survey_templates.xml
+++ b/addons/survey/views/survey_templates.xml
@@ -381,9 +381,7 @@
                    t-att-name="question.id" t-att-placeholder="question.question_placeholder"
                    t-att-value="format_date(answer_lines[0].value_date) if answer_lines else None"
                    t-att-data-question-type="question.question_type"/>
-            <div t-if="not survey_form_readonly" class="input-group-append position-absolute" t-attf-data-target="#datetimepicker_#{question.id}" data-toggle="datetimepicker">
-                <div class="input-group-text text-primary border-0 bg-transparent p-0"><i class="fa fa-calendar"></i></div>
-            </div>
+            <div t-if="not survey_form_readonly" class="position-absolute input-group-text text-primary border-0 bg-transparent p-0" t-attf-data-target="#datetimepicker_#{question.id}" data-toggle="datetimepicker"><i class="fa fa-calendar"></i></div>
         </div>
     </template>
 
@@ -396,9 +394,7 @@
                    t-att-name="question.id" t-att-placeholder="question.question_placeholder"
                    t-att-value="format_datetime(answer_lines[0].value_datetime) if answer_lines else None"
                    t-att-data-question-type="question.question_type"/>
-            <div t-if="not survey_form_readonly" class="input-group-append position-absolute" t-attf-data-target="#datetimepicker_#{question.id}" data-toggle="datetimepicker">
-                <div class="input-group-text text-primary border-0 bg-transparent p-0"><i class="fa fa-calendar"></i></div>
-            </div>
+            <div t-if="not survey_form_readonly" class="position-absolute input-group-text text-primary border-0 bg-transparent p-0" t-attf-data-target="#datetimepicker_#{question.id}" data-toggle="datetimepicker"><i class="fa fa-calendar"></i></div>
         </div>
     </template>
 
@@ -460,7 +456,7 @@
             </div>
             <div t-if='question.comments_allowed and question.comment_count_as_answer' class="js_comments col-lg-12" >
                 <div class="d-flex flex-wrap">
-                    <label t-att-class="'o_survey_choice_btn mr-2 py-1 px-3 rounded %s' % ('o_survey_selected' if comment_line else '')">
+                    <label t-att-class="'o_survey_choice_btn form-label mr-2 py-1 px-3 rounded %s' % ('o_survey_selected' if comment_line else '')">
                         <t t-set="item_idx" t-value="item_idx + 1"/>
                         <t t-call="survey.survey_selection_key">
                             <t t-set="selection_key_class" t-value="'position-relative o_survey_radio_btn float-left d-flex'"/>
@@ -505,7 +501,7 @@
                     <t t-set="answer_class" t-elif="is_correct" t-value="'bg-success'" />
                     <t t-set="answer_class" t-elif="not is_correct" t-value="'bg-danger'" />
 
-                    <label t-att-class="'o_survey_choice_btn mr-2 py-1 px-3 rounded %s %s' % (answer_class, 'o_survey_selected' if answer_line else '')">
+                    <label t-att-class="'o_survey_choice_btn form-label mr-2 py-1 px-3 rounded %s %s' % (answer_class, 'o_survey_selected' if answer_line else '')">
                         <t t-call="survey.survey_selection_key">
                             <t t-set="selection_key_class" t-value="'position-relative float-left d-flex'"/>
                         </t>
@@ -529,7 +525,7 @@
             </div>
             <div t-if='question.comments_allowed and question.comment_count_as_answer' class="js_ck_comments col-lg-12" >
                 <div class="d-flex flex-wrap">
-                    <label t-att-class="'o_survey_choice_btn mr-2 py-1 px-3 rounded %s' % ('o_survey_selected' if comment_line else '')">
+                    <label t-att-class="'o_survey_choice_btn form-label mr-2 py-1 px-3 rounded %s' % ('o_survey_selected' if comment_line else '')">
                         <t t-set="item_idx" t-value="item_idx + 1"/>
                         <t t-call="survey.survey_selection_key">
                             <t t-set="selection_key_class" t-value="'position-relative float-left d-flex'"/>
diff --git a/addons/survey/views/survey_templates_user_input_session.xml b/addons/survey/views/survey_templates_user_input_session.xml
index 184a8626c3b..30a4ce51ca0 100644
--- a/addons/survey/views/survey_templates_user_input_session.xml
+++ b/addons/survey/views/survey_templates_user_input_session.xml
@@ -96,7 +96,7 @@
                     <div t-if="show_bar_chart or show_text_answers">
                         <div class="progress" title="Attendees are answering the question...">
                             <div class="progress-bar o_survey_session_progress_small font-weight-bold"
-                                role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
+                                 style="overflow: visible" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
                                 <span class="px-2">0 / <t t-esc="survey.session_answer_count" /></span>
                             </div>
                         </div>
diff --git a/addons/web/static/src/core/checkbox/checkbox.scss b/addons/web/static/src/core/checkbox/checkbox.scss
index 49e574a57b8..a58855ec3ee 100644
--- a/addons/web/static/src/core/checkbox/checkbox.scss
+++ b/addons/web/static/src/core/checkbox/checkbox.scss
@@ -2,18 +2,9 @@
 // ============================================================================
 
 .custom-control.custom-checkbox .custom-control-input {
-  // Force default bts default border color
-  &:not(:checked):not(:indeterminate):not(:disabled) ~ .custom-control-label:before {
-    border-color: $custom-control-indicator-border-color;
-  }
-
   &:disabled {
     ~ .custom-control-label {
       cursor: not-allowed;
-
-      &:before {
-        border-color: $custom-control-indicator-checked-disabled-bg;
-      }
     }
 
     &:checked ~ .custom-control-label:after {
diff --git a/addons/web/static/src/core/commands/command_palette.xml b/addons/web/static/src/core/commands/command_palette.xml
index b5cdc1808a0..a0ad5584102 100644
--- a/addons/web/static/src/core/commands/command_palette.xml
+++ b/addons/web/static/src/core/commands/command_palette.xml
@@ -7,11 +7,9 @@
         <div class="o_command_palette_search input-group mb-2 px-4 py-3 border-bottom">
           <span t-if="state.namespace !== 'default'" class="o_namespace d-flex align-items-center mr-1" t-out="state.namespace"/>
           <input class="form-control border-0 p-0" type="text" data-allow-hotkeys="true" t-att-value="state.searchValue" t-ref="autofocus" t-att-placeholder="state.placeholder" t-on-input="onSearchInput" t-on-keydown="onKeyDown"/>
-          <span class="input-group-append">
-            <div class="input-group-text border-0 bg-transparent">
-                <i t-att-title="state.placeholder" role="img"  t-att-aria-label="state.placeholder" class="oi oi-search"/>
-            </div>
-          </span>
+          <div class="input-group-text border-0 bg-transparent">
+              <i t-att-title="state.placeholder" role="img"  t-att-aria-label="state.placeholder" class="oi oi-search"/>
+          </div>
         </div>
 
         <div t-ref="listbox" class="o_command_palette_listbox position-relative overflow-auto">
diff --git a/addons/web/static/src/core/debug/profiling/profiling_item.xml b/addons/web/static/src/core/debug/profiling/profiling_item.xml
index fbc2bb00a5a..076a5d74b3b 100644
--- a/addons/web/static/src/core/debug/profiling/profiling_item.xml
+++ b/addons/web/static/src/core/debug/profiling/profiling_item.xml
@@ -24,9 +24,7 @@
                             <label class="custom-control-label" for="profile_traces_async">Record traces</label>
                         </span>
                         <div t-if="profiling.isCollectorEnabled('traces_async')" class="input-group input-group-sm mt-2" t-on-click.stop.prevent="">
-                            <div class="input-group-prepend">
-                                <div class="input-group-text">Interval</div>
-                            </div>
+                            <div class="input-group-text">Interval</div>
                             <select class="profile_param form-control" t-on-change="(ev) => this.changeParam('traces_async_interval', ev)">
                                 <t t-set="interval" t-value="profiling.state.params.traces_async_interval"/>
                                 <option value="">Default</option>
diff --git a/addons/web/static/src/legacy/js/_deprecated/basic_fields.js b/addons/web/static/src/legacy/js/_deprecated/basic_fields.js
index f924babd8a2..e55dac67943 100644
--- a/addons/web/static/src/legacy/js/_deprecated/basic_fields.js
+++ b/addons/web/static/src/legacy/js/_deprecated/basic_fields.js
@@ -43,7 +43,7 @@ var FieldBoolean = AbstractField.extend({
         // the one rendered by the widget itself. Even though the event might
         // have been fired on the non-widget version of this field, we can still
         // test the presence of its custom class.
-        if (activated && options && options.event && $(options.event.target).closest('.custom-control.custom-checkbox').length) {
+        if (activated && options && options.event && $(options.event.target).closest('.custom-checkbox').length) {
             this._setValue(!this.value);  // Toggle the checkbox
         }
         return activated;
diff --git a/addons/web/static/src/legacy/js/core/dom.js b/addons/web/static/src/legacy/js/core/dom.js
index 9f2f668003f..6ec18ead930 100644
--- a/addons/web/static/src/legacy/js/core/dom.js
+++ b/addons/web/static/src/legacy/js/core/dom.js
@@ -480,16 +480,16 @@ var dom = {
     renderCheckbox: function (options) {
         var id = _.uniqueId('checkbox-');
         var $container = $('<div/>', {
-            class: 'custom-control custom-checkbox',
+            class: 'form-check',
         });
         var $input = $('<input/>', {
             type: 'checkbox',
             id: id,
-            class: 'custom-control-input',
+            class: 'form-check-input',
         });
         var $label = $('<label/>', {
             for: id,
-            class: 'custom-control-label',
+            class: 'form-check-label',
             text: options && options.text || '',
         });
         if (!options || !options.text) {
diff --git a/addons/web/static/src/legacy/js/fields/basic_fields.js b/addons/web/static/src/legacy/js/fields/basic_fields.js
index 870fb9be9cb..4568744346b 100644
--- a/addons/web/static/src/legacy/js/fields/basic_fields.js
+++ b/addons/web/static/src/legacy/js/fields/basic_fields.js
@@ -2993,7 +2993,7 @@ var LabelSelection = AbstractField.extend({
 
 var BooleanToggle = FieldBoolean.extend({
     description: _lt("Toggle"),
-    className: FieldBoolean.prototype.className + ' o_boolean_toggle',
+    className: FieldBoolean.prototype.className + ' o_boolean_toggle form-switch',
     isQuickEditable: true,
     events: {
         'click': '_onClick'
@@ -3014,13 +3014,6 @@ var BooleanToggle = FieldBoolean.extend({
      */
     async _render() {
         await this._super(...arguments);
-        const classToApply = this.value ? 'fa-check-circle' : 'fa-times-circle';
-        if (this.el.querySelector('i')) {
-            this.el.querySelector('i').remove();
-        }
-        const i = document.createElement("i");
-        i.setAttribute('class', `fa ${classToApply}`);
-        this.el.querySelector('label').appendChild(i);
         const isReadonly = this.record.evalModifiers(this.attrs.modifiers).readonly || false;
         this.$input.prop('disabled', isReadonly);
     },
diff --git a/addons/web/static/src/legacy/js/fields/basic_fields_owl.js b/addons/web/static/src/legacy/js/fields/basic_fields_owl.js
index 9f2fb02af85..0249917241c 100644
--- a/addons/web/static/src/legacy/js/fields/basic_fields_owl.js
+++ b/addons/web/static/src/legacy/js/fields/basic_fields_owl.js
@@ -70,7 +70,7 @@ odoo.define('web.basic_fields_owl', function (require) {
             // The event might have been fired on the non field version of
             // this field, we can still test the presence of its custom class.
             if (activated && options && options.event && options.event.target
-                .closest('.custom-control.custom-checkbox')) {
+                .closest('.custom-checkbox')) {
                 this._setValue(!this.value);  // Toggle the checkbox
             }
             return activated;
diff --git a/addons/web/static/src/legacy/scss/bootstrap_overridden.scss b/addons/web/static/src/legacy/scss/bootstrap_overridden.scss
index a0be9686fdf..8a6998371db 100644
--- a/addons/web/static/src/legacy/scss/bootstrap_overridden.scss
+++ b/addons/web/static/src/legacy/scss/bootstrap_overridden.scss
@@ -212,3 +212,21 @@ $code-color: $o-main-code-color!default;
 $kbd-color: $o-gray-700 !default;
 $kbd-bg: $o-gray-100 !default;
 $kbd-box-shadow: 0px 1px 1px rgba($o-black, 0.2), inset 0px -1px 1px 1px rgba($o-gray-200, 0.8), inset 0px 2px 0px 0px rgba($o-white, 0.8) !default;
+
+// Input
+
+$input-bg: $o-white !default;
+$form-check-input-border-radius: 0 !default;
+$form-check-input-checked-color: $o-brand-lightsecondary !default;
+$form-check-input-checked-border-color: $o-brand-primary !default;
+$form-check-input-checked-bg-color: $o-brand-primary !default;
+
+$form-switch-color: rgba($black, .25) !default;
+$form-switch-checked-color: $o-brand-primary !default;
+$form-switch-circle-bg-color: $input-bg !default;
+$form-switch-circle-checked-bg-color: $input-bg !default;
+$form-switch-icon-color: $form-switch-color !default;
+$form-switch-icon-checked-color: $form-switch-checked-color !default;
+$form-switch-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-circle-bg-color}'/><line x1='-1.5' y1='-1.5' x2='1.5' y2='1.5' stroke='#{$form-switch-icon-color}' stroke-width='0.75'/><line x1='1.5' y1='-1.5' x2='-1.5' y2='1.5' stroke='#{$form-switch-icon-color}' stroke-width='0.75'/></svg>") !default;
+$form-switch-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-circle-checked-bg-color}'/><path d='m-2.125,-0.5l1.75,1.75l2.5,-2.5' fill='none' stroke='#{$form-switch-icon-checked-color}' stroke-width='0.75'/></svg>") !default;
+
diff --git a/addons/web/static/src/legacy/scss/bootstrap_review.scss b/addons/web/static/src/legacy/scss/bootstrap_review.scss
index ba5738183a7..517d064d4ac 100644
--- a/addons/web/static/src/legacy/scss/bootstrap_review.scss
+++ b/addons/web/static/src/legacy/scss/bootstrap_review.scss
@@ -102,18 +102,6 @@
     right: auto#{"/*rtl:ignore*/"};
 }
 
-// Review input group: BS allows to control button and input dimensions
-// individually but fails to make input-group correctly in all cases (for some
-// strange reasons they made it work well for sm and lg but not for the normal
-// sizing).
-.input-group-prepend,
-.input-group-append {
-    > .btn {
-        @include button-size($input-padding-y, $input-padding-x, $input-font-size, $input-line-height, $input-border-radius);
-        border-width: $input-border-width;
-    }
-}
-
 // Review $link-decoration behavior
 @if $link-decoration and $link-decoration != none {
     .btn:not(.btn-link), .nav-link, .dropdown-item, .page-link, .breadcrumb-item > a, .badge, .fa {
diff --git a/addons/web/static/src/legacy/xml/base.xml b/addons/web/static/src/legacy/xml/base.xml
index e7f2e33286a..10ef6bc5495 100644
--- a/addons/web/static/src/legacy/xml/base.xml
+++ b/addons/web/static/src/legacy/xml/base.xml
@@ -92,7 +92,7 @@
 </t>
 
 <t t-name="web.CustomCheckbox" owl="1">
-    <div class="custom-control custom-checkbox" t-att-class="props.class">
+    <div t-attf-class="{{ props.text ? 'custom-control form-check' : '' }}" t-att-class="props.class">
         <input
             t-att-id="props.id or _id"
             type="checkbox"
diff --git a/addons/web/static/src/legacy/xml/kanban.xml b/addons/web/static/src/legacy/xml/kanban.xml
index f59a6a8386d..f625d571a31 100644
--- a/addons/web/static/src/legacy/xml/kanban.xml
+++ b/addons/web/static/src/legacy/xml/kanban.xml
@@ -54,9 +54,7 @@
             <div class="o_kanban_header">
                 <div class="input-group">
                     <input type="text" class="form-control o_input" placeholder="Column title"/>
-                    <span class="input-group-append">
-                        <button class="btn btn-primary o_kanban_add" type="button">Add</button>
-                    </span>
+                    <button class="btn btn-primary o_kanban_add" type="button">Add</button>
                 </div>
                 <span t-if="!widget.isMobile" class="o_discard_msg text-muted float-right">Esc to discard</span>
                 <t t-if="widget.examples &amp;&amp; !widget.isMobile">
diff --git a/addons/web/static/src/legacy/xml/week_days.xml b/addons/web/static/src/legacy/xml/week_days.xml
index b4c882173cd..39f846f8d3b 100644
--- a/addons/web/static/src/legacy/xml/week_days.xml
+++ b/addons/web/static/src/legacy/xml/week_days.xml
@@ -15,7 +15,7 @@
                         <CustomCheckbox disabled="mode === 'readonly'"
                             value="state.days[day].value"
                             id="state.days[day].id"
-                            class="'o_recurrent_weekday_checkbox text-center'"
+                            class="'text-center'"
                             onChange="(checked) => this._onChange(checked, state.days[day].id)"/>
                     </td>
                 </tr>
diff --git a/addons/web/static/src/public/database_manager.create_form.qweb.html b/addons/web/static/src/public/database_manager.create_form.qweb.html
index 35fd4568af6..d5e63bda863 100644
--- a/addons/web/static/src/public/database_manager.create_form.qweb.html
+++ b/addons/web/static/src/public/database_manager.create_form.qweb.html
@@ -16,9 +16,7 @@
         <label for="password" class="col-md-4 col-form-label">Password</label>
         <div class="col-md-8 input-group">
             <input id="password" type="password" name="password" class="form-control" required="required" autocomplete="off"/>
-            <div class="input-group-append">
-                <span class="fa fa-eye o_little_eye input-group-text" aria-hidden="true" style="cursor: pointer;"></span>
-            </div>
+            <span class="fa fa-eye o_little_eye input-group-text" aria-hidden="true" style="cursor: pointer;"></span>
         </div>
     </div>
     <div class="form-group row">
diff --git a/addons/web/static/src/public/database_manager.master_input.qweb.html b/addons/web/static/src/public/database_manager.master_input.qweb.html
index 93ab57ff0c6..a004431aca8 100644
--- a/addons/web/static/src/public/database_manager.master_input.qweb.html
+++ b/addons/web/static/src/public/database_manager.master_input.qweb.html
@@ -25,9 +25,7 @@
                     autofocus="autofocus"
                     type="password"
                     autocomplete="current-password" />
-                <div class="input-group-append">
-                    <span class="fa fa-eye o_little_eye input-group-text" aria-hidden="true" style="cursor: pointer;"></span>
-                </div>
+                <span class="fa fa-eye o_little_eye input-group-text" aria-hidden="true" style="cursor: pointer;"></span>
             </div>
         </div>
     </t>
diff --git a/addons/web/static/src/public/database_manager.qweb.html b/addons/web/static/src/public/database_manager.qweb.html
index ee45d254b4a..d3b98f2e5a0 100644
--- a/addons/web/static/src/public/database_manager.qweb.html
+++ b/addons/web/static/src/public/database_manager.qweb.html
@@ -176,9 +176,7 @@
                                 <label for="master_pwd_new" class="col-form-label">New Master Password</label>
                                 <div class="input-group">
                                     <input id="master_pwd_new" type="password" name="master_pwd_new" class="form-control" required="required" autocomplete="new-password"/>
-                                    <div class="input-group-append">
-                                        <span class="fa fa-eye o_little_eye input-group-text" aria-hidden="true" style="cursor: pointer;"></span>
-                                    </div>
+                                    <span class="fa fa-eye o_little_eye input-group-text" aria-hidden="true" style="cursor: pointer;"></span>
                                 </div>
                             </div>
                         </div>
diff --git a/addons/web/static/src/webclient/webclient.scss b/addons/web/static/src/webclient/webclient.scss
index 463de763bef..7c52b4cc1c3 100644
--- a/addons/web/static/src/webclient/webclient.scss
+++ b/addons/web/static/src/webclient/webclient.scss
@@ -29,51 +29,8 @@ html, body {
   outline: none;
 }
 
-// Boolean Toggle widget
-div.o_boolean_toggle.custom-control.custom-checkbox {
-  $line-height-computed: $line-height-base * $font-size-base;
-  $slider-width: $line-height-computed * 1.5;
-  $font-size: $font-size-base * 1.2;
-
-  display: inline-block;
-  padding-left: $slider-width + 0.25rem;
-
-  > label.custom-control-label {
-    > i {
-      color: white;
-      cursor: pointer;
-      font-size: $font-size;
-      position: absolute;
-      top: 2px;
-      &.fa-times-circle {
-        right: 15px;
-      }
-      &.fa-check-circle {
-        right: 7px;
-      }
-    }
-    &::before,
-    &::after {
-      content: "";
-      top: 0;
-      left: -($slider-width + 0.25rem);
-    }
-    &::before {
-      width: $slider-width;
-      height: 100%;
-      background-color: #a0a0a0 !important;
-      border-radius: 100px;
-      outline: none !important;
-    }
-  }
-  > input.custom-control-input:checked + label.custom-control-label {
-    &::before {
-      background-color: $o-brand-primary !important;
-    }
-    &::after {
-      background-image: none;
-    }
-  }
+div.o_boolean_toggle.form-switch.form-check > input.form-check-input:not(:checked) {
+  background-color: $form-switch-color;
 }
 
 // User input typically entered via keyboard
diff --git a/addons/web/static/tests/legacy/fields/basic_fields_tests.js b/addons/web/static/tests/legacy/fields/basic_fields_tests.js
index c415136fb5c..60ec38a14f9 100644
--- a/addons/web/static/tests/legacy/fields/basic_fields_tests.js
+++ b/addons/web/static/tests/legacy/fields/basic_fields_tests.js
@@ -408,7 +408,7 @@ QUnit.module('Legacy basic_fields', {
     QUnit.module('FieldBooleanToggle');
 
     QUnit.test('use boolean toggle widget in form view', async function (assert) {
-        assert.expect(3);
+        assert.expect(7);
 
         var form = await createView({
             View: FormView,
@@ -417,14 +417,25 @@ QUnit.module('Legacy basic_fields', {
             arch: '<form><field name="bar" widget="boolean_toggle"/></form>',
             res_id: 2,
         });
-
-        assert.containsOnce(form, ".custom-checkbox.o_boolean_toggle", "Boolean toggle widget applied to boolean field");
-        assert.containsOnce(form, ".custom-checkbox.o_boolean_toggle .fa-check-circle",
-            "Boolean toggle should have fa-check-circle icon");
+        // We don't check the exact value of the background as it change in community/enterprise,
+        // and it's difficult to check the value of an SVG
+        assert.containsOnce(form, ".form-check.o_boolean_toggle", "Boolean toggle widget applied to boolean field");
+        let checkElement = document.querySelector('.form-check.o_boolean_toggle .form-check-input');
+        assert.ok(checkElement.matches(':checked'), "Boolean toggle should be checked");
+        let style = window.getComputedStyle(checkElement);
+        const backgroundImage = style.backgroundImage;
+        const backgroundColor = style.backgroundColor;
+        assert.ok(backgroundImage && backgroundColor, "Boolean toggle should have a background image and a background color");
 
         await testUtils.dom.click(form.$('.o_field_widget[name=bar]'));
-        assert.containsOnce(form, ".custom-checkbox.o_boolean_toggle .fa-times-circle",
-            "Boolean toggle should have fa-times-circle icon");
+        checkElement = document.querySelector('.form-check.o_boolean_toggle .form-check-input');
+        assert.notOk(checkElement.matches(':checked'), "Boolean toggle shouldn't be checked");
+        style = window.getComputedStyle(checkElement);
+        const newBackgroundImage = style.backgroundImage;
+        const newBackgroundColor = style.backgroundColor;
+        assert.ok(backgroundImage && backgroundColor, "Boolean toggle should have a background image and a background color");
+        assert.notEqual(backgroundImage, newBackgroundImage, "Background image should be different");
+        assert.notEqual(backgroundColor, newBackgroundColor, "Background color should be different");
 
         form.destroy();
     });
diff --git a/addons/web/static/tests/legacy/widgets/week_days_tests.js b/addons/web/static/tests/legacy/widgets/week_days_tests.js
index 9176708ac2a..848c4124ce1 100644
--- a/addons/web/static/tests/legacy/widgets/week_days_tests.js
+++ b/addons/web/static/tests/legacy/widgets/week_days_tests.js
@@ -79,14 +79,14 @@ odoo.define('web.week_days_tests', function (require) {
                 },
             });
 
-            assert.containsN(form, '.custom-control input:disabled', 7,
+            assert.containsN(form, 'input:disabled', 7,
                 "all inputs should be disabled in readonly mode");
             const labelsTexts = [...form.el.querySelectorAll('.o_recurrent_weekday_label')].map(el => el.innerText.trim());
             assert.deepEqual(labelsTexts, ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                 "labels should be short week names");
 
             await testUtils.form.clickEdit(form);
-            assert.containsNone(form, '.custom-control input:disabled', 7,
+            assert.containsNone(form, 'input:disabled', 7,
                 "all inputs should be enabled in readonly mode");
 
             await testUtils.dom.click(form.el.querySelector('input[id^="sun"]'));
diff --git a/addons/web/views/webclient_templates.xml b/addons/web/views/webclient_templates.xml
index b47474197db..0318c891944 100644
--- a/addons/web/views/webclient_templates.xml
+++ b/addons/web/views/webclient_templates.xml
@@ -137,9 +137,7 @@
                     <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"/>
-                        <span class="input-group-append">
-                            <a role="button" href="/web/database/selector" class="btn btn-secondary">Select <i class="fa fa-database" role="img" aria-label="Database" title="Database"></i></a>
-                        </span>
+                        <a role="button" href="/web/database/selector" class="btn btn-secondary">Select <i class="fa fa-database" role="img" aria-label="Database" title="Database"></i></a>
                     </div>
                 </div>
 
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 5159d8dad4c..75adfad39b1 100644
--- a/addons/web_editor/static/src/scss/web_editor.common.scss
+++ b/addons/web_editor/static/src/scss/web_editor.common.scss
@@ -599,18 +599,6 @@ a.o_underline {
 
                     > .input-group.ml-2 {
                         margin-left: 0 !important;
-
-                        > .input-group-append {
-                            width: 100%;
-
-                            > .btn {
-                                width: 100%;
-                            }
-
-                            > .ml-2 {
-                                margin-left: 0 !important;
-                            }
-                        }
                     }
                 }
 
diff --git a/addons/website/static/src/xml/website.editor.xml b/addons/website/static/src/xml/website.editor.xml
index d0928ad2213..b913daa2c93 100644
--- a/addons/website/static/src/xml/website.editor.xml
+++ b/addons/website/static/src/xml/website.editor.xml
@@ -106,9 +106,7 @@
             <label class="col-sm-2 col-form-label" for="pin_address">API Key</label>
             <div class="col">
                 <div class="input-group">
-                    <div class="input-group-prepend">
-                        <div class="input-group-text"><i class="fa fa-key"/></div>
-                    </div>
+                    <div class="input-group-text"><i class="fa fa-key"/></div>
                     <input type="text" class="form-control" id="api_key_input"
                            t-att-value="apiKey or ''"
                            placeholder="BSgzTvR5L1GB9jriT451iTN4huVPxHmltG6T6eo"/>
diff --git a/addons/website/static/src/xml/website_form_editor.xml b/addons/website/static/src/xml/website_form_editor.xml
index 3f5affe1656..9e086a1ed31 100644
--- a/addons/website/static/src/xml/website_form_editor.xml
+++ b/addons/website/static/src/xml/website_form_editor.xml
@@ -203,9 +203,7 @@
                         t-att-placeholder="field.placeholder"
                         t-att-id="field.id"
                 />
-                <div class="input-group-append" t-attf-data-target="##{datepickerID}" data-toggle="datetimepicker">
-                    <div class="input-group-text"><i class="fa fa-calendar"></i></div>
-                </div>
+                <div class="input-group-text" t-attf-data-target="##{datepickerID}" data-toggle="datetimepicker"><i class="fa fa-calendar"></i></div>
             </div>
         </t>
     </t>
@@ -225,9 +223,7 @@
                         t-att-placeholder="field.placeholder"
                         t-att-id="field.id"
                 />
-                <div class="input-group-append" t-attf-data-target="##{datetimepickerID}" data-toggle="datetimepicker">
-                    <div class="input-group-text"><i class="fa fa-calendar"></i></div>
-                </div>
+                <div class="input-group-text" t-attf-data-target="##{datetimepickerID}" data-toggle="datetimepicker"><i class="fa fa-calendar"></i></div>
             </div>
         </t>
     </t>
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index 746b006bd5b..69aefad9fc2 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -2205,11 +2205,9 @@
                             <input type="hidden" name="url" t-att-value="path" />
                             <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()" />
                             <input type="password" id="password" class="form-control" required="required" name="visibility_password" />
-                            <div class="input-group-append">
-                              <button class="btn btn-secondary" type="button" id="showPass">
-                                <i class="fa fa-eye"></i>
-                              </button>
-                          </div>
+                          <button class="btn btn-secondary" type="button" id="showPass">
+                            <i class="fa fa-eye"></i>
+                          </button>
                         </div>
                     </div>
                     <button type="submit" class="h4 btn btn-primary btn-block">Access to this page</button>
@@ -2360,14 +2358,12 @@ Sitemap: <t t-esc="url_root"/>sitemap.xml
     <div t-attf-class="input-group #{_classes}" role="search">
         <t t-set="search_placeholder">Search...</t>
         <input type="search" name="search" t-att-class="'search-query form-control oe_search_box %s' % _input_classes" t-att-placeholder="placeholder if placeholder else search_placeholder" t-att-value="search"/>
-        <div class="input-group-append">
-            <button type="submit" t-att-class="'btn oe_search_button %s' % (_submit_classes or 'btn-primary')" aria-label="Search" title="Search">
-                <i class="fa fa-search"/>
-                <span t-if="search" class="oe_search_found">
-                    <small>(<t t-out="search_count or 0"/> found)</small>
-                </span>
-            </button>
-        </div>
+        <button type="submit" t-att-class="'btn oe_search_button %s' % (_submit_classes or 'btn-primary')" aria-label="Search" title="Search">
+            <i class="fa fa-search"/>
+            <span t-if="search" class="oe_search_found">
+                <small>(<t t-out="search_count or 0"/> found)</small>
+            </span>
+        </button>
     </div>
 </template>
 
diff --git a/addons/website/views/website_views.xml b/addons/website/views/website_views.xml
index 340a14073c1..9099d659842 100644
--- a/addons/website/views/website_views.xml
+++ b/addons/website/views/website_views.xml
@@ -372,11 +372,9 @@
                         </div>
                         <div class="o_search input-group ml-auto col-8 col-sm-6 col-md-4 col-xl-3" role="search">
                             <input type="search" name="search" class="form-control border-info" placeholder="Name, id or key"/>
-                            <div class="input-group-append">
-                                <button type="submit" class="btn btn-info" aria-label="Search" title="Search">
-                                    <i class="fa fa-search"/>
-                                </button>
-                            </div>
+                            <button type="submit" class="btn btn-info" aria-label="Search" title="Search">
+                                <i class="fa fa-search"/>
+                            </button>
                         </div>
                     </nav>
 
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 8810ad42f31..1799eb0a865 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
@@ -624,9 +624,7 @@
                                                 <div class="form-row align-items-center">
                                                     <div class="col-auto flex-grow-1">
                                                         <div class="input-group">
-                                                            <div class="input-group-prepend">
-                                                                <div class="input-group-text"><span class="text-nowrap" t-esc="opportunity.company_currency.symbol"/></div>
-                                                            </div>
+                                                            <div class="input-group-text"><span class="text-nowrap" t-esc="opportunity.company_currency.symbol"/></div>
                                                             <input type="text" name="expected_revenue" class="form-control expected_revenue" t-att-value="opportunity.expected_revenue" placeholder="Planned Revenue"/>
                                                         </div>
                                                     </div>
@@ -634,9 +632,7 @@
                                                     <div class="col-auto">
                                                         <div class="input-group">
                                                             <input type="text" name="probability" class="form-control probability" t-att-value="opportunity.probability" placeholder="Probability"/>
-                                                            <div class="input-group-append">
-                                                                <div class="input-group-text">%</div>
-                                                            </div>
+                                                            <div class="input-group-text">%</div>
                                                         </div>
                                                     </div>
                                                 </div>
@@ -672,11 +668,9 @@
                                                         <div class="input-group date" id="exp_closing_div" data-target-input="nearest">
                                                             <t t-set='date_formatted'><t t-options='{"widget": "date"}' t-esc="opportunity.date_deadline"/></t>
                                                             <input type="text" name="date_deadline" data-target="#exp_closing_div" t-att-value="date_formatted" class="datetimepicker-input form-control date_deadline" t-att-name="prefix"/>
-                                                            <div class="input-group-append" data-target="#exp_closing_div" data-toggle="datetimepicker">
-                                                                <span class="input-group-text">
-                                                                    <span class="fa fa-calendar" role="img" aria-label="Calendar"></span>
-                                                                </span>
-                                                            </div>
+                                                            <span class="input-group-text" data-target="#exp_closing_div" data-toggle="datetimepicker">
+                                                                <span class="fa fa-calendar" role="img" aria-label="Calendar"></span>
+                                                            </span>
                                                         </div>
                                                     </div>
                                                 </div>
@@ -699,11 +693,9 @@
                                                         <div class="input-group date" id="next_activity_div" data-target-input="nearest">
                                                             <t t-set='date_formatted'><t t-options='{"widget": "date"}' t-esc="user_activity.date_deadline"/></t>
                                                             <input type="text" name="activity_date_deadline" data-target="#next_activity_div" t-att-value="date_formatted" class="form-control activity_date_deadline datetimepicker-input" t-att-name="prefix"/>
-                                                            <div class="input-group-append" data-target="#next_activity_div" data-toggle="datetimepicker">
-                                                                <span class="input-group-text">
-                                                                    <span class="fa fa-calendar" role="img" aria-label="Calendar" title="Calendar"></span>
-                                                                </span>
-                                                            </div>
+                                                            <span class="input-group-text" data-target="#next_activity_div" data-toggle="datetimepicker">
+                                                                <span class="fa fa-calendar" role="img" aria-label="Calendar" title="Calendar"></span>
+                                                            </span>
                                                         </div>
                                                     </div>
                                                 </div>
diff --git a/addons/website_event_track_quiz/views/event_leaderboard_templates.xml b/addons/website_event_track_quiz/views/event_leaderboard_templates.xml
index 6fa4aaba1e3..2a07ee3d371 100644
--- a/addons/website_event_track_quiz/views/event_leaderboard_templates.xml
+++ b/addons/website_event_track_quiz/views/event_leaderboard_templates.xml
@@ -98,11 +98,9 @@
                 <!-- search -->
                 <form t-attf-action="#{'/event/%s/community/leaderboard/results' % (slug(event))}" role="search" method="get">
                     <div class="input-group ml-1 position-relative">
-                        <span class="input-group-prepend">
-                            <button class="btn btn-link text-white rounded-0 pr-1" type="submit" aria-label="Search" title="Search">
-                                <i class="fa fa-search"></i>
-                            </button>
-                        </span>
+                        <button class="btn btn-link text-white rounded-0 pr-1" type="submit" aria-label="Search" title="Search">
+                            <i class="fa fa-search"></i>
+                        </button>
                         <input type="text" class="form-control rounded-0" name="search" placeholder="Search Attendees" t-att-value="searched_name or ''"/>
                     </div>
                 </form>
@@ -118,11 +116,9 @@
                             <form class="px-3" t-attf-action="#{'/event/%s/community/leaderboard' % (slug(event))}" role="search" method="get">
                                 <div class="input-group">
                                     <input type="text" class="form-control" name="search" placeholder="Search courses"/>
-                                    <span class="input-group-append">
-                                        <button class="btn btn-primary" type="submit" aria-label="Search" title="Search">
-                                            <i class="fa fa-search"/>
-                                        </button>
-                                    </span>
+                                    <button class="btn btn-primary" type="submit" aria-label="Search" title="Search">
+                                        <i class="fa fa-search"/>
+                                    </button>
                                 </div>
                             </form>
                         </div>
diff --git a/addons/website_forum/static/src/js/website_forum.js b/addons/website_forum/static/src/js/website_forum.js
index 9586e214e38..5f87484531f 100644
--- a/addons/website_forum/static/src/js/website_forum.js
+++ b/addons/website_forum/static/src/js/website_forum.js
@@ -335,7 +335,7 @@ publicWidget.registry.websiteForum = publicWidget.Widget.extend({
                         countFlaggedPosts.classList.add('bg-danger');
                         countFlaggedPosts.innerText = parseInt(countFlaggedPosts.innerText, 10) + 1;
                     }
-                    $(elem).next('#flag_validator').removeClass('d-none');
+                    $(elem).nextAll('.flag_validator').removeClass('d-none');
                 } else if (data.success === 'post_flagged_non_moderator') {
                     const forumAnswer = elem.closest('.forum_answer');
                     elem.innerText = _t(' Flagged');
@@ -521,8 +521,8 @@ publicWidget.registry.websiteForum = publicWidget.Widget.extend({
             method: currentTarget.dataset.action,
             args: [parseInt(currentTarget.dataset.postId)],
         });
-        currentTarget.parentElement.classList.toggle('d-none');
-        const flaggedButton = currentTarget.parentElement.previousElementSibling,
+        currentTarget.parentElement.querySelectorAll('.flag_validator').forEach((element) => element.classList.toggle('d-none'));
+        const flaggedButton = currentTarget.parentElement.firstElementChild,
             child = flaggedButton.firstElementChild,
             countFlaggedPosts = this.el.querySelector('#count_flagged_posts'),
             count = parseInt(countFlaggedPosts.innerText, 10) - 1;
diff --git a/addons/website_forum/views/website_forum.xml b/addons/website_forum/views/website_forum.xml
index bd0f68174c8..13ee75a322a 100644
--- a/addons/website_forum/views/website_forum.xml
+++ b/addons/website_forum/views/website_forum.xml
@@ -5,14 +5,12 @@
 <!-- Editor custom -->
 <!-- helper -->
 <template id="show_flag_validator">
-    <div id="flag_validator" t-attf-class="input-group-append #{'ml-1' if object.state == 'flagged' else 'd-none'}">
-        <a href="#" t-att-data-post-id="object.id" t-attf-data-action="validate" class="badge badge-light my-2 mr-2 o_wforum_flag_validator" title="Validate" data-toggle="tooltip">
-            <i class="fa fa-check text-success"/>
-        </a>
-        <a href="#" t-attf-data-action="/forum/#{object.id}/ask_for_mark_as_offensive" class="badge badge-light my-2 mr-2 o_wforum_flag_mark_as_offensive" title="Mark as Offensive"  data-toggle="tooltip">
-            <i class="fa fa-times text-danger"/>
-        </a>
-    </div>
+    <a href="#" t-att-data-post-id="object.id" t-attf-data-action="validate" t-attf-class="#{'' if object.state == 'flagged' else 'd-none'} flag_validator badge badge-light my-2 mr-2 o_wforum_flag_validator" title="Validate" data-bs-toggle="tooltip">
+        <i class="fa fa-check text-success"/>
+    </a>
+    <a href="#" t-attf-data-action="/forum/#{object.id}/ask_for_mark_as_offensive" t-attf-class="#{'' if object.state == 'flagged' else 'd-none'} flag_validator badge badge-light my-2 mr-2 o_wforum_flag_mark_as_offensive" title="Mark as Offensive"  data-bs-toggle="tooltip">
+        <i class="fa fa-times text-danger"/>
+    </a>
 </template>
 
 <template id="link_button">
@@ -828,8 +826,8 @@
         </div>
 
         <form t-else="" t-attf-action="/forum/#{slug(forum)}/new" method="post" role="form" class="tag_text js_website_submit_form js_wforum_submit_form o_wforum_readable">
-            <div class="form-group">
-                <label for="content">Title</label>
+            <div class="mb-3">
+                <label class="form-label" for="content">Title</label>
                 <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
                 <input type="text" name="post_name" required="required" pattern=".*\S.*" t-attf-value="#{post_name}"
                     class="form-control form-control-lg" placeholder="A clear, explicit and concise title" title="Title must not be empty"/>
@@ -849,15 +847,15 @@
                     </div>
                 </div>
             </div>
-            <div class="form-group">
-                <label for="content">Description</label>
+            <div class="mb-3">
+                <label class="form-label" for="content">Description</label>
                 <div class="small form-text text-muted d-inline">, consider <b>adding an example</b>. </div>
                 <textarea name="content" required="required" id="content" class="form-control o_wysiwyg_loader" t-att-data-karma="forum.karma_editor">
                     <t t-esc="question_content"/>
                 </textarea>
             </div>
-            <div class="form-group">
-                <label for="post_tags">Tags</label>
+            <div class="mb-3">
+                <label class="form-label" for="post_tags">Tags</label>
                 <input type="hidden" name="karma_tag_create" t-attf-value="#{forum.karma_tag_create}" id="karma_tag_create"/>
                 <input type="hidden" name="karma_edit_retag" t-attf-value="#{forum.karma_edit_retag}" id="karma_edit_retag"/>
                 <input type="hidden" name="post_tags" placeholder="Tags" class="form-control js_select2"/>
@@ -882,8 +880,8 @@
         </article>
         <form t-attf-action="/forum/#{slug(forum)}/post/#{slug(post)}/save" method="post" role="form" class="tag_text js_website_submit_form js_wforum_submit_form o_wforum_readable">
             <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
-            <div t-if="not is_answer" class="form-group">
-                <label for="post_name">Title</label>
+            <div t-if="not is_answer" class="mb-3">
+                <label class="form-label" for="post_name">Title</label>
                 <input type="text" name="post_name" required="required" pattern=".*\S.*" t-attf-value="#{post.name}"
                     class="form-control form-control-lg" placeholder="Edit your Post" title="Title must not be empty"/>
                 <div class="form-text small text-muted">
@@ -902,17 +900,17 @@
                     </div>
                 </div>
             </div>
-            <div class="form-group">
-                <label t-if="not is_answer" for="content">Description</label>
-                <label t-else="">Your Answer</label>
+            <div class="mb-3">
+                <label t-if="not is_answer" class="form-label" for="content">Description</label>
+                <label t-else="" class="form-label">Your Answer</label>
                 <div t-if="not is_answer" class="small form-text text-muted d-inline">, consider <b>adding an example</b>. </div>
                 <textarea name="content" id="content" required="required" class="form-control o_wysiwyg_loader" t-att-data-karma="forum.karma_editor">
                     <t t-esc="post.content"/>
                 </textarea>
             </div>
                 <input type="hidden" name="karma" t-attf-value="#{user.karma}" id="karma"/>
-            <div t-if="not is_answer" class="form-group">
-                <label for="post_tags">Tags</label>
+            <div t-if="not is_answer" class="mb-3">
+                <label class="form-label" for="post_tags">Tags</label>
                 <input type="hidden" name="karma_tag_create" t-attf-value="#{forum.karma_tag_create}" id="karma_tag_create"/>
                 <input type="hidden" name="karma_edit_retag" t-attf-value="#{forum.karma_edit_retag}" id="karma_edit_retag"/>
                 <t t-set="edit_tags_karma_fail" t-value="user.karma &lt; forum.karma_edit_retag"/>
@@ -947,19 +945,19 @@
         <form t-attf-action="/forum/#{ slug(forum) }/#{offensive and 'post' or 'question'}/#{slug(question)}/#{offensive and 'mark_as_offensive' or 'close'}" method="post" role="form" class="mt32 js_website_submit_form">
             <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
             <input name="post_id" t-att-value="question.id" type="hidden"/>
-            <div class="form-group">
-                <label for="post">Post:</label>
+            <div class="mb-3">
+                <label class="form-label" for="post">Post:</label>
                 <input type="text" disabled="True" class="form-control-plaintext" name="post" t-att-value="question.name if not question.parent_id else question.parent_id.name"/>
             </div>
-            <div class="form-group mb-4">
-                <label for="reason"><t t-if="offensive">Offensive</t><t t-if="not offensive">Closing</t> Reason:</label>
+            <div class="mb-4">
+                <label class="form-label" for="reason"><t t-if="offensive">Offensive</t><t t-if="not offensive">Closing</t> Reason:</label>
                 <select class="form-control custom-select custom-select-lg" name="reason_id">
                     <t t-foreach="reasons or []" t-as="reason">
                         <option t-att-value="reason.id" t-att-selected="reason.id == question.closed_reason_id.id"><t t-esc="reason.name"/></option>
                     </t>
                 </select>
             </div>
-            <div class="form-group">
+            <div class="mb-3">
                 <button type="submit" class="btn btn-danger">
                     <t t-if="offensive">Mark as offensive</t>
                     <t t-if="not offensive">Close post</t>
diff --git a/addons/website_mail/static/src/js/follow.js b/addons/website_mail/static/src/js/follow.js
index e2c349ce224..878a2c9279d 100644
--- a/addons/website_mail/static/src/js/follow.js
+++ b/addons/website_mail/static/src/js/follow.js
@@ -44,7 +44,7 @@ publicWidget.registry.follow = publicWidget.Widget.extend({
 
         // not if editable mode to allow designer to edit
         if (!this.editableMode) {
-            $('.js_follow > .input-group-append.d-none').removeClass('d-none');
+            $('.js_follow > .d-none').removeClass('d-none');
             this.$target.find('.js_follow_btn, .js_unfollow_btn').on('click', function (event) {
                 event.preventDefault();
                 self._onClick(event);
diff --git a/addons/website_mail/views/website_mail_templates.xml b/addons/website_mail/views/website_mail_templates.xml
index cca4395575d..3772b5deb95 100644
--- a/addons/website_mail/views/website_mail_templates.xml
+++ b/addons/website_mail/views/website_mail_templates.xml
@@ -22,10 +22,10 @@
                     </div>
                 </button>
             </div>
-            <div t-else="" t-attf-class="#{request.env.user.has_group('base.group_public') and 'input-group-append'}">
+            <t t-else="">
                 <button href="#" t-attf-class="btn btn-secondary js_unfollow_btn">Unsubscribe</button>
                 <button href="#" t-attf-class="btn btn-primary js_follow_btn">Subscribe</button>
-            </div>
+            </t>
         </div>
     </template>
 </odoo>
diff --git a/addons/website_mail_group/views/snippets/s_group.xml b/addons/website_mail_group/views/snippets/s_group.xml
index 141933909ea..a93c010a994 100644
--- a/addons/website_mail_group/views/snippets/s_group.xml
+++ b/addons/website_mail_group/views/snippets/s_group.xml
@@ -5,9 +5,7 @@
              data-id="0" data-object="mail.group" data-follow="off">
             <div class="input-group o_mg_subscribe_form">
                 <input class="o_mg_subscribe_email form-control" type="email" name="email" placeholder="your email..."/>
-                <span class="input-group-append">
-                    <button href="#" class="btn btn-primary o_mg_subscribe_btn">Subscribe</button>
-                </span>
+                <button href="#" class="btn btn-primary o_mg_subscribe_btn">Subscribe</button>
             </div>
         </div>
     </template>
diff --git a/addons/website_mass_mailing/views/snippets_templates.xml b/addons/website_mass_mailing/views/snippets_templates.xml
index 7cf738a2036..1ff75c0483b 100644
--- a/addons/website_mass_mailing/views/snippets_templates.xml
+++ b/addons/website_mass_mailing/views/snippets_templates.xml
@@ -28,10 +28,8 @@
     <div class="s_newsletter_subscribe_form js_subscribe" data-vxml="001" data-list-id="0" data-name="Newsletter Form">
         <div class="input-group">
             <input type="email" name="email" class="js_subscribe_email form-control" placeholder="your email..."/>
-            <span class="input-group-append">
-                <a role="button" href="#" class="btn btn-primary js_subscribe_btn o_submit">Subscribe</a>
-                <a role="button" href="#" class="btn btn-success js_subscribed_btn d-none o_submit" disabled="disabled">Thanks</a>
-            </span>
+            <a role="button" href="#" class="btn btn-primary js_subscribe_btn o_submit">Subscribe</a>
+            <a role="button" href="#" class="btn btn-success js_subscribed_btn d-none o_submit" disabled="disabled">Thanks</a>
         </div>
     </div>
 </template>
diff --git a/addons/website_profile/views/website_profile.xml b/addons/website_profile/views/website_profile.xml
index 78673e78e5d..bd0f051d975 100644
--- a/addons/website_profile/views/website_profile.xml
+++ b/addons/website_profile/views/website_profile.xml
@@ -21,11 +21,9 @@
                         <!-- search -->
                         <form t-attf-action="/profile/users" role="search" method="get">
                             <div class="input-group o_wprofile_course_nav_search ml-1 position-relative">
-                                <span class="input-group-prepend">
-                                    <button class="btn btn-link text-white border-1 rounded-0 pr-1 mr-2" type="submit" aria-label="Search" title="Search">
-                                        <i class="fa fa-search border-1"></i>
-                                    </button>
-                                </span>
+                                <button class="btn btn-link text-white border-1 rounded-0 pr-1 mr-2" type="submit" aria-label="Search" title="Search">
+                                    <i class="fa fa-search border-1"></i>
+                                </button>
                                 <input type="text" class="form-control border-0 rounded-0 bg-transparent text-white ml-auto" name="search" placeholder="Search users"/>
                             </div>
                         </form>
@@ -50,11 +48,9 @@
                                     <form class="px-3" t-attf-action="/profile/users" role="search" method="get">
                                         <div class="input-group">
                                             <input type="text" class="form-control" name="search" placeholder="Search courses"/>
-                                            <span class="input-group-append">
-                                                <button class="btn btn-primary" type="submit" aria-label="Search" title="Search">
-                                                    <i class="fa fa-search"/>
-                                                </button>
-                                            </span>
+                                            <button class="btn btn-primary" type="submit" aria-label="Search" title="Search">
+                                                <i class="fa fa-search"/>
+                                            </button>
                                         </div>
                                     </form>
                                 </div>
diff --git a/addons/website_sale/static/src/js/website_sale.js b/addons/website_sale/static/src/js/website_sale.js
index 355c4f05507..85d616bda58 100644
--- a/addons/website_sale/static/src/js/website_sale.js
+++ b/addons/website_sale/static/src/js/website_sale.js
@@ -831,7 +831,7 @@ publicWidget.registry.WebsiteSaleLayout = publicWidget.Widget.extend({
     selector: '.oe_website_sale',
     disabledInEditableMode: false,
     events: {
-        'change .o_wsale_apply_layout': '_onApplyShopLayoutChange',
+        'change .o_wsale_apply_layout input': '_onApplyShopLayoutChange',
     },
 
     //--------------------------------------------------------------------------
@@ -847,12 +847,13 @@ publicWidget.registry.WebsiteSaleLayout = publicWidget.Widget.extend({
         if (wysiwyg) {
             wysiwyg.odooEditor.observerUnactive('_onApplyShopLayoutChange');
         }
-        var switchToList = $(ev.currentTarget).find('.o_wsale_apply_list input').is(':checked');
+        var clickedValue = $(ev.target).val();
+        var isList = clickedValue === 'list';
         if (!this.editableMode) {
             this._rpc({
                 route: '/shop/save_shop_layout_mode',
                 params: {
-                    'layout_mode': switchToList ? 'list' : 'grid',
+                    'layout_mode': isList ? 'list' : 'grid',
                 },
             });
         }
@@ -862,7 +863,7 @@ publicWidget.registry.WebsiteSaleLayout = publicWidget.Widget.extend({
         // TODO should probably be improved to allow disabling transitions
         // altogether with a class/option.
         $grid.find('*').css('transition', 'none');
-        $grid.toggleClass('o_wsale_layout_list', switchToList);
+        $grid.toggleClass('o_wsale_layout_list', isList);
         void $grid[0].offsetWidth;
         $grid.find('*').css('transition', '');
         if (wysiwyg) {
diff --git a/addons/website_sale/static/src/scss/website_sale.scss b/addons/website_sale/static/src/scss/website_sale.scss
index 77a8e3f4b38..8aff49a0a90 100644
--- a/addons/website_sale/static/src/scss/website_sale.scss
+++ b/addons/website_sale/static/src/scss/website_sale.scss
@@ -185,12 +185,14 @@ $o-wsale-products-layout-grid-gutter-width: min($grid-gutter-width / 2, $o-wsale
         color: gray('500');
         background-color: transparent;
         border-radius: 0%;
+    }
 
-        &.active, &:focus {
-            color: gray('600');
-            background-color: gray('200');
-            box-shadow: none !important;
-        }
+    .o_wsale_apply_layout > .btn-check:checked + .btn,
+    .o_wsale_apply_layout > .btn:focus
+    {
+        color: gray('600');
+        background-color: gray('200');
+        box-shadow: none !important;
     }
 }
 
diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index 55eacbf511a..0b5cd12ded5 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -275,7 +275,7 @@
                             <t t-call="website_sale.products_breadcrumb">
                                 <t t-set="_classes" t-valuef="w-100"/>
                             </t>
-                            <div class="products_header form-inline flex-md-nowrap justify-content-end mb-4">
+                            <div class="products_header d-flex flex-md-nowrap justify-content-end mb-4">
                                 <t t-call="website_sale.search">
                                     <t t-set="_classes" t-valuef="w-100 w-md-auto mr-auto mb-2"/>
                                     <t t-set="search" t-value="original_search or search"/>
@@ -413,13 +413,11 @@
 
     <template id="add_grid_or_list_option" inherit_id="website_sale.products" active="True" name="Grid or List button">
         <xpath expr="//div[hasclass('products_header')]" position="inside">
-            <div class="btn-group btn-group-toggle ml-3 mb-2 d-inline-flex o_wsale_apply_layout" data-toggle="buttons">
-                <label t-attf-class="btn btn-light border-0 #{'active' if layout_mode != 'list' else None} fa fa-th-large o_wsale_apply_grid" title="Grid">
-                    <input type="radio" name="wsale_products_layout" t-att-checked="'checked' if layout_mode != 'list' else None"/>
-                </label>
-                <label t-attf-class="btn btn-light border-0 #{'active' if layout_mode == 'list' else None} fa fa-th-list o_wsale_apply_list" title="List">
-                    <input type="radio" name="wsale_products_layout" t-att-checked="'checked' if layout_mode == 'list' else None"/>
-                </label>
+            <div class="ms-3 mb-2 d-inline-flex o_wsale_apply_layout">
+                <input type="radio" class="btn-check" name="wsale_products_layout" id="o_wsale_apply_grid"  t-att-checked="'checked' if layout_mode != 'list' else None" value="grid"/>
+                <label t-attf-class="btn btn-light border-0 #{'active' if layout_mode != 'list' else None} fa fa-th-large o_wsale_apply_grid" title="Grid" for="o_wsale_apply_grid"/>
+                <input type="radio" class="btn-check" name="wsale_products_layout" id="o_wsale_apply_list" t-att-checked="'checked' if layout_mode == 'list' else None" value="list"/>
+                <label t-attf-class="btn btn-light border-0 #{'active' if layout_mode == 'list' else None} fa fa-th-list o_wsale_apply_list" title="List" for="o_wsale_apply_list"/>
             </div>
         </xpath>
     </template>
@@ -807,17 +805,13 @@
         </xpath>
       <xpath expr="//div[@id='add_to_cart_wrap']" position="before">
         <div t-attf-class="css_quantity input-group d-inline-flex mr-2 mb-2 align-middle #{'input-group-lg' if ctaSizeBig else ''}" contenteditable="false">
-            <div class="input-group-prepend">
-                <a t-attf-href="#" class="btn btn-link js_add_cart_json" aria-label="Remove one" title="Remove one">
-                    <i class="fa fa-minus"></i>
-                </a>
-            </div>
+            <a t-attf-href="#" class="btn btn-link js_add_cart_json" aria-label="Remove one" title="Remove one">
+                <i class="fa fa-minus"></i>
+            </a>
             <input type="text" class="form-control quantity text-center" data-min="1" name="add_qty" t-att-value="add_qty or 1"/>
-            <div class="input-group-append">
-                <a t-attf-href="#" class="btn btn-link float_left js_add_cart_json" aria-label="Add one" title="Add one">
-                    <i class="fa fa-plus"></i>
-                </a>
-            </div>
+            <a t-attf-href="#" class="btn btn-link float_left js_add_cart_json" aria-label="Add one" title="Add one">
+                <i class="fa fa-plus"></i>
+            </a>
         </div>
       </xpath>
     </template>
@@ -1105,22 +1099,18 @@
                             <div class="css_quantity input-group mx-auto justify-content-center">
                                 <t t-if="not line._is_not_sellable_line()">
                                     <t t-if="show_qty">
-                                        <div class="input-group-prepend">
-                                            <a t-attf-href="#" class="btn btn-link js_add_cart_json d-none d-md-inline-block" aria-label="Remove one" title="Remove one">
-                                                <i class="fa fa-minus"></i>
-                                            </a>
-                                        </div>
+                                        <a t-attf-href="#" class="btn btn-link js_add_cart_json d-none d-md-inline-block" aria-label="Remove one" title="Remove one">
+                                            <i class="fa fa-minus"></i>
+                                        </a>
                                         <input type="text" class="js_quantity form-control quantity" t-att-data-line-id="line.id" t-att-data-product-id="line.product_id.id" t-att-value="int(line.product_uom_qty) == line.product_uom_qty and int(line.product_uom_qty) or line.product_uom_qty" />
-                                        <div class="input-group-append">
-                                            <div t-if="line._get_shop_warning(clear=False)" class="input-group-append">
-                                                <a t-attf-href="#" class="btn btn-link">
-                                                <i class='fa fa-warning text-warning' t-att-title="line._get_shop_warning()" role="img" aria-label="Warning"/>
-                                                </a>
-                                            </div>
-                                            <a t-else='' t-attf-href="#" class="btn btn-link float_left js_add_cart_json d-none d-md-inline-block" aria-label="Add one" title="Add one">
-                                                <i class="fa fa-plus"></i>
+                                        <t t-if="line._get_shop_warning(clear=False)">
+                                            <a t-attf-href="#" class="btn btn-link">
+                                            <i class='fa fa-warning text-warning' t-att-title="line._get_shop_warning()" role="img" aria-label="Warning"/>
                                             </a>
-                                        </div>
+                                        </t>
+                                        <a t-else='' t-attf-href="#" class="btn btn-link float_left js_add_cart_json d-none d-md-inline-block" aria-label="Add one" title="Add one">
+                                            <i class="fa fa-plus"></i>
+                                        </a>
                                     </t>
                                     <t t-else="">
                                         <input type="hidden" class="js_quantity form-control quantity" t-att-data-line-id="line.id" t-att-data-product-id="line.product_id.id" t-att-value="int(line.product_uom_qty) == line.product_uom_qty and int(line.product_uom_qty) or line.product_uom_qty" />
@@ -1308,9 +1298,7 @@
             <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()" />
             <div class="input-group w-100">
                 <input name="promo" class="form-control" type="text" placeholder="code..." t-att-value="website_sale_order.pricelist_id.code or None"/>
-                <div class="input-group-append">
-                    <a href="#" role="button" class="btn btn-secondary a-submit">Apply</a>
-                </div>
+                <a href="#" role="button" class="btn btn-secondary a-submit">Apply</a>
             </div>
         </form>
         <t t-if="request.params.get('code_not_available')" name="code_not_available">
diff --git a/addons/website_sale_loyalty/views/website_sale_templates.xml b/addons/website_sale_loyalty/views/website_sale_templates.xml
index dafb875cf65..9187cd0200d 100644
--- a/addons/website_sale_loyalty/views/website_sale_templates.xml
+++ b/addons/website_sale_loyalty/views/website_sale_templates.xml
@@ -5,9 +5,7 @@
             <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
             <div class="input-group w-100">
                 <input name="promo" class="form-control" type="text" required="required" placeholder="Gift card code..."/>
-                <div class="input-group-append">
-                    <button href="#" type="submit" role="button" class="btn btn-secondary a-submit">Pay</button>
-                </div>
+                <button href="#" type="submit" role="button" class="btn btn-secondary a-submit">Pay</button>
             </div>
         </form>
     </template>
diff --git a/addons/website_slides/static/src/xml/slide_quiz_create.xml b/addons/website_slides/static/src/xml/slide_quiz_create.xml
index e24fcb3d637..49a3cb6089b 100644
--- a/addons/website_slides/static/src/xml/slide_quiz_create.xml
+++ b/addons/website_slides/static/src/xml/slide_quiz_create.xml
@@ -5,10 +5,8 @@
         <div t-attf-class="o_wsildes_quiz_question_input mt-3 #{!widget.update ? 'col' : ''}" t-att-data-id="widget.question.id || ''">
             <form class="mb-3">
                 <div class="o_wslides_quiz_question row align-items-center mr-0 mb-2">
-                    <div class="input-group ml-3">
-                        <div class="input-group-prepend">
-                            <span class="input-group-text o_wslides_quiz_question_sequence"><t t-esc="widget.sequence"/></span>
-                        </div>
+                    <div class="input-group">
+                        <span class="input-group-text o_wslides_quiz_question_sequence"><t t-esc="widget.sequence"/></span>
                         <input type="text" name="question-name" class="form-control col-11" placeholder='e.g. "Which animal cannot fly?"'
                             t-att-value="widget.question.text"/>
                     </div>
@@ -44,9 +42,9 @@
         <div class="o_wslides_js_quiz_answer row align-items-center mb-1" t-attf-data-answer-id="#{answer ? answer.id : ''}" >
             <div class="col ml-3 ml-md-5">
                 <div class="row align-items-center">
-                    <div class="input-group col-9 p-0">
-                        <input type="text" class="o_wslides_js_quiz_answer_value form-control" t-attf-placeholder='e.g. "{{placeholder || "another animal"}}"' t-attf-value="#{answer ? answer.text_value : ''}"/>
-                        <div class="input-group-append">
+                    <div class="col-9 p-0">
+                        <div class="input-group">
+                            <input type="text" class="o_wslides_js_quiz_answer_value form-control" t-attf-placeholder='e.g. "{{placeholder || "another animal"}}"' t-attf-value="#{answer ? answer.text_value : ''}"/>
                             <div class="input-group-text">
                                 <a class="o_wslides_js_quiz_is_correct" title="This is the correct answer">
                                     <label class="my-0">
@@ -58,9 +56,9 @@
                             </div>
                         </div>
                     </div>
-                    <i t-attf-class="o_wslides_js_quiz_icon o_wslides_js_quiz_comment_answer fa fa-lg fa-info-circle p-md-2 py-2 pl-2 pr-1 #{answer &amp;&amp; answer.comment ? 'text-primary' : 'text-muted'}" title="Add comment on this answer" />
-                    <i class="o_wslides_js_quiz_icon o_wslides_js_quiz_add_answer fa fa-lg fa-plus-circle p-md-2 py-2 px-1 text-muted" title="Add an answer below this one" />
-                    <i class="o_wslides_js_quiz_icon o_wslides_js_quiz_remove_answer fa fa-lg fa-trash-o p-md-2 py-2 px-1 text-muted" title="Remove this answer" />
+                    <i t-attf-class="o_wslides_js_quiz_icon o_wslides_js_quiz_comment_answer fa fa-lg fa-info-circle col-auto p-md-2 py-2 pl-2 pr-1 #{answer &amp;&amp; answer.comment ? 'text-primary' : 'text-muted'}" title="Add comment on this answer" />
+                    <i class="o_wslides_js_quiz_icon o_wslides_js_quiz_add_answer fa fa-lg fa-plus-circle col-auto p-md-2 py-2 px-1 text-muted" title="Add an answer below this one" />
+                    <i class="o_wslides_js_quiz_icon o_wslides_js_quiz_remove_answer fa fa-lg fa-trash-o col-auto p-md-2 py-2 px-1 text-muted" title="Remove this answer" />
                 </div>
                 <div class="o_wslides_js_quiz_answer_comment row align-items-center d-none">
                     <input type="text" class="form-control col-8 offset-1 mt-1" placeholder="This is the correct answer, congratulations"
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 ffe170221c8..fd6fd289420 100644
--- a/addons/website_slides/static/src/xml/website_slides_share.xml
+++ b/addons/website_slides/static/src/xml/website_slides_share.xml
@@ -20,11 +20,9 @@
                 <h5 class="mt-0 mb-2">Share Link</h5>
                 <div class="input-group">
                     <input type="text" class="form-control o_wslides_js_share_link" t-att-value="widget.slide.websiteShareUrl" readonly="readonly" onClick="this.select();" />
-                    <div class="input-group-append">
-                        <button class="btn btn-sm btn-primary o_clipboard_button" style="border-top-right-radius: 4px;border-bottom-right-radius: 4px;" >
-                            <span class="fa fa-clipboard"> Copy Link</span>
-                        </button>
-                    </div>
+                    <button class="btn btn-sm btn-primary o_clipboard_button" style="border-top-right-radius: 4px;border-bottom-right-radius: 4px;" >
+                        <span class="fa fa-clipboard"> Copy Link</span>
+                    </button>
                 </div>
             </div>
             <div t-attf-class="col-12 col-lg-6">
@@ -39,14 +37,12 @@
             <form class="form-group o_wslides_js_share_email" role="form">
                 <div class="input-group">
                     <input type="email" class="form-control" placeholder="your-friend@domain.com"/>
-                    <span class="input-group-append">
-                        <button class="btn btn-primary" type="button"
-                            data-loading-text="Sending..."
-                            t-attf-data-slide-id="#{widget.slide.id}"
-                            style="border-top-right-radius: 4px;border-bottom-right-radius: 4px;">
-                            <i class="fa fa-envelope-o"/> Send Email
-                        </button>
-                    </span>
+                    <button class="btn btn-primary" type="button"
+                        data-loading-text="Sending..."
+                        t-attf-data-slide-id="#{widget.slide.id}"
+                        style="border-top-right-radius: 4px;border-bottom-right-radius: 4px;">
+                        <i class="fa fa-envelope-o"/> Send Email
+                    </button>
                 </div>
             </form>
         </div>
@@ -55,4 +51,5 @@
         </div>
     </t>
 
-</templates>
\ No newline at end of file
+</templates>
+
diff --git a/addons/website_slides/static/src/xml/website_slides_unsubscribe.xml b/addons/website_slides/static/src/xml/website_slides_unsubscribe.xml
index c27c2b89402..660c520dbcd 100644
--- a/addons/website_slides/static/src/xml/website_slides_unsubscribe.xml
+++ b/addons/website_slides/static/src/xml/website_slides_unsubscribe.xml
@@ -11,11 +11,9 @@
 
     <t t-name="slides.course.unsubscribe.modal.subscription">
         <form class="clearfix">
-            <div class="form-group row">
-                <div class="controls mt8 ml-3">
-                    <input id="subscribed" name="subscribed" type="checkbox"/>
-                    <label for="subscribed" class="col-form-label font-weight-normal">Be notified when a new content is added.</label>
-                </div>
+            <div class="controls mt8">
+                <input id="subscribed" name="subscribed" type="checkbox"/>
+                <label for="subscribed" class="col-form-label font-weight-normal">Be notified when a new content is added.</label>
             </div>
         </form>
     </t>
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 def77ee04da..bae7eaf5329 100644
--- a/addons/website_slides/static/src/xml/website_slides_upload.xml
+++ b/addons/website_slides/static/src/xml/website_slides_upload.xml
@@ -74,9 +74,7 @@
             <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"/>
-                    <div class="input-group-prepend">
-                    <span class="input-group-text">Minutes</span>
-                </div>
+                <span class="input-group-text">Minutes</span>
             </div>
         </div>
     </t>
diff --git a/addons/website_slides/views/website_slides_templates_course.xml b/addons/website_slides/views/website_slides_templates_course.xml
index bd0347c32a2..4b8fe498700 100644
--- a/addons/website_slides/views/website_slides_templates_course.xml
+++ b/addons/website_slides/views/website_slides_templates_course.xml
@@ -663,11 +663,9 @@
                             <form t-attf-action="/slides/#{slug(channel)}" role="search" method="get" class="form-inline my-2 my-lg-0">
                                 <div class="input-group position-relative">
                                     <input type="text" class="form-control border" name="search" placeholder="Search in content" t-att-value="search"/>
-                                    <div class="input-group-append">
-                                        <button class="btn border" type="submit" aria-label="Search" title="Search">
-                                            <i class="fa fa-search"/>
-                                        </button>
-                                    </div>
+                                    <button class="btn border" type="submit" aria-label="Search" title="Search">
+                                        <i class="fa fa-search"/>
+                                    </button>
                                 </div>
                             </form>
                         </div>
@@ -743,7 +741,7 @@
                 </div>
                 <div class="row mx-n2">
                     <t t-foreach="category['slides']" t-as="slide">
-                        <div class="col-12 col-sm-6 col-lg-4 px-2 d-flex flex-grow-1" t-call="website_slides.lesson_card"/>
+                        <div class="col-12 col-sm-6 col-lg-4 px-2 d-flex" t-call="website_slides.lesson_card"/>
                     </t>
                 </div>
             </div>
diff --git a/addons/website_slides/views/website_slides_templates_homepage.xml b/addons/website_slides/views/website_slides_templates_homepage.xml
index c2b03a5b33b..35a0c6647e9 100644
--- a/addons/website_slides/views/website_slides_templates_homepage.xml
+++ b/addons/website_slides/views/website_slides_templates_homepage.xml
@@ -80,7 +80,7 @@
                                     <a class="d-none d-lg-block" t-att-href="'/profile/user/%s' % user.id">View</a>
                                     <a class="d-lg-none btn btn-sm bg-white border" href="#" data-toggle="collapse" data-target="#o_wslides_home_aside_content">More info</a>
                                 </div>
-                                <hr class="d-none d-lg-block mt-2 pt-2 mb-1"/>
+                                <hr class="d-none d-lg-block mt-2 mb-2 mb-1"/>
                             </div>
                             <div id="o_wslides_home_aside_content" class="collapse d-lg-block">
                                 <div class="row no-gutters mb-5 mt-3 mt-lg-0">
@@ -432,7 +432,7 @@
             <div class="col">
                 <a t-if="users" href="/profile/users" class="float-right">View all</a>
                 <h5 class="m-0">Leaderboard</h5>
-                <hr class="mt-2 pt-2"/>
+                <hr class="mt-2 mb-2"/>
             </div>
         </div>
         <div class="row">
@@ -489,7 +489,7 @@
             <div class="col">
                 <a href="/profile/ranks_badges?badge_category=slides" class="float-right">View all</a>
                 <h5 class="m-0">Badges</h5>
-                <hr class="mt-2 pt-2"/>
+                <hr class="mt-2 mt-2"/>
             </div>
         </div>
         <t t-foreach="challenges" t-as="challenge">
diff --git a/addons/website_slides/views/website_slides_templates_lesson.xml b/addons/website_slides/views/website_slides_templates_lesson.xml
index a77aeb1c045..a46a9360718 100644
--- a/addons/website_slides/views/website_slides_templates_lesson.xml
+++ b/addons/website_slides/views/website_slides_templates_lesson.xml
@@ -544,8 +544,8 @@
 </template>
 
 <template id="lesson_content_quiz_add_buttons" name="Lesson: Quiz Add Buttons template">
-    <div class="o_wslides_js_lesson_quiz_new_question row mt-3">
-        <a t-attf-class="o_wslides_js_quiz_add o_wslides_js_quiz_add_quiz btn btn-light border ml-3 #{'d-none ' if slide.question_ids else ''}" role="button">
+    <div class="o_wslides_js_lesson_quiz_new_question mt-3">
+        <a t-attf-class="o_wslides_js_quiz_add o_wslides_js_quiz_add_quiz btn btn-light border #{'d-none ' if slide.question_ids else ''}" role="button">
             <i class="fa fa-plus mr-2"/>
             <span>Add Quiz</span>
         </a>
@@ -559,18 +559,16 @@
 <!-- Slide sub-template: share: send by email -->
 <template id='slide_social_email' name="Share by Email">
     <h5 class="mt-4">Share by mail</h5>
-    <div t-if="not is_public_user" class="form-inline">
+    <div t-if="not is_public_user" class="d-flex">
         <form class="form-group oe_slide_js_share_email" role="form">
             <div class="input-group">
                 <input type="email" class="form-control" placeholder="your-friend@domain.com"/>
-                <span class="input-group-append">
-                    <button class="btn btn-primary" type="button"
-                        data-loading-text="Sending..."
-                        t-attf-data-slide-id="#{slide.id}"
-                        style="border-top-right-radius: 4px;border-bottom-right-radius: 4px;">
-                        <i class="fa fa-envelope"/> Send Email
-                    </button>
-                </span>
+                <button class="btn btn-primary" type="button"
+                    data-loading-text="Sending..."
+                    t-attf-data-slide-id="#{slide.id}"
+                    style="border-top-right-radius: 4px;border-bottom-right-radius: 4px;">
+                    <i class="fa fa-envelope"/> Send Email
+                </button>
             </div>
             <span class="form-text text-muted d-block w-100">Send presentation through email</span>
         </form>
diff --git a/addons/website_slides/views/website_slides_templates_lesson_embed.xml b/addons/website_slides/views/website_slides_templates_lesson_embed.xml
index e014ddda8a8..6a8251f04d0 100644
--- a/addons/website_slides/views/website_slides_templates_lesson_embed.xml
+++ b/addons/website_slides/views/website_slides_templates_lesson_embed.xml
@@ -95,9 +95,7 @@
                                     <div class="col-3 d-flex align-items-center">
                                         <div class="input-group input-group-sm flex-nowrap" style="max-width: 100px">
                                             <input type="number" class="form-control text-center" id="page_number" style="min-width: 60px"/>
-                                            <div class="input-group-append">
-                                                <span class="input-group-text" id="page_count"/>
-                                            </div>
+                                            <span class="input-group-text" id="page_count"/>
                                         </div>
                                         <span id="zoomout" class="d-none d-sm-inline ml-2 mr-2" title="Zoom out" aria-label="Zoom out" role="button">
                                             <i class="fa fa-search-minus" />
diff --git a/addons/website_slides/views/website_slides_templates_utils.xml b/addons/website_slides/views/website_slides_templates_utils.xml
index 556413ca259..dfc2a4e463b 100644
--- a/addons/website_slides/views/website_slides_templates_utils.xml
+++ b/addons/website_slides/views/website_slides_templates_utils.xml
@@ -64,11 +64,9 @@
     <div class="input-group">
         <input type="text" t-att-id="'wslides_share_link_id_%s' % record.id" class="form-control o_wslides_js_share_link" readonly="readonly" onclick="this.select();"
             t-att-value="website_share_url"/>
-        <div class="input-group-append">
-            <button t-att-id="'share_link_clipboard_button_id_%s' % record.id" class="btn btn-sm btn-primary o_clipboard_button" >
-                <span class="fa fa-clipboard"> Copy Text</span>
-            </button>
-        </div>
+        <button t-att-id="'share_link_clipboard_button_id_%s' % record.id" class="btn btn-sm btn-primary o_clipboard_button" >
+            <span class="fa fa-clipboard"> Copy Text</span>
+        </button>
     </div>
 </template>