From 7f10b55a5035bd3cab48ba58a519510a25b94f60 Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Tue, 24 Apr 2018 17:15:00 +0200
Subject: [PATCH] [REF] *: BS4, adapt display classes

The system completely changed. I also had to adapt classes to new
screen breakpoints.

hidden/hide -> d-none
show -> d-block
hidden-xs -> d-none d-md-(block/inline/...)
hidden-sm -> d-md-none d-lg-(block/inline/...)
hidden-md -> d-lg-none d-xl-(block/inline/...)
hidden-lg -> d-xl-none
visible-xs-* -> d-* d-md-none
visible-sm-* -> d-none d-md-* d-lg-none
visible-md-* -> d-none d-lg-* d-xl-none
visible-lg-* -> d-none d-xl-*
hidden-print -> d-print-none
visible-print-* -> d-none d-print-*
...
and all possible combination of those had to be handled too.
---
 .../reconciliation/reconciliation_renderer.js |  6 +-
 .../src/xml/account_dashboard_setup_bar.xml   |  2 +-
 .../static/src/xml/account_reconciliation.xml | 12 ++--
 .../views/account_portal_templates.xml        | 18 ++---
 addons/account/views/report_invoice.xml       | 20 +++---
 .../src/js/account_bank_statement_import.js   |  2 +-
 .../views/account_portal_templates.xml        | 12 ++--
 .../static/src/js/import_action.js            | 16 ++---
 .../static/src/xml/base_import.xml            | 10 +--
 .../static/src/scss/hr_attendance.scss        |  2 +-
 .../static/src/xml/attendance.xml             |  4 +-
 .../im_livechat/static/src/js/im_livechat.js  |  2 +-
 addons/mail/static/src/xml/composer.xml       |  4 +-
 addons/mail/static/src/xml/discuss.xml        | 16 ++---
 addons/mail/static/src/xml/followers.xml      |  2 +-
 .../static/src/js/mass_mailing_editor.js      |  2 +-
 .../mass_mailing/views/editor_field_html.xml  |  2 +-
 .../static/src/js/systray_activity_menu.js    |  6 +-
 addons/note/static/src/xml/systray.xml        |  2 +-
 .../tests/systray_activity_menu_tests.js      | 14 ++--
 addons/pad/static/src/js/pad.js               |  4 +-
 addons/pad/static/src/xml/pad.xml             |  2 +-
 addons/payment/static/src/js/payment_form.js  | 12 ++--
 .../payment/static/src/js/payment_portal.js   |  4 +-
 addons/payment/views/payment_templates.xml    | 14 ++--
 .../views/payment_adyen_templates.xml         |  6 +-
 .../views/payment_authorize_templates.xml     | 60 ++++++++--------
 .../views/payment_buckaroo_templates.xml      | 10 +--
 .../views/payment_ogone_templates.xml         | 40 +++++------
 .../views/payment_paypal_templates.xml        |  8 +--
 .../views/payment_stripe_templates.xml        | 30 ++++----
 .../views/payment_transfer_templates.xml      |  8 +--
 .../static/src/js/pos.web_editor.js           |  4 +-
 addons/point_of_sale/views/pos_templates.xml  |  6 +-
 .../portal/static/src/xml/portal_chatter.xml  | 10 +--
 addons/portal/views/portal_templates.xml      | 14 ++--
 addons/project/static/src/js/project.js       |  4 +-
 addons/project/static/src/xml/project.xml     |  2 +-
 .../views/project_rating_templates.xml        |  2 +-
 .../sale/views/res_config_settings_views.xml  |  2 +-
 addons/sale/views/sale_portal_templates.xml   | 20 +++---
 addons/stock/views/stock_picking_views.xml    |  2 +-
 addons/survey/static/src/js/survey_result.js  |  8 +--
 addons/survey/views/survey_result.xml         | 10 +--
 .../src/js/views/pivot/pivot_renderer.js      |  4 +-
 .../src/js/widgets/model_field_selector.js    |  6 +-
 addons/web/static/src/scss/report.scss        |  2 +-
 addons/web/static/src/xml/base.xml            | 12 ++--
 addons/web/static/src/xml/web_calendar.xml    |  2 +-
 .../static/src/js/editor/rte.summernote.js    | 20 +++---
 .../static/src/js/editor/snippets.editor.js   | 18 ++---
 .../static/src/js/editor/snippets.options.js  | 10 +--
 .../static/src/js/editor/translator.js        |  2 +-
 addons/web_editor/static/src/js/inline.js     |  2 +-
 .../web_editor/static/src/js/widgets/ace.js   | 12 ++--
 .../static/src/js/widgets/widgets.js          | 16 ++---
 addons/web_editor/static/src/xml/ace.xml      |  4 +-
 addons/web_editor/static/src/xml/editor.xml   | 22 +++---
 addons/web_editor/static/src/xml/snippets.xml |  2 +-
 addons/web_editor/views/snippets.xml          |  2 +-
 addons/website/data/website_demo.xml          |  8 +--
 .../src/js/content/snippets.animation.js      |  2 +-
 .../static/src/js/editor/rte.summernote.js    |  2 +-
 .../static/src/js/editor/snippets.options.js  |  6 +-
 addons/website/static/src/js/menu/content.js  | 12 ++--
 .../static/src/xml/website.backend.xml        |  4 +-
 .../website/static/src/xml/website.editor.xml |  4 +-
 .../static/src/xml/website.facebook_page.xml  |  2 +-
 addons/website/views/snippets.xml             |  8 +--
 .../views/website_navbar_templates.xml        |  4 +-
 addons/website/views/website_templates.xml    |  2 +-
 .../static/src/js/website_blog.editor.js      |  4 +-
 .../views/website_blog_templates.xml          |  4 +-
 .../website_event/views/event_templates.xml   | 18 ++---
 .../views/event_templates.xml                 |  2 +-
 .../views/event_track_templates.xml           |  2 +-
 addons/website_forum/views/website_forum.xml  |  2 +-
 .../static/src/js/website_gengo.js            |  8 +--
 .../static/src/xml/website.gengo.xml          |  4 +-
 .../website_hr_recruitment_templates.xml      |  2 +-
 .../views/website_links_graphs.xml            |  8 +--
 .../views/website_links_template.xml          | 12 ++--
 addons/website_mail/static/src/js/follow.js   | 12 ++--
 .../src/js/website_mail_channel.editor.js     |  2 +-
 .../src/js/website_mail_channel.snippet.js    | 28 ++++----
 .../website_mail_channel/views/snippets.xml   |  6 +-
 .../views/website_mail_channel_templates.xml  |  4 +-
 .../src/js/website_mass_mailing.editor.js     |  2 +-
 .../static/src/js/website_mass_mailing.js     | 16 ++---
 .../views/snippets_templates.xml              |  4 +-
 .../views/website_quote_templates.xml         | 22 +++---
 .../static/src/js/website_sale.js             | 14 ++--
 .../static/src/scss/website_sale.scss         | 24 -------
 addons/website_sale/views/templates.xml       | 72 +++++++++----------
 .../static/src/xml/comparison.xml             |  2 +-
 .../website_sale_comparison_template.xml      |  4 +-
 .../static/src/js/website_sale_delivery.js    |  6 +-
 .../views/website_sale_delivery_templates.xml |  4 +-
 .../static/src/js/website_sale.js             | 12 ++--
 .../views/website_sale_options_templates.xml  | 22 +++---
 .../static/src/js/website_sale_wishlist.js    |  4 +-
 .../views/website_sale_wishlist_template.xml  |  4 +-
 .../website_slides/views/website_slides.xml   |  2 +-
 .../views/website_slides_embed.xml            |  2 +-
 .../static/src/js/website.twitter.editor.js   |  6 +-
 odoo/addons/base/views/onboarding_views.xml   |  4 +-
 .../base/views/res_config_settings_views.xml  |  2 +-
 107 files changed, 474 insertions(+), 498 deletions(-)

