[REF] *: BS4, adapt input-group structure

The input-group-addon class has been replaced by a combination of the
input-group-text and the input-group-append/prepend classes. The
input-group-btn class is replaced by the input-group-append/prepend
classes.

24 files changed, 113 insertions, 74 deletions

diff --git a/addons/portal/views/portal_templates.xml b/addons/portal/views/portal_templates.xml
index a8ba031c8a4..2e44d979783 100644
--- a/addons/portal/views/portal_templates.xml
+++ b/addons/portal/views/portal_templates.xml
@@ -217,7 +217,7 @@
                 <div t-if='searchbar_inputs' class="collapse navbar-collapse text-right" id="o_portal_searchbar_collapse">
                     <div class="navbar-form o_portal_search_panel">
                          <div class="input-group">
-                            <div class="input-group-btn">
+                            <div class="input-group-prepend">
                                 <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
                                     <span id="search_label" class="d-none d-md-inline mr4">Search</span>
                                 </button>
@@ -231,7 +231,7 @@
                                 </div>
                             </div>
                             <input type="text" class="form-control" t-att-value='search' name="search"/>
-                            <span class="input-group-btn">
+                            <span class="input-group-append">
                                 <button class="btn btn-secondary search-submit" type="button"><span class="fa fa-search d-none d-md-inline-block"/><span class="fa fa-arrow-right d-inline-block d-md-none"/></button>
                             </span>
                         </div>