diff --git a/addons/account/static/src/js/reconciliation/reconciliation_renderer.js b/addons/account/static/src/js/reconciliation/reconciliation_renderer.js
index c071c612059..a66b02fa853 100644
--- a/addons/account/static/src/js/reconciliation/reconciliation_renderer.js
+++ b/addons/account/static/src/js/reconciliation/reconciliation_renderer.js
@@ -343,9 +343,9 @@ var LineRenderer = Widget.extend(FieldManagerMixin, {
     update: function (state) {
         var self = this;
         // isValid
-        this.$('caption .o_buttons button.o_validate').toggleClass('hidden', !!state.balance.type);
-        this.$('caption .o_buttons button.o_reconcile').toggleClass('hidden', state.balance.type <= 0);
-        this.$('caption .o_buttons .o_no_valid').toggleClass('hidden', state.balance.type >= 0);
+        this.$('caption .o_buttons button.o_validate').toggleClass('d-none', !!state.balance.type);
+        this.$('caption .o_buttons button.o_reconcile').toggleClass('d-none', state.balance.type <= 0);
+        this.$('caption .o_buttons .o_no_valid').toggleClass('d-none', state.balance.type >= 0);
 
         // partner_id
         this._makePartnerRecord(state.st_line.partner_id, state.st_line.partner_name).then(function (recordID) {
diff --git a/addons/account/static/src/xml/account_dashboard_setup_bar.xml b/addons/account/static/src/xml/account_dashboard_setup_bar.xml
index 8b065bc7829..47f5b580c41 100644
--- a/addons/account/static/src/xml/account_dashboard_setup_bar.xml
+++ b/addons/account/static/src/xml/account_dashboard_setup_bar.xml
@@ -2,7 +2,7 @@
 <templates>
     <!-- This template defines the setup bar, at the top of account module's dashboard -->
     <t t-name="account.AccountDashboardSetupBar">
-        <div class="o_account_dashboard_header hidden-xs o_form_view" t-if="values['show_setup_bar']">
+        <div class="o_account_dashboard_header d-none d-md-block o_form_view" t-if="values['show_setup_bar']">
             <div class="o_form_statusbar">
                 <div class="o_statusbar_status" data-original-title="" title="" >
                     <button name="setting_chart_of_accounts_action" type="company_object" t-attf-class="btn btn-sm o_arrow_button btn-default account_setup_dashboard_action #{values['chart_of_accounts'] and 'o_action_done' or ''}" >
diff --git a/addons/account/static/src/xml/account_reconciliation.xml b/addons/account/static/src/xml/account_reconciliation.xml
index 7595bb06c86..d5c77c19b9e 100644
--- a/addons/account/static/src/xml/account_reconciliation.xml
+++ b/addons/account/static/src/xml/account_reconciliation.xml
@@ -74,9 +74,9 @@
         <table class="accounting_view">
             <caption>
                 <div class="pull-right o_buttons">
-                    <button t-attf-class="o_validate btn btn-default btn-sm #{!state.balance.type ? '' : 'hidden'}">Validate</button>
-                    <button t-attf-class="o_reconcile btn btn-primary btn-sm #{state.balance.type &gt; 0 ? '' : 'hidden'}">Reconcile</button>
-                    <span t-attf-class="o_no_valid text-danger #{state.balance.type &lt; 0 ? '' : 'hidden'}">Select a partner or choose a counterpart</span>
+                    <button t-attf-class="o_validate btn btn-default btn-sm #{!state.balance.type ? '' : 'd-none'}">Validate</button>
+                    <button t-attf-class="o_reconcile btn btn-primary btn-sm #{state.balance.type &gt; 0 ? '' : 'd-none'}">Reconcile</button>
+                    <span t-attf-class="o_no_valid text-danger #{state.balance.type &lt; 0 ? '' : 'd-none'}">Select a partner or choose a counterpart</span>
                 </div>
             </caption>
             <thead>
@@ -107,9 +107,9 @@
 <t t-name="reconciliation.manual.line" t-extend="reconciliation.line">
     <t t-jquery=".o_buttons" t-operation="replace">
         <div class="pull-right o_buttons">
-            <button t-attf-class="o_validate btn btn-default btn-sm #{!state.balance.type ? '' : 'hidden'}">Reconcile</button>
-            <button t-attf-class="o_reconcile btn btn-primary btn-sm #{state.balance.type &gt; 0 ? '' : 'hidden'}">Reconcile</button>
-            <button t-attf-class="o_no_valid btn btn-default btn-sm #{state.balance.type &lt; 0 ? '' : 'hidden'}">Skip</button>
+            <button t-attf-class="o_validate btn btn-default btn-sm #{!state.balance.type ? '' : 'd-none'}">Reconcile</button>
+            <button t-attf-class="o_reconcile btn btn-primary btn-sm #{state.balance.type &gt; 0 ? '' : 'd-none'}">Reconcile</button>
+            <button t-attf-class="o_no_valid btn btn-default btn-sm #{state.balance.type &lt; 0 ? '' : 'd-none'}">Skip</button>
         </div>
     </t>
     <t t-jquery=".accounting_view tbody" t-operation="append">
diff --git a/addons/account/views/account_portal_templates.xml b/addons/account/views/account_portal_templates.xml
index b4420bdbd29..93a1bb91e8a 100644
--- a/addons/account/views/account_portal_templates.xml
+++ b/addons/account/views/account_portal_templates.xml
@@ -34,7 +34,7 @@
                   <tr class="active">
                     <th>Invoice #</th>
                     <th>Invoice Date</th>
-                    <th class='hidden-xs'>Due Date</th>
+                    <th class='d-none d-md-table-cell'>Due Date</th>
                     <th></th>
                     <th>Amount Due</th>
                   </tr>
@@ -45,16 +45,16 @@
                             <a t-attf-href="/my/invoices/#{invoice.id}" t-att-title="invoice.number"><t t-esc="invoice.number"/></a>
                         </td>
                         <td><span t-field="invoice.date_invoice"/></td>
-                        <td class='hidden-xs'><span t-field="invoice.date_due"/></td>
+                        <td class='d-none d-md-table-cell'><span t-field="invoice.date_due"/></td>
                         <td class="tx_status">
                             <t t-if="invoice.state == 'open'">
-                                <span class="label label-info"><i class="fa fa-fw fa-clock-o" aria-label="Opened" title="Opened" role="img"></i><span class="hidden-xs"> Waiting for Payment</span></span>
+                                <span class="label label-info"><i class="fa fa-fw fa-clock-o" aria-label="Opened" title="Opened" role="img"></i><span class="d-none d-md-inline"> Waiting for Payment</span></span>
                             </t>
                             <t t-if="invoice.state == 'paid'">
-                                <span class="label label-default"><i class="fa fa-fw fa-check" aria-label="Paid" title="Paid" role="img"></i><span class="hidden-xs"> Paid</span></span>
+                                <span class="label label-default"><i class="fa fa-fw fa-check" aria-label="Paid" title="Paid" role="img"></i><span class="d-none d-md-inline"> Paid</span></span>
                             </t>
                             <t t-if="invoice.state == 'cancel'">
-                                <span class="label label-default"><i class="fa fa-fw fa-remove" aria-label="Cancelled" title="Cancelled" role="img"></i><span class="hidden-xs"> Cancelled</span></span>
+                                <span class="label label-default"><i class="fa fa-fw fa-remove" aria-label="Cancelled" title="Cancelled" role="img"></i><span class="d-none d-md-inline"> Cancelled</span></span>
                             </t>
                         </td>
                         <td><span t-esc="-invoice.residual if invoice.type == 'out_refund' else invoice.residual" t-options='{"widget": "monetary", "display_currency": invoice.currency_id}'/></td>
@@ -72,7 +72,7 @@
         <xpath expr="//div[hasclass('o_portal_sidebar')]" position="inside">
             <div class="row mt16 o_portal_invoice_sidebar">
                 <!-- Sidebar -->
-                <div class="col-md-3 hidden-print">
+                <div class="col-md-3 d-print-none">
                     <div class="bs-sidebar mb16" id="sidebar_content">
                         <div class="text-center pt16 o_account_portal_sidebar">
                             <h2 class="media-heading">
@@ -86,7 +86,7 @@
                         <div class="o_payment_button">
                             <div class="text-center mb8 ml16 mr16 o_download_pdf">
                                 <a class="btn btn-default btn-block btn-sm o_download_btn" t-att-href="'/my/invoices/pdf/%s?%s' % (invoice.id, keep_query())" title="Download"><i class="fa fa-download"/> Download</a>
-                                <a class="btn btn-default btn-block btn-sm hidden-xs hidden-sm o_print_btn o_portal_invoice_print" t-att-href="'/my/invoices/pdf/%s?%s&amp;print=true' % (invoice.id, keep_query())" id="print_invoice_report" title="Print"><i class="fa fa-print"/> Print</a>
+                                <a class="btn btn-default btn-block btn-sm d-none d-lg-inline-block o_print_btn o_portal_invoice_print" t-att-href="'/my/invoices/pdf/%s?%s&amp;print=true' % (invoice.id, keep_query())" id="print_invoice_report" title="Print"><i class="fa fa-print"/> Print</a>
                             </div>
                         </div>
                         <hr t-if="invoice.user_id" class="mt0 mb0"/>
@@ -102,13 +102,13 @@
                                 <a data-toggle="modal" href="#" data-target="#invoice_chatter">Contact us</a>
                             </div>
                         </div>
-                        <div class="text-center hidden-xs mt4 o_portal_brand">
+                        <div class="text-center d-none d-md-block mt4 o_portal_brand">
                             Powered by <a target="_blank" href="http://www.odoo.com">Odoo</a>
                         </div>
                     </div>
                 </div>
                 <!-- Page Content -->
-                <div id="invoice_content" class="col-md-9 o_portal_page_content hidden-print">
+                <div id="invoice_content" class="col-md-9 o_portal_page_content d-print-none">
                     <t t-if="error or warning" t-call="account.portal_invoice_error"/>
                     <t t-if="success and (not error and not warning)" t-call="account.portal_invoice_success"/>
                     <div class="o_portal_html_view">
diff --git a/addons/account/views/report_invoice.xml b/addons/account/views/report_invoice.xml
index 65c92051094..acb0e3a29f3 100644
--- a/addons/account/views/report_invoice.xml
+++ b/addons/account/views/report_invoice.xml
@@ -63,15 +63,15 @@
                             <tr>
                                 <t t-set="colspan" t-value="6"/>
                                 <th>Description</th>
-                                <th class="hidden">Source Document</th>
+                                <th class="d-none">Source Document</th>
                                 <th class="text-right">Quantity</th>
-                                <th class="text-right hidden-xs">Unit Price</th>
-                                <th t-if="display_discount" class="text-right hidden-xs">
+                                <th class="text-right d-none d-md-table-cell">Unit Price</th>
+                                <th t-if="display_discount" class="text-right d-none d-md-table-cell">
                                     <span>Disc.(%)</span>
                                     <t t-set="colspan" t-value="colspan+1"/>
                                 </th>
-                                <th class="text-right hidden-xs">Taxes</th>
-                                <th t-if="display_taxamount and type_is_out" class="text-right hidden-xs">
+                                <th class="text-right d-none d-md-table-cell">Taxes</th>
+                                <th t-if="display_taxamount and type_is_out" class="text-right d-none d-md-table-cell">
                                     <span>Tax Amount</span>
                                     <t t-set="colspan" t-value="colspan+1"/>
                                 </th>
@@ -92,21 +92,21 @@
                                 <tr t-attf-class="{{ 'o_is_' + line.display_type if line.display_type else '' }}">
                                     <t t-if="not line.display_type" name="account_invoice_line_accountable">
                                         <td name="account_invoice_line_name"><span t-field="line.name"/></td>
-                                        <td class="hidden"><span t-field="line.origin"/></td>
+                                        <td class="d-none"><span t-field="line.origin"/></td>
                                         <td class="text-right">
                                             <span t-field="line.quantity"/>
                                             <span t-field="line.uom_id"  groups="uom.group_uom"/>
                                         </td>
-                                        <td class="text-right hidden-xs">
+                                        <td class="text-right d-none d-md-table-cell">
                                             <span t-field="line.price_unit"/>
                                         </td>
-                                        <td t-if="display_discount" class="text-right hidden-xs">
+                                        <td t-if="display_discount" class="text-right d-none d-md-table-cell">
                                             <span t-field="line.discount"/>
                                         </td>
-                                        <td class="text-right hidden-xs">
+                                        <td class="text-right d-none d-md-table-cell">
                                             <span t-esc="', '.join(map(lambda x: (x.description or x.name), line.invoice_line_tax_ids))"/>
                                         </td>
-                                        <td t-if="display_taxamount and type_is_out" class="text-right hidden-xs">
+                                        <td t-if="display_taxamount and type_is_out" class="text-right d-none d-md-table-cell">
                                             <t t-set="taxes"
                                                t-value="line.invoice_line_tax_ids.compute_all(line.price_unit, line.currency_id, line.quantity)"/>
                                             <t t-set="tax_amount"
diff --git a/addons/account_bank_statement_import/static/src/js/account_bank_statement_import.js b/addons/account_bank_statement_import/static/src/js/account_bank_statement_import.js
index aa10f6c78e5..e76bb349506 100644
--- a/addons/account_bank_statement_import/static/src/js/account_bank_statement_import.js
+++ b/addons/account_bank_statement_import/static/src/js/account_bank_statement_import.js
@@ -11,7 +11,7 @@ BaseImport.DataImport.include({
         this._super();
         if (this.res_model == 'account.bank.statement') {
             this.$(".import-link").prop({"text": _t(" Import Template for Bank Statements"), "href": "/account_bank_statement_import/static/csv/account.bank.statement.csv"});
-            this.$(".template-import").removeClass("hidden");
+            this.$(".template-import").removeClass('d-none');
         }
     },   
 });
diff --git a/addons/account_payment/views/account_portal_templates.xml b/addons/account_payment/views/account_portal_templates.xml
index 4e8314d9f20..c0232e82f57 100644
--- a/addons/account_payment/views/account_portal_templates.xml
+++ b/addons/account_payment/views/account_portal_templates.xml
@@ -9,7 +9,7 @@
                 <t t-set="pending_manual_txs" t-value="tx_ids.filtered(lambda tx: tx.state == 'pending' and tx.acquirer_id.provider in ('transfer', 'manual'))"/>
                 <a t-if="invoice.state == 'open' and invoice.amount_total and invoice.type == 'out_invoice' and (pending_manual_txs or not tx_ids)"
                     t-att-href="'/my/invoices/%s#portal_pay' % invoice.id" title="Pay now" aria-label="Pay now" class="btn btn-xs btn-primary" role="button">
-                    <i class="fa fa-arrow-circle-right"/><span class='hidden-xs'> Pay Now</span>
+                    <i class="fa fa-arrow-circle-right"/><span class='d-none d-md-inline'> Pay Now</span>
                 </a>
             </td>
         </xpath>
@@ -17,19 +17,19 @@
             <t t-set="last_tx" t-value="invoice.get_portal_last_transaction()"/>
             <td class="tx_status">
                 <t t-if="invoice.state == 'open' and (last_tx.state not in ['pending', 'authorized', 'done', 'cancel'] or (last_tx.state == 'pending' and last_tx.acquirer_id.provider in ('transfer', 'manual')))">
-                    <span class="label label-info"><i class="fa fa-fw fa-clock-o"></i><span class="hidden-xs"> Waiting for Payment</span></span>
+                    <span class="label label-info"><i class="fa fa-fw fa-clock-o"></i><span class="d-none d-md-inline"> Waiting for Payment</span></span>
                 </t>
                 <t t-if="invoice.state == 'open' and last_tx.state == 'authorized'">
-                    <span class="label label-success"><i class="fa fa-fw fa-check"/><span class="hidden-xs"> Authorized</span></span>
+                    <span class="label label-success"><i class="fa fa-fw fa-check"/><span class="d-none d-md-inline"> Authorized</span></span>
                 </t>
                 <t t-if="invoice.state == 'open' and last_tx.state == 'pending' and last_tx.acquirer_id.provider not in ('transfer', 'manual')">
-                  <span class="label label-warning"><span class="hidden-xs"> Pending</span></span>
+                  <span class="label label-warning"><span class="d-none d-md-inline"> Pending</span></span>
                 </t>
                 <t t-if="invoice.state == 'paid' or last_tx.state == 'done'">
-                    <span class="label label-default"><i class="fa fa-fw fa-check"></i><span class="hidden-xs"> Paid</span></span>
+                    <span class="label label-default"><i class="fa fa-fw fa-check"></i><span class="d-none d-md-inline"> Paid</span></span>
                 </t>
                 <t t-if="invoice.state == 'cancel'">
-                    <span class="label label-default"><i class="fa fa-fw fa-remove"></i><span class="hidden-xs"> Cancelled</span></span>
+                    <span class="label label-default"><i class="fa fa-fw fa-remove"></i><span class="d-none d-md-inline"> Cancelled</span></span>
                 </t>
             </td>
         </xpath>
diff --git a/addons/base_import/static/src/js/import_action.js b/addons/base_import/static/src/js/import_action.js
index 68dc6c663fa..44db3151e32 100644
--- a/addons/base_import/static/src/js/import_action.js
+++ b/addons/base_import/static/src/js/import_action.js
@@ -249,7 +249,7 @@ var DataImport = AbstractAction.extend(ControlPanelMixin, {
     //- File & settings change section
     onfile_loaded: function () {
         var file = this.$('.oe_import_file')[0].files[0];
-        this.$buttons.filter('.o_import_import, .o_import_validate, .o_import_file_reload').addClass('hidden');
+        this.$buttons.filter('.o_import_import, .o_import_validate, .o_import_file_reload').addClass('d-none');
         if (!this.$('input.oe_import_file').val()) { return this['settings_changed'](); }
         this.$('.oe_import_date_format').val('');
         this.$('.oe_import_datetime_format').val('');
@@ -268,7 +268,7 @@ var DataImport = AbstractAction.extend(ControlPanelMixin, {
     },
     onpreviewing: function () {
         var self = this;
-        this.$buttons.filter('.o_import_import, .o_import_validate, .o_import_file_reload').addClass('hidden');
+        this.$buttons.filter('.o_import_import, .o_import_validate, .o_import_file_reload').addClass('d-none');
         this.$el.addClass('oe_import_with_file');
         // TODO: test that write // succeeded?
         this.$el.removeClass('oe_import_preview_error oe_import_error');
@@ -287,10 +287,10 @@ var DataImport = AbstractAction.extend(ControlPanelMixin, {
     },
     onpreview_error: function (event, from, to, result) {
         this.$('.oe_import_options').show();
-        this.$buttons.filter('.o_import_file_reload').removeClass('hidden');
+        this.$buttons.filter('.o_import_file_reload').removeClass('d-none');
         this.$el.addClass('oe_import_preview_error oe_import_error');
-        this.$el.find('.oe_import_box, .oe_import_with_file').removeClass('hidden');
-        this.$el.find('.o_view_nocontent').addClass('hidden');
+        this.$el.find('.oe_import_box, .oe_import_with_file').removeClass('d-none');
+        this.$el.find('.o_view_nocontent').addClass('d-none');
         this.$('.oe_import_error_report').html(
                 QWeb.render('ImportView.preview.error', result));
     },
@@ -300,9 +300,9 @@ var DataImport = AbstractAction.extend(ControlPanelMixin, {
             .text(_t('Load New File'))
             .removeClass('btn-primary').addClass('btn-default')
             .blur();
-        this.$buttons.filter('.o_import_import, .o_import_validate, .o_import_file_reload').removeClass('hidden');
-        this.$el.find('.oe_import_box, .oe_import_with_file').removeClass('hidden');
-        this.$el.find('.o_view_nocontent').addClass('hidden');
+        this.$buttons.filter('.o_import_import, .o_import_validate, .o_import_file_reload').removeClass('d-none');
+        this.$el.find('.oe_import_box, .oe_import_with_file').removeClass('d-none');
+        this.$el.find('.o_view_nocontent').addClass('d-none');
         this.$el.addClass('oe_import_preview');
         this.$('input.oe_import_advanced_mode').prop('checked', result.advanced_mode);
         this.$('.oe_import_grid').html(QWeb.render('ImportView.preview', result));
diff --git a/addons/base_import/static/src/xml/base_import.xml b/addons/base_import/static/src/xml/base_import.xml
index df9fbc3e5d1..95b54b5a5af 100644
--- a/addons/base_import/static/src/xml/base_import.xml
+++ b/addons/base_import/static/src/xml/base_import.xml
@@ -6,7 +6,7 @@
             <input type="hidden" name="session_id"
                t-att-value="widget.session.session_id"/>
             <input type="hidden" name="import_id"/>
-            <div class="oe_import_box col-md-12 hidden">
+            <div class="oe_import_box col-md-12 d-none">
                 <input accept=".csv, .xls, .xlsx, .xlsm, .ods" t-attf-id="file_#{_id}"
                       name="file" class="oe_import_file" type="file" style="display:none;"/>
                 <div class="oe_import_with_file">
@@ -35,7 +35,7 @@
                 </div>
             </div>
 
-            <div class="oe_import_with_file oe_padding col-sm-12 hidden">
+            <div class="oe_import_with_file oe_padding col-sm-12 d-none">
                 <h2>Map your columns to import</h2>
                 <div title="If the model uses openchatter, history tracking
                             will set up subscriptions and send notifications
@@ -93,10 +93,10 @@
     </t>
 
     <t t-name="ImportView.buttons">
-        <button type="button" class="btn btn-sm btn-primary o_import_import hidden">Import</button>
-        <button type="button" class="btn btn-sm btn-default o_import_validate hidden">Test Import</button>
+        <button type="button" class="btn btn-sm btn-primary o_import_import d-none">Import</button>
+        <button type="button" class="btn btn-sm btn-default o_import_validate d-none">Test Import</button>
         <button type="button" class="btn btn-sm btn-primary oe_import_file">Load File</button>
-        <button type="button" class="btn btn-sm btn-default o_import_file_reload hidden">Reload File</button>
+        <button type="button" class="btn btn-sm btn-default o_import_file_reload d-none">Reload File</button>
         <button type="button" class="btn btn-sm btn-default o_import_cancel">Cancel</button>
     </t>
 
diff --git a/addons/hr_attendance/static/src/scss/hr_attendance.scss b/addons/hr_attendance/static/src/scss/hr_attendance.scss
index c0f83d1f33e..a129850cc8c 100644
--- a/addons/hr_attendance/static/src/scss/hr_attendance.scss
+++ b/addons/hr_attendance/static/src/scss/hr_attendance.scss
@@ -109,7 +109,7 @@
             }
         }
 
-        .hidden-xs.btn-default {
+        .d-none.d-md-inline-block.btn-default {
             transform: translate(-50%, -50%);
             @include o-position-absolute(0, $left:0);
             width: 2em;
diff --git a/addons/hr_attendance/static/src/xml/attendance.xml b/addons/hr_attendance/static/src/xml/attendance.xml
index 264d13a4780..87916d62795 100644
--- a/addons/hr_attendance/static/src/xml/attendance.xml
+++ b/addons/hr_attendance/static/src/xml/attendance.xml
@@ -60,8 +60,8 @@
             <div class="o_hr_attendance_kiosk_mode">
                 <t t-set="checked_in" t-value="widget.employee_state=='checked_in'"/>
                 <div class="o_hr_attendance_back_button">
-                    <span class="btn btn-default btn-lg visible-xs"><i class="fa fa-chevron-left mr8"/> Go back</span>
-                    <span class="btn btn-default hidden-xs"><i class="fa fa-chevron-left" role="img" aria-label="Go back" title="Go back"/></span>
+                    <span class="btn btn-default btn-lg d-block d-md-none"><i class="fa fa-chevron-left mr8"/> Go back</span>
+                    <span class="btn btn-default d-none d-md-inline-block"><i class="fa fa-chevron-left" role="img" aria-label="Go back" title="Go back"/></span>
                 </div>
                 <t t-if="widget.employee_id">
                     <div class="o_hr_attendance_user_badge o_home_menu_background">
diff --git a/addons/im_livechat/static/src/js/im_livechat.js b/addons/im_livechat/static/src/js/im_livechat.js
index a88dd98dde5..760ec9166be 100644
--- a/addons/im_livechat/static/src/js/im_livechat.js
+++ b/addons/im_livechat/static/src/js/im_livechat.js
@@ -43,7 +43,7 @@ if (!_.contains(urlHistory, page)) {
 }
 
 var LivechatButton = Widget.extend({
-    className:'openerp o_livechat_button hidden-print',
+    className:'openerp o_livechat_button d-print-none',
     events: {
         'click': '_openChat'
     },
diff --git a/addons/mail/static/src/xml/composer.xml b/addons/mail/static/src/xml/composer.xml
index f7baafeb777..849a37ae3d1 100644
--- a/addons/mail/static/src/xml/composer.xml
+++ b/addons/mail/static/src/xml/composer.xml
@@ -20,9 +20,9 @@
              <div class="o_composer_attachments_list"/>
          </div>
          <div class="o_composer_send">
-             <button tabindex="3" class="btn btn-sm btn-primary o_composer_button_send hidden-xs" type="button"><t t-esc="widget.options.sendText"/></button>
+             <button tabindex="3" class="btn btn-sm btn-primary o_composer_button_send d-none d-md-inline-block" type="button"><t t-esc="widget.options.sendText"/></button>
          </div>
-         <span class="hide">
+         <span class="d-none">
             <t t-call="HiddenInputFile">
                 <t t-set="fileupload_id" t-value="widget.fileuploadID"/>
                 <t t-set="fileupload_action" t-translation="off">/web/binary/upload_attachment</t>
diff --git a/addons/mail/static/src/xml/discuss.xml b/addons/mail/static/src/xml/discuss.xml
index f66efe67afe..bb62bed5cca 100644
--- a/addons/mail/static/src/xml/discuss.xml
+++ b/addons/mail/static/src/xml/discuss.xml
@@ -84,7 +84,7 @@
         @param {integer} counter
     -->
     <t t-name="mail.discuss.SidebarCounter">
-        <span t-attf-class="o_mail_sidebar_needaction badge #{(!counter ? 'hide' : '')}">
+        <span t-attf-class="o_mail_sidebar_needaction badge #{(!counter ? 'd-none' : '')}">
             <t t-esc="counter"/>
         </span>
     </t>
@@ -149,7 +149,7 @@
                 <span t-attf-class="fa fa-cog o_mail_channel_settings"
                       title="Channel settings" role="img" aria-label="Channel settings" t-att-data-thread-id="thread.getID()"/>
                 <t t-call="mail.discuss.SidebarCounter"/>
-                <span t-if="!thread.isGroupBasedSubscription()" t-attf-class="fa fa-times o_mail_partner_unpin #{counter ? 'hide' : ''}"
+                <span t-if="!thread.isGroupBasedSubscription()" t-attf-class="fa fa-times o_mail_partner_unpin #{counter ? 'd-none' : ''}"
                       title="Leave this channel" role="img" aria-label="Leave this channel" t-att-data-thread-id="thread.getID()"/>
             </div>
         </t>
@@ -181,11 +181,11 @@
     -->
     <t t-name="mail.discuss.ControlButtons">
         <div>
-            <button type="button" class="btn btn-primary btn-sm o_mail_discuss_button_invite hidden-xs" title="Invite people">Invite</button>
-            <button type="button" class="btn btn-default btn-sm o_mail_discuss_button_mark_all_read hidden-xs" title="Mark all as read">Mark all read</button>
+            <button type="button" class="btn btn-primary btn-sm o_mail_discuss_button_invite d-none d-md-inline-block" title="Invite people">Invite</button>
+            <button type="button" class="btn btn-default btn-sm o_mail_discuss_button_mark_all_read d-none d-md-inline-block" title="Mark all as read">Mark all read</button>
             <button type="button" class="btn btn-default btn-sm o_mail_discuss_button_unstar_all" title="Unstar all messages">Unstar all</button>
-            <button type="button" class="btn btn-default btn-sm o_mail_discuss_button_dm visible-xs" title="New Message">New Message</button>
-            <button t-if="!disableAddThread" type="button" class="btn btn-default btn-sm o_mail_discuss_button_public o_mail_discuss_button_private visible-xs" title="New Channel">New Channel</button>
+            <button type="button" class="btn btn-default btn-sm o_mail_discuss_button_dm d-block d-md-none" title="New Message">New Message</button>
+            <button t-if="!disableAddThread" type="button" class="btn btn-default btn-sm o_mail_discuss_button_public o_mail_discuss_button_private d-block d-md-none" title="New Channel">New Channel</button>
             <button type="button" class="btn btn-default btn-sm o_hidden o_mail_discuss_button_select_all" title="Select all messages to moderate">Select All</button>
             <button type="button" class="btn btn-default btn-sm o_hidden o_mail_discuss_button_unselect_all" title="Unselect all messages to moderate">Unselect All</button>
             <button type="button" data-decision="accept" class="btn btn-default btn-sm o_mail_discuss_button_moderate_all" title="Accept selected messages">Accept</button>
@@ -208,10 +208,10 @@
     <t t-name="mail.discuss_mobile">
         <div class="o_mail_discuss">
             <div class="o_mail_discuss_mobile_mailboxes_buttons">
-                <button type="button" class="btn btn-primary btn-sm visible-xs-inline o_mailbox_inbox_item" title="Inbox" data-type="mailbox_inbox">
+                <button type="button" class="btn btn-primary btn-sm d-inline d-md-none o_mailbox_inbox_item" title="Inbox" data-type="mailbox_inbox">
                     Inbox
                 </button>
-                <button type="button" class="btn btn-default btn-sm visible-xs-inline o_mailbox_inbox_item" title="Starred" data-type="mailbox_starred">
+                <button type="button" class="btn btn-default btn-sm d-inline d-md-none o_mailbox_inbox_item" title="Starred" data-type="mailbox_starred">
                     Starred
                 </button>
             </div>
diff --git a/addons/mail/static/src/xml/followers.xml b/addons/mail/static/src/xml/followers.xml
index ae002a3c8ee..add787b7e03 100644
--- a/addons/mail/static/src/xml/followers.xml
+++ b/addons/mail/static/src/xml/followers.xml
@@ -42,7 +42,7 @@
                t-att-title="record.name"
                t-att-data-oe-model="record.res_model"
                t-att-data-oe-id="record.res_id"><t t-esc="record.name"/></a>
-            <i t-if="record.is_editable" class="fa fa-pencil o_edit_subtype hide"
+            <i t-if="record.is_editable" class="fa fa-pencil o_edit_subtype d-none"
                title="Edit subscription"
                aria-label="Edit subscription" role="img"
                t-att-data-follower-id="record.id"
diff --git a/addons/mass_mailing/static/src/js/mass_mailing_editor.js b/addons/mass_mailing/static/src/js/mass_mailing_editor.js
index c7070e61a31..ae38436ea2c 100644
--- a/addons/mass_mailing/static/src/js/mass_mailing_editor.js
+++ b/addons/mass_mailing/static/src/js/mass_mailing_editor.js
@@ -28,7 +28,7 @@ options.registry.sizing_x = options.Class.extend({
         this.isIMG = this.$target.is("img");
         if (this.isIMG) {
             this.$overlay.find(".o_handle.w").addClass("readonly");
-            this.$overlay.find(".oe_snippet_move, .oe_snippet_clone").addClass("hidden");
+            this.$overlay.find(".oe_snippet_move, .oe_snippet_clone").addClass('d-none');
         }
 
         var $body = $(document.body);
diff --git a/addons/mass_mailing/views/editor_field_html.xml b/addons/mass_mailing/views/editor_field_html.xml
index ed5ce631e61..a962647670e 100644
--- a/addons/mass_mailing/views/editor_field_html.xml
+++ b/addons/mass_mailing/views/editor_field_html.xml
@@ -26,7 +26,7 @@
         <t t-set="head">
             <link rel="stylesheet" href="/mass_mailing/static/src/css/mass_mailing_popup.css" type="text/css"/>
         </t>
-        <div role="dialog" class="modal-dialog modal-md show" id="o_newsletter_popup">
+        <div role="dialog" class="modal-dialog modal-md d-block" id="o_newsletter_popup">
             <div class="modal-content o_popup_modal_content">
                 <div class="o_popup_modal_body text-center">
                     <div class="o_popup_content_dev">
diff --git a/addons/note/static/src/js/systray_activity_menu.js b/addons/note/static/src/js/systray_activity_menu.js
index 8194cc17e6a..f65dfce244f 100644
--- a/addons/note/static/src/js/systray_activity_menu.js
+++ b/addons/note/static/src/js/systray_activity_menu.js
@@ -48,8 +48,8 @@ ActivityMenu.include({
         if (noteDateTime) {
             params = _.extend(params, {'date_deadline': noteDateTime});
         }
-        this.$('.o_note_show').removeClass('hidden');
-        this.$('.o_note').addClass('hidden');
+        this.$('.o_note_show').removeClass('d-none');
+        this.$('.o_note').addClass('d-none');
         this._rpc({
             route: '/note/new',
             params: params,
@@ -91,7 +91,7 @@ ActivityMenu.include({
         }
         this.noteDateTimeWidget.appendTo(this.$('.o_note_datetime'));
         this.noteDateTimeWidget.$input.attr('placeholder', _t("Today"));
-        this.$('.o_note_show, .o_note').toggleClass('hidden');
+        this.$('.o_note_show, .o_note').toggleClass('d-none');
         this.$('.o_note_input').val('').focus();
     },
     /**
diff --git a/addons/note/static/src/xml/systray.xml b/addons/note/static/src/xml/systray.xml
index d1676c63761..56693a14544 100644
--- a/addons/note/static/src/xml/systray.xml
+++ b/addons/note/static/src/xml/systray.xml
@@ -5,7 +5,7 @@
             <div class="o_note_show">
                 <a role="button" class="btn btn-block text-center">Add new note</a>
             </div>
-            <div class="o_note o_mail_preview hidden">
+            <div class="o_note o_mail_preview d-none">
                 <div class="o_mail_preview_image o_mail_preview_app">
                     <img src="/note/static/description/icon.png" alt="Channel"/>
                 </div>
diff --git a/addons/note/static/tests/systray_activity_menu_tests.js b/addons/note/static/tests/systray_activity_menu_tests.js
index adf6fcd9bf5..5260cd3a685 100644
--- a/addons/note/static/tests/systray_activity_menu_tests.js
+++ b/addons/note/static/tests/systray_activity_menu_tests.js
@@ -40,24 +40,24 @@ QUnit.test('note activity menu widget: create note from activity menu', function
 
     // toggle quick create for note
     activityMenu.$('.dropdown-toggle').click();
-    assert.strictEqual(activityMenu.$('.o_note_show').hasClass("hidden"), false, 'ActivityMenu should have Add new note CTA');
+    assert.strictEqual(activityMenu.$('.o_note_show').hasClass('d-none'), false, 'ActivityMenu should have Add new note CTA');
     activityMenu.$('.o_note_show').click();
-    assert.strictEqual(activityMenu.$('.o_note_show').hasClass("hidden"), true, 'ActivityMenu should hide CTA when entering a new note');
-    assert.strictEqual(activityMenu.$('.o_note').hasClass("hidden"), false, 'ActivityMenu should display input for new note');
+    assert.strictEqual(activityMenu.$('.o_note_show').hasClass('d-none'), true, 'ActivityMenu should hide CTA when entering a new note');
+    assert.strictEqual(activityMenu.$('.o_note').hasClass('d-none'), false, 'ActivityMenu should display input for new note');
 
     // creating quick note without date
     activityMenu.$("input.o_note_input").val("New Note");
     activityMenu.$(".o_note_save").click();
-    assert.strictEqual(activityMenu.$('.o_note_show').hasClass("hidden"), false, 'ActivityMenu add note button should be displayed');
-    assert.strictEqual(activityMenu.$('.o_note').hasClass("hidden"), true, 'ActivityMenu add note input should be hidden');
+    assert.strictEqual(activityMenu.$('.o_note_show').hasClass('d-none'), false, 'ActivityMenu add note button should be displayed');
+    assert.strictEqual(activityMenu.$('.o_note').hasClass('d-none'), true, 'ActivityMenu add note input should be hidden');
 
     // creating quick note with date
     activityMenu.$('.o_note_show').click();
     activityMenu.$('input.o_note_input').val("New Note");
     activityMenu.$('.o_note_set_datetime').click();
     activityMenu.$(".o_note_save").click();
-    assert.strictEqual(activityMenu.$('.o_note_show').hasClass("hidden"), false, 'ActivityMenu add note button should be displayed');
-    assert.strictEqual(activityMenu.$('.o_note').hasClass("hidden"), true, 'ActivityMenu add note input should be hidden');
+    assert.strictEqual(activityMenu.$('.o_note_show').hasClass('d-none'), false, 'ActivityMenu add note button should be displayed');
+    assert.strictEqual(activityMenu.$('.o_note').hasClass('d-none'), true, 'ActivityMenu add note input should be hidden');
     activityMenu.destroy();
 });
 });
diff --git a/addons/pad/static/src/js/pad.js b/addons/pad/static/src/js/pad.js
index ff02ac376cb..e13000009d0 100644
--- a/addons/pad/static/src/js/pad.js
+++ b/addons/pad/static/src/js/pad.js
@@ -35,8 +35,8 @@ var FieldPad = AbstractField.extend({
      */
     start: function () {
         if (!this.isPadConfigured) {
-            this.$(".oe_unconfigured").removeClass('hidden');
-            this.$(".oe_configured").addClass('hidden');
+            this.$(".oe_unconfigured").removeClass('d-none');
+            this.$(".oe_configured").addClass('d-none');
             return;
         }
         if (this.mode === 'edit' && _.str.startsWith(this.value, 'http')) {
diff --git a/addons/pad/static/src/xml/pad.xml b/addons/pad/static/src/xml/pad.xml
index f48ade3d748..2eb323558a8 100644
--- a/addons/pad/static/src/xml/pad.xml
+++ b/addons/pad/static/src/xml/pad.xml
@@ -3,7 +3,7 @@
 
     <t t-name="FieldPad">
         <div class="oe_form_field_text oe_pad">
-            <p class="oe_unconfigured hidden">
+            <p class="oe_unconfigured d-none">
                 Please enter your Etherpad credentials through the menu 'Settings > General Settings'.
             </p>
             <t t-if="widget.mode === 'readonly'">
diff --git a/addons/payment/static/src/js/payment_form.js b/addons/payment/static/src/js/payment_form.js
index 0100afeb26c..f498599fb3c 100644
--- a/addons/payment/static/src/js/payment_form.js
+++ b/addons/payment/static/src/js/payment_form.js
@@ -377,8 +377,8 @@ odoo.define('payment.payment_form', function (require) {
             ev.preventDefault();
             var $listItems = $(ev.currentTarget).parents('ul').children('li');
             var $moreItem = $(ev.currentTarget).parents('li');
-            $listItems.removeClass('hidden');
-            $moreItem.addClass('hidden');
+            $listItems.removeClass('d-none');
+            $moreItem.addClass('d-none');
         },
 
         // event handler when clicking on a radio button
@@ -389,8 +389,8 @@ odoo.define('payment.payment_form', function (require) {
         {
             var checked_radio = this.$('input[type="radio"]:checked');
             // we hide all the acquirers form
-            this.$('[id*="o_payment_add_token_acq_"]').addClass('hidden');
-            this.$('[id*="o_payment_form_acq_"]').addClass('hidden');
+            this.$('[id*="o_payment_add_token_acq_"]').addClass('d-none');
+            this.$('[id*="o_payment_form_acq_"]').addClass('d-none');
             if (checked_radio.length !== 1) {
                 return;
             }
@@ -399,10 +399,10 @@ odoo.define('payment.payment_form', function (require) {
 
             // if we clicked on an add new payment radio, display its form
             if (this.isNewPaymentRadio(checked_radio)) {
-                this.$('#o_payment_add_token_acq_' + acquirer_id).removeClass('hidden');
+                this.$('#o_payment_add_token_acq_' + acquirer_id).removeClass('d-none');
             }
             else if (this.isFormPaymentRadio(checked_radio)) {
-                this.$('#o_payment_form_acq_' + acquirer_id).removeClass('hidden');
+                this.$('#o_payment_form_acq_' + acquirer_id).removeClass('d-none');
             }
         },
         isNewPaymentRadio: function (element) {
diff --git a/addons/payment/static/src/js/payment_portal.js b/addons/payment/static/src/js/payment_portal.js
index efab5f0a8e0..eeae7758916 100644
--- a/addons/payment/static/src/js/payment_portal.js
+++ b/addons/payment/static/src/js/payment_portal.js
@@ -58,8 +58,8 @@ $(document).ready(function () {
 
     $('select[name="pm_acquirer_id"]').on('change', function() {
         var acquirer_id = $(this).val();
-        $('.acquirer').addClass('hidden');
-        $('.acquirer[data-acquirer-id="'+acquirer_id+'"]').removeClass('hidden');
+        $('.acquirer').addClass('d-none');
+        $('.acquirer[data-acquirer-id="'+acquirer_id+'"]').removeClass('d-none');
     });
 
 });
diff --git a/addons/payment/views/payment_templates.xml b/addons/payment/views/payment_templates.xml
index 37fd5a2bc30..8e53474d549 100644
--- a/addons/payment/views/payment_templates.xml
+++ b/addons/payment/views/payment_templates.xml
@@ -52,7 +52,7 @@
                                     t-att-data-s2s-payment="true"
                                     t-att-data-provider="acq.provider"
                                     name="pm_id" t-attf-value="new_{{acq.id}}"
-                                    t-att-class="'hidden' if acquirers_count==1 else ''"
+                                    t-att-class="'d-none' if acquirers_count==1 else ''"
                                     t-att-checked="acquirers_count == 1"/>
                             </t>
                             <t t-else="">
@@ -60,7 +60,7 @@
                                     t-att-data-s2s-payment="true"
                                     t-att-data-provider="acq.provider"
                                     name="pm_id" t-attf-value="new_{{acq.id}}"
-                                    t-att-class="'hidden' if (acquirers_count==1 and pms_count==0) else ''"
+                                    t-att-class="'d-none' if (acquirers_count==1 and pms_count==0) else ''"
                                     t-att-checked="acquirers_count==1 and pms_count==0"/>
                             </t>
                             <span class="payment_option_name" t-esc="acq.name"/>
@@ -68,7 +68,7 @@
                         <ul class="pull-right list-inline payment_icon_list">
                             <t t-set="i" t-value="0"/>
                             <t t-foreach="acq.payment_icon_ids" t-as="pm_icon">
-                                <li t-att-class="'' if (i &lt; MAX_BRAND_LINE) else 'hidden'">
+                                <li t-att-class="'' if (i &lt; MAX_BRAND_LINE) else 'd-none'">
                                     <span t-field="pm_icon.image_payment_form"
                                         t-options='{"widget": "image", "alt-field": "name"}' />
                                 </li>
@@ -81,7 +81,7 @@
                             </t>
                         </ul>
                     </div>
-                    <div t-attf-id="o_payment_add_token_acq_{{acq.id}}" t-attf-class="panel-footer {{'hidden' if(acquirers_count &gt; 1 and pms_count==0 and s2s_acquirers[0]!=acq) else 'hidden' if pms_count &gt;0 else ''}}">
+                    <div t-attf-id="o_payment_add_token_acq_{{acq.id}}" t-attf-class="panel-footer {{'d-none' if(acquirers_count &gt; 1 and pms_count==0 and s2s_acquirers[0]!=acq) else 'd-none' if pms_count &gt;0 else ''}}">
                         <div class="clearfix">
                             <t t-call="{{acq.sudo().get_s2s_form_xml_id()}}">
                                 <t t-set="id" t-value="acq.id"/>
@@ -97,7 +97,7 @@
                             <input type="radio" t-att-data-acquirer-id="acq.id"
                                 t-att-data-form-payment="true"
                                 t-att-data-provider="acq.provider"
-                                t-att-class="'hidden' if (acquirers_count==1 and pms_count==0) else ''"
+                                t-att-class="'d-none' if (acquirers_count==1 and pms_count==0) else ''"
                                 t-att-checked="acquirers_count==1 and pms_count==0"
                                 name="pm_id" t-attf-value="form_{{acq.id}}"/>
                             <span class="payment_icon_name" t-esc="acq.name"/>
@@ -105,7 +105,7 @@
                         <ul class="pull-right list-inline payment_icon_list">
                             <t t-set="i" t-value="0"/>
                             <t t-foreach="acq.payment_icon_ids" t-as="pm_icon">
-                                <li t-att-class=" '' if (i &lt; MAX_BRAND_LINE) else 'hidden'">
+                                <li t-att-class=" '' if (i &lt; MAX_BRAND_LINE) else 'd-none'">
                                     <span t-field="pm_icon.image_payment_form"
                                         t-options='{"widget": "image", "alt-field": "name"}' />
                                 </li>
@@ -118,7 +118,7 @@
                             </t>
                         </ul>
                     </div>
-                    <div t-attf-id="o_payment_form_acq_{{acq.id}}" t-attf-class="hidden {{'panel-footer' if acq.save_token == 'ask' else ''}}">
+                    <div t-attf-id="o_payment_form_acq_{{acq.id}}" t-attf-class="d-none {{'panel-footer' if acq.save_token == 'ask' else ''}}">
                         <label t-if="acq.save_token == 'ask'"><input type="checkbox" name="o_payment_form_save_token" data-remove-me=""/> Save my payment data</label>
                     </div>
                 </t>
diff --git a/addons/payment_adyen/views/payment_adyen_templates.xml b/addons/payment_adyen/views/payment_adyen_templates.xml
index 4f4d21811a2..75d2fddc7b3 100644
--- a/addons/payment_adyen/views/payment_adyen_templates.xml
+++ b/addons/payment_adyen/views/payment_adyen_templates.xml
@@ -13,15 +13,15 @@
             <input type="hidden" name="sessionValidity" t-att-value="sessionValidity"/>
             <input type="hidden" name="merchantSig" t-att-value="merchantSig"/>
             <!-- URLs -->
-            <input type='hidden' name='resURL'
+            <input type="hidden" name='resURL'
                 t-att-value="resURL"/>
             <!-- custom -->
-            <input t-if="merchantReturnData" type='hidden' name='merchantReturnData'
+            <input t-if="merchantReturnData" type="hidden" name='merchantReturnData'
                 t-att-value="merchantReturnData"/>
             <!-- shopperEmail is not included for SHA-1. To avoid breaking compatibility,
                     include only if filled in -->
             <input t-if="shopperEmail"
-                type='hidden' name='shopperEmail' t-att-value="shopperEmail"/>
+                type="hidden" name='shopperEmail' t-att-value="shopperEmail"/>
         </template>
     </data>
 </odoo>
diff --git a/addons/payment_authorize/views/payment_authorize_templates.xml b/addons/payment_authorize/views/payment_authorize_templates.xml
index 8002b5aae57..c86663935c1 100644
--- a/addons/payment_authorize/views/payment_authorize_templates.xml
+++ b/addons/payment_authorize/views/payment_authorize_templates.xml
@@ -4,43 +4,43 @@
         <template id="authorize_form">
             <div>
                 <input type="hidden" name="data_set" t-att-data-action-url="tx_url" data-remove-me=""/>
-                <input type='hidden' name='x_login' t-att-value='x_login'/>
-                <input type='hidden' name='x_fp_hash' t-att-value='x_fp_hash'/>
-                <input type='hidden' name='x_amount' t-att-value='x_amount'/>
-                <input type='hidden' name='x_show_form' t-att-value="x_show_form"/>
-                <input type='hidden' name='x_type' t-att-value="x_type"/>
-                <input type='hidden' name='x_method' t-att-value="x_method"/>
-                <input type='hidden' name='x_fp_sequence' t-att-value='x_fp_sequence'/>
-                <input type='hidden' name='x_version' t-att-value="x_version"/>
+                <input type="hidden" name='x_login' t-att-value='x_login'/>
+                <input type="hidden" name='x_fp_hash' t-att-value='x_fp_hash'/>
+                <input type="hidden" name='x_amount' t-att-value='x_amount'/>
+                <input type="hidden" name='x_show_form' t-att-value="x_show_form"/>
+                <input type="hidden" name='x_type' t-att-value="x_type"/>
+                <input type="hidden" name='x_method' t-att-value="x_method"/>
+                <input type="hidden" name='x_fp_sequence' t-att-value='x_fp_sequence'/>
+                <input type="hidden" name='x_version' t-att-value="x_version"/>
                 <input type="hidden" name="x_relay_response" t-att-value="x_relay_response"/>
                 <input type="hidden" name="x_relay_url" t-att-value="x_relay_url"/>
-                <input type='hidden' name="x_fp_timestamp" t-att-value="x_fp_timestamp"/>
+                <input type="hidden" name="x_fp_timestamp" t-att-value="x_fp_timestamp"/>
                 <input type="hidden" name='return_url' t-att-value="returndata"/>
                 <input type="hidden" name='x_cancel_url' t-att-value="x_cancel_url"/>
                 <!--Order Information -->
-                <input type='hidden' name='x_invoice_num' t-att-value='reference'/>
-                <input type='hidden' name='x_currency_code' t-att-value='x_currency_code'/>
+                <input type="hidden" name='x_invoice_num' t-att-value='reference'/>
+                <input type="hidden" name='x_currency_code' t-att-value='x_currency_code'/>
                 <!-- Billing Information-->
-                <input type='hidden' name='x_first_name' t-att-value="billing_first_name"/>
-                <input type='hidden' name='x_last_name' t-att-value="billing_last_name"/>
+                <input type="hidden" name='x_first_name' t-att-value="billing_first_name"/>
+                <input type="hidden" name='x_last_name' t-att-value="billing_last_name"/>
                 <input type="hidden" name="x_company" t-att-value="billing_partner_commercial_company_name"/>
-                <input type='hidden' name='x_address' t-att-value="billing_address"/>
-                <input type='hidden' name='x_city' t-att-value="billing_city"/>
-                <input type='hidden' name='x_zip' t-att-value="billing_zip_code"/>
-                <input type='hidden' name='x_country' t-att-value="billing_country"/>
-                <input type='hidden' name='x_phone' t-att-value='billing_phone'/>
-                <input type='hidden' name='x_email' t-att-value="billing_email"/>
-                <input type='hidden' name='x_state' t-att-value="billing_state"/>
+                <input type="hidden" name='x_address' t-att-value="billing_address"/>
+                <input type="hidden" name='x_city' t-att-value="billing_city"/>
+                <input type="hidden" name='x_zip' t-att-value="billing_zip_code"/>
+                <input type="hidden" name='x_country' t-att-value="billing_country"/>
+                <input type="hidden" name='x_phone' t-att-value='billing_phone'/>
+                <input type="hidden" name='x_email' t-att-value="billing_email"/>
+                <input type="hidden" name='x_state' t-att-value="billing_state"/>
                 <!-- Shipping Information-->
-                <input type='hidden' name='x_ship_to_first_name' t-att-value="first_name"/>
-                <input type='hidden' name='x_ship_to_last_name' t-att-value="last_name"/>
-                <input type='hidden' name='x_ship_to_address' t-att-value="address"/>
-                <input type='hidden' name='x_ship_to_city' t-att-value="city"/>
-                <input type='hidden' name='x_ship_to_zip' t-att-value="zip_code"/>
-                <input type='hidden' name='x_ship_to_country' t-att-value="country"/>
-                <input type='hidden' name='x_ship_to_phone' t-att-value='phone'/>
-                <input type='hidden' name='x_ship_to_email' t-att-value="email"/>
-                <input type='hidden' name='x_ship_to_state' t-att-value="state"/>
+                <input type="hidden" name='x_ship_to_first_name' t-att-value="first_name"/>
+                <input type="hidden" name='x_ship_to_last_name' t-att-value="last_name"/>
+                <input type="hidden" name='x_ship_to_address' t-att-value="address"/>
+                <input type="hidden" name='x_ship_to_city' t-att-value="city"/>
+                <input type="hidden" name='x_ship_to_zip' t-att-value="zip_code"/>
+                <input type="hidden" name='x_ship_to_country' t-att-value="country"/>
+                <input type="hidden" name='x_ship_to_phone' t-att-value='phone'/>
+                <input type="hidden" name='x_ship_to_email' t-att-value="email"/>
+                <input type="hidden" name='x_ship_to_state' t-att-value="state"/>
             </div>
         </template>
 
@@ -70,7 +70,7 @@
                 </div>
             </div>
             <input type="hidden" name="acquirer_id" t-att-value="id"/>
-            <input class="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
+            <input class="d-none" name="csrf_token" t-att-value="request.csrf_token()"/>
             <input t-if="return_url" type="hidden" name="return_url" t-att-value="return_url"/>
             <input t-if="partner_id" type="hidden" name="partner_id" t-att-value="partner_id"/>
          </template>
diff --git a/addons/payment_buckaroo/views/payment_buckaroo_templates.xml b/addons/payment_buckaroo/views/payment_buckaroo_templates.xml
index e65700ee6e7..95f1aa0ce9e 100644
--- a/addons/payment_buckaroo/views/payment_buckaroo_templates.xml
+++ b/addons/payment_buckaroo/views/payment_buckaroo_templates.xml
@@ -11,15 +11,15 @@
             <input type="hidden" name="brq_test" t-att-value="brq_test"/>
             <input type="hidden" name="Brq_culture" t-att-value="Brq_culture"/>
             <!-- URLs -->
-            <input t-if="Brq_return" type='hidden' name='Brq_return'
+            <input t-if="Brq_return" type="hidden" name='Brq_return'
                 t-att-value="Brq_return"/>
-            <input t-if="Brq_returncancel" type='hidden' name='Brq_returncancel'
+            <input t-if="Brq_returncancel" type="hidden" name='Brq_returncancel'
                 t-att-value="Brq_returncancel"/>
-            <input t-if="Brq_returnerror" type='hidden' name='Brq_returnerror'
+            <input t-if="Brq_returnerror" type="hidden" name='Brq_returnerror'
                 t-att-value="Brq_returnerror"/>
-            <input t-if="Brq_returnreject" type='hidden' name='Brq_returnreject'
+            <input t-if="Brq_returnreject" type="hidden" name='Brq_returnreject'
                 t-att-value="Brq_returnreject"/>
-            <input type='hidden' name='add_returndata' t-att-value="add_returndata"/>
+            <input type="hidden" name='add_returndata' t-att-value="add_returndata"/>
         </template>
     </data>
 </odoo>
diff --git a/addons/payment_ogone/views/payment_ogone_templates.xml b/addons/payment_ogone/views/payment_ogone_templates.xml
index 28dca693a4a..db25e5a9362 100644
--- a/addons/payment_ogone/views/payment_ogone_templates.xml
+++ b/addons/payment_ogone/views/payment_ogone_templates.xml
@@ -4,35 +4,35 @@
         <template id="ogone_form">
             <input type="hidden" name="data_set" t-att-data-action-url="tx_url" data-remove-me=""/>
             <!-- seller -->
-            <input type='hidden' name='PSPID' t-att-value='PSPID'/>
-            <input type='hidden' name='ORDERID' t-att-value='ORDERID'/>
+            <input type="hidden" name='PSPID' t-att-value='PSPID'/>
+            <input type="hidden" name='ORDERID' t-att-value='ORDERID'/>
             <!-- cart -->
-            <input type='hidden' name='AMOUNT' t-att-value='AMOUNT or "0.0"'/>
-            <input type='hidden' name='CURRENCY' t-att-value='CURRENCY'/>
+            <input type="hidden" name='AMOUNT' t-att-value='AMOUNT or "0.0"'/>
+            <input type="hidden" name='CURRENCY' t-att-value='CURRENCY'/>
             <!-- buyer -->
-            <input type='hidden' name='LANGUAGE' t-att-value='LANGUAGE'/>
-            <input type='hidden' name='CN' t-att-value='CN'/>
-            <input type='hidden' name='EMAIL' t-att-value='EMAIL'/>
-            <input type='hidden' name='OWNERZIP' t-att-value='OWNERZIP'/>
-            <input type='hidden' name='OWNERADDRESS' t-att-value='OWNERADDRESS'/>
-            <input type='hidden' name='OWNERCTY' t-att-value='OWNERCTY'/>
-            <input type='hidden' name='OWNERTOWN' t-att-value='OWNERTOWN'/>
-            <input type='hidden' name='OWNERTELNO' t-att-value='OWNERTELNO'/>
+            <input type="hidden" name='LANGUAGE' t-att-value='LANGUAGE'/>
+            <input type="hidden" name='CN' t-att-value='CN'/>
+            <input type="hidden" name='EMAIL' t-att-value='EMAIL'/>
+            <input type="hidden" name='OWNERZIP' t-att-value='OWNERZIP'/>
+            <input type="hidden" name='OWNERADDRESS' t-att-value='OWNERADDRESS'/>
+            <input type="hidden" name='OWNERCTY' t-att-value='OWNERCTY'/>
+            <input type="hidden" name='OWNERTOWN' t-att-value='OWNERTOWN'/>
+            <input type="hidden" name='OWNERTELNO' t-att-value='OWNERTELNO'/>
             <t t-if="acquirer.save_token in ['ask', 'always']">
-                <input type='hidden' name='ALIAS' t-att-value='ALIAS'/>
-                <input type='hidden' name='ALIASUSAGE' t-att-value='ALIASUSAGE'/>
+                <input type="hidden" name='ALIAS' t-att-value='ALIAS'/>
+                <input type="hidden" name='ALIASUSAGE' t-att-value='ALIASUSAGE'/>
             </t>
             <!-- before payment verification -->
-            <input type='hidden' name='SHASIGN' t-att-value='SHASIGN'/>
+            <input type="hidden" name='SHASIGN' t-att-value='SHASIGN'/>
             <!-- after payment parameters -->
             <t t-if='PARAMPLUS'>
-                <input type='hidden' name="PARAMPLUS" t-att-value='PARAMPLUS'/>
+                <input type="hidden" name="PARAMPLUS" t-att-value='PARAMPLUS'/>
             </t>
             <!-- redirection -->
-            <input type='hidden' name='ACCEPTURL' t-att-value='ACCEPTURL'/>
-            <input type='hidden' name='DECLINEURL' t-att-value='DECLINEURL'/>
-            <input type='hidden' name='EXCEPTIONURL' t-att-value='EXCEPTIONURL'/>
-            <input type='hidden' name='CANCELURL' t-att-value='CANCELURL'/>
+            <input type="hidden" name='ACCEPTURL' t-att-value='ACCEPTURL'/>
+            <input type="hidden" name='DECLINEURL' t-att-value='DECLINEURL'/>
+            <input type="hidden" name='EXCEPTIONURL' t-att-value='EXCEPTIONURL'/>
+            <input type="hidden" name='CANCELURL' t-att-value='CANCELURL'/>
         </template>
 
         <template id="ogone_s2s_form">
diff --git a/addons/payment_paypal/views/payment_paypal_templates.xml b/addons/payment_paypal/views/payment_paypal_templates.xml
index 5678a460aac..a5e1cef87ba 100644
--- a/addons/payment_paypal/views/payment_paypal_templates.xml
+++ b/addons/payment_paypal/views/payment_paypal_templates.xml
@@ -20,15 +20,15 @@
                 <input type="hidden" name="first_name" t-att-value="first_name"/>
                 <input type="hidden" name="last_name" t-att-value="last_name"/>
                 <input type="hidden" name="zip" t-att-value="zip_code"/>
-                <input t-if='state' type='hidden' name="state"
+                <input t-if='state' type="hidden" name="state"
                     t-att-value='state'/>
                 <!-- after payment parameters -->
-                <input t-if='custom' type='hidden' name="custom"
+                <input t-if='custom' type="hidden" name="custom"
                     t-att-value='custom'/>
                 <!-- URLs -->
-                <input t-if="paypal_return" type='hidden' name='return'
+                <input t-if="paypal_return" type="hidden" name='return'
                     t-att-value="paypal_return"/>
-                <input t-if="acquirer.paypal_use_ipn" type='hidden' name='notify_url'
+                <input t-if="acquirer.paypal_use_ipn" type="hidden" name='notify_url'
                     t-att-value="notify_url"/>
                 <input t-if="cancel_return" type="hidden" name="cancel_return"
                     t-att-value="cancel_return"/>
diff --git a/addons/payment_stripe/views/payment_stripe_templates.xml b/addons/payment_stripe/views/payment_stripe_templates.xml
index 2fc054f97ae..041d99af67b 100644
--- a/addons/payment_stripe/views/payment_stripe_templates.xml
+++ b/addons/payment_stripe/views/payment_stripe_templates.xml
@@ -3,24 +3,24 @@
     <data>
         <template id="stripe_form">
             <input type="hidden" name="data_set" t-att-data-action-url="tx_url" data-remove-me=""/>
-            <input type='hidden' name='stripe_image' t-att-value="acquirer.stripe_image_url"/>
-            <input type='hidden' name='merchant' t-att-value='acquirer.company_id.name'/>
-            <input type='hidden' name='amount' t-att-value="amount"/>
+            <input type="hidden" name='stripe_image' t-att-value="acquirer.stripe_image_url"/>
+            <input type="hidden" name='merchant' t-att-value='acquirer.company_id.name'/>
+            <input type="hidden" name='amount' t-att-value="amount"/>
             <input type="hidden" name='return_url' t-att-value='returndata'/>
             <!--Order Information -->
-            <input type='hidden' name='invoice_num' t-att-value='reference'/>
-            <input type='hidden' name='currency' t-att-value='currency'/>
-            <input type='hidden' name='currency_id' t-att-value='currency_id'/>
+            <input type="hidden" name='invoice_num' t-att-value='reference'/>
+            <input type="hidden" name='currency' t-att-value='currency'/>
+            <input type="hidden" name='currency_id' t-att-value='currency_id'/>
             <!-- Billing Information-->
-            <input type='hidden' name='name' t-att-value='name'/>
-            <input type='hidden' name='address_line1' t-att-value='address_line1'/>
-            <input type='hidden' name='address_city' t-att-value='address_city'/>
-            <input type='hidden' name='address_zip' t-att-value='address_zip'/>
-            <input type='hidden' name='address_country' t-att-value='address_country'/>
-            <input type='hidden' name='phone' t-att-value='phone'/>
-            <input type='hidden' name='email' t-att-value='email'/>
-            <input id="acquirer_stripe" type='hidden' name="acquirer" t-att-value="acquirer.id"/>
-            <input type='hidden' name="stripe_key" t-att-value="acquirer.stripe_publishable_key"/>
+            <input type="hidden" name='name' t-att-value='name'/>
+            <input type="hidden" name='address_line1' t-att-value='address_line1'/>
+            <input type="hidden" name='address_city' t-att-value='address_city'/>
+            <input type="hidden" name='address_zip' t-att-value='address_zip'/>
+            <input type="hidden" name='address_country' t-att-value='address_country'/>
+            <input type="hidden" name='phone' t-att-value='phone'/>
+            <input type="hidden" name='email' t-att-value='email'/>
+            <input id="acquirer_stripe" type="hidden" name="acquirer" t-att-value="acquirer.id"/>
+            <input type="hidden" name="stripe_key" t-att-value="acquirer.stripe_publishable_key"/>
             <script type="text/javascript" src="/payment_stripe/static/src/js/stripe.js"></script>
         </template>
 
diff --git a/addons/payment_transfer/views/payment_transfer_templates.xml b/addons/payment_transfer/views/payment_transfer_templates.xml
index abd39cf681b..a3af2f4e318 100644
--- a/addons/payment_transfer/views/payment_transfer_templates.xml
+++ b/addons/payment_transfer/views/payment_transfer_templates.xml
@@ -4,11 +4,11 @@
         <template id="transfer_form">
             <input type="hidden" name="data_set" t-att-data-action-url="tx_url" data-remove-me=""/>
             <t t-if="return_url">
-                <input type='hidden' name='return_url' t-att-value='return_url'/>
+                <input type="hidden" name='return_url' t-att-value='return_url'/>
             </t>
-            <input type='hidden' name='reference' t-att-value='reference'/>
-            <input type='hidden' name='amount' t-att-value='amount'/>
-            <input type='hidden' name='currency' t-att-value='currency.name'/>
+            <input type="hidden" name='reference' t-att-value='reference'/>
+            <input type="hidden" name='amount' t-att-value='amount'/>
+            <input type="hidden" name='currency' t-att-value='currency.name'/>
         </template>
     </data>
 </odoo>
diff --git a/addons/point_of_sale/static/src/js/pos.web_editor.js b/addons/point_of_sale/static/src/js/pos.web_editor.js
index 8a172085d14..dfeb3aed480 100644
--- a/addons/point_of_sale/static/src/js/pos.web_editor.js
+++ b/addons/point_of_sale/static/src/js/pos.web_editor.js
@@ -14,7 +14,7 @@ odoo.define('point_of_sale.editor', function (require) {
         start: function () {
             var self = this;
             setTimeout(function(){
-                self.$overlay.find('.pos-use_default_logo').removeClass("hidden");
+                self.$overlay.find('.pos-use_default_logo').removeClass('d-none');
             },500);
         }
     });
@@ -29,7 +29,7 @@ odoo.define('point_of_sale.editor', function (require) {
     // Hide 'remove' buttun for element that should not be removed
     s_options.registry.pos_no_remove = s_options.Class.extend({
         start:function() {
-            this.$overlay.find('.oe_snippet_remove').addClass('hidden');
+            this.$overlay.find('.oe_snippet_remove').addClass('d-none');
             this.$('.pos-adv').append($('<div class="pos_adv_onsave_remove text-center" style="color:#666666; padding:10px;">' + _t('Set your customized advertisement here') + '</span>'));
         },
 
diff --git a/addons/point_of_sale/views/pos_templates.xml b/addons/point_of_sale/views/pos_templates.xml
index 57895f2637b..c6be6011cdd 100644
--- a/addons/point_of_sale/views/pos_templates.xml
+++ b/addons/point_of_sale/views/pos_templates.xml
@@ -88,9 +88,9 @@
 <template id="customer_facing_display_snippets">
     <!-- web_editor needs a ul (normally contains the header, body, extra buttons)-->
     <ul/>
-    <div id="o_scroll" class="hidden"/>
+    <div id="o_scroll" class="d-none"/>
 
-    <div id="snippet_options" class="hidden">
+    <div id="snippet_options" class="d-none">
         <t t-call="web_editor.snippet_options"/>
 
         <div data-js='pos_no_remove' data-selector=".pos-company_logo, .pos-adv, .pos-customer_facing_display"/>
@@ -115,7 +115,7 @@
 
         <div data-js='pos_background' data-selector=".pos-company_logo, .pos-adv">
             <li data-choose-image="true" data-no-preview="true"><a href="#"><b>Set Custom Image...</b></a></li>
-            <li class="hidden pos-use_default_logo" data-background=""><a href="#">Default company logo</a></li>
+            <li class="d-none pos-use_default_logo" data-background=""><a href="#">Default company logo</a></li>
             <li class="divider"/>
             <li data-toggle-class="pos-hidden"><a href="#"><i class="fa fa-eye-slash"/>Hide</a></li>
         </div>
diff --git a/addons/portal/static/src/xml/portal_chatter.xml b/addons/portal/static/src/xml/portal_chatter.xml
index cebc9384bf4..8c080c5625a 100644
--- a/addons/portal/static/src/xml/portal_chatter.xml
+++ b/addons/portal/static/src/xml/portal_chatter.xml
@@ -31,11 +31,11 @@
                             <input type="hidden" name="csrf_token" t-att-value="widget.options['csrf_token']"/>
                             <div class="mb32">
                                 <textarea rows="4" name="message" class="form-control" placeholder="Write a message..."></textarea>
-                                <input type='hidden' name="res_model" t-att-value="widget.options['res_model']"/>
-                                <input type='hidden' name="res_id" t-att-value="widget.options['res_id']"/>
-                                <input type='hidden' name="token" t-att-value="widget.options['token']" t-if="widget.options['token']"/>
-                                <input type='hidden' name="sha_in" t-att-value="widget.options['sha_in']" t-if="widget.options['sha_in']"/>
-                                <input type='hidden' name="sha_time" t-att-value="widget.options['sha_time']" t-if="widget.options['sha_time']"/>
+                                <input type="hidden" name="res_model" t-att-value="widget.options['res_model']"/>
+                                <input type="hidden" name="res_id" t-att-value="widget.options['res_id']"/>
+                                <input type="hidden" name="token" t-att-value="widget.options['token']" t-if="widget.options['token']"/>
+                                <input type="hidden" name="sha_in" t-att-value="widget.options['sha_in']" t-if="widget.options['sha_in']"/>
+                                <input type="hidden" name="sha_time" t-att-value="widget.options['sha_time']" t-if="widget.options['sha_time']"/>
                                 <div class="alert alert-danger mt8 mb0 o_portal_chatter_composer_error" style="display:none;" role="alert">
                                     Oops! Something went wrong. Try to reload the page and log in.
                                 </div>
diff --git a/addons/portal/views/portal_templates.xml b/addons/portal/views/portal_templates.xml
index 5f06fb6d2b9..c061465cebd 100644
--- a/addons/portal/views/portal_templates.xml
+++ b/addons/portal/views/portal_templates.xml
@@ -177,7 +177,7 @@
                         <li t-if="searchbar_sortings" class="dropdown pull-left ml16">
                             <button id="portal_searchbar_sortby" data-toggle="dropdown" class="btn btn-default navbar-btn">
                                 <span class="fa fa-sort"/>
-                                <span class="hidden-xs hidden-sm"><t t-esc="searchbar_sortings[sortby].get('label', 'Newest')"/></span>
+                                <span class="d-none d-lg-inline"><t t-esc="searchbar_sortings[sortby].get('label', 'Newest')"/></span>
                                 <span class="caret"/>
                             </button>
                             <ul class="dropdown-menu" aria-labelledby="portal_searchbar_sortby">
@@ -191,7 +191,7 @@
                         <li t-if="searchbar_filters" class="dropdown pull-left ml4">
                             <button id="portal_searchbar_filters" data-toggle="dropdown" class="btn btn-default navbar-btn">
                                 <span class="fa fa-filter"/>
-                                <span class="hidden-xs hidden-sm"><t t-esc="searchbar_filters[filterby].get('label', 'All')"/></span>
+                                <span class="d-none d-lg-inline"><t t-esc="searchbar_filters[filterby].get('label', 'All')"/></span>
                                 <span class="caret"/>
                             </button>
                             <ul class="dropdown-menu" aria-labelledby="portal_searchbar_filters">
@@ -205,7 +205,7 @@
                         <li t-if="searchbar_groupby" class="dropdown pull-left ml4">
                             <button id="portal_searchbar_groupby" data-toggle="dropdown" class="btn btn-default navbar-btn">
                                 <span class="fa fa-object-group"/>
-                                <span class="hidden-xs hidden-sm"><t t-esc="searchbar_groupby[groupby].get('label', 'None')"/></span>
+                                <span class="d-none d-lg-inline"><t t-esc="searchbar_groupby[groupby].get('label', 'None')"/></span>
                                 <span class="caret"/>
                             </button>
                             <ul class="dropdown-menu" aria-labelledby="portal_searchbar_groupby">
@@ -219,7 +219,7 @@
                     </ul>
                     <button t-if='searchbar_inputs' type="button" class="navbar-toggle collapsed btn ml16" data-toggle="collapse" data-target="#o_portal_searchbar_collapse"><span class="fa fa-search"/></button>
                 </div>
-                <div t-if='searchbar_inputs' class="visible-xs-block clearfix"/>
+                <div t-if='searchbar_inputs' class="d-block d-md-none clearfix"/>
 
                 <!-- Collapsing content (searchbar_inputs) -->
                 <div t-if='searchbar_inputs' class="collapse navbar-collapse text-right" id="o_portal_searchbar_collapse">
@@ -227,7 +227,7 @@
                          <div class="input-group">
                             <div class="input-group-btn">
                                 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
-                                    <span id="search_label" class="hidden-xs mr4">Search</span><span class="caret"></span>
+                                    <span id="search_label" class="d-none d-md-inline mr4">Search</span><span class="caret"></span>
                                 </button>
                                 <ul class="dropdown-menu" role="menu">
                                     <li t-foreach='searchbar_inputs' t-as='input' t-att-class="search_in == searchbar_inputs[input]['input'] and 'active'">
@@ -237,7 +237,7 @@
                             </div>
                             <input type="text" class="form-control" t-att-value='search' name="search"/>
                             <span class="input-group-btn">
-                                <button class="btn btn-default search-submit" type="button"><span class="fa fa-search hidden-xs"/><span class="fa fa-arrow-right visible-xs-inline-block"/></button>
+                                <button class="btn btn-default 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>
                     </div>
@@ -399,7 +399,7 @@
                      the message will be posted with the identity of the partner_id of the object
     -->
     <template id="message_thread">
-        <div id="discussion" class="hidden-print o_portal_chatter o_not_editable"
+        <div id="discussion" class="d-print-none o_portal_chatter o_not_editable"
             t-att-data-token="token" t-att-data-res_model="object._name" t-att-data-res_id="object.id" t-att-data-pager_step="message_per_page or 10" t-att-data-allow_composer="'0' if disable_composer else '1'">
         </div>
     </template>
diff --git a/addons/project/static/src/js/project.js b/addons/project/static/src/js/project.js
index d372dff8486..c6c58e44531 100644
--- a/addons/project/static/src/js/project.js
+++ b/addons/project/static/src/js/project.js
@@ -62,7 +62,7 @@ KanbanRecord.include({
             var $imgs = $content.find('.o_kanban_task_cover_image');
             var dialog = new Dialog(self, {
                 title: _t("Set a Cover Image"),
-                buttons: [{text: _t("Select"), classes: attachment_ids.length ? 'btn-primary' : 'hidden', close: true, disabled: !coverID, click: function () {
+                buttons: [{text: _t("Select"), classes: attachment_ids.length ? 'btn-primary' : 'd-none', close: true, disabled: !coverID, click: function () {
                     var $img = $imgs.filter('.o_selected').find('img');
                     var data = {
                         id: $img.data('id'),
@@ -71,7 +71,7 @@ KanbanRecord.include({
                     self._updateRecord({displayed_image_id: data});
                 }}, {text: _t('Upload and Set'), classes: attachment_ids.length ? '' : 'btn-primary', close: false, click: function () {
                     $content.find('input.o_input_file').click();
-                }}, {text: _t("Remove Cover Image"), classes: coverID ? '' : 'hidden', close: true, click: function () {
+                }}, {text: _t("Remove Cover Image"), classes: coverID ? '' : 'd-none', close: true, click: function () {
                     self._updateRecord({displayed_image_id: false});
                 }}, {text: _t("Discard"), close: true}],
                 $content: $content,
diff --git a/addons/project/static/src/xml/project.xml b/addons/project/static/src/xml/project.xml
index 99949bf1861..ea69825c5a7 100644
--- a/addons/project/static/src/xml/project.xml
+++ b/addons/project/static/src/xml/project.xml
@@ -9,7 +9,7 @@
             </t>
         </div>
         <div t-if="attachment_ids.length == 0">There is no available image to be set as cover.</div>
-        <span class="hide">
+        <span class="d-none">
             <t t-call="HiddenInputFile">
                 <t t-set="fileupload_id" t-value="widget.imageUploadID" />
                 <t t-set="fileupload_action" t-translation="off">/web/binary/upload_attachment</t>
diff --git a/addons/project/views/project_rating_templates.xml b/addons/project/views/project_rating_templates.xml
index 613b1eaa0a9..f3de40ee4ec 100644
--- a/addons/project/views/project_rating_templates.xml
+++ b/addons/project/views/project_rating_templates.xml
@@ -125,7 +125,7 @@
         </template>
 
         <template id="portal_project_rating_popover">
-            <div t-attf-id="rating_#{rating.id}" class="container hidden">
+            <div t-attf-id="rating_#{rating.id}" class="container d-none">
                 <div class="row">
                     <div class="col-md-2">
                         <img t-if="rating.partner_id.image" class="o_top_partner_image" t-attf-src="data:image/png;base64,#{rating.partner_id.image}" alt="Rated partner"/>
diff --git a/addons/sale/views/res_config_settings_views.xml b/addons/sale/views/res_config_settings_views.xml
index 63610101ddb..5c127f91b2c 100644
--- a/addons/sale/views/res_config_settings_views.xml
+++ b/addons/sale/views/res_config_settings_views.xml
@@ -338,7 +338,7 @@
                     <h2>Invoicing</h2>
                     <div class="row mt16 o_settings_container">
                         <div id="sales_settings_invoicing_policy"
-                             class="col-xs-12 col-md-6 o_setting_box hidden"
+                             class="col-xs-12 col-md-6 o_setting_box d-none"
                              title="This default value is applied to any new product created. This can be changed in the product detail form.">
                             <div class="o_setting_right_pane">
                                 <label for="default_invoice_policy"/>
diff --git a/addons/sale/views/sale_portal_templates.xml b/addons/sale/views/sale_portal_templates.xml
index 89b6846e943..71de74795e7 100644
--- a/addons/sale/views/sale_portal_templates.xml
+++ b/addons/sale/views/sale_portal_templates.xml
@@ -89,8 +89,8 @@
                 <thead>
                   <tr class="active">
                     <th>
-                      <span class='hidden-xs'>Sales Order #</span>
-                      <span class='visible-xs'>Ref.</span>
+                      <span class='d-none d-md-inline'>Sales Order #</span>
+                      <span class='d-block d-md-none'>Ref.</span>
                     </th>
                     <th>Order Date</th>
                     <th ></th>
@@ -104,11 +104,11 @@
                         </td>
                         <td>
                           <span t-field="order.date_order" t-options="{'widget': 'date'}"/>&amp;nbsp;
-                          <span class='hidden-xs' t-field="order.date_order" t-options="{'time_only': True}"/>
+                          <span class='d-none d-md-inline' t-field="order.date_order" t-options="{'time_only': True}"/>
                         </td>
                         <td>
                             <t t-if="order.state == 'done'">
-                                <span class="label label-success hidden-xs"><i class="fa fa-fw fa-check" role="img" aria-label="Done" title="Done"></i><span class="hidden-xs"> Done</span></span>
+                                <span class="label label-success d-none d-md-inline-block"><i class="fa fa-fw fa-check" role="img" aria-label="Done" title="Done"></i><span class="d-none d-md-inline"> Done</span></span>
                             </t>
                         </td>
                         <td><span t-field="order.amount_total" t-options='{"widget": "monetary", "display_currency": order.pricelist_id.currency_id}'/></td>
@@ -145,7 +145,7 @@
                         </t>
                     </h4>
                 </div>
-                <div class="col-md-6 col-sm-3 col-xs-3 hidden-print" id="o_portal_order_actions">
+                <div class="col-md-6 col-sm-3 col-xs-3 d-print-none" id="o_portal_order_actions">
                     <t t-if="order.state == 'sent' and portal_confirmation == 'sign'" name="portal_confirmation_sign">
                         <a role="button" class="btn btn-primary ml8 pull-right" href="#portal_sign">
                             <i class="fa fa-arrow-circle-right"/> Accept &amp; Sign
@@ -220,16 +220,16 @@
                 <div t-att-class="'col-lg-4 col-sm-4 col-xs-5' if display_discount else 'col-lg-5 col-sm-5 col-xs-6'">
                   <strong>Product</strong>
                 </div>
-                <div class="col-sm-3 hidden-xs text-right">
+                <div class="col-sm-3 d-none d-md-block text-right">
                   <strong>Unit Price</strong>
                 </div>
                 <div t-if="display_discount" class="col-xs-1 text-right" >
                   <strong>Discount</strong>
                 </div>
-                <div class="hidden-xs col-sm-2 text-right">
+                <div class="d-none d-md-block col-sm-2 text-right">
                   <strong>Quantity</strong>
                 </div>
-                <div class="col-xs-2 hidden-sm hidden-md hidden-lg text-right">
+                <div class="col-xs-2 d-md-none text-right">
                   <strong>Qty.</strong>
                 </div>
                 <div class="col-sm-2 col-xs-4 text-right">
@@ -246,13 +246,13 @@
 
                 <div t-attf-class="row orders_vertical_align {{ 'o_is_' + line.display_type if line.display_type else '' }} pt8 pb8">
                   <t t-if="not line.display_type">
-                      <div class="visible-lg col-lg-1 text-center">
+                      <div class="d-none d-xl-block col-lg-1 text-center">
                         <span t-field="line.product_image" t-options="{'widget': 'image', 'class': 'img-rounded', 'style':'width: 48px;height:48px'}" />
                       </div>
                       <div id='product_name' t-att-class="'col-lg-3 col-sm-4 col-xs-5' if display_discount else 'col-lg-4 col-sm-5 col-xs-6'">
                         <span t-field="line.product_id.name"/>
                       </div>
-                    <div class="col-sm-3 hidden-xs text-right">
+                    <div class="col-sm-3 d-none d-md-block text-right">
                       <span t-field="line.price_unit" t-options='{"widget": "monetary", "display_currency": order.pricelist_id.currency_id}'/>
                     </div>
                     <div t-if="display_discount" class="col-xs-1 text-right" style='white-space: nowrap'>
diff --git a/addons/stock/views/stock_picking_views.xml b/addons/stock/views/stock_picking_views.xml
index 1f45fbcc9e7..56be0930cb4 100644
--- a/addons/stock/views/stock_picking_views.xml
+++ b/addons/stock/views/stock_picking_views.xml
@@ -235,7 +235,7 @@
                             attrs="{'invisible': [('has_packages', '=', False)]}"/>
                         <button name="%(action_stock_report)d" icon="fa-arrow-up" class="oe_stat_button" string="Traceability Report" type="action" attrs="{'invisible': ['|', ('state', '!=', 'done'), ('has_tracking', '=', False)]}" groups="stock.group_production_lot"/>
                     </div>
-                    <h1 class="hidden-xs">
+                    <h1 class="d-none d-md-block">
                         <field name="name" attrs="{'invisible': [('name','=','/')]}" readonly="1"/>
                     </h1>
                     <group>
diff --git a/addons/survey/static/src/js/survey_result.js b/addons/survey/static/src/js/survey_result.js
index 373296ba8ef..0b4003f5991 100644
--- a/addons/survey/static/src/js/survey_result.js
+++ b/addons/survey/static/src/js/survey_result.js
@@ -14,19 +14,19 @@ if(!$('.js_surveyresult').length) {
     $.each(survey_pagination, function(index, pagination){
         var question_id = $(pagination).attr("data-question_id");
         var limit = $(pagination).attr("data-record_limit"); //Number of Record Par Page. If you want to change number of record per page, change record_limit in pagination template.
-        $('#table_question_'+ question_id +' tbody tr:lt('+limit+')').removeClass('hidden');
+        $('#table_question_'+ question_id +' tbody tr:lt('+limit+')').removeClass('d-none');
         $('#pagination_'+question_id+' li a').click(function(event){
             event.preventDefault();
             $('#pagination_'+question_id+' li').removeClass('active');
             $(this).parent('li').addClass('active');
-            $('#table_question_'+ question_id +' tbody tr').addClass('hidden');
+            $('#table_question_'+ question_id +' tbody tr').addClass('d-none');
             var num = $(this).text();
             var min = (limit * (num-1))-1;
             if (min == -1){
-                $('#table_question_'+ question_id +' tbody tr:lt('+ limit * num +')').removeClass('hidden');
+                $('#table_question_'+ question_id +' tbody tr:lt('+ limit * num +')').removeClass('d-none');
             }
             else{
-                $('#table_question_'+question_id+' tbody tr:lt('+ limit * num +'):gt('+min+')').removeClass('hidden');
+                $('#table_question_'+question_id+' tbody tr:lt('+ limit * num +'):gt('+min+')').removeClass('d-none');
             }
         });
         $('#pagination_'+question_id+' li:first').addClass('active').find('a').click();
diff --git a/addons/survey/views/survey_result.xml b/addons/survey/views/survey_result.xml
index 89c8e7768b9..c8c30561fce 100644
--- a/addons/survey/views/survey_result.xml
+++ b/addons/survey/views/survey_result.xml
@@ -10,7 +10,7 @@
                     <h1><span t-field="survey.title" /> <span style="font-size:1.5em;" class="fa fa-bar-chart-o pull-right " role="img" aria-label="Chart" title="Chart"/></h1>
                     <div t-field="survey.description" class="oe_no_empty" />
                 </div>
-                <div class="panel panel-default hidden-print">
+                <div class="panel panel-default d-print-none">
                     <div class="panel-heading"><span class="fa fa-filter"></span>  Filters <span t-if="filter_display_data" class="pull-right text-primary clear_survey_filter"><i class="fa fa-times"></i> Clear All Filters</span></div>
                     <div class="panel-body">
                         <span t-if="filter_finish == True">
@@ -135,7 +135,7 @@
     <template id="result_choice" name="Choice Result">
         <div>
             <!-- Tabs -->
-            <ul class="nav nav-tabs hidden-print" role="tablist">
+            <ul class="nav nav-tabs d-print-none" role="tablist">
                 <li class="active" t-if="question.type != 'simple_choice'">
                     <a t-att-href="'#graph_question_%d' % question.id" t-att-aria-controls="'graph_question_%d' % question.id" data-toggle="tab" role="tab">
                         <i class="fa fa-bar-chart-o"></i> Graph
@@ -199,7 +199,7 @@
     <template id="result_matrix" name="Matrix Result">
         <t t-set="matrix_result" t-value="prepare_result"/>
         <!-- Tabs -->
-        <ul class="nav nav-tabs hidden-print" role="tablist">
+        <ul class="nav nav-tabs d-print-none" role="tablist">
             <li class="active">
                 <a t-att-href="'#graph_question_%d' % question.id" t-att-aria-controls="'graph_question_%d' % question.id" data-toggle="tab" role="tab">
                     <i class="fa fa-bar-chart"></i>
@@ -261,7 +261,7 @@
             <span class="label label-default only_left_radius">Minimum </span> <span class="label label-danger only_right_radius" t-esc="number_result['min']"></span>
             <span class="label label-default only_left_radius">Average </span> <span class="label label-warning only_right_radius" t-esc="number_result['average']"></span>
         </span>
-        <ul class="nav nav-tabs hidden-print" role="tablist">
+        <ul class="nav nav-tabs d-print-none" role="tablist">
             <li class="active">
                 <a t-att-href="'#most_common_%d' % question.id" t-att-aria-controls="'most_common_%d' % question.id" data-toggle="tab" role="tab">
                     <i class="fa fa-list-ol"></i>
@@ -305,7 +305,7 @@
                         </tr>
                     </thead>
                     <tbody>
-                        <tr class="hidden" t-foreach="number_result['input_lines']" t-as="user_input">
+                        <tr class="d-none" t-foreach="number_result['input_lines']" t-as="user_input">
                             <td><a t-att-href="'%s/%s' % (user_input.user_input_id.print_url, user_input.user_input_id.token)"><t t-esc="user_input_index + 1"></t></a></td>
                             <td><span t-field="user_input.value_number"></span><br/></td>
                         </tr>
diff --git a/addons/web/static/src/js/views/pivot/pivot_renderer.js b/addons/web/static/src/js/views/pivot/pivot_renderer.js
index b3953076161..522817bd418 100644
--- a/addons/web/static/src/js/views/pivot/pivot_renderer.js
+++ b/addons/web/static/src/js/views/pivot/pivot_renderer.js
@@ -105,7 +105,7 @@ var PivotRenderer = AbstractRenderer.extend({
                 }
                 $row.append($cell);
 
-                $cell.toggleClass('hidden-xs', (cell.expanded !== undefined) || (cell.measure !== undefined && j < headers[i].length - this.state.measures.length));
+                $cell.toggleClass('d-none d-md-table-cell', (cell.expanded !== undefined) || (cell.measure !== undefined && j < headers[i].length - this.state.measures.length));
                 if (cell.height > 1) {
                     $cell.css('padding', 0);
                 }
@@ -159,7 +159,7 @@ var PivotRenderer = AbstractRenderer.extend({
                 }
                 $row.append($cell);
 
-                $cell.toggleClass('hidden-xs', j < length - nbrMeasures);
+                $cell.toggleClass('d-none d-md-table-cell', j < length - nbrMeasures);
             }
             $tbody.append($row);
         }
diff --git a/addons/web/static/src/js/widgets/model_field_selector.js b/addons/web/static/src/js/widgets/model_field_selector.js
index 81abfbe0d6c..e9990ac5105 100644
--- a/addons/web/static/src/js/widgets/model_field_selector.js
+++ b/addons/web/static/src/js/widgets/model_field_selector.js
@@ -253,7 +253,7 @@ var ModelFieldSelector = Widget.extend({
         if (!this._isOpen) return;
 
         this._isOpen = false;
-        this.$popover.addClass("hidden");
+        this.$popover.addClass('d-none');
 
         if (this.dirty) {
             this.dirty = false;
@@ -332,7 +332,7 @@ var ModelFieldSelector = Widget.extend({
         }));
 
         // Toggle the warning message
-        this.$valid.toggleClass("hidden", !!this.isValid());
+        this.$valid.toggleClass('d-none', !!this.isValid());
 
         // Adapt the popover content
         var page = _.last(this.pages);
@@ -376,7 +376,7 @@ var ModelFieldSelector = Widget.extend({
         if (this._isOpen) return;
 
         this._isOpen = true;
-        this.$popover.removeClass("hidden");
+        this.$popover.removeClass('d-none');
     },
     /**
      * Toggles the valid status of the widget and display the error message if
diff --git a/addons/web/static/src/scss/report.scss b/addons/web/static/src/scss/report.scss
index a2df1fbc69b..2d1fcf243bb 100644
--- a/addons/web/static/src/scss/report.scss
+++ b/addons/web/static/src/scss/report.scss
@@ -30,7 +30,7 @@ body {
 }
 
 /* Wkhtmltopdf doesn't support very well the media-print CSS (depends on the version) */
-.hidden-print{
+.d-print-none{
     display: none;
 }
 
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index b92c143dc5f..14b49945fcb 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -692,7 +692,7 @@
                 </option>
             </select>
         </div>
-        <div t-attf-class="o_ds_value_cell#{_.contains(['set', 'not set'], widget.displayOperator) ? ' hidden' : ''}">
+        <div t-attf-class="o_ds_value_cell#{_.contains(['set', 'not set'], widget.displayOperator) ? ' d-none' : ''}">
             <t t-if="widget.selectionChoices !== null">
                 <select class="o_domain_leaf_value_input o_input">
                     <option t-foreach="widget.selectionChoices" t-as="val"
@@ -747,9 +747,9 @@
 <div aria-atomic="true" t-name="ModelFieldSelector" t-attf-class="o_field_selector#{!widget.options.readonly ? ' o_edit_mode o_input' : ''}">
     <div class="o_field_selector_value" tabindex="0"/>
     <div class="o_field_selector_controls" tabindex="0">
-        <i role="alert" class="fa fa-exclamation-triangle o_field_selector_warning hidden" title="Invalid field chain" aria-label="Invalid field chain"/>
+        <i role="alert" class="fa fa-exclamation-triangle o_field_selector_warning d-none" title="Invalid field chain" aria-label="Invalid field chain"/>
     </div>
-    <div t-if="!widget.options.readonly" class="o_field_selector_popover hidden" tabindex="0">
+    <div t-if="!widget.options.readonly" class="o_field_selector_popover d-none" tabindex="0">
         <div class="o_field_selector_popover_header text-center">
             <i class="fa fa-arrow-left o_field_selector_popover_option o_field_selector_prev_page" title="Previous" role="img" aria-label="Previous"/>
             <div class="o_field_selector_title"/>
@@ -839,7 +839,7 @@
 </t>
 <t t-name="FieldReference" t-extend="FieldMany2One">
     <t t-jquery=".o_input_dropdown" t-operation="before">
-        <select t-att-class="'o_input o_field_widget' + (widget.nodeOptions.hide_model and ' hidden' or '')">
+        <select t-att-class="'o_input o_field_widget' + (widget.nodeOptions.hide_model and ' d-none' or '')">
             <option/>
             <option t-foreach="widget.field.selection" t-as="model" t-att-value="model[0]"><t t-esc="model[1]"/></option>
         </select>
@@ -1506,7 +1506,7 @@
 <t t-name="BaseSetting.Tabs">
     <t t-foreach="tabItems" t-as="tab">
         <div class="tab" t-attf-data-key="#{tab.key}" role="tab">
-            <div class="icon hidden-xs" t-attf-style="background : url('#{imgurl}') no-repeat center;background-size:contain;"/> <span class="app_name"><t t-esc="tab.string"/></span>
+            <div class="icon d-none d-md-block" t-attf-style="background : url('#{imgurl}') no-repeat center;background-size:contain;"/> <span class="app_name"><t t-esc="tab.string"/></span>
         </div>
     </t>
 </t>
@@ -1521,7 +1521,7 @@
 <t t-name="AttachDocument">
     <button class="btn btn-sm btn-default o_attachment_button">
         <span class="o_attach_document"><t t-esc="widget.node.attrs.string"/></span>
-        <span class="hide">
+        <span class="d-none">
             <t t-call="HiddenInputFile">
                 <t t-set="fileupload_id" t-value="widget.fileuploadID"/>
                 <t t-set="fileupload_action" t-translation="off">/web/binary/upload_attachment</t>
diff --git a/addons/web/static/src/xml/web_calendar.xml b/addons/web/static/src/xml/web_calendar.xml
index 41f772cd52f..b3c0e614d90 100644
--- a/addons/web/static/src/xml/web_calendar.xml
+++ b/addons/web/static/src/xml/web_calendar.xml
@@ -4,7 +4,7 @@
             <div class="o_calendar_buttons" role="toolbar" aria-label="Calendar toolbar"/>
             <div class="o_calendar_widget" />
         </div>
-        <div class="o_calendar_sidebar_container hidden-xs">
+        <div class="o_calendar_sidebar_container d-none d-md-block">
             <i class="o_calendar_sidebar_toggler fa"/>
             <div class="o_calendar_sidebar">
                 <div class="o_calendar_mini"/>
diff --git a/addons/web_editor/static/src/js/editor/rte.summernote.js b/addons/web_editor/static/src/js/editor/rte.summernote.js
index 6f45452f466..0661d62dc30 100644
--- a/addons/web_editor/static/src/js/editor/rte.summernote.js
+++ b/addons/web_editor/static/src/js/editor/rte.summernote.js
@@ -86,7 +86,7 @@ renderer.tplPopovers = function (lang, options) {
     var $airPopover = $popover.find('.note-air-popover');
 
     if (window === window.top) {
-        $popover.children().addClass("hidden-xs");
+        $popover.children().addClass("d-none d-md-block");
     }
 
     //////////////// image popover
@@ -124,7 +124,7 @@ renderer.tplPopovers = function (lang, options) {
     })).insertAfter($imagePopover.find('[data-event="imageShape"][data-value="img-circle"]'));
 
     // add spin for fa
-    var $spin = $('<div class="btn-group hidden only_fa"/>').insertAfter($button.parent());
+    var $spin = $('<div class="btn-group d-none only_fa"/>').insertAfter($button.parent());
     $(tplIconButton('fa fa-refresh', {
             title: _t('Spin'),
             event: 'imageShape',
@@ -132,7 +132,7 @@ renderer.tplPopovers = function (lang, options) {
         })).appendTo($spin);
 
     // resize for fa
-    var $resizefa = $('<div class="btn-group hidden only_fa"/>')
+    var $resizefa = $('<div class="btn-group d-none only_fa"/>')
         .insertAfter($imagePopover.find('.btn-group:has([data-event="resize"])'));
     for (var size=1; size<=5; size++) {
         $(tplButton('<span class="note-fontsize-10">'+size+'x</span>', {
@@ -220,7 +220,7 @@ eventHandler.modules.popover.button.update = function ($container, oStyle) {
 
     fn_boutton_update.call(this, $container, oStyle);
 
-    $container.find('.note-color').removeClass("hidden");
+    $container.find('.note-color').removeClass('d-none');
 
     if (oStyle.image) {
         $container.find('[data-event]').parent().removeClass("active");
@@ -234,8 +234,8 @@ eventHandler.modules.popover.button.update = function ($container, oStyle) {
         $(oStyle.image).addClass('o_we_selected_image');
 
         if (dom.isImgFont(oStyle.image)) {
-            $container.find('.btn-group:not(.only_fa):has(button[data-event="resize"],button[data-value="img-thumbnail"])').addClass("hidden");
-            $container.find('.only_fa').removeClass("hidden");
+            $container.find('.btn-group:not(.only_fa):has(button[data-event="resize"],button[data-value="img-thumbnail"])').addClass('d-none');
+            $container.find('.only_fa').removeClass('d-none');
             $container.find('button[data-event="resizefa"][data-value="2"]').toggleClass("active", $(oStyle.image).hasClass("fa-2x"));
             $container.find('button[data-event="resizefa"][data-value="3"]').toggleClass("active", $(oStyle.image).hasClass("fa-3x"));
             $container.find('button[data-event="resizefa"][data-value="4"]').toggleClass("active", $(oStyle.image).hasClass("fa-4x"));
@@ -246,8 +246,8 @@ eventHandler.modules.popover.button.update = function ($container, oStyle) {
             $container.find('button[data-event="imageShape"][data-value="shadow"]').toggleClass("active", $(oStyle.image).hasClass("shadow"));
 
         } else {
-            $container.find('.hidden:not(.only_fa)').removeClass("hidden");
-            $container.find('.only_fa').addClass("hidden");
+            $container.find('.d-none:not(.only_fa)').removeClass('d-none');
+            $container.find('.only_fa').addClass('d-none');
             var width = ($(oStyle.image).attr('style') || '').match(/(^|;|\s)width:\s*([0-9]+%)/);
             if (width) {
                 width = width[2];
@@ -260,10 +260,10 @@ eventHandler.modules.popover.button.update = function ($container, oStyle) {
             $container.find('button[data-event="imageShape"][data-value="shadow"]').toggleClass("active", $(oStyle.image).hasClass("shadow"));
 
             if (!$(oStyle.image).is("img")) {
-                $container.find('.btn-group:has(button[data-event="imageShape"])').addClass("hidden");
+                $container.find('.btn-group:has(button[data-event="imageShape"])').addClass('d-none');
             }
 
-            $container.find('.note-color').addClass("hidden");
+            $container.find('.note-color').addClass('d-none');
         }
 
         $container.find('button[data-event="floatMe"][data-value="left"]').toggleClass("active", $(oStyle.image).hasClass("pull-left"));
diff --git a/addons/web_editor/static/src/js/editor/snippets.editor.js b/addons/web_editor/static/src/js/editor/snippets.editor.js
index 6ed77009150..d03e7a4a03d 100644
--- a/addons/web_editor/static/src/js/editor/snippets.editor.js
+++ b/addons/web_editor/static/src/js/editor/snippets.editor.js
@@ -76,7 +76,7 @@ var SnippetEditor = Widget.extend({
                     var $clone = $(this).clone().css({width: '24px', height: '24px', border: 0});
                     $clone.find('.oe_overlay_options >:not(:contains(.oe_snippet_move)), .o_handle').remove();
                     $clone.find(':not(.glyphicon)').css({position: 'absolute', top: 0, left: 0});
-                    $clone.appendTo('body').removeClass('hidden');
+                    $clone.appendTo('body').removeClass('d-none');
                     return $clone;
                 },
                 start: _.bind(self._onDragAndDropStart, self),
@@ -214,11 +214,11 @@ var SnippetEditor = Widget.extend({
                     count++;
                 }
             });
-            $el.toggleClass('hidden', count === 0);
+            $el.toggleClass('d-none', count === 0);
         }).bind(this));
 
         // Activate the overlay
-        $style_button.toggleClass('hidden', $ul.children(':not(.o_main_header):not(.divider):not(.hidden)').length === 0);
+        $style_button.toggleClass('d-none', $ul.children(':not(.o_main_header):not(.divider):not(.d-none)').length === 0);
         this.cover();
         this.$el.toggleClass('oe_active', !!focus);
 
@@ -304,7 +304,7 @@ var SnippetEditor = Widget.extend({
         });
 
         if (!this.selectorSiblings.length && !this.selectorChildren.length) {
-            this.$el.find('.oe_snippet_move, .oe_snippet_clone').addClass('hidden');
+            this.$el.find('.oe_snippet_move, .oe_snippet_clone').addClass('d-none');
         }
 
         this.$el.find('[data-toggle="dropdown"]').dropdown();
@@ -362,7 +362,7 @@ var SnippetEditor = Widget.extend({
         };
         self.$target.after('<div class="oe_drop_clone" style="display: none;"/>');
         self.$target.detach();
-        self.$el.addClass('hidden');
+        self.$el.addClass('d-none');
 
         var $selectorSiblings;
         for (var i = 0 ; i < self.selectorSiblings.length ; i++) {
@@ -419,7 +419,7 @@ var SnippetEditor = Widget.extend({
         }
         $clone.after(this.$target);
 
-        this.$el.removeClass('hidden');
+        this.$el.removeClass('d-none');
         $('body').removeClass('move-important');
         $clone.remove();
 
@@ -987,7 +987,7 @@ var SnippetsMenu = Widget.extend({
             self.templateOptions.push(option);
             selectors.push(option.selector);
         });
-        $styles.addClass('hidden');
+        $styles.addClass('d-none');
 
         globalSelector.closest = function ($from) {
             var $temp;
@@ -1218,14 +1218,14 @@ var SnippetsMenu = Widget.extend({
                 $('.oe_drop_zone').droppable({
                     over: function () {
                         dropped = true;
-                        $(this).first().after($toInsert).addClass('hidden');
+                        $(this).first().after($toInsert).addClass('d-none');
                     },
                     out: function () {
                         var prev = $toInsert.prev();
                         if (this === prev[0]) {
                             dropped = false;
                             $toInsert.detach();
-                            $(this).removeClass('hidden');
+                            $(this).removeClass('d-none');
                         }
                     },
                 });
diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js
index 097f3d3b12f..54e92b60028 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -811,14 +811,14 @@ registry.background = SnippetOption.extend({
      */
     chooseImage: function (previewMode, value, $li) {
         // Put fake image in the DOM, edit it and use it as background-image
-        var $image = $('<img/>', {class: 'hidden', src: value}).appendTo(this.$target);
+        var $image = $('<img/>', {class: 'd-none', src: value}).appendTo(this.$target);
 
         var $editable = this.$target.closest('.o_editable');
         var _editor = new weWidgets.MediaDialog(this, {
             onlyImages: true,
             firstFilters: ['background'],
             res_model: $editable.data('oe-model'),
-            res_id: $editable.data('oe-id'),            
+            res_id: $editable.data('oe-id'),
         }, null, $image[0]).open();
 
         _editor.on('save', this, function () {
@@ -926,7 +926,7 @@ registry.background_position = SnippetOption.extend({
      * @override
      */
     onFocus: function () {
-        this.$el.toggleClass('hidden', this.$target.css('background-image') === 'none');
+        this.$el.toggleClass('d-none', this.$target.css('background-image') === 'none');
     },
 
     //--------------------------------------------------------------------------
@@ -1153,8 +1153,8 @@ registry.many2one = SnippetOption.extend({
 
         // move menu item
         setTimeout(function () {
-            if (self.$overlay.find('.oe_options').hasClass('hidden')) {
-                self.$btn.css('height', '0').find('> a').addClass('hidden');
+            if (self.$overlay.find('.oe_options').hasClass('d-none')) {
+                self.$btn.css('height', '0').find('> a').addClass('d-none');
                 self.$ul.show().css({
                     'top': '-24px', 'margin': '0', 'padding': '2px 0', 'position': 'relative'
                 });
diff --git a/addons/web_editor/static/src/js/editor/translator.js b/addons/web_editor/static/src/js/editor/translator.js
index e3ba65a54d7..0ec7d267f66 100644
--- a/addons/web_editor/static/src/js/editor/translator.js
+++ b/addons/web_editor/static/src/js/editor/translator.js
@@ -138,7 +138,7 @@ var TranslatorMenuBar = Widget.extend({
                 var translation = $node.data('translation') || {};
                 var trans = $node.attr(attr);
                 var match = trans.match(/<span [^>]*data-oe-translation-id="([0-9]+)"[^>]*>(.*)<\/span>/);
-                var $trans = $(trans).addClass('hidden o_editable o_editable_translatable_attribute').appendTo('body');
+                var $trans = $(trans).addClass('d-none o_editable o_editable_translatable_attribute').appendTo('body');
                 $trans.data('$node', $node).data('attribute', attr);
                 translation[attr] = $trans[0];
                 $node.attr(attr, match[2]);
diff --git a/addons/web_editor/static/src/js/inline.js b/addons/web_editor/static/src/js/inline.js
index 7409f9190f3..fb2247313bd 100644
--- a/addons/web_editor/static/src/js/inline.js
+++ b/addons/web_editor/static/src/js/inline.js
@@ -10,7 +10,7 @@ var snippet_editor = require('web_editor.snippet.editor');
 
 weWidgets.MediaDialog.include({
     start: function () {
-        this.$('[href="#editor-media-video"]').addClass('hidden');
+        this.$('[href="#editor-media-video"]').addClass('d-none');
         return this._super.apply(this, arguments);
     },
 });
diff --git a/addons/web_editor/static/src/js/widgets/ace.js b/addons/web_editor/static/src/js/widgets/ace.js
index a92c56cae05..c6cbb43295f 100644
--- a/addons/web_editor/static/src/js/widgets/ace.js
+++ b/addons/web_editor/static/src/js/widgets/ace.js
@@ -252,7 +252,7 @@ var ViewEditor = Widget.extend({
         if (!this.sortedViews.length || !this.sortedSCSS.length) {
             _.defer((function () {
                 this._switchType(this.sortedViews.length ? 'xml' : 'scss');
-                this.$typeSwitcherBtn.parent('.btn-group').addClass('hidden');
+                this.$typeSwitcherBtn.parent('.btn-group').addClass('d-none');
             }).bind(this));
         }
 
@@ -365,7 +365,7 @@ var ViewEditor = Widget.extend({
         }
         this.$lists[this.currentType].select2('val', resID);
 
-        this.$resetButton.toggleClass('hidden', this.currentType === 'xml' || !this.scss[resID].customized);
+        this.$resetButton.toggleClass('d-none', this.currentType === 'xml' || !this.scss[resID].customized);
     },
     /**
      * Formats the current resource being vizualized.
@@ -662,12 +662,12 @@ var ViewEditor = Widget.extend({
     _switchType: function (type) {
         this.currentType = type;
         this.$typeSwitcherBtn.html(this.$typeSwitcherChoices.filter('[data-type=' + type + ']').html());
-        _.each(this.$lists, function ($list, _type) { $list.toggleClass('hidden', type !== _type); });
+        _.each(this.$lists, function ($list, _type) { $list.toggleClass('d-none', type !== _type); });
         this.$lists[type].change();
 
-        this.$includeBundlesArea.toggleClass('hidden', this.currentType === 'scss' || !session.debug);
-        this.$includeAllSCSSArea.toggleClass('hidden', this.currentType === 'xml' || !session.debug || this.options.defaultBundlesRestriction.length === 0);
-        this.$formatButton.toggleClass('hidden', this.currentType === 'scss');
+        this.$includeBundlesArea.toggleClass('d-none', this.currentType === 'scss' || !session.debug);
+        this.$includeAllSCSSArea.toggleClass('d-none', this.currentType === 'xml' || !session.debug || this.options.defaultBundlesRestriction.length === 0);
+        this.$formatButton.toggleClass('d-none', this.currentType === 'scss');
     },
     /**
      * Updates the select option DOM element associated with a particular resID
diff --git a/addons/web_editor/static/src/js/widgets/widgets.js b/addons/web_editor/static/src/js/widgets/widgets.js
index 5f00723865d..8148f61a4f8 100644
--- a/addons/web_editor/static/src/js/widgets/widgets.js
+++ b/addons/web_editor/static/src/js/widgets/widgets.js
@@ -988,7 +988,7 @@ var VideoWidget = MediaWidget.extend({
         // Reset the feedback
         this.$content.empty();
         this.$('#o_video_form_group').removeClass('has-error has-success');
-        this.$('.o_video_dialog_options li').addClass('hidden');
+        this.$('.o_video_dialog_options li').addClass('d-none');
 
         // Check video code
         var $textarea = this.$('textarea#o_video_text');
@@ -1017,20 +1017,20 @@ var VideoWidget = MediaWidget.extend({
         var $opt_box = this.$('.o_video_dialog_options');
 
         // Show / Hide preview elements
-        this.$el.find('.o_video_dialog_preview_text, .media_iframe_video_size').add($opt_box).toggleClass('hidden', !query.$video);
+        this.$el.find('.o_video_dialog_preview_text, .media_iframe_video_size').add($opt_box).toggleClass('d-none', !query.$video);
         // Toggle validation classes
         this.$el.find('#o_video_form_group').toggleClass('has-error', !query.$video).toggleClass('has-success', !!query.$video);
 
         // Individually show / hide options base on the video provider
-        $opt_box.find('li.o_' + query.type + '_option').removeClass('hidden');
+        $opt_box.find('li.o_' + query.type + '_option').removeClass('d-none');
 
         // Hide the entire options box if no options are available
-        $opt_box.toggleClass('hidden', $opt_box.find('li:not(.hidden)').length === 0);
+        $opt_box.toggleClass('d-none', $opt_box.find('li:not(.d-none)').length === 0);
 
         if (query.type === 'yt') {
             // Youtube only: If 'hide controls' is checked, hide 'fullscreen'
             // and 'youtube logo' options too
-            this.$('input#o_video_hide_fullscreen, input#o_video_hide_yt_logo').closest('li').toggleClass('hidden', this.$('input#o_video_hide_controls').is(':checked'));
+            this.$('input#o_video_hide_fullscreen, input#o_video_hide_yt_logo').closest('li').toggleClass('d-none', this.$('input#o_video_hide_controls').is(':checked'));
         }
 
         var $content = query.$video;
@@ -1268,8 +1268,8 @@ var MediaDialog = Dialog.extend({
      */
     _updateControlPanel: function () {
         var cpConfig = this.active.getControlPanelConfig();
-        this.$('li.search').toggleClass("hidden", !cpConfig.searchEnabled);
-        this.$('li.previous, li.next').toggleClass("hidden", !cpConfig.pagerEnabled);
+        this.$('li.search').toggleClass('d-none', !cpConfig.searchEnabled);
+        this.$('li.previous, li.next').toggleClass('d-none', !cpConfig.pagerEnabled);
         this.$('li.previous > a').toggleClass("disabled", !cpConfig.pagerLeftEnabled);
         this.$('li.next > a').toggleClass("disabled", !cpConfig.pagerRightEnabled);
     },
@@ -1556,7 +1556,7 @@ var LinkDialog = Dialog.extend({
     _onURLInput: function (ev) {
         $(ev.currentTarget).closest('.form-group').removeClass('has-error');
         var isLink = $(ev.currentTarget).val().indexOf('@') < 0;
-        this.$('input[name="is_new_window"]').closest('.form-group').toggleClass('hidden', !isLink);
+        this.$('input[name="is_new_window"]').closest('.form-group').toggleClass('d-none', !isLink);
     },
 });
 
diff --git a/addons/web_editor/static/src/xml/ace.xml b/addons/web_editor/static/src/xml/ace.xml
index de713540a67..b65af78b3dc 100644
--- a/addons/web_editor/static/src/xml/ace.xml
+++ b/addons/web_editor/static/src/xml/ace.xml
@@ -12,14 +12,14 @@
                 </ul>
             </div>
             <select id="ace-view-list" class="o_res_list"/>
-            <select id="ace-scss-list" class="o_res_list hidden"/>
+            <select id="ace-scss-list" class="o_res_list d-none"/>
             <label class="o_include_option oe_include_bundles">
                 <div class="o_checkbox">
                     <input type="checkbox" class="js_include_bundles" t-att-checked="widget.options.includeBundles ? 'checked' : undefined"/><span/>
                 </div>
                 Include Asset Bundles
             </label>
-            <label class="o_include_option o_include_all_scss hidden">
+            <label class="o_include_option o_include_all_scss d-none">
                 <div class="o_checkbox">
                     <input type="checkbox" class="js_include_all_scss" t-att-checked="widget.options.includeAllSCSS ? 'checked' : undefined"/><span/>
                 </div>
diff --git a/addons/web_editor/static/src/xml/editor.xml b/addons/web_editor/static/src/xml/editor.xml
index 3c3085bfe79..f4a34c5ab4b 100644
--- a/addons/web_editor/static/src/xml/editor.xml
+++ b/addons/web_editor/static/src/xml/editor.xml
@@ -47,10 +47,10 @@
     <!-- Media Dialog (allows to choose an img/pictogram/video) -->
     <div t-name="web_editor.dialog.media">
         <ul class="nav nav-tabs" role="tablist">
-            <li class="active"><a role="tab" href="#editor-media-image" aria-controls="editor-media-image" data-toggle="tab" t-att-class="widget.noImages ? 'hidden' : ''">Image</a></li>
-            <li><a role="tab" href="#editor-media-document" aria-controls="editor-media-document" data-toggle="tab" t-att-class="widget.noDocuments ? 'hidden' : ''">Document</a></li>
-            <li><a role="tab" href="#editor-media-icon" aria-controls="editor-media-icon" data-toggle="tab" t-att-class="widget.noIcons ? 'hidden' : ''">Pictogram</a></li>
-            <li><a role="tab" href="#editor-media-video" aria-controls="editor-media-video" data-toggle="tab" t-att-class="widget.noVideos ? 'hidden' : ''">Video</a></li>
+            <li class="active"><a role="tab" href="#editor-media-image" aria-controls="editor-media-image" data-toggle="tab" t-att-class="widget.noImages ? 'd-none' : ''">Image</a></li>
+            <li><a role="tab" href="#editor-media-document" aria-controls="editor-media-document" data-toggle="tab" t-att-class="widget.noDocuments ? 'd-none' : ''">Document</a></li>
+            <li><a role="tab" href="#editor-media-icon" aria-controls="editor-media-icon" data-toggle="tab" t-att-class="widget.noIcons ? 'd-none' : ''">Pictogram</a></li>
+            <li><a role="tab" href="#editor-media-video" aria-controls="editor-media-video" data-toggle="tab" t-att-class="widget.noVideos ? 'd-none' : ''">Video</a></li>
             <li class="search pull-right">
                 <ul class="pager mb0 mt0">
                     <li class="previous">
@@ -90,7 +90,7 @@
             <input t-if="widget.options.res_model" type="hidden" name="res_model" t-att-value="widget.options.res_model"/>
             <div class="well">
                 <div class="form-group pull-left">
-                    <input type="file" class="hidden" name="upload" t-att-accept="widget.accept" multiple="multiple"/>
+                    <input type="file" class="d-none" name="upload" t-att-accept="widget.accept" multiple="multiple"/>
                     <input type="hidden" name="disable_optimization" value=""/>
                     <div class="btn-group">
                         <button class="btn btn-primary o_upload_image_button" type="button">Upload an image</button>
@@ -118,7 +118,7 @@
             <div class="existing-attachments">
                 <t t-call="web_editor.dialog.image.existing"/>
             </div>
-            <iframe class="hidden" name="fileframe"/>
+            <iframe class="d-none" name="fileframe"/>
         </form>
     </t>
     <t t-name="web_editor.dialog.image.existing">
@@ -198,7 +198,7 @@
                 <div class="text-right">
                     <small class="text-muted">Accepts <b><i>Youtube</i></b>, <b><i>Instagram</i></b>, <b><i>Vine.co</i></b>, <b><i>Vimeo</i></b>, <b><i>Dailymotion</i></b> and <b><i>Youku</i></b> videos</small>
                 </div>
-                <div class="o_video_dialog_options hidden mt48">
+                <div class="o_video_dialog_options d-none mt48">
                     <small class="text-muted">Options</small>
                     <ul class="list-group">
                         <li class="list-group-item o_yt_option o_vim_option o_dm_option">
@@ -226,7 +226,7 @@
                 </div>
             </div>
             <div id="video-preview">
-                <div class="o_video_dialog_preview_text small mt16 mb8 hidden">Preview</div>
+                <div class="o_video_dialog_preview_text small mt16 mb8 d-none">Preview</div>
                 <div class="media_iframe_video">
                     <div class="media_iframe_video_size"/>
                     <iframe class="o_video_dialog_iframe" allowfullscreen="allowfullscreen" frameborder="0" src=""/>
@@ -239,7 +239,7 @@
     <div t-name="web_editor.dialog.link" class="o_link_dialog">
         <div class="row">
             <form class="col-md-8 form-horizontal">
-                <div t-attf-class="form-group#{widget.needLabel ? '' : ' hidden'}">
+                <div t-attf-class="form-group#{widget.needLabel ? '' : ' d-none'}">
                     <label class="control-label col-sm-3" for="o_link_dialog_label_input">Link Label</label>
                     <div class="col-sm-9">
                         <input type="text" name="label" class="form-control" id="o_link_dialog_label_input" required="required" t-att-value="widget.data.text"/>
@@ -268,12 +268,12 @@
                         <div class="o_link_dialog_color">
                             <label role="button" t-attf-class="o_link_dialog_color_item o_btn_preview btn btn-link text-center" data-color="">
                                 <span>L</span>
-                                <input class="hidden link-style" name="link_style_color" type="radio" value=""/>
+                                <input class="d-none link-style" name="link_style_color" type="radio" value=""/>
                                 <i class="fa"/>
                             </label>
                             <t t-foreach="['primary', 'default', 'success', 'info', 'warning', 'danger', 'alpha', 'beta', 'gamma', 'delta', 'epsilon']" t-as="color">
                                 <label role="button" t-attf-class="o_link_dialog_color_item o_btn_preview btn btn-#{color}" t-attf-aria-label="Color for #{color}" t-attf-title="Color for #{color}">
-                                    <input type="radio" name="link_style_color" class="hidden link-style" t-att-value="color"/>
+                                    <input type="radio" name="link_style_color" class="d-none link-style" t-att-value="color"/>
                                     <i class="fa"/>
                                 </label>
                             </t>
diff --git a/addons/web_editor/static/src/xml/snippets.xml b/addons/web_editor/static/src/xml/snippets.xml
index dcd245f9a3e..361a5780b4d 100644
--- a/addons/web_editor/static/src/xml/snippets.xml
+++ b/addons/web_editor/static/src/xml/snippets.xml
@@ -11,7 +11,7 @@
             <div class="oe_overlay_options" contentEditable="false">
                 <div class="btn-group">
                     <a role="button" href="#" class="btn btn-default btn-sm oe_snippet_parent" title="Select Parent Container" aria-label="Select Parent Container"><i class="fa fa-lg fa-level-up"/></a>
-                    <div class="dropdown oe_options hidden btn-group">
+                    <div class="dropdown oe_options d-none btn-group">
                         <a role="button" href="#" data-toggle="dropdown" class="btn btn-primary btn-sm" title="Customize">Customize</a>
                         <ul class="dropdown-menu" role="menu"/>
                     </div>
diff --git a/addons/web_editor/views/snippets.xml b/addons/web_editor/views/snippets.xml
index 096ea58a2ce..3d5cb0165ba 100644
--- a/addons/web_editor/views/snippets.xml
+++ b/addons/web_editor/views/snippets.xml
@@ -12,7 +12,7 @@
         </div>
     </div>
 
-    <div id="snippet_options" class="hidden">
+    <div id="snippet_options" class="d-none">
         <t t-call="web_editor.snippet_options"/>
     </div>
 </template>
diff --git a/addons/website/data/website_demo.xml b/addons/website/data/website_demo.xml
index 3dce4b0e5f9..e66a8e09b23 100644
--- a/addons/website/data/website_demo.xml
+++ b/addons/website/data/website_demo.xml
@@ -140,7 +140,7 @@ response = request.render("website.template_partner_comment", {
                   <t t-call="website.layout">
                     <div id="wrap" class="oe_structure oe_empty">
                       <div class="carousel slide mb32" id="myCarousel0" style="height: 320px;">
-                        <ol class="carousel-indicators hidden">
+                        <ol class="carousel-indicators d-none">
                           <li class="active" data-slide-to="0" data-target="#myCarousel0"/>
                         </ol>
                         <div class="carousel-inner">
@@ -154,15 +154,15 @@ response = request.render("website.template_partner_comment", {
                                     <a role="button" class="btn btn-success btn-large" href="/contactus">Contact us</a>
                                   </p>
                                 </div>
-                                <span class="carousel-img col-md-6 hidden-sm hidden-xs"> </span>
+                                <span class="carousel-img col-md-6 d-none d-lg-block"> </span>
                               </div>
                             </div>
                           </div>
                         </div>
-                        <div class="carousel-control left hidden" data-slide="prev" data-target="#myCarousel0" href="#myCarousel0" style="width: 10%" role="img" aria-label="Previous" title="Previous">
+                        <div class="carousel-control left d-none" data-slide="prev" data-target="#myCarousel0" href="#myCarousel0" style="width: 10%" role="img" aria-label="Previous" title="Previous">
                           <i class="fa fa-chevron-left"/>
                         </div>
-                        <div class="carousel-control right hidden" data-slide="next" data-target="#myCarousel0" href="#myCarousel0" style="width: 10%" role="img" aria-label="Next" title="Next">
+                        <div class="carousel-control right d-none" data-slide="next" data-target="#myCarousel0" href="#myCarousel0" style="width: 10%" role="img" aria-label="Next" title="Next">
                           <i class="fa fa-chevron-right"/>
                         </div>
                       </div>
diff --git a/addons/website/static/src/js/content/snippets.animation.js b/addons/website/static/src/js/content/snippets.animation.js
index 6c031037f65..5a31ff943db 100644
--- a/addons/website/static/src/js/content/snippets.animation.js
+++ b/addons/website/static/src/js/content/snippets.animation.js
@@ -771,7 +771,7 @@ registry.gallerySlider = Animation.extend({
 
         function hide() {
             $lis.each(function (i) {
-                $(this).toggleClass('hidden', !(i >= page*nbPerPage && i < (page+1)*nbPerPage));
+                $(this).toggleClass('d-none', !(i >= page*nbPerPage && i < (page+1)*nbPerPage));
             });
             if (self.editableMode) { // do not remove DOM in edit mode
                 return;
diff --git a/addons/website/static/src/js/editor/rte.summernote.js b/addons/website/static/src/js/editor/rte.summernote.js
index 95dc0cfc321..36cadca7a8d 100644
--- a/addons/website/static/src/js/editor/rte.summernote.js
+++ b/addons/website/static/src/js/editor/rte.summernote.js
@@ -54,6 +54,6 @@ eventHandler.modules.popover.button.update = function ($container, oStyle) {
     fn_boutton_update.call(this, $container, oStyle);
     $container.find('button[data-event="transform"]')
         .toggleClass('active', $(oStyle.image).is('[style*="transform"]'))
-        .toggleClass('hidden', !$(oStyle.image).is('img'));
+        .toggleClass('d-none', !$(oStyle.image).is('img'));
 };
 });
diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index 0e8080299b5..977edd2db96 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -188,7 +188,7 @@ options.registry.carousel = options.Class.extend({
         var cycle = this.$inner.find('.item').length;
         var $active = this.$inner.find('.item.active, .item.prev, .item.next').first();
         var index = $active.index();
-        this.$('.carousel-control, .carousel-indicators').removeClass('hidden');
+        this.$('.carousel-control, .carousel-indicators').removeClass('d-none');
         this.$indicators.append('<li data-target="#' + this.id + '" data-slide-to="' + cycle + '"></li>');
         var $clone = this.$('.item:first').clone(true);
         $clone.removeClass('active').insertAfter($active);
@@ -223,7 +223,7 @@ options.registry.carousel = options.Class.extend({
                 self._rebindEvents();
                 self.remove_process = false;
                 if (cycle === 1) {
-                    self.$target.find('.carousel-control, .carousel-indicators').addClass('hidden');
+                    self.$target.find('.carousel-control, .carousel-indicators').addClass('d-none');
                 }
             });
             _.defer(function () {
@@ -555,7 +555,7 @@ var FacebookPageDialog = weWidgets.Dialog.extend({
         this.trigger_up('animation_stop_demand', {
             $target: this.$previewPage,
         });
-        this.$('.facebook_page_warning').toggleClass('hidden', toggle);
+        this.$('.facebook_page_warning').toggleClass('d-none', toggle);
         this.$footer.find('.btn-primary').prop('disabled', !toggle);
     },
 
diff --git a/addons/website/static/src/js/menu/content.js b/addons/website/static/src/js/menu/content.js
index 1ff050b1b97..6595f9ba625 100644
--- a/addons/website/static/src/js/menu/content.js
+++ b/addons/website/static/src/js/menu/content.js
@@ -105,9 +105,9 @@ var PagePropertiesDialog = weWidgets.Dialog.extend({
 
         var defs = [this._super.apply(this, arguments)];
 
-        this.$('.ask_for_redirect').addClass('hidden');
-        this.$('.redirect_type').addClass('hidden');
-        this.$('.warn_about_call').addClass('hidden');
+        this.$('.ask_for_redirect').addClass('d-none');
+        this.$('.redirect_type').addClass('d-none');
+        this.$('.warn_about_call').addClass('d-none');
 
         defs.push(this._getPageDependencies(this.page_id, context)
         .then(function (dependencies) {
@@ -326,7 +326,7 @@ var PagePropertiesDialog = weWidgets.Dialog.extend({
      */
     _onUrlChanged: function () {
         var url = this.$('input#page_url').val();
-        this.$('.ask_for_redirect').toggleClass('hidden', url === this.page.url);
+        this.$('.ask_for_redirect').toggleClass('d-none', url === this.page.url);
     },
     /**
      * @private
@@ -338,7 +338,7 @@ var PagePropertiesDialog = weWidgets.Dialog.extend({
         // check only for url and not key
         var ext = '.' + this.page.name.split('.').pop();
         if (ext in this.supportedMimetype && ext !== '.html') {
-            this.$('.warn_about_call').toggleClass('hidden', name === this.page.name);
+            this.$('.warn_about_call').toggleClass('d-none', name === this.page.name);
         }
     },
     /**
@@ -346,7 +346,7 @@ var PagePropertiesDialog = weWidgets.Dialog.extend({
      */
     _onCreateRedirectChanged: function () {
         var createRedirect = this.$('input#create_redirect').prop('checked');
-        this.$('.redirect_type').toggleClass('hidden', !createRedirect);
+        this.$('.redirect_type').toggleClass('d-none', !createRedirect);
     },
 });
 
diff --git a/addons/website/static/src/xml/website.backend.xml b/addons/website/static/src/xml/website.backend.xml
index a5e14c2c0bc..e01d53482b6 100644
--- a/addons/website/static/src/xml/website.backend.xml
+++ b/addons/website/static/src/xml/website.backend.xml
@@ -61,8 +61,8 @@
     </div>
 
     <t t-name="website.DateRangeButtons">
-        <!-- TODO: Applied hidden-xs class as it is going to push in control panel and it breaks UI, maybe we will improve it in future -->
-        <div class="btn-group btn-group-sm o_date_range_buttons hidden-xs pull-right">
+        <!-- TODO: Hide in mobile as it is going to push in control panel and it breaks UI, maybe we will improve it in future -->
+        <div class="btn-group btn-group-sm o_date_range_buttons d-none d-md-inline-flex pull-right">
             <button class="btn btn-sm btn-default js_date_range active" data-date="week">Last Week</button>
             <button class="btn btn-sm btn-default js_date_range" data-date="month">Last Month</button>
             <button class="btn btn-sm btn-default js_date_range" data-date="year">Last Year</button>
diff --git a/addons/website/static/src/xml/website.editor.xml b/addons/website/static/src/xml/website.editor.xml
index ad7d326a43b..20045478c8c 100644
--- a/addons/website/static/src/xml/website.editor.xml
+++ b/addons/website/static/src/xml/website.editor.xml
@@ -2,8 +2,8 @@
 <templates id="template" xml:space="preserve">
     <div t-name="website.homepage_editor_welcome_message" class="container text-center o_homepage_editor_welcome_message">
         <h2 class="mt0">Welcome to your <b>Homepage</b>!</h2>
-        <p class="lead hidden-xs">Let's start designing.</p>
-        <div class="o_tooltip_container hidden-xs">Follow all the <div class="o_tooltip bottom"/> signs to get your website ready in no time.</div>
+        <p class="lead d-none d-md-block">Let's start designing.</p>
+        <div class="o_tooltip_container d-none d-md-block">Follow all the <div class="o_tooltip bottom"/> signs to get your website ready in no time.</div>
     </div>
 
     <div t-name="website.leaving_current_page_edition">
diff --git a/addons/website/static/src/xml/website.facebook_page.xml b/addons/website/static/src/xml/website.facebook_page.xml
index 4d362582a7b..73c8389ba34 100644
--- a/addons/website/static/src/xml/website.facebook_page.xml
+++ b/addons/website/static/src/xml/website.facebook_page.xml
@@ -50,7 +50,7 @@
         <div class="col-md-6" style="border-left: 1px solid #eeeeee;">
             <div class="form-group text-center">
                 <label>Preview</label>
-                <div class="alert alert-warning hidden facebook_page_warning text-center" role="alert">
+                <div class="alert alert-warning d-none facebook_page_warning text-center" role="alert">
                     <div>
                         <i class="fa fa-exclamation-triangle fa-3x" role="img" aria-label="Warning" title="Warning"></i>
                     </div>
diff --git a/addons/website/views/snippets.xml b/addons/website/views/snippets.xml
index 314cb5553e0..929233dea9d 100644
--- a/addons/website/views/snippets.xml
+++ b/addons/website/views/snippets.xml
@@ -17,7 +17,7 @@
 <template id="s_banner" name="Slider">
     <div id="myCarousel" class="carousel slide s_banner" data-interval="10000">
         <!-- Indicators -->
-        <ol class="carousel-indicators hidden">
+        <ol class="carousel-indicators d-none">
             <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
         </ol>
         <div class="carousel-inner">
@@ -29,15 +29,15 @@
                             <h4>Click to customize this text</h4>
                             <p><a role="button" href="/contactus" class="btn btn-warning btn-large">Contact us</a></p>
                         </div>
-                        <div class="carousel-img col-md-6 col-md-offset-1 hidden-sm hidden-xs">
+                        <div class="carousel-img col-md-6 col-md-offset-1 d-none d-lg-block">
                             <img class="img-responsive" src="/web/image/website.s_banner_default_image" alt="Slider Odoo Image"/>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
-        <div class="carousel-control left hidden" data-target="#myCarousel" data-slide="prev" style="width: 10%" role="img" aria-label="Previous" title="Previous"><i class="fa fa-chevron-left"></i></div>
-        <div class="carousel-control right hidden" data-target="#myCarousel" data-slide="next" style="width: 10%" role="img" aria-label="Next" title="Next"><i class="fa fa-chevron-right"></i></div>
+        <div class="carousel-control left d-none" data-target="#myCarousel" data-slide="prev" style="width: 10%" role="img" aria-label="Previous" title="Previous"><i class="fa fa-chevron-left"></i></div>
+        <div class="carousel-control right d-none" data-target="#myCarousel" data-slide="next" style="width: 10%" role="img" aria-label="Next" title="Next"><i class="fa fa-chevron-right"></i></div>
     </div>
 </template>
 
diff --git a/addons/website/views/website_navbar_templates.xml b/addons/website/views/website_navbar_templates.xml
index c2886439db3..89edb16a756 100644
--- a/addons/website/views/website_navbar_templates.xml
+++ b/addons/website/views/website_navbar_templates.xml
@@ -26,7 +26,7 @@
                     </li>
                 </ul>
 
-                <button type="button" class="fa fa-bars pull-right visible-xs-block o_mobile_menu_toggle" aria-label="Menu" title="Menu"/>
+                <button type="button" class="fa fa-bars pull-right d-block d-md-none o_mobile_menu_toggle" aria-label="Menu" title="Menu"/>
 
                 <ul class="o_menu_sections" groups="website.group_website_designer">
                     <!-- Content -->
@@ -58,7 +58,7 @@
                     </li>
                 </ul>
 
-                <ul class="o_menu_systray hidden-xs" groups="website.group_website_publisher">
+                <ul class="o_menu_systray d-none d-md-block" groups="website.group_website_publisher">
                     <li t-if="'website_published' in main_object.fields_get()" t-attf-class="js_publish_management #{main_object.website_published and 'css_published' or 'css_unpublished'}" t-att-data-id="main_object.id" t-att-data-object="main_object._name" t-att-data-controller="publish_controller">
                         <label class="o_switch o_switch_danger js_publish_btn" for="id">
                             <input type="checkbox" t-att-checked="main_object.website_published" id="id"/>
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index 295cda66cc3..cbc754b99f1 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -881,7 +881,7 @@ Sitemap: <t t-esc="url_root"/>sitemap.xml
           <div t-if="searchbar_sortings" class="dropdown pull-right mt8 mr8">
               <button class="btn btn-default" type="button" data-toggle="dropdown">
                   <span class="fa fa-sort fa-lg" role="img" aria-label="Sort" title="Sort"/>
-                  <span class='hidden-xs hidden-sm hidden-md' t-esc="searchbar_sortings[sortby].get('label', 'Newest')"/>
+                  <span class="d-none d-xl-inline" t-esc="searchbar_sortings[sortby].get('label', 'Newest')"/>
                   <span class="caret" role="img" aria-label="Dropdown menu" title="Dropdown menu"></span>
               </button>
               <ul class="dropdown-menu" role="menu" aria-labelledby="portal_searchbar_sortby">
diff --git a/addons/website_blog/static/src/js/website_blog.editor.js b/addons/website_blog/static/src/js/website_blog.editor.js
index b5ca03689b0..68b572d2623 100644
--- a/addons/website_blog/static/src/js/website_blog.editor.js
+++ b/addons/website_blog/static/src/js/website_blog.editor.js
@@ -170,8 +170,8 @@ options.registry.blog_cover = options.Class.extend({
         this._super.apply(this, arguments);
         var self = this;
 
-        this.$el.filter(":not([data-change])").toggleClass("hidden", !this.$target.hasClass("cover"));
-        this.$el.filter("li:has(li[data-select-class])").toggleClass("hidden", this.$target.hasClass("o_list_cover"));
+        this.$el.filter(":not([data-change])").toggleClass('d-none', !this.$target.hasClass("cover"));
+        this.$el.filter("li:has(li[data-select-class])").toggleClass('d-none', this.$target.hasClass("o_list_cover"));
 
         this.$filter_value_options.removeClass("active");
         this.$filter_color_options.removeClass("active");
diff --git a/addons/website_blog/views/website_blog_templates.xml b/addons/website_blog/views/website_blog_templates.xml
index 1c7e7ae6479..b1ebc6cfc8a 100644
--- a/addons/website_blog/views/website_blog_templates.xml
+++ b/addons/website_blog/views/website_blog_templates.xml
@@ -215,7 +215,7 @@
 <template id="blog_edit_options" inherit_id="website.user_navbar" name="Edit Blog Options">
     <xpath expr="//li[@id='edit-in-backend']" position="after">
         <li groups="website.group_website_designer" t-if="main_object._name == 'blog.post'">
-            <form class="duplicate hidden" action="/blog/post_duplicate" method="POST">
+            <form class="duplicate d-none" action="/blog/post_duplicate" method="POST">
                 <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
                 <input name="blog_post_id" t-att-value="blog_post.id if blog_post else None"/>
             </form>
@@ -312,7 +312,7 @@
                 <t t-set="additionnal_classes" t-value="'cover_footer'"/>
 
                 <div class="blog_title">
-                    <a class="hidden js_next" t-attf-href="/blog/#{ slug(next_post.blog_id) }/post/#{ slug(next_post) }/#wrap"/>
+                    <a class="d-none js_next" t-attf-href="/blog/#{ slug(next_post.blog_id) }/post/#{ slug(next_post) }/#wrap"/>
                     <h1 t-field="next_post.name" placeholder="Blog Post Title"/>
                     <h2 t-field="next_post.subtitle" placeholder="Subtitle"/>
                     <div>
diff --git a/addons/website_event/views/event_templates.xml b/addons/website_event/views/event_templates.xml
index f796f7e8cd3..2cca45546d1 100644
--- a/addons/website_event/views/event_templates.xml
+++ b/addons/website_event/views/event_templates.xml
@@ -414,7 +414,7 @@
     <div itemscope="itemscope" itemprop="offers" itemtype="http://schema.org/AggregateOffer">
         <form id="registration_form" t-attf-action="/event/#{slug(event)}/registration/new" method="post" class="panel panel-default" t-if="buy">
             <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
-            <div class="panel-heading hidden-xs hidden-sm">
+            <div class="panel-heading d-none d-lg-block">
                 <div class="row">
                     <div class="col-md-3">
                         <h5><b>Ticket Type</b></h5>
@@ -483,7 +483,7 @@
 </template>
 
 <template id="ticket" name="Ticket offer template">
-    <div class="col-xs-12 hidden-md hidden-lg panel-heading mb4">
+    <div class="col-xs-12 d-lg-none panel-heading mb4">
         <h5>
             <strong>Ticket Type:</strong>
             <t t-raw="name"/>
@@ -494,18 +494,18 @@
     </div>
     <div class="panel-body">
         <div class="row" itemscope="itemscope" itemtype="http://schema.org/Offer">
-            <div class="col-md-3 hidden-xs hidden-sm" t-raw="name"/>
-            <div class="col-xs-6 hidden-md hidden-lg">
+            <div class="col-md-3 d-none d-lg-block" t-raw="name"/>
+            <div class="col-xs-6 d-lg-none">
                 <h6>End of Registration</h6>
             </div>
             <div class="col-xs-6 col-md-3" itemprop="availabilityEnds" t-raw="registration_end"/>
-            <div class="clearfix hidden-md hidden-lg mb4"/>
-            <div class="col-xs-6 hidden-md hidden-lg">
+            <div class="clearfix d-lg-none mb4"/>
+            <div class="col-xs-6 d-lg-none">
                 <h6>Price</h6>
             </div>
             <div class="col-xs-6 col-md-3" t-raw="price"/>
-            <div class="clearfix hidden-md hidden-lg mb4"/>
-            <div class="col-xs-6 hidden-md hidden-lg">
+            <div class="clearfix d-lg-none mb4"/>
+            <div class="col-xs-6 d-lg-none">
                 <h6>Quantity</h6>
             </div>
             <div class="col-xs-6 col-md-3">
@@ -556,7 +556,7 @@
                                         <div class="col-md-4"><input class='form-control' type='text' t-attf-name="#{counter}-name" required="This field is required" t-att-placeholder="attendee_placeholder %counter"/></div>
                                         <div class="col-md-5"><input class='form-control' type='email' t-attf-name="#{counter}-email" required="This field is required"/></div>
                                         <div class="col-md-3"><input class='form-control' type='tel' t-attf-name="#{counter}-phone"/></div>
-                                        <input class='hidden' type='text' t-attf-name="#{counter}-ticket_id" t-attf-value="#{ticket['id']}"/>
+                                        <input class='d-none' type='text' t-attf-name="#{counter}-ticket_id" t-attf-value="#{ticket['id']}"/>
                                     </div>
                                 </t>
                                 <t t-set="counter_type" t-value="counter_type + 1"/>
diff --git a/addons/website_event_sale/views/event_templates.xml b/addons/website_event_sale/views/event_templates.xml
index fc00a261a51..8fb76a35a6d 100644
--- a/addons/website_event_sale/views/event_templates.xml
+++ b/addons/website_event_sale/views/event_templates.xml
@@ -92,7 +92,7 @@
         </attribute>
     </xpath>
     <xpath expr="//del" position="attributes">
-        <attribute name="t-attf-class" separator=" " add="#{line.event_id and 'hidden' or ''}"/>
+        <attribute name="t-attf-class" separator=" " add="#{line.event_id and 'd-none' or ''}"/>
     </xpath>
 </template>
 </odoo>
diff --git a/addons/website_event_track/views/event_track_templates.xml b/addons/website_event_track/views/event_track_templates.xml
index 40b693f3ff3..312bdfee556 100644
--- a/addons/website_event_track/views/event_track_templates.xml
+++ b/addons/website_event_track/views/event_track_templates.xml
@@ -10,7 +10,7 @@
 
 <template name="Sponsors" id="event_sponsor" customize_show="True" inherit_id="website_event.layout">
     <xpath expr="//div[@id='wrap']" position="inside">
-        <div class="container mt32 mb16 hidden-print" t-if="event.sponsor_ids">
+        <div class="container mt32 mb16 d-print-none" t-if="event.sponsor_ids">
             <section>
                 <h2 class="text-center mb32">Our Sponsors</h2>
             </section>
diff --git a/addons/website_forum/views/website_forum.xml b/addons/website_forum/views/website_forum.xml
index a9d2e62e0c8..f2e5f2934c5 100644
--- a/addons/website_forum/views/website_forum.xml
+++ b/addons/website_forum/views/website_forum.xml
@@ -1316,7 +1316,7 @@
         <div class="row">
             <form t-attf-action="/forum/#{slug(forum)}/user/#{slug(user)}/save" method="post" role="form" class="form-horizontal js_website_submit_form" enctype="multipart/form-data">
                 <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
-                <input type="file" class="hidden o_forum_file_upload" name="ufile" accept="image/*"/>
+                <input type="file" class="d-none o_forum_file_upload" name="ufile" accept="image/*"/>
                 <div class="col-md-2">
                     <a href="#" class="o_forum_profile_pic_edit" aria-label="Edit">
                         <i class="fa fa-pencil fa-1g pull-left" title="Edit"></i>
diff --git a/addons/website_gengo/static/src/js/website_gengo.js b/addons/website_gengo/static/src/js/website_gengo.js
index bb5bd609ab6..c3ae0e922d7 100644
--- a/addons/website_gengo/static/src/js/website_gengo.js
+++ b/addons/website_gengo/static/src/js/website_gengo.js
@@ -41,8 +41,8 @@ translate.Class.include({
     translation_gengo_display: function () {
         var self = this;
         if ($('[data-oe-translation-state="to_translate"], [data-oe-translation-state="None"]').length === 0){
-            self.$el.find('.gengo_post').addClass("hidden");
-            self.$el.find('.gengo_inprogress').removeClass("hidden");
+            self.$el.find('.gengo_post').addClass('d-none');
+            self.$el.find('.gengo_inprogress').removeClass('d-none');
         }
     },
     translation_gengo_post: function () {
@@ -60,8 +60,8 @@ translate.Class.include({
                 dialog.on('service_level', this, function () {
                     var gengo_service_level = dialog.$el.find(".form-control").val();
                     dialog.$el.modal('hide');
-                    self.$el.find('.gengo_post').addClass("hidden");
-                    self.$el.find('.gengo_wait').removeClass("hidden");
+                    self.$el.find('.gengo_post').addClass('d-none');
+                    self.$el.find('.gengo_wait').removeClass('d-none');
                     var trans = [];
                     $('[data-oe-translation-state="to_translate"], [data-oe-translation-state="None"]').each(function () {
                         var $node = $(this);
diff --git a/addons/website_gengo/static/src/xml/website.gengo.xml b/addons/website_gengo/static/src/xml/website.gengo.xml
index 102e178c6f2..2265ad7a70c 100644
--- a/addons/website_gengo/static/src/xml/website.gengo.xml
+++ b/addons/website_gengo/static/src/xml/website.gengo.xml
@@ -2,8 +2,8 @@
 <templates id="template" xml:space="preserve">
 <t t-name="website.ButtonGengoTranslator">
     <a role="button" class="btn btn-danger gengo_post" data-action="translation_gengo_post" href="#">Auto Translate</a>
-    <a role="button" class="btn btn-danger hidden gengo_wait disabled"  href="#"><i class="fa fa-spinner fa-spin"></i> Wait</a>
-    <a role="button" class="btn btn-danger hidden gengo_inprogress disabled"  href="#"> <i class="fa fa-clock-o"></i> Translation in Progress</a>
+    <a role="button" class="btn btn-danger d-none gengo_wait disabled"  href="#"><i class="fa fa-spinner fa-spin"></i> Wait</a>
+    <a role="button" class="btn btn-danger d-none gengo_inprogress disabled"  href="#"> <i class="fa fa-clock-o"></i> Translation in Progress</a>
     <a role="button" class="btn btn-link gengo_info" data-action="translation_gengo_info">Count Words</a>
 </t>
 <t t-name="web_editor.TranslatorInfoDialog">
diff --git a/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml b/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml
index 14fdac7edbc..c26ee165d7b 100644
--- a/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml
+++ b/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml
@@ -26,7 +26,7 @@
 
             <div class="container oe_website_jobs">
                 <div class="row">
-                    <div class="hidden" id="jobs_grid_left">
+                    <div class="d-none" id="jobs_grid_left">
 
                     </div>
                     <div class="col-md-12" id="jobs_grid">
diff --git a/addons/website_links/views/website_links_graphs.xml b/addons/website_links/views/website_links_graphs.xml
index f4a892064f3..63d9752c116 100644
--- a/addons/website_links/views/website_links_graphs.xml
+++ b/addons/website_links/views/website_links_graphs.xml
@@ -28,7 +28,7 @@
                         <input type="hidden" id="link_id" t-att-value="id" />
 
                         <h1 class="page-header mt0"><t t-esc="title"/></h1>
-                            
+
                         <div class="row">
                             <div class="col-sm-8">
                                 <div class="row">
@@ -53,7 +53,7 @@
                                             </span>
                                             <a class="o_website_links_edit_code" aria-label="Edit code" title="Edit code"><span class="fa fa-pencil gray"></span></a>
                                             <a class="copy-to-clipboard" t-att-data-clipboard-text="short_url">copy</a>
-                                            
+
                                         </p>
                                         <p class='o_website_links_code_error' style='color:red;font-weight:bold;display:none'></p>
                                     </div>
@@ -105,7 +105,7 @@
                         </div>
 
                         <h1 class="page-header">Statistics
-                            <small class="pull-right hidden-xs mt16" id="filters">
+                            <small class="pull-right d-none d-md-block mt16" id="filters">
                                 <ul class="nav nav-tabs nav-tabs-inline graph-tabs" role="tablist">
                                     <li class="active"><a aria-controls="all_time_charts" href="#all_time_charts" role="tab" data-toggle="tab">All Time</a></li>
                                     <li><a aria-controls="last_month_charts" href="#last_month_charts" role="tab" data-toggle="tab">Last Month</a></li>
@@ -113,7 +113,7 @@
                                 </ul>
                             </small>
                         </h1>
-                        
+
                         <div class="row">
                             <div class="col-sm-12 mb8">
                                 <div class="tab-content">
diff --git a/addons/website_links/views/website_links_template.xml b/addons/website_links/views/website_links_template.xml
index c8986c12a9a..2e1525a3280 100644
--- a/addons/website_links/views/website_links_template.xml
+++ b/addons/website_links/views/website_links_template.xml
@@ -36,7 +36,7 @@
                     <div class="row">
                         <div class="col-sm-7">
                             <form class="form-horizontal" id="o_website_links_link_tracker_form">
-                        
+
                                 <div class="form-group" id="url-form-group">
                                     <label class="col-sm-3 control-label text-left">URL</label>
 
@@ -81,14 +81,14 @@
                             </form>
                         </div>
 
-                        <div class="col-sm-offset-1 col-sm-3 hidden-xs">
+                        <div class="col-sm-offset-1 col-sm-3 d-none d-md-block">
                             <p class="text-muted text-justify">Share this page with a <strong>short link</strong> that includes <strong>analytics trackers</strong>.</p>
                             <p class="text-muted text-justify">Those trackers can be used in Google Analytics to track clicks and visitors, or in Odoo reports to track opportunities and related revenues.</p>
                         </div>
                     </div>
-         
-                    <h2 class="page-header">Your tracked links 
-                        <small class="pull-right hidden-xs mt16" id="filters">
+
+                    <h2 class="page-header">Your tracked links
+                        <small class="pull-right d-none d-md-block mt16" id="filters">
                             <ul class="nav nav-tabs nav-tabs-inline graph-tabs" role="tablist">
                                 <li class="active"><a aria-controls="filter-newest-links" href="#" id="filter-newest-links" role="tab" data-toggle="tab">Newest</a></li>
                                 <li><a aria-controls="filter-most-clicked-links" href="#" id="filter-most-clicked-links" role="tab" data-toggle="tab">Most Clicked</a></li>
@@ -96,7 +96,7 @@
                             </ul>
                         </small>
                     </h2>
-                     
+
                     <div id="o_website_links_recent_links">
                         <div class="o_website_links_recent_links_notification"></div>
                     </div>
diff --git a/addons/website_mail/static/src/js/follow.js b/addons/website_mail/static/src/js/follow.js
index 0f9c3a193d6..177c5d4768c 100644
--- a/addons/website_mail/static/src/js/follow.js
+++ b/addons/website_mail/static/src/js/follow.js
@@ -19,12 +19,12 @@ sAnimation.registry.follow = sAnimation.Class.extend({
             self.is_user = data.is_user;
             self.email = data.email;
             self.toggle_subscription(data.is_follower, data.email);
-            self.$target.removeClass("hidden");
+            self.$target.removeClass('d-none');
         });
 
         // not if editable mode to allow designer to edit
         if (!this.editableMode) {
-            $('.js_follow > .input-group-btn.hidden').removeClass("hidden");
+            $('.js_follow > .input-group-btn.d-none').removeClass('d-none');
             this.$target.find('.js_follow_btn, .js_unfollow_btn').on('click', function (event) {
                 event.preventDefault();
                 self._onClick();
@@ -60,12 +60,12 @@ sAnimation.registry.follow = sAnimation.Class.extend({
     toggle_subscription: function (follow, email) {
         follow = follow || (!email && this.$target.attr('data-unsubscribe'));
         if (follow) {
-            this.$target.find(".js_follow_btn").addClass("hidden");
-            this.$target.find(".js_unfollow_btn").removeClass("hidden");
+            this.$target.find(".js_follow_btn").addClass('d-none');
+            this.$target.find(".js_unfollow_btn").removeClass('d-none');
         }
         else {
-            this.$target.find(".js_follow_btn").removeClass("hidden");
-            this.$target.find(".js_unfollow_btn").addClass("hidden");
+            this.$target.find(".js_follow_btn").removeClass('d-none');
+            this.$target.find(".js_unfollow_btn").addClass('d-none');
         }
         this.$target.find('input.js_follow_email')
             .val(email || "")
diff --git a/addons/website_mail_channel/static/src/js/website_mail_channel.editor.js b/addons/website_mail_channel/static/src/js/website_mail_channel.editor.js
index 9e46f0f1ed2..8cd05aa1dbb 100644
--- a/addons/website_mail_channel/static/src/js/website_mail_channel.editor.js
+++ b/addons/website_mail_channel/static/src/js/website_mail_channel.editor.js
@@ -36,7 +36,7 @@ options.registry.subscribe = options.Class.extend({
         });
     },
     cleanForSave: function () {
-        this.$target.addClass("hidden");
+        this.$target.addClass('d-none');
     },
 });
 });
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 e48cae79df4..d176b1e981d 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
@@ -24,13 +24,13 @@ sAnimation.registry.follow_alias = sAnimation.Class.extend({
                 self.$target.find(".js_mg_follow_form").remove();
             }
             self.toggle_subscription(data.is_member ? 'on' : 'off', data.email);
-            self.$target.removeClass("hidden");
+            self.$target.removeClass('d-none');
         });
 
         // not if editable mode to allow designer to edit alert field
         if (!this.editableMode) {
-            this.$('> .alert').addClass("hidden");
-            this.$('> .input-group-btn.hidden').removeClass("hidden");
+            this.$('> .alert').addClass('d-none');
+            this.$('> .input-group-btn.d-none').removeClass('d-none');
             this.$('.js_follow_btn, .js_unfollow_btn').on('click', function (event) {
                 event.preventDefault();
                 self._onClick();
@@ -78,19 +78,19 @@ sAnimation.registry.follow_alias = sAnimation.Class.extend({
         var alias_done = this.get_alias_info();
         if (follow === "on") {
             // user is connected and can unsubscribe
-            this.$target.find(".js_mg_follow_form").addClass("hidden");
-            this.$target.find(".js_mg_details").removeClass("hidden");
-            this.$target.find(".js_mg_confirmation").addClass("hidden");
+            this.$target.find(".js_mg_follow_form").addClass('d-none');
+            this.$target.find(".js_mg_details").removeClass('d-none');
+            this.$target.find(".js_mg_confirmation").addClass('d-none');
         } else if (follow === "off") {
             // user is connected and can subscribe
-            this.$target.find(".js_mg_follow_form").removeClass("hidden");
-            this.$target.find(".js_mg_details").addClass("hidden");
-            this.$target.find(".js_mg_confirmation").addClass("hidden");
+            this.$target.find(".js_mg_follow_form").removeClass('d-none');
+            this.$target.find(".js_mg_details").addClass('d-none');
+            this.$target.find(".js_mg_confirmation").addClass('d-none');
         } else if (follow === "email") {
             // a confirmation email has been sent
-            this.$target.find(".js_mg_follow_form").addClass("hidden");
-            this.$target.find(".js_mg_details").addClass("hidden");
-            this.$target.find(".js_mg_confirmation").removeClass("hidden");
+            this.$target.find(".js_mg_follow_form").addClass('d-none');
+            this.$target.find(".js_mg_details").addClass('d-none');
+            this.$target.find(".js_mg_confirmation").removeClass('d-none');
         } else {
             console.error("Unknown subscription action", follow);
         }
@@ -108,10 +108,10 @@ sAnimation.registry.follow_alias = sAnimation.Class.extend({
         return this._rpc({route: '/groups/' + this.$target.data('id') + '/get_alias_info'}).then(function (data) {
             if (data.alias_name) {
                 self.$target.find('.js_mg_email').attr('href', 'mailto:' + data.alias_name);
-                self.$target.find('.js_mg_email').removeClass('hidden');
+                self.$target.find('.js_mg_email').removeClass('d-none');
             }
             else {
-                self.$target.find('.js_mg_email').addClass('hidden');
+                self.$target.find('.js_mg_email').addClass('d-none');
             }
         });
     }
diff --git a/addons/website_mail_channel/views/snippets.xml b/addons/website_mail_channel/views/snippets.xml
index e10e7e51128..cb46f5a38f8 100644
--- a/addons/website_mail_channel/views/snippets.xml
+++ b/addons/website_mail_channel/views/snippets.xml
@@ -27,12 +27,12 @@
                         <button href="#" class="btn btn-primary js_follow_btn">Subscribe</button>
                     </span>
                 </div>
-                <p class="js_mg_details hidden well well-sm">
-                    <span class="js_mg_email hidden"><a href="#" class="js_mg_email"><i class="fa fa-envelope-o"/> send mail</a> - </span>
+                <p class="js_mg_details d-none well well-sm">
+                    <span class="js_mg_email d-none"><a href="#" class="js_mg_email"><i class="fa fa-envelope-o"/> send mail</a> - </span>
                     <a href="#" class="js_mg_link"><i class="fa fa-file-o"/> archives</a> -
                     <a role="button" href="#" class="js_unfollow_btn"><i class="fa fa-times"/> unsubscribe</a>
                 </p>
-                <p class="js_mg_confirmation hidden well well-sm">
+                <p class="js_mg_confirmation d-none well well-sm">
                     a confirmation email has been sent.
                 </p>
             </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 3a9c01908c8..b4bd07bc451 100644
--- a/addons/website_mail_channel/views/website_mail_channel_templates.xml
+++ b/addons/website_mail_channel/views/website_mail_channel_templates.xml
@@ -67,8 +67,8 @@
                                <button href="#" class="btn btn-primary js_follow_btn">Unsubscribe</button>
                             </span>
                         </div>
-                        <p class="js_mg_details hidden well well-sm">
-                            <span class="js_mg_email hidden"><a href="#" class="js_mg_email"><i class="fa fa-envelope-o"/> send mail</a> - </span>
+                        <p class="js_mg_details d-none well well-sm">
+                            <span class="js_mg_email d-none"><a href="#" class="js_mg_email"><i class="fa fa-envelope-o"/> send mail</a> - </span>
                             <a href="#" class="js_mg_link"><i class="fa fa-file-o"/> archives</a> -
                             <a role="button" href="#" class="js_unfollow_btn"><i class="fa fa-times"/> unsubscribe</a>
                         </p>
diff --git a/addons/website_mass_mailing/static/src/js/website_mass_mailing.editor.js b/addons/website_mass_mailing/static/src/js/website_mass_mailing.editor.js
index b011e4f1f2d..9b69dedd7b5 100644
--- a/addons/website_mass_mailing/static/src/js/website_mass_mailing.editor.js
+++ b/addons/website_mass_mailing/static/src/js/website_mass_mailing.editor.js
@@ -44,7 +44,7 @@ var mass_mailing_common = options.Class.extend({
 
 options.registry.mailing_list_subscribe = mass_mailing_common.extend({
     cleanForSave: function () {
-        this.$target.addClass("hidden");
+        this.$target.addClass('d-none');
     },
 });
 
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 eceafbf7fa8..352c486e536 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
@@ -10,7 +10,7 @@ sAnimation.registry.subscribe = sAnimation.Class.extend({
         var self = this;
 
         // set value and display button
-        self.$target.find("input").removeClass("hidden");
+        self.$target.find("input").removeClass('d-none');
         this._rpc({
             route: '/website_mass_mailing/is_subscriber',
             params: {
@@ -23,15 +23,15 @@ sAnimation.registry.subscribe = sAnimation.Class.extend({
             self.$target.attr("data-subscribe", data.is_subscriber ? 'on' : 'off');
             self.$target.find('a.js_subscribe_btn')
                 .attr("disabled", data.is_subscriber && data.email.length ? "disabled" : false);
-            self.$target.removeClass("hidden");
-            self.$target.find('.js_subscribe_btn').toggleClass('hidden', !!data.is_subscriber);
-            self.$target.find('.js_subscribed_btn').toggleClass('hidden', !data.is_subscriber);
+            self.$target.removeClass('d-none');
+            self.$target.find('.js_subscribe_btn').toggleClass('d-none', !!data.is_subscriber);
+            self.$target.find('.js_subscribed_btn').toggleClass('d-none', !data.is_subscriber);
         });
 
         // not if editable mode to allow designer to edit alert field
         if (!this.editableMode) {
-            $('.js_subscribe > .alert').addClass("hidden");
-            $('.js_subscribe > .input-group-btn.hidden').removeClass("hidden");
+            $('.js_subscribe > .alert').addClass('d-none');
+            $('.js_subscribe > .input-group-btn.d-none').removeClass('d-none');
             this.$target.find('.js_subscribe_btn').on('click', function (event) {
                 event.preventDefault();
                 self._onClick();
@@ -55,8 +55,8 @@ 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("hidden");
-            self.$target.find(".alert").removeClass("hidden");
+            self.$target.find(".js_subscribe_email, .input-group-btn").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 f74e73c356e..c72d2dde23c 100644
--- a/addons/website_mass_mailing/views/snippets_templates.xml
+++ b/addons/website_mass_mailing/views/snippets_templates.xml
@@ -21,9 +21,9 @@
         <input type="email" name="email" class="js_subscribe_email form-control" placeholder="your email..."/>
         <span class="input-group-btn">
             <a role="button" href="#" class="btn btn-primary js_subscribe_btn">Subscribe</a>
-            <a role="button" href="#" class="btn btn-success js_subscribed_btn hidden" disabled="disabled">Thanks</a>
+            <a role="button" href="#" class="btn btn-success js_subscribed_btn d-none" disabled="disabled">Thanks</a>
         </span>
-        <div class="alert alert-success hidden" role="status">Thanks for your subscription!</div>
+        <div class="alert alert-success d-none" role="status">Thanks for your subscription!</div>
     </div>
 </template>
 
diff --git a/addons/website_quote/views/website_quote_templates.xml b/addons/website_quote/views/website_quote_templates.xml
index f066cf2e8e4..4441006d6a8 100644
--- a/addons/website_quote/views/website_quote_templates.xml
+++ b/addons/website_quote/views/website_quote_templates.xml
@@ -93,7 +93,7 @@
                       />
                     </td>
                     <td class="text-center">
-                      <a t-attf-href="./update_line/#{ line.id }/?order_id=#{ quotation.id }&amp;unlink=True&amp;token=#{ quotation.access_token }" class="mb8 js_update_line_json hidden-print" t-if="line.option_line_id" aria-label="Remove" title="Remove">
+                      <a t-attf-href="./update_line/#{ line.id }/?order_id=#{ quotation.id }&amp;unlink=True&amp;token=#{ quotation.access_token }" class="mb8 js_update_line_json d-print-none" t-if="line.option_line_id" aria-label="Remove" title="Remove">
                         <span class="fa fa-trash-o"></span>
                       </a>
                     </td>
@@ -197,13 +197,13 @@
   <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 hidden-print">
+              <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>
               <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 hidden-print">
+              <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>
@@ -248,7 +248,7 @@
             <div class="container o_website_quote">
               <div class="row mt16">
                 <!-- Sidebar -->
-                  <div class="col-md-3 hidden-print">
+                  <div class="col-md-3 d-print-none">
                       <div class="bs-sidebar">
                           <div class="text-center" t-if="quotation.state in ('draft', 'sent', 'waiting_date')" style="padding: 10px">
                               <a role="button" t-if="order_valid and not quotation.signature and quotation.has_to_be_signed()" class="btn btn-primary btn-block" data-toggle="modal" data-target="#modalaccept">
@@ -427,14 +427,14 @@
                         </div>
                       </div>
 
-                      <div class="alert alert-warning alert-dismissable hidden-print" t-if="quotation.state == 'cancel'" role="alert">
+                      <div class="alert alert-warning alert-dismissable d-print-none" t-if="quotation.state == 'cancel'" role="alert">
                           <button type="button" class="close" data-dismiss="alert" aria-label="close">&amp;times;</button>
                           <strong>This quotation has been canceled.</strong> Contact us to get a new quote.
                       </div>
 
                       <t t-call="website_quote.so_quotation_content"/>
 
-                      <div class="text-center hidden-print mt16 mb16" id="quotation_toolbar" t-if="quotation.state in ('draft', 'sent', 'waiting_date')">
+                      <div class="text-center d-print-none mt16 mb16" id="quotation_toolbar" t-if="quotation.state in ('draft', 'sent', 'waiting_date')">
                           <a role="button" class="btn btn-success" data-toggle="modal" data-target="#modalaccept" t-if="order_valid and not quotation.has_to_be_paid()">
                               <i class="fa fa-check"></i> Accept
                           </a>
@@ -491,7 +491,7 @@
             <t t-if="quotation.state not in ('draft','sent','cancel')">Your Order</t>
             <em t-esc="quotation.name"/>
             <small t-field="quotation.state"/>
-            <div t-ignore="true" class="pull-right css_editable_mode_hidden hidden-print">
+            <div t-ignore="true" class="pull-right css_editable_mode_hidden d-print-none">
                <ul class="list-inline">
                   <li groups="sales_team.group_sale_salesman">
                     <a role="button" t-if="quotation.state not in ('manual')" class="btn btn-info" t-att-href="'/web#return_label=Website&amp;model=%s&amp;id=%s&amp;action=%s&amp;view_type=form' % (quotation._name, quotation.id, action)">Edit Quote</a>
@@ -578,7 +578,7 @@
           <t t-if="line.product_id.product_tmpl_id.id not in product_tmpl_ids">
               <t t-set="product_tmpl_ids" t-value="product_tmpl_ids + [line.product_id.product_tmpl_id.id]"/>
               <a t-att-id="line.id"/>
-              <div t-att-class="'oe_no_empty' if line.website_description else 'oe_no_empty hidden-print'" t-field="line.website_description"/>
+              <div t-att-class="'oe_no_empty' if line.website_description else 'oe_no_empty d-print-none'" t-field="line.website_description"/>
           </t>
       </t>
       <div class="oe_structure"/>
@@ -637,7 +637,7 @@
                                 </strong>
                             </td>
                             <td class="text-center" t-if="quotation.state in ['draft', 'sent']">
-                                <a t-attf-href="/quote/add_line/#{ option.id }/#{ quotation.id }/#{ quotation.access_token }" class="mb8 hidden-print" aria-label="Add to cart" title="Add to cart">
+                                <a t-attf-href="/quote/add_line/#{ option.id }/#{ quotation.id }/#{ quotation.access_token }" class="mb8 d-print-none" aria-label="Add to cart" title="Add to cart">
                                     <span class="fa fa-shopping-cart"/>
                                 </a>
                             </td>
@@ -655,7 +655,7 @@
         <body data-spy="scroll" data-target=".navspy" data-offset="50">
             <div class="container o_website_quote">
                 <div class="row mt16">
-                    <div class="col-md-3 hidden-print">
+                    <div class="col-md-3 d-print-none">
                         <div class="bs-sidebar">
                             <div class="navspy" role="complementary" t-ignore="True">
                                 <ul class="nav bs-sidenav" data-id="quote_sidebar"/>
@@ -665,7 +665,7 @@
                     <div class="col-md-9">
                         <div class="row mb8">
                             <div t-ignore="true" class="css_editable_mode_hidden col-md-offset-11">
-                              <a role="button" class="btn btn-info hidden-print" t-att-href="'/web#return_label=Website&amp;model=%s&amp;id=%s&amp;action=%s&amp;view_type=form' % (template._name, template.id, request.env.ref('website_quote.action_sale_quotation_template').id)">Back</a>
+                              <a role="button" class="btn btn-info d-print-none" t-att-href="'/web#return_label=Website&amp;model=%s&amp;id=%s&amp;action=%s&amp;view_type=form' % (template._name, template.id, request.env.ref('website_quote.action_sale_quotation_template').id)">Back</a>
                             </div>
                         </div>
                         <div class="alert alert-info alert-dismissable" t-ignore="True" role="status">
diff --git a/addons/website_sale/static/src/js/website_sale.js b/addons/website_sale/static/src/js/website_sale.js
index 53e98566944..6d766f6f3b1 100644
--- a/addons/website_sale/static/src/js/website_sale.js
+++ b/addons/website_sale/static/src/js/website_sale.js
@@ -158,7 +158,7 @@ odoo.define('website_sale.website_sale', function (require) {
                 }
                 var $q = $(".my_cart_quantity");
                 if (data.cart_quantity) {
-                    $q.parents('li:first').removeClass("hidden");
+                    $q.parents('li:first').removeClass('d-none');
                 }
                 else {
                     window.location = '/shop/cart';
@@ -321,10 +321,10 @@ odoo.define('website_sale.website_sale', function (require) {
                     if (variant_ids[k][3]-variant_ids[k][2]>0.01) {
                         $default_price.closest('.oe_website_sale').addClass("discount");
                         $optional_price.closest('.oe_optional').show().css('text-decoration', 'line-through');
-                        $default_price.parent().removeClass('hidden');
+                        $default_price.parent().removeClass('d-none');
                     } else {
                         $optional_price.closest('.oe_optional').hide();
-                        $default_price.parent().addClass('hidden');
+                        $default_price.parent().addClass('d-none');
                     }
                     product_id = variant_ids[k][0];
                     update_product_image(this, product_id);
@@ -371,7 +371,7 @@ odoo.define('website_sale.website_sale', function (require) {
 
         $('.oe_website_sale').on('click', '.show_coupon', function(e) {
             $(e.currentTarget).hide();
-            $('.coupon_form').removeClass('hidden');
+            $('.coupon_form').removeClass('d-none');
         });
         $('.oe_cart').on('click', '.js_change_shipping', function() {
           if (!$('body.editor_enable').length) { //allow to edit button text with editor
@@ -472,13 +472,13 @@ odoo.define('website_sale.website_sale', function (require) {
     });
 
     $('.toggle_summary').on('click', function(e) {
-        $('.toggle_summary_div').toggleClass('hidden');
-        $('.toggle_summary_div').removeClass('visible-lg');
+        $('.toggle_summary_div').toggleClass('d-none');
+        $('.toggle_summary_div').removeClass('d-none d-xl-block');
     });
 
     core.bus.on('resize', this, function() {
         if (config.device.size_class === config.device.SIZES.XL) {
-            $('.toggle_summary_div').addClass('visible-lg');
+            $('.toggle_summary_div').addClass('d-none d-xl-block');
         }
     });
 
diff --git a/addons/website_sale/static/src/scss/website_sale.scss b/addons/website_sale/static/src/scss/website_sale.scss
index 4230c2fca87..06b6380e2a4 100644
--- a/addons/website_sale/static/src/scss/website_sale.scss
+++ b/addons/website_sale/static/src/scss/website_sale.scss
@@ -116,16 +116,6 @@
         .oe_cart table td.td-img {
             display: none;
         }
-
-        #modal_optional_products a span.hidden-xs,
-        .oe_cart a span.hidden-xs {
-            display: none !important;
-        }
-
-        #modal_optional_products a span.visible-xs-inline,
-        .oe_cart a span.visible-xs-inline {
-            display: inline !important;
-        }
     }
 }
 /* ---- Default Styles ---- */
@@ -471,20 +461,6 @@
     }
 }
 /* ---- Cart ---- */
-#modal_optional_products,
-.oe_cart {
-    a span.visible-xs-inline {
-        display: none !important;
-    }
-}
-
-#modal_optional_products,
-.oe_cart {
-    a span.hidden-xs {
-        display: inline !important;
-    }
-}
-
 .oe_cart table td:first-child {
     min-width: 76px;
 }
diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index f715d24a790..76331278456 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -40,8 +40,8 @@
     <template id="header" inherit_id="website.layout" name="Header Shop My Cart Link">
         <xpath expr="//header//ul[@id='top_menu']/li" position="before">
             <t t-set="website_sale_order" t-value="website.sale_get_order()" />
-            <li class="divider hidden"/> <!-- Make sure the cart and related menus are not folded (see autohideMenu) -->
-            <li id="my_cart" t-att-class="'' if website_sale_order and website_sale_order.cart_quantity else 'hidden'">
+            <li class="divider d-none"/> <!-- Make sure the cart and related menus are not folded (see autohideMenu) -->
+            <li id="my_cart" t-att-class="'' if website_sale_order and website_sale_order.cart_quantity else 'd-none'">
                 <a href="/shop/cart">
                     <i class="fa fa-shopping-cart"></i>
                     My Cart <sup t-attf-class="my_cart_quantity label label-primary" t-esc="website_sale_order and website_sale_order.cart_quantity or ''" />
@@ -155,7 +155,7 @@
 
     <template id="pricelist_list" name="Pricelists Dropdown">
         <t t-set="website_sale_pricelists" t-value="website.get_pricelist_available(show_visible=True)" />
-        <div t-attf-class="#{website_sale_pricelists and len(website_sale_pricelists)&gt;1 and 'dropdown' or 'hidden'} btn-group">
+        <div t-attf-class="#{website_sale_pricelists and len(website_sale_pricelists)&gt;1 and 'dropdown' or 'd-none'} btn-group">
             <t t-set="curr_pl" t-value="website.get_current_pricelist()" />
             <a role="button" href="#" class="dropdown-toggle btn btn-default" data-toggle="dropdown">
                 <t t-esc="curr_pl and curr_pl.name or ' - '" />
@@ -188,7 +188,7 @@
                         </div>
                     </div>
                     <div class="row">
-                        <div class="hidden" id="products_grid_before"></div>
+                        <div class="d-none" id="products_grid_before"></div>
                         <div class="col-md-12" id="products_grid">
                             <table width="100%">
                                 <tbody>
@@ -369,7 +369,7 @@
             </form>
         </xpath>
         <xpath expr="//div[@id='products_grid_before']" position="attributes">
-            <attribute name="class">col-md-3 hidden-xs</attribute>
+            <attribute name="class">col-md-3 d-none d-md-block</attribute>
         </xpath>
         <xpath expr="//div[@id='products_grid']" position="attributes">
             <attribute name="class">col-md-9</attribute>
@@ -607,14 +607,14 @@
                    "display_currency": product.currency_id,
                }'/>
           </h4>
-          <h4 class="hidden oe_not_available bg-warning">Product not available</h4>
+          <h4 class="d-none oe_not_available bg-warning">Product not available</h4>
       </div>
     </template>
 
     <template id="product_variants" inherit_id="website_sale.product" active="False" customize_show="True" name="List View of Variants">
       <xpath expr="//t[@t-placeholder='select']" position="replace">
         <t t-set="attribute_value_ids" t-value="get_attribute_value_ids(product)"/>
-        <ul class="hidden js_add_cart_variants" t-att-data-attribute_value_ids="json.dumps(attribute_value_ids)"/>
+        <ul class="d-none js_add_cart_variants" t-att-data-attribute_value_ids="json.dumps(attribute_value_ids)"/>
         <input type="hidden" t-if="len(product.product_variant_ids) == 1" class="product_id" name="product_id" t-att-value="product.product_variant_id.id"/>
         <t t-if="len(product.product_variant_ids) &gt; 1">
           <label label-default="label-default" class="radio" t-foreach="product.product_variant_ids" t-as="variant_id">
@@ -707,22 +707,22 @@
                     <div class="progress-wizard">
                         <a class="no-decoration" t-att-href="step&gt;=10 and '/shop/cart' or '#'">
                           <div id="wizard-step10" t-att-class="'progress-wizard-step %s' % (step == 10 and 'active' or step&gt;10 and 'complete' or 'disabled')">
-                            <div class="progress-wizard-bar hidden-xs"/>
-                            <span class="progress-wizard-dot hidden-xs"></span>
+                            <div class="progress-wizard-bar d-none d-md-block"/>
+                            <span class="progress-wizard-dot d-none d-md-inline-block"></span>
                             <div class="text-center progress-wizard-steplabel">Review Order</div>
                           </div>
                         </a>
                         <a class="no-decoration" t-att-href="step&gt;=20 and '/shop/checkout' or '#'">
                           <div id="wizard-step20" t-att-class="'progress-wizard-step %s' % (step == 20 and 'active' or step&gt;20 and 'complete' or 'disabled')">
-                            <div class="progress-wizard-bar hidden-xs"/>
-                            <span class="progress-wizard-dot hidden-xs"></span>
+                            <div class="progress-wizard-bar d-none d-md-block"/>
+                            <span class="progress-wizard-dot d-none d-md-inline-block"></span>
                             <div class="text-center progress-wizard-steplabel">Address</div>
                           </div>
                         </a>
                         <a class="no-decoration" t-att-href="step&gt;=40 and '/shop/payment' or '#'">
                           <div id="wizard-step40" t-att-class="'progress-wizard-step %s' % (step == 40 and 'active' or step&gt;40 and 'complete' or 'disabled')">
-                            <div class="progress-wizard-bar hidden-xs"/>
-                            <span class="progress-wizard-dot hidden-xs"></span>
+                            <div class="progress-wizard-bar d-none d-md-block"/>
+                            <span class="progress-wizard-dot d-none d-md-inline-block"></span>
                             <div class="text-center progress-wizard-steplabel">Confirm Order</div>
                           </div>
                         </a>
@@ -743,7 +743,7 @@
                                 <t t-set="step" t-value="30"/>
                             </t>
                         </div>
-                        <div class="col-lg-4 col-lg-push-8 hidden visible-lg">
+                        <div class="col-lg-4 col-lg-push-8 d-none d-xl-block">
                             <t t-call='website_sale.cart_summary'/>
                         </div>
                         <div class="col-lg-8 col-lg-pull-4 col-sm-12 col-xs-12 oe_cart">
@@ -796,13 +796,13 @@
     <template id="extra_info_option" name="Extra Step Option" inherit_id="wizard_checkout" active="False" customize_show="True">
         <!-- Add a "flag element" to trigger style variation -->
         <xpath expr="//div[hasclass('wizard')]/div" position="before">
-            <span class="o_wizard_has_extra_step hidden"/>
+            <span class="o_wizard_has_extra_step d-none"/>
         </xpath>
         <xpath expr="//div[@id='wizard-step20']" position="after">
             <a class="no-decoration" t-att-href="step&gt;=30 and '/shop/extra_info' or '#'">
                 <div id="wizard-step30" t-att-class="'progress-wizard-step %s' % (step == 30 and 'active' or step&gt;30 and 'complete' or 'disabled')">
-                    <div class="progress-wizard-bar hidden-xs"/>
-                        <span class="progress-wizard-dot hidden-xs"></span>
+                    <div class="progress-wizard-bar d-none d-md-block"/>
+                    <span class="progress-wizard-dot d-none d-md-inline-block"></span>
                     <div class="text-center progress-wizard-steplabel">Extra Info</div>
                 </div>
             </a>
@@ -836,7 +836,7 @@
                                     <strong t-esc="line.product_id.with_context(display_default_code=False).display_name" />
                                 </a>
                             </div>
-                            <div class="text-muted hidden-xs small">
+                            <div class="text-muted d-none d-md-block small">
                                 <t t-foreach="line.name.splitlines()[1:]" t-as="name_line">
                                     <span><t t-esc="name_line"/></span><br/>
                                 </t>
@@ -844,11 +844,11 @@
                         </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 hidden-xs" aria-label="Remove one" title="Remove one">
+                                <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>
                                 <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 hidden-xs" aria-label="Add one" title="Add one">
+                                <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>
@@ -899,11 +899,11 @@
                                     </div>
                                     <t t-call="website_sale.cart_lines" />
                                     <div class="clearfix" />
-                                    <a role="button" href="/shop" class="btn btn-default mb32 hidden-xs hidden-sm hidden-md">
+                                    <a role="button" href="/shop" class="btn btn-default mb32 d-none d-xl-inline-block">
                                         <span class="fa fa-chevron-left" />
                                         <span class="">Continue Shopping</span>
                                     </a>
-                                    <a role="button" t-if="website_sale_order and website_sale_order.website_order_line" class="btn btn-primary pull-right mb32 mr8 hidden visible-lg" href="/shop/checkout?express=1">
+                                    <a role="button" t-if="website_sale_order and website_sale_order.website_order_line" class="btn btn-primary pull-right mb32 mr8 d-none d-xl-inline-block" href="/shop/checkout?express=1">
                                         <span class="">Process Checkout</span>
                                         <span class="fa fa-chevron-right" />
                                     </a>
@@ -913,10 +913,10 @@
                         </div>
                         <div class="col-lg-4 col-sm-12 col-xs-12">
                             <t t-call='website_sale.short_cart_summary'/>
-                            <div class='hidden-lg'>
+                            <div class="d-xl-none">
                                 <a role="button" href="/shop" class="btn btn-default mb32">
                                     <span class="fa fa-chevron-left" />
-                                    Continue<span class="hidden-xs"> Shopping</span>
+                                    Continue<span class="d-none d-md-inline"> Shopping</span>
                                 </a>
                                 <a role="button" t-if="website_sale_order and website_sale_order.website_order_line" class="btn btn-primary pull-right mb32 mr8" href="/shop/checkout?express=1">
                                     <span class="">Process Checkout</span>
@@ -980,7 +980,7 @@
                                     <strong t-field="product.display_name" />
                                 </a>
                             </div>
-                            <div class="text-muted hidden-xs" t-field="product.description_sale" />
+                            <div class="text-muted d-none d-md-block" t-field="product.description_sale" />
                         </td>
                         <td class='td-price'>
                             <t t-if="product.website_price_difference  and website.get_current_pricelist().discount_policy=='without_discount'">
@@ -1029,7 +1029,7 @@
                                 <t t-set="step" t-value="20" />
                             </t>
                         </div>
-                        <div class="col-lg-4 col-lg-push-8 hidden visible-lg">
+                        <div class="col-lg-4 col-lg-push-8 d-none d-xl-block">
                             <t t-call='website_sale.cart_summary' />
                         </div>
                         <div class="col-lg-8 col-lg-pull-4 col-sm-12 col-xs-12 oe_cart">
@@ -1091,7 +1091,7 @@
     </template>
 
     <template id="address_kanban" name="Kanban address">
-            <form action="/shop/checkout" method="POST" class='hide'>
+            <form action="/shop/checkout" method="POST" class="d-none">
                 <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()" />
                 <input type="hidden" name="partner_id" t-att-value="contact.id" />
                 <t t-if='edit_billing'>
@@ -1132,7 +1132,7 @@
                         </div>
                     </div>
                     <div class="row">
-                        <div class="col-lg-4 col-lg-push-8 hidden visible-lg">
+                        <div class="col-lg-4 col-lg-push-8 d-none d-xl-block">
                             <t t-call='website_sale.cart_summary' />
                         </div>
                         <div class="col-lg-8 col-lg-pull-4 col-sm-12 col-xs-12 oe_cart">
@@ -1181,7 +1181,7 @@
                                     </t>
                                     <div class="clearfix" />
                                     <div t-attf-class="form-group #{error.get('street') and 'has-error' or ''} col-md-12 div_street">
-                                        <label class="control-label" for="street">Street <span class="hidden-xs"> and Number</span></label>
+                                        <label class="control-label" for="street">Street <span class="d-none d-md-inline"> and Number</span></label>
                                         <input type="text" name="street" class="form-control" t-att-value="'street' in checkout and checkout['street']" />
                                     </div>
                                     <div t-attf-class="form-group #{error.get('street2') and 'has-error' or ''} col-md-12 div_street2">
@@ -1361,13 +1361,13 @@
     <template id="short_cart_summary" name="Short Cart right column">
         <div class="panel panel-default js_cart_summary" t-if="website_sale_order and website_sale_order.website_order_line" >
             <div class="panel-body row">
-                <h4 class='col-md-12 hidden visible-lg'>Order Total</h4>
-                <hr class='hidden visible-lg mt4 mb4'/>
+                <h4 class='col-md-12 d-none d-xl-block'>Order Total</h4>
+                <hr class='d-none d-xl-block mt4 mb4'/>
                 <div class='col-md-12'>
                     <t t-call="website_sale.total">
                         <t t-set='no_rowspan'>1</t>
                     </t>
-                    <a role="button" t-if="website_sale_order and website_sale_order.website_order_line" class="btn btn-default pull-right mr8 hidden visible-lg" href="/shop/checkout?express=1">
+                    <a role="button" t-if="website_sale_order and website_sale_order.website_order_line" class="btn btn-default pull-right mr8 d-none d-xl-inline-block" href="/shop/checkout?express=1">
                         <span>Process Checkout</span>
                     </a>
                 </div>
@@ -1378,7 +1378,7 @@
     <template id="cart_summary" name="Cart right column">
         <div class="panel panel-default">
             <div class="panel-body row">
-                <div class='toggle_summary col-md-12 hidden-lg'>
+                <div class='toggle_summary col-md-12 d-xl-none'>
                     <b>Your order: </b> <span t-field="website_sale_order.amount_total" t-options='{"widget": "monetary", "display_currency": website_sale_order.pricelist_id.currency_id}'/>
                     <span class='fa fa-chevron-down fa-border pull-right' role="img" aria-label="Details" title="Details"></span>
                 </div>
@@ -1386,7 +1386,7 @@
                 <div t-if="not website_sale_order or not website_sale_order.website_order_line" class="well well-lg">
                   Your cart is empty!
                 </div>
-                <div class='toggle_summary_div hidden visible-lg'>
+                <div class='toggle_summary_div d-none d-xl-block'>
                     <table class="table table-striped table-condensed col-md-12" id="cart_products" t-if="website_sale_order and website_sale_order.website_order_line">
                         <thead>
                             <tr>
@@ -1453,7 +1453,7 @@
                             <div class="oe_cart">
                                 <div class="thanks_msg mb32">
                                     <h2>Thank you for your order.
-                                        <a role="button" class="btn btn-primary hidden-xs" href="/shop/print" target="_blank" aria-label="Print" title="Print"><i class="fa fa-print"></i> Print</a>
+                                        <a role="button" class="btn btn-primary d-none d-md-inline-block" href="/shop/print" target="_blank" aria-label="Print" title="Print"><i class="fa fa-print"></i> Print</a>
                                     </h2>
                                 </div>
                                 <t t-if="request.env['ir.config_parameter'].sudo().get_param('auth_signup.invitation_scope', 'b2b') == 'b2c' and request.website.is_public_user()">
@@ -1547,7 +1547,7 @@
                     <t t-if="not force_coupon">
                         <a class='show_coupon'>I have a promo code</a>
                     </t>
-                    <div t-attf-class='coupon_form #{not force_coupon and "hidden"}'>
+                    <div t-attf-class='coupon_form #{not force_coupon and "d-none"}'>
                         <t t-call='website_sale.coupon_form'>
                         </t>
                     </div>
diff --git a/addons/website_sale_comparison/static/src/xml/comparison.xml b/addons/website_sale_comparison/static/src/xml/comparison.xml
index fe9ebf8c15e..7365db89d30 100644
--- a/addons/website_sale_comparison/static/src/xml/comparison.xml
+++ b/addons/website_sale_comparison/static/src/xml/comparison.xml
@@ -1,7 +1,7 @@
 <templates id="compare_products" xml:space="preserve">
 
     <t t-name="product_comparison_template">
-        <div class="o_product_feature_panel hidden-xs css_editable_mode_hidden" style="display:none">
+        <div class="o_product_feature_panel d-none d-md-block css_editable_mode_hidden" style="display:none">
             <span class="o_product_panel" id="comparelist">
                 <span class="o_product_panel_header">
                     <span class="o_product_icon"><i class="fa fa-exchange" role="img" aria-label="Product" title="Product"></i></span>
diff --git a/addons/website_sale_comparison/views/website_sale_comparison_template.xml b/addons/website_sale_comparison/views/website_sale_comparison_template.xml
index 7f52008c315..6d197da5e0f 100644
--- a/addons/website_sale_comparison/views/website_sale_comparison_template.xml
+++ b/addons/website_sale_comparison/views/website_sale_comparison_template.xml
@@ -10,14 +10,14 @@
 
     <template id="add_to_compare" inherit_id="website_sale.products_item" active="True" customize_show="True" name="Comparison List" priority="22">
         <xpath expr="//div[hasclass('product_price')]" position="inside">
-            <a role="button" class="hidden-xs btn btn-default btn-xs o_add_compare" title="Compare" aria-label="Compare" t-att-data-product-product-id="product.product_variant_ids[0].id" data-action="o_comparelist"><span class="fa fa-exchange"></span></a>
+            <a role="button" class="d-none d-md-inline-block btn btn-default btn-xs o_add_compare" title="Compare" aria-label="Compare" t-att-data-product-product-id="product.product_variant_ids[0].id" data-action="o_comparelist"><span class="fa fa-exchange"></span></a>
         </xpath>
     </template>
 
     <template id="product_add_to_compare" name='Add to comparison in product page' inherit_id="website_sale.product" priority="8">
         <xpath expr="//a[@id='add_to_cart']" position="after">
             <t t-if="product.env.ref('website_sale_comparison.add_to_compare').active">
-                <a role="button" class="hidden-xs btn btn-default btn-lg mt8 o_add_compare_dyn" title="Compare" aria-label="Compare" t-att-data-product-product-id="product.product_variant_ids[0].id" data-action="o_comparelist"><span class="fa fa-exchange"></span></a>
+                <a role="button" class="d-none d-md-inline-block btn btn-default btn-lg mt8 o_add_compare_dyn" title="Compare" aria-label="Compare" t-att-data-product-product-id="product.product_variant_ids[0].id" data-action="o_comparelist"><span class="fa fa-exchange"></span></a>
             </t>
         </xpath>
     </template>
diff --git a/addons/website_sale_delivery/static/src/js/website_sale_delivery.js b/addons/website_sale_delivery/static/src/js/website_sale_delivery.js
index 971e604d1d1..ee0c73585ac 100644
--- a/addons/website_sale_delivery/static/src/js/website_sale_delivery.js
+++ b/addons/website_sale_delivery/static/src/js/website_sale_delivery.js
@@ -12,7 +12,7 @@ odoo.define('website_sale_delivery.checkout', function (require) {
         var $amount_untaxed = $('#order_total_untaxed span.oe_currency_value');
         var $amount_tax = $('#order_total_taxes span.oe_currency_value');
         var $amount_total = $('#order_total span.oe_currency_value');
-        var $carrier_badge = $('#delivery_carrier input[name="delivery_type"][value=' + result.carrier_id + '] ~ .badge.hidden');
+        var $carrier_badge = $('#delivery_carrier input[name="delivery_type"][value=' + result.carrier_id + '] ~ .badge.d-none');
         var $compute_badge = $('#delivery_carrier input[name="delivery_type"][value=' + result.carrier_id + '] ~ .o_delivery_compute');
         if (result.status === true) {
             $amount_delivery.text(result.new_amount_delivery);
@@ -20,8 +20,8 @@ odoo.define('website_sale_delivery.checkout', function (require) {
             $amount_tax.text(result.new_amount_tax);
             $amount_total.text(result.new_amount_total);
             $carrier_badge.children('span').text(result.new_amount_delivery);
-            $carrier_badge.removeClass('hidden');
-            $compute_badge.addClass('hidden');
+            $carrier_badge.removeClass('d-none');
+            $compute_badge.addClass('d-none');
             $pay_button.prop('disabled', false);
         }
         else {
diff --git a/addons/website_sale_delivery/views/website_sale_delivery_templates.xml b/addons/website_sale_delivery/views/website_sale_delivery_templates.xml
index d806d1dc96f..6a4839a858a 100644
--- a/addons/website_sale_delivery/views/website_sale_delivery_templates.xml
+++ b/addons/website_sale_delivery/views/website_sale_delivery_templates.xml
@@ -23,14 +23,14 @@
     </template>
 
     <template id="payment_delivery_methods">
-        <input t-att-value="delivery.id" t-att-id="'delivery_%i' % delivery.id" type="radio" name="delivery_type" t-att-checked="order.carrier_id and order.carrier_id.id == delivery.id and 'checked' or False" t-att-class="'hidden' if delivery_nb == 1 else ''"/>
+        <input t-att-value="delivery.id" t-att-id="'delivery_%i' % delivery.id" type="radio" name="delivery_type" t-att-checked="order.carrier_id and order.carrier_id.id == delivery.id and 'checked' or False" t-att-class="'d-none' if delivery_nb == 1 else ''"/>
         <label class="label-optional" t-field="delivery.name" t-att-for="'delivery_%i' % delivery.id"/>
         <t t-if="delivery.delivery_type == 'fixed'">
             <span t-if="delivery.fixed_price > 0.0" class="badge" t-field="delivery.fixed_price" t-options='{"widget": "monetary", "from_currency": delivery.product_id.company_id.currency_id, "display_currency": website_sale_order.currency_id}'/>
             <span t-else="" class="badge">Free</span>
         </t>
         <t t-else="">
-            <span class="badge hidden" t-field="delivery.fixed_price" t-options='{"widget": "monetary", "from_currency": delivery.product_id.company_id.currency_id, "display_currency": website_sale_order.currency_id}'/>
+            <span class="badge d-none" t-field="delivery.fixed_price" t-options='{"widget": "monetary", "from_currency": delivery.product_id.company_id.currency_id, "display_currency": website_sale_order.currency_id}'/>
             <span class="badge o_delivery_compute">Select to compute delivery rate</span>
         </t>
         <t t-if="delivery.website_description">
diff --git a/addons/website_sale_options/static/src/js/website_sale.js b/addons/website_sale_options/static/src/js/website_sale.js
index 27da88ae866..b728dadadc0 100644
--- a/addons/website_sale_options/static/src/js/website_sale.js
+++ b/addons/website_sale_options/static/src/js/website_sale.js
@@ -45,7 +45,7 @@ $('.oe_website_sale #add_to_cart, .oe_website_sale #products_grid .a-submit')
                                 window.location.pathname = window.location.pathname.replace(/shop([\/?].*)?$/, "shop/cart");
                             }
                             var $q = $(".my_cart_quantity");
-                            $q.parent().parent().removeClass("hidden", !quantity);
+                            $q.parent().parent().removeClass("d-none", !quantity);
                             $q.html(quantity).hide().fadeIn(600);
                         }
                     });
@@ -61,7 +61,7 @@ $('.oe_website_sale #add_to_cart, .oe_website_sale #products_grid .a-submit')
                 $modal.on("click", "a.js_add, a.js_remove", function (event) {
                     event.preventDefault();
                     var $parent = $(this).parents('.js_product:first');
-                    $parent.find("a.js_add, span.js_remove").toggleClass("hidden");
+                    $parent.find("a.js_add, span.js_remove").toggleClass('d-none');
                     $parent.find("input.js_optional_same_quantity").val( $(this).hasClass("js_add") ? 1 : 0 );
                     $parent.find(".js_remove");
                 });
@@ -69,11 +69,11 @@ $('.oe_website_sale #add_to_cart, .oe_website_sale #products_grid .a-submit')
                 $modal.on("change", "input.js_quantity", function () {
                     var qty = parseFloat($(this).val());
                     if (qty === 1) {
-                        $(".js_remove .js_items").addClass("hidden");
-                        $(".js_remove .js_item").removeClass("hidden");
+                        $(".js_remove .js_items").addClass('d-none');
+                        $(".js_remove .js_item").removeClass('d-none');
                     } else {
-                        $(".js_remove .js_items").removeClass("hidden").text($(".js_remove .js_items:first").text().replace(/[0-9.,]+/, qty));
-                        $(".js_remove .js_item").addClass("hidden");
+                        $(".js_remove .js_items").removeClass('d-none').text($(".js_remove .js_items:first").text().replace(/[0-9.,]+/, qty));
+                        $(".js_remove .js_item").addClass('d-none');
                     }
                 });
 
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 6a58166942c..0814ea3218b 100644
--- a/addons/website_sale_options/views/website_sale_options_templates.xml
+++ b/addons/website_sale_options/views/website_sale_options_templates.xml
@@ -57,19 +57,19 @@
                 </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 hidden-xs" aria-label="Remove one" title="Remove one">
+                      <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>
                       <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 hidden-xs" aria-label="Add one" title="Add one">
+                      <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>
                 </td>
                 <td class="text-center td-price" name="price">
-                  <ul class="hidden js_add_cart_variants" t-att-data-attribute_value_ids="json.dumps(main_product_attr_ids)"></ul>
-                  <div class="hidden oe_unchanged_value_ids" t-att-data-unchanged_value_ids="main_product_attr_ids[0][1]" ></div>
-                  <span t-attf-class="text-danger oe_default_price oe_striked_price {{ (compute_currency(product.lst_price) - product.website_price) &lt; 0.01 and 'hidden' }}"
+                  <ul class="d-none js_add_cart_variants" t-att-data-attribute_value_ids="json.dumps(main_product_attr_ids)"></ul>
+                  <div class="d-none oe_unchanged_value_ids" t-att-data-unchanged_value_ids="main_product_attr_ids[0][1]" ></div>
+                  <span t-attf-class="text-danger oe_default_price oe_striked_price {{ (compute_currency(product.lst_price) - product.website_price) &lt; 0.01 and 'd-none' }}"
                     t-field="product.lst_price"
                     t-options='{
                       "widget": "monetary",
@@ -121,10 +121,10 @@
 
                   <div class='mt8'>
                     <input type="hidden" class="js_optional_same_quantity" t-attf-name="optional-add-#{product_index}" value="0"/>
-                    <a role="button" href="#" class="js_add btn btn-sm btn-info"><strong>Add<span class='hidden-xs'> to Cart</span></strong></a>
-                    <span class="js_remove hidden">
-                      <span class="js_item">1 </span><span class="js_items hidden">5 </span> <span t-field="product.uom_id.sudo().name"/><br/>
-                      <a role="button" href="#" class="js_remove btn btn-xs btn-info"><small>Remove <span class='hidden-xs'> from Cart</span></small></a>
+                    <a role="button" href="#" class="js_add btn btn-sm btn-info"><strong>Add<span class='d-none d-md-inline'> to Cart</span></strong></a>
+                    <span class="js_remove d-none">
+                      <span class="js_item">1 </span><span class="js_items d-none">5 </span> <span t-field="product.uom_id.sudo().name"/><br/>
+                      <a role="button" href="#" class="js_remove btn btn-xs btn-info"><small>Remove <span class='d-none d-md-inline'> from Cart</span></small></a>
                     </span>
                   </div>
                 </td>
@@ -134,8 +134,8 @@
           </table>
         </main>
         <footer class="modal-footer">
-          <a role="button" class="btn btn-default a-submit js_goto_shop" aria-label="Continue shopping" title="Continue shopping"><i class="fa fa-chevron-left"></i> <span class="hidden-xs">Continue Shopping</span><span class="visible-xs-inline">Continue</span></a>
-          <a role="button" class="btn btn-primary pull-right a-submit" aria-label="Proceed to checkout" title="Proceed to checkout"><i class="fa fa-shopping-cart fa-fw"></i> <span class="hidden-xs">Proceed to Checkout</span><span class="visible-xs-inline">Checkout</span></a>
+          <a role="button" class="btn btn-default a-submit js_goto_shop" aria-label="Continue shopping" title="Continue shopping"><i class="fa fa-chevron-left"></i> <span class="d-none d-md-inline">Continue Shopping</span><span class="d-inline d-md-none">Continue</span></a>
+          <a role="button" class="btn btn-primary pull-right a-submit" aria-label="Proceed to checkout" title="Proceed to checkout"><i class="fa fa-shopping-cart fa-fw"></i> <span class="d-none d-md-inline">Proceed to Checkout</span><span class="d-inline d-md-none">Checkout</span></a>
         </footer>
       </div>
     </div>
diff --git a/addons/website_sale_wishlist/static/src/js/website_sale_wishlist.js b/addons/website_sale_wishlist/static/src/js/website_sale_wishlist.js
index 153527096a5..656e778a2b7 100644
--- a/addons/website_sale_wishlist/static/src/js/website_sale_wishlist.js
+++ b/addons/website_sale_wishlist/static/src/js/website_sale_wishlist.js
@@ -136,7 +136,7 @@ var ProductWishlist = Widget.extend({
         var product = tr.data('product-id');
 
         // can be hidden if empty
-        $('#my_cart').removeClass('hidden');
+        $('#my_cart').removeClass('d-none');
         website_sale_utils.animate_clone($('#my_cart'), tr, 25, 40);
         return this.add_to_cart(product, tr.find('qty').val() || 1);
     },
@@ -144,7 +144,7 @@ var ProductWishlist = Widget.extend({
         var tr = $(e.currentTarget).parents('tr');
         var product = tr.data('product-id');
 
-        $('#my_cart').removeClass('hidden');
+        $('#my_cart').removeClass('d-none');
         website_sale_utils.animate_clone($('#my_cart'), tr, 25, 40);
         var adding_deffered = this.add_to_cart(product, tr.find('qty').val() || 1);
         this.wishlist_rm(e, adding_deffered);
diff --git a/addons/website_sale_wishlist/views/website_sale_wishlist_template.xml b/addons/website_sale_wishlist/views/website_sale_wishlist_template.xml
index 8d76af6cd1f..9eb44e52f46 100644
--- a/addons/website_sale_wishlist/views/website_sale_wishlist_template.xml
+++ b/addons/website_sale_wishlist/views/website_sale_wishlist_template.xml
@@ -61,7 +61,7 @@
                                         </td>
                                         <td class='text-left'>
                                             <strong><a t-att-href="'/shop/product/%s' % slug(wish.product_id.product_tmpl_id)"><t t-esc="wish.product_id.display_name" /></a></strong>
-                                            <small class='hidden-xs'><p t-field="wish.product_id.description_sale" class="text-muted"/></small>
+                                            <small class='d-none d-md-block'><p t-field="wish.product_id.description_sale" class="text-muted"/></small>
                                             <a class="o_wish_rm no-decoration"><small><i class='fa fa-trash-o'></i> Remove</small></a>
                                         </td>
                                         <td style='width:80px'>
@@ -73,7 +73,7 @@
                                         </td>
                                         <td class='text-center td-wish-btn'>
                                             <input name="product_id" t-att-value="wish.product_id.id" type="hidden"/>
-                                            <a role="button" class="btn btn-default btn-block o_wish_add mb4" >Add <span class='hidden-xs'>to Cart</span></a>
+                                            <a role="button" class="btn btn-default btn-block o_wish_add mb4" >Add <span class='d-none d-md-inline'>to Cart</span></a>
                                         </td>
                                     </tr>
                                 </t>
diff --git a/addons/website_slides/views/website_slides.xml b/addons/website_slides/views/website_slides.xml
index 4903c4f3e88..585658ce67e 100644
--- a/addons/website_slides/views/website_slides.xml
+++ b/addons/website_slides/views/website_slides.xml
@@ -429,7 +429,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-sm-4 hidden-xs">
+                            <div class="col-sm-4 d-none d-md-block">
                                 <div class="text-right">
                                     <b class="h3 text-muted"><t t-esc="slide.total_views"/></b> <span class="text-muted small">views</span>
                                 </div>
diff --git a/addons/website_slides/views/website_slides_embed.xml b/addons/website_slides/views/website_slides_embed.xml
index ba7682a631a..61364da9a0f 100644
--- a/addons/website_slides/views/website_slides_embed.xml
+++ b/addons/website_slides/views/website_slides_embed.xml
@@ -108,7 +108,7 @@
                                 <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 text-left">
                                     <input type="number" class="text-center" id="page_number"></input> / <span id="page_count"></span>
                                 </div>
-                                <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 hide o_slide_navigation_buttons">
+                                <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 d-none o_slide_navigation_buttons">
                                     <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center"></div>
                                     <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 text-center">
                                         <span id="first" title="First slide" role="img" aria-label="First slide">
diff --git a/addons/website_twitter/static/src/js/website.twitter.editor.js b/addons/website_twitter/static/src/js/website.twitter.editor.js
index 8019dd47009..53509d88568 100644
--- a/addons/website_twitter/static/src/js/website.twitter.editor.js
+++ b/addons/website_twitter/static/src/js/website.twitter.editor.js
@@ -15,7 +15,7 @@ sOptions.registry.twitter = sOptions.Class.extend({
         var self = this;
         var $configuration = dom.renderButton({
             attrs: {
-                class: 'btn-primary hidden',
+                class: 'btn-primary d-none',
                 contenteditable: 'false',
             },
             text: _t("Reload"),
@@ -28,7 +28,7 @@ sOptions.registry.twitter = sOptions.Class.extend({
         this.$target.on('mouseover.website_twitter', function () {
             var $selected = $(this);
             var position = $selected.offset();
-            $configuration.removeClass('hidden').offset({
+            $configuration.removeClass('d-none').offset({
                 top: $selected.outerHeight() / 2
                         + position.top
                         - $configuration.outerHeight() / 2,
@@ -41,7 +41,7 @@ sOptions.registry.twitter = sOptions.Class.extend({
             if (current === $configuration[0]) {
                 return;
             }
-            $configuration.addClass('hidden');
+            $configuration.addClass('d-none');
         });
         this.$target.on('click.website_twitter', '.lnk_configure', function (e) {
             window.location = e.currentTarget.href;
diff --git a/odoo/addons/base/views/onboarding_views.xml b/odoo/addons/base/views/onboarding_views.xml
index 0c90e20fcad..470e78157ec 100644
--- a/odoo/addons/base/views/onboarding_views.xml
+++ b/odoo/addons/base/views/onboarding_views.xml
@@ -56,10 +56,10 @@
     <template id="onboarding_step">
         <div t-att-class="'o_onboarding_step ' + ('o_onboarding_done' if done else 'o_onboarding_current')">
             <t t-call="base.onboarding_confetti" />
-            <div class="o_onboarding_progress o_onboarding_hide_folded hidden-xs progress">
+            <div class="o_onboarding_progress o_onboarding_hide_folded d-none d-md-inline-block progress">
                 <div class="progress-bar"></div>
             </div>
-            <span class="o_onboarding_dot o_onboarding_hide_folded hidden-xs fa fa-check" />
+            <span class="o_onboarding_dot o_onboarding_hide_folded d-none d-md-inline-block fa fa-check" />
             <div class="o_onboarding_step_content">
                 <div class="o_onboarding_step_content_info">
                     <h4 class="o_onboarding_step_title mt16">
diff --git a/odoo/addons/base/views/res_config_settings_views.xml b/odoo/addons/base/views/res_config_settings_views.xml
index 2d119ee5af6..91e465c4c1b 100644
--- a/odoo/addons/base/views/res_config_settings_views.xml
+++ b/odoo/addons/base/views/res_config_settings_views.xml
@@ -8,7 +8,7 @@
                 <form string="Settings" class="oe_form_configuration o_base_settings" js_class="base_settings">
                     <div class="o_control_panel">
                         <div class="o_panel">
-                            <div class="title h2 mb0 mt4 text-muted hidden-xs">Settings</div>
+                            <div class="title h2 mb0 mt4 text-muted d-none d-md-block">Settings</div>
                             <div class="o_setting_search">
                                 <input type="text" class="searchInput" placeholder="Search..."/>
                                 <span class="searchIcon"><i class="fa fa-search" role="img" aria-label="Search" title="Search"/></span>