diff --git a/addons/survey/static/src/js/survey.js b/addons/survey/static/src/js/survey.js
index 991a742e65d..eb8f451aa39 100644
--- a/addons/survey/static/src/js/survey.js
+++ b/addons/survey/static/src/js/survey.js
@@ -30,7 +30,7 @@ if(!the_form.length) {
 
     // Printing mode: will disable all the controls in the form
     if (_.isUndefined(submit_controller)) {
-        $(".js_surveyform .input-group-addon span.fa-calendar").css("pointer-events", "none");
+        $(".js_surveyform .input-group-text span.fa-calendar").css("pointer-events", "none");
         $('.js_surveyform :input').prop('disabled', true);
         print_mode = true;
     }
diff --git a/addons/web/static/src/xml/kanban.xml b/addons/web/static/src/xml/kanban.xml
index 881babbda23..d3a6e8d7a3f 100644
--- a/addons/web/static/src/xml/kanban.xml
+++ b/addons/web/static/src/xml/kanban.xml
@@ -52,7 +52,7 @@
             <div class="o_kanban_header">
                 <div class="input-group">
                     <input type="text" class="o_input" placeholder="Column title"/>
-                    <span class="input-group-btn">
+                    <span class="input-group-append">
                         <button class="btn btn-primary o_kanban_add" type="button">Add</button>
                     </span>
                 </div>
diff --git a/addons/web/views/webclient_templates.xml b/addons/web/views/webclient_templates.xml
index 805ef9ff3e9..e6b958e1a85 100644
--- a/addons/web/views/webclient_templates.xml
+++ b/addons/web/views/webclient_templates.xml
@@ -361,8 +361,8 @@
                     <label for="db" class="control-label">Database</label>
                     <div class="input-group">
                         <input type="text" name="db" t-att-value="request.db" id="db" class="form-control" required="required" readonly="readonly"/>
-                        <span class="input-group-btn">
-                          <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 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>
                     </div>
                 </div>
diff --git a/addons/web_editor/static/src/xml/editor.xml b/addons/web_editor/static/src/xml/editor.xml
index 1b478a09d9c..187c880d3ae 100644
--- a/addons/web_editor/static/src/xml/editor.xml
+++ b/addons/web_editor/static/src/xml/editor.xml
@@ -388,7 +388,9 @@
                     <div class="col-md-5">
                         <div class="input-group">
                             <input type="number" min="0" max="100" class="form-control input-sm" id="o_bg_img_opt_custom_size_x" placeholder="auto"/>
-                            <div class="input-group-addon">%</div>
+                            <div class="input-group-append">
+                                <div class="input-group-text">%</div>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -397,7 +399,9 @@
                     <div class="col-md-5">
                         <div class="input-group">
                             <input type="number" min="0" max="100" class="form-control input-sm" id="o_bg_img_opt_custom_size_y" placeholder="auto"/>
-                            <div class="input-group-addon">%</div>
+                            <div class="input-group-append">
+                                <div class="input-group-text">%</div>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -410,7 +414,9 @@
                     <div class="col-md-5">
                         <div class="input-group">
                             <input type="number" min="0" max="100" class="form-control input-sm" id="o_bg_img_opt_custom_pos_x" placeholder="auto"/>
-                            <div class="input-group-addon">%</div>
+                            <div class="input-group-append">
+                                <div class="input-group-text">%</div>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -419,7 +425,9 @@
                     <div class="col-md-5">
                         <div class="input-group">
                             <input type="number" min="0" max="100" class="form-control input-sm" id="o_bg_img_opt_custom_pos_y" placeholder="auto"/>
-                            <div class="input-group-addon">%</div>
+                            <div class="input-group-append">
+                                <div class="input-group-text">%</div>
+                            </div>
                         </div>
                     </div>
                 </div>
diff --git a/addons/website/static/src/xml/website.contentMenu.xml b/addons/website/static/src/xml/website.contentMenu.xml
index 9cabe61a861..1fdfd31fe7c 100644
--- a/addons/website/static/src/xml/website.contentMenu.xml
+++ b/addons/website/static/src/xml/website.contentMenu.xml
@@ -3,14 +3,16 @@
 <t t-name="website.contentMenu.dialog.submenu">
     <li t-att-data-menu-id="submenu.id">
         <div class="input-group">
-            <span class="input-group-addon fa fa-bars" role="img" aria-label="Dropdown menu" title="Dropdown menu"/>
+            <div class="input-group-prepend">
+                <span class="input-group-text fa fa-bars" role="img" aria-label="Dropdown menu" title="Dropdown menu"/>
+            </div>
             <span class="form-control">
                 <span class="js_menu_label">
                     <t t-esc="submenu.name"/>
                 </span>
                 <i t-if="submenu.is_homepage" class="pull-right fa fa-home" style="margin-top: 3px" role="img" aria-label="Home" title="Home"/>
             </span>
-            <span class="input-group-btn">
+            <span class="input-group-append">
                 <button type="button" class="btn btn-primary js_edit_menu fa fa-pencil-square-o" aria-label="Edit menu" title="Edit menu"/>
                 <button type="button" class="btn btn-danger js_delete_menu fa fa-trash-o" aria-label="Delete menu" title="Delete menu"/>
             </span>
diff --git a/addons/website/static/src/xml/website.pageProperties.xml b/addons/website/static/src/xml/website.pageProperties.xml
index 9299e4b8b69..3dce6d68b7d 100644
--- a/addons/website/static/src/xml/website.pageProperties.xml
+++ b/addons/website/static/src/xml/website.pageProperties.xml
@@ -57,7 +57,9 @@
                     <label class="control-label col-md-3" for="page_url">Page URL</label>
                     <div class="col-md-9">
                         <div class="input-group">
-                            <span class="input-group-addon" t-att-title="widget.serverUrl"><small><t t-esc="widget.serverUrlTrunc"/></small></span>
+                            <div class="input-group-prepend">
+                                <span class="input-group-text" t-att-title="widget.serverUrl"><small><t t-esc="widget.serverUrlTrunc"/></small></span>
+                            </div>
                             <input type="text" class="form-control input-sm" id="page_url" t-att-value="widget.page.url" />
                         </div>
                     </div>
@@ -130,9 +132,11 @@
                     <div class="col-md-9">
                         <div class='input-group date' id='date_publish_container'>
                             <input type='text' class="form-control" name="date_publish" id="date_publish" />
-                            <span class="input-group-addon">
-                                <span class="fa fa-calendar" role="img" aria-label="Publish date" title="Publish date"></span>
-                            </span>
+                            <div class="input-group-append">
+                                <span class="input-group-text">
+                                    <span class="fa fa-calendar" role="img" aria-label="Publish date" title="Publish date"></span>
+                                </span>
+                            </div>
                         </div>
                     </div>
                 </div>
diff --git a/addons/website/static/src/xml/website.seo.xml b/addons/website/static/src/xml/website.seo.xml
index dd6decda977..9680dac6d11 100644
--- a/addons/website/static/src/xml/website.seo.xml
+++ b/addons/website/static/src/xml/website.seo.xml
@@ -46,10 +46,10 @@
                             <div class="form-inline" role="form">
                                 <div class="input-group">
                                     <input type="text" style="min-width:170px" name="seo_page_keywords" class="form-control" placeholder="Keyword" maxlength="30"/>
-                                    <span class="input-group-btn">
+                                    <span class="input-group-append">
                                         <select name="seo_page_language" id="language-box" class="btn form-control"/>
                                     </span>
-                                    <span class="input-group-btn">
+                                    <span class="input-group-append">
                                         <button data-action="add" class="btn btn-success" type="button">Add</button>
                                     </span>
                                 </div>
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index a46cbca04ca..691c8f57eae 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -847,7 +847,7 @@ Sitemap: <t t-esc="url_root"/>sitemap.xml
         <div class="oe_search">
             <input type="text" name="search" class="search-query form-control oe_search_box" placeholder="Search..." t-att-value="search" />
         </div>
-        <span class="input-group-btn">
+        <span class="input-group-append">
            <button type="submit" class="btn btn-secondary oe_search_button" aria-label="Search" title="Search"><i class="fa fa-search"/></button>
         </span>
     </div>
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 968770545a7..fee450c06d9 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
@@ -668,7 +668,9 @@
                                                 <div class="row">
                                                     <div class="col-md-6">
                                                         <div class="input-group">
-                                                            <div class="input-group-addon"><span class="text-nowrap" t-esc="opportunity.company_currency.symbol"/></div>
+                                                            <div class="input-group-prepend">
+                                                                <div class="input-group-text"><span class="text-nowrap" t-esc="opportunity.company_currency.symbol"/></div>
+                                                            </div>
                                                             <input type="text" name="planned_revenue" class="form-control planned_revenue" t-att-value="opportunity.planned_revenue" placeholder="Planned Revenue"/>
                                                         </div>
                                                     </div>
@@ -678,7 +680,9 @@
                                                     <div class="col-md-5">
                                                         <div class="input-group">
                                                             <input type="text" name="probability" class="form-control probability" t-att-value="opportunity.probability" placeholder="Probability"/>
-                                                            <div class="input-group-addon">%</div>
+                                                            <div class="input-group-append">
+                                                                <div class="input-group-text">%</div>
+                                                            </div>
                                                         </div>
                                                     </div>
                                                 </div>
@@ -706,7 +710,9 @@
                                                         <label>Deadline: </label>
                                                         <div class='input-group date'>
                                                             <input type="text" name="date_deadline" t-att-value="opportunity.date_deadline" class="form-control date_deadline" data-date-format="YYYY-MM-DD" t-att-name="prefix" placeholder="YYYY-MM-DD" />
-                                                            <span class="input-group-addon"><span class="fa fa-calendar" role="img" aria-label="Calendar"></span></span>
+                                                            <div class="input-group-append">
+                                                                <span class="input-group-text"><span class="fa fa-calendar" role="img" aria-label="Calendar"></span></span>
+                                                            </div>
                                                         </div>
                                                     </div>
                                                 </div>
@@ -727,7 +733,9 @@
                                                 <label class="control-label" for="activity_date_deadline">Next Activity Date</label>
                                                 <div class='input-group date'>
                                                     <input type="text" name="activity_date_deadline" t-att-value="user_activity.date_deadline" class="form-control activity_date_deadline" data-date-format="YYYY-MM-DD" t-att-name="prefix" placeholder="YYYY-MM-DD" />
-                                                    <span class="input-group-addon"><span class="fa fa-calendar" role="img" aria-label="Calendar" title="Calendar"></span></span>
+                                                    <div class="input-group-append">
+                                                        <span class="input-group-text"><span class="fa fa-calendar" role="img" aria-label="Calendar" title="Calendar"></span></span>
+                                                    </div>
                                                 </div>
                                             </div>
                                         </main>
diff --git a/addons/website_mail/static/src/js/follow.js b/addons/website_mail/static/src/js/follow.js
index 177c5d4768c..b46b9c500f7 100644
--- a/addons/website_mail/static/src/js/follow.js
+++ b/addons/website_mail/static/src/js/follow.js
@@ -24,7 +24,7 @@ sAnimation.registry.follow = sAnimation.Class.extend({
 
         // not if editable mode to allow designer to edit
         if (!this.editableMode) {
-            $('.js_follow > .input-group-btn.d-none').removeClass('d-none');
+            $('.js_follow > .input-group-append.d-none').removeClass('d-none');
             this.$target.find('.js_follow_btn, .js_unfollow_btn').on('click', function (event) {
                 event.preventDefault();
                 self._onClick();
diff --git a/addons/website_mail/views/website_mail_templates.xml b/addons/website_mail/views/website_mail_templates.xml
index ddc881e012c..df768f003c5 100644
--- a/addons/website_mail/views/website_mail_templates.xml
+++ b/addons/website_mail/views/website_mail_templates.xml
@@ -10,10 +10,10 @@
                   class="js_follow_email form-control"
                   placeholder="your email..."
                   groups="base.group_public"/>
-            <span class="input-group-btn">
+            <div class="input-group-append">
                 <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>
-            </span>
+            </div>
         </div>
     </template>
 
diff --git a/addons/website_mail_channel/static/src/js/website_mail_channel.snippet.js b/addons/website_mail_channel/static/src/js/website_mail_channel.snippet.js
index d176b1e981d..d5415ef5b83 100644
--- a/addons/website_mail_channel/static/src/js/website_mail_channel.snippet.js
+++ b/addons/website_mail_channel/static/src/js/website_mail_channel.snippet.js
@@ -30,7 +30,7 @@ sAnimation.registry.follow_alias = sAnimation.Class.extend({
         // not if editable mode to allow designer to edit alert field
         if (!this.editableMode) {
             this.$('> .alert').addClass('d-none');
-            this.$('> .input-group-btn.d-none').removeClass('d-none');
+            this.$('> .input-group-append.d-none').removeClass('d-none');
             this.$('.js_follow_btn, .js_unfollow_btn').on('click', function (event) {
                 event.preventDefault();
                 self._onClick();
diff --git a/addons/website_mail_channel/views/snippets.xml b/addons/website_mail_channel/views/snippets.xml
index bd4114dd826..6f0af554864 100644
--- a/addons/website_mail_channel/views/snippets.xml
+++ b/addons/website_mail_channel/views/snippets.xml
@@ -23,7 +23,7 @@
                           name="email"
                           class="js_follow_email form-control"
                           placeholder="your email..."/>
-                    <span class="input-group-btn">
+                    <span class="input-group-append">
                         <button href="#" class="btn btn-primary js_follow_btn">Subscribe</button>
                     </span>
                 </div>
diff --git a/addons/website_mail_channel/views/website_mail_channel_templates.xml b/addons/website_mail_channel/views/website_mail_channel_templates.xml
index 18976f29911..72ce7e54446 100644
--- a/addons/website_mail_channel/views/website_mail_channel_templates.xml
+++ b/addons/website_mail_channel/views/website_mail_channel_templates.xml
@@ -60,12 +60,12 @@
                                   name="email"
                                   class="js_follow_email form-control"
                                   placeholder="your email..."/>
-                            <span t-if="'unsubscribe' not in request.params" class="input-group-btn">
+                            <div t-if="'unsubscribe' not in request.params" class="input-group-append">
                                <button href="#" class="btn btn-primary js_follow_btn">Subscribe</button>
-                            </span>
-                            <span t-if="'unsubscribe' in request.params" class="input-group-btn">
+                            </div>
+                            <div t-if="'unsubscribe' in request.params" class="input-group-append">
                                <button href="#" class="btn btn-primary js_follow_btn">Unsubscribe</button>
-                            </span>
+                            </div>
                         </div>
                         <p class="js_mg_details d-none">
                             <span class="js_mg_email d-none"><a href="#" class="js_mg_email"><i class="fa fa-envelope-o"/> send mail</a> - </span>
diff --git a/addons/website_mass_mailing/static/src/js/website_mass_mailing.js b/addons/website_mass_mailing/static/src/js/website_mass_mailing.js
index 352c486e536..517fe9b75c1 100644
--- a/addons/website_mass_mailing/static/src/js/website_mass_mailing.js
+++ b/addons/website_mass_mailing/static/src/js/website_mass_mailing.js
@@ -31,7 +31,7 @@ sAnimation.registry.subscribe = sAnimation.Class.extend({
         // not if editable mode to allow designer to edit alert field
         if (!this.editableMode) {
             $('.js_subscribe > .alert').addClass('d-none');
-            $('.js_subscribe > .input-group-btn.d-none').removeClass('d-none');
+            $('.js_subscribe > .input-group-append.d-none').removeClass('d-none');
             this.$target.find('.js_subscribe_btn').on('click', function (event) {
                 event.preventDefault();
                 self._onClick();
@@ -55,7 +55,7 @@ sAnimation.registry.subscribe = sAnimation.Class.extend({
                 'email': $email.length ? $email.val() : false,
             },
         }).then(function (subscribe) {
-            self.$target.find(".js_subscribe_email, .input-group-btn").addClass('d-none');
+            self.$target.find(".js_subscribe_email, .input-group-append").addClass('d-none');
             self.$target.find(".alert").removeClass('d-none');
             self.$target.find('input.js_subscribe_email').attr("disabled", subscribe ? "disabled" : false);
             self.$target.attr("data-subscribe", subscribe ? 'on' : 'off');
diff --git a/addons/website_mass_mailing/views/snippets_templates.xml b/addons/website_mass_mailing/views/snippets_templates.xml
index 68f5a21d795..c5ba35728e7 100644
--- a/addons/website_mass_mailing/views/snippets_templates.xml
+++ b/addons/website_mass_mailing/views/snippets_templates.xml
@@ -19,7 +19,7 @@
 <template id="s_newsletter_subscribe_form" name="Newsletter">
     <div class="oe_snippet_body input-group js_subscribe" data-list-id="0">
         <input type="email" name="email" class="js_subscribe_email form-control" placeholder="your email..."/>
-        <span class="input-group-btn">
+        <span class="input-group-append">
             <a role="button" href="#" class="btn btn-primary js_subscribe_btn">Subscribe</a>
             <a role="button" href="#" class="btn btn-success js_subscribed_btn d-none" disabled="disabled">Thanks</a>
         </span>
@@ -40,9 +40,9 @@
                     <div class="o_popup_content_dev" data-oe-placeholder="Type Here ..."/>
                     <div class="input-group o_not_editable o_popup_animated o_popup_bounce_del500ms o_popup_bounce_small" >
                         <input type="email" name="email" class="popup_subscribe_email form-control" placeholder="your email..." autofocus="autofocus"/>
-                        <span class="input-group-btn">
+                        <div class="input-group-append">
                             <a role="button" href="#" class="btn btn-success popup_subscribe_btn">Subscribe</a>
-                        </span>
+                        </div>
                     </div>
                 </div>
             </div>
diff --git a/addons/website_quote/views/website_quote_templates.xml b/addons/website_quote/views/website_quote_templates.xml
index 4230b76416c..1191f1001e5 100644
--- a/addons/website_quote/views/website_quote_templates.xml
+++ b/addons/website_quote/views/website_quote_templates.xml
@@ -197,17 +197,21 @@
   <template id="change_quantity" inherit_id="website_quote.pricing" active="False" customize_show="True" name="Change Quantity">
       <xpath expr="//div[@id='quote_qty']" position="replace">
           <div class="input-group oe_website_spinner">
-              <span class="input-group-addon d-print-none">
-                  <a t-attf-href="./update_line/#{ line.id }/?order_id=#{ quotation.id }&amp;remove=True&amp;token=#{ quotation.access_token }" class="mb8 js_update_line_json" aria-label="Remove one" title="Remove one">
-                      <span class="fa fa-minus"/>
-                  </a>
-              </span>
+              <div class="input-group-prepend d-print-none">
+                  <span class="input-group-text">
+                      <a t-attf-href="./update_line/#{ line.id }/?order_id=#{ quotation.id }&amp;remove=True&amp;token=#{ quotation.access_token }" class="mb8 js_update_line_json" aria-label="Remove one" title="Remove one">
+                          <span class="fa fa-minus"/>
+                      </a>
+                  </span>
+              </div>
               <input type="text" class="js_quantity form-control" t-att-data-id="line.id" t-att-value="line.product_uom_qty"/>
-              <span class="input-group-addon d-print-none">
-                  <a t-attf-href="./update_line/#{ line.id }/?order_id=#{ quotation.id }&amp;token=#{ quotation.access_token }" class="mb8 js_update_line_json" aria-label="Add one" title="Add one">
-                      <span class="fa fa-plus"/>
-                  </a>
-              </span>
+              <div class="input-group-append d-print-none">
+                  <span class="input-group-text">
+                      <a t-attf-href="./update_line/#{ line.id }/?order_id=#{ quotation.id }&amp;token=#{ quotation.access_token }" class="mb8 js_update_line_json" aria-label="Add one" title="Add one">
+                          <span class="fa fa-plus"/>
+                      </a>
+                  </span>
+              </div>
           </div>
       </xpath>
   </template>
diff --git a/addons/website_sale/static/src/js/website_sale.js b/addons/website_sale/static/src/js/website_sale.js
index 2e8be99285d..4210c75a1e8 100644
--- a/addons/website_sale/static/src/js/website_sale.js
+++ b/addons/website_sale/static/src/js/website_sale.js
@@ -194,7 +194,7 @@ odoo.define('website_sale.website_sale', function (require) {
         $(oe_website_sale).on('click', 'a.js_add_cart_json', function (ev) {
             ev.preventDefault();
             var $link = $(ev.currentTarget);
-            var $input = $link.parent().find("input");
+            var $input = $link.closest('.input-group').find("input");
             var product_id = +$input.closest('*:has(input[name="product_id"])').find('input[name="product_id"]').val();
             var min = parseFloat($input.data("min") || 0);
             var max = parseFloat($input.data("max") || Infinity);
diff --git a/addons/website_sale/static/src/js/website_sale_tour_buy.js b/addons/website_sale/static/src/js/website_sale_tour_buy.js
index d4a011d3b06..0872f5ae347 100644
--- a/addons/website_sale/static/src/js/website_sale_tour_buy.js
+++ b/addons/website_sale/static/src/js/website_sale_tour_buy.js
@@ -36,7 +36,7 @@ tour.register('shop_buy_product', {
         {
             content: "click on add to cart",
             extra_trigger: 'label:contains(Steel) input:propChecked',
-            trigger: '#product_detail form[action^="/shop/cart/update"] .btn',
+            trigger: '#product_detail form[action^="/shop/cart/update"] .btn-primary',
         },
         {
             content: "add suggested",
diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index c62cadaf2b5..efb7390f14c 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -577,13 +577,17 @@
     <template id="product_quantity" inherit_id="website_sale.product" customize_show="True" name="Select Quantity">
       <xpath expr="//a[@id='add_to_cart']" position="before">
         <div class="css_quantity input-group oe_website_spinner" contenteditable="false">
-            <a t-attf-href="#" class="mb8 input-group-addon js_add_cart_json" aria-label="Remove one" title="Remove one">
-                <i class="fa fa-minus"></i>
-            </a>
+            <div class="input-group-prepend">
+                <a t-attf-href="#" class="btn btn-secondary js_add_cart_json" aria-label="Remove one" title="Remove one">
+                    <i class="fa fa-minus"></i>
+                </a>
+            </div>
             <input type="text" class="form-control quantity" data-min="1" name="add_qty" value="1"/>
-            <a t-attf-href="#" class="mb8 input-group-addon float_left js_add_cart_json" aria-label="Add one" title="Add one">
-                <i class="fa fa-plus"></i>
-            </a>
+            <div class="input-group-append">
+                <a t-attf-href="#" class="btn btn-secondary float_left js_add_cart_json" aria-label="Add one" title="Add one">
+                    <i class="fa fa-plus"></i>
+                </a>
+            </div>
         </div>
       </xpath>
     </template>
@@ -842,13 +846,17 @@
                         </td>
                         <td class="text-center td-qty">
                             <div class="css_quantity input-group oe_website_spinner">
-                                <a t-attf-href="#" class="mb8 input-group-addon 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 class="input-group-prepend">
+                                    <a t-attf-href="#" class="mb8 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>
                                 <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" />
-                                <a t-attf-href="#" class="mb8 input-group-addon 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>
+                                <div class="input-group-append">
+                                    <a t-attf-href="#" class="mb8 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>
+                                </div>
                             </div>
                         </td>
                         <td class="text-center td-price" name="price">
@@ -1007,7 +1015,7 @@
             <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()" />
             <div class="input-group" style='margin-left:auto; margin-right: auto'>
                 <input name="promo" style='min-width:180px' class="form-control" type="text" placeholder="code..." t-att-value="website_sale_order.pricelist_id.code or None" />
-                <div class="input-group-btn">
+                <div class="input-group-append">
                     <a role="button" class="btn btn-secondary a-submit">Apply</a>
                 </div>
             </div>
diff --git a/addons/website_sale_options/views/website_sale_options_templates.xml b/addons/website_sale_options/views/website_sale_options_templates.xml
index 3be328a3d27..25a04697d58 100644
--- a/addons/website_sale_options/views/website_sale_options_templates.xml
+++ b/addons/website_sale_options/views/website_sale_options_templates.xml
@@ -57,13 +57,17 @@
                 </td>
                 <td class="text-center td-qty">
                   <div class="css_quantity input-group oe_website_spinner">
-                      <a t-attf-href="#" class="mb8 input-group-addon 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 class="input-group-prepend">
+                          <a t-attf-href="#" class="btn btn-secondary 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>
                       <input type="text" class="js_quantity form-control quantity" data-min="1" name="add_qty" value="1"/>
-                      <a t-attf-href="#" class="mb8 input-group-addon 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>
+                      <div class="input-group-append">
+                          <a t-attf-href="#" class="btn btn-secondary 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>
+                      </div>
                   </div>
                 </td>
                 <td class="text-center td-price" name="price">
diff --git a/addons/website_sale_stock/views/website_sale_stock_templates.xml b/addons/website_sale_stock/views/website_sale_stock_templates.xml
index a615cd47ed3..95f75c2ff30 100644
--- a/addons/website_sale_stock/views/website_sale_stock_templates.xml
+++ b/addons/website_sale_stock/views/website_sale_stock_templates.xml
@@ -13,9 +13,11 @@
         </xpath>
         <xpath expr="//div[hasclass('css_quantity')]//i[hasclass('fa-plus')]/.." position="replace">
           <t t-if="line._get_stock_warning(clear=False)">
-            <a t-attf-href="#" class="mb8 input-group-addon">
-              <i class='fa fa-warning text-warning' t-att-title="line._get_stock_warning()" role="img" aria-label="Warning"/>
-            </a>
+            <div class="input-group-append">
+                <a t-attf-href="#" class="btn btn-link">
+                  <i class='fa fa-warning text-warning' t-att-title="line._get_stock_warning()" role="img" aria-label="Warning"/>
+                </a>
+            </div>
           </t>
           <t t-else="1">
             <t>$0</t>
@@ -57,4 +59,3 @@
 
 
 </odoo>
-
diff --git a/addons/website_slides/views/website_slides.xml b/addons/website_slides/views/website_slides.xml
index 6bfe1c8cfe7..dbdf5821a03 100644
--- a/addons/website_slides/views/website_slides.xml
+++ b/addons/website_slides/views/website_slides.xml
@@ -110,7 +110,7 @@
                     <form t-attf-action="/slides/#{slug(channel)}" role="search" method="get">
                         <div class="input-group">
                             <input type="text" class="form-control" name="search" t-attf-placeholder="Search in #{channel.name}" t-att-value="search"/>
-                            <span class="input-group-btn">
+                            <span class="input-group-append">
                                 <button class="btn btn-primary" type="submit" aria-label="Search" title="Search">
                                     <i class="fa fa-search"></i>
                                 </button>
@@ -702,7 +702,7 @@
         <form class="form-group oe_slide_js_share_email" role="form">
             <div class="input-group col-lg-6">
                 <input type="email" class="form-control" placeholder="your-friend@domain.com"/>
-                <span class="input-group-btn">
+                <span class="input-group-append">
                     <button class="btn btn-primary" type="button"
                         data-loading-text="Sending..."
                         t-attf-data-slide-id="#{slide.id}"