diff --git a/addons/account/report/account_report_payment_receipt_templates.xml b/addons/account/report/account_report_payment_receipt_templates.xml
index 1b37bf35656..7306ae38492 100644
--- a/addons/account/report/account_report_payment_receipt_templates.xml
+++ b/addons/account/report/account_report_payment_receipt_templates.xml
@@ -6,12 +6,12 @@
             <div class="page">
                 <h3><strong>Payment Receipt: <span t-field="o.name"/></strong></h3>
                 <div class="row mt64">
-                    <div class="col-xs-6" t-if="o.payment_date">
+                    <div class="col-6" t-if="o.payment_date">
                         <strong>Payment Date: </strong> <span t-field="o.payment_date"/>
                     </div>
                 </div>
                 <div class="row">
-                    <div class="col-xs-6" t-if="o.partner_type">
+                    <div class="col-6" t-if="o.partner_type">
                         <t t-if="o.partner_type == 'customer'">
                             <strong>Customer: </strong>
                         </t>
@@ -19,15 +19,15 @@
                             <strong>Vendor: </strong>
                         </t><span t-field="o.partner_id"/>
                     </div>
-                    <div class="col-xs-6" t-if="o.payment_method_id">
+                    <div class="col-6" t-if="o.payment_method_id">
                         <strong>Payment Method: </strong><span t-field="o.payment_method_id.name"/>
                     </div>
                 </div>
                 <div class="row mb64">
-                    <div class="col-xs-6" t-if="o.amount">
+                    <div class="col-6" t-if="o.amount">
                         <strong>Payment Amount: </strong><span t-field="o.amount" t-options="{'widget': 'monetary', 'display_currency': o.currency_id}"/>
                      </div>
-                    <div class="col-xs-6" t-if="o.communication">
+                    <div class="col-6" t-if="o.communication">
                         <strong>Memo: </strong><span t-field="o.communication"/>
                      </div>
                 </div>
diff --git a/addons/account/views/account_invoice_view.xml b/addons/account/views/account_invoice_view.xml
index 17067fc69d4..5a4ad07f9ee 100644
--- a/addons/account/views/account_invoice_view.xml
+++ b/addons/account/views/account_invoice_view.xml
@@ -510,14 +510,14 @@
                                             <div t-attf-class="oe_kanban_card oe_kanban_global_click {{ record.display_type.raw_value ? 'o_is_' + record.display_type.raw_value : '' }}">
                                                 <t t-if="!record.display_type.raw_value">
                                                     <div class="row">
-                                                        <div class="col-xs-8">
+                                                        <div class="col-8">
                                                             <strong>
                                                                 <span>
                                                                     <t t-esc="record.product_id.value"/>
                                                                 </span>
                                                             </strong>
                                                         </div>
-                                                        <div class="col-xs-4">
+                                                        <div class="col-4">
                                                             <strong>
                                                                 <span class="pull-right text-right">
                                                                     <t t-esc="record.price_subtotal.value" groups="account.group_show_line_subtotals_tax_excluded"/>
@@ -527,7 +527,7 @@
                                                         </div>
                                                     </div>
                                                     <div class="row">
-                                                        <div class="col-xs-12 text-muted">
+                                                        <div class="col-12 text-muted">
                                                             <span>
                                                                 Quantity:
                                                                 <t t-esc="record.quantity.value"/>
@@ -536,7 +536,7 @@
                                                         </div>
                                                     </div>
                                                     <div class="row">
-                                                        <div class="col-xs-12 text-muted">
+                                                        <div class="col-12 text-muted">
                                                             <span>
                                                                 Unit Price:
                                                                 <t t-esc="record.price_unit.value"/>
@@ -546,7 +546,7 @@
                                                 </t>
                                                 <t t-if="record.display_type.raw_value === 'line_section' || record.display_type.raw_value === 'line_note'">
                                                     <div class="row">
-                                                        <div class="col-xs-12">
+                                                        <div class="col-12">
                                                             <span>
                                                                 <t t-esc="record.name.value"/>
                                                             </span>
diff --git a/addons/account/views/account_journal_dashboard_view.xml b/addons/account/views/account_journal_dashboard_view.xml
index 7e8d1b10a54..24f1fe4468e 100644
--- a/addons/account/views/account_journal_dashboard_view.xml
+++ b/addons/account/views/account_journal_dashboard_view.xml
@@ -21,7 +21,7 @@
                                     <t t-if="(journal_type == 'bank' || journal_type == 'cash')" t-call="JournalBodyBankCash"/>
                                     <t t-if="journal_type == 'sale' || journal_type == 'purchase'" t-call="JournalBodySalePurchase"/>
                                     <t t-if="journal_type == 'general' || journal_type == 'situation'">
-                                        <div class="col-xs-6 o_kanban_primary_left">
+                                        <div class="col-6 o_kanban_primary_left">
                                             <button type="object" name="open_action" context="{'action_name': 'action_move_journal_line', 'view_no_maturity': 1}" class="btn btn-primary">
                                                 <span>Journal Entries</span>
                                             </button>
@@ -55,7 +55,7 @@
 
                         <!-- For bank and cash -->
                         <div t-if="journal_type == 'bank' || journal_type == 'cash'" class="row">
-                             <div class="col-xs-4 o_kanban_card_manage_section o_kanban_manage_view">
+                             <div class="col-4 o_kanban_card_manage_section o_kanban_manage_view">
                                 <div class="o_kanban_card_manage_title">
                                     <span role="separator">View</span>
                                 </div>
@@ -79,7 +79,7 @@
                                 </div>
                             </div>
 
-                             <div class="col-xs-4 o_kanban_card_manage_section o_kanban_manage_new">
+                             <div class="col-4 o_kanban_card_manage_section o_kanban_manage_new">
                                 <div class="o_kanban_card_manage_title">
                                     <span role="separator">New</span>
                                 </div>
@@ -102,7 +102,7 @@
                                 </div>
                             </div>
 
-                             <div class="col-xs-4 o_kanban_card_manage_section o_kanban_manage_reconciliation">
+                             <div class="col-4 o_kanban_card_manage_section o_kanban_manage_reconciliation">
                                 <div class="o_kanban_card_manage_title">
                                     <span role="separator">Reconciliation</span>
                                 </div>
@@ -114,7 +114,7 @@
 
                         <!-- For purchase and sale -->
                         <div t-if="journal_type == 'purchase' || journal_type == 'sale'" class="row">
-                             <div class="col-xs-4 o_kanban_card_manage_section o_kanban_manage_view">
+                             <div class="col-4 o_kanban_card_manage_section o_kanban_manage_view">
                                 <div class="o_kanban_card_manage_title">
                                     <span>View</span>
                                 </div>
@@ -134,7 +134,7 @@
                                 </div>
                             </div>
 
-                             <div class="col-xs-4 o_kanban_card_manage_section o_kanban_manage_new">
+                             <div class="col-4 o_kanban_card_manage_section o_kanban_manage_new">
                                 <div class="o_kanban_card_manage_title">
                                     <span>New</span>
                                 </div>
@@ -152,7 +152,7 @@
                                 </div>
                             </div>
 
-                             <div class="col-xs-4 o_kanban_card_manage_section o_kanban_manage_reports">
+                             <div class="col-4 o_kanban_card_manage_section o_kanban_manage_reports">
                                 <div class="o_kanban_card_manage_title">
                                     <span>Reporting</span>
                                 </div>
@@ -165,7 +165,7 @@
 
                         <!-- For general and situation -->
                         <div t-if="journal_type == 'general' || journal_type == 'situation'" class="row">
-                             <div class="col-xs-4 o_kanban_card_manage_section o_kanban_manage_view">
+                             <div class="col-4 o_kanban_card_manage_section o_kanban_manage_view">
                                 <div class="o_kanban_card_manage_title">
                                     <span>View</span>
                                 </div>
@@ -180,7 +180,7 @@
                                 </div>
                             </div>
 
-                             <div class="col-xs-4 o_kanban_card_manage_section o_kanban_manage_new">
+                             <div class="col-4 o_kanban_card_manage_section o_kanban_manage_new">
                                 <div class="o_kanban_card_manage_title">
                                     <span>New</span>
                                 </div>
@@ -189,7 +189,7 @@
                                 </div>
                             </div>
 
-                             <div class="col-xs-4 o_kanban_card_manage_section o_kanban_manage_operations">
+                             <div class="col-4 o_kanban_card_manage_section o_kanban_manage_operations">
                                 <div class="o_kanban_card_manage_title">
                                     <span>Operations</span>
                                 </div>
@@ -200,16 +200,16 @@
                         </div>
 
                         <div t-if="widget.editable" class="o_kanban_card_manage_settings row">
-                            <div class="col-xs-8">
+                            <div class="col-8">
                                 <ul class="oe_kanban_colorpicker" data-field="color"/>
                             </div>
                         </div>
 
                         <div groups="account.group_account_manager" class="row o_kanban_card_settings">
-                            <div class="col-xs-6">
+                            <div class="col-6">
                                 <field name="show_on_dashboard" widget="boolean_favorite" />
                             </div>
-                            <div class="col-xs-6 text-right">
+                            <div class="col-6 text-right">
                                 <a t-if="widget.editable" type="edit">Settings</a>
                             </div>
                         </div>
@@ -219,7 +219,7 @@
                         <!-- On the left, display :
                             - A button corresponding to the bank_statements_source, if it wasn't configured, a button for each of them
                             - If there are statements to reconcile, a link to reconcile them -->
-                        <div class="col-xs-5 o_kanban_primary_left">
+                        <div class="col-5 o_kanban_primary_left">
                             <t t-if="dashboard.number_to_reconcile > 0">
                                 <button type="object" name="action_open_reconcile" class="btn btn-primary"> Reconcile <t t-esc="dashboard.number_to_reconcile"/> Items</button>
                             </t>
@@ -239,21 +239,21 @@
                             </t>
                         </div>
                         <!-- On the right, show other common informations/actions -->
-                        <div class="col-xs-7 o_kanban_primary_right">
+                        <div class="col-7 o_kanban_primary_right">
                             <div class="row">
-                                <div class="col-xs-7">
+                                <div class="col-7">
                                     <span title="Balance in Odoo">Balance in GL</span>
                                 </div>
-                                <div class="col-xs-5 text-right">
+                                <div class="col-5 text-right">
                                     <span><t t-esc="dashboard.account_balance"/></span>
                                 </div>
                             </div>
                             <t t-if="dashboard.last_balance != dashboard.account_balance">
                                 <div class="row" name="latest_statement">
-                                  <div class="col-xs-7">
+                                  <div class="col-7">
                                     <span title="Latest Statement">Latest Statement</span>
                                   </div>
-                                  <div class="col-xs-5 text-right">
+                                  <div class="col-5 text-right">
                                     <span><t t-esc="dashboard.last_balance"/></span>
                                   </div>
                                 </div>
@@ -261,7 +261,7 @@
                         </div>
                     </t>
                     <t t-name="JournalBodySalePurchase" id="account.JournalBodySalePurchase">
-                        <div class="col-xs-5 o_kanban_primary_left">
+                        <div class="col-5 o_kanban_primary_left">
                             <t t-if="journal_type == 'sale'">
                                 <button type="object" name="action_create_new" class="btn btn-primary o_invoice_new">
                                     <span>New Invoice</span>
@@ -273,20 +273,20 @@
                                 </button>
                             </t>
                         </div>
-                        <div class="col-xs-7 o_kanban_primary_right">
+                        <div class="col-7 o_kanban_primary_right">
                             <div class="row">
-                                <div class="col-xs-7">
+                                <div class="col-7">
                                     <a type="object" name="open_action" context="{'search_default_draft': '1'}">
                                         <span t-if="journal_type == 'sale'" title="Invoices to Validate"><t t-esc="dashboard.number_draft"/> Invoices to Validate</span>
                                         <span t-if="journal_type == 'purchase'" title="Bills to Validate"><t t-esc="dashboard.number_draft"/> Bills to Validate</span>
                                     </a>
                                 </div>
-                                <div class="col-xs-5 text-right">
+                                <div class="col-5 text-right">
                                     <span><t t-esc="dashboard.sum_draft"/></span>
                                 </div>
                             </div>
                             <div class="row">
-                                <div class="col-xs-7">
+                                <div class="col-7">
                                     <a type="object" t-if="journal_type == 'sale'" name="open_action"
                                     context="{'search_default_unpaid':1}" id="account_dashboard_sale_pay_link">
                                         <t t-esc="dashboard.number_waiting"/> Unpaid Invoices
@@ -297,7 +297,7 @@
                                         <t t-esc="dashboard.number_waiting"/> Bills to Pay
                                     </a>
                                 </div>
-                                <div class="col-xs-5 text-right">
+                                <div class="col-5 text-right">
                                     <span><t t-esc="dashboard.sum_waiting"/></span>
                                 </div>
                             </div>
diff --git a/addons/account/views/account_payment_view.xml b/addons/account/views/account_payment_view.xml
index 91bde7b508c..bec2bee0a71 100644
--- a/addons/account/views/account_payment_view.xml
+++ b/addons/account/views/account_payment_view.xml
@@ -53,23 +53,23 @@
                         <t t-name="kanban-box">
                             <div t-attf-class="oe_kanban_global_click">
                                 <div class="row mb4">
-                                    <div class="col-xs-6">
+                                    <div class="col-6">
                                         <strong><span><field name="name"/></span></strong>
                                     </div>
-                                    <div class="col-xs-6 text-right">
+                                    <div class="col-6 text-right">
                                         <strong><i class="fa fa-clock-o" role="img" aria-label="Date" title="Date"/> <t t-esc="record.payment_date.value"/></strong>
                                     </div>
                                 </div>
                                 <div class="row">
-                                    <div class="col-xs-12">
+                                    <div class="col-12">
                                         <span><field name="partner_id"/></span>
                                     </div>
                                 </div>
                                 <div class="row">
-                                    <div class="col-xs-6">
+                                    <div class="col-6">
                                         <field name="amount" widget='monetary'/>
                                     </div>
-                                    <div class="col-xs-6">
+                                    <div class="col-6">
                                         <span class="pull-right label label-default">
                                             <field name="state" widget="kanban_label_selection" options="{'classes': {'draft': 'default', 'sent': 'success'}}"/>
                                         </span>
diff --git a/addons/account/views/account_portal_templates.xml b/addons/account/views/account_portal_templates.xml
index 0a1cd2ac10a..c8159190839 100644
--- a/addons/account/views/account_portal_templates.xml
+++ b/addons/account/views/account_portal_templates.xml
@@ -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 d-print-none">
+                <div class="col-lg-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">
@@ -108,7 +108,7 @@
                     </div>
                 </div>
                 <!-- Page Content -->
-                <div id="invoice_content" class="col-md-9 o_portal_page_content d-print-none">
+                <div id="invoice_content" class="col-lg-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">
@@ -142,7 +142,7 @@
 
     <template id="portal_invoice_error" name="Invoice error/warning display">
         <div class="row mr16">
-            <div t-attf-class="'col-md-12 mr16 ml16 alert alert-dismissable' #{'alert-danger' if error else 'alert-warning'}" role="alert">
+            <div t-attf-class="'col-lg-12 mr16 ml16 alert alert-dismissable' #{'alert-danger' if error else 'alert-warning'}" role="alert">
                 <a href="#" class="close" data-dismiss="alert" aria-label="close" title="close">×</a>
                 <t t-if="error == 'generic'" name="generic">
                     There was an error processing this page.
@@ -153,7 +153,7 @@
 
     <template id="portal_invoice_success" name="Invoice success display">
         <div class="row mr16">
-            <div class="col-md-12 mr16 ml16 alert alert-dismissable alert-success" role="status">
+            <div class="col-lg-12 mr16 ml16 alert alert-dismissable alert-success" role="status">
                 <a href="#" class="close" data-dismiss="alert" aria-label="close" title="close">×</a>
             </div>
         </div>
diff --git a/addons/account/views/account_view.xml b/addons/account/views/account_view.xml
index 2fad4d5c6b0..51ab74c83a8 100644
--- a/addons/account/views/account_view.xml
+++ b/addons/account/views/account_view.xml
@@ -31,9 +31,9 @@
                            </group>
                            <group>
                                <div class="row">
-                                   <div class="col-md-11 col-md-offset-1 col-sm-12 no-margin-top" style="background-color: #eee">
+                                   <div class="col-lg-11 offset-lg-1 col-md-12 no-margin-top" style="background-color: #eee">
                                        <p class="text-center" style="font-weight: bold;">How do account types affect your reports?</p>
-                                       <div class="col-md-6 col-sm-6">
+                                       <div class="col-lg-6 col-md-6">
                                            <div class="oe_account_help">
                                                 <p class="oe_account_font_help text-center">Profit &amp; Loss</p>
                                                 <p class="oe_account_font_help oe_account_font_title">Income</p>
@@ -59,7 +59,7 @@
                                                </div>
                                            </div>
                                        </div>
-                                       <div class="col-md-6 col-sm-6">
+                                       <div class="col-lg-6 col-md-6">
                                            <div class="oe_account_help">
                                                <p class="oe_account_font_help text-center">Balance Sheet</p>
                                                <p class="oe_account_font_help oe_account_font_title" style="color: grey;">Current Assets</p>
@@ -113,10 +113,10 @@
                         <t t-name="kanban-box">
                             <div t-attf-class="oe_kanban_global_click">
                                 <div class="row">
-                                    <div class="col-xs-6">
+                                    <div class="col-6">
                                         <strong><field name="name"/></strong>
                                     </div>
-                                    <div class="col-xs-6 text-right">
+                                    <div class="col-6 text-right">
                                         <span class="badge"><t t-esc="record.code.value"/></span>
                                     </div>
                                 </div>
@@ -225,10 +225,10 @@
                         <t t-name="kanban-box">
                             <div t-attf-class="oe_kanban_content oe_kanban_global_click">
                                 <div class="row">
-                                    <div class="col-xs-6">
+                                    <div class="col-6">
                                         <strong><field name="name"/></strong>
                                     </div>
-                                    <div class="col-xs-6">
+                                    <div class="col-6">
                                         <span class="pull-right"><field name="type"/></span>
                                     </div>
                                 </div>
@@ -379,7 +379,7 @@
                         <t t-name="kanban-box">
                             <div t-attf-class="oe_kanban_content oe_kanban_global_click">
                                 <div class="row">
-                                    <div class="col-xs-12">
+                                    <div class="col-12">
                                         <strong><field name="name"/></strong>
                                     </div>
                                 </div>
@@ -1027,10 +1027,10 @@
                         <t t-name="kanban-box">
                             <div t-attf-class="oe_kanban_card oe_kanban_global_click">
                                 <div class="row mb4">
-                                    <div class="col-xs-6">
+                                    <div class="col-6">
                                         <strong><span><t t-esc="record.name.value"/></span></strong>
                                     </div>
-                                    <div class="col-xs-6 pull-right text-right">
+                                    <div class="col-6 pull-right text-right">
                                         <span class="badge"><t t-esc="record.type_tax_use.value"/></span>
                                     </div>
                                 </div>
@@ -1245,16 +1245,16 @@
                         <t t-name="kanban-box">
                             <div class="oe_kanban_global_click">
                                 <div class="row mb4">
-                                    <strong class="col-xs-6">
+                                    <strong class="col-6">
                                         <span t-esc="record.move_id.value"/>
                                     </strong>
-                                    <strong class="col-xs-6 text-right">
+                                    <strong class="col-6 text-right">
                                         <i class="fa fa-clock-o" aria-label="Date" role="img" title="Date"/><field name="date_maturity"/>
                                     </strong>
-                                    <div class="col-xs-10">
+                                    <div class="col-10">
                                         <span t-esc="record.name.value"/>
                                     </div>
-                                    <div class="col-xs-2 text-right">
+                                    <div class="col-2 text-right">
                                         <img t-att-src="kanban_image('res.partner', 'image_small', record.partner_id.raw_value)" t-att-title="record.partner_id.value" t-att-alt="record.partner_id.value" width="24" height="24" class="oe_kanban_avatar"/>
                                     </div>
                                 </div>
@@ -1456,24 +1456,24 @@
                         <t t-name="kanban-box">
                             <div t-attf-class="oe_kanban_global_click">
                                 <div class="row mb4">
-                                    <div class="col-xs-6">
+                                    <div class="col-6">
                                         <strong><span><field name="journal_id"/></span></strong>
                                     </div>
-                                    <div class="col-xs-6 text-right">
+                                    <div class="col-6 text-right">
                                         <strong><i class="fa fa-clock-o" aria-label="Date" role="img" title="Date"/> <t t-esc="record.date.value"/></strong>
                                     </div>
                                 </div>
                                 <div class="row">
-                                    <div class="col-xs-12">
+                                    <div class="col-12">
                                         <span><field name="ref"/></span>
                                     </div>
                                 </div>
                                 <div class="row">
-                                    <div class="col-xs-6">
+                                    <div class="col-6">
                                         <span><field name="amount" widget='monetary'/></span>
                                         <span><field name="currency_id" invisible="1"/></span>
                                     </div>
-                                    <div class="col-xs-6">
+                                    <div class="col-6">
                                         <span class="pull-right">
                                             <field name="state" widget="kanban_label_selection" options="{'classes': {'draft': 'default', 'posted': 'success'}}"/>
                                         </span>
diff --git a/addons/account/views/report_agedpartnerbalance.xml b/addons/account/views/report_agedpartnerbalance.xml
index cdead9960e5..44e0ec11b69 100644
--- a/addons/account/views/report_agedpartnerbalance.xml
+++ b/addons/account/views/report_agedpartnerbalance.xml
@@ -7,17 +7,17 @@
                 <h2>Aged Partner Balance</h2>
 
                 <div class="row mt32">
-                    <div class="col-xs-3">
+                    <div class="col-3">
                         <strong>Start Date:</strong>
                         <p t-esc="data['date_from']"/>
                     </div>
-                    <div class="col-xs-3">
+                    <div class="col-3">
                         <strong>Period Length (days)</strong>
                         <p t-esc="data['period_length']"/>
                     </div>
                 </div>
                 <div class="row mb32">
-                    <div class="col-xs-3">
+                    <div class="col-3">
                         <strong>Partner's:</strong>
                         <p>
                             <span t-if="data['result_selection'] == 'customer'">Receivable Accounts</span>
@@ -25,7 +25,7 @@
                             <span t-if="data['result_selection'] == 'customer_supplier'">Receivable and Payable Accounts</span>
                         </p>
                     </div>
-                    <div class="col-xs-3">
+                    <div class="col-3">
                         <strong>Target Moves:</strong>
                         <p>
                             <span t-if="data['target_move'] == 'all'">All Entries</span>
diff --git a/addons/account/views/report_financial.xml b/addons/account/views/report_financial.xml
index 4e91479f391..c620323b8e9 100644
--- a/addons/account/views/report_financial.xml
+++ b/addons/account/views/report_financial.xml
@@ -8,14 +8,14 @@
                     <h2 t-esc="data['account_report_id'][1]"/>
 
                     <div class="row mt32 mb32">
-                        <div class="col-xs-4">
+                        <div class="col-4">
                             <strong>Target Moves:</strong>
                             <p>
                                 <span t-if="data['target_move'] == 'all'">All Entries</span>
                                 <span t-if="data['target_move'] == 'posted'">All Posted Entries</span>
                             </p>
                         </div>
-                        <div class="col-xs-4">
+                        <div class="col-4">
                             <p>
                                 <t t-if="data['date_from']"><strong>Date from :</strong> <span t-esc="data['date_from']"/><br/></t>
                                 <t t-if="data['date_to']"><strong>Date to :</strong> <span t-esc="data['date_to']"/></t>
diff --git a/addons/account/views/report_generalledger.xml b/addons/account/views/report_generalledger.xml
index f515c29ba6f..42379099d94 100644
--- a/addons/account/views/report_generalledger.xml
+++ b/addons/account/views/report_generalledger.xml
@@ -12,11 +12,11 @@
                 <h2><span t-esc="res_company.name"/>: General ledger</h2>
 
                 <div class="row mt32">
-                    <div class="col-xs-4">
+                    <div class="col-4">
                         <strong>Journals:</strong>
                           <p t-esc="', '.join([ lt or '' for lt in print_journal ])"/>
                     </div>
-                    <div class="col-xs-4">
+                    <div class="col-4">
                         <strong>Display Account</strong>
                         <p>
                             <span t-if="data['display_account'] == 'all'">All accounts'</span>
@@ -24,19 +24,19 @@
                             <span t-if="data['display_account'] == 'not_zero'">With balance not equal to zero</span>
                         </p>
                     </div>
-                    <div class="col-xs-4">
+                    <div class="col-4">
                         <strong>Target Moves:</strong>
                         <p t-if="data['target_move'] == 'all'">All Entries</p>
                         <p t-if="data['target_move'] == 'posted'">All Posted Entries</p>
                     </div>
                 </div>
                 <div class="row mb32">
-                    <div class="col-xs-4">
+                    <div class="col-4">
                         <strong>Sorted By:</strong>
                         <p t-if="data['sortby'] == 'sort_date'">Date</p>
                         <p t-if="data['sortby'] == 'sort_journal_partner'">Journal and Partner</p>
                     </div>
-                    <div class="col-xs-4">
+                    <div class="col-4">
                         <t t-if="data['date_from']"><strong>Date from :</strong> <span t-esc="data['date_from']"/><br/></t>
                         <t t-if="data['date_to']"><strong>Date to :</strong> <span t-esc="data['date_to']"/></t>
                     </div>
diff --git a/addons/account/views/report_invoice.xml b/addons/account/views/report_invoice.xml
index acb0e3a29f3..9f8f6e856b6 100644
--- a/addons/account/views/report_invoice.xml
+++ b/addons/account/views/report_invoice.xml
@@ -21,8 +21,8 @@
                     </h2>
 
                     <!-- HTML Preview for mobile responsive -->
-                    <t t-set="o_grid_layout" t-value="'col-xs-2'"/>
-                    <t t-if="type_html" t-set="o_grid_layout" t-value="'col-sm-2 col-xs-6'"/>
+                    <t t-set="o_grid_layout" t-value="'col-2'"/>
+                    <t t-if="type_html" t-set="o_grid_layout" t-value="'col-6 col-md-2'"/>
                     <div class="row mt32 mb32">
                         <div t-att-class="o_grid_layout" t-if="o.name" name="description">
                             <strong>Description:</strong>
@@ -156,7 +156,7 @@
 
                     <div class="clearfix">
                         <div id="total" class="row">
-                            <div t-attf-class="col-sm-4 pull-right #{'col-xs-4' if not type_html else ''}">
+                            <div t-attf-class="col-md-4 pull-right #{'col-4' if not type_html else ''}">
                                 <table class="table table-condensed" style="min-width: 250px;max-width: 400px;">
                                     <tr class="border-black" style="border-bottom:1px solid #dddddd;">
                                         <td><strong>Subtotal</strong></td>
diff --git a/addons/account/views/report_journal.xml b/addons/account/views/report_journal.xml
index c642b89347a..fa7c0f9705a 100644
--- a/addons/account/views/report_journal.xml
+++ b/addons/account/views/report_journal.xml
@@ -11,20 +11,20 @@
                     <h2><t t-esc="o.name"/> Journal</h2>
 
                     <div class="row mt32">
-                        <div class="col-xs-3">
+                        <div class="col-3">
                             <strong>Company:</strong>
                             <p t-esc="res_company.name"/>
                         </div>
-                        <div class="col-xs-3">
+                        <div class="col-3">
                             <strong>Journal:</strong>
                             <p t-esc="o.name"/>
                         </div>
-                        <div class="col-xs-3">
+                        <div class="col-3">
                             <strong>Entries Sorted By:</strong>
                             <p t-if="data['form'].get('sort_selection') != 'l.date'">Journal Entry Number</p>
                             <p t-if="data['form'].get('sort_selection') == 'l.date'">Date</p>
                         </div>
-                        <div class="col-xs-3">
+                        <div class="col-3">
                             <strong>Target Moves:</strong>
                             <p t-if="data['form']['target_move'] == 'all'">All Entries</p>
                             <p t-if="data['form']['target_move'] == 'posted'">All Posted Entries</p>
@@ -61,7 +61,7 @@
                     </table>
 
                     <div class="row">
-                        <div class="col-xs-4 pull-right">
+                        <div class="col-4 pull-right">
                             <table class="table table-condensed">
                                 <tr>
                                     <td><strong>Total</strong></td>
@@ -73,7 +73,7 @@
                     </div>
 
                     <div class="row">
-                        <div class="col-xs-4">
+                        <div class="col-4">
                             <table class="table table-condensed">
                                 <thead>
                                     <tr><th colspan="3">Tax Declaration</th></tr>
diff --git a/addons/account/views/report_overdue.xml b/addons/account/views/report_overdue.xml
index 002ce58ef9b..6e3972baee6 100644
--- a/addons/account/views/report_overdue.xml
+++ b/addons/account/views/report_overdue.xml
@@ -4,7 +4,7 @@
     <t t-call="web.external_layout">
         <div class="page">
             <div class="row">
-                <div class="col-xs-5 col-xs-offset-7">
+                <div class="col-5 offset-7">
                     <span t-field="o.name"/><br/>
                     <span t-raw="o.contact_address.replace('\n\n', '\n').replace('\n', '&lt;br&gt;')"/>
                     <span t-field="o.vat"/>
diff --git a/addons/account/views/report_partnerledger.xml b/addons/account/views/report_partnerledger.xml
index b9b46ed86fc..408ab8354c9 100644
--- a/addons/account/views/report_partnerledger.xml
+++ b/addons/account/views/report_partnerledger.xml
@@ -11,15 +11,15 @@
                     <h2>Partner Ledger</h2>
 
                     <div class="row">
-                        <div class="col-xs-3">
+                        <div class="col-3">
                             <strong>Company:</strong>
                             <p t-esc="res_company.name"/>
                         </div>
-                        <div class="col-xs-3">
+                        <div class="col-3">
                             <t t-if="data['form']['date_from']"><strong>Date from :</strong> <span t-esc="data['form']['date_from']"/><br/></t>
                             <t t-if="data['form']['date_to']"><strong>Date to :</strong> <span t-esc="data['form']['date_to']"/></t>
                         </div>
-                        <div class="col-xs-3">
+                        <div class="col-3">
                             <strong>Target Moves:</strong>
                             <p t-if="data['form']['target_move'] == 'all'">All Entries</p>
                             <p t-if="data['form']['target_move'] == 'posted'">All Posted Entries</p>
diff --git a/addons/account/views/report_tax.xml b/addons/account/views/report_tax.xml
index f5b03968911..d0539de3eae 100644
--- a/addons/account/views/report_tax.xml
+++ b/addons/account/views/report_tax.xml
@@ -6,7 +6,7 @@
                 <div class="page">
                     <h3> Tax Report</h3>
                     <div class="row">
-                        <div class="col-xs-4">
+                        <div class="col-4">
                             <t t-if="data['date_from']"><strong>From</strong> <span t-esc="data['date_from']"/><br/></t>
                             <t t-if="data['date_to']"><strong>to </strong><span t-esc="data['date_to']"/></t>
                         </div>
diff --git a/addons/account/views/report_trialbalance.xml b/addons/account/views/report_trialbalance.xml
index b8c0281616e..c3c0d99952b 100644
--- a/addons/account/views/report_trialbalance.xml
+++ b/addons/account/views/report_trialbalance.xml
@@ -7,7 +7,7 @@
                 <h2><span t-esc="res_company.name"/>: Trial Balance</h2>
 
                 <div class="row mt32">
-                    <div class="col-xs-4">
+                    <div class="col-4">
                         <strong>Display Account:</strong>
                         <p>
                             <span t-if="data['display_account'] == 'all'">All accounts</span>
@@ -15,13 +15,13 @@
                             <span t-if="data['display_account'] == 'not_zero'">With balance not equal to zero</span>
                         </p>
                     </div>
-                    <div class="col-xs-4">
+                    <div class="col-4">
                         <p>
                             <t t-if="data['date_from']"><strong>Date from :</strong> <span t-esc="data['date_from']"/><br/></t>
                             <t t-if="data['date_to']"><strong>Date to :</strong> <span t-esc="data['date_to']"/></t>
                         </p>
                     </div>
-                    <div class="col-xs-4">
+                    <div class="col-4">
                         <strong>Target Moves:</strong>
                         <p>
                             <span t-if="data['target_move'] == 'all'">All Entries</span>
diff --git a/addons/account/views/res_config_settings_views.xml b/addons/account/views/res_config_settings_views.xml
index 83b1e1b3809..25749791a1f 100644
--- a/addons/account/views/res_config_settings_views.xml
+++ b/addons/account/views/res_config_settings_views.xml
@@ -21,7 +21,7 @@
                         <field name="has_accounting_entries" invisible="1"/>
                             <h2 attrs="{'invisible': [('has_accounting_entries','!=',False)]}">Fiscal Localization</h2>
                             <div class="row mt16 o_settings_container">
-                                <div class="col-xs-12 col-md-6 o_setting_box" attrs="{'invisible': [('has_accounting_entries','!=',False)]}">
+                                <div class="col-12 col-lg-6 o_setting_box" attrs="{'invisible': [('has_accounting_entries','!=',False)]}">
                                     <div class="o_setting_left_pane"/>
                                     <div class="o_setting_right_pane">
                                         <span class="o_form_label">Fiscal Localization</span>
@@ -31,7 +31,7 @@
                                         </div>
                                         <div class="content-group">
                                             <div class="row mt16">
-                                                <label for="chart_template_id" string="Package" class="col-md-3 o_light_label"/>
+                                                <label for="chart_template_id" string="Package" class="col-lg-3 o_light_label"/>
                                                 <field name="chart_template_id" widget="selection"/>
                                             </div>
                                             <div>
@@ -44,7 +44,7 @@
                         <t groups="account.group_account_user">
                             <h2>Setup</h2>
                             <div class="row mt16 o_settings_container">
-                                <div class="col-xs-12 col-md-6 o_setting_box">
+                                <div class="col-12 col-lg-6 o_setting_box">
                                     <div class="o_setting_left_pane">
                                         <field name="account_hide_setup_bar" widget="upgrade_boolean"/>
                                     </div>
@@ -59,7 +59,7 @@
                         </t>
                         <h2>Taxes</h2>
                         <div class="row mt16 o_settings_container">
-                            <div class="col-xs-12 col-md-6 o_setting_box" title="These taxes are set in any new product created.">
+                            <div class="col-12 col-lg-6 o_setting_box" title="These taxes are set in any new product created.">
                                 <div class="o_setting_left_pane"/>
                                 <div class="o_setting_right_pane">
                                     <span class="o_form_label">Default Taxes</span>
@@ -69,17 +69,17 @@
                                     </div>
                                     <div class="content-group">
                                         <div class="row mt16">
-                                            <label string="Sales Tax" for="sale_tax_id" class="col-md-3 o_light_label"/>
+                                            <label string="Sales Tax" for="sale_tax_id" class="col-lg-3 o_light_label"/>
                                             <field name="sale_tax_id" domain="[('type_tax_use', 'in', ('sale', 'all')), ('company_id', '=', company_id)]"/>
                                         </div>
                                         <div class="row">
-                                            <label string="Purchase Tax" for="purchase_tax_id" class="col-md-3 o_light_label"/>
+                                            <label string="Purchase Tax" for="purchase_tax_id" class="col-lg-3 o_light_label"/>
                                             <field name="purchase_tax_id" domain="[('type_tax_use', 'in', ('purchase', 'all')), ('company_id', '=', company_id)]"/>
                                         </div>
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-xs-12 col-md-6 o_setting_box" id="rounding_method" title="A rounding per line is advised if your prices are tax-included. That way, the sum of line subtotals equals the total with taxes.">
+                            <div class="col-12 col-lg-6 o_setting_box" id="rounding_method" title="A rounding per line is advised if your prices are tax-included. That way, the sum of line subtotals equals the total with taxes.">
                                 <div class="o_setting_left_pane"/>
                                 <div class="o_setting_right_pane">
                                     <span class="o_form_label">Rounding Method</span>
@@ -91,7 +91,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-xs-12 col-md-6 o_setting_box" id="taxcloud_settings">
+                            <div class="col-12 col-lg-6 o_setting_box" id="taxcloud_settings">
                                 <div class="o_setting_left_pane">
                                     <field name="module_account_taxcloud"/>
                                 </div>
@@ -103,7 +103,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-xs-12 col-md-6 o_setting_box" id="eu_service" title="If you're selling digital goods to customers in the EU, you must charge VAT based on your customers' locations. This rule applies regardless of you are located. Digital goods are defined in the legislation as broadcasting, telecommunications, and services that are electronically supplied instead of shipped. Gift cards sent online are not included in the definition.">
+                            <div class="col-12 col-lg-6 o_setting_box" id="eu_service" title="If you're selling digital goods to customers in the EU, you must charge VAT based on your customers' locations. This rule applies regardless of you are located. Digital goods are defined in the legislation as broadcasting, telecommunications, and services that are electronically supplied instead of shipped. Gift cards sent online are not included in the definition.">
                                 <div class="o_setting_left_pane">
                                     <field name="module_l10n_eu_service"/>
                                 </div>
@@ -114,7 +114,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-xs-12 col-md-6 o_setting_box" title="Select this if the taxes should use cash basis, which will create an entry for such taxes on a given account during reconciliation." groups="account.group_account_user">
+                            <div class="col-12 col-lg-6 o_setting_box" title="Select this if the taxes should use cash basis, which will create an entry for such taxes on a given account during reconciliation." groups="account.group_account_user">
                                 <div class="o_setting_left_pane">
                                     <field name="tax_exigibility"/>
                                 </div>
@@ -126,7 +126,7 @@
                                     </div>
                                     <div class="content-group" attrs="{'invisible': [('tax_exigibility', '=', False)]}">
                                         <div class="row mt16">
-                                            <label for="tax_cash_basis_journal_id" class="col-md-3 o_light_label"/>
+                                            <label for="tax_cash_basis_journal_id" class="col-lg-3 o_light_label"/>
                                             <field name="tax_cash_basis_journal_id"/>
                                         </div>
                                     </div>
@@ -135,7 +135,7 @@
                         </div>
                         <h2>Currencies</h2>
                         <div class="row mt16 o_settings_container">
-                            <div class="col-xs-12 col-md-6 o_setting_box">
+                            <div class="col-12 col-lg-6 o_setting_box">
                                 <div class="o_setting_left_pane"/>
                                 <div class="o_setting_right_pane">
                                     <span class="o_form_label">Main Currency</span>
@@ -145,13 +145,13 @@
                                     </div>
                                     <div class="content-group">
                                         <div class="row mt16">
-                                            <label for="currency_id" class="col-md-3 o_light_label"/>
+                                            <label for="currency_id" class="col-lg-3 o_light_label"/>
                                             <field name="currency_id" options="{'no_create_edit': True, 'no_open': True}" context="{'active_test': False}"/>
                                         </div>
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-xs-12 col-md-6 o_setting_box">
+                            <div class="col-12 col-lg-6 o_setting_box">
                                 <div class="o_setting_left_pane">
                                     <field name="group_multi_currency"/>
                                 </div>
@@ -165,13 +165,13 @@
                                             <button name="%(base.action_currency_all_form)d" icon="fa-arrow-right" type="action" string="Activate Other Currencies" class="btn-link"/>
                                         </div>
                                         <div class="row mt16">
-                                            <label for="currency_exchange_journal_id" class="col-md-3 o_light_label"/>
+                                            <label for="currency_exchange_journal_id" class="col-lg-3 o_light_label"/>
                                             <field name="currency_exchange_journal_id"/>
                                         </div>
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-xs-12 col-md-6 o_setting_box" attrs="{'invisible': [('group_multi_currency', '=', False)]}">
+                            <div class="col-12 col-lg-6 o_setting_box" attrs="{'invisible': [('group_multi_currency', '=', False)]}">
                                 <div class="o_setting_left_pane">
                                     <field name="module_currency_rate_live" widget="upgrade_boolean"/>
                                 </div>
@@ -186,8 +186,8 @@
                         <t groups="account.group_account_user">
                             <h2>Fiscal Periods</h2>
                             <div class="row mt16 o_settings_container" id="accounting_reports">
-                                <div class="col-xs-12 col-md-6 o_setting_box" id="fiscalyear" invisible="1" groups="account.group_account_user"/>
-                                <div class="col-xs-12 col-md-6 o_setting_box" id="dynamic_report" invisible="1" groups="account.group_account_user">
+                                <div class="col-12 col-lg-6 o_setting_box" id="fiscalyear" invisible="1" groups="account.group_account_user"/>
+                                <div class="col-12 col-lg-6 o_setting_box" id="dynamic_report" invisible="1" groups="account.group_account_user">
                                     <div class="o_setting_left_pane">
                                         <field name="module_account_reports" widget="upgrade_boolean"/>
                                     </div>
@@ -202,7 +202,7 @@
                         </t>
                         <h2>Customer Payments</h2>
                         <div class="row mt16 o_settings_container">
-                            <div class="col-xs-12 col-md-6 o_setting_box" id="account_followup" title="This feature is useful if you issue a high amounts of invoices.">
+                            <div class="col-12 col-lg-6 o_setting_box" id="account_followup" title="This feature is useful if you issue a high amounts of invoices.">
                                 <div class="o_setting_left_pane">
                                     <field name="module_account_reports_followup" widget="upgrade_boolean"/>
                                 </div>
@@ -218,7 +218,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-xs-12 col-md-6 o_setting_box">
+                            <div class="col-12 col-lg-6 o_setting_box">
                                 <div class="o_setting_left_pane">
                                     <field name="module_account_payment"/>
                                 </div>
@@ -229,7 +229,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-xs-12 col-md-6 o_setting_box" groups="account.group_account_user">
+                            <div class="col-12 col-lg-6 o_setting_box" groups="account.group_account_user">
                                 <div class="o_setting_left_pane">
                                     <field name="module_account_batch_payment" widget="upgrade_boolean"/>
                                 </div>
@@ -240,7 +240,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-xs-12 col-md-6 o_setting_box" title="If you check this box, you will be able to collect payments using SEPA Direct Debit mandates.">
+                            <div class="col-12 col-lg-6 o_setting_box" title="If you check this box, you will be able to collect payments using SEPA Direct Debit mandates.">
                                 <div class="o_setting_left_pane">
                                     <field name="module_account_sepa_direct_debit" class="oe_inline" widget="upgrade_boolean"/>
                                 </div>
@@ -275,7 +275,7 @@
 
                         <h2>Supplier Payments</h2>
                         <div class="row mt16 o_settings_container">
-                            <div class="col-xs-12 col-md-6 o_setting_box" groups="account.group_account_user">
+                            <div class="col-12 col-lg-6 o_setting_box" groups="account.group_account_user">
                                 <div class="o_setting_left_pane">
                                     <field name="module_account_check_printing" widget="upgrade_boolean"/>
                                 </div>
@@ -287,7 +287,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-xs-12 col-md-6 o_setting_box" title="If you check this box, you will be able to register your payment using SEPA.">
+                            <div class="col-12 col-lg-6 o_setting_box" title="If you check this box, you will be able to register your payment using SEPA.">
                                 <div class="o_setting_left_pane">
                                     <field name="module_account_sepa" widget="upgrade_boolean"/>
                                 </div>
@@ -304,7 +304,7 @@
                         <t groups="account.group_account_user">
                             <h2>Bank &amp; Cash</h2>
                             <div class="row mt16 o_settings_container" id="bank_cash">
-                                <div class="col-xs-12 col-md-6 o_setting_box" id="account_yodlee" title="Get your bank statements automatically imported every 4 hours, or in one-click, using Yodlee and Plaid services. Once installed, set “Bank Feeds” to “Bank Synchronization” in bank account settings. Then, click “Configure” on the online account to enter your bank credentials.">
+                                <div class="col-12 col-lg-6 o_setting_box" id="account_yodlee" title="Get your bank statements automatically imported every 4 hours, or in one-click, using Yodlee and Plaid services. Once installed, set “Bank Feeds” to “Bank Synchronization” in bank account settings. Then, click “Configure” on the online account to enter your bank credentials.">
                                     <div class="o_setting_left_pane">
                                         <field name="module_account_yodlee" widget="upgrade_boolean"/>
                                     </div>
@@ -315,7 +315,7 @@
                                         </div>
                                     </div>
                                 </div>
-                                <div class="col-xs-12 col-md-6 o_setting_box" title="Once installed, set 'Bank Feeds' to 'File Import' in bank account settings.This adds a button to import from the Accounting dashboard.">
+                                <div class="col-12 col-lg-6 o_setting_box" title="Once installed, set 'Bank Feeds' to 'File Import' in bank account settings.This adds a button to import from the Accounting dashboard.">
                                     <div class="o_setting_left_pane">
                                         <field name="module_account_bank_statement_import_csv" widget="upgrade_boolean"/>
                                     </div>
@@ -326,7 +326,7 @@
                                         </div>
                                     </div>
                                 </div>
-                                <div class="col-xs-12 col-md-6 o_setting_box" title="Once installed, set 'Bank Feeds' to 'File Import' in bank account settings.This adds a button to import from the Accounting dashboard.">
+                                <div class="col-12 col-lg-6 o_setting_box" title="Once installed, set 'Bank Feeds' to 'File Import' in bank account settings.This adds a button to import from the Accounting dashboard.">
                                     <div class="o_setting_left_pane">
                                         <field name="module_account_bank_statement_import_qif" widget="upgrade_boolean"/>
                                     </div>
@@ -337,7 +337,7 @@
                                         </div>
                                     </div>
                                 </div>
-                                <div class="col-xs-12 col-md-6 o_setting_box" title="Once installed, set 'Bank Feeds' to 'File Import' in bank account settings.This adds a button to import from the Accounting dashboard.">
+                                <div class="col-12 col-lg-6 o_setting_box" title="Once installed, set 'Bank Feeds' to 'File Import' in bank account settings.This adds a button to import from the Accounting dashboard.">
                                     <div class="o_setting_left_pane">
                                         <field name="module_account_bank_statement_import_ofx" widget="upgrade_boolean"/>
                                     </div>
@@ -348,7 +348,7 @@
                                         </div>
                                     </div>
                                 </div>
-                                <div class="col-xs-12 col-md-6 o_setting_box" title="Once installed, set 'Bank Feeds' to 'File Import' in bank account settings.This adds a button to import from the Accounting dashboard.">
+                                <div class="col-12 col-lg-6 o_setting_box" title="Once installed, set 'Bank Feeds' to 'File Import' in bank account settings.This adds a button to import from the Accounting dashboard.">
                                     <div class="o_setting_left_pane">
                                         <field name="module_account_bank_statement_import_camt" widget="upgrade_boolean"/>
                                     </div>
@@ -363,7 +363,7 @@
                         </t>
                         <h2>Analytics</h2>
                         <div class="row mt16 o_settings_container" id="analytic">
-                            <div class="col-xs-12 col-md-6 o_setting_box" title="Allows you to use the analytic accounting." groups="account.group_account_user">
+                            <div class="col-12 col-lg-6 o_setting_box" title="Allows you to use the analytic accounting." groups="account.group_account_user">
                                 <div class="o_setting_left_pane">
                                     <field name="group_analytic_accounting"/>
                                 </div>
@@ -382,7 +382,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-xs-12 col-md-6 o_setting_box" groups="account.group_account_user">
+                            <div class="col-12 col-lg-6 o_setting_box" groups="account.group_account_user">
                                 <div class="o_setting_left_pane">
                                     <field name="group_analytic_tags"/>
                                 </div>
@@ -398,7 +398,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-xs-12 col-md-6 o_setting_box" id="account_budget" title="This allows accountants to manage analytic and crossovered budgets. Once the master budgets and the budgets are defined, the project managers can set the planned amount on each analytic account." groups="account.group_account_user">
+                            <div class="col-12 col-lg-6 o_setting_box" id="account_budget" title="This allows accountants to manage analytic and crossovered budgets. Once the master budgets and the budgets are defined, the project managers can set the planned amount on each analytic account." groups="account.group_account_user">
                                 <div class="o_setting_left_pane">
                                     <field name="module_account_budget"/>
                                 </div>
@@ -414,7 +414,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-xs-12 col-md-6 o_setting_box">
+                            <div class="col-12 col-lg-6 o_setting_box">
                                 <div class="o_setting_left_pane">
                                     <field name="module_product_margin"/>
                                 </div>
@@ -428,7 +428,7 @@
                         </div>
                         <h2>Invoices</h2>
                         <div class="row mt16 o_settings_container" id="invoicing_settings">
-                            <div class="col-xs-12 col-md-6 o_setting_box">
+                            <div class="col-12 col-lg-6 o_setting_box">
                                 <div class="o_setting_left_pane">
                                 </div>
                                 <div class="o_setting_right_pane">
@@ -443,7 +443,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-xs-12 col-md-6 o_setting_box">
+                            <div class="col-12 col-lg-6 o_setting_box">
                                 <div class="o_setting_left_pane">
                                     <field name="group_warning_account"/>
                                 </div>
@@ -454,7 +454,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-xs-12 col-md-6 o_setting_box">
+                            <div class="col-12 col-lg-6 o_setting_box">
                                 <div class="o_setting_left_pane">
                                     <field name="module_print_docsaway" widget="upgrade_boolean"/>
                                 </div>
@@ -465,7 +465,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-xs-12 col-md-6 o_setting_box">
+                            <div class="col-12 col-lg-6 o_setting_box">
                                 <div class="o_setting_left_pane">
                                     <field name="group_cash_rounding"/>
                                 </div>
@@ -495,7 +495,7 @@
                         </div>
                         <h2 groups="account.group_account_user">Automated Entries</h2>
                         <div class="row mt16 o_settings_container" id="recommended_apps" groups="account.group_account_user">
-                            <div class="col-xs-12 col-md-6 o_setting_box" id="asset_types" title="This allows you to manage the assets owned by a company or a person. It keeps track of the depreciation occurred on those assets, and creates account move for those depreciation lines.">
+                            <div class="col-12 col-lg-6 o_setting_box" id="asset_types" title="This allows you to manage the assets owned by a company or a person. It keeps track of the depreciation occurred on those assets, and creates account move for those depreciation lines.">
                                 <div class="o_setting_left_pane">
                                     <field name="module_account_asset"/>
                                 </div>
@@ -511,7 +511,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-xs-12 col-md-6 o_setting_box" title="This allows you to manage the revenue recognition on selling products. It keeps track of the installments occurred on those revenue recognitions, and creates account moves for those installment lines.">
+                            <div class="col-12 col-lg-6 o_setting_box" title="This allows you to manage the revenue recognition on selling products. It keeps track of the installments occurred on those revenue recognitions, and creates account moves for those installment lines.">
                                 <div class="o_setting_left_pane">
                                     <field name="module_account_deferred_revenue" widget="upgrade_boolean"/>
                                 </div>
diff --git a/addons/account/wizard/setup_wizards_view.xml b/addons/account/wizard/setup_wizards_view.xml
index 23fcb9eaea2..fa3c70e0c02 100644
--- a/addons/account/wizard/setup_wizards_view.xml
+++ b/addons/account/wizard/setup_wizards_view.xml
@@ -28,23 +28,23 @@
             <field name="arch" type="xml">
                 <form>
                     <div class="row">
-                        <div class="col-xs-4">
+                        <div class="col-4">
                             <label for="opening_date"/>
                         </div>
-                        <div class="col-xs-8">
+                        <div class="col-8">
                             <field name="opening_move_posted" invisible="1"/>
                             <field name="opening_date" attrs="{'readonly': [('opening_move_posted', '=', True)]}"/>
                         </div>
                     </div>
 
                     <div class="row">
-                        <div class="col-xs-4">
+                        <div class="col-4">
                             <strong>Fiscal Year End</strong>
                         </div>
-                        <div class="col-xs-4">
+                        <div class="col-4">
                             <field name="fiscalyear_last_day"/>
                         </div>
-                        <div class="col-xs-4">
+                        <div class="col-4">
                             <field name="fiscalyear_last_month"/>
                         </div>
                     </div>
diff --git a/addons/account_asset/views/account_asset_views.xml b/addons/account_asset/views/account_asset_views.xml
index cd07aa74c30..998cabeedff 100644
--- a/addons/account_asset/views/account_asset_views.xml
+++ b/addons/account_asset/views/account_asset_views.xml
@@ -92,10 +92,10 @@
                     <t t-name="kanban-box">
                         <div t-attf-class="oe_kanban_card oe_kanban_global_click">
                             <div class="row mb4">
-                                <div class="col-xs-6">
+                                <div class="col-6">
                                     <strong><span><t t-esc="record.name.value"/></span></strong>
                                 </div>
-                                <div class="col-xs-6 text-right">
+                                <div class="col-6 text-right">
                                     <span class="badge"><strong><t t-esc="record.method.value"/></strong></span>
                                 </div>
                             </div>
@@ -249,18 +249,18 @@
                     <t t-name="kanban-box">
                         <div t-attf-class="oe_kanban_global_click">
                             <div class="row mb4">
-                                <div class="col-xs-6">
+                                <div class="col-6">
                                     <strong><span><t t-esc="record.name.value"/></span></strong>
                                 </div>
-                                <div class="col-xs-6 pull-right text-right">
+                                <div class="col-6 pull-right text-right">
                                     <strong><t t-esc="record.date.value"/></strong>
                                 </div>
                             </div>
                             <div class="row">
-                                <div class="col-xs-6 text-muted">
+                                <div class="col-6 text-muted">
                                     <span><t t-esc="record.category_id.value"/></span>
                                 </div>
-                                <div class="col-xs-6">
+                                <div class="col-6">
                                     <span class="pull-right text-right">
                                         <field name="state" widget="kanban_label_selection" options="{'classes': {'draft': 'primary', 'open': 'success', 'close': 'default'}}"/>
                                     </span>
diff --git a/addons/account_budget/views/account_budget_views.xml b/addons/account_budget/views/account_budget_views.xml
index b367e4dd776..b0ba9fa9312 100644
--- a/addons/account_budget/views/account_budget_views.xml
+++ b/addons/account_budget/views/account_budget_views.xml
@@ -182,12 +182,12 @@ Budgets
                     <t t-name="kanban-box">
                         <div t-attf-class="oe_kanban_global_click">
                             <div class="row mb4">
-                                <div class="col-xs-8">
+                                <div class="col-8">
                                     <strong>
                                         <field name="name"/>
                                     </strong>
                                 </div>
-                                <div class="col-xs-4">
+                                <div class="col-4">
                                     <span class="pull-right">
                                         <field name="state" widget="kanban_label_selection"
                                                options="{'classes': {'draft': 'default', 'done': 'success'}}"/>
@@ -195,12 +195,12 @@ Budgets
                                 </div>
                             </div>
                             <div class="row">
-                                <div class="col-xs-10">
+                                <div class="col-10">
                                     <i class="fa fa-clock-o" role="img" aria-label="Period" title="Period"/>
                                     <t t-esc="record.date_from.value"/>-
                                     <t t-esc="record.date_to.value"/>
                                 </div>
-                                <div class="col-xs-2">
+                                <div class="col-2">
                                     <span class="pull-right">
                                         <img t-att-src="kanban_image('res.users', 'image_small', record.user_id.raw_value)"
                                              t-att-title="record.user_id.value" t-att-alt="record.user_id.value" width="24" height="24"
diff --git a/addons/account_check_printing/views/account_journal_views.xml b/addons/account_check_printing/views/account_journal_views.xml
index 92989a46fa6..b4a2c06a5ca 100644
--- a/addons/account_check_printing/views/account_journal_views.xml
+++ b/addons/account_check_printing/views/account_journal_views.xml
@@ -8,7 +8,7 @@
                 <xpath expr="//t[@t-name='JournalBodyBankCash']//div[hasclass('o_kanban_primary_right')]" position="inside">
                     <div t-if="journal_type == 'bank' and dashboard.num_checks_to_print != 0">
                         <div class="row">
-                            <div class="col-xs-12">
+                            <div class="col-12">
                                 <a type="object" name="action_checks_to_print">
                                     <t t-esc="dashboard.num_checks_to_print"/>
                                     <t t-if="dashboard.num_checks_to_print == 1">Check to print</t>
diff --git a/addons/account_check_printing/views/res_config_settings_views.xml b/addons/account_check_printing/views/res_config_settings_views.xml
index 3c4de385caf..ef5e5f8f8c6 100644
--- a/addons/account_check_printing/views/res_config_settings_views.xml
+++ b/addons/account_check_printing/views/res_config_settings_views.xml
@@ -8,28 +8,28 @@
             <div id="print_bills_payment" position="after">
                 <div class="content-group">
                     <div class="row mt16">
-                        <label for="account_check_printing_layout" class="col-md-4 o_light_label"/>
+                        <label for="account_check_printing_layout" class="col-lg-4 o_light_label"/>
                         <field name="account_check_printing_layout"/>
                     </div>
                     <div class="row">
-                        <label for="account_check_printing_multi_stub" class="col-md-4 o_light_label"/>
+                        <label for="account_check_printing_multi_stub" class="col-lg-4 o_light_label"/>
                         <field name="account_check_printing_multi_stub"/>
                     </div>
                     <div class="row">
-                        <label for="account_check_printing_margin_top" class="col-md-4 o_light_label"/>
+                        <label for="account_check_printing_margin_top" class="col-lg-4 o_light_label"/>
                         <field name="account_check_printing_margin_top"/>
                     </div>
                     <div class="row">
-                        <label for="account_check_printing_margin_left" class="col-md-4 o_light_label"/>
+                        <label for="account_check_printing_margin_left" class="col-lg-4 o_light_label"/>
                         <field name="account_check_printing_margin_left"/>
                     </div>
                     <field name="country_code" invisible="1" />
                     <div class="row" attrs="{'invisible': [('country_code', '!=', 'CA')]}">
-                        <label for="account_check_printing_margin_right" class="col-md-4 o_light_label"/>
+                        <label for="account_check_printing_margin_right" class="col-lg-4 o_light_label"/>
                         <field name="account_check_printing_margin_right"/>
                     </div>
                     <div class="row" attrs="{'invisible': [('country_code', '!=', 'CA')]}">
-                      <label for="account_check_printing_date_label" class="col-md-4 o_light_label"/>
+                      <label for="account_check_printing_date_label" class="col-lg-4 o_light_label"/>
                       <field name="account_check_printing_date_label"/>
                     </div>
                 </div>
diff --git a/addons/account_invoicing/static/description/index.html b/addons/account_invoicing/static/description/index.html
index 844515c9b6b..ef5af9485aa 100644
--- a/addons/account_invoicing/static/description/index.html
+++ b/addons/account_invoicing/static/description/index.html
@@ -20,7 +20,7 @@
             Automatically send them by email as a PDF attachment or print and send them by post.
             </p>
         </div>
-        <div class="col-md-8 col-md-offset-2 oe_mt32">
+        <div class="col-lg-8 offset-lg-2 oe_mt32">
             <img class="oe_picture oe_screenshot" src="account_sc_01.png"/>
         </div>
     </div>
@@ -33,7 +33,7 @@
         <p class="oe_mt32">
         Accept online payments via Paypal, Ogone, Buckaroo or Adyen. Eliminate the stress of sending reminders for late or outstanding payments. Simply set up and automate follow-ups to get paid quickly.
         </p>
-        <div class="col-md-8 col-md-offset-3 oe_mt16">
+        <div class="col-lg-8 offset-lg-3 oe_mt16">
             <img class="oe_picture" src="account_voucher.png" height="300">
         </div>
     </div>
diff --git a/addons/account_payment/views/account_portal_templates.xml b/addons/account_payment/views/account_portal_templates.xml
index c0232e82f57..7846e8d8fa0 100644
--- a/addons/account_payment/views/account_portal_templates.xml
+++ b/addons/account_payment/views/account_portal_templates.xml
@@ -98,7 +98,7 @@
                 </div>
             </div>
             <div class="panel-body" t-if="existing_token">
-                <div class="col-md-offset-3 col-md-6">
+                <div class="offset-lg-3 col-lg-6">
                     <i class="fa fa-info"></i> You have credits card registered, you can log-in to be able to use them.
                 </div>
             </div>
diff --git a/addons/account_voucher/views/account_voucher_views.xml b/addons/account_voucher/views/account_voucher_views.xml
index 55374c80324..075df01ee67 100644
--- a/addons/account_voucher/views/account_voucher_views.xml
+++ b/addons/account_voucher/views/account_voucher_views.xml
@@ -45,18 +45,18 @@
                         <t t-name="kanban-box">
                             <div t-attf-class="oe_kanban_card oe_kanban_global_click">
                                 <div class="row">
-                                    <div class="col-xs-6">
+                                    <div class="col-6">
                                         <strong><span><t t-esc="record.partner_id.value"/></span></strong>
                                     </div>
-                                    <div class="col-xs-6">
+                                    <div class="col-6">
                                         <strong><span class="pull-right text-right"><t t-esc="record.amount.value"/></span></strong>
                                     </div>
                                 </div>
                                 <div class="row">
-                                    <div class="col-xs-6 text-muted">
+                                    <div class="col-6 text-muted">
                                         <span><t t-esc="record.number.value"/> <t t-esc="record.date.value"/></span>
                                     </div>
-                                    <div class="col-xs-6">
+                                    <div class="col-6">
                                         <span class="pull-right text-right">
                                             <field name="state" widget="label_selection" options="{'classes': {'draft': 'default', 'cancel': 'default', 'none': 'danger', 'proforma': 'warning',
                                             'posted': 'success'}}"/>
diff --git a/addons/analytic/views/analytic_account_views.xml b/addons/analytic/views/analytic_account_views.xml
index d77509275d0..9f1f7a5451f 100644
--- a/addons/analytic/views/analytic_account_views.xml
+++ b/addons/analytic/views/analytic_account_views.xml
@@ -213,7 +213,7 @@
                                 </div>
                                 <hr class="mt8 mb8"/>
                                 <div class="row">
-                                    <div class="col-xs-12 text-center">
+                                    <div class="col-12 text-center">
                                         <span>
                                             <strong>Balance: <field name="balance" widget="monetary"/></strong>
                                         </span>
@@ -348,18 +348,18 @@
                         <t t-name="kanban-box">
                             <div t-attf-class="oe_kanban_card oe_kanban_global_click">
                                 <div class="row">
-                                    <div class="col-xs-6">
+                                    <div class="col-6">
                                         <strong><span><t t-esc="record.name.value"/></span></strong>
                                     </div>
-                                    <div class="col-xs-6 pull-right text-right">
+                                    <div class="col-6 pull-right text-right">
                                         <strong><t t-esc="record.date.value"/></strong>
                                     </div>
                                 </div>
                                 <div class="row">
-                                    <div class="col-xs-6 text-muted">
+                                    <div class="col-6 text-muted">
                                         <span><t t-esc="record.account_id.value"/></span>
                                     </div>
-                                    <div class="col-xs-6">
+                                    <div class="col-6">
                                         <span class="pull-right text-right">
                                             <field name="amount" widget="monetary"/>
                                         </span>
diff --git a/addons/anonymization/views/anonymization_views.xml b/addons/anonymization/views/anonymization_views.xml
index c29680d8190..8d3f3727107 100644
--- a/addons/anonymization/views/anonymization_views.xml
+++ b/addons/anonymization/views/anonymization_views.xml
@@ -48,15 +48,15 @@
                     <t t-name="kanban-box">
                         <div t-attf-class="oe_kanban_global_click">
                             <div class="row">
-                                <div class="col-xs-4 text-center"><strong>Model</strong></div>
-                                <div class="col-xs-4 text-center"><strong>Field</strong></div>
-                                <div class="col-xs-4 text-center"><strong>Status</strong></div>
+                                <div class="col-4 text-center"><strong>Model</strong></div>
+                                <div class="col-4 text-center"><strong>Field</strong></div>
+                                <div class="col-4 text-center"><strong>Status</strong></div>
                             </div>
                             <hr class="mb4 mt4"/>
                             <div class="row">
-                                <div class="col-xs-4 text-center"><field name="model_name"/></div>
-                                <div class="col-xs-4 text-center"><field name="field_name"/></div>
-                                <div class="col-xs-4 text-center">
+                                <div class="col-4 text-center"><field name="model_name"/></div>
+                                <div class="col-4 text-center"><field name="field_name"/></div>
+                                <div class="col-4 text-center">
                                     <field name="state"/>
                                 </div>
                             </div>
diff --git a/addons/auth_oauth/views/res_config_settings_views.xml b/addons/auth_oauth/views/res_config_settings_views.xml
index 214f1701895..b70574be8ca 100644
--- a/addons/auth_oauth/views/res_config_settings_views.xml
+++ b/addons/auth_oauth/views/res_config_settings_views.xml
@@ -13,7 +13,7 @@
                     </div>
                 </div>
                 <div id="module_auth_oauth" position="after">
-                    <div class="col-xs-12 col-md-6 o_setting_box" attrs="{'invisible': [('module_auth_oauth','=',False)]}">
+                    <div class="col-12 col-lg-6 o_setting_box" attrs="{'invisible': [('module_auth_oauth','=',False)]}">
                         <div class="o_setting_left_pane">
                             <field name="auth_oauth_google_enabled"/>
                         </div>
@@ -24,7 +24,7 @@
                             </div>
                             <div class="content-group" attrs="{'invisible': [('auth_oauth_google_enabled','=',False)]}">
                                 <div class="row mt16">
-                                    <label for="auth_oauth_google_client_id" string="Client ID:" class="col-md-3 o_light_label"/>
+                                    <label for="auth_oauth_google_client_id" string="Client ID:" class="col-lg-3 o_light_label"/>
                                     <field name="auth_oauth_google_client_id" placeholder="e.g. 1234-xyz.apps.googleusercontent.com"/>
                                 </div>
                                 <a href="https://www.odoo.com/documentation/user/online/general/auth/google.html" target="_blank"><i class="fa fa-fw fa-arrow-right"/>Tutorial</a>
diff --git a/addons/auth_signup/views/res_config_settings_views.xml b/addons/auth_signup/views/res_config_settings_views.xml
index 3028aa4e8bd..6d54f3a81fe 100644
--- a/addons/auth_signup/views/res_config_settings_views.xml
+++ b/addons/auth_signup/views/res_config_settings_views.xml
@@ -7,7 +7,7 @@
             <field name="inherit_id" ref="base_setup.res_config_settings_view_form"/>
             <field name="arch" type="xml">
                 <xpath expr="//div[@id='access_rights']" position="after">
-                    <div class="col-xs-12 col-md-6 o_setting_box">
+                    <div class="col-12 col-lg-6 o_setting_box">
                         <div class="o_setting_left_pane">
                         </div>
                         <div class="o_setting_right_pane">
@@ -25,7 +25,7 @@
                             </div>
                         </div>
                     </div>
-                    <div class="col-xs-12 col-md-6 o_setting_box">
+                    <div class="col-12 col-lg-6 o_setting_box">
                         <div class="o_setting_left_pane">
                             <field name="auth_signup_reset_password"/>
                         </div>
diff --git a/addons/base_import/static/src/xml/base_import.xml b/addons/base_import/static/src/xml/base_import.xml
index da83361db0f..80077e30d31 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 d-none">
+            <div class="oe_import_box col-lg-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">
@@ -22,7 +22,7 @@
                                    t-att-value="option.value"/>
                         </p>
                     </div>
-                    <div class="oe_import_toggled oe_import_options col-sm-5">
+                    <div class="oe_import_toggled oe_import_options col-md-5">
                         <p t-foreach="widget.parse_opts" t-as="option">
                             <!-- no @name, avoid submission when file_update called -->
                             <label t-attf-for="#{option.name}_#{_id}">
@@ -35,7 +35,7 @@
                 </div>
             </div>
 
-            <div class="oe_import_with_file oe_padding col-sm-12 d-none">
+            <div class="oe_import_with_file oe_padding col-md-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
diff --git a/addons/base_setup/views/res_config_settings_views.xml b/addons/base_setup/views/res_config_settings_views.xml
index 09be8139c9d..58c4a0162a4 100644
--- a/addons/base_setup/views/res_config_settings_views.xml
+++ b/addons/base_setup/views/res_config_settings_views.xml
@@ -11,7 +11,7 @@
                         <div id="business_documents">
                             <h2>Business Documents</h2>
                             <div class="row mt16 o_settings_container">
-                                <div class="col-xs-12 col-md-6 o_setting_box">
+                                <div class="col-12 col-lg-6 o_setting_box">
                                     <div class="o_setting_right_pane">
                                         <span class="o_form_label">Format</span>
                                         <span class="fa fa-lg fa-building-o" title="Values set here are company-specific." aria-label="Values set here are company-specific." groups="base.group_multi_company" role="img"/>
@@ -20,13 +20,13 @@
                                         </div>
                                         <div class="content-group">
                                             <div class="mt16 row">
-                                                <label for="paperformat_id" string="Format" class="col-xs-3 col-md-3 o_light_label"/>
+                                                <label for="paperformat_id" string="Format" class="col-3 col-lg-3 o_light_label"/>
                                                 <field name="paperformat_id" class="oe_inline" required="1"/>
                                             </div>
                                         </div>
                                     </div>
                                 </div>
-                                <div class="col-xs-12 col-md-6 o_setting_box">
+                                <div class="col-12 col-lg-6 o_setting_box">
                                     <div class="o_setting_right_pane">
                                         <span class="o_form_label">Document Template</span>
                                         <span class="fa fa-lg fa-building-o" title="Values set here are company-specific." aria-label="Values set here are company-specific." groups="base.group_multi_company" role="img"/>
@@ -35,7 +35,7 @@
                                         </div>
                                         <div class="content-group">
                                             <div class="mt16" groups="base.group_no_one">
-                                                <label for="external_report_layout" string="Template" class="col-xs-3 col-md-3 o_light_label"/>
+                                                <label for="external_report_layout" string="Template" class="col-3 col-lg-3 o_light_label"/>
                                                 <field name="external_report_layout" class="oe_inline"/>
                                             </div>
                                             <div class="mt16">
@@ -51,7 +51,7 @@
                         <div id="emails"/>
                         <h2>Users</h2>
                         <div class="row mt16 o_settings_container" id="user_default_rights">
-                            <div class="col-xs-12 col-md-6 o_setting_box"  title="By default, new users get highest access rights for all installed apps." id="access_rights">
+                            <div class="col-12 col-lg-6 o_setting_box"  title="By default, new users get highest access rights for all installed apps." id="access_rights">
                                 <div class="o_setting_left_pane">
                                     <field name="user_default_rights"/>
                                 </div>
@@ -67,7 +67,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-xs-12 col-md-6 o_setting_box">
+                            <div class="col-12 col-lg-6 o_setting_box">
                                 <div class="o_setting_left_pane">
                                     <field name="module_base_import" />
                                 </div>
@@ -78,7 +78,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-xs-12 col-md-6 o_setting_box" groups="base.group_no_one">
+                            <div class="col-12 col-lg-6 o_setting_box" groups="base.group_no_one">
                                 <div class="o_setting_left_pane">
                                     <field name="show_effect"/>
                                 </div>
@@ -94,7 +94,7 @@
                             <field name="company_id" invisible="1"/>
                             <h2>Multi-company</h2>
                             <div class="row mt16 o_settings_container" name="multi_company">
-                                <div class="col-xs-12 col-md-6 o_setting_box">
+                                <div class="col-12 col-lg-6 o_setting_box">
                                     <div class="o_setting_left_pane">
                                         <field name="group_multi_company"/>
                                     </div>
@@ -114,7 +114,7 @@
                                         </div>
                                     </div>
                                 </div>
-                                <div class="col-xs-12 col-md-6 o_setting_box" title="Configure company rules to automatically create SO/PO when one of your company sells/buys to another of your company." attrs="{'invisible': [('group_multi_company', '=', False)]}" id="inter_company">
+                                <div class="col-12 col-lg-6 o_setting_box" title="Configure company rules to automatically create SO/PO when one of your company sells/buys to another of your company." attrs="{'invisible': [('group_multi_company', '=', False)]}" id="inter_company">
                                     <div class="o_setting_left_pane">
                                         <field name="module_inter_company_rules" widget="upgrade_boolean"/>
                                     </div>
@@ -135,7 +135,7 @@
                         </div>
                         <h2>Integrations</h2>
                         <div class="row mt16 o_settings_container" name="integration">
-                            <div class="col-xs-12 col-md-6 o_setting_box">
+                            <div class="col-12 col-lg-6 o_setting_box">
                                 <div class="o_setting_left_pane">
                                     <field name="module_pad"/>
                                 </div>
@@ -149,7 +149,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-xs-12 col-md-6 o_setting_box">
+                            <div class="col-12 col-lg-6 o_setting_box">
                                 <div class="o_setting_left_pane">
                                     <field name="module_google_calendar" />
                                 </div>
@@ -163,7 +163,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-xs-12 col-md-6 o_setting_box">
+                            <div class="col-12 col-lg-6 o_setting_box">
                                 <div class="o_setting_left_pane">
                                     <field name="module_google_drive" />
                                 </div>
@@ -177,7 +177,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-xs-12 col-md-6 o_setting_box">
+                            <div class="col-12 col-lg-6 o_setting_box">
                                 <div class="o_setting_left_pane">
                                     <field name="module_google_spreadsheet" />
                                 </div>
@@ -191,7 +191,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-xs-12 col-md-6 o_setting_box" id="module_auth_oauth">
+                            <div class="col-12 col-lg-6 o_setting_box" id="module_auth_oauth">
                                 <div class="o_setting_left_pane">
                                     <field name="module_auth_oauth" />
                                 </div>
@@ -205,7 +205,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-xs-12 col-md-6 o_setting_box" id="oauth">
+                            <div class="col-12 col-lg-6 o_setting_box" id="oauth">
                                 <div class="o_setting_left_pane">
                                     <field name="module_auth_ldap"/>
                                 </div>
@@ -219,7 +219,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-xs-12 col-md-6 o_setting_box" id="oauth">
+                            <div class="col-12 col-lg-6 o_setting_box" id="oauth">
                                 <div class="o_setting_left_pane">
                                     <field name="module_base_gengo"/>
                                 </div>
@@ -233,7 +233,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-xs-12 col-md-6 o_setting_box">
+                            <div class="col-12 col-lg-6 o_setting_box">
                                 <div class="o_setting_left_pane">
                                     <field name="module_web_unsplash" widget="upgrade_boolean"/>
                                 </div>
diff --git a/addons/base_vat/views/res_config_settings_views.xml b/addons/base_vat/views/res_config_settings_views.xml
index 5943ee56af2..ab12d8a01df 100644
--- a/addons/base_vat/views/res_config_settings_views.xml
+++ b/addons/base_vat/views/res_config_settings_views.xml
@@ -7,7 +7,7 @@
         <field name="inherit_id" ref="account.res_config_settings_view_form"/>
         <field name="arch" type="xml">
             <div id="eu_service" position="after">
-                <div class="col-xs-12 col-md-6 o_setting_box" title="If this checkbox is ticked, you will not be able to save a contact if its VAT number cannot be verified by the European VIES service.">
+                <div class="col-12 col-lg-6 o_setting_box" title="If this checkbox is ticked, you will not be able to save a contact if its VAT number cannot be verified by the European VIES service.">
                     <div class="o_setting_left_pane">
                         <field name="vat_check_vies"/>
                     </div>
diff --git a/addons/crm/views/crm_team_views.xml b/addons/crm/views/crm_team_views.xml
index 63dd5506084..091b20733a5 100644
--- a/addons/crm/views/crm_team_views.xml
+++ b/addons/crm/views/crm_team_views.xml
@@ -201,14 +201,14 @@
                             </a>
                         </div>
                         <div class="row" t-if="record.opportunities_count.raw_value">
-                            <div class="col-xs-8">
+                            <div class="col-8">
                                 <a name="%(crm_case_form_view_salesteams_opportunity)d" type="action"> <!-- context="{'search_default_probability': NOT or < 100}" -->
                                     <field name="opportunities_count"/>
                                     <t t-if="record.opportunities_count.raw_value == 1">Open Opportunity</t>
                                     <t t-else="">Open Opportunities</t>
                                 </a>
                             </div>
-                            <div class="col-xs-4 text-right">
+                            <div class="col-4 text-right">
                                 <field name="opportunities_amount" widget="monetary"/>
                             </div>
                         </div>
diff --git a/addons/crm/views/res_config_settings_views.xml b/addons/crm/views/res_config_settings_views.xml
index 6ff4711757c..a32b08a63f2 100644
--- a/addons/crm/views/res_config_settings_views.xml
+++ b/addons/crm/views/res_config_settings_views.xml
@@ -11,7 +11,7 @@
                 <div class="app_settings_block" data-string="CRM" string="CRM" data-key="crm" groups="sales_team.group_sale_manager">
                     <h2>CRM</h2>
                     <div class="row mt16 o_settings_container">
-                        <div class="col-xs-12 col-md-6 o_setting_box" id="crm_lead"
+                        <div class="col-12 col-lg-6 o_setting_box" id="crm_lead"
                             title="Use leads if you need a qualification step before creating an opportunity or a customer. It can be a business card you received, a contact form filled in your website, or a file of unqualified prospects you import, etc. Once qualified, the lead can be converted into a business opportunity and/or a new customer in your address book.">
                             <div class="o_setting_left_pane">
                                 <field name="group_use_lead"/>
@@ -23,7 +23,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="col-xs-12 col-md-6 o_setting_box" id="crm_lead"
+                        <div class="col-12 col-lg-6 o_setting_box" id="crm_lead"
                                 attrs="{'invisible': [('group_use_lead','=',False)]}"
                                 title="Emails received to that address generate new leads not assigned to any Sales Team yet. This can be made when converting them into opportunities. Incoming emails can be automatically assigned to specific Sales Teams. To do so, set an email alias on the Sales Team."
                                 groups="base.group_no_one">
@@ -55,7 +55,7 @@
                     </div>
                     <h2>Contacts</h2>
                     <div class="row mt16 o_settings_container">
-                        <div class="col-md-6 o_setting_box">
+                        <div class="col-lg-6 o_setting_box">
                             <div class="o_setting_left_pane">
                                 <field name="module_crm_phone_validation"/>
                             </div>
@@ -66,7 +66,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="col-xs-12 col-md-6 o_setting_box" title="When populating your address book, Odoo relies on Clearbit’s API to provide you with a list of matching contacts or companies.When selecting one item, the partner name, logo and website get automatically set.">
+                        <div class="col-12 col-lg-6 o_setting_box" title="When populating your address book, Odoo relies on Clearbit’s API to provide you with a list of matching contacts or companies.When selecting one item, the partner name, logo and website get automatically set.">
                             <div class="o_setting_left_pane">
                                 <field name="module_web_clearbit" widget="upgrade_boolean"/>
                             </div>
diff --git a/addons/delivery/views/report_package_barcode.xml b/addons/delivery/views/report_package_barcode.xml
index 7441f00bdee..d3c4d9e8a78 100644
--- a/addons/delivery/views/report_package_barcode.xml
+++ b/addons/delivery/views/report_package_barcode.xml
@@ -2,10 +2,10 @@
     <template id="report_package_barcode_delivery" inherit_id="stock.report_package_barcode">
         <xpath expr="//div[hasclass('o_packaging_type')]" position="after">
             <div class="row o_package_weight" t-if="o.weight">
-                <div class="col-xs-12" style="font-weight:bold;">Weight: <span t-field="o.weight"/></div>
+                <div class="col-12" style="font-weight:bold;">Weight: <span t-field="o.weight"/></div>
             </div>
             <div class="row o_package_shipping_weight" t-if="o.shipping_weight">
-                <div class="col-xs-12" style="font-weight:bold;">Shipping Weight: <span t-field="o.shipping_weight"/></div>
+                <div class="col-12" style="font-weight:bold;">Shipping Weight: <span t-field="o.shipping_weight"/></div>
             </div>
         </xpath>
     </template>
@@ -13,10 +13,10 @@
     <template id="report_package_barcode_small_delivery" inherit_id="stock.report_package_barcode_small">
         <xpath expr="//div[hasclass('o_packaging_type')]" position="after">
             <div class="row o_package_weight" t-if="o.weight">
-                <div class="col-xs-12" style="font-size:24px; font-weight:bold;">Weight: <span t-field="o.weight"/></div>
+                <div class="col-12" style="font-size:24px; font-weight:bold;">Weight: <span t-field="o.weight"/></div>
             </div>
             <div class="row o_package_shipping_weight" t-if="o.shipping_weight">
-                <div class="col-xs-12" style="font-size:24px; font-weight:bold;">Shipping Weight: <span t-field="o.shipping_weight"/></div>
+                <div class="col-12" style="font-size:24px; font-weight:bold;">Shipping Weight: <span t-field="o.shipping_weight"/></div>
             </div>
         </xpath>
     </template>
diff --git a/addons/digest/views/digest_templates.xml b/addons/digest/views/digest_templates.xml
index 7e4b0e36a2f..0010ad6a1c0 100644
--- a/addons/digest/views/digest_templates.xml
+++ b/addons/digest/views/digest_templates.xml
@@ -3,7 +3,7 @@
         <t t-call="portal.portal_layout">
             <div class="container mt8">
                 <div class="row">
-                    <div class="col-md-6 col-md-offset-3">
+                    <div class="col-lg-6 offset-lg-3">
                         <h3>Digest Subscriptions</h3>
                         <div class="alert alert-success text-center" role="status">
                             <p>You have been successfully unsubscribed from <string t-field="digest.name"/></p>
diff --git a/addons/digest/views/res_config_settings_views.xml b/addons/digest/views/res_config_settings_views.xml
index ed0372110b8..fd828e57385 100644
--- a/addons/digest/views/res_config_settings_views.xml
+++ b/addons/digest/views/res_config_settings_views.xml
@@ -6,7 +6,7 @@
         <field name="inherit_id" ref="base_setup.res_config_settings_view_form"/>
         <field name="arch" type="xml">
             <xpath expr="//div[@id='access_rights']" position="before">
-                <div class="col-xs-12 col-md-6 o_setting_box" title="New users are automatically added as recipient of the following digest email.">
+                <div class="col-12 col-lg-6 o_setting_box" title="New users are automatically added as recipient of the following digest email.">
                     <div class="o_setting_left_pane">
                         <field name="digest_emails"/>
                     </div>
diff --git a/addons/event/report/event_event_templates.xml b/addons/event/report/event_event_templates.xml
index 6c3b2e70eff..23664ec8d94 100644
--- a/addons/event/report/event_event_templates.xml
+++ b/addons/event/report/event_event_templates.xml
@@ -8,9 +8,9 @@
                 <div class="page">
                     <div class="row">
                         <!-- Front -->
-                        <div class="col-xs-6 text-center" style="padding-left:7mm; border-left:1px dashed black; height: 149mm; -webkit-transform:rotate(180deg); padding-top: 7mm">
+                        <div class="col-6 text-center" style="padding-left:7mm; border-left:1px dashed black; height: 149mm; -webkit-transform:rotate(180deg); padding-top: 7mm">
                             <div class="row">
-                                <div class="col-xs-12">
+                                <div class="col-12">
                                     <t t-if="o.event_id.event_logo">
                                         <div t-field="o.event_id.event_logo"/>
                                     </t>
@@ -21,7 +21,7 @@
                                     <h5>( <i class="fa fa-clock-o" aria-label="Period" role="img" title="Period"></i> <span itemprop="startDate" t-field="o.event_id.with_context(tz=o.event_id.date_tz).date_begin" t-options='{"hide_seconds": True}'> </span> <i>to</i> <span itemprop="endDate" t-field="o.event_id.with_context(tz=o.event_id.date_tz).date_end" t-options='{"hide_seconds": True}'> </span> )</h5>
                                 </div>
                                 <div class="row">
-                                    <div class="col-xs-12 text-center" id="o_event_name">
+                                    <div class="col-12 text-center" id="o_event_name">
                                         <small>
                                             <h3 t-field="o.name"/>
                                         </small>
@@ -33,17 +33,17 @@
                             </div>
                         </div>
                         <!-- Back -->
-                        <div class="col-xs-6" style="padding-right:7mm; height: 149mm; -webkit-transform:rotate(180deg); padding-top: 2mm;">
+                        <div class="col-6" style="padding-right:7mm; height: 149mm; -webkit-transform:rotate(180deg); padding-top: 2mm;">
                             <span t-field="o.event_id.badge_back"/>
                         </div>
                     </div>
                     <div class="row">
                         <!-- Inner left -->
-                        <div class="col-xs-6 text-center" style="padding-right:7mm; border-top:1px dashed black; height: 148mm;">
+                        <div class="col-6 text-center" style="padding-right:7mm; border-top:1px dashed black; height: 148mm;">
                             <span t-field="o.event_id.badge_innerleft"/>
                         </div>
                         <!-- Inner right -->
-                        <div class="col-xs-6 text-center" style="border-left:1px dashed black; border-top:1px dashed black; height: 148mm; text-center">
+                        <div class="col-6 text-center" style="border-left:1px dashed black; border-top:1px dashed black; height: 148mm; text-center">
                             <span t-field="o.event_id.badge_innerright"/>
                         </div>
                     </div>
@@ -60,9 +60,9 @@
                 <t t-foreach="docs" t-as="event">
                     <div class="row">
                         <!-- Front -->
-                        <div class="col-xs-6 text-center" style="padding-left:7mm; border-right:1px dashed black; height: 149mm; padding-top: 7mm">
+                        <div class="col-6 text-center" style="padding-left:7mm; border-right:1px dashed black; height: 149mm; padding-top: 7mm">
                             <div class="row" t-ignore="true">
-                                <div class="col-xs-12">
+                                <div class="col-12">
                                     <span t-if="event.organizer_id.is_company and event.organizer_id.company_id.logo_web">
                                         <div t-field="event.event_logo">
                                             <img t-att-src="'data:image/png;base64,%s' % to_text(event.organizer_id.company_id.logo_web)" style="max-height:1cm; max-width:4cm;" alt="Logo"/>
@@ -73,7 +73,7 @@
                                 </div>
                             </div>
                             <div class="row" t-ignore="true">
-                                <div class="col-xs-12 text-center" id="o_event_attendee_name">
+                                <div class="col-12 text-center" id="o_event_attendee_name">
                                     <small><h3>Attendee Name</h3></small>
                                 </div>
                             </div>
@@ -82,17 +82,17 @@
                             </div>
                         </div>
                         <!-- Back -->
-                        <div class="col-xs-6" style="padding-right:7mm; height: 149mm; padding-top: 2mm;">
+                        <div class="col-6" style="padding-right:7mm; height: 149mm; padding-top: 2mm;">
                             <div t-field="event.badge_back"/>
                         </div>
                     </div>
                     <div class="row">
                         <!-- Inner left -->
-                        <div class="col-xs-6 text-center" style="padding-right:7mm; border-top:1px dashed black; height: 148mm;">
+                        <div class="col-6 text-center" style="padding-right:7mm; border-top:1px dashed black; height: 148mm;">
                             <div t-field="event.badge_innerleft"/>
                         </div>
                         <!-- Inner right -->
-                        <div class="col-xs-6 text-center" style="border-left:1px dashed black; border-top:1px dashed black; height: 148mm; text-center">
+                        <div class="col-6 text-center" style="border-left:1px dashed black; border-top:1px dashed black; height: 148mm; text-center">
                             <div t-field="event.badge_innerright"/>
                         </div>
                     </div>
diff --git a/addons/event/views/event_views.xml b/addons/event/views/event_views.xml
index ebdc52397c5..49126f843e3 100644
--- a/addons/event/views/event_views.xml
+++ b/addons/event/views/event_views.xml
@@ -19,28 +19,28 @@
                         </div>
                         <h2>Location</h2>
                         <div class="row mt16 o_settings_container" name="event_type_location">
-                            <div class="col-xs-12 col-md-6 o_setting_box">
+                            <div class="col-12 col-lg-6 o_setting_box">
                                 <div class="o_setting_left_pane">
                                     <field name="is_online"/>
                                 </div>
                                 <div class="o_setting_right_pane">
                                     <label for="is_online"/>
                                     <div class="row">
-                                        <div class="col-md-8 mt16 text-muted">
+                                        <div class="col-lg-8 mt16 text-muted">
                                             Online events like webinars do not require a specific location
                                             and are hosted online.
                                         </div>
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-xs-12 col-md-6 o_setting_box">
+                            <div class="col-12 col-lg-6 o_setting_box">
                                 <div class="o_setting_left_pane">
                                     <field name="use_timezone"/>
                                 </div>
                                 <div class="o_setting_right_pane">
                                     <label for="use_timezone"/>
                                     <div class="row">
-                                        <div class="col-md-8 mt16" attrs="{'invisible': [('use_timezone', '=', False)]}">
+                                        <div class="col-lg-8 mt16" attrs="{'invisible': [('use_timezone', '=', False)]}">
                                             <label for="default_timezone"/>
                                             <field name="default_timezone"
                                                 attrs="{'required': [('use_timezone', '=', True)]}"/>
@@ -51,14 +51,14 @@
                         </div>
                         <h2>Communication</h2>
                         <div class="row mt16 o_settings_container" name="event_type_communication">
-                            <div class="col-xs-12 col-md-12 o_setting_box">
+                            <div class="col-12 col-lg-12 o_setting_box">
                                 <div class="o_setting_left_pane">
                                     <field name="use_mail_schedule"/>
                                 </div>
                                 <div class="o_setting_right_pane">
                                     <label for="use_mail_schedule"/>
                                     <div class="row mt16" attrs="{'invisible': [('use_mail_schedule', '=', False)]}">
-                                        <div class="col-md-9">
+                                        <div class="col-lg-9">
                                             <field name="event_type_mail_ids">
                                                 <tree string="Email Schedule" editable="bottom">
                                                     <field name="template_id"/>
@@ -71,14 +71,14 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-xs-12 col-md-6 o_setting_box">
+                            <div class="col-12 col-lg-6 o_setting_box">
                                 <div class="o_setting_left_pane">
                                     <field name="use_hashtag"/>
                                 </div>
                                 <div class="o_setting_right_pane">
                                     <label for="use_hashtag"/>
                                     <div class="row">
-                                        <div class="col-md-8 mt16" attrs="{'invisible': [('use_hashtag', '=', False)]}">
+                                        <div class="col-lg-8 mt16" attrs="{'invisible': [('use_hashtag', '=', False)]}">
                                             <label for="default_hashtag"/>
                                             <field name="default_hashtag"
                                                 attrs="{'required': [('use_hashtag', '=', True)]}"/>
@@ -89,14 +89,14 @@
                         </div>
                         <h2>Visibility</h2>
                         <div class="row mt16 o_settings_container" name="event_type_visibility">
-                            <div class="col-xs-12 col-md-6 o_setting_box" name="event_type_visibility_seats">
+                            <div class="col-12 col-lg-6 o_setting_box" name="event_type_visibility_seats">
                                 <div class="o_setting_left_pane">
                                     <field name="has_seats_limitation"/>
                                 </div>
                                 <div class="o_setting_right_pane">
                                     <label for="has_seats_limitation"/>
                                     <div class="row">
-                                        <div class="col-md-8 mt16" attrs="{'invisible': [('has_seats_limitation', '=', False)]}">
+                                        <div class="col-lg-8 mt16" attrs="{'invisible': [('has_seats_limitation', '=', False)]}">
                                             <div>
                                                 <label for="default_registration_min"/> <field name="default_registration_min"/>
                                             </div>
@@ -110,14 +110,14 @@
                         </div>
                         <h2>Attendees</h2>
                         <div class="row mt16 o_settings_container" name="event_type_attendees">
-                            <div class="col-xs-12 col-md-6 o_setting_box" name="event_type_attendees_auto_confirm">
+                            <div class="col-12 col-lg-6 o_setting_box" name="event_type_attendees_auto_confirm">
                                 <div class="o_setting_left_pane">
                                     <field name="auto_confirm"/>
                                 </div>
                                 <div class="o_setting_right_pane">
                                     <label for="auto_confirm"/>
                                     <div class="row">
-                                        <div class="col-md-8 mt16 text-muted">
+                                        <div class="col-lg-8 mt16 text-muted">
                                             Events and registrations will automatically be confirmed
                                             upon creation, easing the flow for simple events.
                                         </div>
diff --git a/addons/event/views/res_config_settings_views.xml b/addons/event/views/res_config_settings_views.xml
index 0c6ee6f132a..70cacce989b 100644
--- a/addons/event/views/res_config_settings_views.xml
+++ b/addons/event/views/res_config_settings_views.xml
@@ -11,7 +11,7 @@
                     <div class="app_settings_block" data-string="Events" string="Events" data-key="event" groups="event.group_event_manager">
                         <h2>Events</h2>
                         <div class="row mt16 o_settings_container">
-                            <div class="col-xs-12 col-md-6 o_setting_box" title="Add a navigation menu to your event web pages with schedule, tracks, a track proposal form, etc.">
+                            <div class="col-12 col-lg-6 o_setting_box" title="Add a navigation menu to your event web pages with schedule, tracks, a track proposal form, etc.">
                                 <div class="o_setting_left_pane">
                                     <field name="module_website_event_track"/>
                                 </div>
@@ -25,7 +25,7 @@
                         </div>
                         <h2>Registration</h2>
                         <div class="row mt16 o_settings_container">
-                            <div class="col-xs-12 col-md-6 o_setting_box">
+                            <div class="col-12 col-lg-6 o_setting_box">
                                 <div class="o_setting_left_pane">
                                     <field name="module_event_sale"/>
                                 </div>
@@ -36,7 +36,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-xs-12 col-md-6 o_setting_box" name="event_settings_website">
+                            <div class="col-12 col-lg-6 o_setting_box" name="event_settings_website">
                                 <div class="o_setting_left_pane">
                                     <field name="module_website_event_sale"/>
                                 </div>
@@ -50,7 +50,7 @@
                         </div>
                         <h2>Attendance</h2>
                         <div class="row mt16 o_settings_container">
-                            <div class="col-xs-12 col-md-6 o_setting_box">
+                            <div class="col-12 col-lg-6 o_setting_box">
                                 <div class="o_setting_left_pane">
                                     <field name="module_event_barcode" widget="upgrade_boolean"/>
                                 </div>
diff --git a/addons/event_sale/report/event_event_templates.xml b/addons/event_sale/report/event_event_templates.xml
index ddeecdd322a..fa17929cd64 100644
--- a/addons/event_sale/report/event_event_templates.xml
+++ b/addons/event_sale/report/event_event_templates.xml
@@ -3,7 +3,7 @@
 
     <template id="event_registration_report_template_badge" inherit_id="event.event_registration_report_template_badge">
         <xpath expr="//div[@id='o_event_name']" position="inside">
-            <div t-if="o.event_ticket_id" class="col-xs-12 text-center" style="padding:0px;">
+            <div t-if="o.event_ticket_id" class="col-12 text-center" style="padding:0px;">
                 <div style="background: lightgrey; height: 65px;" class="mt16 text-center">
                     <h3><span t-field="o.event_ticket_id"/></h3>
                 </div>
@@ -13,7 +13,7 @@
 
     <template id="event_event_report_template_badge" inherit_id="event.event_event_report_template_badge">
         <xpath expr="//div[@id='o_event_attendee_name']" position="inside">
-            <div t-if="bool(len(event.event_ticket_ids))" class="col-xs-12" style="padding: 0px;" t-ignore="true">
+            <div t-if="bool(len(event.event_ticket_ids))" class="col-12" style="padding: 0px;" t-ignore="true">
                 <div style="background: lightgrey; height: 65px;" class="mt16 text-center">
                     <h3>Ticket Type</h3>
                 </div>
diff --git a/addons/event_sale/views/event_views.xml b/addons/event_sale/views/event_views.xml
index d87032b46ef..e8498e562e1 100644
--- a/addons/event_sale/views/event_views.xml
+++ b/addons/event_sale/views/event_views.xml
@@ -47,14 +47,14 @@
             <field name="inherit_id" ref="event.view_event_type_form"/>
             <field name="arch" type="xml">
                 <div name="event_type_attendees_auto_confirm" position="after">
-                    <div class="col-xs-12 col-md-12 o_setting_box">
+                    <div class="col-12 col-lg-12 o_setting_box">
                         <div class="o_setting_left_pane">
                             <field name="use_ticketing"/>
                         </div>
                         <div class="o_setting_right_pane">
                             <label for="use_ticketing"/>
                             <div class="row mt16" attrs="{'invisible': [('use_ticketing', '=', False)]}">
-                                <div class="col-md-9">
+                                <div class="col-lg-9">
                                     <field name="event_ticket_ids">
                                         <tree string="Tickets" editable="bottom">
                                             <field name="name"/>
@@ -98,10 +98,10 @@
                                     <t t-name="kanban-box">
                                         <div t-attf-class="oe_kanban_card oe_kanban_global_click">
                                             <div class="row">
-                                                <div class="col-xs-8">
+                                                <div class="col-8">
                                                     <strong><t t-esc="record.name.value"/></strong>
                                                 </div>
-                                                <div class="col-xs-4 text-right"><strong> <t t-esc="record.price.value"/></strong></div>
+                                                <div class="col-4 text-right"><strong> <t t-esc="record.price.value"/></strong></div>
                                             </div>
                                             <div t-esc="record.product_id.value"/>
                                             <div><i>
diff --git a/addons/google_calendar/views/res_config_settings_views.xml b/addons/google_calendar/views/res_config_settings_views.xml
index 9959ae612da..72295486206 100644
--- a/addons/google_calendar/views/res_config_settings_views.xml
+++ b/addons/google_calendar/views/res_config_settings_views.xml
@@ -8,9 +8,9 @@
                 <div id="msg_module_google_calendar" position="replace">
                     <div class="content-group" attrs="{'invisible': [('module_google_calendar','=',False)]}">
                         <div class="mt16 row">
-                            <label for="cal_client_id" string="Client ID" class="col-xs-3 col-md-3 o_light_label"/>
+                            <label for="cal_client_id" string="Client ID" class="col-3 col-lg-3 o_light_label"/>
                             <field name="cal_client_id" nolabel="1"/>
-                            <label for="cal_client_secret" string="Client Secret" class="col-xs-3 col-md-3 o_light_label"/>
+                            <label for="cal_client_secret" string="Client Secret" class="col-3 col-lg-3 o_light_label"/>
                             <field name="cal_client_secret" password="True" nolabel="1"/>
                         </div>
                         <a href="https://www.odoo.com/documentation/user/11.0/crm/optimize/google_calendar_credentials.html" class="oe-link" target="_blank"><i class="fa fa-fw fa-arrow-right"/>Tutorial</a>
diff --git a/addons/google_drive/views/google_drive_views.xml b/addons/google_drive/views/google_drive_views.xml
index 7cfd8f61e92..dc3b40391de 100644
--- a/addons/google_drive/views/google_drive_views.xml
+++ b/addons/google_drive/views/google_drive_views.xml
@@ -64,15 +64,15 @@
                         <t t-name="kanban-box">
                             <div t-attf-class="oe_kanban_global_click">
                                 <div class="row o_kanban_record_title">
-                                    <div class="col-xs-4 text-center"><strong>Template</strong></div>
-                                    <div class="col-xs-4 text-center"><strong>Model</strong></div>
-                                    <div class="col-xs-4 text-center"><strong>Active</strong></div>
+                                    <div class="col-4 text-center"><strong>Template</strong></div>
+                                    <div class="col-4 text-center"><strong>Model</strong></div>
+                                    <div class="col-4 text-center"><strong>Active</strong></div>
                                 </div>
                                 <hr class="mb4 mt4"/>
                                 <div class="row o_kanban_record_subtitle">
-                                    <div class="col-xs-4 text-center"><field name="name"/></div>
-                                    <div class="col-xs-4 text-center"><field name="model_id"/></div>
-                                    <div class="col-xs-4 text-center">
+                                    <div class="col-4 text-center"><field name="name"/></div>
+                                    <div class="col-4 text-center"><field name="model_id"/></div>
+                                    <div class="col-4 text-center">
                                         <field name="active" widget="boolean"/>
                                     </div>
                                 </div>
diff --git a/addons/google_drive/views/res_config_settings_views.xml b/addons/google_drive/views/res_config_settings_views.xml
index 699ea10c93c..1bbc8fb1e95 100644
--- a/addons/google_drive/views/res_config_settings_views.xml
+++ b/addons/google_drive/views/res_config_settings_views.xml
@@ -9,7 +9,7 @@
             <div id="msg_module_google_drive" position="replace">
                 <div class="content-group" attrs="{'invisible': [('module_google_drive','=',False)]}">
                     <div class="mt16 row">
-                        <label for="google_drive_authorization_code" class="col-md-3 o_light_label"/>
+                        <label for="google_drive_authorization_code" class="col-lg-3 o_light_label"/>
                         <field name="google_drive_authorization_code"/>
                     </div>
                     <div>
diff --git a/addons/hr/views/hr_views.xml b/addons/hr/views/hr_views.xml
index 1970a96d6a8..a0be9e193eb 100644
--- a/addons/hr/views/hr_views.xml
+++ b/addons/hr/views/hr_views.xml
@@ -572,25 +572,25 @@
                                 </div>
                                 <div class="container o_kanban_card_content">
                                     <div class="row">
-                                        <div class="col-xs-6 o_kanban_primary_left">
+                                        <div class="col-6 o_kanban_primary_left">
                                             <button class="btn btn-primary" name="%(act_employee_from_department)d" type="action">Employees</button>
                                         </div>
-                                        <div class="col-xs-6 o_kanban_primary_right">
+                                        <div class="col-6 o_kanban_primary_right">
                                         </div>
                                     </div>
                                 </div><div class="container o_kanban_card_manage_pane dropdown-menu" role="menu">
                                     <div class="row">
-                                        <div role="menuitem" class="col-xs-4 o_kanban_card_manage_section o_kanban_manage_to_do">
+                                        <div role="menuitem" class="col-4 o_kanban_card_manage_section o_kanban_manage_to_do">
                                             <div class="o_kanban_card_manage_title">
                                                 <span>To Do</span>
                                             </div>
                                         </div>
-                                        <div role="menuitem" class="col-xs-4 o_kanban_card_manage_section o_kanban_manage_to_approve">
+                                        <div role="menuitem" class="col-4 o_kanban_card_manage_section o_kanban_manage_to_approve">
                                             <div class="o_kanban_card_manage_title">
                                                 <span>To Approve</span>
                                             </div>
                                         </div>
-                                        <div role="menuitem" class="col-xs-4 o_kanban_card_manage_section o_kanban_manage_reports">
+                                        <div role="menuitem" class="col-4 o_kanban_card_manage_section o_kanban_manage_reports">
                                             <div class="o_kanban_card_manage_title">
                                                 <span>Reporting</span>
                                             </div>
@@ -598,10 +598,10 @@
                                     </div>
 
                                     <div t-if="widget.editable" class="o_kanban_card_manage_settings row">
-                                        <div role="menuitem" aria-haspopup="true" class="col-xs-8">
+                                        <div role="menuitem" aria-haspopup="true" class="col-8">
                                             <ul class="oe_kanban_colorpicker" data-field="color" role="menu"/>
                                         </div>
-                                        <div class="col-xs-4 text-right">
+                                        <div class="col-4 text-right">
                                             <a role="menuitem" type="edit">Settings</a>
                                         </div>
                                     </div>
diff --git a/addons/hr/views/res_config_settings_views.xml b/addons/hr/views/res_config_settings_views.xml
index 30d4d30f04e..4395cb3aace 100644
--- a/addons/hr/views/res_config_settings_views.xml
+++ b/addons/hr/views/res_config_settings_views.xml
@@ -10,12 +10,12 @@
                 <div class="app_settings_block" data-string="Employees" string="Employees" data-key="hr" groups="hr.group_hr_manager">
                     <h2>Work Organization</h2>
                     <div class="row mt16 o_settings_container">
-                        <div class="col-xs-12 col-md-6 o_setting_box">
+                        <div class="col-12 col-lg-6 o_setting_box">
                             <div class="o_setting_right_pane">
                                 <label for="resource_calendar_id"/>
                                 <span class="fa fa-lg fa-building-o" title="Values set here are company-specific." role="img" aria-label="Values set here are company-specific." groups="base.group_multi_company"/>
                                 <div class="row">
-                                    <div class="text-muted col-md-8">
+                                    <div class="text-muted col-lg-8">
                                         Set default calendar used to compute time allocation for leaves, timesheets, ...
                                     </div>
                                 </div>
@@ -30,7 +30,7 @@
                             </div>
                         </div>
 
-                        <div class="col-xs-12 col-md-6 o_setting_box" title="Show organizational chart on employee form">
+                        <div class="col-12 col-lg-6 o_setting_box" title="Show organizational chart on employee form">
                             <div class="o_setting_left_pane">
                                 <field name="module_hr_org_chart"/>
                             </div>
diff --git a/addons/hr_attendance/report/hr_employee_badge.xml b/addons/hr_attendance/report/hr_employee_badge.xml
index ea1191de1a9..b121b9c34f3 100644
--- a/addons/hr_attendance/report/hr_employee_badge.xml
+++ b/addons/hr_attendance/report/hr_employee_badge.xml
@@ -14,7 +14,7 @@
         <t t-call="web.basic_layout">
             <div class="page">
                 <t t-foreach="docs" t-as="employee">
-                    <div class="col-sm-6">
+                    <div class="col-md-6">
                         <table style="width:243pt; height:153pt; border: 1pt solid black; border-collapse:separate; border-radius:8pt; margin:5pt">
                             <td style="width:33%;" valign="center">
                                 <table style="width:77pt; height:150pt">
diff --git a/addons/hr_attendance/static/src/xml/attendance.xml b/addons/hr_attendance/static/src/xml/attendance.xml
index f9a2be5b041..da09e4f8f9d 100644
--- a/addons/hr_attendance/static/src/xml/attendance.xml
+++ b/addons/hr_attendance/static/src/xml/attendance.xml
@@ -77,13 +77,13 @@
                     <t t-else="">
                         <h3 class="mt0 mb0 text-muted">Please enter your PIN to <b t-if="checked_in">check out</b><b t-else="">check in</b></h3>
                         <div class="row">
-                            <div class="col-sm-8 col-sm-offset-2 o_hr_attendance_pin_pad">
+                            <div class="col-md-8 offset-md-2 o_hr_attendance_pin_pad">
                                 <div class="row" >
-                                    <div class="col-xs-12 mb8 mt8"><input class="o_hr_attendance_PINbox text-center" type="password" disabled="true"/></div>
+                                    <div class="col-12 mb8 mt8"><input class="o_hr_attendance_PINbox text-center" type="password" disabled="true"/></div>
                                 </div>
                                 <div class="row">
                                     <t t-foreach="['1', '2', '3', '4', '5', '6', '7', '8', '9', ['C', 'btn-warning'], '0', ['ok', 'btn-primary']]" t-as="btn_name">
-                                        <div class="col-xs-4 mb4">
+                                        <div class="col-4 mb4">
                                             <a t-attf-class="btn {{btn_name[1]? btn_name[1] : 'btn-secondary'}} btn-block btn-lg {{ 'o_hr_attendance_pin_pad_button_' + btn_name[0] }}"><t t-esc="btn_name[0]"/></a>
                                         </div>
                                     </t>
diff --git a/addons/hr_attendance/views/hr_department_view.xml b/addons/hr_attendance/views/hr_department_view.xml
index 6c874108b38..c066e0fd3ba 100644
--- a/addons/hr_attendance/views/hr_department_view.xml
+++ b/addons/hr_attendance/views/hr_department_view.xml
@@ -11,7 +11,7 @@
 
                 <xpath expr="//div[hasclass('o_kanban_manage_reports')]" position="inside">
                     <div class="row">
-                        <div class="col-xs-12 text-left">
+                        <div class="col-12 text-left">
                             <a name="%(hr_attendance_action_graph_filtered)d" type="action">
                                 Attendances
                             </a>
diff --git a/addons/hr_attendance/views/res_config_settings_views.xml b/addons/hr_attendance/views/res_config_settings_views.xml
index 6d04db7ee61..8461f641201 100644
--- a/addons/hr_attendance/views/res_config_settings_views.xml
+++ b/addons/hr_attendance/views/res_config_settings_views.xml
@@ -10,7 +10,7 @@
                     <div class="app_settings_block" data-string="Attendances" string="Attendances" data-key="hr_attendance" groups="hr_attendance.group_hr_attendance_manager">
                     <h2>Check-In/Out</h2>
                     <div class="row mt16 o_settings_container">
-                        <div class="col-xs-12 col-md-6 o_setting_box" title="Set PIN codes in the employee detail form (in HR Settings tab).">
+                        <div class="col-12 col-lg-6 o_setting_box" title="Set PIN codes in the employee detail form (in HR Settings tab).">
                             <div class="o_setting_left_pane">
                                 <field name="group_attendance_use_pin"/>
                             </div>
diff --git a/addons/hr_expense/report/hr_expense_report.xml b/addons/hr_expense/report/hr_expense_report.xml
index 46d6fe80a49..2fe883dc3f3 100644
--- a/addons/hr_expense/report/hr_expense_report.xml
+++ b/addons/hr_expense/report/hr_expense_report.xml
@@ -8,23 +8,23 @@
                         <h2>Expenses Report</h2>
 
                         <div class="row mt32 mb32">
-                            <div class="col-xs-2">
+                            <div class="col-2">
                                 <strong>Employee:</strong>
                                 <p t-field="o.employee_id.name"/>
                             </div>
-                            <div class="col-xs-2">
+                            <div class="col-2">
                                 <strong>Date:</strong>
                                 <p t-field="o.accounting_date"/>
                             </div>
-                            <div class="col-xs-3">
+                            <div class="col-3">
                                 <strong>Description:</strong>
                                 <p t-field="o.name"/>
                             </div>
-                            <div class="col-xs-2">
+                            <div class="col-2">
                                 <strong>Validated By:</strong>
                                 <p t-field="o.user_id"/>
                             </div>
-                            <div class="col-xs-3">
+                            <div class="col-3">
                                 <strong>Payment By:</strong>
                                 <p t-field="o.payment_mode"/>
                             </div>
@@ -82,7 +82,7 @@
                         </table>
 
                         <div class="row">
-                            <div class="col-xs-4 pull-right">
+                            <div class="col-4 pull-right">
                                 <table class="table table-condensed">
                                     <tr class="border-black">
                                         <td><strong>Total</strong></td>
diff --git a/addons/hr_expense/static/description/index.html b/addons/hr_expense/static/description/index.html
index ef90d6e01fc..7311afe71b3 100644
--- a/addons/hr_expense/static/description/index.html
+++ b/addons/hr_expense/static/description/index.html
@@ -17,7 +17,7 @@
         <p class="oe_mt32">
         Manage your employees' daily expenses. Whether it's travel expenses or any other costs, access all your employees&apos; fee notes and complete, validate or refuse them. No need to download any specialized software or program to manage expenses - everything can be done directly in the app!
         </p>
-        <div class="col-md-8 col-md-offset-2">
+        <div class="col-lg-8 offset-lg-2">
             <img class="oe_picture oe_screenshot" src="expense_sc_01.png">
         </div>
     </div>
diff --git a/addons/hr_expense/views/account_journal_dashboard.xml b/addons/hr_expense/views/account_journal_dashboard.xml
index 3dda547191f..ea3818010ac 100644
--- a/addons/hr_expense/views/account_journal_dashboard.xml
+++ b/addons/hr_expense/views/account_journal_dashboard.xml
@@ -8,12 +8,12 @@
         <field name="arch" type="xml">
             <xpath expr="//t[@id='account.JournalBodySalePurchase']//div[hasclass('o_kanban_primary_right')]" position="inside">
                 <div class="row">
-                    <div class="col-xs-8">
+                    <div class="col-8">
                         <a type="object" t-if="journal_type == 'purchase'" name="open_expenses_action">
                             <t t-esc="dashboard.number_expenses_to_pay"/> Expenses to Process
                         </a>
                     </div>
-                    <div class="col-xs-4 text-right">
+                    <div class="col-4 text-right">
                         <span t-if="journal_type == 'purchase'"><t t-esc="dashboard.sum_expenses_to_pay"/></span>
                     </div>
                 </div>
diff --git a/addons/hr_expense/views/hr_department_views.xml b/addons/hr_expense/views/hr_department_views.xml
index 1935fff051d..d8d007668f1 100644
--- a/addons/hr_expense/views/hr_department_views.xml
+++ b/addons/hr_expense/views/hr_department_views.xml
@@ -13,12 +13,12 @@
 
                 <xpath expr="//div[hasclass('o_kanban_primary_right')]" position="inside">
                     <div t-if="record.expense_sheets_to_approve_count.raw_value > 0" class="row">
-                        <div class="col-xs-9">
+                        <div class="col-9">
                             <a name="%(action_hr_expense_sheet_department_to_approve)d" type="action">
                                 Expense Reports
                             </a>
                         </div>
-                        <div class="col-xs-3">
+                        <div class="col-3">
                             <t t-esc="record.expense_sheets_to_approve_count.raw_value"/>
                         </div>
                     </div>
@@ -26,7 +26,7 @@
 
                 <xpath expr="//div[hasclass('o_kanban_manage_to_approve')]" position="inside">
                     <div class="row">
-                        <div class="col-xs-12 text-left">
+                        <div class="col-12 text-left">
                             <a name="%(action_hr_expense_sheet_department_to_approve)d" type="action">
                                 <t t-esc="record.expense_sheets_to_approve_count.raw_value or 0"/> Expense Reports
                             </a>
@@ -36,7 +36,7 @@
 
                 <xpath expr="//div[hasclass('o_kanban_manage_reports')]" position="inside">
                     <div class="row">
-                        <div class="col-xs-12 text-left">
+                        <div class="col-12 text-left">
                             <a name="%(action_hr_expense_sheet_department_filtered)d" type="action">
                                 Expense Reports
                             </a>
diff --git a/addons/hr_expense/views/hr_expense_views.xml b/addons/hr_expense/views/hr_expense_views.xml
index 13c33451b67..c719da67536 100644
--- a/addons/hr_expense/views/hr_expense_views.xml
+++ b/addons/hr_expense/views/hr_expense_views.xml
@@ -137,16 +137,16 @@
                         <t t-name="kanban-box">
                             <div t-attf-class="oe_kanban_card oe_kanban_global_click">
                                 <div class="row">
-                                    <div class="col-xs-12">
+                                    <div class="col-12">
                                         <strong class="o_kanban_record_title"><span><t t-esc="record.name.value"/></span></strong>
                                         <strong class="o_kanban_record_subtitle pull-right"><span class="text-right"><t t-esc="record.total_amount.value"/></span></strong>
                                     </div>
                                 </div>
                                 <div class="row mt8">
-                                    <div class="col-xs-6 text-muted">
+                                    <div class="col-6 text-muted">
                                         <span><t t-esc="record.employee_id.value"/> <t t-esc="record.date.value"/></span>
                                     </div>
-                                    <div class="col-xs-6">
+                                    <div class="col-6">
                                         <span class="pull-right text-right">
                                             <field name="state" widget="label_selection" options="{'classes': {'draft': 'default', 'reported': 'primary', 'refused': 'danger', 'done': 'warning',
                                             'approved': 'success'}}"/>
@@ -520,16 +520,16 @@
                         <t t-name="kanban-box">
                             <div t-attf-class="oe_kanban_card oe_kanban_global_click">
                                 <div class="row">
-                                    <div class="col-xs-12">
+                                    <div class="col-12">
                                         <strong class="o_kanban_record_title"><span><t t-esc="record.name.value"/></span></strong>
                                         <strong class="o_kanban_record_subtitle pull-right"><span class="text-right"><t t-esc="record.total_amount.value"/></span></strong>
                                     </div>
                                 </div>
                                 <div class="row mt8">
-                                    <div class="col-xs-6 text-muted">
+                                    <div class="col-6 text-muted">
                                         <span><t t-esc="record.employee_id.value"/> <t t-esc="record.accounting_date.value"/></span>
                                     </div>
-                                    <div class="col-xs-6">
+                                    <div class="col-6">
                                         <span class="pull-right text-right">
                                             <field name="state" widget="label_selection" options="{'classes': {'draft': 'default', 'submit': 'default', 'cancel': 'danger', 'post': 'warning',
                                             'done': 'success'}}"/>
diff --git a/addons/hr_expense/views/res_config_settings_views.xml b/addons/hr_expense/views/res_config_settings_views.xml
index b27b20d6e0b..098c7637dbc 100644
--- a/addons/hr_expense/views/res_config_settings_views.xml
+++ b/addons/hr_expense/views/res_config_settings_views.xml
@@ -11,7 +11,7 @@
                     <div class="app_settings_block" data-string="Expenses" string="Expenses" data-key="hr_expense" groups="hr_expense.group_hr_expense_manager">
                         <h2>Recording</h2>
                         <div class="row mt16 o_settings_container">
-                            <div class="col-xs-12 col-md-6 o_setting_box" title="You can setup a generic email alias to create incoming expenses easily. Write an email with the receipt in attachment to create an expense line in one click. If the mail subject contains the product's internal reference between brackets, the product will be set automatically. Type the expense amount in the mail subject to set it on the expense too.">
+                            <div class="col-12 col-lg-6 o_setting_box" title="You can setup a generic email alias to create incoming expenses easily. Write an email with the receipt in attachment to create an expense line in one click. If the mail subject contains the product's internal reference between brackets, the product will be set automatically. Type the expense amount in the mail subject to set it on the expense too.">
                                 <div class="o_setting_left_pane">
                                     <field name="use_mailgateway"/>
                                 </div>
diff --git a/addons/hr_holidays/report/hr_holidays_templates.xml b/addons/hr_holidays/report/hr_holidays_templates.xml
index 914e59cc514..4eaf5467057 100644
--- a/addons/hr_holidays/report/hr_holidays_templates.xml
+++ b/addons/hr_holidays/report/hr_holidays_templates.xml
@@ -58,11 +58,11 @@
                     </tbody>
                 </table>
 
-                <div class="col-xs-3 col-xs-offset-5 mt32">
+                <div class="col-3 offset-5 mt32">
                     <table class="table table-bordered">
                         <thead>
                             <tr>
-                                <th class="col-xs-1">Color</th>
+                                <th class="col-1">Color</th>
                                 <th class="text-center">Leave Type</th>
                             </tr>
                         </thead>
diff --git a/addons/hr_holidays/views/hr_views.xml b/addons/hr_holidays/views/hr_views.xml
index bfdc2e4f51e..3c7fef1f9e9 100644
--- a/addons/hr_holidays/views/hr_views.xml
+++ b/addons/hr_holidays/views/hr_views.xml
@@ -71,34 +71,34 @@
 
                 <xpath expr="//div[hasclass('o_kanban_primary_right')]" position="inside">
                     <div t-if="record.leave_to_approve_count.raw_value > 0" class="row">
-                        <div class="col-xs-9">
+                        <div class="col-9">
                             <a name="%(hr_holidays_action_request_from_department)d" type="action">
                                 Leave Requests
                             </a>
                         </div>
-                        <div class="col-xs-3">
+                        <div class="col-3">
                             <field name="leave_to_approve_count"/>
                         </div>
                     </div>
                     <div t-if="record.allocation_to_approve_count.raw_value > 0" class="row">
-                        <div class="col-xs-9">
+                        <div class="col-9">
                             <a name="%(hr_holidays_action_allocation_from_department)d" type="action">
                                 Allocation Requests
                             </a>
                         </div>
-                        <div class="col-xs-3">
+                        <div class="col-3">
                             <field name="allocation_to_approve_count"/>
                         </div>
                     </div>
                 </xpath>
 
                 <xpath expr="//div[hasclass('o_kanban_primary_right')]" position="after">
-                    <div class="col-xs-12 o_kanban_primary_bottom bottom_block">
+                    <div class="col-12 o_kanban_primary_bottom bottom_block">
                         <div class="row">
-                            <div class="col-xs-3">
+                            <div class="col-3">
                                 <a name="%(hr_employee_action_from_department)d" type="action" title="Absent Employee(s), Whose leaves request are either confirmed or validated on today">Absence</a>
                             </div>
-                            <div class="col-xs-9">
+                            <div class="col-9">
                                 <field name="absence_of_today" widget="progressbar" options="{'current_value': 'absence_of_today', 'max_value': 'total_employee', 'editable': false}"/>
                             </div>
                         </div>
@@ -107,7 +107,7 @@
 
                 <xpath expr="//div[hasclass('o_kanban_manage_to_approve')]" position="inside">
                     <div class="row">
-                        <div class="col-xs-12 text-left">
+                        <div class="col-12 text-left">
                             <a name="%(hr_holidays_action_request_from_department)d" type="action">
                                 <t t-esc="record.leave_to_approve_count.raw_value or 0"/> Leave Requests
                             </a>
@@ -115,7 +115,7 @@
                     </div>
 
                     <div class="row">
-                        <div class="col-xs-12 text-left">
+                        <div class="col-12 text-left">
                             <a name="%(hr_holidays_action_allocation_from_department)d" type="action">
                                 <t t-esc="record.allocation_to_approve_count.raw_value or 0"/> Allocation Requests
                             </a>
@@ -125,7 +125,7 @@
 
                 <xpath expr="//div[hasclass('o_kanban_manage_reports')]" position="inside">
                     <div class="row">
-                        <div class="col-xs-12 text-left">
+                        <div class="col-12 text-left">
                             <a name="%(action_hr_holidays_leaves_analysis_filtered)d" type="action">
                                 Leaves
                             </a>
diff --git a/addons/hr_payroll/views/hr_payslip_views.xml b/addons/hr_payroll/views/hr_payslip_views.xml
index d8e248b06ca..797cd110fb0 100644
--- a/addons/hr_payroll/views/hr_payslip_views.xml
+++ b/addons/hr_payroll/views/hr_payslip_views.xml
@@ -92,20 +92,20 @@
                     <t t-name="kanban-box">
                         <div t-attf-class="oe_kanban_content oe_kanban_global_click">
                             <div class="row">
-                                <div class="col-xs-6">
+                                <div class="col-6">
                                     <strong><field name="employee_id"/></strong>
                                 </div>
-                                <div class="col-xs-6">
+                                <div class="col-6">
                                     <span class="pull-right label label-default">
                                         <field name="state"/>
                                     </span>
                                 </div>
-                                <div class="col-xs-12">
+                                <div class="col-12">
                                     <span>
                                         <field name="date_from"/> - <field name="date_to"/>
                                     </span>
                                 </div>
-                                <div class="col-xs-12">
+                                <div class="col-12">
                                     <span><field name="name"/></span>
                                 </div>
                             </div>
@@ -337,15 +337,15 @@
                     <t t-name="kanban-box">
                         <div t-attf-class="oe_kanban_content oe_kanban_global_click">
                             <div class="row">
-                                <div class="col-xs-6">
+                                <div class="col-6">
                                     <strong><field name="name"/></strong>
                                 </div>
-                                <div class="col-xs-6">
+                                <div class="col-6">
                                     <span class="pull-right label label-default">
                                         <field name="state"/>
                                     </span>
                                 </div>
-                                <div class="col-xs-12">
+                                <div class="col-12">
                                     <span>
                                         <field name="date_start"/> - <field name="date_end"/>
                                     </span>
diff --git a/addons/hr_payroll/views/hr_salary_rule_views.xml b/addons/hr_payroll/views/hr_salary_rule_views.xml
index 14b222eaaf8..d97299a04c1 100644
--- a/addons/hr_payroll/views/hr_salary_rule_views.xml
+++ b/addons/hr_payroll/views/hr_salary_rule_views.xml
@@ -24,12 +24,12 @@
                     <t t-name="kanban-box">
                         <div t-attf-class="oe_kanban_content oe_kanban_global_click">
                             <div class="row">
-                                <div class="col-xs-12">
+                                <div class="col-12">
                                     <strong><field name="name"/></strong>
                                 </div>
                             </div>
                             <div class="row">
-                                <div class="col-xs-12">
+                                <div class="col-12">
                                     <span>Code: <field name="code"/></span>
                                 </div>
                             </div>
@@ -180,7 +180,7 @@
                     <t t-name="kanban-box">
                         <div t-attf-class="oe_kanban_content oe_kanban_global_click">
                             <div class="row">
-                                <div class="col-xs-12">
+                                <div class="col-12">
                                     <strong><field name="name"/></strong>
                                 </div>
                             </div>
@@ -264,15 +264,15 @@
                     <t t-name="kanban-box">
                         <div t-attf-class="oe_kanban_content oe_kanban_global_click">
                             <div class="row">
-                                <div class="col-xs-8">
+                                <div class="col-8">
                                     <strong><field name="name"/></strong>
                                 </div>
-                                <div class="col-xs-4">
+                                <div class="col-4">
                                     <span class="pull-right"><field name="category_id"/></span>
                                 </div>
                             </div>
                             <div class="row">
-                                <div class="col-xs-12">
+                                <div class="col-12">
                                     <span>Code: <field name="code"/></span>
                                 </div>
                             </div>
diff --git a/addons/hr_payroll/views/report_contributionregister_templates.xml b/addons/hr_payroll/views/report_contributionregister_templates.xml
index f4717a4d20c..00f843d71b0 100644
--- a/addons/hr_payroll/views/report_contributionregister_templates.xml
+++ b/addons/hr_payroll/views/report_contributionregister_templates.xml
@@ -9,15 +9,15 @@
 
 
                     <div class="row mt32 mb32">
-                        <div class="col-xs-3">
+                        <div class="col-3">
                             <strong>Register Name:</strong>
                             <p t-field="o.name"/>
                         </div>
-                        <div class="col-xs-3">
+                        <div class="col-3">
                             <strong>Date From:</strong>
                             <p t-esc="data['form']['date_from']"/>
                         </div>
-                        <div class="col-xs-3">
+                        <div class="col-3">
                             <strong>Date To:</strong>
                             <p t-esc="data['form']['date_to']"/>
                         </div>
@@ -53,7 +53,7 @@
                     </table>
 
                     <div class="row">
-                        <div class="col-xs-4 pull-right">
+                        <div class="col-4 pull-right">
                             <table class="table table-condensed">
                                 <tr class="border-black">
                                     <td><strong>Total</strong></td>
diff --git a/addons/hr_payroll/views/res_config_settings_views.xml b/addons/hr_payroll/views/res_config_settings_views.xml
index 5b72ee8cd7b..42d5e608d05 100644
--- a/addons/hr_payroll/views/res_config_settings_views.xml
+++ b/addons/hr_payroll/views/res_config_settings_views.xml
@@ -21,7 +21,7 @@
                     <field name="module_l10n_in_hr_payroll" invisible="1"/>
                     <h2 attrs="{'invisible': ['|', '|', ('module_l10n_fr_hr_payroll', '=', True), ('module_l10n_be_hr_payroll', '=', True), ('module_l10n_in_hr_payroll', '=', True)]}">Payroll</h2>
                     <div class="row mt16 o_settings_container" id="hr_payroll_localization" attrs="{'invisible': ['|', '|', ('module_l10n_fr_hr_payroll', '=', True), ('module_l10n_be_hr_payroll', '=', True), ('module_l10n_in_hr_payroll', '=', True)]}">
-                        <div class="col-md-6 col-xs-12 o_setting_box">
+                        <div class="col-lg-6 col-12 o_setting_box">
                             <div class="o_setting_right_pane">
                                 <span class="o_form_label">Payroll Rules</span>
                                 <div class="text-muted">
@@ -35,7 +35,7 @@
                     </div>
                     <h2>Accounting</h2>
                     <div class="row mt16 o_settings_container" id="hr_payroll_accountant">
-                        <div class="col-md-6 col-xs-12 o_setting_box">
+                        <div class="col-lg-6 col-12 o_setting_box">
                             <div class="o_setting_left_pane">
                                 <field name="module_account_accountant" widget="upgrade_boolean"/>
                             </div>
diff --git a/addons/hr_recruitment/static/description/index.html b/addons/hr_recruitment/static/description/index.html
index 0805526956f..719964d0e60 100644
--- a/addons/hr_recruitment/static/description/index.html
+++ b/addons/hr_recruitment/static/description/index.html
@@ -49,7 +49,7 @@
             Whether applicants contact you by email or using an online form, get all the data automatically indexed (resumes, motivation letter, etc.) and answered in just a click, using templates or personalized emails.
             </p>
         </div>
-        <div class="col-md-8 col-md-offset-2 oe_mt32">
+        <div class="col-lg-8 offset-lg-2 oe_mt32">
             <img class="oe_picture oe_screenshot" src="job_sources.png">
         </div>
     </div>
diff --git a/addons/hr_recruitment/views/hr_department_views.xml b/addons/hr_recruitment/views/hr_department_views.xml
index 187499b3f41..3a0cb00535c 100644
--- a/addons/hr_recruitment/views/hr_department_views.xml
+++ b/addons/hr_recruitment/views/hr_department_views.xml
@@ -15,12 +15,12 @@
 
                 <xpath expr="//div[hasclass('o_kanban_primary_right')]" position="inside">
                     <div t-if="record.new_applicant_count.raw_value > 0" class="row">
-                        <div class="col-xs-9">
+                        <div class="col-9">
                             <a name="%(hr_applicant_action_from_department)d" type="action">
                                 New Applicants
                             </a>
                         </div>
-                        <div class="col-xs-3">
+                        <div class="col-3">
                             <field name="new_applicant_count"/>
                         </div>
                     </div>
@@ -28,7 +28,7 @@
 
                 <xpath expr="//div[hasclass('o_kanban_manage_to_do')]" position="inside">
                     <div class="row">
-                        <div class="col-xs-12 text-left">
+                        <div class="col-12 text-left">
                             <a name="%(hr_applicant_action_from_department)d" type="action">
                                 <t t-esc="record.new_applicant_count.raw_value or 0"/> New Applicants
                             </a>
@@ -38,7 +38,7 @@
 
                 <xpath expr="//div[hasclass('o_kanban_manage_reports')]" position="inside">
                     <div class="row">
-                        <div class="col-xs-12 text-left">
+                        <div class="col-12 text-left">
                             <a name="%(action_hr_recruitment_report_filtered_department)d" type="action">
                                 Recruitments
                             </a>
diff --git a/addons/hr_recruitment/views/hr_job_views.xml b/addons/hr_recruitment/views/hr_job_views.xml
index cab60a27839..945ea855bca 100644
--- a/addons/hr_recruitment/views/hr_job_views.xml
+++ b/addons/hr_recruitment/views/hr_job_views.xml
@@ -40,7 +40,7 @@
                             <div class="container o_kanban_card_content">
                                 <t t-if="record.state.raw_value == 'recruit'">
                                     <div class="row">
-                                        <div name="application_button" class="col-xs-6 o_kanban_primary_left">
+                                        <div name="application_button" class="col-6 o_kanban_primary_left">
                                             <button class="btn btn-primary" name="%(action_hr_job_applications)d" type="action">Application(s)</button>
                                         </div>
                                     </div>
@@ -61,17 +61,17 @@
                                 </t>
                                 <t t-if="record.state.raw_value == 'open'">
                                     <div class="row">
-                                        <div class="col-xs-12 o_kanban_primary_left">
+                                        <div class="col-12 o_kanban_primary_left">
                                             <button class="btn btn-secondary" name="set_recruit" type="object">Start Recruitment</button>
                                         </div>
                                     </div>
                                 </t>
                             </div><div class="container o_kanban_card_manage_pane dropdown-menu" role="menu">
                                 <div t-if="widget.editable" class="o_kanban_card_manage_settings row">
-                                    <div class="col-xs-8" role="menuitem" aria-haspopup="true">
+                                    <div class="col-8" role="menuitem" aria-haspopup="true">
                                         <ul class="oe_kanban_colorpicker" data-field="color" role="menu"/>
                                     </div>
-                                    <div class="col-xs-4">
+                                    <div class="col-4">
                                         <a role="menuitem" t-if="record.state.raw_value == 'recruit'" name="set_open" type="object">Recruitment Done</a>
                                         <a role="menuitem" t-if="record.state.raw_value == 'open'" name="set_recruit" type="object">Start recruitment</a>
                                         <br role="separator"/>
diff --git a/addons/hr_recruitment/views/res_config_settings_views.xml b/addons/hr_recruitment/views/res_config_settings_views.xml
index 1c91baa043b..e071092241a 100644
--- a/addons/hr_recruitment/views/res_config_settings_views.xml
+++ b/addons/hr_recruitment/views/res_config_settings_views.xml
@@ -11,7 +11,7 @@
                     <div class="app_settings_block" data-string="Recruitment" string="Recruitment" data-key="hr_recruitment" groups="hr_recruitment.group_hr_recruitment_manager">
                         <h2>Job Posting</h2>
                         <div class="row mt16 o_settings_container">
-                            <div class="col-xs-12 col-md-6 o_setting_box">
+                            <div class="col-12 col-lg-6 o_setting_box">
                                 <div class="o_setting_left_pane">
                                     <field name="module_website_hr_recruitment"/>
                                 </div>
@@ -25,7 +25,7 @@
                         </div>
                         <h2>Recruitment Process</h2>
                         <div class="row mt16 o_settings_container" name="recruitment_process_div">
-                            <div class="col-xs-12 col-md-6 o_setting_box" title="Use interview forms tailored to each job position during the recruitment process. Select the form to use in the job position detail form. This relies on Survey app.">
+                            <div class="col-12 col-lg-6 o_setting_box" title="Use interview forms tailored to each job position during the recruitment process. Select the form to use in the job position detail form. This relies on Survey app.">
                                 <div class="o_setting_left_pane">
                                     <field name="module_hr_recruitment_survey"/>
                                 </div>
diff --git a/addons/hr_timesheet/report/report_timesheet_templates.xml b/addons/hr_timesheet/report/report_timesheet_templates.xml
index fea714a5d7a..5b46b7c167e 100644
--- a/addons/hr_timesheet/report/report_timesheet_templates.xml
+++ b/addons/hr_timesheet/report/report_timesheet_templates.xml
@@ -7,7 +7,7 @@
                 <div class="page">
                     <div class="oe_structure"/>
                     <div class="row">
-                        <div class="col-md-12">
+                        <div class="col-lg-12">
                             <h2>
                                 <span>Timesheet Entries</span>
                             </h2>
@@ -15,7 +15,7 @@
                     </div>
 
                     <div class="row">
-                        <div class="col-md-12">
+                        <div class="col-lg-12">
                             <table class="table table-condensed">
                                 <thead>
                                     <tr>
diff --git a/addons/hr_timesheet/views/hr_timesheet_views.xml b/addons/hr_timesheet/views/hr_timesheet_views.xml
index fefd0885d60..7a2a7a71517 100644
--- a/addons/hr_timesheet/views/hr_timesheet_views.xml
+++ b/addons/hr_timesheet/views/hr_timesheet_views.xml
@@ -164,10 +164,10 @@
                         <t t-name="kanban-box">
                             <div t-attf-class="oe_kanban_global_click">
                                 <div class="row">
-                                    <div class="col-xs-2">
+                                    <div class="col-2">
                                         <img t-att-src="kanban_image('res.users', 'image_small', record.user_id.raw_value)" t-att-title="record.user_id.value" t-att-alt="record.user_id.value" width="40" height="40" class="oe_kanban_avatar pull-left"/>
                                     </div>
-                                    <div class="col-xs-10">
+                                    <div class="col-10">
                                         <div>
                                             <strong><t t-esc="record.project_id.value"/></strong>
                                         </div>
diff --git a/addons/hr_timesheet/views/hr_views.xml b/addons/hr_timesheet/views/hr_views.xml
index 170bd7e861f..b8c94984d69 100644
--- a/addons/hr_timesheet/views/hr_views.xml
+++ b/addons/hr_timesheet/views/hr_views.xml
@@ -46,7 +46,7 @@
             <data>
                 <xpath expr="//div[hasclass('o_kanban_manage_reports')]" position="inside">
                     <div class="row">
-                        <div class="col-xs-12 text-left">
+                        <div class="col-12 text-left">
                             <a name="%(act_hr_timesheet_report)d" type="action"
                                context="{ 'search_default_department_id': [active_id], 'default_department_id': active_id}">
                             Timesheets
diff --git a/addons/hr_timesheet/views/project_portal_templates.xml b/addons/hr_timesheet/views/project_portal_templates.xml
index cb0ed74e25c..de30a5df302 100644
--- a/addons/hr_timesheet/views/project_portal_templates.xml
+++ b/addons/hr_timesheet/views/project_portal_templates.xml
@@ -9,7 +9,7 @@
                     <thead>
                       <tr class="active">
                         <th>Date</th>
-                        <th class="col-md-6">Description</th>
+                        <th class="col-lg-6">Description</th>
                         <th>Responsible</th>
                         <th>Duration</th>
                       </tr>
diff --git a/addons/hr_timesheet/views/res_config_settings_views.xml b/addons/hr_timesheet/views/res_config_settings_views.xml
index 19ca5289205..19d21fac97c 100644
--- a/addons/hr_timesheet/views/res_config_settings_views.xml
+++ b/addons/hr_timesheet/views/res_config_settings_views.xml
@@ -13,7 +13,7 @@
                 <div class="app_settings_block" data-string="Timesheets" string="Timesheets" data-key="hr_timesheet" groups="hr_timesheet.group_timesheet_manager">
                     <h2>Timesheet Apps</h2>
                     <div class="row mt16 o_settings_container">
-                        <div class="col-xs-12 col-md-6 o_setting_box">
+                        <div class="col-12 col-lg-6 o_setting_box">
                             <div class="o_setting_left_pane">
                                 <field name="module_project_timesheet_synchro" widget="upgrade_boolean"/>
                             </div>
@@ -24,17 +24,17 @@
                                 </div>
                                 <div class="content-group">
                                     <div class="row mt16 oe_center">
-                                        <div class="col-md-4">
+                                        <div class="col-lg-4">
                                             <a href="http://www.odoo.com/page/timesheet?platform=chrome">
                                                 <img alt="Google Chrome Store" class="img img-fluid" src="project/static/src/img/chrome_store.png"/>
                                             </a>
                                         </div>
-                                        <div class="col-md-4">
+                                        <div class="col-lg-4">
                                             <a href="http://www.odoo.com/page/timesheet?platform=ios">
                                                 <img alt="Apple App Store" class="img img-fluid" src="project/static/src/img/app_store.png"/>
                                             </a>
                                         </div>
-                                        <div class="col-md-4">
+                                        <div class="col-lg-4">
                                             <a href="http://www.odoo.com/page/timesheet?platform=android">
                                                 <img alt="Google Play Store" class="img img-fluid" src="project/static/src/img/play_store.png"/>
                                             </a>
@@ -47,7 +47,7 @@
                     <div name="section_leaves" groups="base.group_no_one">
                         <h2>Leaves</h2>
                         <div class="row mt16 o_settings_container" name="timesheet_control">
-                            <div class="col-xs-12 col-md-6 o_setting_box">
+                            <div class="col-12 col-lg-6 o_setting_box">
                                 <div class="o_setting_left_pane">
                                     <field name="module_project_timesheet_holidays"/>
                                 </div>
diff --git a/addons/hw_screen/controllers/main.py b/addons/hw_screen/controllers/main.py
index b8e59fbfdd6..1976120496c 100644
--- a/addons/hw_screen/controllers/main.py
+++ b/addons/hw_screen/controllers/main.py
@@ -152,7 +152,7 @@ class HardwareScreen(web.Home):
                     <div hidden class="shadow"></div>
                     <div class="container">
                     <div class="row">
-                        <div class="col-md-4 col-md-offset-4">
+                        <div class="col-lg-4 offset-lg-4">
                             <h1>Odoo Point of Sale</h1>
                             <h2>POSBox Client display</h2>
                             <h3>My IPs</h3>
diff --git a/addons/im_livechat/static/description/index.html b/addons/im_livechat/static/description/index.html
index 75b50edc054..373c0d3ee0d 100644
--- a/addons/im_livechat/static/description/index.html
+++ b/addons/im_livechat/static/description/index.html
@@ -14,7 +14,7 @@
     <div class="oe_row oe_spaced">
         <h2 class="oe_slogan" style="color:#875A7B;">Do it live!</h2>
         <h3 class="oe_slogan">Convert more visitors into leads and customers</h3>
-        <div class="col-md-5 oe_mt32 text-justify">
+        <div class="col-lg-5 oe_mt32 text-justify">
             <span class="fa fa-eyedropper fa-2x pull-left"/>
             <div class="oe_mb32">
                 <p style="margin-left:45px;">Chat online with customers and website visitors in real time.</p>
@@ -28,10 +28,10 @@
                   Provide your visitors with information in a fast and simple way - direct chat with customers on your website has never been easier!
                 </p>
         </div>
-        <div class="col-md-3" style="margin-left:68px;">
+        <div class="col-lg-3" style="margin-left:68px;">
             <img class="oe_picture oe_screenshot" src="im_livechat_01.png">
         </div>
-        <div class="col-md-3">
+        <div class="col-lg-3">
             <img class="oe_picture oe_screenshot" src="im_livechat_02.png">
         </div>
     </div> 
diff --git a/addons/l10n_be_hr_payroll_fleet/views/res_config_settings_views.xml b/addons/l10n_be_hr_payroll_fleet/views/res_config_settings_views.xml
index 5e1647cab23..82ebc46eaa8 100644
--- a/addons/l10n_be_hr_payroll_fleet/views/res_config_settings_views.xml
+++ b/addons/l10n_be_hr_payroll_fleet/views/res_config_settings_views.xml
@@ -11,7 +11,7 @@
                     <div class="app_settings_block" data-string="Fleet" string="Fleet" data-key="fleet" groups="fleet.fleet_group_manager">
                         <h2>Fleet Management</h2>
                         <div class="row mt16 o_settings_container">
-                            <div class="col-xs-12 col-md-6 o_setting_box">
+                            <div class="col-12 col-lg-6 o_setting_box">
                                 <div class="o_setting_left_pane"/>
                                 <div class="o_setting_right_pane">
                                     <span class="o_form_label">New Car Request</span>
diff --git a/addons/l10n_ch/views/res_config_settings_views.xml b/addons/l10n_ch/views/res_config_settings_views.xml
index 486f2e3e183..8fd2a92c568 100644
--- a/addons/l10n_ch/views/res_config_settings_views.xml
+++ b/addons/l10n_ch/views/res_config_settings_views.xml
@@ -7,7 +7,7 @@
             <field name="inherit_id" ref="account.res_config_settings_view_form"/>
             <field name="arch" type="xml">
                 <xpath expr="//div[@id='accounting_reports']" position="inside">
-                    <div class="col-xs-12 col-md-6 o_setting_box" id="l10n_ch-isr_print_bank">
+                    <div class="col-12 col-lg-6 o_setting_box" id="l10n_ch-isr_print_bank">
                         <div class="o_setting_left_pane">
                             <field name="l10n_ch_isr_print_bank_location"/>
                         </div>
@@ -19,17 +19,17 @@
                             </div>
                             <div class="content-group" attrs="{'invisible': [('l10n_ch_isr_print_bank_location', '=', False)]}">
                                 <div class="row mt16">
-                                    <label for="l10n_ch_isr_preprinted_bank" class="col-md-4 o_light_label"/>
+                                    <label for="l10n_ch_isr_preprinted_bank" class="col-lg-4 o_light_label"/>
                                     <field name="l10n_ch_isr_preprinted_bank"/>
                                 </div>
                                 <div class="row">
-                                    <label for="l10n_ch_isr_preprinted_account" class="col-md-4 o_light_label"/>
+                                    <label for="l10n_ch_isr_preprinted_account" class="col-lg-4 o_light_label"/>
                                     <field name="l10n_ch_isr_preprinted_account"/>
                                 </div>
                             </div>
                         </div>
                     </div>
-                    <div class="col-xs-12 col-md-6 o_setting_box" id="l10n_ch-isr_print_scanline_offset">
+                    <div class="col-12 col-lg-6 o_setting_box" id="l10n_ch-isr_print_scanline_offset">
                         <div class="o_setting_left_pane"/>
                         <div class="o_setting_right_pane">
                             <span class="o_form_label">ISR scan line offset</span>
@@ -38,11 +38,11 @@
                             </div>
                             <div class="content-group">
                                 <div class="row mt16">
-                                    <label for="l10n_ch_isr_scan_line_top" class="col-md-4 o_light_label"/>
+                                    <label for="l10n_ch_isr_scan_line_top" class="col-lg-4 o_light_label"/>
                                     <field name="l10n_ch_isr_scan_line_top"/>
                                 </div>
                                 <div class="row">
-                                    <label for="l10n_ch_isr_scan_line_left" class="col-md-4 o_light_label"/>
+                                    <label for="l10n_ch_isr_scan_line_left" class="col-lg-4 o_light_label"/>
                                     <field name="l10n_ch_isr_scan_line_left"/>
                                 </div>
                             </div>
diff --git a/addons/l10n_fr/views/report_l10nfrbilan.xml b/addons/l10n_fr/views/report_l10nfrbilan.xml
index 5306ad2ca40..fdb10c51e60 100644
--- a/addons/l10n_fr/views/report_l10nfrbilan.xml
+++ b/addons/l10n_fr/views/report_l10nfrbilan.xml
@@ -7,12 +7,12 @@
             <div class="page">
                 <h2>Bilan</h2>
                 <div class="row mt32 mb32">
-                    <div class="col-xs-3">
+                    <div class="col-3">
                         <span t-esc="res_company.name"/>
                         <br/>au
                         <span t-esc="time.strftime('%d-%m-%Y', time.strptime(date_stop,'%Y-%m-%d'))"/>
                     </div>
-                    <div class="col-xs-3">
+                    <div class="col-3">
                         <p>Imprimé le
                             <span t-esc="time.strftime('%d-%m-%Y')"/>
                             <br/>Tenue de compte:
diff --git a/addons/l10n_fr/views/report_l10nfrresultat.xml b/addons/l10n_fr/views/report_l10nfrresultat.xml
index 59cc9d7eeb0..e4e8d30e0e0 100644
--- a/addons/l10n_fr/views/report_l10nfrresultat.xml
+++ b/addons/l10n_fr/views/report_l10nfrresultat.xml
@@ -7,12 +7,12 @@
             <div class="page">
                 <h2>Compte de résultat</h2>
                 <div class="row mt32 mb32">
-                    <div class="col-xs-3">
+                    <div class="col-3">
                         <span t-esc="res_company.name"/>
                         <br/>au
                         <span t-esc="time.strftime('%d-%m-%Y', time.strptime(date_stop,'%Y-%m-%d'))"/>
                     </div>
-                    <div class="col-xs-3">
+                    <div class="col-3">
                         <p>Imprimé le
                             <span t-esc="time.strftime('%d-%m-%Y')"/>
                             <br/>Tenue de compte:
diff --git a/addons/l10n_fr_hr_payroll/report/report_l10n_fr_fiche_paye.xml b/addons/l10n_fr_hr_payroll/report/report_l10n_fr_fiche_paye.xml
index c9fcc8ae3fd..42064a73861 100644
--- a/addons/l10n_fr_hr_payroll/report/report_l10n_fr_fiche_paye.xml
+++ b/addons/l10n_fr_hr_payroll/report/report_l10n_fr_fiche_paye.xml
@@ -7,11 +7,11 @@
                 <div class="page">
                     <div class="oe_structure"/>
                     <div class="row">
-                        <div class="col-xs-4">
+                        <div class="col-4">
                             <h2>Bulletin de paie</h2>
                             <h4>Paie du <span t-field="o.date_from"/> au <span t-field="o.date_to"/></h4>
                         </div>
-                        <div class="col-xs-4 pull-right">
+                        <div class="col-4 pull-right">
                             <table class="table table-bordered" stype="border: 2px solid black;">
                                 <tr>
                                     <td>
@@ -107,7 +107,7 @@
                         </tbody>
                     </table>
                      <div class="row">
-                        <div class="col-xs-12">
+                        <div class="col-12">
                             <table class="table  table-round-border">
                                 <tr>
                                     <td>
diff --git a/addons/l10n_fr_hr_payroll/views/res_config_settings_views.xml b/addons/l10n_fr_hr_payroll/views/res_config_settings_views.xml
index 60e08b96620..21580b096b5 100644
--- a/addons/l10n_fr_hr_payroll/views/res_config_settings_views.xml
+++ b/addons/l10n_fr_hr_payroll/views/res_config_settings_views.xml
@@ -9,30 +9,30 @@
                 <field name="module_l10n_fr_hr_payroll" invisible="1"/>
                 <h2 attrs="{'invisible': [('module_l10n_fr_hr_payroll','=',False)]}">Payroll</h2>
                 <div class="row mt16 o_settings_container" attrs="{'invisible': [('module_l10n_fr_hr_payroll','=',False)]}">
-                    <div class="col-xs-12 col-md-6 o_setting_box">
+                    <div class="col-12 col-lg-6 o_setting_box">
                         <div class="o_setting_left_pane"/>
                         <div class="o_setting_right_pane">
                             <span class="fa fa-lg fa-building-o" title="Values set here are company-specific." aria-label="Values set here are company-specific." groups="base.group_multi_company" role="img"/>
                             <span class="o_form_label">Paie</span>
                             <div class="content-group">
                                 <div class="row mt16">
-                                    <label for="plafond_secu" class="col-md-3 o_light_label"/>
+                                    <label for="plafond_secu" class="col-lg-3 o_light_label"/>
                                     <field name="plafond_secu"/>
                                 </div>
                                 <div class="row mt16">
-                                    <label for="nombre_employes" class="col-md-3 o_light_label"/>
+                                    <label for="nombre_employes" class="col-lg-3 o_light_label"/>
                                     <field name="nombre_employes"/>
                                 </div>
                                 <div class="row mt16">
-                                    <label for="cotisation_prevoyance" class="col-md-3 o_light_label"/>
+                                    <label for="cotisation_prevoyance" class="col-lg-3 o_light_label"/>
                                     <field name="cotisation_prevoyance"/>
                                 </div>
                                 <div class="row mt16">
-                                    <label for="org_ss" class="col-md-3 o_light_label"/>
+                                    <label for="org_ss" class="col-lg-3 o_light_label"/>
                                     <field name="org_ss"/>
                                 </div>
                                 <div class="row mt16">
-                                    <label for="conv_coll" class="col-md-3 o_light_label"/>
+                                    <label for="conv_coll" class="col-lg-3 o_light_label"/>
                                     <field name="conv_coll"/>
                                 </div>
 
diff --git a/addons/l10n_in_hr_payroll/report/payslip_report_view.xml b/addons/l10n_in_hr_payroll/report/payslip_report_view.xml
index bfc24ffdcbd..8bd7ce9fe24 100644
--- a/addons/l10n_in_hr_payroll/report/payslip_report_view.xml
+++ b/addons/l10n_in_hr_payroll/report/payslip_report_view.xml
@@ -86,7 +86,7 @@
             <data>
                 <xpath expr="//div[hasclass('o_kanban_manage_reports')]" position="inside">
                     <div class="row">
-                        <div class="col-xs-12 text-left">
+                        <div class="col-12 text-left">
                             <a name="%(action_payslip_report_all)d" type="action">
                                 Payslip Analysis
                             </a>
diff --git a/addons/l10n_mx/views/res_config_settings_views.xml b/addons/l10n_mx/views/res_config_settings_views.xml
index 4407019c06e..99717c984e8 100644
--- a/addons/l10n_mx/views/res_config_settings_views.xml
+++ b/addons/l10n_mx/views/res_config_settings_views.xml
@@ -6,7 +6,7 @@
         <field name="inherit_id" ref="account.res_config_settings_view_form"/>
         <field name="arch" type="xml">
             <xpath expr=".//div[@id='invoicing_settings']" position="inside">
-                <div class="col-xs-12 col-md-6 o_setting_box">
+                <div class="col-12 col-lg-6 o_setting_box">
                     <div class="o_setting_left_pane">
                         <field name="module_l10n_mx_edi" class="oe_inline" widget="upgrade_boolean"/>
                     </div>
diff --git a/addons/lunch/report/lunch_order_templates.xml b/addons/lunch/report/lunch_order_templates.xml
index d5984e3e605..fb200c50801 100644
--- a/addons/lunch/report/lunch_order_templates.xml
+++ b/addons/lunch/report/lunch_order_templates.xml
@@ -7,7 +7,7 @@
                         <div class="oe_structure"/>
 
                         <div class="row">
-                            <div class="col-xs-5 col-xs-offset-7">
+                            <div class="col-5 offset-7">
                                 <div t-field="user.partner_id"
                                     t-options='{"widget": "contact", "fields": ["address", "name"], "no_marker": True}' />
                             </div>
@@ -59,7 +59,7 @@
                         </table>
 
                         <div class="row">
-                            <div class="col-xs-4 pull-right">
+                            <div class="col-4 pull-right">
                                 <table class="table table-condensed">
                                     <tr class="border-black">
                                         <td><strong>Total</strong></td>
diff --git a/addons/lunch/static/src/xml/lunch.xml b/addons/lunch/static/src/xml/lunch.xml
index 4efb8f9f5de..a848c029209 100644
--- a/addons/lunch/static/src/xml/lunch.xml
+++ b/addons/lunch/static/src/xml/lunch.xml
@@ -1,13 +1,13 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates>
-    <div t-name="LunchPreviousOrdersWidgetNoOrder" class="col-md-12">
+    <div t-name="LunchPreviousOrdersWidgetNoOrder" class="col-lg-12">
         <h3>This is the first time you order a meal</h3>
         <p class="text-muted">Select a product and put your order comments on the note.</p>
         <p class="text-muted">Your favorite meals will be created based on your last orders.</p>
         <p class="text-muted">Don't forget the alerts displayed in the reddish area</p>
     </div>
     <t t-name="LunchPreviousOrdersWidgetList">
-        <div t-foreach="categories" t-as="supplier" class="col-md-4">
+        <div t-foreach="categories" t-as="supplier" class="col-lg-4">
             <h3><t t-esc="supplier"/></h3>
             <div t-foreach='categories[supplier]' t-as='order' class="o_lunch_vignette">
                 <button type="button" class="pull-right o_add_button oe_edit_only oe_link" t-att-data-id="order.line_id">
diff --git a/addons/lunch/views/lunch_views.xml b/addons/lunch/views/lunch_views.xml
index 90319d193fe..c7673e088bd 100644
--- a/addons/lunch/views/lunch_views.xml
+++ b/addons/lunch/views/lunch_views.xml
@@ -98,23 +98,23 @@
                         <t t-name="kanban-box">
                             <div t-attf-class="oe_kanban_global_click">
                                 <div class="row mb4">
-                                    <div class="col-xs-8">
+                                    <div class="col-8">
                                         <span>
                                             <strong class="o_kanban_record_title"><t t-esc="record.description.value"/></strong>
                                         </span>
                                     </div>
-                                    <div class="col-xs-4 text-right">
+                                    <div class="col-4 text-right">
                                         <span class="badge">
                                             <strong><i class="fa fa-money" role="img" aria-label="Amount" title="Amount"/> <field name="amount"/></strong>
                                         </span>
                                     </div>
                                 </div>
                                 <div class="row">
-                                    <div class="col-xs-6">
+                                    <div class="col-6">
                                         <i class="fa fa-clock-o" role="img" aria-label="Date" title="Date"/>
                                         <t t-esc="record.date.value"/>
                                     </div>
-                                    <div class="col-xs-6">
+                                    <div class="col-6">
                                         <img t-att-src="kanban_image('res.users', 'image_small', record.user_id.raw_value)" t-att-title="record.user_id.value" t-att-alt="record.user_id.value" width="24" height="24" class="oe_kanban_avatar pull-right"/>
                                     </div>
                                 </div>
@@ -389,15 +389,15 @@
                                     <field name="note"/>
                                 </div>
                                 <div class="row">
-                                    <div class="col-xs-6">
+                                    <div class="col-6">
                                         <i class="fa fa-money" role="img" aria-label="Money" title="Money"/> <field name="price"/>
                                     </div>
-                                    <div class="col-xs-6 text-right">
+                                    <div class="col-6 text-right">
                                         <i class="fa fa-clock-o" role="img" aria-label="Date" title="Date"/> <field name="date"/>
                                     </div>
                                 </div>
                                 <div class="row mt4">
-                                    <div class="col-xs-6">
+                                    <div class="col-6">
                                         <a class="btn btn-xs btn-success" role="button" name="order" string="Order" type="object" attrs="{'invisible': ['|',('state','=','confirmed'),('state','=','ordered')]}" groups="lunch.group_lunch_manager">
                                             <i class="fa fa-phone" role="img" aria-label="Order button" title="Order button"/>
                                         </a>
@@ -408,7 +408,7 @@
                                             <i class="fa fa-times" role="img" aria-label="Cancel button" title="Cancel button"/>
                                         </a>
                                     </div>
-                                    <div class="col-xs-6">
+                                    <div class="col-6">
                                         <img t-att-src="kanban_image('res.users', 'image_small', record.user_id.raw_value)" t-att-title="record.user_id.value" t-att-alt="record.user_id.value" width="24" height="24" class="oe_kanban_avatar pull-right"/>
                                     </div>
                                 </div>
@@ -638,11 +638,11 @@
                                     <strong class="o_kanban_record_title"><t t-esc="record.message.value"/></strong>
                                 </div>
                                 <div class="row mb4">
-                                    <div class="col-xs-6">
+                                    <div class="col-6">
                                         Between: <t t-esc="record.start_hour.value"/> -
                                         <t t-esc="record.end_hour.value"/>
                                     </div>
-                                    <div class="col-xs-6">
+                                    <div class="col-6">
                                         <span class="badge pull-right">
                                             <t t-esc="record.alert_type.value"/>
                                         </span>
diff --git a/addons/mail/views/res_config_settings_views.xml b/addons/mail/views/res_config_settings_views.xml
index 3abf7d09438..157f6264812 100644
--- a/addons/mail/views/res_config_settings_views.xml
+++ b/addons/mail/views/res_config_settings_views.xml
@@ -9,7 +9,7 @@
                 <div id="emails" position='replace'>
                     <h2>Discuss</h2>
                     <div class="row mt16 o_settings_container" id="emails">
-                        <div class="col-xs-12 col-md-6 o_setting_box">
+                        <div class="col-12 col-lg-6 o_setting_box">
                             <div class="o_setting_left_pane"/>
                             <div class="o_setting_right_pane">
                                 <span class="o_form_label">Activities</span>
@@ -23,7 +23,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="col-xs-12 col-md-6 o_setting_box" title="Using your own email server is required to send/receive emails in Community and Enterprise versions. Online users already benefit from a ready-to-use email server (@mycompany.odoo.com).">
+                        <div class="col-12 col-lg-6 o_setting_box" title="Using your own email server is required to send/receive emails in Community and Enterprise versions. Online users already benefit from a ready-to-use email server (@mycompany.odoo.com).">
                             <div class="o_setting_left_pane">
                                 <field name="external_email_server_default"/>
                             </div>
@@ -34,7 +34,7 @@
                                 </div>
                                 <div class="content-group"  attrs="{'invisible': [('external_email_server_default', '=', False)]}">
                                     <div class="row mt16" id="mail_alias_domain">
-                                        <label for="alias_domain" class="col-md-3 o_light_label"/>
+                                        <label for="alias_domain" class="col-lg-3 o_light_label"/>
                                         <field name="alias_domain" placeholder="mycompany.odoo.com"/>
                                     </div>
                                 </div>
diff --git a/addons/maintenance/views/maintenance_views.xml b/addons/maintenance/views/maintenance_views.xml
index 7c4d3a00995..9a3319daf2a 100644
--- a/addons/maintenance/views/maintenance_views.xml
+++ b/addons/maintenance/views/maintenance_views.xml
@@ -657,12 +657,12 @@
                                 <img t-att-src="kanban_image('res.users', 'image_small', record.technician_user_id.raw_value)" t-att-title="record.technician_user_id.value" t-att-alt="record.technician_user_id.value" width="24" height="24" class="oe_kanban_avatar pull-right"/>
                             </div>
                             <div class="row mt4">
-                                <div class="col-xs-6">
+                                <div class="col-6">
                                     <span class="badge">
                                         <strong>Equipments:</strong> <field name="equipment_count"/>
                                     </span>
                                 </div>
-                                <div class="col-xs-6 text-right">
+                                <div class="col-6 text-right">
                                     <span class="badge">
                                         <strong>Maintenance:</strong> <field name="maintenance_count"/>
                                     </span>
@@ -830,43 +830,43 @@
                             </div>
                             <div class="container o_kanban_card_content">
                                 <div class="row">
-                                    <div class="col-xs-6 o_kanban_primary_left">
+                                    <div class="col-6 o_kanban_primary_left">
                                         <button class="btn btn-primary" name="%(hr_equipment_todo_request_action_from_dashboard)d" type="action" context="{'search_default_todo': 1}">
                                             <t t-esc="record.todo_request_count.value"/> To Do
                                         </button>
                                     </div>
-                                    <div class="col-xs-6 o_kanban_primary_right">
+                                    <div class="col-6 o_kanban_primary_right">
                                         <div class="row">
-                                            <div class="col-xs-9">
+                                            <div class="col-9">
                                                 <a name="%(hr_equipment_request_action_cal)d" type="action">
                                                     Scheduled
                                                 </a>
                                             </div>
-                                            <div class="col-xs-3">
+                                            <div class="col-3">
                                                 <t t-esc="record.todo_request_count_date.value"/>
                                             </div>
-                                            <div class="col-xs-9">
+                                            <div class="col-9">
                                                 <a name="%(hr_equipment_todo_request_action_from_dashboard)d" type="action" context="{'search_default_top_priority': 1}">
                                                     Top Priorities
                                                 </a>
                                             </div>
-                                            <div class="col-xs-3">
+                                            <div class="col-3">
                                                 <t t-esc="record.todo_request_count_high_priority.value"/>
                                             </div>
-                                            <div class="col-xs-9">
+                                            <div class="col-9">
                                                 <a name="%(hr_equipment_todo_request_action_from_dashboard)d" type="action" context="{'search_default_kanban_state_block': 1}">
                                                     Blocked
                                                 </a>
                                             </div>
-                                            <div class="col-xs-3">
+                                            <div class="col-3">
                                                 <t t-esc="record.todo_request_count_block.value"/>
                                             </div>
-                                            <div class="col-xs-9">
+                                            <div class="col-9">
                                                 <a name="%(hr_equipment_todo_request_action_from_dashboard)d" type="action" context="{'search_default_unscheduled': 1}">
                                                     Unscheduled
                                                 </a>
                                             </div>
-                                            <div class="col-xs-3">
+                                            <div class="col-3">
                                                 <t t-esc="record.todo_request_count_unscheduled.value"/>
                                             </div>
                                         </div>
@@ -874,7 +874,7 @@
                                 </div>
                             </div><div class="container o_kanban_card_manage_pane dropdown-menu" role="menu">
                                 <div class="row">
-                                    <div class="col-xs-6 o_kanban_card_manage_section o_kanban_manage_view">
+                                    <div class="col-6 o_kanban_card_manage_section o_kanban_manage_view">
                                         <div role="menuitem" class="o_kanban_card_manage_title">
                                             <span>View</span>
                                         </div>
@@ -899,7 +899,7 @@
                                             </a>
                                         </div>
                                     </div>
-                                    <div class="col-xs-6 o_kanban_card_manage_section o_kanban_manage_new">
+                                    <div class="col-6 o_kanban_card_manage_section o_kanban_manage_new">
                                         <div role="menuitem" class="o_kanban_card_manage_title">
                                             <span>Reporting</span>
                                         </div>
@@ -911,10 +911,10 @@
                                     </div>
                                 </div>
                                 <div t-if="widget.editable" class="o_kanban_card_manage_settings row">
-                                    <div class="col-xs-8" role="menuitem" aria-haspopup="true">
+                                    <div class="col-8" role="menuitem" aria-haspopup="true">
                                         <ul role="menu" class="oe_kanban_colorpicker" data-field="color"/>
                                     </div>
-                                    <div role="menuitem" class="col-xs-4 text-right">
+                                    <div role="menuitem" class="col-4 text-right">
                                         <a type="edit">Settings</a>
                                     </div>
                                 </div>
diff --git a/addons/mass_mailing/static/description/index.html b/addons/mass_mailing/static/description/index.html
index f47619a35cb..e7151cbcae7 100644
--- a/addons/mass_mailing/static/description/index.html
+++ b/addons/mass_mailing/static/description/index.html
@@ -61,12 +61,12 @@
     <div class="oe_row oe_spaced">
         <h2 class="oe_slogan" style="color:#875A7B;">Reach your target on any device</h2>
         <h3 class="oe_slogan">Fully responsive, 100% mobile friendly</h3>
-        <div class="col-md-7">
+        <div class="col-lg-7">
             <p class="oe_mt32 text-justify">
             Be sure that your email newsletter is optimally displayed on every screen - whether it is a tablet, a mobile phone, laptop or desktop computer. Our dynamic content will adapt automatically to your subscriber&apos;s screen by adjusting spacing and optimizing images, offering the best reading comfort.
             </p>
         </div>
-        <div class="col-md-4 col-md-offset-1">
+        <div class="col-lg-4 offset-lg-1">
             <img class="oe_picture" src="mass_mailing_sc_03.png">
         </div>
    </div>
diff --git a/addons/mass_mailing/views/mass_mailing_views.xml b/addons/mass_mailing/views/mass_mailing_views.xml
index c94d197d7c8..052ceff552c 100644
--- a/addons/mass_mailing/views/mass_mailing_views.xml
+++ b/addons/mass_mailing/views/mass_mailing_views.xml
@@ -585,31 +585,31 @@
                                     <div class="o_kanban_record_body" attrs="{'invisible': [('sent_date', '=', False)]}">
                                         <t t-if="record.sent_date">
                                             <div class="row">
-                                                <div class="col-xs-8">
+                                                <div class="col-8">
                                                     <a name="%(action_view_mail_mail_statistics_mailing)d"
                                                        context="{'search_default_filter_opened': True}"
                                                        type="action">Opened</a>
                                                 </div>
-                                                <div class="col-xs-4 text-right">
+                                                <div class="col-4 text-right">
                                                     <field name="opened_ratio"/> %
                                                 </div>
                                             </div>
                                             <div class="row">
-                                                <div class="col-xs-8">
+                                                <div class="col-8">
                                                     <a name="%(action_view_mail_mail_statistics_mailing)d"
                                                        context="{'search_default_filter_replied': True}"
                                                        type="action">Replied</a>
                                                 </div>
-                                                <div class="col-xs-4 text-right">
+                                                <div class="col-4 text-right">
                                                     <field name="replied_ratio"/> %
                                                 </div>
                                             </div>
                                             <div class="row">
-                                                <div class="col-xs-8">
+                                                <div class="col-8">
                                                     <a name="%(action_view_mass_mailing_links_statistics)d"
                                                        type="action">Clicks</a>
                                                 </div>
-                                                <div class="col-xs-4 text-right">
+                                                <div class="col-4 text-right">
                                                     <field name="clicks_ratio"/> %
                                                 </div>
                                             </div>
diff --git a/addons/mass_mailing/views/res_config_settings_views.xml b/addons/mass_mailing/views/res_config_settings_views.xml
index a828ae2a734..04aa2faae3b 100644
--- a/addons/mass_mailing/views/res_config_settings_views.xml
+++ b/addons/mass_mailing/views/res_config_settings_views.xml
@@ -10,7 +10,7 @@
                     <div class="app_settings_block" data-string="Email Marketing" string="Email Marketing" data-key="mass_mailing" groups="mass_mailing.group_mass_mailing_user">
                       <h2>Email Marketing</h2>
                         <div class="row mt16 o_settings_container">
-                            <div class="col-md-6 o_setting_box col-xs-12" title="This tool is advised if your marketing campaign is composed of several emails.">
+                            <div class="col-lg-6 o_setting_box col-12" title="This tool is advised if your marketing campaign is composed of several emails.">
                                 <div class="o_setting_left_pane" title="This is useful if your marketing campaigns are composed of several emails.">
                                     <field name="group_mass_mailing_campaign"/>
                                 </div>
@@ -28,7 +28,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-md-6 o_setting_box col-xs-12">
+                            <div class="col-lg-6 o_setting_box col-12">
                                 <div class="o_setting_left_pane" title="Use a specific mail server in priority. Otherwise Odoo relies on the first outgoing mail server available (based on their sequencing) as it does for normal mails.">
                                     <field name="mass_mailing_outgoing_mail_server"/>
                                 </div>
diff --git a/addons/mrp/report/mrp_production_templates.xml b/addons/mrp/report/mrp_production_templates.xml
index 9330a224f49..59054f5bb91 100644
--- a/addons/mrp/report/mrp_production_templates.xml
+++ b/addons/mrp/report/mrp_production_templates.xml
@@ -7,20 +7,20 @@
                 <div class="page">
                     <div class="oe_structure"/>
                     <div class="row">
-                        <div class="col-xs-12">
+                        <div class="col-12">
                             <h2><span t-field="o.name"/></h2>
                         </div>
                     </div>
                     <div class="row mt32 mb32">
-                        <div class="col-xs-3" t-if="o.origin">
+                        <div class="col-3" t-if="o.origin">
                             <strong>Source Document:</strong><br/>
                             <span t-field="o.origin"/>
                         </div>
-                        <div class="col-xs-3">
+                        <div class="col-3">
                             <strong>Responsible:</strong><br/>
                             <span t-field="o.user_id"/>
                         </div>
-                        <div class="col-xs-3">
+                        <div class="col-3">
                             <strong>Scheduled Date:</strong><br/>
                             <span t-field="o.date_planned_start"/>
                             <span t-if="o.date_planned_finished"> - <span t-field="o.date_planned_finished"/></span>
@@ -28,16 +28,16 @@
                     </div>
 
                     <div class="row mt32 mb32">
-                        <div class="col-xs-3">
+                        <div class="col-3">
                             <strong>Finished Product:</strong><br/>
                             <span t-field="o.product_id"/>
                         </div>
-                        <div class="col-xs-3">
+                        <div class="col-3">
                             <strong>Quantity to Produce:</strong><br/>
                             <span t-field="o.product_qty"/>
                             <span t-field="o.product_uom_id.name" groups="product.group_uom"/>
                         </div>
-                        <div class="col-xs-3">
+                        <div class="col-3">
                             <strong>Printing date:</strong><br/>
                             <span t-esc="time.strftime('%Y-%m-%d')"
                                   t-options='{"widget": "date"}'/>
diff --git a/addons/mrp/report/mrp_report_bom_structure.xml b/addons/mrp/report/mrp_report_bom_structure.xml
index 6ccb00c937a..8cdb1a8940e 100644
--- a/addons/mrp/report/mrp_report_bom_structure.xml
+++ b/addons/mrp/report/mrp_report_bom_structure.xml
@@ -5,7 +5,7 @@
         <div class="container o_mrp_bom_report_page">
             <t t-if="data.get('components') or data.get('lines')">
                 <div class="row">
-                    <div class="col-md-12">
+                    <div class="col-lg-12">
                         <h1>BoM Structure &amp; Cost</h1>
                         <h3>
                             <a t-if="data['report_type'] == 'html'" t-att-data-res-id="data['product'].id" t-att-data-model="data['product']._name" class="o_mrp_bom_action">
@@ -18,7 +18,7 @@
                 </div>
                 <t t-set="currency" t-value="data['currency']"/>
                 <div class="row">
-                    <div class="col-md-12">
+                    <div class="col-lg-12">
                         <div class="mt16">
                             <table width="100%" class="o_mrp_bom_expandable">
                                 <thead>
diff --git a/addons/mrp/static/src/xml/mrp.xml b/addons/mrp/static/src/xml/mrp.xml
index e3c94ee0945..f360b360526 100644
--- a/addons/mrp/static/src/xml/mrp.xml
+++ b/addons/mrp/static/src/xml/mrp.xml
@@ -6,18 +6,18 @@
     </t>
 
     <form class="form-inline" t-name="mrp.report_bom_search">
-        <div class="form-group col-md-4">
+        <div class="form-group col-lg-4">
             <label>Quantity:</label>
             <div class="row">
-                <div class="col-md-6">
+                <div class="col-lg-6">
                     <input type="number" t-att-value="bom_qty" min="1" class="o_input o_mrp_bom_report_qty"/>
                 </div>
-                <div class="col-md-6">
+                <div class="col-lg-6">
                     <t t-if="is_uom_applied" t-esc="bom_uom_name"/>
                 </div>
             </div>
         </div>
-        <div t-if="is_variant_applied" class="form-group col-md-4">
+        <div t-if="is_variant_applied" class="form-group col-lg-4">
             <label>Variant:</label>
             <select class="o_input o_mrp_bom_report_variants">
                 <option t-foreach="variants" t-as="variant" t-att-value="variant">
@@ -25,7 +25,7 @@
                 </option>
             </select>
         </div>
-        <div class="form-group col-md-4">
+        <div class="form-group col-lg-4">
             <label>Report:</label>
             <select class="o_input o_mrp_bom_report_type">
                 <option t-att-data-type="'all'">BoM Structure &amp; Cost</option>
diff --git a/addons/mrp/views/ir_attachment_view.xml b/addons/mrp/views/ir_attachment_view.xml
index a478dbf6062..7d2369b8d26 100644
--- a/addons/mrp/views/ir_attachment_view.xml
+++ b/addons/mrp/views/ir_attachment_view.xml
@@ -18,7 +18,7 @@
                             <div class="oe_kanban_vignette">
                                 <div class="oe_attachment">
                                     <div class="row">
-                                        <div class="col-xs-4 o_kanban_primary_left" t-if="record.type.raw_value == 'binary'">
+                                        <div class="col-4 o_kanban_primary_left" t-if="record.type.raw_value == 'binary'">
                                             <a t-attf-href="/web/content/#{record.ir_attachment_id.raw_value}?download=1">
                                                 <t t-set="webimage" t-value="new RegExp('image.*(gif|jpeg|jpg|png)').test(record.mimetype.value)"/>
                                                 <div t-if="!webimage" class="o_image" t-att-data-mimetype="record.mimetype.value"/>
@@ -27,7 +27,7 @@
                                                 </div>
                                             </a>
                                         </div>
-                                        <div class="col-xs-8">
+                                        <div class="col-8">
                                             <strong><field name="name"/></strong><br/>
                                             <field name="datas_fname"/><br/>
                                             <div class="mt8">
diff --git a/addons/mrp/views/mrp_unbuild_views.xml b/addons/mrp/views/mrp_unbuild_views.xml
index 222ae59dfe0..6224809a45e 100644
--- a/addons/mrp/views/mrp_unbuild_views.xml
+++ b/addons/mrp/views/mrp_unbuild_views.xml
@@ -78,10 +78,10 @@
                                     <strong><t t-esc="record.product_qty.value"/> <small><t t-esc="record.product_uom_id.value"/></small></strong>
                                 </div>
                                 <div class="row">
-                                    <div class="col-xs-8 text-muted">
+                                    <div class="col-8 text-muted">
                                         <span><t t-esc="record.product_id.value"/></span>
                                     </div>
-                                    <div class="col-xs-4">
+                                    <div class="col-4">
                                         <span class="pull-right text-right">
                                             <field name="state" widget="kanban_label_selection" options="{'classes': {'draft': 'default', 'done': 'success'}}"/>
                                         </span>
diff --git a/addons/mrp/views/mrp_workcenter_views.xml b/addons/mrp/views/mrp_workcenter_views.xml
index 12ba2d6376b..d2eb6ff081d 100644
--- a/addons/mrp/views/mrp_workcenter_views.xml
+++ b/addons/mrp/views/mrp_workcenter_views.xml
@@ -54,10 +54,10 @@
                         <t t-name="kanban-box">
                             <div t-attf-class="oe_kanban_content oe_kanban_global_click">
                                 <div class="row">
-                                    <div class="col-xs-12">
+                                    <div class="col-12">
                                         <strong><field name="name"/></strong>
                                     </div>
-                                    <div class="col-xs-12">
+                                    <div class="col-12">
                                         <span>Code <field name="code"/></span>
                                     </div>
                                 </div>
@@ -168,7 +168,7 @@
                                 </div>
                                 <div class="container o_kanban_card_content">
                                     <div class="row">
-                                        <div class="col-xs-6 o_kanban_primary_left">
+                                        <div class="col-6 o_kanban_primary_left">
                                             <div class="btn-group" name="o_wo">
                                             <t t-if="record.workorder_count.raw_value &gt; 0">
                                                 <button class="btn btn-primary" name="%(action_work_orders)d" type="action" context="{'search_default_ready': 1, 'search_default_progress': 1, 'search_default_pending': 1}">
@@ -182,44 +182,44 @@
                                             </t>
                                             </div>
                                         </div>
-                                        <div class="col-xs-6 o_kanban_primary_right">
+                                        <div class="col-6 o_kanban_primary_right">
                                             <div class="row" t-if="record.workorder_ready_count.raw_value &gt; 0">
-                                                <div class="col-xs-8">
+                                                <div class="col-8">
                                                     <a name="%(action_work_orders)d" type="action" context="{'search_default_ready': 1}">
                                                         To Launch
                                                     </a>
                                                 </div>
-                                                <div class="col-xs-4 text-right">
+                                                <div class="col-4 text-right">
                                                     <field name="workorder_ready_count"/>
                                                 </div>
                                             </div>
                                             <div class="row" t-if="record.workorder_progress_count.raw_value &gt; 0">
-                                                <div class="col-xs-8">
+                                                <div class="col-8">
                                                     <a name="%(action_work_orders)d" type="action" context="{'search_default_progress': 1}">
                                                         In Progress
                                                     </a>
                                                 </div>
-                                                <div class="col-xs-4 text-right">
+                                                <div class="col-4 text-right">
                                                     <field name="workorder_progress_count"/>
                                                 </div>
                                             </div>
                                             <div class="row" t-if="record.workorder_late_count.raw_value &gt; 0">
-                                                <div class="col-xs-8">
+                                                <div class="col-8">
                                                     <a name="%(action_work_orders)d" type="action" context="{'search_default_late': 1}">
                                                         Late
                                                     </a>
                                                 </div>
-                                                <div class="col-xs-4 text-right">
+                                                <div class="col-4 text-right">
                                                     <field name="workorder_late_count"/>
                                                 </div>
                                             </div>
                                             <div class="row" t-if="record.oee.raw_value &gt; 0">
-                                                <div class="col-xs-6">
+                                                <div class="col-6">
                                                     <a name="%(mrp_workcenter_productivity_report_oee)d" type="action">
                                                         OEE
                                                     </a>
                                                 </div>
-                                                <div class="col-xs-6 text-right">
+                                                <div class="col-6 text-right">
                                                     <span t-att-class="record.oee_target.raw_value and (record.oee.raw_value &lt; record.oee_target.raw_value) and 'text-danger' or (record.oee.raw_value &gt; record.oee_target.raw_value) and 'text-success' or 'text-warning'">
                                                         <strong>
                                                             <field name="oee"/>%
@@ -230,7 +230,7 @@
                                         </div>
                                     </div>
                                     <div class="row">
-                                        <div class="col-xs-12 o_kanban_primary_left" style="position:absolute; bottom:10px;" name="wc_stages">
+                                        <div class="col-12 o_kanban_primary_left" style="position:absolute; bottom:10px;" name="wc_stages">
                                             <a name="%(act_mrp_block_workcenter)d" type="action" class="o_status pull-right"
                                                 title="No workorder currently in progress. Click to mark work center as blocked."
                                                 aria-label="No workorder currently in progress. Click to mark work center as blocked."
@@ -247,7 +247,7 @@
                                     </div>
                                 </div><div class="container o_kanban_card_manage_pane dropdown-menu" role="menu">
                                     <div class="row">
-                                        <div class="col-xs-6 o_kanban_card_manage_section o_kanban_manage_view">
+                                        <div class="col-6 o_kanban_card_manage_section o_kanban_manage_view">
                                             <div role="menuitem" class="o_kanban_card_manage_title">
                                                 <span>Actions</span>
                                             </div>
@@ -255,7 +255,7 @@
                                                 <a name="%(action_work_orders)d" type="action">Plan Orders</a>
                                             </div>
                                         </div>
-                                        <div class="col-xs-6 o_kanban_card_manage_section o_kanban_manage_new">
+                                        <div class="col-6 o_kanban_card_manage_section o_kanban_manage_new">
                                             <div role="menuitem" class="o_kanban_card_manage_title">
                                                 <span>Reporting</span>
                                             </div>
@@ -274,10 +274,10 @@
                                     </div>
 
                                     <div t-if="widget.editable" class="o_kanban_card_manage_settings row">
-                                        <div role="menuitem" aria-haspopup="true" class="col-xs-8">
+                                        <div role="menuitem" aria-haspopup="true" class="col-8">
                                             <ul role="menu" class="oe_kanban_colorpicker" data-field="color"/>
                                         </div>
-                                        <div role="menuitem" class="col-xs-4 text-right">
+                                        <div role="menuitem" class="col-4 text-right">
                                             <a type="edit">Settings</a>
                                         </div>
                                     </div>
diff --git a/addons/mrp/views/res_config_settings_views.xml b/addons/mrp/views/res_config_settings_views.xml
index eb65b96220e..e15bdec5e8e 100644
--- a/addons/mrp/views/res_config_settings_views.xml
+++ b/addons/mrp/views/res_config_settings_views.xml
@@ -11,7 +11,7 @@
                     <div class="app_settings_block" data-string="Manufacturing" string="Manufacturing" data-key="mrp" groups="mrp.group_mrp_manager">
                         <h2>Operations</h2>
                         <div class="row mt16 o_settings_container">
-                            <div class="col-md-6 col-xs-12 o_setting_box" id="work_order" title="Work Order Operations allow you to create and manage the manufacturing operations that should be followed within your work centers in order to produce a product. They are attached to bills of materials that will define the required raw materials.">
+                            <div class="col-lg-6 col-12 o_setting_box" id="work_order" title="Work Order Operations allow you to create and manage the manufacturing operations that should be followed within your work centers in order to produce a product. They are attached to bills of materials that will define the required raw materials.">
                                 <div class="o_setting_left_pane">
                                     <field name="group_mrp_routings" widget="upgrade_boolean"/>
                                     <field name="module_mrp_workorder" invisible="1"/>
@@ -33,7 +33,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-md-6 col-xs-12 o_setting_box" attrs="{'invisible': [('group_mrp_routings', '=', False)]}" id="quality_control">
+                            <div class="col-lg-6 col-12 o_setting_box" attrs="{'invisible': [('group_mrp_routings', '=', False)]}" id="quality_control">
                                 <div class="o_setting_left_pane">
                                     <field name="module_quality_control" widget="upgrade_boolean"/>
                                 </div>
@@ -47,7 +47,7 @@
                         </div>
                         <h2>Products</h2>
                         <div class="row mt16 o_settings_container">
-                            <div class="col-md-6 col-xs-12 o_setting_box" id="mrp_byproduct" title="Add by-products to bills of materials. This can be used to get several finished products as well. Without this option you only do: A + B = C. With the option: A + B = C + D.">
+                            <div class="col-lg-6 col-12 o_setting_box" id="mrp_byproduct" title="Add by-products to bills of materials. This can be used to get several finished products as well. Without this option you only do: A + B = C. With the option: A + B = C + D.">
                                 <div class="o_setting_left_pane">
                                     <field name="module_mrp_byproduct"/>
                                 </div>
@@ -61,7 +61,7 @@
                         </div>
                         <h2>Planning</h2>
                         <div class="row mt16 o_settings_container">
-                            <div class="col-md-6 col-xs-12 o_setting_box" id="mrp_mps" title="Using a MPS report to schedule your reordering and manufacturing operations is useful if you have long lead time and if you produce based on sales forecasts.">
+                            <div class="col-lg-6 col-12 o_setting_box" id="mrp_mps" title="Using a MPS report to schedule your reordering and manufacturing operations is useful if you have long lead time and if you produce based on sales forecasts.">
                                 <div class="o_setting_left_pane">
                                     <field name="module_mrp_mps" widget="upgrade_boolean"/>
                                 </div>
@@ -73,7 +73,7 @@
                                     <div class="content-group" id="content_mrp_mps"/>
                                 </div>
                             </div>
-                            <div class="col-md-6 col-xs-12 o_setting_box" id="security_lead_time">
+                            <div class="col-lg-6 col-12 o_setting_box" id="security_lead_time">
                                 <div class="o_setting_left_pane">
                                     <field name="use_manufacturing_lead"/>
                                 </div>
diff --git a/addons/mrp/views/stock_picking_views.xml b/addons/mrp/views/stock_picking_views.xml
index 800545b2037..d9c6363f02e 100644
--- a/addons/mrp/views/stock_picking_views.xml
+++ b/addons/mrp/views/stock_picking_views.xml
@@ -27,29 +27,29 @@
                         </div>
                         <div class="container o_kanban_card_content">
                             <div class="row">
-                                <div class="col-xs-6 o_kanban_primary_left">
+                                <div class="col-6 o_kanban_primary_left">
                                     <button class="btn btn-primary" name="%(mrp_production_action_picking_deshboard)d" type="action" context="{'search_default_todo': 1}">
                                         <span t-if="record.code.raw_value =='mrp_operation'"><t t-esc="record.count_mo_todo.value"/> To Do</span>
                                     </button>
                                 </div>
-                                <div class="col-xs-6 o_kanban_primary_right">
+                                <div class="col-6 o_kanban_primary_right">
                                     <div t-if="record.count_mo_waiting.raw_value > 0" class="row">
-                                        <div class="col-xs-9">
+                                        <div class="col-9">
                                             <a name="%(mrp_production_action_picking_deshboard)d" type="action" context="{'search_default_waiting': 1}">
                                                 Waiting
                                             </a>
                                         </div>
-                                        <div class="col-xs-3">
+                                        <div class="col-3">
                                             <field name="count_mo_waiting"/>
                                         </div>
                                     </div>
                                     <div t-if="record.count_mo_late.raw_value > 0" class="row">
-                                        <div class="col-xs-9">
+                                        <div class="col-9">
                                             <a class="oe_kanban_stock_picking_type_list" name="%(mrp_production_action_picking_deshboard)d" type="action" context="{'search_default_late': 1}">
                                                 Late
                                             </a>
                                         </div>
-                                        <div class="col-xs-3">
+                                        <div class="col-3">
                                             <field name="count_mo_late"/>
                                         </div>
                                     </div>
@@ -57,7 +57,7 @@
                             </div>
                         </div><div class="container o_kanban_card_manage_pane dropdown-menu" role="menu">
                             <div class="row">
-                                <div class="col-xs-6 o_kanban_card_manage_section o_kanban_manage_view" name="picking_left_manage_pane">
+                                <div class="col-6 o_kanban_card_manage_section o_kanban_manage_view" name="picking_left_manage_pane">
                                     <div role="menuitem" class="o_kanban_card_manage_title">
                                         <span>View</span>
                                     </div>
@@ -71,7 +71,7 @@
                                         <a name="%(mrp_production_action_picking_deshboard)d" type="action" context="{'search_default_planned': 1}">Planned</a>
                                     </div>
                                 </div>
-                                <div class="col-xs-6 o_kanban_card_manage_section o_kanban_manage_new">
+                                <div class="col-6 o_kanban_card_manage_section o_kanban_manage_new">
                                     <div role="menuitem" class="o_kanban_card_manage_title">
                                         <span>New</span>
                                     </div>
@@ -82,10 +82,10 @@
                             </div>
 
                             <div t-if="widget.editable" class="o_kanban_card_manage_settings row">
-                                <div role="menuitem" aria-haspopup="true" class="col-xs-8">
+                                <div role="menuitem" aria-haspopup="true" class="col-8">
                                     <ul role="menu" class="oe_kanban_colorpicker" data-field="color"/>
                                 </div>
-                                <div role="menuitem" class="col-xs-4 text-right">
+                                <div role="menuitem" class="col-4 text-right">
                                     <a type="edit">Settings</a>
                                 </div>
                             </div>
diff --git a/addons/pad/views/res_config_settings_views.xml b/addons/pad/views/res_config_settings_views.xml
index 4d0744d9d73..3c413df5da9 100644
--- a/addons/pad/views/res_config_settings_views.xml
+++ b/addons/pad/views/res_config_settings_views.xml
@@ -8,9 +8,9 @@
             <div id="msg_module_pad" position="replace">      
                 <div class="content-group" attrs="{'invisible': [('module_pad','=',False)]}">     
                     <div class="mt16 row">        
-                        <label for="pad_server" string="Server" class="col-xs-3 col-md-3 o_light_label"/>     
+                        <label for="pad_server" string="Server" class="col-3 col-lg-3 o_light_label"/>     
                         <field name="pad_server" placeholder="e.g. beta.primarypad.com"/>     
-                        <label for="pad_key" string="API Key" class="col-xs-3 col-md-3 o_light_label"/>       
+                        <label for="pad_key" string="API Key" class="col-3 col-lg-3 o_light_label"/>       
                         <field name="pad_key"/>       
                     </div>        
                 </div>        
diff --git a/addons/pad_project/views/res_config_settings_views.xml b/addons/pad_project/views/res_config_settings_views.xml
index 469f203e650..3efc7af4687 100644
--- a/addons/pad_project/views/res_config_settings_views.xml
+++ b/addons/pad_project/views/res_config_settings_views.xml
@@ -9,11 +9,11 @@
                 <div class="content-group">
                     <field name='company_id' invisible="1"/>
                     <div class="row mt16">
-                        <label for="pad_server" class="col-md-3 o_light_label"/>
+                        <label for="pad_server" class="col-lg-3 o_light_label"/>
                         <field name="pad_server"/>
                     </div>
                     <div class="row">
-                        <label for="pad_key" class="col-md-3 o_light_label"/>
+                        <label for="pad_key" class="col-lg-3 o_light_label"/>
                         <field name="pad_key"/>
                     </div>
                 </div>
diff --git a/addons/payment/views/payment_acquirer_onboarding_templates.xml b/addons/payment/views/payment_acquirer_onboarding_templates.xml
index f2d0274a11c..011344f6c30 100644
--- a/addons/payment/views/payment_acquirer_onboarding_templates.xml
+++ b/addons/payment/views/payment_acquirer_onboarding_templates.xml
@@ -33,7 +33,7 @@
                     </a>
                 </div>
                 <div class="row">
-                    <div class="col-xs-1 mb16">
+                    <div class="col-1 mb16">
                         <field name="paypal_checked" nolabel="1" />
                     </div>
                     <div>
@@ -42,7 +42,7 @@
                 </div>
                 <div class="row">
                     <div attrs="{'invisible': [('paypal_checked', '=', False)]}"
-                         class="col-xs-offset-1">
+                         class="offset-1">
                         <a href="https://www.paypal.com" target="_blank">PayPal</a>
                         is the easiest way to accept payments. It's easy to configure and it offers
                         <a href="https://www.paypal.com/us/webapps/mpp/merchant-fees"
@@ -60,7 +60,7 @@
                     </div>
                 </div>
                 <div class="row">
-                    <div class="col-xs-1 mb16">
+                    <div class="col-1 mb16">
                         <field name="stripe_checked" nolabel="1" />
                     </div>
                     <div>
@@ -69,7 +69,7 @@
                 </div>
                 <div class="row">
                     <div attrs="{'invisible': [('stripe_checked', '=', False)]}"
-                         class="col-xs-offset-1">
+                         class="offset-1">
                         <a href="https://stripe.com" target="_blank">Stripe</a>
                         is a payment provider with
                         <a href="https://stripe.com/pricing" target="_blank">
@@ -90,7 +90,7 @@
                     </div>
                 </div>
                 <div class="row">
-                    <div class="col-xs-1">
+                    <div class="col-1">
                         <field name="manual_checked" nolabel="1" />
                     </div>
                     <div>
@@ -99,7 +99,7 @@
                 </div>
                 <div class="row">
                     <div attrs="{'invisible': [('manual_checked', '=', False)]}"
-                         class="col-xs-offset-1">
+                         class="offset-1">
                         Provide customers with instructions to pay outside of your platform (wire
                         transfer, cash on delivery, etc.).
                         <group>
diff --git a/addons/payment/views/payment_portal_templates.xml b/addons/payment/views/payment_portal_templates.xml
index 0f8cac52909..10071958909 100644
--- a/addons/payment/views/payment_portal_templates.xml
+++ b/addons/payment/views/payment_portal_templates.xml
@@ -7,7 +7,7 @@
             <div class="wrap">
                 <div class="container">
                   <div class="row">
-                        <div class="col-sm-6">
+                        <div class="col-md-6">
                             <ol class="breadcrumb mt8">
                                 <li class="breadcrumb-item"><a href="/my/home"><i class="fa fa-home" role="img" aria-label="Home" title="Home"/></a></li>
                                 <li class="breadcrumb-item">Payment Methods</li>
@@ -16,7 +16,7 @@
                     </div>
                     <div class="clearfix">
                         <div class="row">
-                            <div class="col-sm-8">
+                            <div class="col-md-8">
                                 <h3>Manage your Payment Methods</h3>
                                 <t t-call="payment.payment_tokens_list">
                                     <t t-set="s2s_acquirers" t-value="acquirers"/>
@@ -46,11 +46,11 @@
             <div class="wrap">
                 <div class="container o_website_payment">
                     <h1>Payment</h1>
-                    <div t-if="error_msg" class="alert alert-danger col-md-7" role="alert">
+                    <div t-if="error_msg" class="alert alert-danger" role="alert">
                         <t t-esc="error_msg"/>
                     </div>
                     <div class="row mt32 mb32">
-                        <div class="col-md-7">
+                        <div class="col-lg-7">
                             <p><b>Reference:</b> <t t-esc="reference"/></p>
                             <p><b>Amount:</b> <t t-esc="amount" t-options="{'widget': 'monetary', 'display_currency': currency}"/></p>
                             <t t-call="payment.payment_tokens_list" t-if="reference and amount and currency">
@@ -76,31 +76,31 @@
                 <div class="container o_website_payment">
                     <h1>Payment</h1>
                     <div class="row">
-                        <div class="col-md-6">
+                        <div class="col-lg-6">
                             <div class="form-horizontal">
                                 <div t-attf-class="alert alert-#{status}" t-raw="message" role="status"/>
                                 <div class="form-group">
-                                    <label for="form_partner_name" class="col-sm-3 control-label">From</label>
-                                    <div class="col-sm-9">
+                                    <label for="form_partner_name" class="col-md-3 control-label">From</label>
+                                    <div class="col-md-9">
                                         <span name="form_partner_name" class="form-control" t-esc="tx.partner_name"/>
                                     </div>
                                 </div>
                                 <div class="form-group">
-                                    <label for="form_reference" class="col-sm-3 control-label">Reference</label>
-                                    <div class="col-sm-9">
+                                    <label for="form_reference" class="col-md-3 control-label">Reference</label>
+                                    <div class="col-md-9">
                                         <span name="form_reference" class="form-control" t-esc="tx.reference"/>
                                     </div>
                                 </div>
                                 <div class="form-group">
-                                    <label for="form_amount" class="col-sm-3 control-label">Amount</label>
-                                    <div class="col-sm-9">
+                                    <label for="form_amount" class="col-md-3 control-label">Amount</label>
+                                    <div class="col-md-9">
                                         <span name="form_amount" class="form-control" t-esc="tx.amount" t-options="{'widget': 'monetary', 'display_currency': tx.currency_id}"/>
                                     </div>
                                 </div>
-                                <div class="col-sm-12">
+                                <div class="col-md-12">
                                     <a role="button" t-attf-class="btn btn-#{status} pull-right" href="/my/home"><i class="fa fa-arrow-circle-right"/> Back to My Account</a>
                                 </div>
-                                <div class="col-sm-6 col-sm-offset-6 text-muted mt16">
+                                <div class="col-md-6 offset-md-6 text-muted mt16">
                                     <span t-field="tx.acquirer_id.image_small" t-att-title="tx.acquirer_id.name" role="img" t-att-aria-label="tx.acquirer_id.name" t-options='{"widget": "image", "style":"max-width: 60px; display: inline-block"}'/>
                                     <span>Processed by <t t-esc="tx.acquirer_id.name"/>.</span>
                                 </div>
diff --git a/addons/payment/views/payment_views.xml b/addons/payment/views/payment_views.xml
index a6df192a446..e0456fdb593 100644
--- a/addons/payment/views/payment_views.xml
+++ b/addons/payment/views/payment_views.xml
@@ -297,13 +297,13 @@
                         <t t-name="kanban-box">
                             <div t-attf-class="oe_kanban_content oe_kanban_global_click">
                                 <div class="row">
-                                    <div class="col-xs-6">
+                                    <div class="col-6">
                                         <strong><field name="reference"/></strong>
                                     </div>
-                                    <div class="col-xs-6">
+                                    <div class="col-6">
                                         <span><field name="partner_name"/></span>
                                     </div>
-                                    <div class="col-xs-6">
+                                    <div class="col-6">
                                         <span class="pull-right">
                                             <field name="amount" widget="monetary"/>
                                         </span>
diff --git a/addons/payment_authorize/views/payment_authorize_templates.xml b/addons/payment_authorize/views/payment_authorize_templates.xml
index c86663935c1..aea549fc0ba 100644
--- a/addons/payment_authorize/views/payment_authorize_templates.xml
+++ b/addons/payment_authorize/views/payment_authorize_templates.xml
@@ -53,19 +53,19 @@
         <template id="authorize_s2s_form">
             <input type="hidden" name="data_set" data-create-route="/payment/authorize/s2s/create_json_3ds"/>
             <div t-attf-class="mt8 #{'' if bootstrap_formatting else 'o_card_brand_detail'}">
-                <div t-att-class="'form-group col-md-12' if bootstrap_formatting else 'form-group'">
+                <div t-att-class="'form-group col-lg-12' if bootstrap_formatting else 'form-group'">
                     <input type="tel" name="cc_number" id="cc_number" class="form-control" placeholder="Card number" data-is-required="true"/>
                     <div class="card_placeholder"></div>
                     <div class="visa"></div>
                     <input type="hidden" name="cc_brand" value=""/>
                 </div>
-                <div t-att-class="'form-group col-md-5' if bootstrap_formatting else 'form-group'">
+                <div t-att-class="'form-group col-lg-5' if bootstrap_formatting else 'form-group'">
                     <input type="text" name="cc_holder_name" id="cc_holder_name" class="form-control" placeholder="Cardholder name" data-is-required="true"/>
                 </div>
-                <div t-att-class="'form-group col-md-3' if bootstrap_formatting else 'form-group'">
+                <div t-att-class="'form-group col-lg-3' if bootstrap_formatting else 'form-group'">
                     <input type="text" name="cc_expiry" id="cc_expiry" class="form-control" maxlength="7" placeholder="Expires (MM / YY)" data-is-required="true"/>
                 </div>
-                <div t-att-class="'form-group col-md-4' if bootstrap_formatting else 'form-group'">
+                <div t-att-class="'form-group col-lg-4' if bootstrap_formatting else 'form-group'">
                     <input type="text" name="cc_cvc" id="cc_cvc" class="form-control" maxlength="4" placeholder="CVC" data-is-required="true"/>
                 </div>
             </div>
diff --git a/addons/payment_ogone/views/payment_ogone_templates.xml b/addons/payment_ogone/views/payment_ogone_templates.xml
index db25e5a9362..0df3781626a 100644
--- a/addons/payment_ogone/views/payment_ogone_templates.xml
+++ b/addons/payment_ogone/views/payment_ogone_templates.xml
@@ -41,19 +41,19 @@
             <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"/>
             <div t-attf-class="mt8 #{'' if bootstrap_formatting else 'o_card_brand_detail'}">
-                <div t-att-class="'form-group col-md-12' if bootstrap_formatting else 'form-group'">
+                <div t-att-class="'form-group col-lg-12' if bootstrap_formatting else 'form-group'">
                     <input type="tel" name="cc_number" id="cc_number" class="form-control" placeholder="Card number" data-is-required="true"/>
                     <div class="card_placeholder"></div>
                     <div class="visa"></div>
                     <input type="hidden" name="cc_brand" value=""/>
                 </div>
-                <div t-att-class="'form-group col-md-5' if bootstrap_formatting else 'form-group'">
+                <div t-att-class="'form-group col-lg-5' if bootstrap_formatting else 'form-group'">
                     <input type="text" name="cc_holder_name" id="cc_holder_name" class="form-control" placeholder="Cardholder name" data-is-required="true"/>
                 </div>
-                <div t-att-class="'form-group col-md-3' if bootstrap_formatting else 'form-group'">
+                <div t-att-class="'form-group col-lg-3' if bootstrap_formatting else 'form-group'">
                     <input type="text" name="cc_expiry" id="cc_expiry" class="form-control" maxlength="7" placeholder="Expires (MM / YY)" data-is-required="true"/>
                 </div>
-                <div t-att-class="'form-group col-md-4' if bootstrap_formatting else 'form-group'">
+                <div t-att-class="'form-group col-lg-4' if bootstrap_formatting else 'form-group'">
                     <input type="text" name="cc_cvc" id="cc_cvc" class="form-control" maxlength="4" placeholder="CVC" data-is-required="true"/>
                 </div>
             </div>
diff --git a/addons/payment_stripe/views/payment_stripe_templates.xml b/addons/payment_stripe/views/payment_stripe_templates.xml
index 041d99af67b..80844389184 100644
--- a/addons/payment_stripe/views/payment_stripe_templates.xml
+++ b/addons/payment_stripe/views/payment_stripe_templates.xml
@@ -27,19 +27,19 @@
         <template id="stripe_s2s_form">
             <input type="hidden" name="data_set" data-create-route="/payment/stripe/s2s/create_json_3ds"/>
             <div t-attf-class="mt8 #{'' if bootstrap_formatting else 'o_card_brand_detail'}">
-                <div t-att-class="'form-group col-md-12' if bootstrap_formatting else 'form-group'">
+                <div t-att-class="'form-group col-lg-12' if bootstrap_formatting else 'form-group'">
                     <input type="tel" name="cc_number" id="cc_number" class="form-control" placeholder="Card number" data-is-required="true"/>
                     <div class="card_placeholder"></div>
                     <div class="visa"></div>
                     <input type="hidden" name="cc_brand" value=""/>
                 </div>
-                <div t-att-class="'form-group col-md-5' if bootstrap_formatting else 'form-group'">
+                <div t-att-class="'form-group col-lg-5' if bootstrap_formatting else 'form-group'">
                     <input type="text" name="cc_holder_name" id="cc_holder_name" class="form-control" placeholder="Cardholder name" data-is-required="true"/>
                 </div>
-                <div t-att-class="'form-group col-md-3' if bootstrap_formatting else 'form-group'">
+                <div t-att-class="'form-group col-lg-3' if bootstrap_formatting else 'form-group'">
                     <input type="text" name="cc_expiry" id="cc_expiry" class="form-control" maxlength="7" placeholder="Expires (MM / YY)" data-is-required="true"/>
                 </div>
-                <div t-att-class="'form-group col-md-4' if bootstrap_formatting else 'form-group'">
+                <div t-att-class="'form-group col-lg-4' if bootstrap_formatting else 'form-group'">
                     <input type="text" name="cvc" id="cvc" class="form-control" maxlength="4" placeholder="CVC" data-is-required="true"/>
                 </div>
                 <input type="hidden" name="acquirer_id" t-att-value="id"/>
diff --git a/addons/point_of_sale/views/point_of_sale_dashboard.xml b/addons/point_of_sale/views/point_of_sale_dashboard.xml
index ec80fe84365..fb27f0d6d12 100644
--- a/addons/point_of_sale/views/point_of_sale_dashboard.xml
+++ b/addons/point_of_sale/views/point_of_sale_dashboard.xml
@@ -87,7 +87,7 @@
                             </div>
                             <div class="container o_kanban_card_content">
                                 <div class="row">
-                                    <div class="col-xs-6 o_kanban_primary_left">
+                                    <div class="col-6 o_kanban_primary_left">
                                         <button t-if="record.current_session_state.raw_value === 'opened'" class="btn btn-primary" name="open_ui" type="object">Resume</button>
 
                                         <button t-if="record.current_session_state.raw_value === 'opening_control'" class="btn btn-primary" name="open_existing_session_cb" type="object">Open Session</button>
@@ -97,22 +97,22 @@
                                         <button t-if="!record.current_session_id.raw_value &amp;&amp; !record.pos_session_username.value" class="btn btn-primary" name="open_session_cb" type="object">New Session</button>
 
                                     </div>
-                                    <div class="col-xs-6 o_kanban_primary_right">
+                                    <div class="col-6 o_kanban_primary_right">
 
                                         <div t-if="record.last_session_closing_date.value" class="row">
-                                            <div class="col-xs-6">
+                                            <div class="col-6">
                                                 <span>Last Closing Date</span>
                                             </div>
-                                            <div class="col-xs-6">
+                                            <div class="col-6">
                                                 <span><t t-esc="record.last_session_closing_date.value"/></span>
                                             </div>
                                         </div>
 
                                         <div t-if="record.last_session_closing_date.value" class="row">
-                                            <div class="col-xs-6">
+                                            <div class="col-6">
                                                 <span>Cash Balance</span>
                                             </div>
-                                            <div class="col-xs-6">
+                                            <div class="col-6">
                                                 <span><field name="last_session_closing_cash" widget="monetary"/></span>
                                             </div>
                                         </div>
@@ -120,7 +120,7 @@
                                 </div>
                             </div><div class="container o_kanban_card_manage_pane dropdown-menu" role="menu">
                                 <div class="row">
-                                    <div class="col-xs-6 o_kanban_card_manage_section o_kanban_manage_view">
+                                    <div class="col-6 o_kanban_card_manage_section o_kanban_manage_view">
                                         <div role="menuitem" class="o_kanban_card_manage_title">
                                             <span>View</span>
                                         </div>
@@ -131,7 +131,7 @@
                                             <a name="%(action_pos_order_filtered)d" type="action">Sales Orders</a>
                                         </div>
                                     </div>
-                                    <div class="col-xs-6 o_kanban_card_manage_section o_kanban_manage_new">
+                                    <div class="col-6 o_kanban_card_manage_section o_kanban_manage_new">
                                         <div role="menuitem" class="o_kanban_card_manage_title">
                                             <span>Reporting</span>
                                         </div>
@@ -142,7 +142,7 @@
                                 </div>
 
                                 <div t-if="widget.editable" class="o_kanban_card_manage_settings row" groups="point_of_sale.group_pos_manager">
-                                    <div role="menuitem" class="col-xs-12">
+                                    <div role="menuitem" class="col-12">
                                         <a type="edit">Settings</a>
                                     </div>
                                 </div>
diff --git a/addons/point_of_sale/views/pos_category_view.xml b/addons/point_of_sale/views/pos_category_view.xml
index a83d1a40f05..1c7d461fbea 100644
--- a/addons/point_of_sale/views/pos_category_view.xml
+++ b/addons/point_of_sale/views/pos_category_view.xml
@@ -42,10 +42,10 @@
                     <t t-name="kanban-box">
                         <div t-attf-class="oe_kanban_global_click">
                             <div class="row">
-                                <div class="col-xs-4">
+                                <div class="col-4">
                                     <img height="100" width="100" t-att-src="kanban_image('pos.category', 'image_medium', record.id.raw_value)" alt="Category"/>
                                 </div>
-                                <div class="col-xs-8">
+                                <div class="col-8">
                                     <strong class="o_kanban_record_title"><field name="name"/></strong>
                                 </div>
                             </div>
diff --git a/addons/point_of_sale/views/pos_config_view.xml b/addons/point_of_sale/views/pos_config_view.xml
index 66ae56dbe11..6735752d226 100644
--- a/addons/point_of_sale/views/pos_config_view.xml
+++ b/addons/point_of_sale/views/pos_config_view.xml
@@ -42,7 +42,7 @@
                         <h1><field name="name"/></h1>
                     </div>
                     <div class="row mt16 o_settings_container">
-                      <div class="col-xs-12 col-md-6 o_setting_box">
+                      <div class="col-12 col-lg-6 o_setting_box">
                         <div class="o_setting_left_pane">
                           <field name="module_pos_restaurant"/>
                         </div>
@@ -53,12 +53,12 @@
                       </div>
                     </div>
                     <div class="row mt16" id="company" groups="base.group_multi_company">
-                        <label for="company_id" class="col-md-2"/>
+                        <label for="company_id" class="col-lg-2"/>
                         <field name="company_id"/>
                     </div>
                     <h2 name="order">Order Interface</h2>
                     <div class="row mt16 o_settings_container">
-                        <div id="category_reference" class="col-xs-12 col-md-6 o_setting_box">
+                        <div id="category_reference" class="col-12 col-lg-6 o_setting_box">
                             <div class="o_setting_left_pane">
                                 <field name="iface_display_categ_images"/>
                             </div>
@@ -72,7 +72,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="col-xs-12 col-md-6 o_setting_box" >
+                        <div class="col-12 col-lg-6 o_setting_box" >
                             <div class="o_setting_left_pane">
                                 <field name="start_category"/>
                             </div>
@@ -86,7 +86,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="col-xs-12 col-md-6 o_setting_box" title="Don't turn this option on if you take orders on smartphones or tablets. Such devices already benefit from a native keyboard.">
+                        <div class="col-12 col-lg-6 o_setting_box" title="Don't turn this option on if you take orders on smartphones or tablets. Such devices already benefit from a native keyboard.">
                             <div class="o_setting_left_pane">
                                 <field name="iface_vkeyboard"/>
                             </div>
@@ -97,7 +97,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="col-xs-12 col-md-6 o_setting_box" >
+                        <div class="col-12 col-lg-6 o_setting_box" >
                             <div class="o_setting_left_pane">
                                 <field name="iface_big_scrollbars"/>
                             </div>
@@ -111,7 +111,7 @@
                     </div>
                     <h2>PosBox / Hardware Proxy</h2>
                     <div class="row mt16 o_settings_container" id="posbox_reference">
-                        <div class="col-xs-12 col-md-6 o_setting_box">
+                        <div class="col-12 col-lg-6 o_setting_box">
                             <div class="o_setting_left_pane">
                                 <field name="is_posbox"/>
                             </div>
@@ -122,40 +122,40 @@
                                 </div>
                                 <div class="content-group" attrs="{'invisible' : [('is_posbox', '=', False)]}">
                                     <div class="row mt16">
-                                        <label string="IP Address" for="proxy_ip" class="col-md-3 o_light_label"/>
+                                        <label string="IP Address" for="proxy_ip" class="col-lg-3 o_light_label"/>
                                         <field name="proxy_ip"/>
                                     </div>
                                     <div class="row">
-                                        <label string="Barcode Scanner" for="iface_scan_via_proxy" class="col-md-3 o_light_label"/>
+                                        <label string="Barcode Scanner" for="iface_scan_via_proxy" class="col-lg-3 o_light_label"/>
                                         <field name="iface_scan_via_proxy"/>
                                     </div>
                                     <div class="row">
-                                        <label string="Electronic Scale" for="iface_electronic_scale" class="col-md-3 o_light_label"/>
+                                        <label string="Electronic Scale" for="iface_electronic_scale" class="col-lg-3 o_light_label"/>
                                         <field name="iface_electronic_scale"/>
                                     </div>
                                     <div class="row">
-                                        <label string="Cashdrawer" for="iface_cashdrawer" class="col-md-3 o_light_label"/>
+                                        <label string="Cashdrawer" for="iface_cashdrawer" class="col-lg-3 o_light_label"/>
                                         <field name="iface_cashdrawer"/>
                                     </div>
                                     <div class="row">
-                                        <label string="Receipt Printer" for="iface_print_via_proxy" class="col-md-3 o_light_label"/>
+                                        <label string="Receipt Printer" for="iface_print_via_proxy" class="col-lg-3 o_light_label"/>
                                         <field name="iface_print_via_proxy"/>
                                     </div>
                                     <div class="row">
-                                        <label string="Customer Display" for="iface_customer_facing_display" class="col-md-3 o_light_label"/>
+                                        <label string="Customer Display" for="iface_customer_facing_display" class="col-lg-3 o_light_label"/>
                                         <field name="iface_customer_facing_display"/>
                                     </div>
                                     <field name="customer_facing_display_html" invisible="1"/>
                                     <div class="text-muted" attrs="{'invisible' : ['|', ('iface_customer_facing_display', '=', False), '&amp;', ('id', '!=', False), ('customer_facing_display_html', '!=', '')]}">Save this configuration to see and edit the customer display</div>
                                     <div class="row mt16 o_settings_container" attrs="{'invisible' : ['|', '|',('iface_customer_facing_display', '=', False), ('id', '=', False), ('customer_facing_display_html', '=', '')]}">
-                                        <div class="col-xs-12 col-md-6 o_setting_box">
+                                        <div class="col-12 col-lg-6 o_setting_box">
                                         <field name="customer_facing_display_html" widget="html_frame" nolabel="1" options="{'editor_url': '/point_of_sale/field/customer_facing_display_template'}"/>
                                         </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
-                        <div id="barcode_scanner" class="col-xs-12 col-md-6 o_setting_box">
+                        <div id="barcode_scanner" class="col-12 col-lg-6 o_setting_box">
                             <div class="o_setting_left_pane">
                                 <field name="barcode_scanner"/>
                             </div>
@@ -165,7 +165,7 @@
                                     Set barcodes to scan products, customer cards, etc.
                                 </div>
                                 <div class="content-group row mt16" attrs="{'invisible': [('barcode_scanner', '=', False)]}">
-                                    <label for="barcode_nomenclature_id" string="Barcode Nomenclature" class="col-md-3 o_light_label"/>
+                                    <label for="barcode_nomenclature_id" string="Barcode Nomenclature" class="col-lg-3 o_light_label"/>
                                     <field name="barcode_nomenclature_id" attrs="{'required': [('barcode_scanner', '=', True)]}"/>
                                 </div>
                             </div>
@@ -173,7 +173,7 @@
                     </div>
                     <h2>Taxes</h2>
                     <div class="row mt16 o_settings_container">
-                        <div class="col-xs-12 col-md-6 o_setting_box" title="Choose a specific tax regime at the order depending on the kind of customer (tax exempt, onsite vs. takeaway, etc.).">
+                        <div class="col-12 col-lg-6 o_setting_box" title="Choose a specific tax regime at the order depending on the kind of customer (tax exempt, onsite vs. takeaway, etc.).">
                             <div class="o_setting_left_pane">
                                 <field name="tax_regime_selection"/>
                             </div>
@@ -192,7 +192,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="col-xs-12 col-md-6 o_setting_box">
+                        <div class="col-12 col-lg-6 o_setting_box">
                             <div class="o_setting_left_pane">
                                 <field name="tax_regime"/>
                             </div>
@@ -211,7 +211,7 @@
                     </div>
                     <h2>Pricing</h2>
                     <div class="row mt16 o_settings_container">
-                        <div class="col-xs-12 col-md-6 o_setting_box" >
+                        <div class="col-12 col-lg-6 o_setting_box" >
                             <div class="o_setting_left_pane">
                                 <field name="module_pos_discount"/>
                             </div>
@@ -227,7 +227,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="col-xs-12 col-md-6 o_setting_box" id="pricelist_setting" title="Choose a pricelist for the Point Of Sale" groups="product.group_sale_pricelist">
+                        <div class="col-12 col-lg-6 o_setting_box" id="pricelist_setting" title="Choose a pricelist for the Point Of Sale" groups="product.group_sale_pricelist">
                             <div class="o_setting_left_pane">
                                 <field name="use_pricelist"/>
                             </div>
@@ -238,11 +238,11 @@
                                 </div>
                                 <div class="content-group mt16" attrs="{'invisible': [('use_pricelist','=',False)], 'required' : [('use_pricelist', '=', True)]}">
                                     <div class="row mt16">
-                                        <label string="Available Pricelists" for="available_pricelist_ids" class="col-md-3 o_light_label"/>
+                                        <label string="Available Pricelists" for="available_pricelist_ids" class="col-lg-3 o_light_label"/>
                                         <field name="available_pricelist_ids" widget="many2many_tags"/>
                                     </div>
                                     <div class="row">
-                                        <label string="Default Pricelist" for="pricelist_id" class="col-md-3 o_light_label"/>
+                                        <label string="Default Pricelist" for="pricelist_id" class="col-lg-3 o_light_label"/>
                                         <field name="pricelist_id" domain="[('id', 'in', available_pricelist_ids)]" options="{'no_create': True}"/>
                                     </div>
                                     <div>
@@ -251,7 +251,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="col-xs-12 col-md-6 o_setting_box">
+                        <div class="col-12 col-lg-6 o_setting_box">
                             <div class="o_setting_left_pane">
                                 <field name="module_pos_loyalty" widget="upgrade_boolean" nolabel="1"/>
                             </div>
@@ -267,7 +267,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="col-xs-12 col-md-6 o_setting_box" title="Only users with Manager access rights for PoS app can modify the product prices on orders.">
+                        <div class="col-12 col-lg-6 o_setting_box" title="Only users with Manager access rights for PoS app can modify the product prices on orders.">
                             <div class="o_setting_left_pane">
                                 <field name="restrict_price_control"/>
                             </div>
@@ -281,7 +281,7 @@
                     </div>
                     <h2>Payments</h2>
                     <div class="row mt16 o_settings_container">
-                        <div class="col-xs-12 col-md-6 o_setting_box" id="payment_methods">
+                        <div class="col-12 col-lg-6 o_setting_box" id="payment_methods">
                             <div class="o_setting_right_pane">
                                 <span class="o_form_label">Payment Methods</span>
                                 <div class="text-muted">
@@ -295,7 +295,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="col-xs-12 col-md-6 o_setting_box">
+                        <div class="col-12 col-lg-6 o_setting_box">
                             <div class="o_setting_left_pane">
                                 <field name="cash_control"/>
                             </div>
@@ -306,7 +306,7 @@
                                 </div>
                                 <div class="content-group mt16" attrs="{'invisible': [('cash_control', '=', False)]}">
                                     <div class="row mt16">
-                                        <label string="Default Opening" for="proxy_ip" class="col-md-3 o_light_label" />
+                                        <label string="Default Opening" for="proxy_ip" class="col-lg-3 o_light_label" />
                                         <field name="default_cashbox_lines_ids" widget="many2many_tags" context="{'show_coin_and_value': True}"/>
                                     </div>
                                     <div>
@@ -315,7 +315,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="col-xs-12 col-md-6 o_setting_box">
+                        <div class="col-12 col-lg-6 o_setting_box">
                             <div class="o_setting_left_pane">
                                 <field name="iface_precompute_cash"/>
                             </div>
@@ -329,7 +329,7 @@
                     </div>
                     <h2>Bills &amp; Receipts</h2>
                     <div class="row mt16 o_settings_container" id="receipt">
-                        <div id="order_reference" class="col-xs-12 col-md-6 o_setting_box" groups="base.group_no_one">
+                        <div id="order_reference" class="col-12 col-lg-6 o_setting_box" groups="base.group_no_one">
                             <div class="o_setting_right_pane">
                                 <span class="o_form_label">Order Reference</span>
                                 <div class="text-muted">
@@ -340,7 +340,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="col-xs-12 col-md-6 o_setting_box">
+                        <div class="col-12 col-lg-6 o_setting_box">
                             <div class="o_setting_left_pane">
                                 <field name="is_header_or_footer"/>
                             </div>
@@ -351,17 +351,17 @@
                                 </div>
                                 <div class="content-group mt16" attrs="{'invisible' : [('is_header_or_footer', '=', False)]}">
                                     <div>
-                                        <label string="Header" for="receipt_header" class="col-md-2 o_light_label"/>
+                                        <label string="Header" for="receipt_header" class="col-lg-2 o_light_label"/>
                                         <field name="receipt_header" placeholder="e.g. Company Address, Website"/>
                                     </div>
                                     <div>
-                                        <label string="Footer" for="receipt_footer" class="col-md-2 o_light_label"/>
+                                        <label string="Footer" for="receipt_footer" class="col-lg-2 o_light_label"/>
                                         <field name="receipt_footer" placeholder="e.g. Return Policy, Thanks for shopping with us!"/>
                                     </div>
                                 </div>
                             </div>
                         </div>
-                        <div class="col-xs-12 col-md-6 o_setting_box" id="auto_printing" attrs="{'invisible': [('is_posbox', '=', False)]}">
+                        <div class="col-12 col-lg-6 o_setting_box" id="auto_printing" attrs="{'invisible': [('is_posbox', '=', False)]}">
                             <div class="o_setting_left_pane">
                                 <field name="iface_print_auto"/>
                             </div>
@@ -377,7 +377,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="col-xs-12 col-md-6 o_setting_box" attrs="{'invisible': [('iface_print_via_proxy','=',False)]}">
+                        <div class="col-12 col-lg-6 o_setting_box" attrs="{'invisible': [('iface_print_via_proxy','=',False)]}">
                             <div class="o_setting_left_pane">
                                 <field name='module_pos_reprint'/>
                             </div>
@@ -393,7 +393,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="col-xs-12 col-md-6 o_setting_box" id="iface_invoicing">
+                        <div class="col-12 col-lg-6 o_setting_box" id="iface_invoicing">
                             <div class="o_setting_left_pane">
                                 <field name="module_account_invoicing"/>
                             </div>
@@ -404,7 +404,7 @@
                                 </div>
                                 <div class="content-group mt16" attrs="{'invisible': [('module_account_invoicing', '=', False)]}">
                                     <div class="row mt16">
-                                        <label string="Invoice Journal" for="invoice_journal_id" class="col-md-3 o_light_label"/>
+                                        <label string="Invoice Journal" for="invoice_journal_id" class="col-lg-3 o_light_label"/>
                                         <field name="invoice_journal_id"/>
                                     </div>
                                 </div>
@@ -413,7 +413,7 @@
                     </div>
                     <h2>Inventory</h2>
                     <div class="row mt16 o_settings_container" id="inventory_location">
-                        <div class="col-xs-12 col-md-6 o_setting_box" title="Operation types show up in the Inventory dashboard.">
+                        <div class="col-12 col-lg-6 o_setting_box" title="Operation types show up in the Inventory dashboard.">
                             <div class="o_setting_right_pane">
                                 <label for="picking_type_id" string="Operation Type"/>
                                 <div class="text-muted">
@@ -424,7 +424,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="col-xs-12 col-md-6 o_setting_box" groups="stock.group_stock_multi_locations">
+                        <div class="col-12 col-lg-6 o_setting_box" groups="stock.group_stock_multi_locations">
                             <div class="o_setting_right_pane">
                                 <label for="stock_location_id"/>
                                 <div class="text-muted">
@@ -438,7 +438,7 @@
                     </div>
                     <h2>Accounting</h2>
                     <div class="row mt16 o_settings_container">
-                        <div class="col-xs-12 col-md-6 o_setting_box">
+                        <div class="col-12 col-lg-6 o_setting_box">
                             <div class="o_setting_right_pane">
                                 <span class="o_form_label">Journal Entries</span>
                                 <div class="text-muted">
@@ -446,11 +446,11 @@
                                 </div>
                                 <div class="content-group">
                                     <div class="row mt16" title="Whenever you close a session, one entry is generated in the following accounting journal for all the orders not invoiced. Invoices are recorded in accounting separately.">
-                                        <label string="Sales Journal" for="journal_id" class="col-md-3 o_light_label" widget="selection"/>
+                                        <label string="Sales Journal" for="journal_id" class="col-lg-3 o_light_label" widget="selection"/>
                                         <field name="journal_id"/>
                                     </div>
                                     <div class="row" groups="account.group_account_user" title="Get one journal item per product rather than one journal item per receipt line. This works for any anonymous order. If the customer is set on the order, one journal item is created for each receipt line. This option is recommended for an easy review of your journal entries when managing lots of orders.">
-                                        <label string="Group Journal Items" for="group_by" class="col-md-3 o_light_label"/>
+                                        <label string="Group Journal Items" for="group_by" class="col-lg-3 o_light_label"/>
                                         <field name="group_by"/>
                                     </div>
                                 </div>
diff --git a/addons/point_of_sale/views/pos_order_view.xml b/addons/point_of_sale/views/pos_order_view.xml
index 6b3da82bb99..3f92650c3a8 100644
--- a/addons/point_of_sale/views/pos_order_view.xml
+++ b/addons/point_of_sale/views/pos_order_view.xml
@@ -125,15 +125,15 @@
                                 <strong><span class="badge"><i class="fa fa-money" role="img" aria-label="Amount" title="Amount"/> <field name="amount_total"/></span></strong>
                             </div>
                             <div class="row">
-                                <div class="col-xs-12">
+                                <div class="col-12">
                                 <span><t t-esc="record.pos_reference.value"/></span>
                             </div>
                             </div>
                             <div class="row">
-                                <div class="col-xs-8 text-muted">
+                                <div class="col-8 text-muted">
                                     <span><t t-esc="record.date_order.value"/></span>
                                 </div>
-                                <div class="col-xs-4">
+                                <div class="col-4">
                                     <span class="pull-right text-right">
                                         <field name="state" widget="kanban_label_selection" options="{'classes': {'draft': 'default',
                                         'invoiced': 'success', 'cancel': 'danger'}}"/>
diff --git a/addons/point_of_sale/views/report_statement.xml b/addons/point_of_sale/views/report_statement.xml
index ce8b8d35ebb..7df6743bd3a 100644
--- a/addons/point_of_sale/views/report_statement.xml
+++ b/addons/point_of_sale/views/report_statement.xml
@@ -9,34 +9,34 @@
                     <h2>Statement</h2>
 
                     <div class="row">
-                        <div class="col-xs-3">
+                        <div class="col-3">
                             <strong>Statement Name</strong>:<br/>
                             <span t-field="o.name"/>
                         </div>
-                        <div class="col-xs-3">
+                        <div class="col-3">
                             <strong>Journal</strong>:<br/>
                             <span t-field="o.journal_id"/>
                         </div>
-                        <div class="col-xs-3">
+                        <div class="col-3">
                             <strong>Company</strong>:<br/>
                             <span t-field="o.company_id"/>                            
                         </div>
-                        <div class="col-xs-3">
+                        <div class="col-3">
                             <strong>User</strong>:<br/>
                             <span t-field="o.user_id"/>                            
                         </div>
                     </div>
 
                     <div class="row mb32">
-                        <div class="col-xs-3">
+                        <div class="col-3">
                             <strong>Opening Date</strong>:<br/>
                             <span t-field="o.date"/>
                         </div>
-                        <div class="col-xs-3">
+                        <div class="col-3">
                             <strong>Starting Balance</strong>:<br/>
                             <span t-field="o.balance_start" t-options='{"widget": "monetary", "display_currency": res_company.currency_id}'/>
                         </div>
-                        <div class="col-xs-3">
+                        <div class="col-3">
                             <strong>Ending Balance</strong>:<br/>
                             <span t-field="o.balance_end_real" t-options='{"widget": "monetary", "display_currency": res_company.currency_id}'/>
                         </div>
@@ -63,7 +63,7 @@
                     </table>           
 
                     <div class="row">
-                        <div class="col-xs-4 pull-right">
+                        <div class="col-4 pull-right">
                             <table class="table table-condensed">
                                 <tr class="border-black">
                                     <td><strong>Total</strong></td>
diff --git a/addons/point_of_sale/views/report_userlabel.xml b/addons/point_of_sale/views/report_userlabel.xml
index 911606e11c1..33281bb4c18 100644
--- a/addons/point_of_sale/views/report_userlabel.xml
+++ b/addons/point_of_sale/views/report_userlabel.xml
@@ -4,11 +4,11 @@
     <t t-call="web.basic_layout">
         <div class="page">
             <t t-foreach="docs" t-as="user">
-                <div class="col-xs-6 mb92">
+                <div class="col-6 mb92">
                     <table class="table table-bordered">
                         <thead>
                             <tr>
-                                <th class="col-xs-4 danger"/>
+                                <th class="col-4 danger"/>
                                 <th class="active"/>
                             </tr>
                         </thead>
diff --git a/addons/point_of_sale/views/res_config_settings_views.xml b/addons/point_of_sale/views/res_config_settings_views.xml
index 74a9c769b3b..ce58b565e76 100644
--- a/addons/point_of_sale/views/res_config_settings_views.xml
+++ b/addons/point_of_sale/views/res_config_settings_views.xml
@@ -10,7 +10,7 @@
                 <div class="app_settings_block" data-string="Point of sale" string="Point of Sale" data-key="point_of_sale" groups="point_of_sale.group_pos_manager">
                     <h2>Taxes</h2>
                     <div class="row mt16 o_settings_container">
-                        <div class="col-xs-12 col-md-6 o_setting_box" title="This tax is applied to any new product created in the catalog.">
+                        <div class="col-12 col-lg-6 o_setting_box" title="This tax is applied to any new product created in the catalog.">
                             <div class="o_setting_right_pane">
                                 <div>
                                     <label string="Default Sales Tax" for="sale_tax_id"/>
@@ -29,7 +29,7 @@
                     </div>
                     <h2>Pricing</h2>
                     <div class="row mt16 o_settings_container">
-                        <div class="col-xs-12 col-md-6 o_setting_box" id="product_prices">
+                        <div class="col-12 col-lg-6 o_setting_box" id="product_prices">
                             <div class="o_setting_right_pane">
                                 <label for="iface_tax_included" string="Product Prices"/>
                                 <div class="text-muted">
@@ -43,7 +43,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="col-xs-12 col-md-6 o_setting_box" title="There are two ways to manage pricelists: 1) Multiple prices per product (e.g. quantity, shop-specific) : must be set in the Sales tab of the product detail form. 2) Price computed from formulas (discounts, margins, rounding) : must be set in the pricelist form.">
+                        <div class="col-12 col-lg-6 o_setting_box" title="There are two ways to manage pricelists: 1) Multiple prices per product (e.g. quantity, shop-specific) : must be set in the Sales tab of the product detail form. 2) Price computed from formulas (discounts, margins, rounding) : must be set in the pricelist form.">
                             <div class="o_setting_left_pane">
                                 <field name="pos_sales_price"/>
                             </div>
@@ -64,7 +64,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="col-xs-12 col-md-6 o_setting_box" id="multicurrencies_setting" title="This adds the choice of a currency on pricelists.">
+                        <div class="col-12 col-lg-6 o_setting_box" id="multicurrencies_setting" title="This adds the choice of a currency on pricelists.">
                             <div class="o_setting_left_pane">
                                 <field name="group_multi_currency"/>
                             </div>
@@ -86,7 +86,7 @@
                     </div>
                     <h2>Payments</h2>
                     <div class="row mt16 o_settings_container">
-                        <div class="col-xs-12 col-md-6 o_setting_box" title="The transactions are processed by Vantiv. Set your Vantiv credentials on the related payment journal.">
+                        <div class="col-12 col-lg-6 o_setting_box" title="The transactions are processed by Vantiv. Set your Vantiv credentials on the related payment journal.">
                             <div class="o_setting_left_pane">
                                 <field name="module_pos_mercury"/>
                             </div>
diff --git a/addons/portal/static/src/scss/portal.scss b/addons/portal/static/src/scss/portal.scss
index cdeb21009c1..ec035ca66af 100644
--- a/addons/portal/static/src/scss/portal.scss
+++ b/addons/portal/static/src/scss/portal.scss
@@ -124,7 +124,7 @@ hr {
     padding-left: 0;
     padding-right: 0;
 }
-[class^="col-md-"] {
+[class^="col-lg-"] {
     min-height: 24px;
 }
 
diff --git a/addons/portal/static/src/xml/portal_chatter.xml b/addons/portal/static/src/xml/portal_chatter.xml
index 8c080c5625a..3831c5ebd2e 100644
--- a/addons/portal/static/src/xml/portal_chatter.xml
+++ b/addons/portal/static/src/xml/portal_chatter.xml
@@ -67,7 +67,7 @@
                         <t t-raw="message.body"/>
 
                         <div class="o_portal_chatter_attachments">
-                            <div class="col-md-2 col-sm-3 text-center" t-foreach='message.attachment_ids' t-as='attachment'>
+                            <div class="col-lg-2 col-md-3 text-center" t-foreach='message.attachment_ids' t-as='attachment'>
                                 <a t-attf-href="/web/content/#{attachment.id}?download=true" target="_blank">
                                     <div class='oe_attachment_embedded o_image' t-att-title="attachment.name" t-att-data-mimetype="attachment.mimetype" t-attf-data-src="/web/image/#{attachment.id}/100x80"/>
                                     <div class='oe_attachment_name'><t t-raw='attachment.name'/></div>
diff --git a/addons/portal/views/portal_templates.xml b/addons/portal/views/portal_templates.xml
index b6e180169c6..a8ba031c8a4 100644
--- a/addons/portal/views/portal_templates.xml
+++ b/addons/portal/views/portal_templates.xml
@@ -70,7 +70,7 @@
             <div class="container mt16 mb16 o_portal">
                 <div class="oe_structure">
                     <div t-if="not no_breadcrumbs" class="row">
-                        <div t-attf-class="col-sm-12">
+                        <div t-attf-class="col-md-12">
                             <ol t-if="page_name != 'home'" class="breadcrumb o_portal_submenu">
                                 <li class="breadcrumb-item"><a href="/my/home" aria-label="Home" title="Home"><i class="fa fa-home"/></a></li>
                                 <li t-if="page_name == 'my_details'" class="breadcrumb-item">Your Details</li>
@@ -84,10 +84,10 @@
                 <div class="container mb64">
                     <t t-if="my_details">
                         <div class="row">
-                            <div t-attf-class="col-md-9 col-lg-8">
+                            <div t-attf-class="col-lg-9 col-xl-8">
                                 <t t-raw="0"/>
                             </div>
-                            <div id="o_my_sidebar" class="col-md-3 col-lg-offset-1 o_my_sidebar">
+                            <div id="o_my_sidebar" class="col-lg-3 offset-xl-1 o_my_sidebar">
                                 <div class="o_my_contact" t-if="sales_user">
                                     <t t-call="portal.portal_contact"/>
                                 </div>
@@ -129,7 +129,7 @@
                 <ul class="o_portal_docs list-group">
                 </ul>
             </div>
-            <div class="col-md-12 oe_structure"/>
+            <div class="col-lg-12 oe_structure"/>
         </t>
     </template>
 
@@ -274,51 +274,51 @@
             <form action="/my/account" method="post">
                 <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
                 <div class="row o_portal_details">
-                    <div class="col-md-8">
+                    <div class="col-lg-8">
                         <div class="row">
-                            <div class="col-md-12">
+                            <div class="col-lg-12">
                               <div t-if="error_message" class="alert alert-danger" role="alert">
                                   <t t-foreach="error_message" t-as="err"><t t-esc="err"/><br /></t>
                               </div>
                             </div>
-                            <div t-attf-class="form-group #{error.get('name') and 'has-error' or ''} col-lg-6">
+                            <div t-attf-class="form-group #{error.get('name') and 'has-error' or ''} col-xl-6">
                                 <label class="control-label" for="name">Your Name</label>
                                 <input type="text" name="name" class="form-control" t-att-value="name or partner.name" />
                             </div>
-                            <div t-attf-class="form-group #{error.get('email') and 'has-error' or ''} col-lg-6">
+                            <div t-attf-class="form-group #{error.get('email') and 'has-error' or ''} col-xl-6">
                                 <label class="control-label" for="email">Email</label>
                                 <input type="email" name="email" class="form-control" t-att-value="email or partner.email" />
                             </div>
-                            <div t-attf-class="form-group #{error.get('phone') and 'has-error' or ''} col-lg-6">
+                            <div t-attf-class="form-group #{error.get('phone') and 'has-error' or ''} col-xl-6">
                                 <label class="control-label" for="phone">Phone</label>
                                 <input type="tel" name="phone" class="form-control" t-att-value="phone or partner.phone" />
                             </div>
 
                             <div class="clearfix" />
-                            <div t-attf-class="form-group #{error.get('company_name') and 'has-error' or ''} col-lg-6">
+                            <div t-attf-class="form-group #{error.get('company_name') and 'has-error' or ''} col-xl-6">
                                 <label class="control-label label-optional" for="company_name">Company Name</label>
                                 <p t-if="partner.commercial_partner_id.is_company" class="form-control" t-esc="partner.commercial_company_name"/>
                                 <input t-else="" type="text" name="company_name" class="form-control" t-att-value="company_name or partner.company_name" t-att-readonly="None if partner.can_edit_vat() else '1'" t-att-title="None if partner.can_edit_vat() else 'Changing company name is not allowed once document(s) have been issued for your account. Please contact us directly for this operation.'"/>
                             </div>
-                            <div t-attf-class="form-group #{error.get('vat') and 'has-error' or ''} col-lg-6">
+                            <div t-attf-class="form-group #{error.get('vat') and 'has-error' or ''} col-xl-6">
                                 <label class="control-label label-optional" for="vat">VAT Number</label>
                                 <input type="text" name="vat" class="form-control" t-att-value="vat or partner.vat" t-att-readonly="None if partner.can_edit_vat() else '1'" t-att-title="None if partner.can_edit_vat() else 'Changing VAT number is not allowed once document(s) have been issued for your account. Please contact us directly for this operation.'" />
                             </div>
 
                             <div class="clearfix" />
-                            <div t-attf-class="form-group #{error.get('street') and 'has-error' or ''} col-lg-6">
+                            <div t-attf-class="form-group #{error.get('street') and 'has-error' or ''} col-xl-6">
                                 <label class="control-label" for="street">Street</label>
                                 <input type="text" name="street" class="form-control" t-att-value="street or partner.street"/>
                             </div>
-                            <div t-attf-class="form-group #{error.get('city') and 'has-error' or ''} col-lg-6">
+                            <div t-attf-class="form-group #{error.get('city') and 'has-error' or ''} col-xl-6">
                                 <label class="control-label" for="city">City</label>
                                 <input type="text" name="city" class="form-control" t-att-value="city or partner.city" />
                             </div>
-                            <div t-attf-class="form-group #{error.get('zip') and 'has-error' or ''} col-lg-6">
+                            <div t-attf-class="form-group #{error.get('zip') and 'has-error' or ''} col-xl-6">
                                 <label class="control-label" for="zipcode">Zip / Postal Code</label>
                                 <input type="text" name="zipcode" class="form-control" t-att-value="zipcode or partner.zip" />
                             </div>
-                            <div t-attf-class="form-group #{error.get('country_id') and 'has-error' or ''} col-lg-6">
+                            <div t-attf-class="form-group #{error.get('country_id') and 'has-error' or ''} col-xl-6">
                                 <label class="control-label" for="country_id">Country</label>
                                 <select name="country_id" class="form-control">
                                     <option value="">Country...</option>
@@ -329,7 +329,7 @@
                                     </t>
                                 </select>
                             </div>
-                            <div t-attf-class="form-group #{error.get('state_id') and 'has-error' or ''} col-lg-6">
+                            <div t-attf-class="form-group #{error.get('state_id') and 'has-error' or ''} col-xl-6">
                                 <label class="control-label label-optional" for="state_id">State / Province</label>
                                 <select name="state_id" class="form-control">
                                     <option value="">select...</option>
diff --git a/addons/pos_discount/views/pos_discount_views.xml b/addons/pos_discount/views/pos_discount_views.xml
index e5e8c2a2704..7f7cc0c2dd9 100644
--- a/addons/pos_discount/views/pos_discount_views.xml
+++ b/addons/pos_discount/views/pos_discount_views.xml
@@ -7,11 +7,11 @@
             <field name="arch" type="xml">
                 <div id="btn_use_pos_discount" position="replace">
                     <div class="row mt16">
-                        <label string="Discount Product" for="discount_product_id" class="col-md-3 o_light_label"/>
+                        <label string="Discount Product" for="discount_product_id" class="col-lg-3 o_light_label"/>
                         <field name="discount_product_id" attrs="{'required':[('module_pos_discount','=',True)]}"/>
                     </div>
                     <div class="row">
-                        <label string="Discount %" for="discount_pc" class="col-md-3 o_light_label"/>
+                        <label string="Discount %" for="discount_pc" class="col-lg-3 o_light_label"/>
                         <field name="discount_pc"/>
                     </div>
                 </div>
diff --git a/addons/pos_restaurant/views/pos_config_views.xml b/addons/pos_restaurant/views/pos_config_views.xml
index 84a266d196a..e6ef7c920b2 100644
--- a/addons/pos_restaurant/views/pos_config_views.xml
+++ b/addons/pos_restaurant/views/pos_config_views.xml
@@ -8,7 +8,7 @@
         <field name="arch" type="xml">
             <button id="btn_use_pos_restaurant" position="replace"/>
             <div id="iface_invoicing" position="before">
-                <div class="col-xs-12 col-md-6 o_setting_box"
+                <div class="col-12 col-lg-6 o_setting_box"
                      id="iface_printbill"
                      attrs="{'invisible': [('module_pos_restaurant', '=', False)]}">
                     <div class="o_setting_left_pane">
@@ -22,7 +22,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="col-xs-12 col-md-6 o_setting_box"
+                <div class="col-12 col-lg-6 o_setting_box"
                      id="iface_splitbill"
                      attrs="{'invisible': [('module_pos_restaurant', '=', False)]}">
                     <div class="o_setting_left_pane">
@@ -36,7 +36,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="col-xs-12 col-md-6 o_setting_box"
+                <div class="col-12 col-lg-6 o_setting_box"
                      id="iface_tipproduct"
                      title="This product is used as reference on customer receipts."
                      attrs="{'invisible': [('module_pos_restaurant', '=', False)]}">
@@ -59,7 +59,7 @@
                 </div>
             </div>
             <div id="barcode_scanner" position="after">
-                <div class="col-xs-12 col-md-6 o_setting_box"
+                <div class="col-12 col-lg-6 o_setting_box"
                      id="is_order_printer"
                      attrs="{'invisible': [('module_pos_restaurant', '=', False)]}">
                     <div class="o_setting_left_pane">
@@ -84,7 +84,7 @@
                 </div>
             </div>
             <div id="category_reference" position="before">
-                <div class="col-xs-12 col-md-6 o_setting_box"
+                <div class="col-12 col-lg-6 o_setting_box"
                      id="is_table_management"
                      attrs="{'invisible': [('module_pos_restaurant', '=', False)]}">
                     <div class="o_setting_left_pane">
@@ -107,7 +107,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="col-xs-12 col-md-6 o_setting_box"
+                <div class="col-12 col-lg-6 o_setting_box"
                      id="iface_orderline_notes"
                      attrs="{'invisible': [('module_pos_restaurant', '=', False)]}">
                     <div class="o_setting_left_pane">
diff --git a/addons/pos_sale/views/pos_config_views.xml b/addons/pos_sale/views/pos_config_views.xml
index caa000eacd9..70b14788a02 100644
--- a/addons/pos_sale/views/pos_config_views.xml
+++ b/addons/pos_sale/views/pos_config_views.xml
@@ -8,9 +8,9 @@
         <field name="arch" type="xml">
             <div id="company" position="after">
                 <div class="row mt16 o_settings_container" id="crm_team_id" groups="base.group_no_one">
-                  <div class="col-xs-12 col-md-6 o_setting_box">
+                  <div class="col-12 col-lg-6 o_setting_box">
                     <div class="o_setting_right_pane">
-                        <label for="crm_team_id" class="col-md-3"/>
+                        <label for="crm_team_id" class="col-lg-3"/>
                         <field name="crm_team_id"/>
                     </div>
                   </div>
diff --git a/addons/pos_sale/views/sales_team_views.xml b/addons/pos_sale/views/sales_team_views.xml
index 493c768ae7e..52883ea2849 100644
--- a/addons/pos_sale/views/sales_team_views.xml
+++ b/addons/pos_sale/views/sales_team_views.xml
@@ -88,14 +88,14 @@
 
             <xpath expr="//t[@name='first_options']" position="before">
                 <div class="row" t-if="record.team_type.raw_value == 'pos'">
-                    <div class="col-xs-8">
+                    <div class="col-8">
                         <a name="%(pos_session_action_from_crm_team)d" type="action">
                             <field name="pos_sessions_open_count"/>
                             <t t-if="record.pos_sessions_open_count.raw_value == 1">Session Running</t>
                             <t t-else="">Sessions Running</t>
                         </a>
                     </div>
-                    <div class="col-xs-4 text-right">
+                    <div class="col-4 text-right">
                         <field name="pos_order_amount_total" widget="monetary"/>
                     </div>
                 </div>
diff --git a/addons/product/report/product_pricelist_templates.xml b/addons/product/report/product_pricelist_templates.xml
index 25d5f040330..d73b0d02017 100644
--- a/addons/product/report/product_pricelist_templates.xml
+++ b/addons/product/report/product_pricelist_templates.xml
@@ -7,15 +7,15 @@
                 <h2>Price List</h2>
 
                 <div class="row mt32 mb32">
-                    <div class="col-xs-3">
+                    <div class="col-3">
                         <strong>Price List Name</strong>:<br/>
                         <span t-esc="data['pricelist'].name"/>
                     </div>
-                    <div class="col-xs-3">
+                    <div class="col-3">
                         <strong>Currency</strong>:<br/>
                         <span t-esc="data['pricelist'].currency_id.name"/>
                     </div>
-                    <div class="col-xs-3">
+                    <div class="col-3">
                         <strong>Print date</strong>:<br/>
                         <t t-esc="datetime.datetime.now().strftime('%Y-%m-%d %H:%M:%S')"/>
                     </div>
diff --git a/addons/product/report/product_product_templates.xml b/addons/product/report/product_product_templates.xml
index 2e918ee71e4..49c4062d63b 100644
--- a/addons/product/report/product_product_templates.xml
+++ b/addons/product/report/product_product_templates.xml
@@ -2,11 +2,11 @@
 <odoo>
 <data>
 <template id="report_simple_label">
-    <div class="col-xs-4" style="padding:0;">
+    <div class="col-4" style="padding:0;">
         <table style="border-spacing:0;margin-bottom:0;height:122px;" class="table">
             <thead>
                 <tr style="width: 3in;">
-                    <td style="border: 2px solid black;width: 2.63in;" colspan="2" class="col-xs-8 danger">
+                    <td style="border: 2px solid black;width: 2.63in;" colspan="2" class="col-8 danger">
                         <t t-if="product.default_code">
                             [<strong t-field="product.default_code"/>]
                         </t>
@@ -16,13 +16,13 @@
             </thead>
             <tbody>
                 <tr style="width: 1in;">
-                    <td style="border: 2px solid black;text-align: center; vertical-align: middle;" class="col-xs-5">
+                    <td style="border: 2px solid black;text-align: center; vertical-align: middle;" class="col-5">
                         <img alt="Barcode" t-if="product.barcode and len(product.barcode) == 13" t-att-src="'/report/barcode/?type=%s&amp;value=%s&amp;width=%s&amp;height=%s' % ('EAN13', product.barcode, 600, 150)" style="width:100%;height:20%;"/>
                         <img alt="Barcode" t-elif="product.barcode and len(product.barcode) == 8" t-att-src="'/report/barcode/?type=%s&amp;value=%s&amp;width=%s&amp;height=%s' % ('EAN8', product.barcode, 600, 150)" style="width:100%;height:20%;"/>
                         <img alt="Barcode" t-else="" t-att-src="'/report/barcode/?type=%s&amp;value=%s&amp;width=%s&amp;height=%s' % ('Code128', product.barcode, 600, 150)" style="width:100%;height:20%;"/>
                         <span t-field="product.barcode"/>
                     </td>
-                    <td style="border: 2px solid black; text-align: center;" class="col-xs-7">
+                    <td style="border: 2px solid black; text-align: center;" class="col-7">
                         <h4>
                             <strong t-field="product.list_price" t-options="{'widget': 'monetary', 'display_currency': product.company_id.currency_id}"/>
                         </h4>
diff --git a/addons/product/views/product_views.xml b/addons/product/views/product_views.xml
index ace00844e47..61c7bba55f2 100644
--- a/addons/product/views/product_views.xml
+++ b/addons/product/views/product_views.xml
@@ -585,16 +585,16 @@
                         <t t-name="kanban-box">
                             <div class="oe_kanban_global_click">
                                 <div class="row mb4">
-                                    <strong class="col-xs-6">
+                                    <strong class="col-6">
                                         <span t-esc="record.name.value"/>
                                     </strong>
-                                    <strong class="col-xs-6 text-right">
+                                    <strong class="col-6 text-right">
                                         <strong><field name="price" widget="monetary"/></strong>
                                     </strong>
-                                    <div class="col-xs-6">
+                                    <div class="col-6">
                                         <span t-esc="record.min_qty.value"/>
                                     </div>
-                                    <div class="col-xs-6 text-right">
+                                    <div class="col-6 text-right">
                                         <span t-esc="record.delay.value"/> days
                                     </div>
                                 </div>
diff --git a/addons/product/views/res_config_settings_views.xml b/addons/product/views/res_config_settings_views.xml
index 88d1de1eaff..77eeeea7ca6 100644
--- a/addons/product/views/res_config_settings_views.xml
+++ b/addons/product/views/res_config_settings_views.xml
@@ -12,7 +12,7 @@
                 <xpath expr="//div[@id='multi_company']" position="before">
                     <h2>Products</h2>
                     <div class="row mt16 o_settings_container" id="product_general_settings">
-                        <div class="col-xs-12 col-md-6 o_setting_box">
+                        <div class="col-12 col-lg-6 o_setting_box">
                             <div class="o_setting_left_pane">
                             </div>
                             <div class="o_setting_right_pane">
diff --git a/addons/project/static/src/css/project.css b/addons/project/static/src/css/project.css
index c6e6d31c5ec..9522588f358 100644
--- a/addons/project/static/src/css/project.css
+++ b/addons/project/static/src/css/project.css
@@ -28,7 +28,7 @@
 .openerp .oe_margin_top_8 {
   margin-top: 8px;
 }
-.openerp .oe_kanban_project .oe_kanban_project_list .col-md-6 a{
+.openerp .oe_kanban_project .oe_kanban_project_list .col-lg-6 a{
   margin-left: 5px;
 }
 
diff --git a/addons/project/views/project_portal_templates.xml b/addons/project/views/project_portal_templates.xml
index 820d59ccf7b..b9e0770e1b6 100644
--- a/addons/project/views/project_portal_templates.xml
+++ b/addons/project/views/project_portal_templates.xml
@@ -46,7 +46,7 @@
                 <div class="table-responsive"><table class="table table-hover o_portal_my_doc_table">
                     <thead>
                         <tr class="active">
-                            <th class="col-md-6">Name</th>
+                            <th class="col-lg-6">Name</th>
                             <th>Tasks</th>
                         </tr>
                     </thead>
@@ -76,7 +76,7 @@
             <div class="panel panel-default">
                 <div class="panel-heading">
                     <div class="row">
-                        <div class="col-md-12">
+                        <div class="col-lg-12">
                             <h4>
                                 Project - <span t-field="project.name"/>
                             </h4>
@@ -85,7 +85,7 @@
                 </div>
                 <div class="panel-body">
                     <div class='row'>
-                        <div class="col-md-6">
+                        <div class="col-lg-6">
                             <t t-if="project.partner_id">
                                 <strong>Customer</strong>
                                 <div t-if="project.partner_id">
@@ -99,7 +99,7 @@
                                 </div>
                             </t>
                         </div>
-                        <div class="col-md-6">
+                        <div class="col-lg-6">
                             <div class="pull-right">
                                 <a role="button" t-attf-href="/my/tasks?filterby=#{project.id}" class="btn btn-secondary btn-lg">
                                     <span class="fa fa-tasks" role="img" aria-label="Tasks" title="Tasks"/>
@@ -130,9 +130,9 @@
                         <table class="table table-hover o_portal_my_doc_table">
                             <thead>
                                 <tr class="active">
-                                    <th t-if="groupby == 'none'" class="col-md-9">Name</th>
-                                    <th t-else="" class="col-md-9"><span t-field="tasks[0].sudo().project_id.label_tasks"/> for project: <span t-field="tasks[0].sudo().project_id.name"/></th>
-                                    <th class="col-md-2">Stage</th>
+                                    <th t-if="groupby == 'none'" class="col-lg-9">Name</th>
+                                    <th t-else="" class="col-lg-9"><span t-field="tasks[0].sudo().project_id.label_tasks"/> for project: <span t-field="tasks[0].sudo().project_id.name"/></th>
+                                    <th class="col-lg-2">Stage</th>
                                     <th>Ref</th>
                                 </tr>
                             </thead>
@@ -166,7 +166,7 @@
             <div class="panel panel-default">
                 <div class="panel-heading">
                     <div class="row">
-                        <div class="col-md-12">
+                        <div class="col-lg-12">
                             <h4>
                                 Task - <span t-field="task.name"/> (#<span t-esc="task.id"/>)
                                 <span t-field="task.stage_id.name" class="pull-right label label-info" title="Current stage of this task"/>
@@ -181,7 +181,7 @@
                     </div>
 
                     <div class='row'>
-                        <div class="col-md-6">
+                        <div class="col-lg-6">
                             <div class="mb8">
                                 <strong>Date:</strong> <span t-field="task.create_date" t-field-options='{"widget": "date"}'/>
                             </div>
@@ -198,7 +198,7 @@
                                     <t t-else="">Attachment</t>
                                 </strong>
                                 <div class='row'>
-                                    <div class="col-md-2 col-sm-3 text-center oe_attachments" t-foreach='task.attachment_ids' t-as='attachment'>
+                                    <div class="col-lg-2 col-md-3 text-center oe_attachments" t-foreach='task.attachment_ids' t-as='attachment'>
                                         <a t-attf-href="/web/content/#{attachment.id}?download=true" target="_blank">
                                             <div class='oe_attachment_embedded o_image o_image_small' t-att-title="attachment.name" t-att-data-mimetype="attachment.mimetype" t-attf-data-src="/web/image/#{attachment.id}/50x40"/>
                                             <div class='oe_attachment_name'><t t-esc='attachment.name' /></div>
@@ -207,7 +207,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="col-md-6">
+                        <div class="col-lg-6">
                             <div class="mb8" t-if="task.date_deadline">
                                 <strong>Deadline:</strong> <span t-field="task.date_deadline" t-field-options='{"widget": "date"}'/>
                             </div>
@@ -220,7 +220,7 @@
                         </div>
                     </div>
                     <t t-if="task.description">
-                        <div class="col-md-12">
+                        <div class="col-lg-12">
                             <strong>Description</strong>
                             <div t-field="task.description"/>
                         </div>
@@ -228,10 +228,10 @@
                 </div>
             </div>
             <div class="row mt32">
-                <div class="col-md-12">
+                <div class="col-lg-12">
                     <h4><strong>Message and communication history</strong></h4>
                 </div>
-                <div class="col-md-10 col-md-offset-1 mt16">
+                <div class="col-lg-10 offset-lg-1 mt16">
                     <t t-call="portal.message_thread">
                         <t t-set="object" t-value="task"/>
                     </t>
diff --git a/addons/project/views/project_rating_templates.xml b/addons/project/views/project_rating_templates.xml
index f3de40ee4ec..11954d5a590 100644
--- a/addons/project/views/project_rating_templates.xml
+++ b/addons/project/views/project_rating_templates.xml
@@ -20,7 +20,7 @@
                               </div>
                             </t>
                             <t t-foreach="projects" t-as="project">
-                                <div t-if="project.percentage_satisfaction_project != -1" class="col-sm-6 col-xs-4 col-md-4 col-lg-4">
+                                <div t-if="project.percentage_satisfaction_project != -1" class="col-md-6 col-4 col-lg-4 col-xl-4">
                                     <div class="thumbnail">
                                         <div>
                                             <div class="caption">
@@ -33,7 +33,7 @@
                                                     <i class="fa fa-envelope"/> Email : <t t-esc="project.alias_name"/>@<t t-esc="project.alias_domain"/>
                                                 </p>
                                                 <div class="row">
-                                                    <div class="col-md-6 text-center">
+                                                    <div class="col-lg-6 text-center">
                                                         <h2><t t-esc="len(project.task_ids)"/></h2>
                                                         <p><t t-esc="project.label_tasks"/></p>
                                                     </div>
@@ -78,15 +78,15 @@
         <template id="portal_project_rating_partner_stat">
             <t t-foreach="partner_stats.values()" t-as="partner_stat">
                 <div class="row mt8" t-if="partner_stat['total']" title="Top 5 partner ratings of last 15 days.">
-                    <div class="col-sm-1">
+                    <div class="col-md-1">
                         <img t-if="partner_stat['rated_partner'].image" class="o_top_partner_image" t-attf-src="data:image/png;base64,#{partner_stat['rated_partner'].image}" alt="Rated partner"/>
                         <img  t-if="not partner_stat['rated_partner'].image" class="o_top_partner_image" src='/web/static/src/img/placeholder.png' alt="Placeholder"/>
                     </div>
-                    <div class="col-sm-4 o_smiley_no_padding_right">
+                    <div class="col-md-4 o_smiley_no_padding_right">
                         <span class="ml8" t-esc="partner_stat['rated_partner'].name"/>
                     </div>
-                    <div class="col-sm-4 o_smiley_no_padding_right">
-                        <div class="col-sm-4 o_smiley_no_padding_right o_smiley_no_padding_left">
+                    <div class="col-md-4 o_smiley_no_padding_right">
+                        <div class="col-md-4 o_smiley_no_padding_right o_smiley_no_padding_left">
                             <span t-if="partner_stat['rating_10']">
                                 <img title="happy" alt="Happy face" class="o_top_partner_rating_image" src='/rating/static/src/img/rating_10.png'/>
                                 <span class="o_rating_count" t-esc="partner_stat['rating_10']"/>
@@ -96,7 +96,7 @@
                                 <span class="o_rating_count o_lighter_smileys" t-esc="partner_stat['rating_10']"/>
                             </span>
                         </div>
-                        <div class="col-sm-4 o_smiley_no_padding_right o_smiley_no_padding_left">
+                        <div class="col-md-4 o_smiley_no_padding_right o_smiley_no_padding_left">
                             <span t-if="partner_stat['rating_5']">
                                 <img title="average" alt="Neutral face" class="o_top_partner_rating_image" src='/rating/static/src/img/rating_5.png'/>
                                 <span class="o_rating_count" t-esc="partner_stat['rating_5']"/>
@@ -106,7 +106,7 @@
                                 <span class="o_rating_count o_lighter_smileys" t-esc="partner_stat['rating_5']"/>
                             </span>
                         </div>
-                        <div class="col-sm-4 o_smiley_no_padding_right o_smiley_no_padding_left">
+                        <div class="col-md-4 o_smiley_no_padding_right o_smiley_no_padding_left">
                            <span t-if="partner_stat['rating_1']">
                                 <img title="bad" alt="Sad face" class="o_top_partner_rating_image" src='/rating/static/src/img/rating_1.png'/>
                                 <span class="o_rating_count" t-esc="partner_stat['rating_1']"/>
@@ -117,7 +117,7 @@
                             </span>
                         </div>
                     </div>
-                    <div class="col-sm-3 o_smiley_no_padding_left">
+                    <div class="col-md-3 o_smiley_no_padding_left">
                         <strong class="pull-right"><t t-esc="partner_stat['percentage_happy']"/>%</strong>
                     </div>
                 </div>
@@ -127,11 +127,11 @@
         <template id="portal_project_rating_popover">
             <div t-attf-id="rating_#{rating.id}" class="container d-none">
                 <div class="row">
-                    <div class="col-md-2">
+                    <div class="col-lg-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"/>
                         <img  t-if="not rating.partner_id.image" class="o_top_partner_image" src='/web/static/src/img/placeholder.png' alt="Placeholder"/>
                     </div>
-                    <div class="col-md-10">
+                    <div class="col-lg-10">
                         <div class="mt4">
                             <strong><t t-esc="rating.rated_partner_id.name"/></strong> - <span class="rating_timeduration"><t t-esc="rating.create_date"/></span>
                         </div>
@@ -139,7 +139,7 @@
                     </div>
                 </div>
                 <div class="row o_top_partner_feedback" t-if="rating.feedback">
-                    <div class="col-md-12">
+                    <div class="col-lg-12">
                         <t t-esc="rating.feedback" />
                     </div>
                 </div>
@@ -156,7 +156,7 @@
                             <div>
                                 <h3 class="page-header">Customer Ratings</h3>
                                 <div class="row">
-                                    <div class="col-md-7">
+                                    <div class="col-lg-7">
                                         <t t-foreach="ratings" t-as="rating">
                                             <img t-attf-src='/rating/static/src/img/rating_#{int(rating.rating)}.png'
                                                 class="mt4 o_rating_image"
@@ -166,7 +166,7 @@
                                             <t t-call="project.portal_project_rating_popover"/>
                                         </t>
                                     </div>
-                                    <div class="col-md-5 o_vertical_separator">
+                                    <div class="col-lg-5 o_vertical_separator">
                                         <div t-if="statistics['period_statistics']['days_06']">
                                             <h5>Last 7 days</h5>
                                             <t t-call="project.portal_project_rating_progressbar">
diff --git a/addons/project/views/project_views.xml b/addons/project/views/project_views.xml
index 835dcf868f0..7334c48f41d 100644
--- a/addons/project/views/project_views.xml
+++ b/addons/project/views/project_views.xml
@@ -226,15 +226,15 @@
                         <t t-name="kanban-box">
                             <div t-attf-class="oe_kanban_content oe_kanban_global_click o_kanban_get_form">
                                 <div class="row">
-                                    <div class="col-xs-12">
+                                    <div class="col-12">
                                         <strong><field name="name" string="Project Name"/></strong>
                                     </div>
                                 </div>
                                 <div class="row">
-                                    <div class="col-xs-8">
+                                    <div class="col-8">
                                         <field name="partner_id" string="Contact"/>
                                     </div>
-                                    <div class="col-xs-4">
+                                    <div class="col-4">
                                         <div class="oe_kanban_bottom_right">
                                             <img t-att-src="kanban_image('res.users', 'image_small', record.user_id.raw_value)" t-att-title="record.user_id.value" t-att-alt="record.user_id.value" width="24" height="24" class="oe_kanban_avatar pull-right"/>
                                         </div>
@@ -829,7 +829,7 @@
                         <t t-name="kanban-box">
                             <div t-attf-class="oe_kanban_global_click">
                                 <div class="row">
-                                    <div class="col-xs-12">
+                                    <div class="col-12">
                                         <strong><t t-esc="record.name.value"/></strong>
                                     </div>
                                 </div>
diff --git a/addons/project/views/res_config_settings_views.xml b/addons/project/views/res_config_settings_views.xml
index df3cc3de2c1..da472468e96 100644
--- a/addons/project/views/res_config_settings_views.xml
+++ b/addons/project/views/res_config_settings_views.xml
@@ -10,7 +10,7 @@
                 <div class="app_settings_block" data-string="Project" string="Project" data-key="project" groups="project.group_project_manager">
                         <h2>Tasks Management</h2>
                         <div class="row mt16 o_settings_container">
-                            <div id="use_collaborative_pad" class="col-xs-12 col-md-6 o_setting_box" title="Lets the company customize which Pad installation should be used to link to new pads (for example: http://etherpad.com/).">
+                            <div id="use_collaborative_pad" class="col-12 col-lg-6 o_setting_box" title="Lets the company customize which Pad installation should be used to link to new pads (for example: http://etherpad.com/).">
                                 <div class="o_setting_left_pane">
                                     <field name="module_pad"/>
                                 </div>
@@ -21,7 +21,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-xs-12 col-md-6 o_setting_box">
+                            <div class="col-12 col-lg-6 o_setting_box">
                                 <div class="o_setting_left_pane">
                                     <field name="group_subtask_project"/>
                                 </div>
@@ -32,7 +32,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-xs-12 col-md-6 o_setting_box">
+                            <div class="col-12 col-lg-6 o_setting_box">
                                 <div class="o_setting_left_pane">
                                     <field name="group_project_rating"/>
                                 </div>
@@ -51,7 +51,7 @@
                         </div>
                         <h2>Time Management</h2>
                         <div class="row mt16 o_settings_container">
-                            <div class="col-xs-12 col-md-6 o_setting_box" name="project_time_management">
+                            <div class="col-12 col-lg-6 o_setting_box" name="project_time_management">
                                 <div class="o_setting_left_pane">
                                     <field name="module_project_forecast" widget="upgrade_boolean"/>
                                 </div>
diff --git a/addons/project_timesheet_holidays/views/res_config_settings_views.xml b/addons/project_timesheet_holidays/views/res_config_settings_views.xml
index a7485bec714..ed14f99c253 100644
--- a/addons/project_timesheet_holidays/views/res_config_settings_views.xml
+++ b/addons/project_timesheet_holidays/views/res_config_settings_views.xml
@@ -10,11 +10,11 @@
                 <div attrs="{'invisible': [('module_project_timesheet_holidays','=',False)]}">
                     <div class="row mt16">
                         <div>
-                            <label string="Project" for="leave_timesheet_project_id" class="col-xs-3 col-md-3 o_light_label"/>
+                            <label string="Project" for="leave_timesheet_project_id" class="col-3 col-lg-3 o_light_label"/>
                             <field name="leave_timesheet_project_id" context="{'active_test': False}" class="oe_inline"/>
                         </div>
                         <div>
-                            <label string="Task" for="leave_timesheet_task_id" class="col-xs-3 col-md-3 o_light_label"/>
+                            <label string="Task" for="leave_timesheet_task_id" class="col-3 col-lg-3 o_light_label"/>
                             <field name="leave_timesheet_task_id" context="{'active_test': False, 'default_project_id': leave_timesheet_project_id}" class="oe_inline"/>
                         </div>
                     </div>
diff --git a/addons/purchase/report/purchase_order_templates.xml b/addons/purchase/report/purchase_order_templates.xml
index 5a364ce680e..79aa20ccdfe 100644
--- a/addons/purchase/report/purchase_order_templates.xml
+++ b/addons/purchase/report/purchase_order_templates.xml
@@ -27,15 +27,15 @@
             <h2 t-if="o.state == 'cancel'">Cancelled Purchase Order #<span t-field="o.name"/></h2>
 
             <div class="row mt32 mb32">
-                <div t-if="o.name" class="col-xs-3">
+                <div t-if="o.name" class="col-3">
                     <strong>Our Order Reference:</strong>
                     <p t-field="o.name"/>
                 </div>
-                <div t-if="o.partner_ref" class="col-xs-3">
+                <div t-if="o.partner_ref" class="col-3">
                     <strong>Your Order Reference:</strong>
                     <p t-field="o.partner_ref"/>
                 </div>
-                <div t-if="o.date_order" class="col-xs-3">
+                <div t-if="o.date_order" class="col-3">
                     <strong>Order Date:</strong>
                     <p t-field="o.date_order"/>
                 </div>
@@ -79,7 +79,7 @@
             </table>
 
             <div class="row">
-                <div class="col-xs-4 pull-right">
+                <div class="col-4 pull-right">
                     <table class="table table-condensed">
                         <tr class="border-black">
                             <td><strong>Subtotal</strong></td>
diff --git a/addons/purchase/report/purchase_quotation_templates.xml b/addons/purchase/report/purchase_quotation_templates.xml
index c0822f025a1..78f20762177 100644
--- a/addons/purchase/report/purchase_quotation_templates.xml
+++ b/addons/purchase/report/purchase_quotation_templates.xml
@@ -18,7 +18,6 @@
         <div class="page">
             <div class="oe_structure"/>
 
-
             <h2>Request for Quotation <span t-field="o.name"/></h2>
 
             <table class="table table-condensed">
diff --git a/addons/purchase/views/portal_templates.xml b/addons/purchase/views/portal_templates.xml
index 848ac578bd9..21627f95e35 100644
--- a/addons/purchase/views/portal_templates.xml
+++ b/addons/purchase/views/portal_templates.xml
@@ -71,7 +71,7 @@
           <div class="panel panel-default">
             <div class="panel-heading">
               <div class="row">
-                <div class="col-md-12">
+                <div class="col-lg-12">
                   <h4>
                     Purchase Order
                     <span t-esc="order.name"/>
@@ -84,34 +84,34 @@
                   <strong>Date:</strong> <span t-field="order.date_order" t-options='{"widget": "date"}'/>
               </div>
               <div class="row">
-                <div class="col-md-6">
+                <div class="col-lg-6">
                   <strong>Product</strong>
                 </div>
-                <div class="col-md-2 text-right">
+                <div class="col-lg-2 text-right">
                   <strong>Unit Price</strong>
                 </div>
-                <div class="col-md-2 text-right">
+                <div class="col-lg-2 text-right">
                   <strong>Quantity</strong>
                 </div>
-                <div class="col-md-2 text-right">
+                <div class="col-lg-2 text-right">
                   <strong>Subtotal</strong>
                 </div>
               </div>
               <t t-foreach="order.order_line" t-as="ol">
                 <div class="row purchases_vertical_align">
-                  <div class="col-md-1 text-center">
+                  <div class="col-lg-1 text-center">
                       <img t-att-src="'/web/image/purchase.order.line/%s/product_image/48x48' % ol.id" alt="Product"/>
                   </div>
-                  <div id='product_name' class="col-md-5">
+                  <div id='product_name' class="col-lg-5">
                     <span t-esc="ol.product_id.name"/>
                   </div>
-                  <div class="col-md-2 text-right">
+                  <div class="col-lg-2 text-right">
                     <span t-field="ol.price_unit" t-options='{"widget": "monetary", "display_currency": order.currency_id}'/>
                   </div>
-                  <div class="col-md-2 text-right">
+                  <div class="col-lg-2 text-right">
                       <span t-esc="ol.product_qty"/>
                   </div>
-                  <div class="col-md-2 text-right">
+                  <div class="col-lg-2 text-right">
                     <span t-field="ol.price_subtotal" t-options='{"widget": "monetary", "display_currency": order.currency_id}'/>
                   </div>
                 </div>
@@ -120,28 +120,28 @@
               <hr/>
 
               <div class="row">
-                <div class="col-md-12 text-right">
+                <div class="col-lg-12 text-right">
                   <div class="row">
-                    <div class="col-md-10 text-right">
+                    <div class="col-lg-10 text-right">
                       Untaxed Amount:
                     </div>
-                    <div class="col-md-2 text-right">
+                    <div class="col-lg-2 text-right">
                       <span t-field="order.amount_untaxed" t-options='{"widget": "monetary", "display_currency": order.currency_id}'/>
                     </div>
                   </div>
                   <div class="row">
-                    <div class="col-md-10 text-right">
+                    <div class="col-lg-10 text-right">
                       Taxes:
                     </div>
-                    <div class="col-md-2 text-right">
+                    <div class="col-lg-2 text-right">
                       <span t-field="order.amount_tax" t-options='{"widget": "monetary", "display_currency": order.currency_id}'/>
                     </div>
                   </div>
                   <div class="row">
-                    <div class="col-md-10 text-right">
+                    <div class="col-lg-10 text-right">
                       <strong>Total:</strong>
                     </div>
-                    <div class="col-md-2 text-right">
+                    <div class="col-lg-2 text-right">
                       <strong><span t-field="order.amount_total" t-options='{"widget": "monetary", "display_currency": order.currency_id}'/></strong>
                     </div>
                   </div>
diff --git a/addons/purchase/views/res_config_settings_views.xml b/addons/purchase/views/res_config_settings_views.xml
index 0cadad1eb12..0607b0c0989 100644
--- a/addons/purchase/views/res_config_settings_views.xml
+++ b/addons/purchase/views/res_config_settings_views.xml
@@ -14,7 +14,7 @@
                     <field name="po_lock" invisible="1"/>
                     <h2>Orders</h2>
                     <div class="row mt16 o_settings_container" name="purchase_setting_container">
-                        <div class="col-xs-12 col-md-6 o_setting_box">
+                        <div class="col-12 col-lg-6 o_setting_box">
                             <div class="o_setting_left_pane">
                                 <field name="po_order_approval"/>
                             </div>
@@ -26,13 +26,13 @@
                                 </div>
                                 <div class="content-group" attrs="{'invisible': [('po_order_approval', '=', False)]}">
                                     <div class="row mt16">
-                                        <label for="po_double_validation_amount" class="col-md-4 o_light_label"/>
+                                        <label for="po_double_validation_amount" class="col-lg-4 o_light_label"/>
                                         <field name="po_double_validation_amount"/>
                                     </div>
                                 </div>
                             </div>
                         </div>
-                        <div class="col-xs-12 col-md-6 o_setting_box">
+                        <div class="col-12 col-lg-6 o_setting_box">
                             <div class="o_setting_left_pane">
                                 <field name="lock_confirmed_po"/>
                             </div>
@@ -43,7 +43,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="col-xs-12 col-md-6 o_setting_box">
+                        <div class="col-12 col-lg-6 o_setting_box">
                             <div class="o_setting_left_pane">
                                 <field name="group_warning_purchase"/>
                             </div>
@@ -54,7 +54,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="col-xs-12 col-md-6 o_setting_box" title="Calls for tenders are used when you want to generate requests for quotations to several vendors for a given set of products. You can configure per product if you directly do a Request for Quotation to one vendor or if you want a Call for Tenders to compare offers from several vendors.">
+                        <div class="col-12 col-lg-6 o_setting_box" title="Calls for tenders are used when you want to generate requests for quotations to several vendors for a given set of products. You can configure per product if you directly do a Request for Quotation to one vendor or if you want a Call for Tenders to compare offers from several vendors.">
                             <div class="o_setting_left_pane">
                                 <field name="module_purchase_requisition"/>
                             </div>
@@ -71,7 +71,7 @@
                     </div>
                     <h2>Invoicing</h2>
                     <div class="row mt16 o_settings_container">
-                        <div class="col-xs-12 col-md-6 o_setting_box" title="This default value is applied to any new product created. This can be changed in the product detail form.">
+                        <div class="col-12 col-lg-6 o_setting_box" title="This default value is applied to any new product created. This can be changed in the product detail form.">
                             <div class="o_setting_left_pane"/>
                             <div class="o_setting_right_pane">
                                 <label for="default_purchase_method"/>
@@ -85,7 +85,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="col-xs-12 col-md-6 o_setting_box" title="If enabled, activates 3-way matching on vendor bills : the items must be received in order to pay the invoice.">
+                        <div class="col-12 col-lg-6 o_setting_box" title="If enabled, activates 3-way matching on vendor bills : the items must be received in order to pay the invoice.">
                             <div class="o_setting_left_pane">
                                 <field name="module_account_3way_match" string="3-way matching" widget="upgrade_boolean"/>
                             </div>
@@ -99,7 +99,7 @@
                     </div>
                     <h2>Products</h2>
                     <div class="row mt16 o_settings_container">
-                        <div class="col-xs-12 col-md-6 o_setting_box" title="By default, vendor prices can be set manually in the product detail form. If your vendors provide you with pricelist files, this option allows you to easily import them into the system from ‘Purchase > Vendor Pricelists’ menu.">
+                        <div class="col-12 col-lg-6 o_setting_box" title="By default, vendor prices can be set manually in the product detail form. If your vendors provide you with pricelist files, this option allows you to easily import them into the system from ‘Purchase > Vendor Pricelists’ menu.">
                             <div class="o_setting_left_pane">
                                 <field name="group_manage_vendor_price"/>
                             </div>
diff --git a/addons/purchase_requisition/report/report_purchaserequisition.xml b/addons/purchase_requisition/report/report_purchaserequisition.xml
index 95b0dd97a81..27d648e38d8 100644
--- a/addons/purchase_requisition/report/report_purchaserequisition.xml
+++ b/addons/purchase_requisition/report/report_purchaserequisition.xml
@@ -11,19 +11,19 @@
                     <h2>Call for Tenders <span t-field="o.name"/></h2>
 
                     <div class="row mt32 mb32">
-                        <div class="col-xs-3">
+                        <div class="col-3">
                             <strong>Call for Tender Reference:</strong><br/>
                             <span t-field="o.name"/>
                         </div>
-                        <div class="col-xs-3">
+                        <div class="col-3">
                             <strong>Scheduled Ordering Date:</strong><br/>
                             <span t-field="o.ordering_date"/>
                         </div>
-                        <div class="col-xs-3">
+                        <div class="col-3">
                             <strong>Selection Type:</strong><br/>
                             <span t-esc="o.type_id.name">Multiple Requisitions</span>
                         </div>
-                        <div class="col-xs-3">
+                        <div class="col-3">
                             <strong>Source:</strong><br/>
                             <span t-field="o.origin"/>
                         </div>
diff --git a/addons/purchase_stock/views/res_config_settings_views.xml b/addons/purchase_stock/views/res_config_settings_views.xml
index b49ad74900d..44990f67a2d 100644
--- a/addons/purchase_stock/views/res_config_settings_views.xml
+++ b/addons/purchase_stock/views/res_config_settings_views.xml
@@ -11,7 +11,7 @@
 				<field name="is_installed_sale" invisible="1"/>
 				<h2 attrs="{'invisible': [('is_installed_sale', '=', False)]}">Logistics</h2>
 				<div class="row mt16 o_settings_container">
-					<div class="col-xs-12 col-md-6 o_setting_box" attrs="{'invisible': [('is_installed_sale', '=', False)]}" title="This adds a dropshipping route to apply on products in order to request your vendors to deliver to your customers. A product to dropship will generate a purchase request for quotation once the sales order confirmed. This is a on-demand flow. The requested delivery address will be the customer delivery address and not your warehouse.">
+					<div class="col-12 col-lg-6 o_setting_box" attrs="{'invisible': [('is_installed_sale', '=', False)]}" title="This adds a dropshipping route to apply on products in order to request your vendors to deliver to your customers. A product to dropship will generate a purchase request for quotation once the sales order confirmed. This is a on-demand flow. The requested delivery address will be the customer delivery address and not your warehouse.">
 						<div class="o_setting_left_pane">
 							<field name="module_stock_dropshipping"/>
 						</div>
@@ -33,7 +33,7 @@
 		<field name="inherit_id" ref="stock.res_config_settings_view_form"/>
 		<field name="arch" type="xml">
 			<div id="purchase_po_lead" position="replace">
-				<div class="col-xs-12 col-md-6 o_setting_box" title="Margin of error for vendor lead times. When the system generates Purchase Orders for reordering products,they will be scheduled that many days earlier to cope with unexpected vendor delays.">
+				<div class="col-12 col-lg-6 o_setting_box" title="Margin of error for vendor lead times. When the system generates Purchase Orders for reordering products,they will be scheduled that many days earlier to cope with unexpected vendor delays.">
 					<div class="o_setting_left_pane">
 						<field name="use_po_lead"/>
 					</div>
diff --git a/addons/repair/report/repair_templates_repair_order.xml b/addons/repair/report/repair_templates_repair_order.xml
index 254da4aac8e..b11f49e5747 100644
--- a/addons/repair/report/repair_templates_repair_order.xml
+++ b/addons/repair/report/repair_templates_repair_order.xml
@@ -27,7 +27,6 @@
                 <div class="page">
                     <div class="oe_structure"/>
 
-
                     <h2>
                         <span t-if="o.state != 'draft'">Repair Order #:</span>
                         <span t-if="o.state == 'draft'">Repair Quotation #:</span>
@@ -35,21 +34,21 @@
                     </h2>
 
                     <div class="row mt32 mb32">
-                        <div t-if="o.product_id.name" class="col-xs-3">
+                        <div t-if="o.product_id.name" class="col-3">
                             <strong>Product to Repair:</strong>
                             <p t-field="o.product_id.name"/>
                         </div>
-                        <div class="col-xs-3" groups="stock.group_production_lot">
+                        <div class="col-3" groups="stock.group_production_lot">
                             <strong>Lot/Serial Number:</strong>
                             <t t-if="o.lot_id">
                                 <span t-field="o.lot_id.name"/>
                             </t>
                         </div>
-                        <div t-if="o.guarantee_limit" class="col-xs-3">
+                        <div t-if="o.guarantee_limit" class="col-3">
                             <strong>Warranty:</strong>
                             <p t-field="o.guarantee_limit"/>
                         </div>
-                        <div class="col-xs-3">
+                        <div class="col-3">
                             <strong>Printing Date:</strong>
                             <p t-esc="datetime.datetime.now().strftime('%Y-%m-%d')" t-options="{'widget': 'date'}"/>
                         </div>
@@ -120,7 +119,7 @@
                     </table>
 
                     <div class="row">
-                        <div class="col-xs-4 pull-right">
+                        <div class="col-4 pull-right">
                             <table class="table table-condensed">
                                 <t t-if="o.invoice_method !='none'">
                                     <tr class="border-black">
diff --git a/addons/repair/views/repair_views.xml b/addons/repair/views/repair_views.xml
index c39eb993699..22f7e8f9efc 100644
--- a/addons/repair/views/repair_views.xml
+++ b/addons/repair/views/repair_views.xml
@@ -202,18 +202,18 @@
                     <t t-name="kanban-box">
                         <div t-attf-class="oe_kanban_card oe_kanban_global_click">
                             <div class="row mb4">
-                                <div class="col-xs-6">
+                                <div class="col-6">
                                     <strong><span><t t-esc="record.name.value"/></span></strong>
                                 </div>
-                                <div class="col-xs-6 text-right">
+                                <div class="col-6 text-right">
                                     <span class="label label-default"><field name="state" widget="kanban_label_selection" options="{'classes': {'draft': 'info', 'cancel': 'danger', 'done': 'success', 'under_repair': 'dafault'}}"/></span>
                                 </div>
                             </div>
                             <div class="row">
-                                <div class="col-xs-6 text-muted">
+                                <div class="col-6 text-muted">
                                     <span><t t-esc="record.product_id.value"/></span>
                                 </div>
-                                <div class="col-xs-6">
+                                <div class="col-6">
                                     <span class="pull-right">
                                         <field name="partner_id"/>
                                     </span>
diff --git a/addons/sale/report/sale_report_templates.xml b/addons/sale/report/sale_report_templates.xml
index 99cea9ca118..a58698a3be2 100644
--- a/addons/sale/report/sale_report_templates.xml
+++ b/addons/sale/report/sale_report_templates.xml
@@ -38,27 +38,27 @@
             </h2>
 
             <div class="row mt32 mb32" id="informations">
-                <div t-if="doc.client_order_ref" class="col-xs-3">
+                <div t-if="doc.client_order_ref" class="col-3">
                     <strong>Your Reference:</strong>
                     <p t-field="doc.client_order_ref"/>
                 </div>
-                <div t-if="doc.confirmation_date and doc.state not in ['draft','sent']" class="col-xs-3">
+                <div t-if="doc.confirmation_date and doc.state not in ['draft','sent']" class="col-3">
                     <strong>Date Ordered:</strong>
                     <p t-field="doc.confirmation_date"/>
                 </div>
-                <div t-if="doc.date_order and doc.state in ['draft','sent']" class="col-xs-3">
+                <div t-if="doc.date_order and doc.state in ['draft','sent']" class="col-3">
                     <strong>Quotation Date:</strong>
                     <p t-field="doc.date_order"/>
                 </div>
-                <div t-if="doc.user_id.name" class="col-xs-3">
+                <div t-if="doc.user_id.name" class="col-3">
                     <strong>Salesperson:</strong>
                     <p t-field="doc.user_id"/>
                 </div>
-                <div name="payment_term" t-if="doc.payment_term_id" class="col-xs-3">
+                <div name="payment_term" t-if="doc.payment_term_id" class="col-3">
                     <strong>Payment Terms:</strong>
                     <p t-field="doc.payment_term_id"/>
                 </div>
-                <div t-if="doc.validity_date and doc.state in ['draft', 'sent']" class="col-xs-3">
+                <div t-if="doc.validity_date and doc.state in ['draft', 'sent']" class="col-3">
                     <strong>Expiration Date:</strong>
                     <p t-field="doc.validity_date"/>
                 </div>
@@ -166,7 +166,7 @@
 
             <div class="clearfix">
                 <div class="row" name="total">
-                    <div class="col-xs-4 pull-right">
+                    <div class="col-4 pull-right">
                         <table class="table table-condensed" style="min-width: 200px;max-width: 350px;">
                             <tr class="border-black" style="border-bottom:1px solid #dddddd;">
                                 <td><strong>Subtotal</strong></td>
@@ -220,13 +220,13 @@
             </p>
 
             <div t-if="doc.signature" class="row mt32" name="signature">
-                <div class="col-xs-offset-8 col-xs-4">
+                <div class="offset-8 col-4">
                     <strong>Signature</strong>
                 </div>
-                <div class="col-xs-offset-8 col-xs-4">
+                <div class="offset-8 col-4">
                     <img t-att-src="'data:image/png;base64,%s' % to_text(doc.signature)" style="max-height: 4cm; max-width: 8cm;"/>
                 </div>
-                <div class="col-xs-offset-8 col-xs-4 text-center">
+                <div class="offset-8 col-4 text-center">
                     <p t-field="doc.signed_by"/>
                 </div>
             </div>
diff --git a/addons/sale/views/res_config_settings_views.xml b/addons/sale/views/res_config_settings_views.xml
index 5c127f91b2c..a8c24093192 100644
--- a/addons/sale/views/res_config_settings_views.xml
+++ b/addons/sale/views/res_config_settings_views.xml
@@ -11,7 +11,7 @@
                 <div class="app_settings_block o_not_app" data-string="Sales" string="Sales" data-key="sale_management" groups="sales_team.group_sale_manager">
                     <h2>Product Catalog</h2>
                     <div class="row mt16 o_settings_container">
-                        <div class="col-xs-12 col-md-6 o_setting_box">
+                        <div class="col-12 col-lg-6 o_setting_box">
                             <div class="o_setting_left_pane">
                                 <field name="group_product_variant"/>
                             </div>
@@ -27,7 +27,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="col-xs-12 col-md-6 o_setting_box">
+                        <div class="col-12 col-lg-6 o_setting_box">
                             <div class="o_setting_left_pane">
                                 <field name="group_uom"/>
                             </div>
@@ -43,7 +43,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="col-xs-12 col-md-6 o_setting_box" title="Sending an email is useful if you need to share specific information or content about a product (instructions, rules, links, media, etc.). Create and set the email template from the product detail form (in Sales tab).">
+                        <div class="col-12 col-lg-6 o_setting_box" title="Sending an email is useful if you need to share specific information or content about a product (instructions, rules, links, media, etc.). Create and set the email template from the product detail form (in Sales tab).">
                             <div class="o_setting_left_pane">
                                 <field name="module_product_email_template"/>
                             </div>
@@ -54,7 +54,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="col-xs-12 col-md-6 o_setting_box" title="Ability to select a package type in sales orders and to force a quantity that is a multiple of the number of units per package.">
+                        <div class="col-12 col-lg-6 o_setting_box" title="Ability to select a package type in sales orders and to force a quantity that is a multiple of the number of units per package.">
                             <div class="o_setting_left_pane">
                                 <field name="group_stock_packaging"/>
                             </div>
@@ -68,7 +68,7 @@
                     </div>
                     <h2>Pricing</h2>
                     <div class="row mt16 o_settings_container">
-                        <div class="col-xs-12 col-md-6 o_setting_box">
+                        <div class="col-12 col-lg-6 o_setting_box">
                             <div class="o_setting_left_pane">
                                 <field name="group_discount_per_so_line"/>
                             </div>
@@ -79,7 +79,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="col-xs-12 col-md-6 o_setting_box" title="Boost your sales with two kinds of discount programs: promotions and coupon codes. Specific conditions can be set (products, customers, minimum purchase amount, period). Rewards can be discounts (% or amount) or free products.">
+                        <div class="col-12 col-lg-6 o_setting_box" title="Boost your sales with two kinds of discount programs: promotions and coupon codes. Specific conditions can be set (products, customers, minimum purchase amount, period). Rewards can be discounts (% or amount) or free products.">
                             <div class="o_setting_left_pane">
                                 <field name="module_sale_coupon" widget="upgrade_boolean"/>
                             </div>
@@ -90,7 +90,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="col-xs-12 col-md-6 o_setting_box" title="There are two ways to manage pricelists: 1) Multiple prices per product: must be set in the Sales tab of the product detail form. 2) Price computed from formulas: must be set in the pricelist form.">
+                        <div class="col-12 col-lg-6 o_setting_box" title="There are two ways to manage pricelists: 1) Multiple prices per product: must be set in the Sales tab of the product detail form. 2) Price computed from formulas: must be set in the pricelist form.">
                             <div class="o_setting_left_pane">
                                 <field name="multi_sales_price"/>
                             </div>
@@ -112,7 +112,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="col-xs-12 col-md-6 o_setting_box">
+                        <div class="col-12 col-lg-6 o_setting_box">
                             <div class="o_setting_left_pane">
                             </div>
                             <div class="o_setting_right_pane">
@@ -125,7 +125,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="col-xs-12 col-md-6 o_setting_box" title="The margin is computed as the sum of product sales prices minus the cost set in their detail form.">
+                        <div class="col-12 col-lg-6 o_setting_box" title="The margin is computed as the sum of product sales prices minus the cost set in their detail form.">
                             <div class="o_setting_left_pane">
                                 <field name="module_sale_margin"/>
                             </div>
@@ -139,7 +139,7 @@
                     </div>
                     <h2>Quotations &amp; Orders</h2>
                     <div class="row mt16 o_settings_container">
-                        <div class="col-xs-12 col-md-6 o_setting_box" id="sale_config_online_confirmation_sign">
+                        <div class="col-12 col-lg-6 o_setting_box" id="sale_config_online_confirmation_sign">
                             <div class="o_setting_left_pane">
                                 <field name="portal_confirmation_sign"/>
                             </div>
@@ -151,7 +151,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="col-xs-12 col-md-6 o_setting_box" id="sale_config_online_confirmation_pay">
+                        <div class="col-12 col-lg-6 o_setting_box" id="sale_config_online_confirmation_pay">
                             <div class="o_setting_left_pane">
                                 <field name="portal_confirmation_pay"/>
                             </div>
@@ -164,7 +164,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="col-xs-12 col-md-6 o_setting_box">
+                        <div class="col-12 col-lg-6 o_setting_box">
                             <div class="o_setting_left_pane">
                                 <field name="module_website_quote"/>
                             </div>
@@ -175,7 +175,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="col-xs-12 col-md-6 o_setting_box">
+                        <div class="col-12 col-lg-6 o_setting_box">
                             <div class="o_setting_left_pane">
                                 <field name="group_sale_delivery_address"/>
                             </div>
@@ -186,7 +186,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="col-xs-12 col-md-6 o_setting_box">
+                        <div class="col-12 col-lg-6 o_setting_box">
                             <div class="o_setting_left_pane">
                                 <field name="use_sale_note"/>
                             </div>
@@ -203,7 +203,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="col-xs-12 col-md-6 o_setting_box">
+                        <div class="col-12 col-lg-6 o_setting_box">
                             <div class="o_setting_left_pane">
                                 <field name="group_warning_sale"/>
                             </div>
@@ -214,7 +214,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="col-xs-12 col-md-6 o_setting_box">
+                        <div class="col-12 col-lg-6 o_setting_box">
                             <div class="o_setting_left_pane">
                                 <field name="auto_done_setting"/>
                             </div>
@@ -225,7 +225,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="col-xs-12 col-md-6 o_setting_box">
+                        <div class="col-12 col-lg-6 o_setting_box">
                             <div class="o_setting_left_pane">
                                 <field name="group_proforma_sales"/>
                             </div>
@@ -239,7 +239,7 @@
                     </div>
                     <h2 class="mt32">Shipping</h2>
                     <div class="row mt16 o_settings_container">
-                        <div class="col-xs-12 col-md-6 o_setting_box" id="delivery">
+                        <div class="col-12 col-lg-6 o_setting_box" id="delivery">
                             <div class="o_setting_left_pane">
                                 <field name="module_delivery"/>
                             </div>
@@ -250,7 +250,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="col-xs-12 col-md-6 o_setting_box" id="ups">
+                        <div class="col-12 col-lg-6 o_setting_box" id="ups">
                             <div class="o_setting_left_pane">
                                 <field name="module_delivery_ups" widget="upgrade_boolean"/>
                             </div>
@@ -264,7 +264,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="col-xs-12 col-md-6 o_setting_box">
+                        <div class="col-12 col-lg-6 o_setting_box">
                             <div class="o_setting_left_pane">
                                 <field name="module_delivery_dhl" widget="upgrade_boolean"/>
                             </div>
@@ -278,7 +278,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="col-xs-12 col-md-6 o_setting_box">
+                        <div class="col-12 col-lg-6 o_setting_box">
                             <div class="o_setting_left_pane">
                                 <field name="module_delivery_fedex" widget="upgrade_boolean"/>
                             </div>
@@ -292,7 +292,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="col-xs-12 col-md-6 o_setting_box">
+                        <div class="col-12 col-lg-6 o_setting_box">
                             <div class="o_setting_left_pane">
                                 <field name="module_delivery_usps" widget="upgrade_boolean"/>
                             </div>
@@ -306,7 +306,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="col-xs-12 col-md-6 o_setting_box">
+                        <div class="col-12 col-lg-6 o_setting_box">
                             <div class="o_setting_left_pane">
                                 <field name="module_delivery_bpost" widget="upgrade_boolean"/>
                             </div>
@@ -320,7 +320,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="col-xs-12 col-md-6 o_setting_box">
+                        <div class="col-12 col-lg-6 o_setting_box">
                             <div class="o_setting_left_pane">
                                 <field name="module_delivery_easypost" widget="upgrade_boolean"/>
                             </div>
@@ -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 d-none"
+                             class="col-12 col-lg-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"/>
@@ -352,7 +352,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="col-xs-12 col-md-6 o_setting_box" groups="base.group_no_one">
+                        <div class="col-12 col-lg-6 o_setting_box" groups="base.group_no_one">
                             <div class="o_setting_left_pane"/>
                             <div class="o_setting_right_pane">
                                 <span class="o_form_label">Down Payments</span>
diff --git a/addons/sale/views/sale_portal_templates.xml b/addons/sale/views/sale_portal_templates.xml
index 71de74795e7..782650066f9 100644
--- a/addons/sale/views/sale_portal_templates.xml
+++ b/addons/sale/views/sale_portal_templates.xml
@@ -132,7 +132,7 @@
           <div class="panel panel-default">
             <div class="panel-heading">
               <div class="row">
-                <div class="col-md-6 col-xs-9 col-sm-9">
+                <div class="col-lg-6 col-9 col-md-9">
                     <h4>
                         <t t-if="order.state in ('sent', 'cancel')">Quotation</t>
                         <t t-else="">Order</t>
@@ -145,7 +145,7 @@
                         </t>
                     </h4>
                 </div>
-                <div class="col-md-6 col-sm-3 col-xs-3 d-print-none" id="o_portal_order_actions">
+                <div class="col-lg-6 col-md-3 col-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
@@ -173,7 +173,7 @@
                   <strong>Expiration Date:</strong> <span t-field="order.validity_date" t-options='{"widget": "date"}'/>
               </div>
               <div class='row'>
-                <div class="col-md-6">
+                <div class="col-lg-6">
                   <div>
                     <strong>Invoicing Address</strong>
                   </div>
@@ -202,7 +202,7 @@
                     </div>
                   </t>
                 </div>
-                <div id="shipping_address" class="col-md-6" groups="sale.group_delivery_invoice_address">
+                <div id="shipping_address" class="col-lg-6" groups="sale.group_delivery_invoice_address">
                   <div>
                     <strong>Shipping Address</strong>
                   </div>
@@ -217,22 +217,22 @@
 
               <t t-set="display_discount" t-value="any([l.discount for l in order.order_line])"/>
               <div class="row">
-                <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'">
+                <div t-att-class="'col-xl-4 col-md-4 col-5' if display_discount else 'col-md-5 col-6'">
                   <strong>Product</strong>
                 </div>
-                <div class="col-sm-3 d-none d-md-block text-right">
+                <div class="col-md-3 d-none d-md-block text-right">
                   <strong>Unit Price</strong>
                 </div>
-                <div t-if="display_discount" class="col-xs-1 text-right" >
+                <div t-if="display_discount" class="col-1 text-right" >
                   <strong>Discount</strong>
                 </div>
-                <div class="d-none d-md-block col-sm-2 text-right">
+                <div class="d-none d-md-block col-md-2 text-right">
                   <strong>Quantity</strong>
                 </div>
-                <div class="col-xs-2 d-md-none text-right">
+                <div class="col-2 d-md-none text-right">
                   <strong>Qty.</strong>
                 </div>
-                <div class="col-sm-2 col-xs-4 text-right">
+                <div class="col-md-2 col-4 text-right">
                   <strong>Subtotal</strong>
                 </div>
               </div>
@@ -246,22 +246,22 @@
 
                 <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="d-none d-xl-block col-lg-1 text-center">
+                      <div class="d-none d-xl-block col-xl-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'">
+                      <div id='product_name' t-att-class="'col-xl-3 col-md-4 col-5' if display_discount else 'col-xl-4 col-md-5 col-6'">
                         <span t-field="line.product_id.name"/>
                       </div>
-                    <div class="col-sm-3 d-none d-md-block text-right">
+                    <div class="col-md-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'>
+                    <div t-if="display_discount" class="col-1 text-right" style='white-space: nowrap'>
                         <span t-field="line.discount"/> %
                     </div>
-                    <div class="col-xs-2 text-right">
+                    <div class="col-2 text-right">
                       <span t-field="line.product_uom_qty"/>
                     </div>
-                    <div class="col-sm-2 col-xs-4 text-right">
+                    <div class="col-md-2 col-4 text-right">
                       <span
                         t-field="line.price_subtotal"
                         t-options='{"widget": "monetary", "display_currency": order.pricelist_id.currency_id}'
@@ -275,14 +275,14 @@
                     </div>
                   </t>
                   <t t-elif="line.display_type == 'line_note'">
-                    <div class="col-xs-12">
+                    <div class="col-12">
                       <span t-field="line.name"/>
                     </div>
                   </t>
                   <t t-elif="line.display_type == 'line_section'">
                     <t t-set="current_section" t-value="line"/>
                     <t t-set="current_subtotal" t-value="0"/>
-                    <div class="col-xs-12">
+                    <div class="col-12">
                       <span t-field="line.name"/>
                     </div>
                   </t>
@@ -293,7 +293,7 @@
                 -->
                 <t t-if="current_section and (line_last or order.order_line[line_index+1].display_type == 'line_section')">
                   <div t-attf-class="row orders_vertical_align is-subtotal pt8 pb8">
-                    <div class="col-xs-12 text-right">
+                    <div class="col-12 text-right">
                       <strong>Subtotal:</strong> <span
                         t-esc="current_subtotal"
                         t-options='{"widget": "monetary", "display_currency": order.pricelist_id.currency_id}'
@@ -306,19 +306,19 @@
               <hr/>
 
               <div class="row">
-                <div class="col-md-6">
+                <div class="col-lg-6">
                   <div>
                     <strong>Contact</strong>
                   </div>
                   <div t-field="order.user_id.partner_id" t-options='{"widget": "contact", "fields": ["email", "phone"]}'/>
                   <br/>
                 </div>
-                <div class="col-md-6">
+                <div class="col-lg-6">
                   <div class="row mb4">
-                      <div class="col-md-9 col-xs-8 text-right">
+                      <div class="col-lg-9 col-8 text-right">
                         <strong>Subtotal</strong>
                       </div>
-                      <div class="col-md-3 col-xs-4 text-right">
+                      <div class="col-lg-3 col-4 text-right">
                         <strong>
                             <span t-field="order.amount_untaxed" t-options='{"widget": "monetary", "display_currency": order.pricelist_id.currency_id}'/>
                         </strong>
@@ -328,18 +328,18 @@
                     <t t-set="tax_groups" t-value="order._get_tax_amount_by_group()"/>
                     <t t-foreach="tax_groups" t-as="amount_by_group">
                         <t t-if="len(tax_groups) == 1 and order.amount_untaxed == amount_by_group[2]">
-                            <div class="col-md-9 col-xs-8 text-right"><span t-esc="amount_by_group[0]"/></div>
-                            <div class="col-md-3 col-xs-4 text-right">
+                            <div class="col-lg-9 col-8 text-right"><span t-esc="amount_by_group[0]"/></div>
+                            <div class="col-lg-3 col-4 text-right">
                                 <span t-esc="amount_by_group[1]"
                                     t-options='{"widget": "monetary", "display_currency": order.pricelist_id.currency_id}'/>
                             </div>
                         </t>
                         <t t-else ="">
-                            <div class="col-md-9 col-xs-8 text-right">
+                            <div class="col-lg-9 col-8 text-right">
                                 <span t-esc="amount_by_group[0]"/>
                                 <span>&amp;nbsp;<span>on</span>&amp;nbsp;<t t-esc="amount_by_group[2]" t-options='{"widget": "monetary", "display_currency": order.pricelist_id.currency_id}'/></span>
                             </div>
-                            <div class="col-md-3 col-xs-4 text-right">
+                            <div class="col-lg-3 col-4 text-right">
                                 <span t-esc="amount_by_group[1]"
                                     t-options='{"widget": "monetary", "display_currency": order.pricelist_id.currency_id}'/>
                             </div>
@@ -347,10 +347,10 @@
                     </t>
                   </div>
                   <div class="row">
-                    <div class="col-md-9 col-xs-8 text-right">
+                    <div class="col-lg-9 col-8 text-right">
                       <strong>Total</strong>
                     </div>
-                    <div class="col-md-3 col-xs-4 text-right">
+                    <div class="col-lg-3 col-4 text-right">
                       <strong><span t-field="order.amount_total" t-options='{"widget": "monetary", "display_currency": order.pricelist_id.currency_id}'/></strong>
                     </div>
                   </div>
@@ -359,7 +359,7 @@
             </div>
             <div class="panel-body">
                 <div class="row" t-if="order.state == 'sent' and portal_confirmation == 'sign'" id="portal_sign">
-                    <div class="col-md-offset-3 col-md-6">
+                    <div class="offset-lg-3 col-lg-6">
                         <h4>Accept &amp; Sign</h4>
                         <t t-call="portal.portal_signature">
                             <t t-set="object" t-value="order"/>
@@ -379,7 +379,7 @@
 
     <template id="portal_order_error" name="Order error/warning display">
         <div class="row mr16">
-            <div t-attf-class="'col-md-12 mr16 ml16 alert alert-dismissable' #{'alert-danger' if error else 'alert-warning'}" role="alert">
+            <div t-attf-class="'col-lg-12 mr16 ml16 alert alert-dismissable' #{'alert-danger' if error else 'alert-warning'}" role="alert">
                 <a href="#" class="close" data-dismiss="alert" aria-label="close" title="close">×</a>
                 <t t-if="error == 'generic'" name="generic">
                     There was an error processing this page.
@@ -390,7 +390,7 @@
 
     <template id="portal_order_success" name="Order success display">
         <div class="row mr16">
-            <div class="col-md-12 mr16 ml16 alert alert-dismissable alert-success" role="status">
+            <div class="col-lg-12 mr16 ml16 alert alert-dismissable alert-success" role="status">
                 <a href="#" class="close" data-dismiss="alert" aria-label="close" title="close">×</a>
             </div>
         </div>
diff --git a/addons/sale/views/sale_views.xml b/addons/sale/views/sale_views.xml
index eb5c08b230c..6a384eb2f82 100644
--- a/addons/sale/views/sale_views.xml
+++ b/addons/sale/views/sale_views.xml
@@ -454,14 +454,14 @@
                                             <div t-attf-class="oe_kanban_card oe_kanban_global_click {{ record.display_type.raw_value ? 'o_is_' + record.display_type.raw_value : '' }}">
                                                 <t t-if="!record.display_type.raw_value">
                                                     <div class="row">
-                                                        <div class="col-xs-8">
+                                                        <div class="col-8">
                                                             <strong>
                                                                 <span>
                                                                     <t t-esc="record.product_id.value"/>
                                                                 </span>
                                                             </strong>
                                                         </div>
-                                                        <div class="col-xs-4">
+                                                        <div class="col-4">
                                                             <strong>
                                                                 <span class="pull-right text-right">
                                                                     <t t-esc="record.price_subtotal.value"/>
@@ -470,7 +470,7 @@
                                                         </div>
                                                     </div>
                                                     <div class="row">
-                                                        <div class="col-xs-12 text-muted">
+                                                        <div class="col-12 text-muted">
                                                             <span>
                                                                 Quantity:
                                                                 <t t-esc="record.product_uom_qty.value"/>
@@ -479,7 +479,7 @@
                                                         </div>
                                                     </div>
                                                     <div class="row">
-                                                        <div class="col-xs-12 text-muted">
+                                                        <div class="col-12 text-muted">
                                                             <span>
                                                                 Unit Price:
                                                                 <t t-esc="record.price_unit.value"/>
@@ -489,7 +489,7 @@
                                                 </t>
                                                 <t t-if="record.display_type.raw_value === 'line_section' || record.display_type.raw_value === 'line_note'">
                                                     <div class="row">
-                                                        <div class="col-xs-12">
+                                                        <div class="col-12">
                                                             <span>
                                                                 <t t-esc="record.name.value"/>
                                                             </span>
diff --git a/addons/sale/views/sales_team_views.xml b/addons/sale/views/sales_team_views.xml
index d997b7e1f12..2855cfda8ba 100644
--- a/addons/sale/views/sales_team_views.xml
+++ b/addons/sale/views/sales_team_views.xml
@@ -62,19 +62,19 @@
 
             <xpath expr="//t[@name='second_options']" position="after">
                 <div class="row" t-if="record.quotations_count.raw_value">
-                    <div class="col-xs-8">
+                    <div class="col-8">
                         <a name="%(action_quotations_salesteams)d" type="action" context="{'search_default_draft': True, 'search_default_sent': True}">
                             <field name="quotations_count"/>
                             <t t-if="record.quotations_count.raw_value == 1">Quotation</t>
                             <t t-else="">Quotations</t>
                         </a>
                     </div>
-                    <div class="col-xs-4 text-right">
+                    <div class="col-4 text-right">
                         <field name="quotations_amount" widget="monetary"/>
                     </div>
                 </div>
                 <div class="row" name="orders_to_invoice" t-if="record.sales_to_invoice_count.raw_value">
-                    <div class="col-xs-8">
+                    <div class="col-8">
                         <a name="%(action_orders_to_invoice_salesteams)d" type="action">
                             <field name="sales_to_invoice_count"/>
                             <t t-if="record.sales_to_invoice_count.raw_value == 1">Order to Invoice</t>
@@ -86,10 +86,10 @@
 
             <xpath expr="//div[hasclass('bottom_block')]" position="inside">
                 <t groups="sales_team.group_sale_manager">
-                    <t t-if="record.use_invoices.raw_value &amp;&amp; record.invoiced_target.raw_value" class="col-xs-12 o_kanban_primary_bottom">
+                    <t t-if="record.use_invoices.raw_value &amp;&amp; record.invoiced_target.raw_value" class="col-12 o_kanban_primary_bottom">
                         <field name="invoiced" widget="progressbar" title="Invoicing" options="{'current_value': 'invoiced', 'max_value': 'invoiced_target', 'editable': true, 'edit_max_value': true, 'on_change': 'update_invoiced_target'}"/>
                     </t>
-                    <t t-if="record.use_invoices.raw_value &amp;&amp; !record.invoiced_target.raw_value" class="col-xs-12 o_kanban_primary_bottom text-center">
+                    <t t-if="record.use_invoices.raw_value &amp;&amp; !record.invoiced_target.raw_value" class="col-12 o_kanban_primary_bottom text-center">
                         <a href="#" class="sales_team_target_definition o_inline_link">Click to define a target</a>
                     </t>
                 </t>
diff --git a/addons/sale_payment/views/sale_portal_templates.xml b/addons/sale_payment/views/sale_portal_templates.xml
index 34616538902..8f30ffcc83f 100644
--- a/addons/sale_payment/views/sale_portal_templates.xml
+++ b/addons/sale_payment/views/sale_portal_templates.xml
@@ -21,8 +21,8 @@
         </xpath>
         <xpath expr="//div[@id='portal_sign']" position="after">
             <div class="row" t-if="order.amount_total and not invoices and order.state in ('sent', 'sale') and portal_confirmation == 'pay' and order.get_portal_last_transaction().state != 'done'" id="portal_pay">
-                <div class="col-md-offset-3 col-md-6">
-                    <div t-if="pms or s2s_acquirers or form_acquirers" id="payment_method" class="text-left col-md-13">
+                <div class="offset-lg-3 col-lg-6">
+                    <div t-if="pms or s2s_acquirers or form_acquirers" id="payment_method" class="text-left">
                         <h4 class="mb24">Pay with</h4>
                         <t t-call="payment.payment_tokens_list">
                             <t t-set="mode" t-value="'payment'"/>
@@ -39,7 +39,7 @@
                     </div>
                 </div>
                 <div class="panel-body" t-if="existing_token">
-                    <div class="col-md-offset-3 col-md-6">
+                    <div class="offset-lg-3 col-lg-6">
                         <i class="fa fa-info"></i> You have credits card registered, you can log-in to be able to use them.
                     </div>
                 </div>
diff --git a/addons/sale_stock/report/sale_order_report_templates.xml b/addons/sale_stock/report/sale_order_report_templates.xml
index 8a8880fca4f..9faa1aca6f3 100644
--- a/addons/sale_stock/report/sale_order_report_templates.xml
+++ b/addons/sale_stock/report/sale_order_report_templates.xml
@@ -2,7 +2,7 @@
 <odoo>
     <template id="report_saleorder_document_inherit_sale_stock" inherit_id="sale.report_saleorder_document">
       	<xpath expr="//div[@name='payment_term']" position="after">
-        	<div class="col-xs-3" t-if="doc.incoterm" groups="sale_stock.group_display_incoterm">
+        	<div class="col-3" t-if="doc.incoterm" groups="sale_stock.group_display_incoterm">
           		<strong>Incoterms:</strong>
           		<p t-field="doc.incoterm.code"/>
         	</div>
diff --git a/addons/sale_stock/report/stock_report_deliveryslip.xml b/addons/sale_stock/report/stock_report_deliveryslip.xml
index 459b279e7f2..179ac6c573f 100644
--- a/addons/sale_stock/report/stock_report_deliveryslip.xml
+++ b/addons/sale_stock/report/stock_report_deliveryslip.xml
@@ -3,7 +3,7 @@
     <template id="report_delivery_document_inherit_sale_stock" inherit_id="stock.report_delivery_document">
         <xpath expr="//h2" position="before">
             <div class="row" t-if="o.sale_id.client_order_ref">
-                <div class="col-xs-4 pull-right">
+                <div class="col-4 pull-right">
                     <strong>Customer Reference:</strong>
                     <p t-field="o.sale_id.client_order_ref"/>
                 </div>
diff --git a/addons/sale_stock/views/res_config_settings_views.xml b/addons/sale_stock/views/res_config_settings_views.xml
index cbb69eb83b7..a891f10d3a6 100644
--- a/addons/sale_stock/views/res_config_settings_views.xml
+++ b/addons/sale_stock/views/res_config_settings_views.xml
@@ -7,7 +7,7 @@
         <field name="inherit_id" ref="sale.res_config_settings_view_form"/>
         <field name="arch" type="xml">
             <xpath expr="//div[@id='delivery']" position="after">
-                <div class="col-xs-12 col-md-6 o_setting_box" title="This option introduces extra fields in the sales order to easily schedule product deliveries on your own: expected date, commitment date, effective date.">
+                <div class="col-12 col-lg-6 o_setting_box" title="This option introduces extra fields in the sales order to easily schedule product deliveries on your own: expected date, commitment date, effective date.">
                     <div class="o_setting_left_pane">
                         <field name="module_sale_order_dates"/>
                     </div>
@@ -18,7 +18,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="col-xs-12 col-md-6 o_setting_box">
+                <div class="col-12 col-lg-6 o_setting_box">
                     <div class="o_setting_left_pane">
                         <field name="group_display_incoterm"/>
                     </div>
@@ -34,7 +34,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="col-xs-12 col-md-6 o_setting_box" title="This allows to apply a special route on sales order lines (e.g. dropshipping, make-to-order) in case of unusual order scenario. To be available in sales orders, routes must have 'Sales Order Line' option checked in their setup form.">
+                <div class="col-12 col-lg-6 o_setting_box" title="This allows to apply a special route on sales order lines (e.g. dropshipping, make-to-order) in case of unusual order scenario. To be available in sales orders, routes must have 'Sales Order Line' option checked in their setup form.">
                     <div class="o_setting_left_pane">
                         <field name="group_route_so_lines"/>
                     </div>
@@ -60,7 +60,7 @@
         <field name="inherit_id" ref="stock.res_config_settings_view_form"/>
         <field name="arch" type="xml">
             <div id="warning_info" position="after">
-                <div class="col-xs-12 col-md-6 o_setting_box" title="Reserving products manually in delivery orders or by running the scheduler is advised to better manage priorities in case of long customer lead times or/and frequent stock-outs. By default, the scheduler runs automatically every 24 hours.">
+                <div class="col-12 col-lg-6 o_setting_box" title="Reserving products manually in delivery orders or by running the scheduler is advised to better manage priorities in case of long customer lead times or/and frequent stock-outs. By default, the scheduler runs automatically every 24 hours.">
                     <div class="o_setting_right_pane">
                         <label for="module_procurement_jit"/>
                         <div class="text-muted">
@@ -73,7 +73,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="col-xs-12 col-md-6 o_setting_box">
+                <div class="col-12 col-lg-6 o_setting_box">
                     <div class="o_setting_right_pane">
                         <label for="default_picking_policy"/>
                         <div class="text-muted">
@@ -88,7 +88,7 @@
                 </div>
             </div>
             <div id="sale_security_lead" position="replace">
-                <div class="col-xs-12 col-md-6 o_setting_box" title="Margin of error for dates promised to customers. Products will be scheduled for procurement and delivery that many days earlier than the actual promised date, to cope with unexpected delays in the supply chain.">
+                <div class="col-12 col-lg-6 o_setting_box" title="Margin of error for dates promised to customers. Products will be scheduled for procurement and delivery that many days earlier than the actual promised date, to cope with unexpected delays in the supply chain.">
                     <div class="o_setting_left_pane">
                         <field name="use_security_lead"/>
                     </div>
diff --git a/addons/sale_stock/views/stock_config_settings_views.xml b/addons/sale_stock/views/stock_config_settings_views.xml
index 040572b94e7..8d2cfd7a396 100644
--- a/addons/sale_stock/views/stock_config_settings_views.xml
+++ b/addons/sale_stock/views/stock_config_settings_views.xml
@@ -7,7 +7,7 @@
         <field name="inherit_id" ref="stock.view_stock_config_settings"/>
         <field name="arch" type="xml">
             <div id="warning_info" position="after">
-                <div class="col-xs-12 col-md-6 o_setting_box" title="Reserving products manually in delivery orders or by running the scheduler is advised to better manage priorities in case of long customer lead times or/and frequent stock-outs. By default, the scheduler runs automatically every 24 hours.">
+                <div class="col-12 col-lg-6 o_setting_box" title="Reserving products manually in delivery orders or by running the scheduler is advised to better manage priorities in case of long customer lead times or/and frequent stock-outs. By default, the scheduler runs automatically every 24 hours.">
                     <div class="o_setting_right_pane">
                         <label for="module_procurement_jit"/>
                         <div class="text-muted">
@@ -20,7 +20,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="col-xs-12 col-md-6 o_setting_box">
+                <div class="col-12 col-lg-6 o_setting_box">
                     <div class="o_setting_right_pane">
                         <label for="default_picking_policy"/>
                         <div class="text-muted">
@@ -35,7 +35,7 @@
                 </div>
             </div>
             <div id="sale_security_lead" position="replace">
-                <div class="col-xs-12 col-md-6 o_setting_box" title="Margin of error for dates promised to customers. Products will be scheduled for procurement and delivery that many days earlier than the actual promised date, to cope with unexpected delays in the supply chain.">
+                <div class="col-12 col-lg-6 o_setting_box" title="Margin of error for dates promised to customers. Products will be scheduled for procurement and delivery that many days earlier than the actual promised date, to cope with unexpected delays in the supply chain.">
                     <div class="o_setting_left_pane">
                         <field name="use_security_lead"/>
                     </div>
diff --git a/addons/sale_timesheet/views/res_config_settings_views.xml b/addons/sale_timesheet/views/res_config_settings_views.xml
index 16102a8b2ce..f85f5052b72 100644
--- a/addons/sale_timesheet/views/res_config_settings_views.xml
+++ b/addons/sale_timesheet/views/res_config_settings_views.xml
@@ -10,7 +10,7 @@
             <xpath expr="//div[@name='section_leaves']" position="before">
                 <h2>Billing</h2>
                 <div name="timesheet_billing" class="row mt16 o_settings_container" title="Sell services (e.g. project, maintenance), record time spent using Timesheets app and invoice them based on a fixed price (ordered quantity) or on the time spent (delivered quantity)">
-                    <div class="col-xs-12 col-md-6 o_setting_box">
+                    <div class="col-12 col-lg-6 o_setting_box">
                         <div class="o_setting_right_pane">
                             <span class="o_form_label">Time Billing</span>
                             <div class="text-muted">
diff --git a/addons/sales_team/views/crm_team_views.xml b/addons/sales_team/views/crm_team_views.xml
index b1be79dad3f..043470fddb1 100644
--- a/addons/sales_team/views/crm_team_views.xml
+++ b/addons/sales_team/views/crm_team_views.xml
@@ -132,10 +132,10 @@
                         <t t-name="kanban-box">
                             <div t-attf-class="oe_kanban_content oe_kanban_global_click">
                                 <div class="row">
-                                    <div class="col-xs-6">
+                                    <div class="col-6">
                                         <strong><field name="name"/></strong>
                                     </div>
-                                    <div class="col-xs-6">
+                                    <div class="col-6">
                                         <span class="pull-right"><field name="user_id"/></span>
                                     </div>
                                 </div>
diff --git a/addons/sales_team/views/sales_team_dashboard.xml b/addons/sales_team/views/sales_team_dashboard.xml
index ffdac9852ed..6d9dcb28454 100644
--- a/addons/sales_team/views/sales_team_dashboard.xml
+++ b/addons/sales_team/views/sales_team_dashboard.xml
@@ -25,35 +25,35 @@
                             </div>
                             <div class="container o_kanban_card_content">
                                 <div class="row o_kanban_card_upper_content">
-                                    <div class="col-xs-6 o_kanban_primary_left" name="to_replace_in_sale_crm">
+                                    <div class="col-6 o_kanban_primary_left" name="to_replace_in_sale_crm">
                                         <button type="object" class="btn btn-primary" name="action_primary_channel_button"><field name="dashboard_button_name"/></button>
                                     </div>
-                                    <div class="col-xs-6 o_kanban_primary_right" style="padding-bottom:0;">
+                                    <div class="col-6 o_kanban_primary_right" style="padding-bottom:0;">
                                         <t name="first_options"/>
                                         <t name="second_options"/>
                                         <t name="third_options"/>
                                     </div>
                                 </div>
                                 <div class="row">
-                                    <div class="col-xs-12 o_kanban_primary_bottom">
+                                    <div class="col-12 o_kanban_primary_bottom">
                                         <t t-call="SalesTeamDashboardGraph"/>
                                     </div>
-                                    <div class="col-xs-12 o_kanban_primary_bottom bottom_block">
+                                    <div class="col-12 o_kanban_primary_bottom bottom_block">
                                     </div>
                                 </div>
                             </div><div class="container o_kanban_card_manage_pane dropdown-menu" role="menu">
                                 <div class="row">
-                                    <div class="col-xs-4 o_kanban_card_manage_section o_kanban_manage_view">
+                                    <div class="col-4 o_kanban_card_manage_section o_kanban_manage_view">
                                         <div role="menuitem" class="o_kanban_card_manage_title">
                                             <span>View</span>
                                         </div>
                                     </div>
-                                    <div class="col-xs-4 o_kanban_card_manage_section o_kanban_manage_new">
+                                    <div class="col-4 o_kanban_card_manage_section o_kanban_manage_new">
                                         <div role="menuitem" class="o_kanban_card_manage_title">
                                             <span>New</span>
                                         </div>
                                     </div>
-                                    <div class="col-xs-4 o_kanban_card_manage_section o_kanban_manage_reports">
+                                    <div class="col-4 o_kanban_card_manage_section o_kanban_manage_reports">
                                         <div role="menuitem" class="o_kanban_card_manage_title">
                                             <span>Reporting</span>
                                         </div>
@@ -61,15 +61,15 @@
                                 </div>
 
                                 <div t-if="widget.editable" class="o_kanban_card_manage_settings row" groups="sales_team.group_sale_manager">
-                                    <div role="menuitem" aria-haspopup="true" class="col-xs-8">
+                                    <div role="menuitem" aria-haspopup="true" class="col-8">
                                         <ul class="oe_kanban_colorpicker" data-field="color" role="menu"/>
                                     </div>
-                                    <div role="menuitem" class="col-xs-4 text-right">
+                                    <div role="menuitem" class="col-4 text-right">
                                         <a type="edit">Settings</a>
                                     </div>
                                 </div>
                                 <div class="row mb16">
-                                    <div role="menuitem" class="col-xs-6">
+                                    <div role="menuitem" class="col-6">
                                         <field name="is_favorite" widget="boolean_favorite" />
                                     </div>
                                 </div>
diff --git a/addons/snailmail/views/res_config_settings_views.xml b/addons/snailmail/views/res_config_settings_views.xml
index ac358451f72..cd5577c8cde 100644
--- a/addons/snailmail/views/res_config_settings_views.xml
+++ b/addons/snailmail/views/res_config_settings_views.xml
@@ -9,7 +9,7 @@
             <xpath expr="//div[@id='multi_company']" position="after">	
                 <h2>Postal Printings</h2>	
                 <div class="row mt16 o_settings_container">	
-                    <div class="col-xs-12 col-md-6 o_setting_box">	
+                    <div class="col-12 col-lg-6 o_setting_box">
                         <div class="o_setting_left_pane">	
                             <field name="snailmail_duplex"/>	
                         </div>	
@@ -22,7 +22,7 @@
                         </div>	
                     </div>	
 
-                    <div class="col-xs-12 col-md-6 o_setting_box">	
+                    <div class="col-12 col-lg-6 o_setting_box">
                         <div class="o_setting_left_pane">	
                             <field name="snailmail_color"/>	
                         </div>	
diff --git a/addons/stock/report/report_lot_barcode.xml b/addons/stock/report/report_lot_barcode.xml
index 259ba9f904c..5212e9cbab1 100644
--- a/addons/stock/report/report_lot_barcode.xml
+++ b/addons/stock/report/report_lot_barcode.xml
@@ -8,7 +8,7 @@
                 <div class="page">
                     <div class="oe_structure"/>
                     <div class="row">
-                        <div class="col-xs-8">
+                        <div class="col-8">
                             <table class="table table-condensed" style="border-bottom: 0px solid white !important;">
                                 <thead>
                                     <tr>
@@ -26,12 +26,12 @@
                                 </tbody>
                             </table>
                         </div>
-                        <div class="col-xs-4">
+                        <div class="col-4">
                             <img class="image" t-att-src="'data:image/png;base64,%s' % to_text(res_company.logo)" style="border:auto;" alt="Logo"/>
                         </div>
                     </div>
                     <div class="row">
-                        <div class="col-xs-12 mt32">
+                        <div class="col-12 mt32">
                             <table class="table table-condensed" style="border-bottom: 3px solid black !important;"><thead><th> </th></thead></table>
                             <img t-att-src="'/report/barcode/?type=%s&amp;value=%s&amp;width=%s&amp;height=%s' % ('Code128', o.name, 600, 100)" style="width:300px;height:50px" alt="Barcode"/>
                             <p class="text-center" t-field="o.name"></p>
diff --git a/addons/stock/report/report_package_barcode.xml b/addons/stock/report/report_package_barcode.xml
index 92e54705346..c94e3f170f3 100644
--- a/addons/stock/report/report_package_barcode.xml
+++ b/addons/stock/report/report_package_barcode.xml
@@ -11,15 +11,15 @@
                         style="width:300px;height:50px" class="pull-right mb16"/>
                     <h1 t-field="o.name" class="mt0 pull-left"/>
                     <div class="row o_packaging_type" t-if="o.packaging_id">
-                        <div class="col-xs-12" style="font-weight:bold;">Package Type: <span t-field="o.packaging_id.name"/></div>
+                        <div class="col-12" style="font-weight:bold;">Package Type: <span t-field="o.packaging_id.name"/></div>
                     </div>
                     <div class="row">
-                        <div class="col-xs-12">
+                        <div class="col-12">
                             <h2>Package Content</h2>
                         </div>
                     </div>
                     <div class="row">
-                        <div class="col-xs-8">
+                        <div class="col-8">
                             <table class="table table-condensed" style="border-bottom: 0px solid white !important;">
                                 <thead>
                                     <tr>
@@ -58,16 +58,16 @@
                 <div class="page">
                     <div class="oe_structure"/>
                     <div class="row">
-                        <div class="col-xs-12 text-center">
+                        <div class="col-12 text-center">
                             <img t-att-src="'/report/barcode/?type=%s&amp;value=%s&amp;width=%s&amp;height=%s' % ('Code128', o.name, 600, 100)" style="width:600px;height:100px" alt="Barcode"/>
                             <p t-field="o.name"  style="font-size:20px;"></p>
                         </div>
                     </div>
                     <div class="row o_package_name">
-                        <div class="col-xs-12" style="font-size:24px; font-weight:bold;">Package Reference: <span t-field="o.name"/></div>
+                        <div class="col-12" style="font-size:24px; font-weight:bold;">Package Reference: <span t-field="o.name"/></div>
                     </div>
                     <div class="row o_packaging_type" t-if="o.packaging_id">
-                        <div class="col-xs-12" style="font-size:24px; font-weight:bold;">Package Type: <span t-field="o.packaging_id.name"/></div>
+                        <div class="col-12" style="font-size:24px; font-weight:bold;">Package Type: <span t-field="o.packaging_id.name"/></div>
                     </div>
                 </div>
             </t>
diff --git a/addons/stock/report/report_stockinventory.xml b/addons/stock/report/report_stockinventory.xml
index 22736a175cd..91b79e2b35d 100644
--- a/addons/stock/report/report_stockinventory.xml
+++ b/addons/stock/report/report_stockinventory.xml
@@ -59,7 +59,7 @@
 
                             <t t-if="o.filter == 'product' and o.product_id">
                               <div class="row">
-                                <div class="col-xs-4 pull-right">
+                                <div class="col-4 pull-right">
                                      <table class="table table-condensed">
                                         <tr class="border-black">
                                             <td><strong>Total Quantity</strong></td>
diff --git a/addons/stock/report/report_stockpicking_operations.xml b/addons/stock/report/report_stockpicking_operations.xml
index 8b429cb96ca..108f2e12743 100644
--- a/addons/stock/report/report_stockpicking_operations.xml
+++ b/addons/stock/report/report_stockpicking_operations.xml
@@ -8,12 +8,12 @@
                     <t t-call="web.external_layout">
                         <div class="page">
                             <div class="row mb16">
-                                <div class="col-xs-4 pull-right" name="right_box">
+                                <div class="col-4 pull-right" name="right_box">
                                     <img t-att-src="'/report/barcode/?type=%s&amp;value=%s&amp;width=%s&amp;height=%s' % ('Code128', o.name, 600, 100)" style="width:300px;height:50px;" alt="Barcode"/>
                                 </div>
                             </div>
                             <div class="row">
-                                <div class="col-xs-6">
+                                <div class="col-6">
                                     <div t-if="o.move_ids_without_package and o.move_ids_without_package[0].partner_id and o.move_ids_without_package[0].partner_id.id != o.partner_id.id">
                                         <span><strong>Delivery Address:</strong></span>
                                         <div t-field="o.move_ids_without_package[0].partner_id"
@@ -25,7 +25,7 @@
                                             t-options='{"widget": "contact", "fields": ["address", "name", "phone"], "no_marker": True, "phone_icons": True}'/>
                                     </div>
                                 </div>
-                                <div class="col-xs-5 col-xs-offset-1">
+                                <div class="col-5 offset-1">
                                     <div t-if="o.picking_type_id.code=='incoming' and o.partner_id">
                                         <span><strong>Vendor Address:</strong></span>
                                     </div>
diff --git a/addons/stock/static/description/index.html b/addons/stock/static/description/index.html
index fad948575af..3ee832ae2b1 100644
--- a/addons/stock/static/description/index.html
+++ b/addons/stock/static/description/index.html
@@ -17,7 +17,7 @@
         <p class='oe_mt32'>
         Get the most efficient stocking method and improve all your internal operations. Odoo's double-entry inventory has no stock input, output or transformation. Instead, all operations are stock moves between locations.
         </p>
-        <div class="col-md-8 col-md-offset-3 oe_mt16">
+        <div class="col-lg-8 offset-lg-3 oe_mt16">
             <img class="oe_picture" src="stock_dashboard.png" height="300">
         </div>
     </div>
diff --git a/addons/stock/views/res_config_settings_views.xml b/addons/stock/views/res_config_settings_views.xml
index 1de7fe1741e..19a3a8eb6bb 100644
--- a/addons/stock/views/res_config_settings_views.xml
+++ b/addons/stock/views/res_config_settings_views.xml
@@ -11,7 +11,7 @@
                     <div class="app_settings_block" data-string="Inventory" string="Inventory" data-key="stock" groups="stock.group_stock_manager">
                         <h2>Operations</h2>
                         <div class="row mt16 o_settings_container">
-                            <div class="col-xs-12 col-md-6 o_setting_box">
+                            <div class="col-12 col-lg-6 o_setting_box">
                                 <div class="o_setting_left_pane">
                                     <field name="module_stock_barcode" widget="upgrade_boolean"/>
                                 </div>
@@ -25,7 +25,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-xs-12 col-md-6 o_setting_box" title="Put your products in packs (e.g. parcels, boxes) and track them">
+                            <div class="col-12 col-lg-6 o_setting_box" title="Put your products in packs (e.g. parcels, boxes) and track them">
                                 <div class="o_setting_left_pane">
                                     <field name="group_stock_tracking_lot"/>
                                 </div>
@@ -36,7 +36,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-xs-12 col-md-6 o_setting_box">
+                            <div class="col-12 col-lg-6 o_setting_box">
                                 <div class="o_setting_left_pane">
                                     <field name="module_stock_picking_batch"/>
                                 </div>
@@ -47,7 +47,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-xs-12 col-md-6 o_setting_box" id="warning_info">
+                            <div class="col-12 col-lg-6 o_setting_box" id="warning_info">
                                 <div class="o_setting_left_pane">
                                     <field name="group_warning_stock"/>
                                 </div>
@@ -61,7 +61,7 @@
                         </div>
                         <h2>Shipping Connectors</h2>
                         <div class="row mt16 o_settings_container" title="Shipping connectors allow to compute accurate shipping costs, print shipping labels and request carrier picking at your warehouse to ship to the customer. Apply shipping connector from delivery methods.">
-                            <div class="col-xs-12 col-md-6 o_setting_box">
+                            <div class="col-12 col-lg-6 o_setting_box">
                                 <div class="o_setting_left_pane">
                                     <field name="module_delivery_ups" widget="upgrade_boolean"/>
                                 </div>
@@ -75,7 +75,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-xs-12 col-md-6 o_setting_box">
+                            <div class="col-12 col-lg-6 o_setting_box">
                                 <div class="o_setting_left_pane">
                                     <field name="module_delivery_dhl" widget="upgrade_boolean"/>
                                 </div>
@@ -89,7 +89,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-xs-12 col-md-6 o_setting_box">
+                            <div class="col-12 col-lg-6 o_setting_box">
                                 <div class="o_setting_left_pane">
                                     <field name="module_delivery_fedex" widget="upgrade_boolean"/>
                                 </div>
@@ -103,7 +103,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-xs-12 col-md-6 o_setting_box">
+                            <div class="col-12 col-lg-6 o_setting_box">
                                 <div class="o_setting_left_pane">
                                     <field name="module_delivery_usps" widget="upgrade_boolean"/>
                                 </div>
@@ -117,7 +117,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-xs-12 col-md-6 o_setting_box">
+                            <div class="col-12 col-lg-6 o_setting_box">
                                 <div class="o_setting_left_pane">
                                     <field name="module_delivery_bpost" widget="upgrade_boolean"/>
                                 </div>
@@ -132,7 +132,7 @@
                                 </div>
                             </div>
 
-                            <div class="col-xs-12 col-md-6 o_setting_box">
+                            <div class="col-12 col-lg-6 o_setting_box">
                                 <div class="o_setting_left_pane">
                                     <field name="module_delivery_easypost" widget="upgrade_boolean"/>
                                 </div>
@@ -149,7 +149,7 @@
                         </div>
                         <h2>Products</h2>
                         <div class="row mt16 o_settings_container">
-                            <div class="col-xs-12 col-md-6 o_setting_box">
+                            <div class="col-12 col-lg-6 o_setting_box">
                                 <div class="o_setting_left_pane">
                                     <field name="group_product_variant"/>
                                 </div>
@@ -165,7 +165,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-xs-12 col-md-6 o_setting_box">
+                            <div class="col-12 col-lg-6 o_setting_box">
                                 <div class="o_setting_left_pane">
                                     <field name="group_uom"/>
                                 </div>
@@ -181,7 +181,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-xs-12 col-md-6 o_setting_box" title="Manage product packagings (e.g. pack of 6 bottles, box of 10 pieces)">
+                            <div class="col-12 col-lg-6 o_setting_box" title="Manage product packagings (e.g. pack of 6 bottles, box of 10 pieces)">
                                 <div class="o_setting_left_pane">
                                     <field name="group_stock_packaging"/>
                                 </div>
@@ -200,7 +200,7 @@
                         </div>
                         <h2>Traceability</h2>
                         <div class="row mt16 o_settings_container" id="production_lot_info">
-                            <div class="col-xs-12 col-md-6 o_setting_box">
+                            <div class="col-12 col-lg-6 o_setting_box">
                                 <div class="o_setting_left_pane">
                                     <field name="group_stock_production_lot"/>
                                 </div>
@@ -211,7 +211,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-xs-12 col-md-6 o_setting_box" attrs="{'invisible': [('group_stock_production_lot', '=', False)]}" title="Track following dates on lots &amp; serial numbers: best before, removal, end of life, alert. Such dates are set automatically at lot/serial number creation based on values set on the product (in days).">
+                            <div class="col-12 col-lg-6 o_setting_box" attrs="{'invisible': [('group_stock_production_lot', '=', False)]}" title="Track following dates on lots &amp; serial numbers: best before, removal, end of life, alert. Such dates are set automatically at lot/serial number creation based on values set on the product (in days).">
                                 <div class="o_setting_left_pane">
                                     <field name="module_product_expiry"/>
                                 </div>
@@ -222,7 +222,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-xs-12 col-md-6 o_setting_box">
+                            <div class="col-12 col-lg-6 o_setting_box">
                                 <div class="o_setting_left_pane">
                                     <field name="group_stock_tracking_owner"/>
                                 </div>
@@ -236,7 +236,7 @@
                         </div>
                         <h2 class="mt32">Warehouse</h2>
                         <div class="row mt16 o_settings_container">
-                            <div class="col-xs-12 col-md-6 o_setting_box" title="Store products in specific locations of your warehouse (e.g. bins, racks) and to track inventory accordingly.">
+                            <div class="col-12 col-lg-6 o_setting_box" title="Store products in specific locations of your warehouse (e.g. bins, racks) and to track inventory accordingly.">
                                 <div class="o_setting_left_pane">
                                     <field name="group_stock_multi_locations"/>
                                 </div>
@@ -252,7 +252,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-xs-12 col-md-6 o_setting_box">
+                            <div class="col-12 col-lg-6 o_setting_box">
                                 <div class="o_setting_left_pane">
                                     <field name="group_stock_multi_warehouses"/>
                                 </div>
@@ -268,7 +268,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-xs-12 col-md-6 o_setting_box" title="Add and customize route operations to process product moves in your warehouse(s): e.g. unload &gt; quality control &gt; stock for incoming products, pick &gt; pack &gt; ship for outgoing products. You can also set putaway strategies on warehouse locations in order to send incoming products into specific child locations straight away (e.g. specific bins, racks).">
+                            <div class="col-12 col-lg-6 o_setting_box" title="Add and customize route operations to process product moves in your warehouse(s): e.g. unload &gt; quality control &gt; stock for incoming products, pick &gt; pack &gt; ship for outgoing products. You can also set putaway strategies on warehouse locations in order to send incoming products into specific child locations straight away (e.g. specific bins, racks).">
                                 <div class="o_setting_left_pane">
                                     <field name="group_stock_adv_location"/>
                                 </div>
@@ -290,7 +290,7 @@
                         <div class="row mt16 o_settings_container">
                             <div id="sale_security_lead"/>
                             <div id="purchase_po_lead"/>
-                            <div class="col-xs-12 col-md-6 o_setting_box" id="propagation_info" title="Rescheduling applies to any chain of operations (e.g. Make To Order, Pick Pack Ship). In the case of MTO sales, a vendor delay (updated incoming date) impacts the expected delivery date to the customer. This option allows to not propagate the rescheduling if the change is not critical.">
+                            <div class="col-12 col-lg-6 o_setting_box" id="propagation_info" title="Rescheduling applies to any chain of operations (e.g. Make To Order, Pick Pack Ship). In the case of MTO sales, a vendor delay (updated incoming date) impacts the expected delivery date to the customer. This option allows to not propagate the rescheduling if the change is not critical.">
                                 <div class="o_setting_left_pane">
                                     <field name="use_propagation_minimum_delta"/>
                                 </div>
diff --git a/addons/stock/views/stock_inventory_views.xml b/addons/stock/views/stock_inventory_views.xml
index 03005c01157..b8ba15f8dc0 100644
--- a/addons/stock/views/stock_inventory_views.xml
+++ b/addons/stock/views/stock_inventory_views.xml
@@ -188,24 +188,24 @@
                                                            #{record.product_qty.raw_value!=record.theoretical_qty.raw_value ? 'oe_kanban_color_6' : ''}
                                                            #{record.theoretical_qty.raw_value&lt;0 ? 'oe_kanban_color_2' : ''}">
                                             <div class="row">
-                                                <div class="col-xs-12">
+                                                <div class="col-12">
                                                     <strong>
                                                         <field name='product_id'/>
                                                     </strong>
                                                 </div>
                                             </div>
                                             <div class="row">
-                                                <div class="col-xs-12 text-muted">
+                                                <div class="col-12 text-muted">
                                                     <span><t t-esc='record.location_id.string'/>: <t t-esc='record.location_id.value'/></span>
                                                 </div>
                                             </div>
                                             <div class="row">
-                                                <div class="col-xs-12 text-muted">
+                                                <div class="col-12 text-muted">
                                                     <span><t t-esc='record.theoretical_qty.string'/>: <t t-esc='record.theoretical_qty.value'/></span>
                                                 </div>
                                             </div>
                                             <div class="row">
-                                                <div class="col-xs-12 text-muted">
+                                                <div class="col-12 text-muted">
                                                     <span><t t-esc='record.product_qty.string'/>: <t t-esc='record.product_qty.value'/></span>
                                                 </div>
                                             </div>
diff --git a/addons/stock/views/stock_move_line_views.xml b/addons/stock/views/stock_move_line_views.xml
index 6665f1c5ae9..f979463f8af 100644
--- a/addons/stock/views/stock_move_line_views.xml
+++ b/addons/stock/views/stock_move_line_views.xml
@@ -94,13 +94,13 @@
                             <strong><field name="product_id"/></strong>
                             <field name="picking_id"/>
                             <div class="row">
-                                <div class="col-xs-6">
+                                <div class="col-6">
                                     <field name="lot_id" invisible="not context.get('show_lots_m2o')" domain="[('product_id', '=', product_id)]" groups="stock.group_production_lot" context="{'default_product_id': product_id, 'active_picking_id': picking_id}"/>
                                     <field name="lot_name" invisible="not context.get('show_lots_text')" groups="stock.group_production_lot"/>
                                     <field name="qty_done" string="Quantity Done"/>
                                     <field name="product_uom_id" string="Unit of Measure" groups="uom.group_uom"/>
                                 </div>
-                                <div class="col-xs-6 text-right">
+                                <div class="col-6 text-right">
                                     <field name="date"/>
                                 </div>
                             </div>
diff --git a/addons/stock/views/stock_move_views.xml b/addons/stock/views/stock_move_views.xml
index 8bfddbfc593..4196c3d927a 100644
--- a/addons/stock/views/stock_move_views.xml
+++ b/addons/stock/views/stock_move_views.xml
@@ -442,10 +442,10 @@
                         <t t-name="kanban-box">
                             <div t-attf-class="oe_kanban_global_click">
                                 <div class="row mb4">
-                                    <div class="col-xs-8">
+                                    <div class="col-8">
                                         <strong><span><field name="product_id"/></span></strong>
                                     </div>
-                                    <div class="col-xs-4">
+                                    <div class="col-4">
                                         <span class="pull-right text-right">
                                             <field name="state" widget="kanban_label_selection" options="{'classes': {'draft': 'default', 'cancel': 'danger',
                                             'assigned': 'success', 'confirmed': 'default'}}"/>
@@ -453,10 +453,10 @@
                                     </div>
                                 </div>
                                 <div class="row">
-                                    <div class="col-xs-4">
+                                    <div class="col-4">
                                         <strong><span><field name="priority" widget="priority"/></span></strong>
                                     </div>
-                                    <div class="col-xs-8">
+                                    <div class="col-8">
                                         <span class="pull-right">
                                             <i class="fa fa-clock-o" role="img" aria-label="Date" title="Date"/> <field name="date"/>
                                         </span>
@@ -498,18 +498,18 @@
                         <t t-name="kanban-box">
                             <div t-attf-class="oe_kanban_global_click">
                                 <div class="row mb4">
-                                    <div class="col-xs-6">
+                                    <div class="col-6">
                                         <strong><field name="product_id"/></strong>
                                     </div>
-                                    <div class="col-xs-6 pull-right text-right">
+                                    <div class="col-6 pull-right text-right">
                                         <strong>Qty: </strong><field name="product_uom_qty"/>
                                     </div>
                                 </div>
                                 <div class="row">
-                                    <div class="col-xs-6 text-muted">
+                                    <div class="col-6 text-muted">
                                         <field name="priority" widget="priority"/>
                                     </div>
-                                    <div class="col-xs-6">
+                                    <div class="col-6">
                                         <span class="pull-right">
                                             <field name="state" widget="kanban_label_selection" options="{'classes': {'draft': 'info', 'cancel': 'default',
                                             'assigned': 'success', 'done': 'success'}}"/>
diff --git a/addons/stock/views/stock_picking_views.xml b/addons/stock/views/stock_picking_views.xml
index 56be0930cb4..5ee1164c71b 100644
--- a/addons/stock/views/stock_picking_views.xml
+++ b/addons/stock/views/stock_picking_views.xml
@@ -645,46 +645,46 @@
                                     </div>
                                     <div class="container o_kanban_card_content">
                                         <div class="row">
-                                            <div class="col-xs-6 o_kanban_primary_left">
+                                            <div class="col-6 o_kanban_primary_left">
                                                 <button class="btn btn-primary" name="get_action_picking_tree_ready" type="object">
                                                     <span t-if="record.code.raw_value =='incoming'"><t t-esc="record.count_picking_ready.value"/> To Receive</span>
                                                     <span t-if="record.code.raw_value =='outgoing'"><t t-esc="record.count_picking_ready.value"/> To Do</span>
                                                     <span t-if="record.code.raw_value =='internal'"><t t-esc="record.count_picking_ready.value"/> Transfers</span>
                                                 </button>
                                             </div>
-                                            <div class="col-xs-6 o_kanban_primary_right">
+                                            <div class="col-6 o_kanban_primary_right">
                                                 <div t-if="record.count_picking_ready.raw_value > 0" class="row">
                                                 </div>
 
                                                 <div t-if="record.count_picking_waiting.raw_value > 0" class="row">
-                                                    <div class="col-xs-9">
+                                                    <div class="col-9">
                                                         <a name="get_action_picking_tree_waiting" type="object">
                                                             Waiting
                                                         </a>
                                                     </div>
-                                                    <div class="col-xs-3">
+                                                    <div class="col-3">
                                                         <field name="count_picking_waiting"/>
                                                     </div>
                                                 </div>
 
                                                 <div t-if="record.count_picking_late.raw_value > 0" class="row">
-                                                    <div class="col-xs-9">
+                                                    <div class="col-9">
                                                         <a class="oe_kanban_stock_picking_type_list" name="get_action_picking_tree_late" type="object">
                                                             Late
                                                         </a>
                                                     </div>
-                                                    <div class="col-xs-3">
+                                                    <div class="col-3">
                                                         <field name="count_picking_late"/>
                                                     </div>
                                                 </div>
 
                                                 <div t-if="record.count_picking_backorders.raw_value > 0" class="row">
-                                                    <div class="col-xs-9">
+                                                    <div class="col-9">
                                                         <a class="oe_kanban_stock_picking_type_list" name="get_action_picking_tree_backorder" type="object">
                                                             Back Orders
                                                         </a>
                                                     </div>
-                                                    <div class="col-xs-3">
+                                                    <div class="col-3">
                                                         <field name="count_picking_backorders"/>
                                                     </div>
                                                 </div>
@@ -692,7 +692,7 @@
                                         </div>
                                     </div><div class="container o_kanban_card_manage_pane dropdown-menu" role="menu">
                                         <div class="row">
-                                            <div class="col-xs-6 o_kanban_card_manage_section o_kanban_manage_view">
+                                            <div class="col-6 o_kanban_card_manage_section o_kanban_manage_view">
                                                 <div role="menuitem" class="o_kanban_card_manage_title">
                                                     <span>View</span>
                                                 </div>
@@ -706,7 +706,7 @@
                                                     <a name="get_action_picking_tree_waiting" type="object">Waiting</a>
                                                 </div>
                                             </div>
-                                            <div class="col-xs-6 o_kanban_card_manage_section o_kanban_manage_new">
+                                            <div class="col-6 o_kanban_card_manage_section o_kanban_manage_new">
                                                 <div role="menuitem" class="o_kanban_card_manage_title">
                                                     <span>New</span>
                                                 </div>
@@ -720,10 +720,10 @@
                                         </div>
 
                                         <div t-if="widget.editable" class="o_kanban_card_manage_settings row">
-                                            <div class="col-xs-8" role="menuitem" aria-haspopup="true">
+                                            <div class="col-8" role="menuitem" aria-haspopup="true">
                                                 <ul class="oe_kanban_colorpicker" data-field="color" role="menu"/>
                                             </div>
-                                            <div role="menuitem" class="col-xs-4 text-right">
+                                            <div role="menuitem" class="col-4 text-right">
                                                 <a type="edit">Settings</a>
                                             </div>
                                         </div>
diff --git a/addons/stock/views/stock_scrap_views.xml b/addons/stock/views/stock_scrap_views.xml
index ac91b1b8417..0fe7c67ed43 100644
--- a/addons/stock/views/stock_scrap_views.xml
+++ b/addons/stock/views/stock_scrap_views.xml
@@ -82,19 +82,19 @@
                         <t t-name="kanban-box">
                             <div class="oe_kanban_global_click">
                                 <div class="row mb4">
-                                    <strong class="col-xs-6">
+                                    <strong class="col-6">
                                         <span t-esc="record.name.value"/>
                                     </strong>
-                                    <strong t-if="record.date_expected.value" class="col-xs-6 text-right">
+                                    <strong t-if="record.date_expected.value" class="col-6 text-right">
                                         <i class="fa fa-clock-o" role="img" aria-label="Expected date" title="Expected date"/><span t-esc="record.date_expected.value"/>
                                     </strong>
-                                    <div class="col-xs-12">
+                                    <div class="col-12">
                                         <span t-esc="record.product_id.value"/>
                                     </div>
-                                    <div class="col-xs-6">
+                                    <div class="col-6">
                                         <span t-esc="record.scrap_qty.value"/>
                                     </div>
-                                    <div class="col-xs-6">
+                                    <div class="col-6">
                                         <span class="pull-right label label-default">
                                             <field name="state"/>
                                         </span>
diff --git a/addons/stock_account/views/product_views.xml b/addons/stock_account/views/product_views.xml
index fac4a4e70fd..0b69dcfdc6c 100644
--- a/addons/stock_account/views/product_views.xml
+++ b/addons/stock_account/views/product_views.xml
@@ -42,7 +42,7 @@
                             attrs="{'readonly':[('valuation','=','real_time')]}"
                             widget='monetary' options="{'currency_field': 'currency_id', 'field_digits': True}"
                             class="pull-left"/>
-                        <div name="update_cost_price" class="col-md-2">
+                        <div name="update_cost_price" class="col-lg-2">
                             <button string="Update Cost" type="action"
                             name="%(action_view_change_standard_price)d"
                             attrs="{'invisible':['|', '|', ('valuation','!=', 'real_time'), ('cost_method', 'not in', ['average', 'standard']), ('product_variant_count', '>', 1)]}"
@@ -78,7 +78,7 @@
                             <field name="standard_price"
                                 attrs="{'readonly':[('valuation','=','real_time')]}"
                                 widget='monetary' options="{'currency_field': 'currency_id', 'field_digits': True}" class="pull-left"/>
-                            <div name="update_cost_price" class="col-md-2">
+                            <div name="update_cost_price" class="col-lg-2">
                                 <button string="Update Cost" type="action"
                                 name="%(action_view_change_standard_price)d"
                                 attrs="{'invisible':['|',('valuation','!=', 'real_time'), ('cost_method', 'not in', ['standard', 'average'])]}"
diff --git a/addons/stock_account/views/res_config_settings_views.xml b/addons/stock_account/views/res_config_settings_views.xml
index 332e1307ba5..842c8c01244 100644
--- a/addons/stock_account/views/res_config_settings_views.xml
+++ b/addons/stock_account/views/res_config_settings_views.xml
@@ -9,7 +9,7 @@
                 <div id="production_lot_info" position="after">
                     <h2>Costing</h2>
                     <div class="row mt16 o_settings_container">
-                        <div class="col-xs-12 col-md-6 o_setting_box" title="Affect landed costs on reception operations and split them among products to update their cost price.">
+                        <div class="col-12 col-lg-6 o_setting_box" title="Affect landed costs on reception operations and split them among products to update their cost price.">
                             <div class="o_setting_left_pane">
                                 <field name="module_stock_landed_costs"/>
                             </div>
diff --git a/addons/stock_landed_costs/views/stock_landed_cost_views.xml b/addons/stock_landed_costs/views/stock_landed_cost_views.xml
index a618f8e21d2..8e80e62e3b2 100644
--- a/addons/stock_landed_costs/views/stock_landed_cost_views.xml
+++ b/addons/stock_landed_costs/views/stock_landed_cost_views.xml
@@ -126,18 +126,18 @@
                         <t t-name="kanban-box">
                             <div class="oe_kanban_global_click">
                                 <div class="row mb4">
-                                    <strong class="col-xs-6">
+                                    <strong class="col-6">
                                         <span t-esc="record.name.value"/>
                                     </strong>
-                                    <div class="col-xs-6">
+                                    <div class="col-6">
                                         <span class="pull-right label label-default">
                                             <field name="state"/>
                                         </span>
                                     </div>
-                                    <div class="col-xs-6">
+                                    <div class="col-6">
                                         <i class="fa fa-clock-o" title="Date" role="img" aria-label="Date"/><span t-esc="record.date.value"/>
                                     </div>
-                                    <div class="col-xs-6 text-right">
+                                    <div class="col-6 text-right">
                                         <field name="account_journal_id"/>
                                     </div>
                                 </div>
diff --git a/addons/survey/static/src/js/survey.js b/addons/survey/static/src/js/survey.js
index f2d5e50fbbe..991a742e65d 100644
--- a/addons/survey/static/src/js/survey.js
+++ b/addons/survey/static/src/js/survey.js
@@ -56,11 +56,11 @@ if(!the_form.length) {
     $('.js_drop select').change(function(){
         var other_val = $(this).find('.js_other_option').val();
         if($(this).val() === other_val){
-            $(this).parent().removeClass('col-md-12').addClass('col-md-6');
+            $(this).parent().removeClass('col-lg-12').addClass('col-lg-6');
             $(this).closest('.js_drop').find('input[data-oe-survey-othert="1"]').show().focus();
         }
         else{
-            $(this).parent().removeClass('col-md-6').addClass('col-md-12');
+            $(this).parent().removeClass('col-lg-6').addClass('col-lg-12');
             $(this).closest('.js_drop').find('input[data-oe-survey-othert="1"]').val("").hide();
         }
     });
diff --git a/addons/survey/views/survey_templates.xml b/addons/survey/views/survey_templates.xml
index 0434d60de4e..f4bd6c58057 100644
--- a/addons/survey/views/survey_templates.xml
+++ b/addons/survey/views/survey_templates.xml
@@ -244,7 +244,7 @@
 
     <template id="simple_choice" name="Simple choice">
         <div t-if="question.display_mode == 'dropdown' and token" class="js_drop row">
-            <div class="col-md-12">
+            <div class="col-lg-12">
                 <select class="form-control" t-att-name="prefix">
                     <option disabled="1" selected="1" value="">Choose...</option>
                     <t t-foreach='question.labels_ids' t-as='label'>
@@ -255,29 +255,29 @@
                     </t>
                 </select>
             </div>
-            <div t-if='question.comments_allowed and question.comment_count_as_answer' class="col-md-6">
+            <div t-if='question.comments_allowed and question.comment_count_as_answer' class="col-lg-6">
                 <input type="text" class="form-control" t-att-name="'%s_%s' % (prefix, 'comment')" data-oe-survey-othert="1"/>
             </div>
-            <div t-if='question.comments_allowed and not question.comment_count_as_answer' class="col-md-12 mt16">
+            <div t-if='question.comments_allowed and not question.comment_count_as_answer' class="col-lg-12 mt16">
                 <span t-field="question.comments_message"/>
                 <input type="text" class="form-control" t-att-name="'%s_%s' % (prefix, 'comment')"/>
             </div>
         </div>
         <div t-if="question.display_mode == 'columns' or not token" class="row js_radio">
-            <div t-foreach='question.labels_ids' t-as='label' t-attf-class="col-md-#{question.column_nb}">
+            <div t-foreach='question.labels_ids' t-as='label' t-attf-class="col-lg-#{question.column_nb}">
                 <label t-att-class="' bg-success ' if quizz_correction and label.quizz_mark > 0.0 else None">
                     <input type="radio" t-att-name="prefix" t-att-value='label.id' />
                     <span t-field='label.value'/>
                 </label>
             </div>
-            <div t-if='question.comments_allowed and question.comment_count_as_answer' class="js_comments col-md-12" >
+            <div t-if='question.comments_allowed and question.comment_count_as_answer' class="js_comments col-lg-12" >
                 <label>
                     <input type="radio" t-att-name="prefix" value="-1"/>
                     <span t-field="question.comments_message" />
                 </label>
                 <input type="text" class="form-control" t-att-name="'%s_%s' % (prefix, 'comment')"/>
             </div>
-            <div t-if='question.comments_allowed and not question.comment_count_as_answer' class="col-md-12">
+            <div t-if='question.comments_allowed and not question.comment_count_as_answer' class="col-lg-12">
                 <span t-field="question.comments_message"/>
                 <input type="text" class="form-control" t-att-name="'%s_%s' % (prefix, 'comment')" data-oe-survey-othert="1"/>
             </div>
@@ -286,20 +286,20 @@
 
     <template id="multiple_choice" name="Multiple choice">
         <div class="row">
-            <div t-foreach='question.labels_ids' t-as='label' t-attf-class="col-md-#{question.column_nb}">
+            <div t-foreach='question.labels_ids' t-as='label' t-attf-class="col-lg-#{question.column_nb}">
                 <label t-att-class="' bg-success ' if quizz_correction and label.quizz_mark > 0.0 else None">
                     <input type="checkbox" t-att-name="'%s_%s' % (prefix, label.id)" t-att-value='label.id' />
                     <span t-field='label.value'/>
                 </label>
             </div>
-            <div t-if='question.comments_allowed and question.comment_count_as_answer' class="js_ck_comments col-md-12" >
+            <div t-if='question.comments_allowed and question.comment_count_as_answer' class="js_ck_comments col-lg-12" >
                 <label>
                     <input type="checkbox" t-att-name="'%s_%s' % (prefix, -1)" value="-1" />
                     <span t-field="question.comments_message" />
                 </label>
                 <input type="text" class="form-control" t-att-name="'%s_%s' % (prefix, 'comment')"/>
             </div>
-            <div t-if='question.comments_allowed and not question.comment_count_as_answer' class="col-md-12">
+            <div t-if='question.comments_allowed and not question.comment_count_as_answer' class="col-lg-12">
                 <span t-field="question.comments_message"/>
                 <input type="text" class="form-control" t-att-name="'%s_%s' % (prefix, 'comment')" data-oe-survey-othert="1"/>
             </div>
diff --git a/addons/survey/views/survey_views.xml b/addons/survey/views/survey_views.xml
index 4a259b67e51..246769dc88b 100644
--- a/addons/survey/views/survey_views.xml
+++ b/addons/survey/views/survey_views.xml
@@ -408,7 +408,7 @@
                                 <field name="type" widget="radio" />
                             </group>
                             <group>
-                                <div class="col-md-6 col-md-offset-3 o_preview_questions">
+                                <div class="col-lg-6 offset-lg-3 o_preview_questions">
                                     <!-- Multiple Lines Text Zone -->
                                     <div attrs="{'invisible': [('type', '!=', 'free_text')]}">
                                             <i class="fa fa-align-justify fa-4x" role="img" aria-label="Multiple lines" title="Multiple Lines"/>
@@ -442,28 +442,28 @@
                                     <!-- Matrix -->
                                     <div attrs="{'invisible': [('type', '!=', 'matrix')]}">
                                         <div class="row o_matrix_head">
-                                            <div class="col-md-3"></div>
-                                            <div class="col-md-3">ans</div>
-                                            <div class="col-md-3">ans</div>
-                                            <div class="col-md-3">ans</div>
+                                            <div class="col-lg-3"></div>
+                                            <div class="col-lg-3">ans</div>
+                                            <div class="col-lg-3">ans</div>
+                                            <div class="col-lg-3">ans</div>
                                         </div>
                                         <div class="row o_matrix_row">
-                                            <div class="col-md-3">Row1</div>
-                                            <div class="col-md-3"><i class="fa fa-circle-o fa-lg" role="img" aria-label="Not checked" title="Not checked"/></div>
-                                            <div class="col-md-3"><i class="fa fa-dot-circle-o fa-lg" role="img" aria-label="Checked" title="Checked"/></div>
-                                            <div class="col-md-3"><i class="fa fa-circle-o fa-lg" role="img" aria-label="Not checked" title="Not checked"/></div>
+                                            <div class="col-lg-3">Row1</div>
+                                            <div class="col-lg-3"><i class="fa fa-circle-o fa-lg" role="img" aria-label="Not checked" title="Not checked"/></div>
+                                            <div class="col-lg-3"><i class="fa fa-dot-circle-o fa-lg" role="img" aria-label="Checked" title="Checked"/></div>
+                                            <div class="col-lg-3"><i class="fa fa-circle-o fa-lg" role="img" aria-label="Not checked" title="Not checked"/></div>
                                         </div>
                                         <div class="row o_matrix_row">
-                                            <div class="col-md-3">Row2</div>
-                                            <div class="col-md-3"><i class="fa fa-circle-o fa-lg" role="img" aria-label="Not checked" title="Not checked"/></div>
-                                            <div class="col-md-3"><i class="fa fa-circle-o fa-lg" role="img" aria-label="Not checked" title="Not checked"/></div>
-                                            <div class="col-md-3"><i class="fa fa-dot-circle-o fa-lg" role="img" aria-label="Checked" title="Checked"/></div>
+                                            <div class="col-lg-3">Row2</div>
+                                            <div class="col-lg-3"><i class="fa fa-circle-o fa-lg" role="img" aria-label="Not checked" title="Not checked"/></div>
+                                            <div class="col-lg-3"><i class="fa fa-circle-o fa-lg" role="img" aria-label="Not checked" title="Not checked"/></div>
+                                            <div class="col-lg-3"><i class="fa fa-dot-circle-o fa-lg" role="img" aria-label="Checked" title="Checked"/></div>
                                         </div>
                                         <div class="row o_matrix_row">
-                                            <div class="col-md-3">Row3</div>
-                                            <div class="col-md-3"><i class="fa fa-dot-circle-o fa-lg" role="img" aria-label="Checked" title="Checked"/></div>
-                                            <div class="col-md-3"><i class="fa fa-circle-o fa-lg" role="img" aria-label="Not checked" title="Not checked"/></div>
-                                            <div class="col-md-3"><i class="fa fa-circle-o fa-lg" role="img" aria-label="Not checked" title="Not checked"/></div>
+                                            <div class="col-lg-3">Row3</div>
+                                            <div class="col-lg-3"><i class="fa fa-dot-circle-o fa-lg" role="img" aria-label="Checked" title="Checked"/></div>
+                                            <div class="col-lg-3"><i class="fa fa-circle-o fa-lg" role="img" aria-label="Not checked" title="Not checked"/></div>
+                                            <div class="col-lg-3"><i class="fa fa-circle-o fa-lg" role="img" aria-label="Not checked" title="Not checked"/></div>
                                         </div>
                                     </div>
                                 </div>
diff --git a/addons/theme_bootswatch/views/theme_bootswatch_templates.xml b/addons/theme_bootswatch/views/theme_bootswatch_templates.xml
index 142c9d5afc5..21dc869e441 100644
--- a/addons/theme_bootswatch/views/theme_bootswatch_templates.xml
+++ b/addons/theme_bootswatch/views/theme_bootswatch_templates.xml
@@ -12,7 +12,7 @@
                         </header>
                         <main class="modal-body">
                             <div class="row">
-                                <div class="col-xs-4 col-xs-offset-4">
+                                <div class="col-4 offset-4">
                                     <label class="checked">
                                         <img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/img/bootswatch_default_thumbnail.png" alt="Default Theme"/>
                                         <input name="theme" type="radio" data-xmlid="" checked="checked"/>
@@ -20,19 +20,19 @@
                                 </div>
                             </div>
                             <div class="row">
-                                <div class="col-xs-4">
+                                <div class="col-4">
                                     <label>
                                         <img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/img/cerulean_thumbnail.png" alt="Cerulean"/>
                                         <input name="theme" type="radio" data-xmlid="theme_bootswatch.theme_cerulean_bs_variables,theme_bootswatch.theme_cerulean"/>
                                     </label>
                                 </div>
-                                <div class="col-xs-4">
+                                <div class="col-4">
                                     <label>
                                         <img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/img/cosmo_thumbnail.png" alt="Cosmo"/>
                                         <input name="theme" type="radio" data-xmlid="theme_bootswatch.theme_cosmo_bs_variables,theme_bootswatch.theme_cosmo" data-disable="ee"/>
                                     </label>
                                 </div>
-                                <div class="col-xs-4">
+                                <div class="col-4">
                                     <label>
                                         <img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/img/cyborg_thumbnail.png" alt="Cyborg"/>
                                         <input name="theme" type="radio" data-xmlid="theme_bootswatch.theme_cyborg_bs_variables,theme_bootswatch.theme_cyborg"/>
@@ -40,19 +40,19 @@
                                 </div>
                             </div>
                             <div class="row">
-                                <div class="col-xs-4">
+                                <div class="col-4">
                                     <label>
                                         <img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/img/flatly_thumbnail.png" alt="Flatly"/>
                                         <input name="theme" type="radio" data-xmlid="theme_bootswatch.theme_flatly_bs_variables,theme_bootswatch.theme_flatly"/>
                                     </label>
                                 </div>
-                                <div class="col-xs-4">
+                                <div class="col-4">
                                     <label>
                                         <img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/img/journal_thumbnail.png" alt="Journal"/>
                                         <input name="theme" type="radio" data-xmlid="theme_bootswatch.theme_journal_bs_variables,theme_bootswatch.theme_journal"/>
                                     </label>
                                 </div>
-                                <div class="col-xs-4">
+                                <div class="col-4">
                                     <label>
                                         <img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/img/simplex_thumbnail.png" alt="Simplex"/>
                                         <input name="theme" type="radio" data-xmlid="theme_bootswatch.theme_simplex_bs_variables,theme_bootswatch.theme_simplex"/>
@@ -60,19 +60,19 @@
                                 </div>
                             </div>
                             <div class="row">
-                                <div class="col-xs-4">
+                                <div class="col-4">
                                     <label>
                                         <img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/img/slate_thumbnail.png" alt="Slate"/>
                                         <input name="theme" type="radio" data-xmlid="theme_bootswatch.theme_slate_bs_variables,theme_bootswatch.theme_slate"/>
                                     </label>
                                 </div>
-                                <div class="col-xs-4">
+                                <div class="col-4">
                                     <label>
                                         <img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/img/spacelab_thumbnail.png" alt="Spacelab"/>
                                         <input name="theme" type="radio" data-xmlid="theme_bootswatch.theme_spacelab_bs_variables,theme_bootswatch.theme_spacelab"/>
                                     </label>
                                 </div>
-                                <div class="col-xs-4">
+                                <div class="col-4">
                                     <label>
                                         <img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/img/united_thumbnail.png" alt="United"/>
                                         <input name="theme" type="radio" data-xmlid="theme_bootswatch.theme_united_bs_variables,theme_bootswatch.theme_united"/>
diff --git a/addons/web/static/src/js/fields/basic_fields.js b/addons/web/static/src/js/fields/basic_fields.js
index 707a944a727..b48ea9022f9 100644
--- a/addons/web/static/src/js/fields/basic_fields.js
+++ b/addons/web/static/src/js/fields/basic_fields.js
@@ -2689,7 +2689,7 @@ var ImageSelection = AbstractField.extend({
         var self = this;
         this.$el.empty();
         _.each(this.nodeOptions, function (val, key) {
-            var $container = $('<div>').addClass('col-xs-3 text-center');
+            var $container = $('<div>').addClass('col-3 text-center');
             var $img = $('<img>')
                 .addClass('img img-fluid img-thumbnail ml16')
                 .toggleClass('btn-info', key === self.value)
diff --git a/addons/web/static/src/scss/layout_background.scss b/addons/web/static/src/scss/layout_background.scss
index e04ff85597c..400ba12789b 100644
--- a/addons/web/static/src/scss/layout_background.scss
+++ b/addons/web/static/src/scss/layout_background.scss
@@ -48,7 +48,7 @@
         }
     }
     /*Total table*/
-    .row > .col-xs-4 > table {
+    .row > .col-4 > table {
         tr:nth-child(odd) {
             background-color: transparent !important;
         }
diff --git a/addons/web/static/src/scss/layout_boxed.scss b/addons/web/static/src/scss/layout_boxed.scss
index 3e91ed87805..426b3dd2aac 100644
--- a/addons/web/static/src/scss/layout_boxed.scss
+++ b/addons/web/static/src/scss/layout_boxed.scss
@@ -55,7 +55,7 @@
         }
     }
     /*Total table*/
-    .row > .col-xs-4 > table {
+    .row > .col-4 > table {
         td {
             border-right: none;
         }
diff --git a/addons/web/static/src/scss/layout_clean.scss b/addons/web/static/src/scss/layout_clean.scss
index 88eb5d43f32..06b2e808dd4 100644
--- a/addons/web/static/src/scss/layout_clean.scss
+++ b/addons/web/static/src/scss/layout_clean.scss
@@ -66,7 +66,7 @@
         }
     }
     /*Total table*/
-    .row > .col-xs-4 {
+    .row > .col-4 {
             width: 43%;
             position: relative;
             top: -20px;
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index 561290d6322..aa99336d218 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -1296,7 +1296,7 @@
 
 <div t-name="ExportDialog" class="o_export">
     <div class="row">
-        <div class="col-md-6">
+        <div class="col-lg-6">
             <strong>What do you want to do?</strong>
             <div class="o_import_compat">
                 <div class="radio">
@@ -1313,7 +1313,7 @@
                 </div>
             </div>
         </div>
-        <div class="col-md-6">
+        <div class="col-lg-6">
             <strong>Export Format:</strong>
             <div class="o_export_format"/>
         </div>
@@ -1480,7 +1480,7 @@
 
 <t t-name="EnterpriseUpgrade">
     <div class="row" role="status">
-        <div class="col-xs-6">
+        <div class="col-6">
             Get this feature and much more with Odoo Enterprise!
             <ul class="list-unstyled">
                 <li><i class="fa fa-check"></i> Access to all Enterprise Apps</li>
@@ -1491,7 +1491,7 @@
                 <li><a href="http://www.odoo.com/editions" target="_blank"><i class="fa fa-plus"></i> And more</a></li>
             </ul>
         </div>
-        <div class="col-xs-6">
+        <div class="col-6">
             <img class="img-fluid" t-att-src='_s + "/web/static/src/img/enterprise_upgrade.jpg"' draggable="false" alt="Upgrade to enterprise"/>
         </div>
     </div>
diff --git a/addons/web/views/database_manager.html b/addons/web/views/database_manager.html
index 32033d94987..d0da907076c 100644
--- a/addons/web/views/database_manager.html
+++ b/addons/web/views/database_manager.html
@@ -58,7 +58,7 @@
   {{ master_input() }}
   <div class="form-group">
     <div class="row">
-      <div class="col-md-12">
+      <div class="col-lg-12">
         <label for="name" class="control-label">Database Name</label>
         <input id="name" type="text" name="name" class="form-control" required="required" autocomplete="off" pattern="{{ pattern }}" title="Only alphanumerical characters, underscore, hyphen and dot are allowed"/>
       </div>
@@ -66,7 +66,7 @@
   </div>
   <div class="form-group">
     <div class="row">
-      <div class="col-md-12">
+      <div class="col-lg-12">
         <label for="login" class="control-label">Email</label>
         <input id="login" type="text" name="login" class="form-control" required="required" autocomplete="off"/>
       </div>
@@ -79,7 +79,7 @@
   </div>
   <div class="form-group">
     <div class="row">
-      <div class="col-md-6">
+      <div class="col-lg-6">
         <label for="lang" class="control-label">Language</label>
         <select id="lang" name="lang" class="form-control" required="required" autocomplete="off">
           {% for lang in langs %}
@@ -87,7 +87,7 @@
           {% endfor %}
         </select>
       </div>
-      <div class="col-md-6">
+      <div class="col-lg-6">
           <label for="country" class="control-label">Country</label>
           <select id="country" name="country_code" class="form-control" autocomplete="off">
               <option value=""></option>
@@ -112,7 +112,7 @@
 <body class="container">
   <!-- Database List -->
   <div class="row">
-    <div class="col-md-6 col-md-offset-3 o_database_list">
+    <div class="col-lg-6 offset-lg-3 o_database_list">
       <div class="text-center">
         <img src="/web/static/src/img/logo2.png" class="img-fluid center-block"/>
       </div>
diff --git a/addons/web/views/report_templates.xml b/addons/web/views/report_templates.xml
index d8d6f72dca7..3f108840b86 100644
--- a/addons/web/views/report_templates.xml
+++ b/addons/web/views/report_templates.xml
@@ -145,12 +145,12 @@
     <!-- External layouts styles -->
 
     <template id="address_layout">
-        <t t-set="colclass" t-value="'col-xs-5 col-xs-offset-7'"/>
+        <t t-set="colclass" t-value="'col-5 offset-7'"/>
         <t t-if="address">
             <div class="row">
                 <t t-if="information_block">
-                    <t t-set="colclass" t-value="'col-xs-5 col-xs-offset-1'"/>
-                    <div name="information_block" class="col-xs-6">
+                    <t t-set="colclass" t-value="'col-5 offset-1'"/>
+                    <div name="information_block" class="col-6">
                         <t t-raw="information_block"/>
                     </div>
                 </t>
@@ -204,10 +204,10 @@
     <template id="external_layout_boxed">
         <div class="header o_boxed_header">
             <div class="row mb8">
-                <div class="col-xs-6">
+                <div class="col-6">
                     <img t-if="company.logo" t-att-src="'data:image/png;base64,%s' % to_text(company.logo)" alt="Logo"/>
                 </div>
-                <div class="col-xs-6 text-right mb4">
+                <div class="col-6 text-right mb4">
                     <h4 class="mt0" t-field="company.report_header"/>
                     <div name="company_address" class="mb4">
                         <span class="company_address" t-field="company.partner_id"
@@ -241,10 +241,10 @@
     <template id="external_layout_clean">
         <div class="header o_clean_header">
             <div class="row">
-                <div class="col-xs-6">
+                <div class="col-6">
                     <img t-if="company.logo" t-att-src="'data:image/png;base64,%s' % to_text(company.logo)" alt="Logo"/>
                 </div>
-                <div class="col-xs-5 col-xs-offset-1" name="company_address">
+                <div class="col-5 offset-1" name="company_address">
                     <ul class="list-unstyled">
                         <strong><li t-if="company.name"><span t-field="company.name"/></li></strong>
                         <li t-if="company.vat"><t t-esc="company.country_id.vat_label or 'TIN'"/>: <span t-field="company.vat"/></li>
@@ -263,17 +263,17 @@
 
         <div class="footer o_clean_footer">
             <div class="row mt8">
-                <div class="col-xs-3">
+                <div class="col-3">
                     <span t-field="company.report_footer"/>
                 </div>
-                <div class="col-xs-4 text-right">
+                <div class="col-4 text-right">
                     <span class="company_address" t-field="company.partner_id"
                         t-field-options='{"widget": "contact", "fields": ["address"], "no_marker": true}'/>
                 </div>
-                <div class="col-xs-4">
+                <div class="col-4">
                     <h4 class="mt0 mb0 text-uppercase" t-field="company.report_header"/>
                 </div>
-                <div class="col-xs-1">
+                <div class="col-1">
                     <ul t-if="not type_html" class="list-inline pagenumber pull-right text-center">
                         <li><strong><span class="page"/></strong></li>
                     </ul>
@@ -285,18 +285,18 @@
     <template id="external_layout_standard">
         <div class="header">
             <div class="row">
-                <div class="col-xs-3 mb4">
+                <div class="col-3 mb4">
                     <img t-if="company.logo" t-att-src="'data:image/png;base64,%s' % to_text(company.logo)" style="max-height: 45px;" alt="Logo"/>
                 </div>
-                <div class="col-xs-9 text-right" style="margin-top:22px;" t-field="company.report_header" name="moto"/>
+                <div class="col-9 text-right" style="margin-top:22px;" t-field="company.report_header" name="moto"/>
             </div>
             <div t-if="company.logo or company.report_header" class="row zero_min_height">
-                <div class="col-xs-12">
+                <div class="col-12">
                     <div style="border-bottom: 1px solid black;"/>
                 </div>
             </div>
             <div class="row">
-                <div class="col-xs-6" name="company_address">
+                <div class="col-6" name="company_address">
                     <span t-field="company.partner_id"
                         t-field-options='{"widget": "contact", "fields": ["address", "name"], "no_marker": true}'
                         style="border-bottom: 1px solid black; display:inline-block;"/>
@@ -359,13 +359,13 @@
 
         <div class="header">
             <div class="row">
-                <div class="col-xs-3">
+                <div class="col-3">
                     <span t-esc="context_timestamp(datetime.datetime.now()).strftime('%Y-%m-%d %H:%M')"/>
                 </div>
-                <div class="col-xs-2 col-xs-offset-2 text-center">
+                <div class="col-2 offset-2 text-center">
                     <span t-esc="company.name"/>
                 </div>
-                <div class="col-xs-2 col-xs-offset-3 text-right">
+                <div class="col-2 offset-3 text-right">
                     <ul class="list-inline">
                         <li><span class="page"/></li>
                         <li>/</li>
diff --git a/addons/web/views/webclient_templates.xml b/addons/web/views/webclient_templates.xml
index 2039acc7bdc..805ef9ff3e9 100644
--- a/addons/web/views/webclient_templates.xml
+++ b/addons/web/views/webclient_templates.xml
@@ -336,7 +336,7 @@
             <t t-set="body_classname" t-value="'container'"/>
 
             <div class="row">
-                <div class="col-md-6 col-md-offset-3 o_database_list">
+                <div class="col-lg-6 offset-lg-3 o_database_list">
                     <div class="text-center">
                         <img t-attf-src="/web/binary/company_logo{{ '?dbname='+db if db else '' }}" alt="Logo"/>
                     </div>
diff --git a/addons/web_editor/static/lib/summernote/src/js/Renderer.js b/addons/web_editor/static/lib/summernote/src/js/Renderer.js
index 4886a76377b..e461bdb892f 100644
--- a/addons/web_editor/static/lib/summernote/src/js/Renderer.js
+++ b/addons/web_editor/static/lib/summernote/src/js/Renderer.js
@@ -536,7 +536,7 @@ define([
      * @param {String} body
      */
     var tplShortcut = function (title, keys) {
-      var keyClass = 'note-shortcut-col col-xs-6 note-shortcut-';
+      var keyClass = 'note-shortcut-col col-6 note-shortcut-';
       var body = [];
 
       for (var i in keys) {
@@ -548,7 +548,7 @@ define([
         }
       }
 
-      return '<div class="note-shortcut-row row"><div class="' + keyClass + 'title col-xs-offset-6">' + title + '</div></div>' +
+      return '<div class="note-shortcut-row row"><div class="' + keyClass + 'title offset-6">' + title + '</div></div>' +
              '<div class="note-shortcut-row row">' + body.join('</div><div class="note-shortcut-row row">') + '</div>';
     };
 
@@ -616,7 +616,7 @@ define([
     };
 
     var tplShortcutTable = function (lang, options) {
-      var colClass = 'class="note-shortcut note-shortcut-col col-sm-6 col-xs-12"';
+      var colClass = 'class="note-shortcut note-shortcut-col col-md-6 col-12"';
       var template = [
         '<div ' + colClass + '>' + tplShortcutAction(lang, options) + '</div>' +
         '<div ' + colClass + '>' + tplShortcutText(lang, options) + '</div>',
diff --git a/addons/web_editor/static/src/js/tours/rte.js b/addons/web_editor/static/src/js/tours/rte.js
index 9b23cd52bf3..c7aa60cee2f 100644
--- a/addons/web_editor/static/src/js/tours/rte.js
+++ b/addons/web_editor/static/src/js/tours/rte.js
@@ -29,14 +29,14 @@ tour.register('rte', {
             '<section>\n'+
             '    <div class="container" style="width: 600px;">\n'+
             '        <div class="row">\n'+
-            '            <div class="col-md-6 mt16">\n'+
+            '            <div class="col-lg-6 mt16">\n'+
             '<h1 id="text_content_id">Batnae municipium in Anthemusia</h1>     \n'+
             '     <p>Batnae municipium in Anthemusia conditum Macedonum manu priscorum ab Euphrate flumine brevi spatio disparatur, refertum mercatoribus opulentis, ubi annua sollemnitate prope Septembris initium mensis ad.</p>\n'+
             '     <p>    Quam <img style="width: 25%" src="/web/static/src/img/logo.png"/> quidem <span class="fa fa-flag fa-2x"></span> partem accusationis admiratus sum et moleste tuli potissimum esse Atratino datam. Neque enim decebat neque aetas.</p>\n'+
             '     <p>Et hanc quidem praeter oppida multa duae civitates exornant Seleucia opus Seleuci regis, et Claudiopolis quam deduxit coloniam Claudius Caesar. Isaura enim antehac nimium potens, olim subversa ut rebellatrix.</p>'+
             '<p>Harum trium sententiarum nulli prorsus assentior.</p>\n'+
             '        </div>\n'+
-            '        <div class="col-md-6 mt16">\n'+
+            '        <div class="col-lg-6 mt16">\n'+
             '            <img class="img img-fluid shadow mb16" src="/web/static/src/img/logo.png" alt="Odoo text and image block">\n'+
             '        </div>\n'+
             '    </div>\n'+
diff --git a/addons/web_editor/static/src/xml/editor.xml b/addons/web_editor/static/src/xml/editor.xml
index 3cfa54937b6..c94b9ee18fe 100644
--- a/addons/web_editor/static/src/xml/editor.xml
+++ b/addons/web_editor/static/src/xml/editor.xml
@@ -31,14 +31,14 @@
     <!-- Alt Dialog (allows to change alt and title of page images) -->
     <form t-name="web_editor.dialog.alt" action="#" class="form-horizontal">
         <div class="form-group">
-            <label class="col-sm-3 control-label" for="alt">Description (alt tag)</label>
-            <div class="col-sm-8">
+            <label class="col-md-3 control-label" for="alt">Description (alt tag)</label>
+            <div class="col-md-8">
                 <input class="form-control" id="alt" required="required" t-att-value="widget.alt" type="text"/>
             </div>
         </div>
         <div class="form-group">
-            <label class="col-sm-3 control-label" for="title">Tooltip</label>
-            <div class="col-sm-8">
+            <label class="col-md-3 control-label" for="title">Tooltip</label>
+            <div class="col-md-8">
                 <input class="form-control" id="title" required="required" t-att-value="widget.title" type="text"/>
             </div>
         </div>
@@ -140,7 +140,7 @@
     <t t-name="web_editor.dialog.image.existing.content">
         <div class="existing-attachments">
             <div class="row mt16" t-as="row" t-foreach="rows">
-                <div class="col-sm-2 o_existing_attachment_cell" t-as="attachment" t-foreach="row">
+                <div class="col-2 o_existing_attachment_cell" t-as="attachment" t-foreach="row">
                     <i t-if="attachment.res_model === 'ir.ui.view'" class="fa fa-times o_existing_attachment_remove" title="This file is a public view attachment" role="img" aria-label="This file is a public view attachment" t-att-data-id="attachment.id"/>
                     <i t-else="" class="fa fa-times o_existing_attachment_remove" title="This file is attached to the current record" role="img" aria-label="This file is attached to the current record" t-att-data-id="attachment.id"/>
                     <div class="o_attachment_border" t-att-style="attachment.res_model === 'ir.ui.view' ? null : 'border: 1px solid #5cb85c;'"><div t-att-data-src="attachment.src" t-att-data-url="attachment.url" role="img" t-att-aria-label="attachment.name" t-att-title="attachment.name" t-att-data-id="attachment.id" t-att-data-mimetype="attachment.mimetype" class="o_image o_image_loading"/></div>
@@ -235,23 +235,23 @@
     <!-- Link Dialog (allows to choose a style and content for a link on the page) -->
     <div t-name="web_editor.dialog.link" class="o_link_dialog">
         <div class="row">
-            <form class="col-md-8 form-horizontal">
+            <form class="col-lg-8 form-horizontal">
                 <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">
+                    <label class="control-label col-md-3" for="o_link_dialog_label_input">Link Label</label>
+                    <div class="col-md-9">
                         <input type="text" name="label" class="form-control" id="o_link_dialog_label_input" required="required" t-att-value="widget.data.text"/>
                     </div>
                 </div>
                 <div class="form-group">
-                    <label class="control-label col-sm-3" for="o_link_dialog_url_input">URL or Email</label>
-                    <div class="col-sm-9">
+                    <label class="control-label col-md-3" for="o_link_dialog_url_input">URL or Email</label>
+                    <div class="col-md-9">
                         <input type="text" name="url" class="form-control" id="o_link_dialog_url_input" required="required"/>
                     </div>
                 </div>
                 <div class="form-group">
-                    <label class="control-label col-sm-3">Size</label>
-                    <div class="col-sm-9">
-                        <select name="link_style_size" class="form-control col-sm-3 link-style">
+                    <label class="control-label col-md-3">Size</label>
+                    <div class="col-md-9">
+                        <select name="link_style_size" class="form-control col-md-3 link-style">
                             <option value="xs">Extra Small</option>
                             <option value="sm">Small</option>
                             <option value="" selected="selected">Medium</option>
@@ -260,8 +260,8 @@
                     </div>
                 </div>
                 <div class="form-group">
-                    <label class="control-label col-sm-3">Color</label>
-                    <div class="col-sm-9">
+                    <label class="control-label col-md-3">Color</label>
+                    <div class="col-md-9">
                         <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>
@@ -278,7 +278,7 @@
                     </div>
                 </div>
                 <div class="form-group">
-                    <div class="col-sm-offset-3 col-sm-9">
+                    <div class="offset-md-3 col-md-9">
                         <label class="o_switch">
                             <input type="checkbox" name="is_new_window" t-att-checked="widget.data.isNewWindow ? 'checked' : undefined"/>
                             <span/>
@@ -287,7 +287,7 @@
                     </div>
                 </div>
             </form>
-            <div class="col-md-4 o_link_dialog_preview">
+            <div class="col-lg-4 o_link_dialog_preview">
                 <div class="form-group text-center">
                     <label>Preview</label>
                     <div style="overflow: auto; max-width: 100%; max-height: 200px;">
@@ -366,8 +366,8 @@
         <div class="o_bg_img_opt" data-value="contain">
             <form class="form-horizontal">
                 <div class="form-group">
-                    <label class="col-sm-2 control-label" for="repeatInput">Repeat</label>
-                    <div class="col-sm-5">
+                    <label class="col-md-2 control-label" for="repeatInput">Repeat</label>
+                    <div class="col-md-5">
                         <div class="checkbox">
                             <label>
                                 <input type="checkbox" id="o_bg_img_opt_contain_repeat"/>
@@ -382,8 +382,8 @@
                 <legend>Background size</legend>
                 <p>Sets the width and height of the background image in percent of the parent element.</p>
                 <div class="form-group">
-                    <label class="col-sm-3 control-label" for="o_bg_img_opt_custom_size_x">Background width</label>
-                    <div class="col-sm-5">
+                    <label class="col-md-3 control-label" for="o_bg_img_opt_custom_size_x">Background width</label>
+                    <div class="col-md-5">
                         <div class="input-group">
                             <input type="number" min="0" max="100" class="form-control input-sm" id="o_bg_img_opt_custom_size_x" placeholder="auto"/>
                             <div class="input-group-addon">%</div>
@@ -391,8 +391,8 @@
                     </div>
                 </div>
                 <div class="form-group">
-                    <label class="col-sm-3 control-label" for="o_bg_img_opt_custom_size_y">Background height</label>
-                    <div class="col-sm-5">
+                    <label class="col-md-3 control-label" for="o_bg_img_opt_custom_size_y">Background height</label>
+                    <div class="col-md-5">
                         <div class="input-group">
                             <input type="number" min="0" max="100" class="form-control input-sm" id="o_bg_img_opt_custom_size_y" placeholder="auto"/>
                             <div class="input-group-addon">%</div>
@@ -404,8 +404,8 @@
                 <legend>Background position</legend>
                 <p>Set the starting position of the background image.</p>
                 <div class="form-group">
-                    <label class="col-sm-3 control-label" for="o_bg_img_opt_custom_pos_x">Horizontal</label>
-                    <div class="col-sm-5">
+                    <label class="col-md-3 control-label" for="o_bg_img_opt_custom_pos_x">Horizontal</label>
+                    <div class="col-md-5">
                         <div class="input-group">
                             <input type="number" min="0" max="100" class="form-control input-sm" id="o_bg_img_opt_custom_pos_x" placeholder="auto"/>
                             <div class="input-group-addon">%</div>
@@ -413,8 +413,8 @@
                     </div>
                 </div>
                 <div class="form-group">
-                    <label class="col-sm-3 control-label" for="o_bg_img_opt_custom_pos_y">Vertical</label>
-                    <div class="col-sm-5">
+                    <label class="col-md-3 control-label" for="o_bg_img_opt_custom_pos_y">Vertical</label>
+                    <div class="col-md-5">
                         <div class="input-group">
                             <input type="number" min="0" max="100" class="form-control input-sm" id="o_bg_img_opt_custom_pos_y" placeholder="auto"/>
                             <div class="input-group-addon">%</div>
diff --git a/addons/web_settings_dashboard/static/src/xml/dashboard.xml b/addons/web_settings_dashboard/static/src/xml/dashboard.xml
index 35fff93174f..55d191fe3c1 100644
--- a/addons/web_settings_dashboard/static/src/xml/dashboard.xml
+++ b/addons/web_settings_dashboard/static/src/xml/dashboard.xml
@@ -5,16 +5,16 @@
         <div class="container-fluid o_web_settings_dashboard">
             <div class="row">
                 <div class="o_web_settings_dashboard_enterprise"/>
-                <div class="col-sm-12 o_web_settings_dashboard_container" >
-                   <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 o_web_settings_dashboard_col">
+                <div class="col-md-12 o_web_settings_dashboard_container" >
+                   <div class="col-xl-4 col-lg-4 col-md-12 col-12 o_web_settings_dashboard_col">
                         <div class="text-center o_web_settings_dashboard_apps"></div>
                         <div class="text-center o_web_settings_dashboard_translations"></div>
                     </div>
-                   <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 o_web_settings_dashboard_col">
+                   <div class="col-xl-4 col-lg-4 col-md-12 col-12 o_web_settings_dashboard_col">
                         <div class="text-center o_web_settings_dashboard_invitations"></div>
                         <div class="text-center o_web_settings_dashboard_company"></div>
                     </div>
-                   <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 o_web_settings_dashboard_col">
+                   <div class="col-xl-4 col-lg-4 col-md-12 col-12 o_web_settings_dashboard_col">
                         <div class="text-center o_web_settings_dashboard_share"></div>
                     </div>
                 </div>
@@ -102,9 +102,9 @@
                 </small>
             </div>
             <div class="row mt16">
-                <div class="col-xs-4"><a href="#" aria-label="Twitter" title="Twitter"><i class="fa fa-twitter-square fa-4x tw_share"/></a></div>
-                <div class="col-xs-4"><a href="#" aria-label="Facebook" title="Facebook"><i class="fa fa-facebook-square fa-4x fb_share"/></a></div>
-                <div class="col-xs-4"><a href="#" aria-label="LinkedIn" title="LinkedIn"><i class="fa fa-linkedin-square fa-4x li_share"/></a></div>
+                <div class="col-4"><a href="#" aria-label="Twitter" title="Twitter"><i class="fa fa-twitter-square fa-4x tw_share"/></a></div>
+                <div class="col-4"><a href="#" aria-label="Facebook" title="Facebook"><i class="fa fa-facebook-square fa-4x fb_share"/></a></div>
+                <div class="col-4"><a href="#" aria-label="LinkedIn" title="LinkedIn"><i class="fa fa-linkedin-square fa-4x li_share"/></a></div>
             </div>
             <hr/>
             <t t-set="server_version" t-value="widget.data.server_version"/>
@@ -129,7 +129,7 @@
             </div>
             <hr/>
             <div class="row">
-                <div class="col-md-12">
+                <div class="col-lg-12">
                     <a t-if="debug != true" class="oe_activate_debug_mode pull-right" href="?debug" >Activate the developer mode</a>
                     <br t-if="debug != true"/>
                     <a t-if="debug != 'assets'" class="oe_activate_debug_mode pull-right" href="?debug=assets" >Activate the developer mode (with assets)</a>
diff --git a/addons/website/data/website_data.xml b/addons/website/data/website_data.xml
index 2b30197235d..f338a58e51b 100644
--- a/addons/website/data/website_data.xml
+++ b/addons/website/data/website_data.xml
@@ -65,7 +65,7 @@
                       <div class="container">
                           <h1>Contact us</h1>
                           <div class="row">
-                              <div class="col-md-8">
+                              <div class="col-lg-8">
                                   <div class="oe_structure">
                                       <div>
                                           <p>Contact us about anything related to our company or services.</p>
@@ -76,7 +76,7 @@
                                       <a role="button" t-attf-href="mailto:{{ res_company.email }}" class="btn btn-primary" id="o_contact_mail">Send us an email</a>
                                   </div>
                               </div>
-                              <div class="col-md-4 mb32">
+                              <div class="col-lg-4 mb32">
                                   <t t-call="website.company_description"/>
                               </div>
                           </div>
@@ -106,7 +106,7 @@
                                 <section>
                                     <div class="container">
                                         <div class="row">
-                                            <div class="col-md-12">
+                                            <div class="col-lg-12">
                                                 <h1 class="text-center">About us</h1>
                                                 <h3 class="text-muted text-center">Great products for great people</h3>
                                             </div>
@@ -117,7 +117,7 @@
                                 <section>
                                     <div class="container">
                                         <div class="row">
-                                            <div class="col-md-6 mt32">
+                                            <div class="col-lg-6 mt32">
                                                 <p>
                                                       We are a team of passionate people whose goal is to improve everyone's
                                                       life through disruptive products. We build great products to solve your
@@ -128,7 +128,7 @@
                                                       their performance.
                                                 </p>
                                             </div>
-                                            <div class="col-md-4 col-md-offset-2 mt16 mb16">
+                                            <div class="col-lg-4 offset-lg-2 mt16 mb16">
                                                 <img src="/website/static/src/img/library/business_conference.jpg" class="img img-fluid shadow" alt="Our Team"/>
                                             </div>
                                         </div>
diff --git a/addons/website/data/website_demo.xml b/addons/website/data/website_demo.xml
index e66a8e09b23..e0bfa9012f9 100644
--- a/addons/website/data/website_demo.xml
+++ b/addons/website/data/website_demo.xml
@@ -23,7 +23,7 @@
                         <section>
                             <div class="container">
                                 <div class="row">
-                                    <div class="col-md-12">
+                                    <div class="col-lg-12">
                                         <h2>Thank you for posting a message !</h2>
                                     </div>
                                 </div>
@@ -69,7 +69,7 @@ response = request.website.render("website.template_partner_post", {'partner': p
             <section>
                 <div class="container">
                     <div class="row">
-                        <div class="col-md-12">
+                        <div class="col-lg-12">
                             <h1 class="text-center">Send a Message to our Partners</h1>
                             <h3 class="text-muted text-center">Discuss and Comments</h3>
                         </div>
@@ -82,21 +82,21 @@ response = request.website.render("website.template_partner_post", {'partner': p
                 <form class="form-horizontal" action="/website/action/website.action_partner_post" method="post">
                     <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
                     <div class="form-group">
-                        <label class="col-sm-2 control-label">Recipient</label>
-                        <div class="col-sm-10">
+                        <label class="col-md-2 control-label">Recipient</label>
+                        <div class="col-md-10">
                             <select t-if="partners" name="partner_id" class="form-control">
                                 <t t-foreach="partners" t-as="partner"><option t-att-value="partner.id" t-esc="partner.name"/></t>
                             </select>
                         </div>
                     </div>
                     <div class="form-group">
-                        <label class="col-sm-2 control-label">Message</label>
-                        <div class="col-sm-10">
+                        <label class="col-md-2 control-label">Message</label>
+                        <div class="col-md-10">
                             <textarea name="body" rows="10" class="form-control"/>
                         </div>
                     </div>
                     <div class="form-group">
-                        <div class="col-sm-offset-2 col-sm-10">
+                        <div class="offset-md-2 col-md-10">
                             <button type="submit" class="btn btn-primary">
                                 Send <span class="fa fa-long-arrow-right"/>
                             </button>
@@ -147,14 +147,14 @@ response = request.render("website.template_partner_comment", {
                           <div class="item image_text oe_img_bg active" style="background-image: url(http://0.0.0.0:8069/web/image/website.s_background_image_11);">
                             <div class="container">
                               <div class="row content">
-                                <div class="carousel-content col-md-6 col-sm-12">
+                                <div class="carousel-content col-lg-6 col-md-12">
                                   <h2>Homepage 0.0.0.0</h2>
                                   <h3>Click to customize this text</h3>
                                   <p>
                                     <a role="button" class="btn btn-success btn-large" href="/contactus">Contact us</a>
                                   </p>
                                 </div>
-                                <span class="carousel-img col-md-6 d-none d-lg-block"> </span>
+                                <span class="carousel-img col-lg-6 d-none d-lg-block"> </span>
                               </div>
                             </div>
                           </div>
@@ -190,7 +190,7 @@ response = request.render("website.template_partner_comment", {
                       <div class="container">
                           <h1>Contact us</h1>
                           <div class="row">
-                              <div class="col-md-8">
+                              <div class="col-lg-8">
                                   <div class="oe_structure">
                                       <div>
                                           <p>Contact us about anything related to our company or services.</p>
@@ -201,7 +201,7 @@ response = request.render("website.template_partner_comment", {
                                       <a role="button" t-attf-href="mailto:{{ res_company.email }}" class="btn btn-primary" id="o_contact_mail">Send us an email</a>
                                   </div>
                               </div>
-                              <div class="col-md-4 mb32">
+                              <div class="col-lg-4 mb32">
                                   <t t-call="website.company_description"/>
                               </div>
                           </div>
diff --git a/addons/website/static/src/js/backend/dashboard.js b/addons/website/static/src/js/backend/dashboard.js
index 09881b4ec1b..9ece194ab1e 100644
--- a/addons/website/static/src/js/backend/dashboard.js
+++ b/addons/website/static/src/js/backend/dashboard.js
@@ -200,7 +200,7 @@ var Dashboard = AbstractAction.extend(ControlPanelMixin, {
 
             $analytics_components.empty();
             // 1. Authorize component
-            var $analytics_auth = $('<div>').addClass('col-md-12');
+            var $analytics_auth = $('<div>').addClass('col-lg-12');
             window.onOriginError = function () {
                 $analytics_components.find('.js_unauthorized_message').remove();
                 self.display_unauthorized_message($analytics_components, 'not_initialized');
@@ -350,7 +350,7 @@ var Dashboard = AbstractAction.extend(ControlPanelMixin, {
         $analytics_users.appendTo($analytics_components);
 
         // 3. View Selector
-        var $analytics_view_selector = $('<div>').addClass('col-md-12 o_properties_selection');
+        var $analytics_view_selector = $('<div>').addClass('col-lg-12 o_properties_selection');
         var viewSelector = new gapi.analytics.ViewSelector({
             container: $analytics_view_selector[0],
         });
@@ -364,7 +364,7 @@ var Dashboard = AbstractAction.extend(ControlPanelMixin, {
         } else if (this.date_range === 'year') {
             start_date = '365daysAgo';
         }
-        var $analytics_chart_2 = $('<div>').addClass('col-md-6 col-xs-12');
+        var $analytics_chart_2 = $('<div>').addClass('col-lg-6 col-12');
         var breakdownChart = new gapi.analytics.googleCharts.DataChart({
             query: {
                 'dimensions': 'ga:date',
@@ -384,7 +384,7 @@ var Dashboard = AbstractAction.extend(ControlPanelMixin, {
         $analytics_chart_2.appendTo($analytics_components);
 
         // 5. Chart table
-        var $analytics_chart_1 = $('<div>').addClass('col-md-6 col-xs-12');
+        var $analytics_chart_1 = $('<div>').addClass('col-lg-6 col-12');
         var mainChart = new gapi.analytics.googleCharts.DataChart({
             query: {
                 'dimensions': 'ga:medium',
diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index 6806d53be23..c71afc1085f 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -279,7 +279,7 @@ options.registry.sizing_x = options.registry.sizing.extend({
         // Below condition is added to remove offset of target element only
         // and not its children to avoid design alteration of a container/block.
         if (options.isCurrent) {
-            var _class = this.$target.attr('class').replace(/\s*(col-lg-offset-|col-md-offset-)([0-9-]+)/g, '');
+            var _class = this.$target.attr('class').replace(/\s*(offset-xl-|offset-lg-)([0-9-]+)/g, '');
             this.$target.attr('class', _class);
         }
     },
@@ -296,8 +296,8 @@ options.registry.sizing_x = options.registry.sizing.extend({
         var gridE = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
         var gridW = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
         this.grid = {
-            e: [_.map(gridE, function (v) { return 'col-md-' + v; }), _.map(gridE, function (v) { return width/12*v; }), 'width'],
-            w: [_.map(gridW, function (v) { return 'col-md-offset-' + v; }), _.map(gridW, function (v) { return width/12*v; }), 'margin-left'],
+            e: [_.map(gridE, function (v) { return 'col-lg-' + v; }), _.map(gridE, function (v) { return width/12*v; }), 'width'],
+            w: [_.map(gridW, function (v) { return 'offset-lg-' + v; }), _.map(gridW, function (v) { return width/12*v; }), 'margin-left'],
         };
         return this.grid;
     },
@@ -307,9 +307,9 @@ options.registry.sizing_x = options.registry.sizing.extend({
     _onResize: function (compass, beginClass, current) {
         if (compass === 'w') {
             // don't change the right border position when we change the offset (replace col size)
-            var beginCol = Number(beginClass.match(/col-md-([0-9]+)|$/)[1] || 0);
-            var beginOffset = Number(beginClass.match(/col-md-offset-([0-9-]+)|$/)[1] || beginClass.match(/col-lg-offset-([0-9-]+)|$/)[1] || 0);
-            var offset = Number(this.grid.w[0][current].match(/col-md-offset-([0-9-]+)|$/)[1] || 0);
+            var beginCol = Number(beginClass.match(/col-lg-([0-9]+)|$/)[1] || 0);
+            var beginOffset = Number(beginClass.match(/offset-lg-([0-9-]+)|$/)[1] || beginClass.match(/offset-xl-([0-9-]+)|$/)[1] || 0);
+            var offset = Number(this.grid.w[0][current].match(/offset-lg-([0-9-]+)|$/)[1] || 0);
             if (offset < 0) {
                 offset = 0;
             }
@@ -318,11 +318,11 @@ options.registry.sizing_x = options.registry.sizing.extend({
                 colSize = 1;
                 offset = beginOffset + beginCol - 1;
             }
-            this.$target.attr('class',this.$target.attr('class').replace(/\s*(col-lg-offset-|col-md-offset-|col-md-)([0-9-]+)/g, ''));
+            this.$target.attr('class',this.$target.attr('class').replace(/\s*(offset-xl-|offset-lg-|col-lg-)([0-9-]+)/g, ''));
 
-            this.$target.addClass('col-md-' + (colSize > 12 ? 12 : colSize));
+            this.$target.addClass('col-lg-' + (colSize > 12 ? 12 : colSize));
             if (offset > 0) {
-                this.$target.addClass('col-md-offset-' + offset);
+                this.$target.addClass('offset-lg-' + offset);
             }
         }
         this._super.apply(this, arguments);
@@ -387,14 +387,14 @@ options.registry.layout_column = options.Class.extend({
         var colsLength = $columns.length;
         var colSize = Math.floor(12 / colsLength) || 1;
         var colOffset = Math.floor((12 - colSize * colsLength) / 2);
-        var colClass = 'col-md-' + colSize;
+        var colClass = 'col-lg-' + colSize;
         _.each($columns, function (column) {
             var $column = $(column);
-            $column.attr('class', $column.attr('class').replace(/\bcol-md-(offset-)?\d+\b/g, ''));
+            $column.attr('class', $column.attr('class').replace(/\bcol-lg-(offset-)?\d+\b/g, ''));
             $column.addClass(colClass);
         });
         if (colOffset) {
-            $columns.first().addClass('col-md-offset-' + colOffset);
+            $columns.first().addClass('offset-lg-' + colOffset);
         }
     },
     /**
@@ -907,7 +907,7 @@ options.registry.gallery = options.Class.extend({
         var imgs = this._getImages();
         var $row = $('<div/>', {class: 'row'});
         var columns = this._getColumns();
-        var colClass = 'col-md-' + (12 / columns);
+        var colClass = 'col-lg-' + (12 / columns);
         var $container = this._replaceContent($row);
 
         _.each(imgs, function (img, index) {
@@ -934,7 +934,7 @@ options.registry.gallery = options.Class.extend({
     masonry: function () {
         var imgs = this._getImages();
         var columns = this._getColumns();
-        var colClass = 'col-md-' + (12 / columns);
+        var colClass = 'col-lg-' + (12 / columns);
         var cols = [];
 
         var $row = $('<div/>', {class: 'row'});
@@ -985,9 +985,9 @@ options.registry.gallery = options.Class.extend({
         this._replaceContent($row);
 
         _.each(imgs, function (img) {
-            var wrapClass = 'col-md-3';
+            var wrapClass = 'col-lg-3';
             if (img.width >= img.height * 2 || img.width > 600) {
-                wrapClass = 'col-md-6';
+                wrapClass = 'col-lg-6';
             }
             var $wrap = $('<div/>', {class: wrapClass}).append(img);
             $row.append($wrap);
diff --git a/addons/website/static/src/js/menu/content.js b/addons/website/static/src/js/menu/content.js
index 6595f9ba625..378b35f1cdf 100644
--- a/addons/website/static/src/js/menu/content.js
+++ b/addons/website/static/src/js/menu/content.js
@@ -374,7 +374,7 @@ var MenuEntryDialog = weWidgets.LinkDialog.extend({
         this.$('.o_link_dialog_preview').remove();
         this.$('input[name="is_new_window"], .link-style').closest('.form-group').remove();
         this.$modal.find('.modal-lg').removeClass('modal-lg')
-                   .find('.col-md-8').removeClass('col-md-8').addClass('col-xs-12');
+                   .find('.col-lg-8').removeClass('col-lg-8').addClass('col-12');
 
         // Adapt URL label
         this.$('label[for="o_link_dialog_label_input"]').text(_t("Menu Label"));
diff --git a/addons/website/static/src/js/menu/new_content.js b/addons/website/static/src/js/menu/new_content.js
index c577858f3eb..314ecec51b4 100644
--- a/addons/website/static/src/js/menu/new_content.js
+++ b/addons/website/static/src/js/menu/new_content.js
@@ -46,7 +46,7 @@ var NewContentMenu = websiteNavbarData.WebsiteNavbarActionWidget.extend({
                 $group.removeClass('mb0');
 
                 var $add = $('<div/>', {'class': 'form-group mb0'})
-                            .append($('<span/>', {'class': 'col-sm-offset-3 col-sm-9 text-left'})
+                            .append($('<span/>', {'class': 'offset-md-3 col-md-9 text-left'})
                                     .append(qweb.render('web_editor.components.switch', {id: 'switch_addTo_menu', label: _t("Add page in menu")})));
                 $add.find('input').prop('checked', true);
                 $group.after($add);
diff --git a/addons/website/static/src/scss/website.backend.scss b/addons/website/static/src/scss/website.backend.scss
index 0f9a1a97640..16dbe353ed2 100644
--- a/addons/website/static/src/scss/website.backend.scss
+++ b/addons/website/static/src/scss/website.backend.scss
@@ -20,7 +20,7 @@
 
             h4 { margin: 0 0 0 8px; }
 
-            .col-md-7, .col-xs-12 {
+            .col-lg-7, .col-12 {
                 padding: 15px;
 
                 .js_field_selection {
diff --git a/addons/website/static/src/scss/website.edit_mode.scss b/addons/website/static/src/scss/website.edit_mode.scss
index 21586303296..2480ed74b26 100644
--- a/addons/website/static/src/scss/website.edit_mode.scss
+++ b/addons/website/static/src/scss/website.edit_mode.scss
@@ -105,7 +105,7 @@ table.editorbar-panel {
             margin: 0 5px;
         }
     }
-    .col-sm-2 > * {
+    .col-md-2 > * {
         line-height: 2em;
     }
 }
diff --git a/addons/website/static/src/xml/website.backend.xml b/addons/website/static/src/xml/website.backend.xml
index e5a07ad6139..cf53351c256 100644
--- a/addons/website/static/src/xml/website.backend.xml
+++ b/addons/website/static/src/xml/website.backend.xml
@@ -21,13 +21,13 @@
     <t t-name="website.dashboard_content">
         <div class="o_website_dashboard_content">
             <div class="row o_dashboard_visits" t-if="widget.groups.website_designer">
-                <div class="col-xs-12 o_box">
+                <div class="col-12 o_box">
                     <h2>Visits</h2>
                     <div t-if="widget.dashboards_data.visits &amp;&amp; widget.dashboards_data.visits.ga_client_id">
                         <div class="row js_analytics_components"/>
                         <a href="#" class="js_link_analytics_settings">Edit my Analytics Client ID</a>
                     </div>
-                    <div t-if="!(widget.dashboards_data.visits &amp;&amp; widget.dashboards_data.visits.ga_client_id)" class="col-md-12">
+                    <div t-if="!(widget.dashboards_data.visits &amp;&amp; widget.dashboards_data.visits.ga_client_id)" class="col-lg-12">
                         <div class="o_demo_background">
                             <div class="o_layer">
                             </div>
@@ -42,7 +42,7 @@
         </div>
     </t>
 
-    <div t-name="website.unauthorized_analytics" class="col-xs-12 js_unauthorized_message mb16">
+    <div t-name="website.unauthorized_analytics" class="col-12 js_unauthorized_message mb16">
         <span t-if="reason === 'not_connected'">You need to log in to your Google Account before: </span>
         <span t-if="reason === 'no_right'">You do not seem to have access to this Analytics Account.</span>
         <span t-if="reason === 'not_initialized'">Google Analytics initialization failed. Maybe this domain is not whitelisted in your Google Analytics project for this client ID.</span>
diff --git a/addons/website/static/src/xml/website.facebook_page.xml b/addons/website/static/src/xml/website.facebook_page.xml
index 73c8389ba34..2ccceddb3b0 100644
--- a/addons/website/static/src/xml/website.facebook_page.xml
+++ b/addons/website/static/src/xml/website.facebook_page.xml
@@ -2,43 +2,43 @@
 <templates>
 <div t-name="website.facebook_page_dialog">
     <div class="row">
-        <form class="col-md-6 form-horizontal">
+        <form class="col-lg-6 form-horizontal">
             <div class="form-group">
-                <label class="control-label col-sm-3">Page URL</label>
-                <div class="col-sm-9">
+                <label class="control-label col-md-3">Page URL</label>
+                <div class="col-md-9">
                     <input class="form-control o_facebook_page_url" required="required" t-att-value="widget.fbData.href"/>
                 </div>
             </div>
             <div class="form-group o_facebook_tabs">
                 <t t-set="fb_tabs" t-value="widget.fbData.tabs and widget.fbData.tabs.split(',') or []"/>
-                <label class="control-label col-sm-3">Tabs</label>
-                <div class="col-sm-3 checkbox">
+                <label class="control-label col-md-3">Tabs</label>
+                <div class="col-md-3 checkbox">
                     <label><input type="checkbox" name="timeline" t-att-checked="_.contains(fb_tabs, 'timeline') or None"/>Timeline</label>
                 </div>
-                <div class="col-sm-3 checkbox">
+                <div class="col-md-3 checkbox">
                     <label><input type="checkbox" name="events" t-att-checked="_.contains(fb_tabs, 'events') or None"/>Events</label>
                 </div>
-                <div class="col-sm-3 checkbox">
+                <div class="col-md-3 checkbox">
                     <label><input type="checkbox" name="messages" t-att-checked="_.contains(fb_tabs, 'messages') or None"/>Messages</label>
                 </div>
              </div>
             <div class="form-group o_facebook_options">
-                <label class="control-label col-sm-3">Options</label>
-                <div class="col-sm-9 mt8">
+                <label class="control-label col-md-3">Options</label>
+                <div class="col-md-9 mt8">
                 <label class="o_switch">
                     <input name="small_header" type="checkbox" t-att-checked="widget.fbData.small_header or None"/>
                     <span/>
                     Use Small Header
                 </label>
                 </div>
-                <div class="col-sm-offset-3 mt16 col-sm-9">
+                <div class="offset-md-3 mt16 col-md-9">
                 <label class="o_switch">
                     <input name="hide_cover" type="checkbox" t-att-checked="widget.fbData.hide_cover or None"/>
                     <span/>
                     Hide Cover Photo
                 </label>
                 </div>
-                <div class="col-sm-offset-3 mt16 col-sm-9">
+                <div class="offset-md-3 mt16 col-md-9">
                 <label class="o_switch">
                     <input name="show_facepile" type="checkbox" t-att-checked="widget.fbData.show_facepile or None"/>
                     <span/>
@@ -47,7 +47,7 @@
                 </div>
             </div>
         </form>
-        <div class="col-md-6" style="border-left: 1px solid #eeeeee;">
+        <div class="col-lg-6" style="border-left: 1px solid #eeeeee;">
             <div class="form-group text-center">
                 <label>Preview</label>
                 <div class="alert alert-warning d-none facebook_page_warning text-center" role="alert">
diff --git a/addons/website/static/src/xml/website.pageProperties.xml b/addons/website/static/src/xml/website.pageProperties.xml
index 2e5f29b9bea..9299e4b8b69 100644
--- a/addons/website/static/src/xml/website.pageProperties.xml
+++ b/addons/website/static/src/xml/website.pageProperties.xml
@@ -18,7 +18,7 @@
     </t>
 </t>
 <t t-name="website.show_page_key_dependencies">
-    <div class="col-sm-9 col-sm-offset-3">
+    <div class="col-md-9 offset-md-3">
         <span class="text-muted" id="warn_about_call_message">
             <t t-set="depTooltip">
                 <t t-call="website.get_tooltip_dependencies"/>
@@ -47,15 +47,15 @@
         <div class="tab-content mt16">
             <div role="tabpanel" id="basic_page_info" class="tab-pane fade in active">
                 <div class="form-group">
-                    <label class="control-label col-sm-3" for="page_name">Page Name</label>
-                    <div class="col-sm-9">
+                    <label class="control-label col-md-3" for="page_name">Page Name</label>
+                    <div class="col-md-9">
                         <input type="text" class="form-control input-sm" id="page_name" t-att-value="widget.page.name" />
                     </div>
                 </div>
                 <div class="form-group warn_about_call"></div>
                 <div class="form-group">
-                    <label class="control-label col-sm-3" for="page_url">Page URL</label>
-                    <div class="col-sm-9">
+                    <label class="control-label col-md-3" for="page_url">Page URL</label>
+                    <div class="col-md-9">
                         <div class="input-group">
                             <span class="input-group-addon" t-att-title="widget.serverUrl"><small><t t-esc="widget.serverUrlTrunc"/></small></span>
                             <input type="text" class="form-control input-sm" id="page_url" t-att-value="widget.page.url" />
@@ -63,8 +63,8 @@
                     </div>
                 </div>
                 <div class="form-group ask_for_redirect">
-                    <label class="control-label col-sm-3" for="create_redirect">Redirect Old URL</label>
-                    <div class="col-sm-2">
+                    <label class="control-label col-md-3" for="create_redirect">Redirect Old URL</label>
+                    <div class="col-md-2">
                         <a>
                             <label class="o_switch" for="create_redirect" >
                                 <input type="checkbox" id="create_redirect"/>
@@ -72,13 +72,13 @@
                             </label>
                         </a>
                     </div>
-                    <div class="col-sm-7 mt4">
+                    <div class="col-md-7 mt4">
                         <span class="text-muted" id="dependencies_redirect"></span>
                     </div>
                 </div>
                 <div class="form-group ask_for_redirect">
-                    <label class="control-label col-sm-3 redirect_type" for="redirect_type">Type</label>
-                    <div class="col-sm-6 redirect_type">
+                    <label class="control-label col-md-3 redirect_type" for="redirect_type">Type</label>
+                    <div class="col-md-6 redirect_type">
                         <select class="form-control" id="redirect_type">
                             <option t-foreach="widget.fields.type.selection" t-as="field" t-att-value="field[0]"><t t-esc="field[0] + ': ' + field[1]" /></option>
                         </select>
@@ -87,8 +87,8 @@
             </div>
             <div role="tabpanel" id="advances_page_info" class="tab-pane fade">
                 <div class="form-group">
-                    <label class="control-label col-sm-3" for="is_menu">Show in Top Menu</label>
-                    <div class="col-sm-2">
+                    <label class="control-label col-md-3" for="is_menu">Show in Top Menu</label>
+                    <div class="col-md-2">
                         <label class="o_switch" for="is_menu" >
                             <input type="checkbox" t-att-checked="widget.page.menu_ids.length > 0 ? true : undefined" id="is_menu"/>
                             <span/>
@@ -96,8 +96,8 @@
                     </div>
                 </div>
                 <div class="form-group">
-                    <label class="control-label col-sm-3" for="is_homepage">Use as Homepage</label>
-                    <div class="col-sm-2">
+                    <label class="control-label col-md-3" for="is_homepage">Use as Homepage</label>
+                    <div class="col-md-2">
                         <label class="o_switch" for="is_homepage" >
                             <input type="checkbox" t-att-checked="widget.page.is_homepage ? true : undefined" id="is_homepage"/>
                             <span/>
@@ -105,11 +105,11 @@
                     </div>
                 </div>
                 <div class="form-group">
-                    <label class="control-label col-sm-3" for="is_indexed">
+                    <label class="control-label col-md-3" for="is_indexed">
                         Indexed
                         <i class="fa fa-question-circle-o" title="Hide this page from search results" role="img" aria-label="Info"></i>
                     </label>
-                    <div class="col-sm-2">
+                    <div class="col-md-2">
                         <label class="o_switch" for="is_indexed" >
                             <input type="checkbox" t-att-checked="widget.page.website_indexed ? true : undefined" id="is_indexed"/>
                             <span/>
@@ -117,8 +117,8 @@
                     </div>
                 </div>
                 <div class="form-group">
-                    <label class="control-label col-sm-3" for="is_published">Publish</label>
-                    <div class="col-sm-2">
+                    <label class="control-label col-md-3" for="is_published">Publish</label>
+                    <div class="col-md-2">
                         <label class="o_switch js_publish_btn" for="is_published">
                             <input type="checkbox" t-att-checked="widget.page.website_published ? true : undefined" id="is_published"/>
                             <span/>
@@ -126,8 +126,8 @@
                     </div>
                 </div>
                 <div class="form-group">
-                    <label class="control-label col-sm-3" for="date_publish">Publishing Date</label>
-                    <div class="col-sm-9">
+                    <label class="control-label col-md-3" for="date_publish">Publishing Date</label>
+                    <div class="col-md-9">
                         <div class='input-group date' id='date_publish_container'>
                             <input type='text' class="form-control" name="date_publish" id="date_publish" />
                             <span class="input-group-addon">
diff --git a/addons/website/static/src/xml/website.seo.xml b/addons/website/static/src/xml/website.seo.xml
index 08137872596..266dbe380ff 100644
--- a/addons/website/static/src/xml/website.seo.xml
+++ b/addons/website/static/src/xml/website.seo.xml
@@ -8,23 +8,23 @@
 
     <div t-name="website.seo_configuration">
         <section class="row">
-            <div class="col-md-6">
+            <div class="col-lg-6">
                 <div class="form-horizontal mt16" role="form">
                     <div class="form-group">
-                        <label for="seo_page_title" class="col-xs-3 control-label">Page Title</label>
-                        <div class="col-xs-9">
+                        <label for="seo_page_title" class="col-3 control-label">Page Title</label>
+                        <div class="col-9">
                             <input type="text" name="seo_page_title" class="form-control" maxlength="70" size="70"/>
                         </div>
                     </div>
                     <div class="form-group">
-                        <label for="seo_page_description" class="col-xs-3 control-label">Description</label>
-                        <div class="col-xs-9">
+                        <label for="seo_page_description" class="col-3 control-label">Description</label>
+                        <div class="col-9">
                             <textarea name="seo_page_description" class="form-control" style="max-width: 100%;height:145px;max-height:145px" t-att-maxlength="widget.maxDescriptionSize"/>
                         </div>
                     </div>
                 </div>
             </div>
-            <div class="col-md-6">
+            <div class="col-lg-6">
                 <h5 class="mt16">Preview <small>how your page will be listed on Google</small></h5>
                 <div class="well">
                     <div class="panel mb0">
diff --git a/addons/website/static/src/xml/website.share.xml b/addons/website/static/src/xml/website.share.xml
index b534f6e9cc7..d78c1babc46 100644
--- a/addons/website/static/src/xml/website.share.xml
+++ b/addons/website/static/src/xml/website.share.xml
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
     <t t-name="website.social_hover">
         <div class="row clearfix" style='font-size:16px'>
-            <div class="col-xs-12 css_editable_mode_hidden">
+            <div class="col-12 css_editable_mode_hidden">
                 <t t-foreach="medias" t-as="media">
                     <a style="cursor: pointer" t-attf-class="fa-stack fa-lg share #{media}" t-att-aria-label="media" t-att-title="media">
                         <span class="fa fa-square fa-stack-2x"></span>
diff --git a/addons/website/static/src/xml/website.xml b/addons/website/static/src/xml/website.xml
index 300badf2511..ca97d0a6eb1 100644
--- a/addons/website/static/src/xml/website.xml
+++ b/addons/website/static/src/xml/website.xml
@@ -11,10 +11,10 @@
                     <main class="modal-body">
                         <form class="form-horizontal" role="form" t-att-id="id">
                             <div class="form-group mb0">
-                                <label for="page-name" class="col-sm-3 control-label">
+                                <label for="page-name" class="col-md-3 control-label">
                                     <t t-esc="field_name"/>:
                                 </label>
-                                <div class="col-sm-8">
+                                <div class="col-md-8">
                                     <input t-if="field_type == 'input'" type="text" class="form-control" required="required"/>
                                     <textarea t-if="field_type == 'textarea'" class="form-control" required="required" rows="5"></textarea>
                                     <select t-if="field_type == 'select'" class="form-control"></select>
@@ -65,8 +65,8 @@
         <div class="well">
             <form class="form-horizontal">
                 <div class="form-group mb0">
-                    <label for="new_name" class="control-label col-sm-4">Rename Page To:</label>
-                    <div class="col-sm-8">
+                    <label for="new_name" class="control-label col-md-4">Rename Page To:</label>
+                    <div class="col-md-8">
                         <input type="text" class="form-control" id="new_name" placeholder="e.g. About Us"/>
                     </div>
                 </div>
diff --git a/addons/website/views/res_config_settings_views.xml b/addons/website/views/res_config_settings_views.xml
index b25ba33a4b8..994475b6111 100644
--- a/addons/website/views/res_config_settings_views.xml
+++ b/addons/website/views/res_config_settings_views.xml
@@ -13,7 +13,7 @@
                             <field name="website_id" invisible="1"/>
                             <h2>Website</h2>
                             <div class="row mt16 o_settings_container" id="webmaster_settings">
-                                <div class="col-xs-12 col-md-6 o_setting_box" id="domain_setting">
+                                <div class="col-12 col-lg-6 o_setting_box" id="domain_setting">
                                     <div class="o_setting_right_pane">
                                         <span class="o_form_label">Website Title</span>
                                         <div class="text-muted">
@@ -21,17 +21,17 @@
                                         </div>
                                         <div class="content-group">
                                             <div class="row mt16">
-                                                <label class="col-md-3 o_light_label" string="Name" for="website_name"/>
+                                                <label class="col-lg-3 o_light_label" string="Name" for="website_name"/>
                                                 <field name="website_name"/>
                                             </div>
                                             <div class="row">
-                                                <label class="col-md-3 o_light_label" for="favicon" />
+                                                <label class="col-lg-3 o_light_label" for="favicon" />
                                                 <field name="favicon" widget="image" class="pull-left oe_avatar"/>
                                             </div>
                                         </div>
                                     </div>
                                 </div>
-                                <div class="col-xs-12 col-md-6 o_setting_box" id="languages_setting">
+                                <div class="col-12 col-lg-6 o_setting_box" id="languages_setting">
                                     <div class="o_setting_right_pane">
                                         <label for="language_ids"/>
                                         <div class="text-muted">
@@ -52,7 +52,7 @@
                                         </div>
                                     </div>
                                 </div>
-                                <div class="col-xs-12 col-md-6 o_setting_box" id="google_analytics_setting">
+                                <div class="col-12 col-lg-6 o_setting_box" id="google_analytics_setting">
                                     <div class="o_setting_left_pane">
                                         <field name="has_google_analytics"/>
                                     </div>
@@ -63,7 +63,7 @@
                                         </div>
                                         <div class="content-group" attrs="{'invisible': [('has_google_analytics', '=', False)]}">
                                             <div class="row mt16">
-                                                <label class="col-md-3 o_light_label" string="Tracking ID" for="google_analytics_key"/>
+                                                <label class="col-lg-3 o_light_label" string="Tracking ID" for="google_analytics_key"/>
                                                 <field name="google_analytics_key" placeholder="UA-XXXXXXXX-Y"
                                                     attrs="{'required': [('google_management_client_id', '!=', False)]}"/>
                                             </div>
@@ -76,7 +76,7 @@
                                         </div>
                                     </div>
                                 </div>
-                                <div class="col-xs-12 col-md-6 o_setting_box" id="google_analytics_dashboard_setting" attrs="{'invisible': [('has_google_analytics', '=', False)]}">
+                                <div class="col-12 col-lg-6 o_setting_box" id="google_analytics_dashboard_setting" attrs="{'invisible': [('has_google_analytics', '=', False)]}">
                                     <div class="o_setting_left_pane">
                                         <field name="has_google_analytics_dashboard"/>
                                     </div>
@@ -87,11 +87,11 @@
                                         </div>
                                         <div class="content-group" attrs="{'invisible': [('has_google_analytics_dashboard', '=', False)]}">
                                             <div class="row mt16">
-                                                <label class="col-md-3 o_light_label" string="Client ID" for="google_management_client_id"/>
+                                                <label class="col-lg-3 o_light_label" string="Client ID" for="google_management_client_id"/>
                                                 <field name="google_management_client_id"/>
                                             </div>
                                             <div class="row">
-                                                <label class="col-md-3 o_light_label" string="Client Secret" for="google_management_client_secret"/>
+                                                <label class="col-lg-3 o_light_label" string="Client Secret" for="google_management_client_secret"/>
                                                 <field name="google_management_client_secret"/>
                                             </div>
                                         </div>
@@ -103,7 +103,7 @@
                                         </div>
                                     </div>
                                 </div>
-                                <div class="col-xs-12 col-md-6 o_setting_box" id="google_maps_setting">
+                                <div class="col-12 col-lg-6 o_setting_box" id="google_maps_setting">
                                     <div class="o_setting_left_pane">
                                         <field name="has_google_maps"/>
                                     </div>
@@ -114,7 +114,7 @@
                                         </div>
                                         <div class="content-group" attrs="{'invisible': [('has_google_maps', '=', False)]}">
                                             <div class="row mt16">
-                                                <label class="col-md-3 o_light_label" string="API Key" for="google_maps_api_key"/>
+                                                <label class="col-lg-3 o_light_label" string="API Key" for="google_maps_api_key"/>
                                                 <field name="google_maps_api_key"/>
                                             </div>
                                         </div>
@@ -126,7 +126,7 @@
                                         </div>
                                     </div>
                                 </div>
-                                <div class="col-xs-12 col-md-6 o_setting_box">
+                                <div class="col-12 col-lg-6 o_setting_box">
                                     <div class="o_setting_left_pane">
                                         <field name="module_website_version" widget="upgrade_boolean"/>
                                     </div>
@@ -137,7 +137,7 @@
                                         </div>
                                     </div>
                                 </div>
-                                <div class="col-xs-12 col-md-6 o_setting_box">
+                                <div class="col-12 col-lg-6 o_setting_box">
                                     <div class="o_setting_left_pane">
                                     </div>
                                     <div class="o_setting_right_pane">
@@ -155,7 +155,7 @@
                                         </div>
                                     </div>
                                 </div>
-                                <div class="col-xs-12 col-md-6 o_setting_box" id="cdn_setting" title="A CDN helps you serve your website’s content with high availability and high performance to any visitor wherever they are located." groups="base.group_no_one">
+                                <div class="col-12 col-lg-6 o_setting_box" id="cdn_setting" title="A CDN helps you serve your website’s content with high availability and high performance to any visitor wherever they are located." groups="base.group_no_one">
                                     <div class="o_setting_left_pane">
                                         <field name="cdn_activated"/>
                                     </div>
@@ -166,21 +166,21 @@
                                         </div>
                                         <div class="content-group" attrs="{'invisible': [('cdn_activated', '=', False)]}">
                                             <div class="row mt16">
-                                                <label class="col-md-3 o_light_label" for="cdn_url"/>
+                                                <label class="col-lg-3 o_light_label" for="cdn_url"/>
                                                 <field name="cdn_url"
                                                        attrs="{'required': [('cdn_activated', '=', True)]}"
                                                        placeholder="//mycompany.mycdn.com/"
                                                        t-translation="off"/>
                                             </div>
                                             <div class="row" >
-                                                <label class="col-md-3 o_light_label" for="cdn_filters"/>
+                                                <label class="col-lg-3 o_light_label" for="cdn_filters"/>
                                                 <field name="cdn_filters" class="oe_inline"
                                                        attrs="{'required': [('cdn_activated', '=', True)]}"/>
                                             </div>
                                         </div>
                                     </div>
                                 </div>
-                                <div class="col-xs-12 col-md-6 o_setting_box" id="utm_tracker_settings" title="Analyze the efficiency of your marketing campaigns by using trackable UTM trackers (campaigns, medium, sources). Create trackers and follow clicks from the Promote menu of your website. Those trackers can be used in Google Analytics or in Odoo reports where you can see the opportunities and sales revenue generated thanks to your links.">
+                                <div class="col-12 col-lg-6 o_setting_box" id="utm_tracker_settings" title="Analyze the efficiency of your marketing campaigns by using trackable UTM trackers (campaigns, medium, sources). Create trackers and follow clicks from the Promote menu of your website. Those trackers can be used in Google Analytics or in Odoo reports where you can see the opportunities and sales revenue generated thanks to your links.">
                                     <div class="o_setting_left_pane">
                                         <field name="module_website_links"/>
                                     </div>
diff --git a/addons/website/views/snippets.xml b/addons/website/views/snippets.xml
index b8cd2ccb2e9..bc63db88c9b 100644
--- a/addons/website/views/snippets.xml
+++ b/addons/website/views/snippets.xml
@@ -4,7 +4,7 @@
     <section class="s_text_block_image_fw oe_img_bg oe_custom_bg pt64 pb64" style="background-image: url(/web/image/website.s_cover_default_image); background-position: 50% 100%">
         <div class="container">
             <div class="row">
-                <div class="col-md-6 bg-black-25 pt32 pb32">
+                <div class="col-lg-6 bg-black-25 pt32 pb32">
                     <h2 style="font-size:62px">Headline</h2>
                     <h4>With a great subtitle</h4>
                     <p>Write one or two paragraphs describing your product, services or a specific feature. To be successful your content needs to be useful to your readers.</p>
@@ -24,12 +24,12 @@
             <div class="item oe_img_bg active bg-alpha pt48 pb48">
                 <div class="container">
                     <div class="row content">
-                        <div class="carousel-content col-md-4 col-md-offset-1 mt64">
+                        <div class="carousel-content col-lg-4 offset-lg-1 mt64">
                             <h2>Your Slide Title</h2>
                             <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 d-none d-lg-block">
+                        <div class="carousel-img col-lg-6 offset-lg-1 d-none d-lg-block">
                             <img class="img-fluid" src="/web/image/website.s_banner_default_image" alt="Slider Odoo Image"/>
                         </div>
                     </div>
@@ -45,7 +45,7 @@
     <section class="s_text_image pt32 pb32">
         <div class="container">
             <div class="row">
-                <div class="col-md-6 mt32">
+                <div class="col-lg-6 mt32">
                     <h3 style="text-align: right;">A Section Subtitle</h3>
                     <p style="text-align: right;">
                         Write one or two paragraphs describing your product or
@@ -56,7 +56,7 @@
                         and give it to them.
                     </p>
                 </div>
-                <div class="col-md-6">
+                <div class="col-lg-6">
                   <img class="img img-fluid pull-left mb16" src="/web/image/website.s_text_image_default_image" alt="Odoo text and image block"/>
                 </div>
             </div>
@@ -68,10 +68,10 @@
     <section class="s_image_text pt32 pb32">
         <div class="container">
             <div class="row">
-                <div class="col-md-6">
+                <div class="col-lg-6">
                   <img class="img img-fluid center-block mb16" src="/web/image/website.s_image_text_default_image"  alt="Odoo image and text block"/>
                 </div>
-                <div class="col-md-6 mt32">
+                <div class="col-lg-6 mt32">
                     <h3>A Section Subtitle</h3>
                     <p>
                         Write one or two paragraphs describing your product,
@@ -91,7 +91,7 @@
     <section class="jumbotron s_big_message oe_img_bg oe_custom_bg pb32" style="background-image: url('/web/image/website.s_background_image_01');">
         <div class="container">
             <div class="row">
-                <div class="col-md-offset-1 col-md-8">
+                <div class="offset-lg-1 col-lg-8">
                     <h1>Sell Online. Easily.</h1>
                     <p>Write one sentence to convince visitor about your message.</p>
                     <a role="button" class="btn btn-warning btn-lg" href="/contactus">Contact us</a>
@@ -107,7 +107,7 @@
             <h2 class="text-center">A Great Headline</h2>
             <h3 class="text-center text-muted">A good subtitle</h3>
             <div class="row">
-                <div class="col-md-12">
+                <div class="col-lg-12">
                     <p>
                         A great way to catch your reader's attention is to tell a story.
                         Everything you consider writing can be told as a story.
@@ -134,7 +134,7 @@
     <section class="s_title">
         <div class="container">
             <div class="row">
-                <div class="col-md-12">
+                <div class="col-lg-12">
                     <h1 class="text-center">Your Website Title</h1>
                     <h3 class="text-center text-muted">And a great subtitle too</h3>
                 </div>
@@ -147,21 +147,21 @@
     <section class="s_features pt16 pb16">
         <div class="container">
             <div class="row">
-                <div class="col-md-4 text-center">
+                <div class="col-lg-4 text-center">
                     <span class="fa fa-suitcase fa-5x" role="img" aria-label="Suitcase" title="Suitcase"></span>
                     <div>
                         <h3 class="mt8 mb0">First Feature</h3>
                         <p class="text-muted">Tell what's the value for the<br/>customer for this feature.</p>
                     </div>
                 </div>
-                <div class="col-md-4 text-center">
+                <div class="col-lg-4 text-center">
                     <span class="fa fa-lock fa-5x" role="img" aria-label="Lock" title="Lock"></span>
                     <div>
                         <h3 class="mt8 mb0">Second Feature</h3>
                         <p class="text-muted">Write what the customer would like to know,<br/>not what you want to show.</p>
                     </div>
                 </div>
-                <div class="col-md-4 text-center">
+                <div class="col-lg-4 text-center">
                     <span class="fa fa-heart fa-5x" role="img" aria-label="Heart" title="Heart"></span>
                     <div>
                         <h3 class="mt8 mb0">Third Feature</h3>
@@ -178,10 +178,10 @@
         <div class="container">
             <h2 class="text-center">A Punchy Headline</h2>
             <div class="row">
-                <div class="col-md-12">
+                <div class="col-lg-12">
                   <img class="img img-fluid" src="/web/image/website.s_big_picture_default_image" style="margin: 0 auto;"  alt="Odoo CMS - a big picture"/>
                 </div>
-                <div class="col-md-6 col-md-offset-3 mt16">
+                <div class="col-lg-6 offset-lg-3 mt16">
                     <p class="text-center">
                         <b>A Small Subtitle</b>
                     </p>
@@ -203,7 +203,7 @@
     <section class="s_three_columns pt32 pb48">
         <div class="container">
             <div class="row">
-                <div class="col-md-4">
+                <div class="col-lg-4">
                     <img class="img img-fluid" src="/web/image/website.library_image_11" alt="Odoo - Sample 1 for three columns"/>
                     <h4 class="mt16">Feature One</h4>
                     <p>
@@ -212,7 +212,7 @@
                         column and use the top icons to perform your action.
                     </p>
                 </div>
-                <div class="col-md-4">
+                <div class="col-lg-4">
                     <img class="img img-fluid" src="/web/image/website.library_image_13" alt="Odoo - Sample 2 for three columns"/>
                     <h4 class="mt16">Feature Two</h4>
                     <p>
@@ -222,7 +222,7 @@
                         one as a copy.
                     </p>
                 </div>
-                <div class="col-md-4">
+                <div class="col-lg-4">
                     <img class="img img-fluid" src="/web/image/website.library_image_07" alt="Odoo - Sample 3 for three columns"/>
                     <h4 class="mt16">Feature Three</h4>
                     <p>
@@ -306,7 +306,7 @@
         <div class="container">
             <h2 class="text-center">Our Offers</h2>
             <div class="row">
-                <div class="col-md-4 col-xs-12">
+                <div class="col-lg-4 col-12">
                     <div class="panel bg-gray-light">
                         <div class="panel-heading text-center" style="background-color: rgba(255, 255, 255, 0.1)">
                             <h3 style="margin: 0">Beginner</h3>
@@ -332,7 +332,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="col-md-4 col-xs-12">
+                <div class="col-lg-4 col-12">
                     <div class="panel bg-beta">
                         <div class="panel-heading text-center" style="background-color: rgba(255, 255, 255, 0.1)">
                             <h3 style="margin: 0">Professional</h3>
@@ -354,7 +354,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="col-md-4 col-xs-12">
+                <div class="col-lg-4 col-12">
                     <div class="panel bg-gray-light">
                         <div class="panel-heading text-center" style="background-color: rgba(255, 255, 255, 0.1)">
                             <h3 style="margin: 0">Expert</h3>
@@ -388,12 +388,12 @@
                 Meet the Executive Team
             </h1>
             <div class="row">
-                <div class="col-md-6 pt16 pb16">
+                <div class="col-lg-6 pt16 pb16">
                     <div class="row s_no_resize_cols">
-                        <div class="col-md-4">
+                        <div class="col-lg-4">
                             <img alt="Company team" src="/web/image/website.s_company_team_image_1" class="img-fluid img-circle center-block shadow"/>
                         </div>
-                        <div class="col-md-8">
+                        <div class="col-lg-8">
                             <h4>Tony Fred, CEO</h4>
                             <p class="text-muted">
                                 Founder and chief visionary, Tony is the driving force behind Company. He loves
@@ -403,12 +403,12 @@
                         </div>
                     </div>
                 </div>
-                <div class="col-md-6 pt16 pb16">
+                <div class="col-lg-6 pt16 pb16">
                     <div class="row s_no_resize_cols">
-                        <div class="col-md-4">
+                        <div class="col-lg-4">
                             <img alt="Company team" src="/web/image/website.s_company_team_image_2" class="img-fluid img-circle center-block shadow"/>
                         </div>
-                        <div class="col-md-8">
+                        <div class="col-lg-8">
                             <h4>Mich Stark, COO</h4>
                             <p class="text-muted">
                                 Mich loves taking on challenges. With his multi-year experience as Commercial
@@ -418,12 +418,12 @@
                         </div>
                     </div>
                 </div>
-                <div class="col-md-6 pt16 pb16">
+                <div class="col-lg-6 pt16 pb16">
                     <div class="row s_no_resize_cols">
-                        <div class="col-md-4">
+                        <div class="col-lg-4">
                             <img alt="Company team" src="/web/image/website.s_company_team_image_3" class="img-fluid img-circle center-block shadow"/>
                         </div>
-                        <div class="col-md-8">
+                        <div class="col-lg-8">
                             <h4>Aline Turner, CTO</h4>
                             <p class="text-muted">
                                 Aline is one of the iconic person in life who can say she loves what she does.
@@ -433,12 +433,12 @@
                         </div>
                     </div>
                 </div>
-                <div class="col-md-6 pt16 pb16">
+                <div class="col-lg-6 pt16 pb16">
                     <div class="row s_no_resize_cols">
-                        <div class="col-md-4">
+                        <div class="col-lg-4">
                             <img alt="Company team" src="/web/image/website.s_company_team_image_4" class="img-fluid img-circle center-block shadow"/>
                         </div>
-                        <div class="col-md-8">
+                        <div class="col-lg-8">
                             <h4>Iris Joe, CFO</h4>
                             <p class="text-muted">
                                 Iris, with her international experience, helps us easily understand the numbers and
@@ -457,14 +457,14 @@
     <section class="jumbotron s_button bg-gray-lighter">
         <div class="container">
             <div class="row">
-                <div class="col-md-9">
+                <div class="col-lg-9">
                     <p class="mb0">
                         <strong>50,000+ companies run Odoo to grow their businesses.</strong>
                     </p><p class="mb0">
                         Join us and make your company a better place.
                     </p>
                 </div>
-                <div class="col-md-3">
+                <div class="col-lg-3">
                     <a role="button" href="/contactus" class="btn btn-primary btn-lg pull-right mt8" aria-label="Contact Us Now" title="">
                         <span>Contact Us Now</span>
                         <i class="fa fa-chevron-right"></i>
@@ -543,22 +543,22 @@
     <section class="s_references bg-gray-lighter pt16 pb16">
         <div class="container">
             <div class="row">
-                <div class="col-md-2 mt32">
+                <div class="col-lg-2 mt32">
                   <h4 class="text-center">Our References</h4>
                 </div>
-                <div class="col-md-2 col-sm-3 col-xs-6">
+                <div class="col-lg-2 col-md-3 col-6">
                   <img src="/web/image/website.s_reference_demo_image_1" class="img img-fluid " alt="Demo Logo"/>
                 </div>
-                <div class="col-md-2 col-sm-3 col-xs-6">
+                <div class="col-lg-2 col-md-3 col-6">
                   <img src="/web/image/website.s_reference_demo_image_2" class="img img-fluid " alt="Demo Logo"/>
                 </div>
-                <div class="col-md-2 col-sm-3 col-xs-6">
+                <div class="col-lg-2 col-md-3 col-6">
                   <img src="/web/image/website.s_reference_demo_image_3" class="img img-fluid " alt="Demo Logo"/>
                 </div>
-                <div class="col-md-2 col-sm-3 col-xs-6">
+                <div class="col-lg-2 col-md-3 col-6">
                   <img src="/web/image/website.s_reference_demo_image_4" class="img img-fluid " alt="Demo Logo"/>
                 </div>
-                <div class="col-md-2 col-sm-3 col-xs-6">
+                <div class="col-lg-2 col-md-3 col-6">
                   <img src="/web/image/website.s_reference_demo_image_5" class="img img-fluid " alt="Demo Logo"/>
                 </div>
             </div>
@@ -570,46 +570,46 @@
     <section class="s_feature_grid pt16">
         <div class="container">
             <div class="row">
-                <div class="col-md-5 col-md-offset-1">
+                <div class="col-lg-5 offset-lg-1">
                     <div class="row">
-                        <div class="col-md-12 pb16">
+                        <div class="col-lg-12 pb16">
                             <h3 class="mb0">List of Features</h3>
                             <h5 class="text-muted">Add a great slogan</h5>
                         </div>
-                        <div class="col-md-12">
+                        <div class="col-lg-12">
                             <span style="min-width: 45px" class="fa fa-2x fa-comment pull-left mb16" role="img" aria-label="Change icons" title="Change icons"></span>
                             <h4 class="mt0 mb0">Change Icons</h4>
                             <p>Click on the icon to adapt it to your feature</p><br/>
                         </div>
-                        <div class="col-md-12">
+                        <div class="col-lg-12">
                             <span style="min-width: 45px" class="fa fa-2x fa-columns pull-left mb16" role="img" aria-label="Duplicate" title="Duplicate"></span>
                             <h4 class="mt0 mb0">Duplicate</h4>
                             <p>Duplicate blocks to add more features.</p><br/>
                         </div>
-                        <div class="col-md-12">
+                        <div class="col-lg-12">
                             <span style="min-width: 45px" class="fa fa-2x fa-user pull-left mb16" role="img" aria-label="Delete blocks" title="Delete blocks"></span>
                             <h4 class="mt0 mb0">Delete Blocks</h4>
                             <p>Select and delete blocks to remove some features.</p><br/>
                         </div>
                     </div>
                 </div>
-                <div class="col-md-5">
+                <div class="col-lg-5">
                     <div class="row">
-                        <div class="col-md-12 pb16">
+                        <div class="col-lg-12 pb16">
                             <h3 class="mb0">Second List</h3>
                             <h5 class="text-muted">Add a great slogan</h5>
                         </div>
-                        <div class="col-md-12">
+                        <div class="col-lg-12">
                             <span style="min-width: 45px" class="fa fa-2x fa-magic pull-left mb16" role="img" aria-label="Great value" title="Great value"></span>
                             <h4 class="mt0 mb0">Great Value</h4>
                             <p>Tell features the visitor would like to know, not what you'd like to say.</p>
                         </div>
-                        <div class="col-md-12">
+                        <div class="col-lg-12">
                             <span style="min-width: 45px" class="fa fa-2x fa-bolt pull-left mb16" role="img" aria-label="Change background" title="Change background"></span>
                             <h4 class="mt0 mb0">Change Background</h4>
                             <p>From the main container, you can change the background to highlight features.</p>
                         </div>
-                        <div class="col-md-12">
+                        <div class="col-lg-12">
                             <span style="min-width: 45px" class="fa fa-2x fa-picture-o pull-left mb16" role="img" aria-label="Sample images" title="Change background"></span>
                             <h4 class="mt0 mb0">Sample images</h4>
                             <p>All these icons are licensed under creative commons so that you can use them.</p>
@@ -645,7 +645,7 @@
                                 <div class="content">
 
                                     <div class="row">
-                                        <blockquote class="mt48 mb16 col-md-4 col-md-offset-4">
+                                        <blockquote class="mt48 mb16 col-lg-4 offset-lg-4">
                                             <p>
                                                 Write a quote here from one of your customers. Quotes are a
                                                 great way to build confidence in your products or services.
@@ -663,7 +663,7 @@
                                 <div class="content">
 
                                     <div class="row">
-                                        <blockquote class="mt48 mb16 col-md-4 col-md-offset-4">
+                                        <blockquote class="mt48 mb16 col-lg-4 offset-lg-4">
                                             <p>
                                                 Odoo provides essential platform for our project management.
                                                 Things are better organized and more visible with it.
@@ -883,7 +883,7 @@
         data-drop-in=":not(p).oe_structure, :not(p)[data-oe-type=html]"/>
 
     <div data-js="sizing_y"
-        data-selector="section, .row:not(.s_no_resize_cols) > [class*='col-md-'], :not(.o_gallery > .container) > .carousel, .parallax, hr">
+        data-selector="section, .row:not(.s_no_resize_cols) > [class*='col-lg-'], :not(.o_gallery > .container) > .carousel, .parallax, hr">
     </div>
 
     <div data-js="layout_column"
@@ -904,8 +904,8 @@
     </div>
 
     <div data-js="sizing_x"
-        data-selector=".row:not(.s_no_resize_cols) > [class*='col-md-']"
-        data-drop-near=".row:not(.s_no_resize_cols) > [class*='col-md-']">
+        data-selector=".row:not(.s_no_resize_cols) > [class*='col-lg-']"
+        data-drop-near=".row:not(.s_no_resize_cols) > [class*='col-lg-']">
     </div>
 
     <div data-js='content'
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index 84622413b7b..ac3e17f09f3 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -210,11 +210,11 @@
     <xpath expr="//footer" position="inside">
         <div class="container o_footer_copyright">
             <div class="row">
-                <div class="col-md-6 text-muted text-center-xs">
+                <div class="col-lg-6 text-muted text-center-xs">
                     <span>Copyright &amp;copy;</span> <span t-field="res_company.name" itemprop="name">Company name</span>
                     <t t-call="website.language_selector"/>
                 </div>
-                <div class="col-md-6 text-right o_not_editable" t-if="not editable">
+                <div class="col-lg-6 text-right o_not_editable" t-if="not editable">
                     <t t-call="website.brand_promotion"/>
                 </div>
             </div>
@@ -268,13 +268,13 @@
             <section class="s_text_block pt16 pb8">
                 <div class="container">
                     <div class="row">
-                        <div class="col-md-4">
+                        <div class="col-lg-4">
                             <h4>Our Products &amp; Services</h4>
                             <ul class="list-unstyled">
                                 <li><a href="/">Home</a></li>
                             </ul>
                         </div>
-                        <div class="col-md-4">
+                        <div class="col-lg-4">
                             <h4>Connect with us</h4>
                             <ul class="list-unstyled">
                                 <li><a href="/contactus">Contact us</a></li>
@@ -290,7 +290,7 @@
                                 <a t-if="website.social_github" t-att-href="website.social_github" class="btn btn-xs btn-link"><i class="fa fa-2x fa-github"/></a>
                             </div>
                         </div>
-                        <div class="col-md-4">
+                        <div class="col-lg-4">
                             <h4>
                                 <span t-field="res_company.name"/>
                                 <small> - <a href="/aboutus">About us</a></small>
@@ -744,11 +744,11 @@
                         </header>
                         <main class="modal-body">
                             <div class="form-group mb0">
-                                <label for="page-name" class="col-sm-9">
+                                <label for="page-name" class="col-md-9">
                                     <p>The selected templates will be reset to their factory settings.</p>
                                     <p>Type '<i class="confirm_word">yes</i>' in the box below if you want to confirm.</p>
                                 </label>
-                                <div class="col-sm-3 mt16">
+                                <div class="col-md-3 mt16">
                                     <input type="text" class="form-control" required="required" placeholder="yes"/>
                                 </div>
                             </div>
@@ -911,10 +911,10 @@ Sitemap: <t t-esc="url_root"/>sitemap.xml
                     <tr class="active">
                       <th>Name</th>
                       <th>Url</th>
-                      <th class="col-md-1 text-center"><i title="Is the page included in the main menu?" role="img" aria-label="Is the page included in the main menu?" class="fa fa-thumb-tack"></i></th>
-                      <th class="col-md-1 text-center"><i title="Is the page published?" role="img" aria-label="Is the page published?" class="fa fa-eye"></i></th>
-                      <th class="col-md-1 text-center"><i title="Is the page indexed by search engines?" role="img" aria-label="Is the page indexed by search engines?" class="fa fa-globe"></i></th>
-                      <th class="col-sm-3 col-md-2"></th>
+                      <th class="col-lg-1 text-center"><i title="Is the page included in the main menu?" role="img" aria-label="Is the page included in the main menu?" class="fa fa-thumb-tack"></i></th>
+                      <th class="col-lg-1 text-center"><i title="Is the page published?" role="img" aria-label="Is the page published?" class="fa fa-eye"></i></th>
+                      <th class="col-lg-1 text-center"><i title="Is the page indexed by search engines?" role="img" aria-label="Is the page indexed by search engines?" class="fa fa-globe"></i></th>
+                      <th class="col-md-3 col-lg-2"></th>
                     </tr>
                   </thead>
                   <t t-foreach="pages" t-as="page">
diff --git a/addons/website_blog/data/website_blog_demo.xml b/addons/website_blog/data/website_blog_demo.xml
index 6cf92624bbd..e08e05b6f73 100644
--- a/addons/website_blog/data/website_blog_demo.xml
+++ b/addons/website_blog/data/website_blog_demo.xml
@@ -24,7 +24,7 @@
 <section class="s_text_block">
     <div class="container">
         <div class="row">
-            <div class="col-md-8 col-md-offset-2 mb16 mt16">
+            <div class="col-lg-8 offset-lg-2 mb16 mt16">
                 <iframe width="100%" height="250" src="http://www.youtube.com/embed/EkbBFmIWoTE" frameborder="0" allowfullscreen></iframe>
                 <p>
                     Emails are broken.
@@ -50,7 +50,7 @@
 <section class="s_text_block">
     <div class="container">
         <div class="row">
-            <div class="col-md-8 col-md-offset-2 mb16 mt16">
+            <div class="col-lg-8 offset-lg-2 mb16 mt16">
                 <p>
                     At Odoo, we build tools to bring productivity to
                     enterprises. As emails and information flows are one of
@@ -138,10 +138,10 @@
 <section class="s_image_text">
     <div class="container">
         <div class="row">
-            <div class="col-md-6 mt16">
+            <div class="col-lg-6 mt16">
                 <img class="img img-fluid mb16" src="/website_blog/static/src/img/CMS_WMS_screens.jpg" alt=""/>
             </div>
-            <div class="col-md-6 mt16">
+            <div class="col-lg-6 mt16">
                 <h3>New Features Launched</h3>
 
                 <p data-chatter-id="counter_0/section/div/div/div">To add to an already comprehensive set of Odoo
@@ -154,7 +154,7 @@
 <section class="s_text_block">
     <div class="container">
         <div class="row">
-            <div class="col-md-8 col-md-offset-2 mb16 mt16">
+            <div class="col-lg-8 offset-lg-2 mb16 mt16">
                 <p>
                     Odoo claims to be 'the Open Source software that makes
                     building your company's website and selling your products
diff --git a/addons/website_blog/models/website_blog.py b/addons/website_blog/models/website_blog.py
index 9e9fdb8fba0..3741ee16035 100644
--- a/addons/website_blog/models/website_blog.py
+++ b/addons/website_blog/models/website_blog.py
@@ -133,7 +133,7 @@ class BlogPost(models.Model):
             <section class="s_text_block">
                 <div class="container">
                     <div class="row">
-                        <div class="col-md-12 mb16 mt16">
+                        <div class="col-lg-12 mb16 mt16">
                             <p class="o_default_snippet_text">''' + _("Start writing here...") + '''</p>
                         </div>
                     </div>
diff --git a/addons/website_blog/views/website_blog_templates.xml b/addons/website_blog/views/website_blog_templates.xml
index 01f8f8778c8..fa7385b6303 100644
--- a/addons/website_blog/views/website_blog_templates.xml
+++ b/addons/website_blog/views/website_blog_templates.xml
@@ -39,7 +39,7 @@
             </section>
             <section class="container">
                 <div class="row">
-                    <div class="col-md-12 text-center">
+                    <div class="col-lg-12 text-center">
                         <h1>Latest Posts</h1>
                     </div>
                 </div>
@@ -48,7 +48,7 @@
                 <div class="row">
                     <t t-set="count" t-value="0"/>
                     <t t-foreach="posts" t-as="post">
-                      <div class="col-md-4">
+                      <div class="col-lg-4">
                         <h4>
                             <a t-attf-href="#{blog_url('', ['blog', 'post'], blog=post.blog_id, post=post)}" t-field="post.name"></a>
                             <span t-if="not post.website_published" class="text-warning">
@@ -106,7 +106,7 @@
             <section class="mb0">
                 <div class="container">
                     <div class="row">
-                        <div class="col-md-12 mb32 mt16 text-center">
+                        <div class="col-lg-12 mb32 mt16 text-center">
                             <h1 t-field="blog.name"/>
                             <h3 class="text-muted" t-field="blog.subtitle"/>
                         </div>
@@ -116,7 +116,7 @@
         </div>
         <div class="container">
             <div class="row">
-              <div class="col-md-8 col-md-offset-2" t-ignore="True" id="main_column">
+              <div class="col-lg-8 offset-lg-2" t-ignore="True" id="main_column">
 
                 <div t-if="not blog_posts" class="container mb64">
                     <p class="css_editable_hidden">
@@ -197,7 +197,7 @@
 <template id="opt_blog_post_grid_layout" name="Grid view"
         customize_show="True" active="False" inherit_id="website_blog.blog_post_short">
     <xpath expr="//div[@name='blog_post']" position="attributes">
-        <attribute name="class" add="col-sm-5 o_grid" separator=" "/>
+        <attribute name="class" add="col-md-5 o_grid" separator=" "/>
     </xpath>
 </template>
 
@@ -277,14 +277,14 @@
     <xpath expr="//div[@id='title']" position="before">
         <div class="container">
           <div class="row">
-            <div class="col-sm-9">
+            <div class="col-md-9">
                 <ol class="breadcrumb">
                     <li class="breadcrumb-item"><a t-attf-href="#{blog_url(tag=None, date_begin=None, date_end=None)}"><span t-field="blog.name"/></a></li>
                     <li t-if="tag" class="breadcrumb-item"><a t-attf-href="#{blog_url(date_begin=None, date_end=None)}"><span t-field="tag.name"/></a></li>
                     <li t-if="date" class="breadcrumb-item"><a t-attf-href="#{blog_url(tag=None)}" t-esc="date"/></li>
                     <li class="breadcrumb-item active"><span t-field="blog_post.name"/></li>
                 </ol>
-            </div><div class="col-sm-3">
+            </div><div class="col-md-3">
             </div>
           </div>
         </div>
@@ -381,7 +381,7 @@
 <template id="index_right" name="Right Column"
         inherit_id="website_blog.blog_post_short">
     <xpath expr="//div[@id='main_column']" position="after">
-        <div class="col-lg-3 col-lg-offset-1 col-sm-4" id="blog_right_column"/>
+        <div class="col-xl-3 offset-xl-1 col-md-4" id="blog_right_column"/>
     </xpath>
 </template>
 
@@ -407,7 +407,7 @@
 <template id="opt_blog_rc_tags" name="Tags"
         inherit_id="website_blog.index_right" active="True" customize_show="True">
     <xpath expr="//div[@id='main_column']" position="attributes">
-        <attribute name="class">col-sm-8</attribute>
+        <attribute name="class">col-md-8</attribute>
     </xpath>
     <xpath expr="//div[@id='blog_right_column']" position="inside">
         <section class="mt32 blog_tags">
@@ -431,7 +431,7 @@
 <template id="opt_blog_rc_history" name="Archives"
         inherit_id="website_blog.index_right" active="True" customize_show="True">
     <xpath expr="//div[@id='main_column']" position="attributes">
-        <attribute name="class">col-sm-8</attribute>
+        <attribute name="class">col-md-8</attribute>
     </xpath>
     <xpath expr="//div[@id='blog_right_column']" position="inside">
         <section class="mt32">
@@ -461,7 +461,7 @@
 <template id="opt_blog_rc_about_us" name="About Us" priority="2"
         inherit_id="website_blog.index_right" active="True" customize_show="True">
     <xpath expr="//div[@id='main_column']" position="attributes">
-        <attribute name="class">col-sm-8</attribute>
+        <attribute name="class">col-md-8</attribute>
     </xpath>
     <xpath expr="//div[@id='blog_right_column']" position="inside">
         <section class="mt32">
@@ -478,7 +478,7 @@
 <template id="opt_blog_rc_follow_us" name="Subscription" priority="4"
         inherit_id="website_blog.index_right" active="True" customize_show="True">
     <xpath expr="//div[@id='main_column']" position="attributes">
-        <attribute name="class">col-sm-8</attribute>
+        <attribute name="class">col-md-8</attribute>
     </xpath>
     <xpath expr="//div[@id='blog_right_column']" position="inside">
         <section class="mt32">
@@ -509,7 +509,7 @@
 <template id="opt_blog_rc_status" name="Status" priority="5"
         inherit_id="website_blog.index_right" active="True" customize_show="True">
     <xpath expr="//div[@id='main_column']" position="attributes">
-        <attribute name="class">col-sm-8</attribute>
+        <attribute name="class">col-md-8</attribute>
     </xpath>
     <xpath expr="//div[@id='blog_right_column']" position="inside">
         <section class="mt32 mb32" groups="website.group_website_designer">
@@ -531,7 +531,7 @@
 <template id="opt_blog_rc_blogs" name="Our Blogs" priority="6"
         inherit_id="website_blog.index_right" active="True" customize_show="True">
     <xpath expr="//div[@id='main_column']" position="attributes">
-        <attribute name="class">col-sm-8</attribute>
+        <attribute name="class">col-md-8</attribute>
     </xpath>
     <xpath expr="//div[@id='blog_right_column']" position="inside">
         <section class="mt32 mb32">
diff --git a/addons/website_blog/views/website_blog_views.xml b/addons/website_blog/views/website_blog_views.xml
index c2f18ddfbe6..357cfbc2268 100644
--- a/addons/website_blog/views/website_blog_views.xml
+++ b/addons/website_blog/views/website_blog_views.xml
@@ -129,16 +129,16 @@
                         <t t-name="kanban-box">
                             <div class="oe_kanban_global_click">
                                 <div class="row mb4">
-                                    <strong class="col-xs-8">
+                                    <strong class="col-8">
                                         <span t-esc="record.name.value"/>
                                     </strong>
-                                    <strong class="col-xs-4 text-right">
+                                    <strong class="col-4 text-right">
                                         <span t-esc="record.blog_id.value"/>
                                     </strong>
-                                    <div class="col-xs-8">
+                                    <div class="col-8">
                                         <i class="fa fa-clock-o" role="img" aria-label="Post date" title="Post date"/><span t-esc="record.post_date.value"/>
                                     </div>
-                                    <div class="col-xs-4 text-right">
+                                    <div class="col-4 text-right">
                                         <img t-att-src="kanban_image('res.partner', 'image_small', record.author_id.raw_value)" t-att-title="record.author_id.value" t-att-alt="record.author_id.value" width="24" height="24" class="oe_kanban_avatar"/>
                                     </div>
                                 </div>
diff --git a/addons/website_crm/views/res_config_settings_views.xml b/addons/website_crm/views/res_config_settings_views.xml
index 8882be19f79..ee99fe898d5 100644
--- a/addons/website_crm/views/res_config_settings_views.xml
+++ b/addons/website_crm/views/res_config_settings_views.xml
@@ -8,14 +8,14 @@
             <div id="webmaster_settings" position="after">
                 <h2>Communication</h2>
                 <div class="row mt16 o_settings_container" id="communication_settings">
-                    <div class="col-xs-12 col-md-6 o_setting_box" id="contact_form_install_setting" title="New messages are managed as leads or opportunities in your CRM app.">
+                    <div class="col-12 col-lg-6 o_setting_box" id="contact_form_install_setting" title="New messages are managed as leads or opportunities in your CRM app.">
                         <div class="o_setting_right_pane">
                             <label for="id" string="Contact Form"/>
                             <div class="text-muted" id="msg_contact_form_install_setting">
                                 Add a contact form in the <a href="/contactus">Contact Us</a> page
                             </div>
                             <div class="row">
-                                <label class="col-md-3 o_light_label" string="Sales Team" for="crm_default_team_id"/>
+                                <label class="col-lg-3 o_light_label" string="Sales Team" for="crm_default_team_id"/>
                                 <field name="crm_default_team_id" class="oe_inline"/>
                             </div>
                             <div class="content-group mb16" attrs="{'invisible': [('crm_default_team_id', '!=', False)]}">
@@ -25,7 +25,7 @@
                             </div>
 
                             <div class="row">
-                                <label class="col-md-3 o_light_label" string="Salesperson" for="crm_default_user_id"/>
+                                <label class="col-lg-3 o_light_label" string="Salesperson" for="crm_default_user_id"/>
                                 <field name="crm_default_user_id" class="oe_inline"/>
                             </div>
                         </div>
diff --git a/addons/website_crm/views/website_crm_templates.xml b/addons/website_crm/views/website_crm_templates.xml
index d5fa52268de..5aa3814856d 100644
--- a/addons/website_crm/views/website_crm_templates.xml
+++ b/addons/website_crm/views/website_crm_templates.xml
@@ -5,43 +5,43 @@
                 <div>
                     <form action="/website_form/" method="post" data-model_name="crm.lead" data-success_page="/contactus-thank-you" class="s_website_form form-horizontal container-fluid mt32" enctype="multipart/form-data" data-editable-form="false">
                         <div class="form-group form-field o_website_form_required_custom">
-                            <label class="col-md-3 col-sm-4 control-label" for="contact_name">Your Name</label>
-                            <div class="col-md-7 col-sm-8">
+                            <label class="col-lg-3 col-md-4 control-label" for="contact_name">Your Name</label>
+                            <div class="col-lg-7 col-md-8">
                                 <input type="text" class="form-control o_website_form_input" name="contact_name" t-att-value="request.params.get('contact_name', '')" required=""/>
                             </div>
                         </div>
                         <div class="form-group form-field">
-                            <label class="col-md-3 col-sm-4 control-label" for="phone">Phone Number</label>
-                            <div class="col-md-7 col-sm-8">
+                            <label class="col-lg-3 col-md-4 control-label" for="phone">Phone Number</label>
+                            <div class="col-lg-7 col-md-8">
                                 <input type="text" class="form-control o_website_form_input" name="phone" t-att-value="request.params.get('phone', '')" />
                             </div>
                         </div>
                         <div class="form-group form-field o_website_form_required_custom">
-                            <label class="col-md-3 col-sm-4 control-label" for="email_from">Email</label>
-                            <div class="col-md-7 col-sm-8">
+                            <label class="col-lg-3 col-md-4 control-label" for="email_from">Email</label>
+                            <div class="col-lg-7 col-md-8">
                                 <input type="text" class="form-control o_website_form_input" name="email_from" required="" t-att-value="request.params.get('email_from', '')" />
                             </div>
                         </div>
                         <div class="form-group form-field o_website_form_required_custom">
-                            <label class="col-md-3 col-sm-4 control-label" for="partner_name">Your Company</label>
-                            <div class="col-md-7 col-sm-8">
+                            <label class="col-lg-3 col-md-4 control-label" for="partner_name">Your Company</label>
+                            <div class="col-lg-7 col-md-8">
                                 <input type="text" class="form-control o_website_form_input" name="partner_name" required="" t-att-value="request.params.get('partner_name', '')" />
                             </div>
                         </div>
                         <div class="form-group form-field o_website_form_required">
-                            <label class="col-md-3 col-sm-4 control-label" for="name">Subject</label>
-                            <div class="col-md-7 col-sm-8">
+                            <label class="col-lg-3 col-md-4 control-label" for="name">Subject</label>
+                            <div class="col-lg-7 col-md-8">
                                 <input type="text" class="form-control o_website_form_input" name="name" required="" t-att-value="request.params.get('name', '')" />
                             </div>
                         </div>
                         <div class="form-group form-field o_website_form_required_custom">
-                            <label class="col-md-3 col-sm-4 control-label" for="description">Your Question</label>
-                            <div class="col-md-7 col-sm-8">
+                            <label class="col-lg-3 col-md-4 control-label" for="description">Your Question</label>
+                            <div class="col-lg-7 col-md-8">
                                 <textarea class="form-control o_website_form_input" name="description" required=""><t t-esc="request.params.get('description', '')"/></textarea>
                             </div>
                         </div>
                         <div class="form-group">
-                            <div class="col-md-offset-3 col-sm-offset-4 col-sm-8 col-md-7">
+                            <div class="offset-lg-3 offset-md-4 col-md-8 col-lg-7">
                                 <a href="#" role="button" class="btn btn-primary btn-lg o_website_form_send">Send</a>
                                 <span id="o_website_form_result"></span>
                             </div>
@@ -64,7 +64,7 @@
                     <div class="container">
                         <h1>Thanks!</h1>
                         <div class="row">
-                            <div class="col-md-8">
+                            <div class="col-lg-8">
                                 <div class="alert alert-success" role="status">
                                     Your message has been sent successfully.
                                     <button type="button" class="close" data-dismiss="alert">&amp;times;</button>
@@ -79,7 +79,7 @@
                                     <li><i class="fa fa-envelope" role="img" aria-label="Email" title="Email"></i> : <span t-field="res_company.email"/></li>
                                 </ul>
                             </div>
-                            <div class="col-md-4">
+                            <div class="col-lg-4">
                                 <t t-call="website.company_description"/>
                             </div>
                         </div>
diff --git a/addons/website_crm_partner_assign/views/website_crm_partner_assign_templates.xml b/addons/website_crm_partner_assign/views/website_crm_partner_assign_templates.xml
index 62f93288d1a..22ab426dab3 100644
--- a/addons/website_crm_partner_assign/views/website_crm_partner_assign_templates.xml
+++ b/addons/website_crm_partner_assign/views/website_crm_partner_assign_templates.xml
@@ -20,7 +20,7 @@
 <template id="index" name="Find Resellers">
     <t t-call="website_crm_partner_assign.layout">
         <t t-set="ref_content">
-            <div class="col-md-12">
+            <div class="col-lg-12">
                 <h1 class="text-center">
                     Looking For a Local Store?
                 </h1><h2 class="text-center text-muted">
@@ -28,7 +28,7 @@
                 </h2>
             </div>
 
-            <div class="col-md-3 mb32" id="partner_left">
+            <div class="col-lg-3 mb32" id="partner_left">
 
                 <ul id="reseller_grades" class="nav nav-pills flex-column mt16">
                     <li class="nav-header nav-item"><h3>Filter by Level</h3></li>
@@ -58,13 +58,13 @@
 
             </div>
 
-            <div class="col-md-8 col-md-offset-1" id="ref_content">
+            <div class="col-lg-8 offset-lg-1" id="ref_content">
                 <div class='navbar'>
                     <div>
                         <t t-call="website.pager"/>
                         <form action="" method="get" class="navbar-search pull-right pagination form-inline">
                             <div class="form-group pull-right">
-                                <input type="text" name="search" class="search-query col-md-2 mt4 form-control" placeholder="Search" t-att-value="searches.get('search', '')"/>
+                                <input type="text" name="search" class="search-query col-lg-2 mt4 form-control" placeholder="Search" t-att-value="searches.get('search', '')"/>
                             </div>
                         </form>
                     </div>
@@ -140,7 +140,7 @@
 <template id="partner" name="Partner Detail">
     <t t-call="website_crm_partner_assign.layout">
         <t t-set="ref_content">
-            <div class="col-md-5">
+            <div class="col-lg-5">
                 <ol t-if="not edit_page" class="breadcrumb">
                     <li class="breadcrumb-item"><a t-attf-href="/partners#{current_grade and '/grade/%s' % slug(current_grade)}#{current_country and '/country/%s' % slug(current_country)}">Our Partners</a></li>
                     <li class="breadcrumb-item active"><span t-field="partner.display_name"/></li>
@@ -157,7 +157,7 @@
 
 <template id="grade_in_detail" inherit_id="website_partner.partner_detail">
   <xpath expr="//*[@id='partner_name']" position="after">
-    <h3 class="col-md-12 text-center text-muted" t-if="partner.grade_id and partner.grade_id.website_published">
+    <h3 class="col-lg-12 text-center text-muted" t-if="partner.grade_id and partner.grade_id.website_published">
       <span t-field="partner.grade_id"/> Partner</h3>
   </xpath>
 </template>
@@ -239,8 +239,8 @@
                 <table class="table table-hover">
                     <thead>
                         <tr class="active">
-                            <th class="col-xs-2">Date</th>
-                            <th class="col-xs-5">Name</th>
+                            <th class="col-2">Date</th>
+                            <th class="col-5">Name</th>
                             <th>Contact Name</th>
                         </tr>
                     </thead>
@@ -305,9 +305,9 @@
                 <table class="table table-hover">
                     <thead>
                         <tr class="active">
-                            <th class="col-xs-2">Date</th>
-                            <th class="col-md-4">Name</th>
-                            <th class="col-md-2">Expected</th>
+                            <th class="col-2">Date</th>
+                            <th class="col-lg-4">Name</th>
+                            <th class="col-lg-2">Expected</th>
                             <th>Contact Name</th>
                             <th>Stage</th>
                         </tr>
@@ -340,7 +340,7 @@
             <div class="panel panel-default">
                 <div class="panel-heading">
                     <div class="row">
-                        <div class="col-md-12">
+                        <div class="col-lg-12">
                             <span class="pull-right" title="Rating" role="img" t-attf-aria-label="Rating: #{lead.priority} on 3">
                                 <t t-foreach="range(1, 4)" t-as="i">
                                     <span t-attf-class="fa fa-lg fa-star#{'' if i &lt;= int(lead.priority) else '-o'}"/>
@@ -353,10 +353,10 @@
                     </div>
                 </div>
                 <div class="panel-body row">
-                    <div class="col-md-6">
+                    <div class="col-lg-6">
                         <div class="row" t-if="lead.partner_name or lead.email_from or lead.partner_id">
-                            <label class="col-xs-4">Customer</label>
-                            <address class="col-xs-8">
+                            <label class="col-4">Customer</label>
+                            <address class="col-8">
                                 <div>
                                     <span t-if="lead.partner_name" itemprop="name" t-field="lead.partner_name" />
                                     <span t-if="not lead.partner_name" itemprop="name" t-field="lead.contact_name"/>
@@ -373,8 +373,8 @@
                             </address>
                         </div>
                         <div class="row" t-if="lead.street or lead.street2 or lead.city or lead.state_id or lead.country_id">
-                            <label class="col-xs-4">Address</label>
-                            <address class="col-xs-8">
+                            <label class="col-4">Address</label>
+                            <address class="col-8">
                                 <div t-if="lead.street"><span t-field="lead.street"/></div>
                                 <div t-if="lead.street2"><span t-field="lead.street2"/></div>
                                 <div t-if="lead.city or lead.zip">
@@ -386,38 +386,38 @@
                             </address>
                         </div>
                         <div class="row" t-if="lead.user_id">
-                            <label class="col-xs-4">Salesperson</label>
-                            <span class="col-xs-8" t-field="lead.user_id" />
+                            <label class="col-4">Salesperson</label>
+                            <span class="col-8" t-field="lead.user_id" />
                         </div>
                         <div class="row" t-if="lead.team_id">
-                            <label class="col-xs-4">Sales Team</label>
-                            <span class="col-xs-8" t-field="lead.team_id" />
+                            <label class="col-4">Sales Team</label>
+                            <span class="col-8" t-field="lead.team_id" />
                         </div>
                     </div>
-                    <div class="col-md-6">
+                    <div class="col-lg-6">
                         <div class="row" t-if="lead.date_deadline">
-                            <label class="col-xs-4">Expected Closing</label>
-                            <span class="col-xs-8" t-field="lead.date_deadline" />
+                            <label class="col-4">Expected Closing</label>
+                            <span class="col-8" t-field="lead.date_deadline" />
                         </div>
                         <div class="row" groups="!base.group_portal" t-if="lead.tag_ids">
-                            <label class="col-xs-4">Tags</label>
-                            <span class="col-xs-8">
+                            <label class="col-4">Tags</label>
+                            <span class="col-8">
                                 <t t-foreach="lead.tag_ids" t-as="tag">
                                     <span class="label label-info" t-esc="tag.name" />
                                 </t>
                             </span>
                         </div>
                         <div class="row mt16" t-if="lead.partner_assigned_id">
-                            <label class="col-xs-4">Assigned Partner</label>
-                            <address class="col-xs-8" t-field="lead.partner_assigned_id" t-options='{"widget": "contact", "fields": ["name", "email", "phone"], "no_marker": True}'/>
+                            <label class="col-4">Assigned Partner</label>
+                            <address class="col-8" t-field="lead.partner_assigned_id" t-options='{"widget": "contact", "fields": ["name", "email", "phone"], "no_marker": True}'/>
                         </div>
                         <div class="row mt16" t-if="lead.campaign_id">
-                            <label class="col-xs-4">Campaign</label>
-                            <span class="col-xs-8" t-field="lead.campaign_id" />
+                            <label class="col-4">Campaign</label>
+                            <span class="col-8" t-field="lead.campaign_id" />
                         </div>
                         <div class="row" t-if="lead.medium_id">
-                            <label class="col-xs-4">Medium</label>
-                            <span class="col-xs-8" t-field="lead.medium_id" />
+                            <label class="col-4">Medium</label>
+                            <span class="col-8" t-field="lead.medium_id" />
                         </div>
                     </div>
                 </div>
@@ -489,10 +489,10 @@
                 </div>
             </div>
             <div class="row mt32">
-                <div class="col-md-12">
+                <div class="col-lg-12">
                     <h4><strong>Message and communication history</strong></h4>
                 </div>
-                <div class="col-md-10 col-md-offset-1 mt16">
+                <div class="col-lg-10 offset-lg-1 mt16">
                     <t t-call="portal.message_thread">
                         <t t-set="object" t-value="lead"/>
                     </t>
@@ -506,7 +506,7 @@
             <div class="panel panel-default">
                 <div class="panel-heading">
                     <div class="row">
-                        <div class="col-md-12">
+                        <div class="col-lg-12">
                             <h4 style="display:inline-block">
                                 Opportunity - <span t-field="opportunity.name"/>
                             </h4>
@@ -520,13 +520,13 @@
                         </div>
                     </div>
                     <div class="row">
-                        <div class="col-md-4">
+                        <div class="col-lg-4">
                                 <strong><span class="text-nowrap" t-esc="opportunity.planned_revenue" t-options="{'widget': 'monetary', 'display_currency': opportunity.company_currency}"/> at <span t-field="opportunity.probability"/>%</strong>
                         </div>
-                        <div class="col-md-4">
+                        <div class="col-lg-4">
                                 <strong>Expected Closing: <span t-field="opportunity.date_deadline" /></strong>
                         </div>
-                        <div class="col-md-4">
+                        <div class="col-lg-4">
                             <span class="pull-right" title="Rating" role="img" t-attf-aria-label="Rating: #{opportunity.priority} on 4">
                                 <t t-foreach="range(1, 4)" t-as="i">
                                     <span t-attf-class="fa fa-lg fa-star#{'' if i &lt;= int(opportunity.priority) else '-o'}" role="img" t-att-aria-label="'Star %d of 3' % i"/>
@@ -536,7 +536,7 @@
                     </div>
                 </div>
                 <div class="panel-body">
-                    <div class="col-md-6">
+                    <div class="col-lg-6">
                         <div>
                             <button type="button" data-toggle="modal" data-target=".modal_edit_contact" class="btn btn-primary" style="margin-bottom: 10px;">Edit Contact</button>
                             <div role="dialog" class="modal fade modal_edit_contact">
@@ -582,10 +582,10 @@
                                             </div>
                                             <div class="form-group">
                                                 <div class="row">
-                                                    <div class="col-sm-5">
+                                                    <div class="col-md-5">
                                                         <input type="text" name="city" class="form-control city" t-att-value="opportunity.city" placeholder="City"/>
                                                     </div>
-                                                    <div class="col-sm-5">
+                                                    <div class="col-md-5">
                                                         <select name="state_id" class="form-control state_id">
                                                             <option>States...</option>
                                                             <t t-foreach="states or []" t-as="state">
@@ -595,7 +595,7 @@
                                                             </t>
                                                         </select>
                                                     </div>
-                                                    <div class="col-sm-2">
+                                                    <div class="col-md-2">
                                                         <input type="text" name="zip" class="form-control zip" t-att-value="opportunity.zip" placeholder="ZIP"/>
                                                     </div>
                                                 </div>
@@ -620,8 +620,8 @@
                             </div>
                         </div>
                         <div class="row" t-if="opportunity.partner_name or opportunity.email_from or opportunity.contact_name">
-                            <label class="col-xs-4">Customer</label>
-                            <address class="col-xs-8">
+                            <label class="col-4">Customer</label>
+                            <address class="col-8">
                                 <div>
                                     <span t-if="opportunity.partner_name" itemprop="name" t-field="opportunity.partner_name" />
                                     <span t-if="not opportunity.partner_name" itemprop="name" t-field="opportunity.contact_name" />
@@ -638,8 +638,8 @@
                             </address>
                         </div>
                         <div class="row" t-if="opportunity.street or opportunity.street2 or opportunity.city or opportunity.state_id or opportunity.country_id">
-                            <label class="col-xs-4">Address</label>
-                            <address class="col-xs-8">
+                            <label class="col-4">Address</label>
+                            <address class="col-8">
                                 <div t-if="opportunity.street"><span t-field="opportunity.street"/></div>
                                 <div t-if="opportunity.street2"><span t-field="opportunity.street2"/></div>
                                 <div t-if="opportunity.city or opportunity.zip">
@@ -651,7 +651,7 @@
                             </address>
                         </div>
                     </div>
-                    <div class="col-md-6">
+                    <div class="col-lg-6">
                         <div>
                             <button type="button" data-toggle="modal" data-target=".modal_edit_opp" class="btn btn-primary" style="margin-bottom: 10px;">Edit Opportunity</button>
                             <div role="dialog" class="modal fade modal_edit_opp">
@@ -666,16 +666,16 @@
                                         <main class="modal-body" id="sign-dialog">
                                             <div class="form-group">
                                                 <div class="row">
-                                                    <div class="col-sm-6">
+                                                    <div class="col-md-6">
                                                         <div class="input-group">
                                                             <div class="input-group-addon"><span class="text-nowrap" t-esc="opportunity.company_currency.symbol"/></div>
                                                             <input type="text" name="planned_revenue" class="form-control planned_revenue" t-att-value="opportunity.planned_revenue" placeholder="Planned Revenue"/>
                                                         </div>
                                                     </div>
-                                                    <div class="col-sm-1">
+                                                    <div class="col-md-1">
                                                         <span>at </span>
                                                     </div>
-                                                    <div class="col-sm-5">
+                                                    <div class="col-md-5">
                                                         <div class="input-group">
                                                             <input type="text" name="probability" class="form-control probability" t-att-value="opportunity.probability" placeholder="Probability"/>
                                                             <div class="input-group-addon">%</div>
@@ -685,7 +685,7 @@
                                             </div>
                                             <div class="form-group">
                                                 <div class="row">
-                                                    <div class="col-sm-6">
+                                                    <div class="col-md-6">
                                                       <label>Priority: </label>
                                                       <div class="input-group">
                                                         <label class="radio-inline">
@@ -702,7 +702,7 @@
                                                         </label>
                                                       </div>
                                                     </div>
-                                                    <div class="col-sm-6">
+                                                    <div class="col-md-6">
                                                         <label>Deadline: </label>
                                                         <div class='input-group date'>
                                                             <input type="text" name="date_deadline" t-att-value="opportunity.date_deadline" class="form-control date_deadline" data-date-format="YYYY-MM-DD" t-att-name="prefix" placeholder="YYYY-MM-DD" />
@@ -740,24 +740,24 @@
                             </div>
                         </div>
                         <div class="row" t-if="user_activity">
-                            <label class="col-xs-4">Next Activity</label>
-                            <span class="col-xs-8">
+                            <label class="col-4">Next Activity</label>
+                            <span class="col-8">
                                 <span t-field="user_activity.activity_type_id"/>
                                 <span t-if="user_activity.date_deadline">&#160;on&#160;</span>
                                 <span t-field="user_activity.date_deadline"/>
                             </span>
                         </div>
                         <div class="row" t-if="user_activity">
-                            <span class="col-xs-8 col-xs-offset-4" t-field="user_activity.summary"/>
+                            <span class="col-8 offset-4" t-field="user_activity.summary"/>
                         </div>
                     </div>
                 </div>
             </div>
             <div class="row mt32">
-                <div class="col-md-12">
+                <div class="col-lg-12">
                     <h4><strong>Message and communication history</strong></h4>
                 </div>
-                <div class="col-md-10 col-md-offset-1 mt16">
+                <div class="col-lg-10 offset-lg-1 mt16">
                     <t t-call="portal.message_thread">
                         <t t-set="object" t-value="opportunity"/>
                     </t>
diff --git a/addons/website_customer/views/website_customer_templates.xml b/addons/website_customer/views/website_customer_templates.xml
index 41a3ada6d58..391cb66b6cd 100644
--- a/addons/website_customer/views/website_customer_templates.xml
+++ b/addons/website_customer/views/website_customer_templates.xml
@@ -15,9 +15,9 @@
             </div>
             <div class="container">
                 <div class="row">
-                    <div class="col-md-3 mb32" id="ref_left_column">
+                    <div class="col-lg-3 mb32" id="ref_left_column">
                     </div>
-                    <div class="col-md-8 col-md-offset-1" id="ref_content">
+                    <div class="col-lg-8 offset-lg-1" id="ref_content">
                         <div class='navbar mb0'>
                             <t t-call="website.pager">
                                <t t-set="classname" t-value="'pull-left'"/>
@@ -147,7 +147,7 @@
         <div class="oe_structure"/>
         <div class="container mt16">
             <div class="row">
-                <div class="col-md-5">
+                <div class="col-lg-5">
                     <ol t-if="not edit_page" class="breadcrumb">
                         <li class="breadcrumb-item"><a href="/customers">Our References</a></li>
                         <li class="breadcrumb-item active"><span t-field="partner.display_name"/></li>
diff --git a/addons/website_event/data/event_demo.xml b/addons/website_event/data/event_demo.xml
index 03c11ce6301..472d243202b 100644
--- a/addons/website_event/data/event_demo.xml
+++ b/addons/website_event/data/event_demo.xml
@@ -12,7 +12,7 @@
 <section class="s_text_block_image_fw oe_img_bg" style="background-position: 50% 100%; background-image: url(/web/image/website.s_background_image_02);">
    <div class="container">
       <div class="row">
-         <div class="bg-black-25 col-md-9 mb64 mt64">
+         <div class="bg-black-25 col-lg-9 mb64 mt64">
             <h2 style="font-size:62px">5 Intensive Days</h2>
             <h4 class="text-muted"><font style="color: rgb(255, 255, 255); font-size: 24px;">to learn <i>Odoo Programming</i></font></h4>
          </div>
@@ -22,11 +22,11 @@
 
 <div class="container">
 <div class="row">
-<div class="col-md-12 text-center mb8 mt0">
+<div class="col-lg-12 text-center mb8 mt0">
 <h2>Course Summary</h2>
 </div>
 
-<div class="col-md-12 mt16 mb0">
+<div class="col-lg-12 mt16 mb0">
 <p><span style="text-align: -webkit-center; ">This course is dedicated to&nbsp;developers who need to grasp knowledge of the <strong>business applications development </strong>process. This course is for new developers or for IT professionals eager to learn more about technical aspects.</span></p>
 </div>
 </div>
@@ -34,11 +34,11 @@
 
 <div class="container">
 <div class="row">
-<div class="col-md-12 text-center mt0 mb16">
+<div class="col-lg-12 text-center mt0 mb16">
 <h2>What you will learn?</h2>
 </div>
 
-<div class="col-md-4">
+<div class="col-lg-4">
 <div class="panel panel-info">
 <div class="panel-heading text-center">
 <h2 style="margin: 0">Day 1</h2>
@@ -58,7 +58,7 @@
 </div>
 </div>
 
-<div class="col-md-4">
+<div class="col-lg-4">
 <div class="panel panel-info">
 <div class="panel-heading text-center">
 <h2 style="margin: 0">Day 2</h2>
@@ -79,7 +79,7 @@
 </div>
 </div>
 
-<div class="col-md-4">
+<div class="col-lg-4">
 <div class="panel panel-info">
 <div class="panel-heading text-center">
 <h2 style="margin: 0">Day 3</h2>
@@ -104,11 +104,11 @@
 
 <div class="container">
 <div class="row">
-<div class="col-md-12 text-center mb16 mt0">
+<div class="col-lg-12 text-center mb16 mt0">
 <h2>Requirements</h2>
 </div>
 
-<div class="col-md-12 mb16 mt16">
+<div class="col-lg-12 mb16 mt16">
 <p><strong>Objectives:</strong></p>
 
 <p><strong>Having attended this course, participants should be able to:</strong></p>
@@ -140,19 +140,19 @@
 
 <div class="container oe_dark">
 <div class="row">
-<div class="col-md-12">
+<div class="col-lg-12">
 <h1 class="text-center">Read Great Contents</h1>
 
 <h3 class="text-muted text-center">What do people&nbsp;say about this course?</h3>
 </div>
 
-<div class="mt16 mb32 col-md-6">
+<div class="mt16 mb32 col-lg-6">
 <blockquote>
 <p>I did not expect such a great learning experience. I feel like I can develop anything now.</p>
 <small>John Doe, CEO</small></blockquote>
 </div>
 
-<div class="mt16 mb32 col-md-6">
+<div class="mt16 mb32 col-lg-6">
 <blockquote>
 <p>This course help me build my first application within a month. Definetly worth its price.</p>
 <small>John Doe, CEO</small></blockquote>
diff --git a/addons/website_event/views/event_templates.xml b/addons/website_event/views/event_templates.xml
index a433dc62d66..f9acb92b87f 100644
--- a/addons/website_event/views/event_templates.xml
+++ b/addons/website_event/views/event_templates.xml
@@ -22,7 +22,7 @@
         <div class="oe_structure"/>
         <div class="container">
             <div class="row mt8">
-                <div class="col-sm-12">
+                <div class="col-md-12">
                     <ol class="breadcrumb mb0">
                         <li class="breadcrumb-item">
                             <a href="/event">Our Events</a>
@@ -34,12 +34,12 @@
                 </div>
             </div>
             <div class="row">
-                <div class="col-sm-6 col-xs-offset-3">
+                <div class="col-md-6 offset-3">
                     <t t-call="website.pager"/>
                 </div>
             </div>
             <div class="row mt32 mb32">
-                <div class="col-md-9" id="middle_column">
+                <div class="col-lg-9" id="middle_column">
                     <div class="text-center text-muted" t-if="not event_ids">
                         <h1>No event found</h1>
                         <p groups="event.group_event_manager">Use the top menu <i>'Content'</i> to create your first event.</p>
@@ -75,11 +75,11 @@
                     </ul>
                 </div>
                 <div class="row">
-                    <div class="col-sm-6 col-xs-offset-3">
+                    <div class="col-md-6 offset-3">
                         <t t-call="website.pager"/>
                     </div>
                 </div>
-                <div class="col-md-3 oe_structure" id="right_column">
+                <div class="col-lg-3 oe_structure" id="right_column">
                 </div>
             </div>
         </div>
@@ -91,13 +91,13 @@
 <template id="event_right_photos" inherit_id="website_event.index" active="False" customize_show="True" name="Photos">
     <xpath expr="//div[@id='right_column']" position="inside">
         <div class="row">
-            <div class="col-md-12 mb16">
+            <div class="col-lg-12 mb16">
                 <div class="oe_demo">
                     <img src="/website_event/static/src/img/openerp_enterprise_of_the_year.png" class="img-rounded" alt=""/>
                     <div class="text-center"><a href="/event">Photos of Past Events</a></div>
                 </div>
             </div>
-            <div class="col-md-12 mb16">
+            <div class="col-lg-12 mb16">
                 <div class="oe_demo">
                     <img src="/website_event/static/src/img/training.jpg" class="img-rounded" alt=""/>
                     <div class="text-center"><a href="/event">Our Trainings</a></div>
@@ -110,7 +110,7 @@
 <template id="event_right_quotes" inherit_id="website_event.index" active="False" customize_show="True" name="Quotes">
     <xpath expr="//div[@id='right_column']" position="inside">
         <div class="row">
-            <div class="col-md-12 mb16">
+            <div class="col-lg-12 mb16">
                 <blockquote class="oe_snippet_body">
                     <p>
                         Write here a quote from one of your attendees.
@@ -127,7 +127,7 @@
 <template id="event_right_country_event" inherit_id="website_event.index" active="False" customize_show="True" name="Country Events">
     <xpath expr="//div[@id='right_column']" position="inside">
         <div class="row">
-            <div class="col-md-12 mb16 mt16 country_events">
+            <div class="col-lg-12 mb16 mt16 country_events">
                 <div class="country_events_list">
                     <div class="text-muted text-center">
                         <h1>
@@ -142,10 +142,10 @@
 
 <template id="event_left_column" customize_show="True" inherit_id="website_event.index" name="Filters">
     <xpath expr="//div[@id='middle_column']" position="attributes">
-        <attribute name="class">col-md-6</attribute>
+        <attribute name="class">col-lg-6</attribute>
     </xpath>
     <xpath expr="//div[@id='middle_column']" position="before">
-        <div class="col-md-3 css_noprint" id="left_column">
+        <div class="col-lg-3 css_noprint" id="left_column">
             <ul class="nav nav-pills flex-column">
                 <t t-foreach="dates" t-as="date">
                     <li class="nav-item" t-if="date[3] or (date[0] in ('old','all'))">
@@ -204,7 +204,7 @@
       <div id="wrap" class="js_event o_website_event">
         <div class="container">
             <div class="row mt8">
-                <div class="col-sm-7" id="event_menu">
+                <div class="col-md-7" id="event_menu">
                     <ol class="breadcrumb mb0" t-if="not event.menu_id">
                         <li class="breadcrumb-item"><a href="/event">All Events</a></li>
                         <li t-if="event.event_type_id" class="breadcrumb-item">
@@ -304,7 +304,7 @@
 
 <template id="event_description_full">
     <t t-call="website_event.event_details">
-        <div class="col-md-8">
+        <div class="col-lg-8">
             <div t-if="event.state == 'done' or not registrable" class="alert alert-info" role="status">Registration for this event is now closed</div>
             <t t-if="event.state != 'done' and registrable" t-call="website_event.registration_template"/>
             <div class="clearfix"/>
@@ -327,7 +327,7 @@
                 </li>
             </ul>
         </div>
-        <div class="col-md-4 css_noprint">
+        <div class="col-lg-4 css_noprint">
             <div class="clearfix"/>
 
             <t t-if="not event.is_online">
@@ -418,16 +418,16 @@
             <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
             <div class="panel-heading d-none d-lg-block">
                 <div class="row">
-                    <div class="col-md-3">
+                    <div class="col-lg-3">
                         <h5><b>Ticket Type</b></h5>
                     </div>
-                    <div class="col-md-3">
+                    <div class="col-lg-3">
                         <h5><b>End of Registration</b></h5>
                     </div>
-                    <div class="col-md-3">
+                    <div class="col-lg-3">
                         <h5><b>Price</b></h5>
                     </div>
-                    <div class="col-md-3">
+                    <div class="col-lg-3">
                         <h5><b>Quantity</b></h5>
                     </div>
                 </div>
@@ -459,7 +459,7 @@
             </t>
             <div class="panel-footer">
                 <div class="row">
-                    <div class="col-md-4 col-md-offset-8 col-lg-3 col-lg-offset-9">
+                    <div class="col-lg-4 offset-lg-8 col-xl-3 offset-xl-9">
                         <button type="submit" class="btn btn-primary btn-lg btn-block a-submit" t-attf-id="#{event.id}">
                             Register Now
                         </button>
@@ -485,7 +485,7 @@
 </template>
 
 <template id="ticket" name="Ticket offer template">
-    <div class="col-xs-12 d-lg-none panel-heading mb4">
+    <div class="col-12 d-lg-none panel-heading mb4">
         <h5>
             <strong>Ticket Type:</strong>
             <t t-raw="name"/>
@@ -496,21 +496,21 @@
     </div>
     <div class="panel-body">
         <div class="row" itemscope="itemscope" itemtype="http://schema.org/Offer">
-            <div class="col-md-3 d-none d-lg-block" t-raw="name"/>
-            <div class="col-xs-6 d-lg-none">
+            <div class="col-lg-3 d-none d-lg-block" t-raw="name"/>
+            <div class="col-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="col-6 col-lg-3" itemprop="availabilityEnds" t-raw="registration_end"/>
             <div class="clearfix d-lg-none mb4"/>
-            <div class="col-xs-6 d-lg-none">
+            <div class="col-6 d-lg-none">
                 <h6>Price</h6>
             </div>
-            <div class="col-xs-6 col-md-3" t-raw="price"/>
+            <div class="col-6 col-lg-3" t-raw="price"/>
             <div class="clearfix d-lg-none mb4"/>
-            <div class="col-xs-6 d-lg-none">
+            <div class="col-6 d-lg-none">
                 <h6>Quantity</h6>
             </div>
-            <div class="col-xs-6 col-md-3">
+            <div class="col-6 col-lg-3">
                 <t t-if="tickets_available">
                     <link itemprop="availability" content="http://schema.org/InStock"/>
                     <t t-raw="quantity"/>
@@ -547,17 +547,17 @@
                                     </strong>
                                 </h4>
                                 <div class="row">
-                                    <div class="col-md-4"><strong>Name</strong></div>
-                                    <div class="col-md-5"><strong>Email</strong></div>
-                                    <div class="col-md-3"><strong>Phone</strong> <span class="text-muted">(Optional)</span></div>
+                                    <div class="col-lg-4"><strong>Name</strong></div>
+                                    <div class="col-lg-5"><strong>Email</strong></div>
+                                    <div class="col-lg-3"><strong>Phone</strong> <span class="text-muted">(Optional)</span></div>
                                 </div>
                                 <t t-foreach="range(1, ticket['quantity'] + 1)" t-as="att_counter" name="attendee_loop">
                                     <t t-set="counter" t-value="counter + 1"/>
                                     <div class="row mb4">
                                         <t t-set="attendee_placeholder">Attendee #%s</t>
-                                        <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>
+                                        <div class="col-lg-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-lg-5"><input class='form-control' type='email' t-attf-name="#{counter}-email" required="This field is required"/></div>
+                                        <div class="col-lg-3"><input class='form-control' type='tel' t-attf-name="#{counter}-phone"/></div>
                                         <input class='d-none' type='text' t-attf-name="#{counter}-ticket_id" t-attf-value="#{ticket['id']}"/>
                                     </div>
                                 </t>
@@ -582,10 +582,10 @@
         <div class="container">
             <h3>We are glad to confirm your registration to our event</h3>
             <div class="row">
-                <div class="col-md-3 mt16">
+                <div class="col-lg-3 mt16">
                     <h4>Event Details</h4>
                 </div>
-                <div class="col-md-9 mt16">
+                <div class="col-lg-9 mt16">
                     <h4><a t-attf-href="/event/#{slug(event)}"><t t-esc="event.name"/></a></h4>
                     <i class="fa fa-clock-o" role="img" aria-label="Start date" title="Start date"></i> <span itemprop="startDate" t-esc="event.date_begin_located"> </span> <i>to</i> <span itemprop="endDate" t-esc="event.date_end_located"> </span>
                     <div id="add_to_calendar" class="mt4">
@@ -601,10 +601,10 @@
                             "fields": ["name", "address", "phone", "mobile", "email"]
                             }'/>
                 </div>
-                <div class="col-md-3 mt16">
+                <div class="col-lg-3 mt16">
                     <h4>Your registration</h4>
                 </div>
-                <div class="col-md-9 mt16">
+                <div class="col-lg-9 mt16">
                     <table class='table table-bordered table-striped'>
                         <thead>
                             <tr>
diff --git a/addons/website_event/views/event_views.xml b/addons/website_event/views/event_views.xml
index a59b27ffa5d..14339ac30d3 100644
--- a/addons/website_event/views/event_views.xml
+++ b/addons/website_event/views/event_views.xml
@@ -7,14 +7,14 @@
         <field name="inherit_id" ref="event.view_event_type_form"/>
         <field name="arch" type="xml">
             <div name="event_type_visibility_seats" position="after">
-                <div class="col-xs-12 col-md-6 o_setting_box" name="event_type_visibility_website">
+                <div class="col-12 col-lg-6 o_setting_box" name="event_type_visibility_website">
                     <div class="o_setting_left_pane">
                         <field name="website_menu"/>
                     </div>
                     <div class="o_setting_right_pane">
                         <label for="website_menu"/>
                         <div class="row">
-                            <div class="col-md-8 mt16 text-muted">
+                            <div class="col-lg-8 mt16 text-muted">
                                 Check this option to have menus for your event on the
                                 website: registrations, schedule, map, ...
                             </div>
diff --git a/addons/website_event/views/res_config_settings_views.xml b/addons/website_event/views/res_config_settings_views.xml
index 1b65dab7571..c1540910815 100644
--- a/addons/website_event/views/res_config_settings_views.xml
+++ b/addons/website_event/views/res_config_settings_views.xml
@@ -7,7 +7,7 @@
         <field name="inherit_id" ref="event.res_config_settings_view_form"/>
         <field name="arch" type="xml"> 
             <div name="event_settings_website" position="after">
-                <div class="col-xs-12 col-md-6 o_setting_box">
+                <div class="col-12 col-lg-6 o_setting_box">
                     <div class="o_setting_left_pane">
                         <field name="module_website_event_questions"/>
                     </div>
diff --git a/addons/website_event_questions/views/event_templates.xml b/addons/website_event_questions/views/event_templates.xml
index 490c9b20473..ba93593735e 100644
--- a/addons/website_event_questions/views/event_templates.xml
+++ b/addons/website_event_questions/views/event_templates.xml
@@ -15,8 +15,8 @@
                 <div class="mb16 mt16">
                     <div t-foreach='event.specific_question_ids' t-as='question'>
                         <div class="row mb4">
-                            <span class="col-md-7 mt4 text-right"><t t-esc="question.title"/></span>
-                            <div class="col-md-5">
+                            <span class="col-lg-7 mt4 text-right"><t t-esc="question.title"/></span>
+                            <div class="col-lg-5">
                                 <select t-attf-name="#{counter}-answer_ids-#{question.id}" class="o_specific_answer" required="true">
                                     <t t-foreach='question.answer_ids' t-as="answer">
                                         <option t-esc='answer.name' t-att-value='answer.id'/>
@@ -36,8 +36,8 @@
                 <div>
                     <div t-foreach='event.general_question_ids' t-as='question'>
                         <div class="row mb4">
-                            <span class="col-md-7 mt4 text-right"><t t-esc='question.title'/></span>
-                            <div class="col-md-5">
+                            <span class="col-lg-7 mt4 text-right"><t t-esc='question.title'/></span>
+                            <div class="col-lg-5">
                                 <select t-attf-name="0-answer_ids-#{question.id}" class="o_general_answer" required="true">
                                     <t t-foreach='question.answer_ids' t-as="answer">
                                         <option t-esc='answer.name' t-att-value='answer.id'/>
diff --git a/addons/website_event_questions/views/event_views.xml b/addons/website_event_questions/views/event_views.xml
index eab83eba6d4..d3104c99ab8 100644
--- a/addons/website_event_questions/views/event_views.xml
+++ b/addons/website_event_questions/views/event_views.xml
@@ -37,14 +37,14 @@
     <field name="inherit_id" ref="website_event.event_type_view_form_inherit_website"/>
     <field name="arch" type="xml">
         <div name="event_type_attendees_auto_confirm" position="after">
-            <div class="col-xs-12 col-md-12 o_setting_box">
+            <div class="col-12 col-lg-12 o_setting_box">
                 <div class="o_setting_left_pane">
                     <field name="use_questions"/>
                 </div>
                 <div class="o_setting_right_pane">
                     <label for="use_questions"/>
                     <div class="row mt16" attrs="{'invisible': [('use_questions', '=', False)]}">
-                        <div class="col-md-9">
+                        <div class="col-lg-9">
                             <field name="question_ids"/>
                         </div>
                     </div>
diff --git a/addons/website_event_track/views/event_track_templates.xml b/addons/website_event_track/views/event_track_templates.xml
index e9d0eab4f47..43583baf218 100644
--- a/addons/website_event_track/views/event_track_templates.xml
+++ b/addons/website_event_track/views/event_track_templates.xml
@@ -15,7 +15,7 @@
                 <h2 class="text-center mb32">Our Sponsors</h2>
             </section>
             <div class="row">
-                <div t-attf-class="col-md-#{(len(event.sponsor_ids) > 6) and 2 or (12 // len(event.sponsor_ids))} text-center mb16 oe_sponsor" t-foreach="event.sponsor_ids" t-as="sponsor">
+                <div t-attf-class="col-lg-#{(len(event.sponsor_ids) > 6) and 2 or (12 // len(event.sponsor_ids))} text-center mb16 oe_sponsor" t-foreach="event.sponsor_ids" t-as="sponsor">
                     <t t-if="sponsor.url">
                         <a t-att-href="sponsor.url" style="position: relative; display: inline-block;">
                             <span t-field="sponsor.image_medium"
@@ -118,18 +118,18 @@
         <div class="oe_structure"/>
         <div id="left_column">
         </div>
-        <div class="col-md-9">
+        <div class="col-lg-9">
             <div class="alert alert-warning" t-if="not len(tracks)" role="alert">
                 No tracks found!
             </div>
             <div class="row mb32" t-foreach="tracks" t-as="track">
-                <div class="col-sm-2">
+                <div class="col-md-2">
                     <t t-if="track.image">
                         <span t-field="track.image"
                             t-options='{"widget": "image", "class": "img-circle"}'/>
                     </t>
                 </div>
-                <div class="col-sm-10">
+                <div class="col-md-10">
                     <h3 class="mt0 mb0">
                         <a t-attf-href="/event/#{ slug(event) }/track/#{ slug(track) }"><span t-field="track.name"> </span></a>
                         <small t-if="not track.website_published" class="label label-danger">unpublished</small>
@@ -172,7 +172,7 @@
         </ul>
     </xpath>
     <xpath expr="//div[@id='left_column']" position="attributes">
-        <attribute name="class">col-md-3 css_no_print</attribute>
+        <attribute name="class">col-lg-3 css_no_print</attribute>
     </xpath>
 </template>
 
@@ -187,7 +187,7 @@
         <div id="wrap" class="js_event">
             <div class="container">
                 <div class="row mt8">
-                    <div class="col-sm-7" id="event_menu">
+                    <div class="col-md-7" id="event_menu">
                         <ol name="Event Menu" class="breadcrumb mb0" id="event_menu" t-if="event.menu_id" t-att-data-content_menu_id="editable and event.menu_id.id">
                             <t t-foreach="event.menu_id.child_id" t-as="submenu">
                                 <t t-call="website.submenu">
@@ -214,21 +214,21 @@
             </ul>
 
             <section class="row mt32">
-                <div class="col-md-8">
+                <div class="col-lg-8">
                     <section>
                         <div class="container">
                             <div class="row">
-                                <div class="col-md-12 text-center">
+                                <div class="col-lg-12 text-center">
                                     <h2 t-field="track.name"/>
                                     <small>Proposed by
                                         <span t-if="track.partner_id" t-field="track.partner_id.sudo().name"/>
                                         <span t-if="not track.partner_id" t-field="track.partner_name"/>
                                     </small>
                                 </div>
-                                <div class="col-md-12">
+                                <div class="col-lg-12">
                                     <div t-field="track.description"/>
                                 </div>
-                                <div class="col-md-12">
+                                <div class="col-lg-12">
                                     <h3>About The Author</h3>
                                     <div t-field="track.partner_biography"/>
                                 </div>
@@ -237,10 +237,10 @@
                     </section>
                     <div t-if="track.partner_id" class="well mt32">
                         <div class="row">
-                            <div class="col-sm-2">
+                            <div class="col-md-2">
                                 <span t-field="track.partner_id.sudo().image_medium"
                                     t-options='{"widget": "image", "class": "img-circle"}'/>
-                            </div><div class="col-sm-10">
+                            </div><div class="col-md-10">
                                <h4 t-field="track.partner_id.name" class="mb4"/>
                                <div class="fa fa-home mb16" t-if="track.partner_id.website">
                                    <a t-att-href="track.partner_id.website"><span t-field="track.partner_id.website"/></a>
@@ -250,7 +250,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="col-md-4" id="right_column">
+                <div class="col-lg-4" id="right_column">
                     <div class="panel panel-default">
                         <div class="panel-heading">
                             <h4>Practical Info</h4>
@@ -321,7 +321,7 @@
                 </p>
             </section>
             <section class="row">
-                <div class="col-md-8">
+                <div class="col-lg-8">
                     <div class="oe_structure">
                         <section>
                             <h3 class="page-header mt16">
@@ -349,28 +349,28 @@
                         <form class="form-horizontal mt32 js_website_submit_form" t-attf-action="/event/#{event.id}/track_proposal/post" method="post" enctype="multipart/form-data">
                             <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
                             <div class="form-group">
-                                <label class="col-md-3 col-sm-4 control-label" for="partner_name">Your Name</label>
-                                <div class="col-md-7 col-sm-8">
+                                <label class="col-lg-3 col-md-4 control-label" for="partner_name">Your Name</label>
+                                <div class="col-lg-7 col-md-8">
                                     <input type="text" class="form-control" name="partner_name" required="True" />
                                 </div>
                             </div>
                             <div class="form-group">
-                                <label class="col-md-3 col-sm-4 control-label" for="email_from">Your Email</label>
-                                <div class="col-md-7 col-sm-8">
+                                <label class="col-lg-3 col-md-4 control-label" for="email_from">Your Email</label>
+                                <div class="col-lg-7 col-md-8">
                                     <input type="email" class="form-control" name="email_from" required="True" />
                                 </div>
                             </div>
                             <div class="form-group">
-                                <label class="col-md-3 col-sm-4 control-label" for="phone">Your Phone</label>
-                                <div class="col-md-7 col-sm-8">
+                                <label class="col-lg-3 col-md-4 control-label" for="phone">Your Phone</label>
+                                <div class="col-lg-7 col-md-8">
                                     <input type="text" class="form-control" name="phone" required="True" />
                                 </div>
                             </div>
                             <div class="form-group" t-if="len(event.allowed_track_tag_ids)">
-                                <label class="col-md-3 col-sm-4 control-label" for="phone">Tags</label>
-                                <div class="col-md-9 col-sm-8">
+                                <label class="col-lg-3 col-md-4 control-label" for="phone">Tags</label>
+                                <div class="col-lg-9 col-md-8">
                                     <div class="row">
-                                        <label class="col-sm-4" t-foreach="event.allowed_track_tag_ids" t-as="tag">
+                                        <label class="col-md-4" t-foreach="event.allowed_track_tag_ids" t-as="tag">
                                             <input type="checkbox" value="1" t-attf-name="tag_#{str(tag.id)}"/>
                                             <t t-esc="tag.name"/>
                                         </label>
@@ -378,32 +378,32 @@
                                 </div>
                             </div>
                             <div class="form-group">
-                                <label class="col-md-3 col-sm-4 control-label" for="track_name">Talk Title</label>
-                                <div class="col-md-7 col-sm-8">
+                                <label class="col-lg-3 col-md-4 control-label" for="track_name">Talk Title</label>
+                                <div class="col-lg-7 col-md-8">
                                     <input type="text" class="form-control" name="track_name" required="True"/>
                                 </div>
                             </div>
                             <div class="form-group">
-                                <label class="col-md-3 col-sm-4 control-label" for="phone">Speaker Biography</label>
-                                <div class="col-md-7 col-sm-8">
+                                <label class="col-lg-3 col-md-4 control-label" for="phone">Speaker Biography</label>
+                                <div class="col-lg-7 col-md-8">
                                     <textarea  class="form-control" name="biography" style="min-height: 120px"/>
                                 </div>
                             </div>
                             <div class="form-group">
-                                <label class="col-md-3 col-sm-4 control-label" for="description">Talk Introduction</label>
-                                <div class="col-md-7 col-sm-8">
+                                <label class="col-lg-3 col-md-4 control-label" for="description">Talk Introduction</label>
+                                <div class="col-lg-7 col-md-8">
                                     <textarea  class="form-control" name="description" style="min-height: 120px"/>
                                 </div>
                             </div>
                             <div class="form-group">
-                                <div class="col-md-offset-3 col-sm-offset-4 col-sm-8 col-md-7">
+                                <div class="offset-lg-3 offset-md-4 col-md-8 col-lg-7">
                                     <button type="submit" class="btn btn-primary">Submit Proposal</button>
                                 </div>
                             </div>
                         </form>
                     </section>
                     <div class="oe_structure"/>
-                </div><div class="col-md-3 col-md-offset-1">
+                </div><div class="col-lg-3 offset-lg-1">
                     <div class="panel panel-default">
                         <div class="panel-heading">
                             <h4>Talks Types</h4>
diff --git a/addons/website_event_track/views/event_views.xml b/addons/website_event_track/views/event_views.xml
index b74856dda64..8a3ac53b19a 100644
--- a/addons/website_event_track/views/event_views.xml
+++ b/addons/website_event_track/views/event_views.xml
@@ -8,10 +8,10 @@
         <field name="arch" type="xml">
             <xpath expr="//div[@name='event_type_visibility_website']/div[hasclass('o_setting_right_pane')]" position='inside'>
                 <div class="row mt16" attrs="{'invisible': [('website_menu', '=', False)]}">
-                    <label class="col-md-4" for="website_track"/> <field name="website_track"/>
+                    <label class="col-lg-4" for="website_track"/> <field name="website_track"/>
                 </div>
                 <div class="row mt16" attrs="{'invisible': [('website_menu', '=', False)]}">
-                    <label class="col-md-4" for="website_track_proposal"/> <field name="website_track_proposal"/>
+                    <label class="col-lg-4" for="website_track_proposal"/> <field name="website_track_proposal"/>
                 </div>
             </xpath>
         </field>
diff --git a/addons/website_form/static/src/scss/website_form.scss b/addons/website_form/static/src/scss/website_form.scss
index add4e0e6abf..f0f2f6ea077 100644
--- a/addons/website_form/static/src/scss/website_form.scss
+++ b/addons/website_form/static/src/scss/website_form.scss
@@ -5,15 +5,15 @@
 }
 
 .o_website_form_flex_item {
-    // col-md-4
+    // col-lg-4
     flex-basis: 33%;
 
-    // col-sm-6
+    // col-md-6
     @include media-breakpoint-down(md) {
         flex-basis: 50%;
     }
 
-    // col-xs-12
+    // col-12
     @include media-breakpoint-down(sm) {
         flex-basis: 100%;
     }
diff --git a/addons/website_form/views/res_config_view.xml b/addons/website_form/views/res_config_view.xml
index b456e666404..629139eb5be 100644
--- a/addons/website_form/views/res_config_view.xml
+++ b/addons/website_form/views/res_config_view.xml
@@ -5,7 +5,7 @@
         <field name="inherit_id" ref="website.res_config_settings_view_form"/>
         <field name="arch" type="xml">
             <xpath expr="//div[@id='google_analytics_setting']" position="after">
-                <div class="col-xs-12 col-md-6 o_setting_box">
+                <div class="col-12 col-lg-6 o_setting_box">
                     <div class="o_setting_left_pane">
                         <field name="website_form_enable_metadata"/>
                     </div>
diff --git a/addons/website_forum/models/forum.py b/addons/website_forum/models/forum.py
index dc9403448f1..8b5ed94091a 100644
--- a/addons/website_forum/models/forum.py
+++ b/addons/website_forum/models/forum.py
@@ -55,11 +55,11 @@ class Forum(models.Model):
         'Welcome Message',
         default = """<section class="bg-info" style="height: 168px;"><div class="container">
                         <div class="row">
-                            <div class="col-md-12">
+                            <div class="col-lg-12">
                                 <h1 class="text-center" style="text-align: left;">Welcome!</h1>
                                 <p class="text-muted text-center" style="text-align: left;">This community is for professionals and enthusiasts of our products and services. Share and discuss the best content and new marketing ideas, build your professional profile and become a better marketer together.</p>
                             </div>
-                            <div class="col-md-12">
+                            <div class="col-lg-12">
                                 <a href="#" class="js_close_intro">Hide Intro</a>    <a class="btn btn-primary forum_register_url" href="/web/login">Register</a> </div>
                             </div>
                         </div>
diff --git a/addons/website_forum/static/src/js/website_forum.editor.js b/addons/website_forum/static/src/js/website_forum.editor.js
index 7ce92f46f23..bbd31e8f3e2 100644
--- a/addons/website_forum/static/src/js/website_forum.editor.js
+++ b/addons/website_forum/static/src/js/website_forum.editor.js
@@ -36,7 +36,7 @@ WebsiteNewMenu.include({
 
                 var $add = $(
                     '<div class="form-group mb0">'+
-                        '<label class="col-sm-offset-3 col-sm-9 text-left">'+
+                        '<label class="offset-md-3 col-md-9 text-left">'+
                         '    <input type="checkbox" required="required"/> '+
                         '</label>'+
                     '</div>');
diff --git a/addons/website_forum/views/website_forum.xml b/addons/website_forum/views/website_forum.xml
index ef38108f7d3..d391316c8a0 100644
--- a/addons/website_forum/views/website_forum.xml
+++ b/addons/website_forum/views/website_forum.xml
@@ -103,7 +103,7 @@
 
         <div id="wrap" class="container">
             <div class="row mb16">
-                <div class="col-sm-9">
+                <div class="col-md-9">
                     <div t-foreach="notifications or []" t-as="notification" class="alert alert-success alert-dismissable" role="status">
                         <button type="button" class="close notification_close" t-att-id="notification.id" data-dismiss="alert" aria-label="Close">&amp;times;</button>
                         <div t-field="notification.body"/>
@@ -126,16 +126,16 @@
                     </div>
                     <t t-raw="0"/>
                 </div>
-                <div class="col-sm-3" id="right-column">
+                <div class="col-md-3" id="right-column">
                     <div t-if="not header.get('ask_hide')" t-attf-class="btn-group btn-block mb16 #{(user.karma &lt; forum.karma_ask) and not is_public_user and 'karma_required' or ''}" t-attf-data-karma="#{forum.karma_ask}">
                         <t t-set="multi_type" t-value="(forum.allow_link and forum.allow_question) or (forum.allow_link and forum.allow_discussion) or (forum.allow_question and forum.allow_discussion)"/>
-                        <a role="button" type="button"  t-attf-class="btn btn-primary btn-lg #{'col-sm-10' if multi_type else 'col-sm-12'}" t-attf-href="/forum/#{slug(forum)}/ask?post_type=#{forum.default_post_type}">
+                        <a role="button" type="button"  t-attf-class="btn btn-primary btn-lg #{'col-md-10' if multi_type else 'col-md-12'}" t-attf-href="/forum/#{slug(forum)}/ask?post_type=#{forum.default_post_type}">
                             <t t-if="forum.default_post_type == 'question'">Ask a Question</t>
                             <t t-if="forum.default_post_type == 'link'">Submit a Link</t>
                             <t t-if="forum.default_post_type == 'discussion'">New Discussion</t>
                         </a>
                         <t t-if="multi_type">
-                            <button type="button" class="btn btn-primary btn-lg col-sm-2 dropdown-toggle" data-toggle="dropdown">
+                            <button type="button" class="btn btn-primary btn-lg col-md-2 dropdown-toggle" data-toggle="dropdown">
                                 <span class="sr-only">Select Post</span>
                             </button>
                             <div class="dropdown-menu" role="menu">
@@ -385,7 +385,7 @@
             <h1 class="mb32">Our forums</h1>
             <div class="row">
                 <div t-if="not forums" class="well">No forum post yet.</div>
-                <div t-foreach="forums" t-as="forum" class="col-sm-3 text-center mb32">
+                <div t-foreach="forums" t-as="forum" class="col-md-3 text-center mb32">
                     <a t-attf-href="/forum/#{ slug(forum) }">
                         <div class="fa fa-5x fa-comment mb16" role="img" aria-label="Forum" title="Forum"/>
                         <div t-field="forum.name"/>
@@ -475,29 +475,29 @@
             <input type="hidden" name="karma" t-attf-value="#{user.karma}" id="karma"/>
             <input type="hidden" name="karma_edit_retag" t-attf-value="#{forum.karma_edit_retag}" id="karma_edit_retag"/>
             <div class="form-group">
-                <label class="col-sm-2 control-label" for="content_link">URL to Share</label>
-                <div class="col-sm-8">
+                <label class="col-md-2 control-label" for="content_link">URL to Share</label>
+                <div class="col-md-8">
                     <input type="text" name="content_link" required="True" t-attf-value="#{post_name}"
                         class="form-control mb16 o_forum_post_link" placeholder="e.g. https://www.odoo.com"/>
                 </div>
             </div>
             <div class="form-group">
-                <label class="col-sm-2 control-label" for="post_name">Post Title</label>
-                <div class="col-sm-8">
+                <label class="col-md-2 control-label" for="post_name">Post Title</label>
+                <div class="col-md-8">
                     <input type="text" name="post_name" required="True" t-attf-value="#{content}"
                         class="form-control"/>
                 </div>
             </div>
             <input type="hidden" name="karma_tag_create" t-attf-value="#{forum.karma_tag_create}" id="karma_tag_create"/>
             <div class="form-group">
-                <label class="col-sm-2 control-label" for="post_tags">Tags</label>
-                <div class="col-sm-8">
+                <label class="col-md-2 control-label" for="post_tags">Tags</label>
+                <div class="col-md-8">
                     <input type="hidden" name="karma_edit_retag" t-attf-value="#{forum.karma_edit_retag}" id="karma_edit_retag"/>
                     <input type="text" name="post_tags" class="form-control js_select2"/>
                 </div>
             </div>
             <div class="form-group">
-                <div class="col-sm-offset-2 col-sm-8">
+                <div class="offset-md-2 col-md-8">
                     <button type="submit" t-attf-class="btn btn-primary #{forum.allow_share and 'oe_social_share_call' or ''} #{(user.karma &lt; forum.karma_ask) and 'karma_required' or ''}"
                         t-att-data-karma="forum.karma_ask"
                         disabled="True" data-hashtags="#link" data-social-target-type="other">Post</button>
@@ -603,7 +603,7 @@
             <div t-if="not is_answer">
                 <br/>
                 <input type="hidden" name="karma_edit_retag" t-attf-value="#{forum.karma_edit_retag}" id="karma_edit_retag"/>
-                <input type="text" name="post_tags" class="form-control col-md-9 js_select2" placeholder="Tags" t-attf-data-init-value="#{tags}" value="Tags" t-att-readonly="user.karma &lt; forum.karma_edit_retag" t-att-title="'You need to have sufficient karma to edit tags' if user.karma &lt; forum.karma_edit_retag else ''"/>
+                <input type="text" name="post_tags" class="form-control col-lg-9 js_select2" placeholder="Tags" t-attf-data-init-value="#{tags}" value="Tags" t-att-readonly="user.karma &lt; forum.karma_edit_retag" t-att-title="'You need to have sufficient karma to edit tags' if user.karma &lt; forum.karma_edit_retag else ''"/>
                 <br/>
             </div>
             <button type="submit" class="btn btn-primary btn-lg">Save</button>
@@ -632,8 +632,8 @@
             <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
             <input name="post_id" t-att-value="question.id" type="hidden"/>
             <div class="form-group">
-                <label class="col-md-3 control-label" for="reason">Post:</label>
-                <div class="col-md-8 mt8">
+                <label class="col-lg-3 control-label" for="reason">Post:</label>
+                <div class="col-lg-8 mt8">
                     <t t-if="not question.parent_id">
                         <span t-field="question.name"/>
                     </t>
@@ -643,8 +643,8 @@
                 </div>
             </div>
             <div class="form-group">
-                <label class="col-md-3 control-label" for="reason">Reason:</label>
-                <div class="col-md-8">
+                <label class="col-lg-3 control-label" for="reason">Reason:</label>
+                <div class="col-lg-8">
                     <select class="form-control" name="reason_id">
                         <t t-foreach="reasons or []" t-as="reason">
                             <option t-att-value="reason.id" t-att-selected="reason.id == question.closed_reason_id.id"><t t-esc="reason.name"/></option>
@@ -653,7 +653,7 @@
                 </div>
             </div>
             <div class="form-group">
-                <div class="col-md-offset-3 col-md-8">
+                <div class="offset-lg-3 col-lg-8">
                     <button type="submit" class="btn btn-primary">
                         <t t-if="offensive">Mark as offensive</t>
                         <t t-if="not offensive">Close post</t>
@@ -1036,7 +1036,7 @@
                 </t>
             </div>
             <div class="clearfix" t-if="len(answer.website_message_ids)">
-                <div class="col-sm-offset-2 col-sm-2">
+                <div class="offset-md-2 col-md-2">
                     <ul class="list-inline mb0">
                         <li t-if="question.post_type == 'question'">
                             <a t-attf-class="fa fa-comment-o #{not answer.can_comment and 'karma_required text-muted' or ''}"
@@ -1073,7 +1073,7 @@
 <!-- Utility template: Post a Comment -->
 <template id="post_comment">
     <div class="row clearfix">
-        <div class="col-sm-10 col-sm-offset-2">
+        <div class="col-md-10 offset-md-2">
             <div t-foreach="reversed(object.website_message_ids)" t-as="message" class="comment oe_comment_grey">
                 <small class="text-muted">
                     <t t-set="required_karma" t-value="message.author_id.id == user.partner_id.id and object.forum_id.karma_comment_unlink_own or object.forum_id.karma_comment_unlink_all"/>
@@ -1138,7 +1138,7 @@
             </ul>
         </nav>
         <div class="row">
-            <div class="col-sm-3 mt16 o_js_forum_tag_follow" t-foreach="tags" t-as="tag">
+            <div class="col-md-3 mt16 o_js_forum_tag_follow" t-foreach="tags" t-as="tag">
                 <span><t t-esc="tag.posts_count"/>&amp;nbsp;&amp;nbsp;<i class='fa fa-times' title="Close" role="img" aria-label="Close"/>&amp;nbsp;&amp;nbsp;</span>
                 <a t-attf-href="/forum/#{ slug(forum) }/tag/#{ slug(tag) }/questions?{{ keep_query( filters='tag') }}"
                         t-attf-class="label #{'label-primary' if tag.message_is_follower else 'label-default'}">
@@ -1213,7 +1213,7 @@
             <t t-if="queue_type == 'offensive'">The offensive queue is empty.</t>
         </div>
         <div t-foreach="posts_ids" t-as="question" class="mb16 row post_to_validate" style="padding-bottom:16px;border-bottom:1px solid #e7e7e7;">
-            <div class="col-sm-2 o_js_validation_queue">
+            <div class="col-md-2 o_js_validation_queue">
                 <div class="panel panel-default text-center" style="background-color:#eee;margin:0;padding:5px 12px 5px 12px;">
                     <a t-attf-href="/forum/#{slug(forum)}/post/#{slug(question)}/validate" style="padding-right:8px;" title="Validate" aria-label="Validate"><i class="fa fa-check fa-2x"/></a>
                     <a t-if="queue_type == 'validation'" t-attf-href="/forum/#{slug(forum)}/post/#{slug(question)}/refuse" title="Refuse" aria-label="Refuse"><i class="fa fa-times fa-2x"/></a>
@@ -1221,7 +1221,7 @@
                     <a href="#" t-if="queue_type == 'offensive'" disabled="True" aria-label="Offensive" title="Offensive"><i class="fa fa-times fa-2x" style="color:rgb(179, 179, 179);"/></a>
                 </div>
             </div>
-            <div class="col-sm-10">
+            <div class="col-md-10">
                 <t t-if="question.parent_id">
                     <div t-foreach="question" t-as="answer" style="display: inline-block;">
                         <t t-call="website_forum.moderation_display_post_answer"/>
@@ -1238,7 +1238,7 @@
 <template id="users">
     <t t-call="website_forum.header">
         <div t-foreach="users" t-as="row_users" class="row mt16">
-            <div t-foreach="row_users" t-as="user" class="col-sm-4">
+            <div t-foreach="row_users" t-as="user" class="col-md-4">
                 <img class="pull-left img img-circle o_forum_avatar" t-attf-src="/forum/user/#{user.id}/avatar" alt="Avatar"/>
                 <div>
                     <a t-attf-href="/forum/#{slug(forum)}/user/#{user.id}" t-field="user.name"/>
@@ -1289,7 +1289,7 @@
             <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="d-none o_forum_file_upload" name="ufile" accept="image/*"/>
-                <div class="col-md-2">
+                <div class="col-lg-2">
                     <a href="#" class="o_forum_profile_pic_edit" aria-label="Edit">
                         <i class="fa fa-pencil fa-1g pull-left" title="Edit"></i>
                     </a>
@@ -1298,24 +1298,24 @@
                     </a>
                     <img class="img img-fluid img-circle o_forum_avatar_img" t-attf-src="/forum/user/#{user.id}/avatar" alt="Avatar"/>
                 </div>
-                <div class="col-md-10">
+                <div class="col-lg-10">
                     <input name="user_id" t-att-value="user.id" type="hidden"/>
                     <div class="form-group">
-                        <label class="col-md-2 control-label mb16" for="user_name">Real name</label>
-                        <div class="col-md-8 mb16">
+                        <label class="col-lg-2 control-label mb16" for="user_name">Real name</label>
+                        <div class="col-lg-8 mb16">
                             <input type="text" class="form-control" name="name" id="user_name" required="True" t-attf-value="#{user.name}"/>
                         </div>
                     </div>
                     <div class="form-group">
-                        <label class="col-md-2 control-label mb16" for="user_website_published" t-if="user.id == uid">Public profile</label>
-                        <div class="col-md-8 mb16" t-if="user.id == uid">
+                        <label class="col-lg-2 control-label mb16" for="user_website_published" t-if="user.id == uid">Public profile</label>
+                        <div class="col-lg-8 mb16" t-if="user.id == uid">
                             <input type="checkbox" class="mt8" name="website_published" id="user_website_published" value="True" t-if="not user.website_published"/>
                             <input type="checkbox" class="mt8" name="website_published" id="user_website_published" value="True" checked="checked" t-if="user.website_published"/>
                         </div>
                     </div>
                     <div class="form-group">
-                        <label class="col-md-2 control-label mb16" for="user_website">Website</label>
-                        <div class="col-md-8 mb16">
+                        <label class="col-lg-2 control-label mb16" for="user_website">Website</label>
+                        <div class="col-lg-8 mb16">
                             <input type="text" class="form-control" name="website" id="user_website" t-attf-value="#{user.partner_id.website or ''}"/>
                         </div>
                     </div>
@@ -1324,20 +1324,20 @@
                             <button type="button" class="close" data-dismiss="alert">x</button>
                             <p>Please enter a valid email address in order to receive notifications from answers or comments.</p>
                         </div>
-                        <label class="col-md-2 control-label mb16" for="user_email">Email</label>
-                        <div class="col-md-8 mb16">
+                        <label class="col-lg-2 control-label mb16" for="user_email">Email</label>
+                        <div class="col-lg-8 mb16">
                             <input type="text" class="form-control" name="email" id="user_email" required="True" t-attf-value="#{user.partner_id.email}"/>
                         </div>
                     </div>
                     <div class="form-group">
-                        <label class="col-md-2 control-label mb16" for="user_city">City</label>
-                        <div class="col-md-8 mb16">
+                        <label class="col-lg-2 control-label mb16" for="user_city">City</label>
+                        <div class="col-lg-8 mb16">
                             <input type="text" class="form-control" name="city" id="user_city" t-attf-value="#{user.partner_id.city or ''}"/>
                         </div>
                     </div>
                     <div class="form-group">
-                        <label class="col-md-2 control-label mb16">Country</label>
-                        <div class="col-md-8 mb16">
+                        <label class="col-lg-2 control-label mb16">Country</label>
+                        <div class="col-lg-8 mb16">
                             <select class="form-control" name="country">
                                 <option value="">Country...</option>
                                 <t t-foreach="countries or []" t-as="country">
@@ -1348,13 +1348,13 @@
                     </div>
                     <!--Note: using website_description fiels instead of using commnt firld of partner-->
                     <div class="form-group">
-                        <label class="col-md-2 control-label mb16" for="description">Biography</label>
-                        <div class="col-md-8 mb16">
+                        <label class="col-lg-2 control-label mb16" for="description">Biography</label>
+                        <div class="col-lg-8 mb16">
                             <textarea name="description" id="description" style="min-height: 120px" required="True"
                                 class="form-control load_editor"><t t-esc="user.partner_id.website_description"/></textarea>
                         </div>
                     </div>
-                    <div class="col-sm-offset-2 col-md-2 mb16">
+                    <div class="offset-md-2 col-lg-2 mb16">
                         <button type="submit" class="btn btn-primary btn-lg">Update</button>
                     </div>
                 </div>
@@ -1370,10 +1370,10 @@
             <small>profile</small>
         </h1>
         <div class="row">
-            <div class="col-sm-2">
+            <div class="col-md-2">
                 <img class="img img-fluid img-circle" t-attf-src="/forum/user/#{user.id}/avatar" alt="Avatar"/>
             </div>
-            <div class="col-sm-10">
+            <div class="col-md-10">
                 <table class="table table-condensed">
                 <tr>
                     <td rowspan="4" valign="top"><span class="text-muted">stats</span></td>
diff --git a/addons/website_forum_doc/views/website_doc.xml b/addons/website_forum_doc/views/website_doc.xml
index bf1628e9e70..d01301d8fe0 100644
--- a/addons/website_forum_doc/views/website_doc.xml
+++ b/addons/website_forum_doc/views/website_doc.xml
@@ -48,7 +48,7 @@
             <div id="wrap">
                 <section class="container mt16" t-if="toc">
                     <div class="row">
-                        <div class="col-sm-8">
+                        <div class="col-md-8">
                             <ol class="breadcrumb mb0">
                                 <t t-call="website_forum_doc.breadcrumb">
                                     <t t-set="toc" t-value="toc.parent_id"/>
@@ -58,7 +58,7 @@
                                 </li>
                             </ol>
                         </div>
-                        <div class="col-sm-4 text-right">
+                        <div class="col-md-4 text-right">
                             <form class="navbar-form ml-auto mt0" role="search" t-attf-action="/forum/#{ slug(forum) }" method="get">
                                 <div class="form-group">
                                     <input type="search" class="form-control"
@@ -87,7 +87,7 @@
             <t t-call="website.layout">
                 <section class="container mt16" t-if="toc">
                     <div class="row">
-                        <div class="col-sm-8">
+                        <div class="col-md-8">
                             <ol class="breadcrumb mb0">
                                 <t t-call="website_forum_doc.breadcrumb">
                                     <t t-set="toc" t-value="toc.parent_id"/>
@@ -97,7 +97,7 @@
                                 </li>
                             </ol>
                         </div>
-                        <div class="col-sm-4 text-right" t-if="forum">
+                        <div class="col-md-4 text-right" t-if="forum">
                             <form class="navbar-form ml-auto mt0" role="search" t-attf-action="/forum/#{ slug(forum) }" method="get">
                                 <div class="form-group">
                                     <input type="search" class="form-control"
@@ -112,7 +112,7 @@
 
                 <section class="container">
                     <div class="row">
-                        <div class="col-sm-9">
+                        <div class="col-md-9">
                             <h1 class="page-header" t-field="post.name"/>
                             <blockquote class="oe_toc_content" t-if="bool(post.content)">
                                 <t t-raw="post.content"/>
@@ -131,7 +131,7 @@
                                     </t>
                                 </ul>
                             </div>
-                        </div><div class="col-sm-3">
+                        </div><div class="col-md-3">
                             <div class="panel panel-default mt48" id="about_doc">
                                 <div class="panel-heading">
                                     <h3 class="panel-title">Need more info?</h3>
@@ -194,14 +194,14 @@
                             <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
                             <input name="post_id" t-att-value="post.id" type="hidden"/>
                             <div class="form-group">
-                                <label class="col-md-3 control-label" for="reason">Question:</label>
-                                <div class="col-md-8 mt8">
+                                <label class="col-lg-3 control-label" for="reason">Question:</label>
+                                <div class="col-lg-8 mt8">
                                     <span t-field="post.name"/>
                                 </div>
                             </div>
                             <div class="form-group">
-                                <label class="col-md-3 control-label" for="reason">Publish in Chapter:</label>
-                                <div class="col-md-8">
+                                <label class="col-lg-3 control-label" for="reason">Publish in Chapter:</label>
+                                <div class="col-lg-8">
                                     <select class="form-control" name="toc_id">
                                         <option/>
                                         <t t-foreach="chapters or []" t-as="chapter">
@@ -211,7 +211,7 @@
                                 </div>
                             </div>
                             <div class="form-group">
-                                <div class="col-md-offset-3 col-md-8">
+                                <div class="offset-lg-3 col-lg-8">
                                     <button class="btn btn-primary">Push to documentation</button>
                                     <span class="text-muted">or</span>
                                     <a role="button" class="btn btn-link" t-attf-href="/forum/#{ slug(forum) }/question/#{ slug(post) }">cancel</a>
@@ -223,7 +223,7 @@
                 <section class="container">
                     <h2 class="page-header">Samples</h2>
                     <div class="row">
-                        <div class="col-sm-6">
+                        <div class="col-md-6">
                             <h4>Good question titles</h4>
                             <ul>
                                 <li>How to forecast sales revenues?</li>
@@ -231,7 +231,7 @@
                             </ul>
 
                         </div>
-                        <div class="col-sm-6">
+                        <div class="col-md-6">
                             <h4>Bad questions</h4>
                             <ul>
                                 <li>What report should I use to compute probabilities per stage?</li>
@@ -240,7 +240,7 @@
                         </div>
                     </div>
                     <div class="row mb64">
-                        <div class="col-sm-6">
+                        <div class="col-md-6">
                             <h4>Good answer structure</h4>
                             <ol>
                                 <li>Describe the business solution</li>
@@ -248,7 +248,7 @@
                                 <li>Benefits of having done this setup</li>
                             </ol>
                         </div>
-                        <div class="col-sm-6">
+                        <div class="col-md-6">
                             <h4>Bad answer structure</h4>
                             <ol>
                                 <li>Explain how to configure Odoo</li>
diff --git a/addons/website_hr/views/website_hr_templates.xml b/addons/website_hr/views/website_hr_templates.xml
index 03ba2131082..5015042020b 100644
--- a/addons/website_hr/views/website_hr_templates.xml
+++ b/addons/website_hr/views/website_hr_templates.xml
@@ -13,10 +13,10 @@
             <t t-set="is_publisher" t-value="request.env['res.users'].has_group('website.group_website_publisher')" />
             <t t-set="employees_domain" t-value="[] if is_publisher else [('website_published', '=', True)]" />
             <t t-set="employees" t-value="request.env['hr.employee'].search(employees_domain)" />
-            <div class="col-sm-12 text-center" t-if="len(employees)">
+            <div class="col-md-12 text-center" t-if="len(employees)">
                 <h2>Our Team</h2>
             </div>
-            <div t-foreach="employees" t-as="employee" class="col-sm-3 col-lg-2 mt16 text-center o_avatar_info_container">
+            <div t-foreach="employees" t-as="employee" class="col-md-3 col-xl-2 mt16 text-center o_avatar_info_container">
                 <t t-call="website.publish_management" class="text-center">
                     <t t-set="object" t-value="employee"/>
                     <t t-set="publish_edit" t-value="True"/>
diff --git a/addons/website_hr_recruitment/data/hr_job_demo.xml b/addons/website_hr_recruitment/data/hr_job_demo.xml
index 959a57b27bc..fcf08887d18 100644
--- a/addons/website_hr_recruitment/data/hr_job_demo.xml
+++ b/addons/website_hr_recruitment/data/hr_job_demo.xml
@@ -7,7 +7,7 @@
 <section class="mt16 mb16 oe_dark">
     <div class="container">
         <div class="row">
-            <div class="col-md-offset-1 col-md-10 mb16 mt16">
+            <div class="offset-lg-1 col-lg-10 mb16 mt16">
                 <p>You will be responsible for developing and improving product communication. You will work autonomously as well as coordinate and supervise small distributed development teams for specific projects. You will become a techinical expert of the product.</p>
                 <p>We are looking for a passionated marketer manager to help us make products people love to use. We need someone who is ambitious, passionated, and ..... not afraid to start new things, a lot of new things and scale them.</p>
             </div>
@@ -17,7 +17,7 @@
 <section class="mt16 mb16">
     <div class="container">
         <div class="row">
-            <div class="col-md-4 mt16">
+            <div class="col-lg-4 mt16">
                 <div class="panel panel-info">
                     <!-- Default panel contents -->
                     <div class="panel-heading text-center">
@@ -41,7 +41,7 @@
                     </div>
                 </div>
             </div>
-            <div class="col-md-4 mt16">
+            <div class="col-lg-4 mt16">
                 <div class="panel panel-info">
                     <!-- Default panel contents -->
                     <div class="panel-heading text-center">
@@ -64,7 +64,7 @@
                     </div>
                 </div>
             </div>
-            <div class="col-md-4 mt16">
+            <div class="col-lg-4 mt16">
                 <div class="panel panel-info">
                     <!-- Default panel contents -->
                     <div class="panel-heading text-center">
@@ -94,11 +94,11 @@
 <section class="mt16 mb16">
     <div class="container">
         <div class="row">
-            <div class="col-md-12 text-center">
+            <div class="col-lg-12 text-center">
                 <h2>What we offer</h2>
                 <h3 class="text-muted">A good job in a young and dynamic team</h3>
             </div>
-            <div class="col-md-12">
+            <div class="col-lg-12">
                 <p>A full time job, with an attractive salary package in a small team of smart people. You will start contract with a full technical and functional training. If you are passionate, motivate and flexible apply for this job, you will certainly join the best company ever.</p>
                 <p>With our product, which is a suite of 3000 business apps. It is fully open source, full featured and it’s online offer is 3 times cheaper than traditional competitors. We have 2.000.000 users, and we're growing fast.</p>
                 <p>Because of our constant growth, we're now looking for people to reinforce our team of enthusiastic developers. So if working on an open source project in a friendly and cooperative atmosphere sounds like fun to you, read on...</p>
@@ -109,21 +109,21 @@
 <section class="mt16 mb16">
     <div class="container">
         <div class="row">
-            <div class="col-md-12 text-center">
+            <div class="col-lg-12 text-center">
                 <h2>Our staff at work</h2>
                 <h3 class="text-muted">Pictures of smart and enthusiastic people</h3>
             </div>
-            <div class="col-md-12 text-center">
-                <div class="col-md-5 mt16">
+            <div class="col-lg-12 text-center">
+                <div class="col-lg-5 mt16">
                     <img alt="" class="img img-fluid" style="height:355px;" src="/website_hr_recruitment/static/src/img/882207_10151545507603963_1381082528_o.jpg"/>
                 </div>
-                <div class="col-md-3 mt16">
+                <div class="col-lg-3 mt16">
                     <img alt="" class="img img-fluid" style="height:355px;" src="/website_hr_recruitment/static/src/img/1010054_10151543538268963_186969588_n.jpg"/>
                 </div>
-                <div class="col-md-3 mt16">
+                <div class="col-lg-3 mt16">
                     <img alt="" class="img img-fluid" src="/website_hr_recruitment/static/src/img/1017407_10151536656083963_857938319_n.jpg"/>
                 </div>
-                <div class="col-md-3 mt16">
+                <div class="col-lg-3 mt16">
                     <img alt="" class="img img-fluid" src="/website_hr_recruitment/static/src/img/1044326_10151536655788963_587131144_n.jpg"/>
                 </div>
             </div>
@@ -139,7 +139,7 @@
 <section class="mt16 mb16 oe_dark">
     <div class="container">
         <div class="row">
-            <div class="col-md-offset-1 col-md-10 mb16 mt16">
+            <div class="offset-lg-1 col-lg-10 mb16 mt16">
                 You will be responsible for developing and improving applications. You will work autonomously as well as coordinate and supervise small distributed development teams for specific projects. You will become a technical expert of the product.
             </div>
         </div>
@@ -148,7 +148,7 @@
 <section class="mt16 mb16">
     <div class="container">
         <div class="row">
-            <div class="col-md-4 mt16">
+            <div class="col-lg-4 mt16">
                 <div class="panel panel-info">
                     <!-- Default panel contents -->
                     <div class="panel-heading text-center">
@@ -171,7 +171,7 @@
                     </div>
                 </div>
             </div>
-            <div class="col-md-4 mt16">
+            <div class="col-lg-4 mt16">
                 <div class="panel panel-info">
                     <!-- Default panel contents -->
                     <div class="panel-heading text-center">
@@ -195,7 +195,7 @@
                     </div>
                 </div>
             </div>
-            <div class="col-md-4 mt16">
+            <div class="col-lg-4 mt16">
                 <div class="panel panel-info">
                     <!-- Default panel contents -->
                     <div class="panel-heading text-center">
@@ -227,11 +227,11 @@
 <section class="mt16 mb16">
     <div class="container">
         <div class="row">
-            <div class="col-md-12 text-center">
+            <div class="col-lg-12 text-center">
                 <h2>What we offer</h2>
                 <h3 class="text-muted">A good job in a young and dynamic team</h3>
             </div>
-            <div class="col-md-12">
+            <div class="col-lg-12">
                 <p>A full time job, with an attractive salary package in a small team of smart people. You will start contract with a full technical and functional training. If you are passionate, motivate and flexible apply for this job, you will certainly join the best company ever.</p>
                 <p>With our product, which is a suite of 3000 business apps. It is fully open source, full featured and it’s online offer is 3 times cheaper than traditional competitors. We have 2.000.000 users, and we're growing fast.</p>
                 <p>Because of our constant growth, we're now looking for people to reinforce our team of enthusiastic developers. So if working on an open source project in a friendly and cooperative atmosphere sounds like fun to you, read on...</p>
@@ -242,21 +242,21 @@
 <section class="mt16 mb16">
     <div class="container">
         <div class="row">
-            <div class="col-md-12 text-center">
+            <div class="col-lg-12 text-center">
                 <h2>Our staff at work</h2>
                 <h3 class="text-muted">Pictures of smart and enthusiastic people</h3>
             </div>
-            <div class="col-md-12 text-center">
-                <div class="col-md-5 mt16">
+            <div class="col-lg-12 text-center">
+                <div class="col-lg-5 mt16">
                     <img alt="" class="img img-fluid" style="height:355px;" src="/website_hr_recruitment/static/src/img/882207_10151545507603963_1381082528_o.jpg"/>
                 </div>
-                <div class="col-md-3 mt16">
+                <div class="col-lg-3 mt16">
                     <img alt="" class="img img-fluid" style="height:355px;" src="/website_hr_recruitment/static/src/img/1010054_10151543538268963_186969588_n.jpg"/>
                 </div>
-                <div class="col-md-3 mt16">
+                <div class="col-lg-3 mt16">
                     <img alt="" class="img img-fluid" src="/website_hr_recruitment/static/src/img/1017407_10151536656083963_857938319_n.jpg"/>
                 </div>
-                <div class="col-md-3 mt16">
+                <div class="col-lg-3 mt16">
                     <img alt="" class="img img-fluid" src="/website_hr_recruitment/static/src/img/1044326_10151536655788963_587131144_n.jpg"/>
                 </div>
             </div>
@@ -272,7 +272,7 @@
 <section class="mt16 mb16 oe_dark">
     <div class="container">
         <div class="row">
-            <div class="col-md-offset-1 col-md-10 mb16 mt16">
+            <div class="offset-lg-1 col-lg-10 mb16 mt16">
                 We are looking for a motivated and results-driven Functional Consultant! You will take part in the consulting services we provide to our partners and customers, on the functional side. Your job start from the quotation to the customer to the delivery to the customer. You listen the customer and try to give him the best service. You report to the head of consulting service and will be coached by a senior consultant.
             </div>
         </div>
@@ -281,7 +281,7 @@
 <section class="mt16 mb16">
     <div class="container">
         <div class="row">
-            <div class="col-md-4 mt16">
+            <div class="col-lg-4 mt16">
                 <div class="panel panel-info">
                     <!-- Default panel contents -->
                     <div class="panel-heading text-center">
@@ -307,7 +307,7 @@
                     </div>
                 </div>
             </div>
-            <div class="col-md-4 mt16">
+            <div class="col-lg-4 mt16">
                 <div class="panel panel-info">
                     <!-- Default panel contents -->
                     <div class="panel-heading text-center">
@@ -331,7 +331,7 @@
                     </div>
                 </div>
             </div>
-            <div class="col-md-4 mt16">
+            <div class="col-lg-4 mt16">
                 <div class="panel panel-info">
                     <!-- Default panel contents -->
                     <div class="panel-heading text-center">
@@ -361,11 +361,11 @@
 <section class="mt16 mb16">
     <div class="container">
         <div class="row">
-            <div class="col-md-12 text-center">
+            <div class="col-lg-12 text-center">
                 <h2>What we offer</h2>
                 <h3 class="text-muted">A good job in a young and dynamic team</h3>
             </div>
-            <div class="col-md-12">
+            <div class="col-lg-12">
                 <p>A full time job, with an attractive salary package in a small team of smart people. You will start contract with a full technical and functional training. If you are passionate, motivate and flexible apply for this job, you will certainly join the best company ever.</p>
                 <p>With our product, which is a suite of 3000 business apps. It is fully open source, full featured and it’s online offer is 3 times cheaper than traditional competitors. We have 2.000.000 users, and we're growing fast.</p>
                 <p>Because of our constant growth, we're now looking for people to reinforce our team of enthusiastic developers. So if working on an open source project in a friendly and cooperative atmosphere sounds like fun to you, read on...</p>
@@ -376,21 +376,21 @@
 <section class="mt16 mb16">
     <div class="container">
         <div class="row">
-            <div class="col-md-12 text-center">
+            <div class="col-lg-12 text-center">
                 <h2>Our staff at work</h2>
                 <h3 class="text-muted">Pictures of smart and enthusiastic people</h3>
             </div>
-            <div class="col-md-12 text-center">
-                <div class="col-md-5 mt16">
+            <div class="col-lg-12 text-center">
+                <div class="col-lg-5 mt16">
                     <img alt="" class="img img-fluid" style="height:355px;" src="/website_hr_recruitment/static/src/img/882207_10151545507603963_1381082528_o.jpg"/>
                 </div>
-                <div class="col-md-3 mt16">
+                <div class="col-lg-3 mt16">
                     <img alt="" class="img img-fluid" style="height:355px;" src="/website_hr_recruitment/static/src/img/1010054_10151543538268963_186969588_n.jpg"/>
                 </div>
-                <div class="col-md-3 mt16">
+                <div class="col-lg-3 mt16">
                     <img alt="" class="img img-fluid" src="/website_hr_recruitment/static/src/img/1017407_10151536656083963_857938319_n.jpg"/>
                 </div>
-                <div class="col-md-3 mt16">
+                <div class="col-lg-3 mt16">
                     <img alt="" class="img img-fluid" src="/website_hr_recruitment/static/src/img/1044326_10151536655788963_587131144_n.jpg"/>
                 </div>
             </div>
@@ -405,7 +405,7 @@
 <section class="mt16 mb16 oe_dark">
     <div class="container">
         <div class="row">
-            <div class="col-md-offset-1 col-md-10 mb16 mt16">
+            <div class="offset-lg-1 col-lg-10 mb16 mt16">
                 <p>You will be responsible for developing and improving product communication. You will work autonomously as well as coordinate and supervise small distributed development teams for specific projects. You will become a techinical expert of the product.</p>
                 <p class="text-muted">We are looking for a passionated executive manager to help us make products people love to use. We need someone who is ambitious, passionated, and ..... not afraid to start new things, a lot of new things and scale them.</p>
             </div>
@@ -415,7 +415,7 @@
 <section class="mt16 mb16">
     <div class="container">
         <div class="row">
-            <div class="col-md-4 mt16">
+            <div class="col-lg-4 mt16">
                 <div class="panel panel-info">
                     <!-- Default panel contents -->
                     <div class="panel-heading text-center">
@@ -438,7 +438,7 @@
                     </div>
                 </div>
             </div>
-            <div class="col-md-4 mt16">
+            <div class="col-lg-4 mt16">
                 <div class="panel panel-info">
                     <!-- Default panel contents -->
                     <div class="panel-heading text-center">
@@ -461,7 +461,7 @@
                     </div>
                 </div>
             </div>
-            <div class="col-md-4 mt16">
+            <div class="col-lg-4 mt16">
                 <div class="panel panel-info">
                     <!-- Default panel contents -->
                     <div class="panel-heading text-center">
@@ -490,11 +490,11 @@
 <section class="mt16 mb16">
     <div class="container">
         <div class="row">
-            <div class="col-md-12 text-center">
+            <div class="col-lg-12 text-center">
                 <h2>What we offer</h2>
                 <h3 class="text-muted">A good job in a young and dynamic team</h3>
             </div>
-            <div class="col-md-12">
+            <div class="col-lg-12">
                 <p>A full time job, with an attractive salary package in a small team of smart people. You will start contract with a full technical and functional training. If you are passionate, motivate and flexible apply for this job, you will certainly join the best company ever.</p>
                 <p>With our product, which is a suite of 3000 business apps. It is fully open source, full featured and it’s online offer is 3 times cheaper than traditional competitors. We have 2.000.000 users, and we're growing fast.</p>
                 <p>Because of our constant growth, we're now looking for people to reinforce our team of enthusiastic developers. So if working on an open source project in a friendly and cooperative atmosphere sounds like fun to you, read on...</p>
@@ -505,21 +505,21 @@
 <section class="mt16 mb16">
     <div class="container">
         <div class="row">
-            <div class="col-md-12 text-center">
+            <div class="col-lg-12 text-center">
                 <h2>Our staff at work</h2>
                 <h3 class="text-muted">Pictures of smart and enthusiastic people</h3>
             </div>
-            <div class="col-md-12 text-center">
-                <div class="col-md-5 mt16">
+            <div class="col-lg-12 text-center">
+                <div class="col-lg-5 mt16">
                     <img alt="" class="img img-fluid" style="height:355px;" src="/website_hr_recruitment/static/src/img/882207_10151545507603963_1381082528_o.jpg"/>
                 </div>
-                <div class="col-md-3 mt16">
+                <div class="col-lg-3 mt16">
                     <img alt="" class="img img-fluid" style="height:355px;" src="/website_hr_recruitment/static/src/img/1010054_10151543538268963_186969588_n.jpg"/>
                 </div>
-                <div class="col-md-3 mt16">
+                <div class="col-lg-3 mt16">
                     <img alt="" class="img img-fluid" src="/website_hr_recruitment/static/src/img/1017407_10151536656083963_857938319_n.jpg"/>
                 </div>
-                <div class="col-md-3 mt16">
+                <div class="col-lg-3 mt16">
                     <img alt="" class="img img-fluid" src="/website_hr_recruitment/static/src/img/1044326_10151536655788963_587131144_n.jpg"/>
                 </div>
             </div>
@@ -534,7 +534,7 @@
 <section class="mt16 mb16 oe_dark">
     <div class="container">
         <div class="row">
-            <div class="col-md-offset-1 col-md-10 mb16 mt16">
+            <div class="offset-lg-1 col-lg-10 mb16 mt16">
                 You will be responsible for developing and improving applications. You will work autonomously as well as                     coordinate and supervise small distributed development teams for specific projects. You will become a technical                 expert of the product.
             </div>
         </div>
@@ -543,7 +543,7 @@
 <section class="mt16 mb16">
     <div class="container">
         <div class="row">
-            <div class="col-md-4 mt16">
+            <div class="col-lg-4 mt16">
                 <div class="panel panel-info">
                     <!-- Default panel contents -->
                         <div class="panel-heading text-center">
@@ -566,7 +566,7 @@
                         </div>
                     </div>
             </div>
-            <div class="col-md-4 mt16">
+            <div class="col-lg-4 mt16">
             <div class="panel panel-info">
                 <!-- Default panel contents -->
                     <div class="panel-heading text-center">
@@ -589,7 +589,7 @@
                     </div>
                 </div>
             </div>
-            <div class="col-md-4 mt16">
+            <div class="col-lg-4 mt16">
                 <div class="panel panel-info">
                     <!-- Default panel contents -->
                     <div class="panel-heading text-center">
@@ -618,11 +618,11 @@
 <section class="mt16 mb16">
     <div class="container">
         <div class="row">
-            <div class="col-md-12 text-center">
+            <div class="col-lg-12 text-center">
                 <h2>What we offer</h2>
                 <h3 class="text-muted">A good job in a young and dynamic team</h3>
             </div>
-            <div class="col-md-12">
+            <div class="col-lg-12">
                 <p>A full time job, with an attractive salary package in a small team of smart people. You will start contract with a full technical and functional training. If you are passionate, motivate and flexible apply for this job, you will certainly join the best company ever.</p>
                 <p>With our product, which is a suite of 3000 business apps. It is fully open source, full featured and it’s online offer is 3 times cheaper than traditional competitors. We have 2.000.000 users, and we're growing fast.</p>
                 <p>Because of our constant growth, we're now looking for people to reinforce our team of enthusiastic chief technical officer. So if working on an open source project in a friendly and cooperative atmosphere sounds like fun to you, read on...</p>
@@ -633,21 +633,21 @@
 <section class="mt16 mb16">
     <div class="container">
         <div class="row">
-            <div class="col-md-12 text-center">
+            <div class="col-lg-12 text-center">
                 <h2>Our staff at work</h2>
                 <h3 class="text-muted">Pictures of smart and enthusiastic people</h3>
             </div>
-            <div class="col-md-12 text-center">
-                <div class="col-md-5 mt16">
+            <div class="col-lg-12 text-center">
+                <div class="col-lg-5 mt16">
                     <img alt="" class="img img-fluid" style="height:355px;" src="/website_hr_recruitment/static/src/img/882207_10151545507603963_1381082528_o.jpg"/>
                 </div>
-                <div class="col-md-3 mt16">
+                <div class="col-lg-3 mt16">
                     <img alt="" class="img img-fluid" style="height:355px;" src="/website_hr_recruitment/static/src/img/1010054_10151543538268963_186969588_n.jpg"/>
                 </div>
-                <div class="col-md-3 mt16">
+                <div class="col-lg-3 mt16">
                     <img alt="" class="img img-fluid" src="/website_hr_recruitment/static/src/img/1017407_10151536656083963_857938319_n.jpg"/>
                 </div>
-                <div class="col-md-3 mt16">
+                <div class="col-lg-3 mt16">
                     <img alt="" class="img img-fluid" src="/website_hr_recruitment/static/src/img/1044326_10151536655788963_587131144_n.jpg"/>
                 </div>
             </div>
@@ -662,7 +662,7 @@
 <section class="mt16 mb16 oe_dark">
     <div class="container">
         <div class="row">
-            <div class="col-md-offset-1 col-md-10 mb16 mt16">
+            <div class="offset-lg-1 col-lg-10 mb16 mt16">
                 You will be responsible for developing and improving applications. You will work autonomously as well as                     coordinate and supervise small distributed development teams for specific projects. You will become a technical                 expert of the product.
             </div>
         </div>
@@ -671,7 +671,7 @@
 <section class="mt16 mb16">
     <div class="container">
         <div class="row">
-            <div class="col-md-4 mt16">
+            <div class="col-lg-4 mt16">
                 <div class="panel panel-info">
                     <!-- Default panel contents -->
                     <div class="panel-heading text-center">
@@ -694,7 +694,7 @@
                     </div>
                 </div>
             </div>
-            <div class="col-md-4 mt16">
+            <div class="col-lg-4 mt16">
                 <div class="panel panel-info">
                     <!-- Default panel contents -->
                     <div class="panel-heading text-center">
@@ -717,7 +717,7 @@
                     </div>
                 </div>
             </div>
-            <div class="col-md-4 mt16">
+            <div class="col-lg-4 mt16">
                 <div class="panel panel-info">
                     <!-- Default panel contents -->
                     <div class="panel-heading text-center">
@@ -746,11 +746,11 @@
 <section class="mt16 mb16">
     <div class="container">
         <div class="row">
-            <div class="col-md-12 text-center">
+            <div class="col-lg-12 text-center">
                 <h2>What we offer</h2>
                 <h3 class="text-muted">A good job in a young and dynamic team</h3>
             </div>
-            <div class="col-md-12">
+            <div class="col-lg-12">
                 <p>A full time job, with an attractive salary package in a small team of smart people. You will start contract with a full technical and functional training. If you are passionate, motivate and flexible apply for this job, you will certainly join the best company ever.</p>
                 <p>With our product, which is a suite of 3000 business apps. It is fully open source, full featured and it’s online offer is 3 times cheaper than traditional competitors. We have 2.000.000 users, and we're growing fast.</p>
                 <p>Because of our constant growth, we're now looking for people to reinforce our team of enthusiastic trainees. So if working on an open source project in a friendly and cooperative atmosphere sounds like fun to you, read on...</p>
@@ -761,21 +761,21 @@
 <section class="mt16 mb16">
     <div class="container">
         <div class="row">
-            <div class="col-md-12 text-center">
+            <div class="col-lg-12 text-center">
                 <h2>Our staff at work</h2>
                 <h3 class="text-muted">Pictures of smart and enthusiastic people</h3>
             </div>
-            <div class="col-md-12 text-center">
-                <div class="col-md-5 mt16">
+            <div class="col-lg-12 text-center">
+                <div class="col-lg-5 mt16">
                     <img alt="" class="img img-fluid" style="height:355px;" src="/website_hr_recruitment/static/src/img/882207_10151545507603963_1381082528_o.jpg"/>
                 </div>
-                <div class="col-md-3 mt16">
+                <div class="col-lg-3 mt16">
                     <img alt="" class="img img-fluid" style="height:355px;" src="/website_hr_recruitment/static/src/img/1010054_10151543538268963_186969588_n.jpg"/>
                 </div>
-                <div class="col-md-3 mt16">
+                <div class="col-lg-3 mt16">
                     <img alt="" class="img img-fluid" src="/website_hr_recruitment/static/src/img/1017407_10151536656083963_857938319_n.jpg"/>
                 </div>
-                <div class="col-md-3 mt16">
+                <div class="col-lg-3 mt16">
                     <img alt="" class="img img-fluid" src="/website_hr_recruitment/static/src/img/1044326_10151536655788963_587131144_n.jpg"/>
                 </div>
             </div>
@@ -790,7 +790,7 @@
 <section class="mt16 mb16 oe_dark">
     <div class="container">
         <div class="row">
-            <div class="col-md-offset-1 col-md-10 mb16 mt16">
+            <div class="offset-lg-1 col-lg-10 mb16 mt16">
                 <p>You will be responsible for developing and improving product communication. You will work autonomously as well as coordinate and supervise small distributed development teams for specific projects. You will become a techinical expert of the product.</p>
                 <p class="text-muted">We are looking for a passionated Human Resources Manager to help us make products people love to use. We need someone who is ambitious, passionated, and ..... not afraid to start new things, a lot of new things and scale them.</p>
             </div>
@@ -800,7 +800,7 @@
 <section class="mt16 mb16">
     <div class="container">
         <div class="row">
-            <div class="col-md-4 mt16" style="width:30%;">
+            <div class="col-lg-4 mt16" style="width:30%;">
                 <div class="panel panel-info">
                     <!-- Default panel contents -->
                     <div class="panel-heading text-center">
@@ -823,7 +823,7 @@
                     </div>
                 </div>
             </div>
-            <div class="col-md-4 mt16">
+            <div class="col-lg-4 mt16">
                 <div class="panel panel-info">
                     <!-- Default panel contents -->
                     <div class="panel-heading text-center">
@@ -846,7 +846,7 @@
                     </div>
                 </div>
             </div>
-            <div class="col-md-4 mt16">
+            <div class="col-lg-4 mt16">
                 <div class="panel panel-info">
                     <!-- Default panel contents -->
                     <div class="panel-heading text-center">
@@ -875,11 +875,11 @@
 <section class="mt16 mb16">
     <div class="container">
         <div class="row">
-            <div class="col-md-12 text-center">
+            <div class="col-lg-12 text-center">
                 <h2>What we offer</h2>
                 <h3 class="text-muted">A good job in a young and dynamic team</h3>
             </div>
-            <div class="col-md-12">
+            <div class="col-lg-12">
                 <p>A full time job, with an attractive salary package in a small team of smart people. You will start contract with a full technical and functional training. If you are passionate, motivate and flexible apply for this job, you will certainly join the best company ever.</p>
                 <p>With our product, which is a suite of 3000 business apps. It is fully open source, full featured and it’s online offer is 3 times cheaper than traditional competitors. We have 2.000.000 users, and we're growing fast.</p>
                 <p>Because of our constant growth, we're now looking for people to reinforce our team of enthusiastic developers. So if working on an open source project in a friendly and cooperative atmosphere sounds like fun to you, read on...</p>
@@ -890,21 +890,21 @@
 <section class="mt16 mb16">
     <div class="container">
         <div class="row">
-            <div class="col-md-12 text-center">
+            <div class="col-lg-12 text-center">
                 <h2>Our staff at work</h2>
                 <h3 class="text-muted">Pictures of smart and enthusiastic people</h3>
             </div>
-            <div class="col-md-12 text-center">
-                <div class="col-md-5 mt16">
+            <div class="col-lg-12 text-center">
+                <div class="col-lg-5 mt16">
                     <img alt="" class="img img-fluid" style="height:355px;" src="/website_hr_recruitment/static/src/img/882207_10151545507603963_1381082528_o.jpg"/>
                 </div>
-                <div class="col-md-3 mt16">
+                <div class="col-lg-3 mt16">
                     <img alt="" class="img img-fluid" style="height:355px;" src="/website_hr_recruitment/static/src/img/1010054_10151543538268963_186969588_n.jpg"/>
                 </div>
-                <div class="col-md-3 mt16">
+                <div class="col-lg-3 mt16">
                     <img alt="" class="img img-fluid" src="/website_hr_recruitment/static/src/img/1017407_10151536656083963_857938319_n.jpg"/>
                 </div>
-                <div class="col-md-3 mt16">
+                <div class="col-lg-3 mt16">
                     <img alt="" class="img img-fluid" src="/website_hr_recruitment/static/src/img/1044326_10151536655788963_587131144_n.jpg"/>
                 </div>
             </div>
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 b1ca407e8ef..6b956a87983 100644
--- a/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml
+++ b/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml
@@ -8,11 +8,11 @@
                 <section class="mb16">
                     <div class="container">
                         <div class="row">
-                            <div class="col-md-12 text-center mb16">
+                            <div class="col-lg-12 text-center mb16">
                                 <h2>Our Job Offers</h2>
                                 <h3 class="text-muted">Join us and help disrupt the enterprise market!</h3>
                             </div>
-                            <div class="col-md-12 text-center">
+                            <div class="col-lg-12 text-center">
                                 <p>
                                     Join us, we offer you an extraordinary chance to learn, to
                                     develop and to be part of an exciting experience and
@@ -29,7 +29,7 @@
                     <div class="d-none" id="jobs_grid_left">
 
                     </div>
-                    <div class="col-md-12" id="jobs_grid">
+                    <div class="col-lg-12" id="jobs_grid">
                         <div t-if="not jobs">
                             <div class="text-center text-muted">
                                 <h3 class="css_editable_hidden"><a t-attf-href="/contactus">Contact us</a> for job opportunities.</h3>
@@ -120,47 +120,47 @@
                 <section id="forms">
                     <form action="/website_form/" method="post" class="s_website_form form-horizontal container-fluid mt32" enctype="multipart/form-data" data-model_name="hr.applicant" data-success_page="/job-thank-you" t-att-data-form_field_department_id="job and job.department_id.id or False" t-att-data-form_field_job_id="job and job.id or False">
                         <div class="form-group form-field o_website_form_required_custom">
-                            <div class="col-md-3 col-sm-4 text-right">
+                            <div class="col-lg-3 col-md-4 text-right">
                                 <label class="control-label" for="partner_name">Your Name</label>
                             </div>
-                            <div class="col-md-7 col-sm-8">
+                            <div class="col-lg-7 col-md-8">
                                 <input type="text" class="form-control o_website_form_input" name="partner_name" required=""/>
                             </div>
                         </div>
                         <div class="form-group form-field o_website_form_required_custom">
-                            <div class="col-md-3 col-sm-4 text-right">
+                            <div class="col-lg-3 col-md-4 text-right">
                                 <label class="control-label" for="email_from">Your Email</label>
                             </div>
-                            <div class="col-md-7 col-sm-8">
+                            <div class="col-lg-7 col-md-8">
                                 <input type="email" class="form-control o_website_form_input" name="email_from" required=""/>
                             </div>
                         </div>
                         <div class="form-group form-field o_website_form_required_custom">
-                            <div class="col-md-3 col-sm-4 text-right">
+                            <div class="col-lg-3 col-md-4 text-right">
                                 <label class="control-label" for="partner_phone">Your Phone Number</label>
                             </div>
-                            <div class="col-md-7 col-sm-8">
+                            <div class="col-lg-7 col-md-8">
                                 <input type="text" class="form-control o_website_form_input" name="partner_phone" required=""/>
                             </div>
                         </div>
                         <div class="form-group form-field">
-                            <div class="col-md-3 col-sm-4 text-right">
+                            <div class="col-lg-3 col-md-4 text-right">
                                 <label class="control-label" for="description">Short Introduction</label>
                             </div>
-                            <div class="col-md-7 col-sm-8">
+                            <div class="col-lg-7 col-md-8">
                                 <textarea class="form-control o_website_form_input" name="description"></textarea>
                             </div>
                         </div>
                         <div class="form-group form-field o_website_form_custom">
-                          <div class="col-md-3 col-sm-4 text-right">
+                          <div class="col-lg-3 col-md-4 text-right">
                             <label class="control-label" for="Resume">Resume</label>
                           </div>
-                          <div class="col-md-7 col-sm-8">
+                          <div class="col-lg-7 col-md-8">
                             <input type="file" class="form-control o_website_form_input" name="Resume"/>
                           </div>
                         </div>
                         <div class="form-group">
-                            <div class="col-md-offset-3 col-sm-offset-4 col-sm-8 col-md-7">
+                            <div class="offset-lg-3 offset-md-4 col-md-8 col-lg-7">
                                 <a href="#" role="button" class="btn btn-primary btn-lg o_website_form_send">Submit</a>
                                 <span id="o_website_form_result"></span>
                             </div>
@@ -190,19 +190,19 @@
     <section class="o_tasks">
         <div class="container">
             <div class="row">
-                <div class="col-sm-6 col-md-4">
+                <div class="col-md-6 col-lg-4">
                     <h4><strong>Responsibilities</strong></h4>
                     <p>Full sales cycle</p>
                     <p>Achieve monthly targets</p>
                     <p>US + Canada Territory</p>
                 </div>
-                <div class="col-sm-6 col-md-4">
+                <div class="col-md-6 col-lg-4">
                     <h4><strong>Challenges</strong></h4>
                     <p>Full sales cycle</p>
                     <p>Achieve monthly targets</p>
                     <p>US + Canada Territory</p>
                 </div>
-                <div class="col-sm-6 col-md-4">
+                <div class="col-md-6 col-lg-4">
                     <h4><strong>Must Have</strong></h4>
                     <p>Full sales cycle</p>
                     <p>Achieve monthly targets</p>
@@ -230,7 +230,7 @@
     <section style="border: 0 solid #e3e3e3; border-width: 2px 0;">
         <div class="container">
             <div class="row">
-                <div class="col-sm-6 col-md-4 mt16 mb16">
+                <div class="col-md-6 col-lg-4 mt16 mb16">
                     <div class="s_hr_rating s_hr_rating_stars s_hr_rating_3">
                         <h6 class="mb0">Job Complexity:</h6>
                         <i class="fa"/>
@@ -277,7 +277,7 @@
                         <div class="s_hr_rating_bar"/>
                     </div>
                 </div>
-                <div class="col-sm-6 col-md-4 mt16 mb16">
+                <div class="col-md-6 col-lg-4 mt16 mb16">
                     <h6 class="mb0">Team / Company Size:</h6>
                     <p class="text-uppercase ">10  / 40 people</p>
                     <h6 class="mb0">Avg Deal Size:</h6>
@@ -289,7 +289,7 @@
                     <h6 class="mb0">Company Maturity:</h6>
                     <p class="text-uppercase ">Profitable</p>
                 </div>
-                <div class="col-sm-6 col-md-4 mt16 mb16">
+                <div class="col-md-6 col-lg-4 mt16 mb16">
                     <h3 class="mt0">Need More Info?</h3>
                     <ul>
                         <li><a href="#">The founder’s story</a></li>
@@ -305,43 +305,43 @@
     <section class="o_perk mt16 mb16">
         <div class="container">
             <div class="row">
-                <div class="text-center col-md-3 mt16 mb16">
+                <div class="text-center col-lg-3 mt16 mb16">
                     <h4 class="mb0 mt8"><span class="fa fa-2x fa-heart"/>
                     Benefits</h4>
                     <p>Healthcare, dental, vision, life insurance, Flexible Spending Account (FSA), Health Savings Account (HSA)</p>
                 </div>
-                <div class="text-center col-md-3 mt16 mb16">
+                <div class="text-center col-lg-3 mt16 mb16">
                     <h4 class="mt8 mb0"><span class="fa fa-2x fa-sun-o"/>
                     PTOs</h4>
                     <p>Vacation, Sick, and paid leaves</p>
                 </div>
-                <div class="text-center col-md-3 mt16 mb16">
+                <div class="text-center col-lg-3 mt16 mb16">
                     <h4 class="mt8 mb0"><span class="fa fa-2x fa-car"/>
                     Save on commute</h4>
                     <p>Pre-tax commuter benefitsbr <br/>(parking and transit) </p>
                     </div>
-                <div class="text-center col-md-3 mt16 mb16">
+                <div class="text-center col-lg-3 mt16 mb16">
                     <h4 class="mb0 mt8"><span class="fa fa-2x fa-check-circle"/>
                     Discount Programs</h4>
                     <p>Brand-name product and services in categories like travel, electronics, health, fitness, cellular, and more</p>
                 </div>
             </div><div class="row">
-                <div class="text-center col-md-3 mt16 mb16">
+                <div class="text-center col-lg-3 mt16 mb16">
                     <h4 class="mb0 mt8"><span class="fa fa-2x fa-map-marker"/>
                     Prime location</h4>
                     <p>Only a couple blocs from BART, Caltrain, Highway 101, carpool pickup, and Bay Bridge.</p>
                 </div>
-                <div class="text-center col-md-3 mt16 mb16">
+                <div class="text-center col-lg-3 mt16 mb16">
                     <h4 class="mt8 mb0"><span class="fa fa-2x fa-calendar"/>
                     Sponsored Events</h4>
                     <p>Tuesday Dinners, Monthly Lunch Mixers, Monthly Happy Hour, Annual day event</p>
                 </div>
-                <div class="text-center col-md-3 mt16 mb16">
+                <div class="text-center col-lg-3 mt16 mb16">
                     <h4 class="mt8 mb0"><span class="fa fa-2x fa-futbol-o"/>
                     Sport Activity</h4>
                     <p>Play any sport with colleagues and the bill is covered</p>
                     </div>
-                <div class="text-center col-md-3 mt16 mb16">
+                <div class="text-center col-lg-3 mt16 mb16">
                     <h4 class="mb0 mt8"><span class="fa fa-2x fa-coffee"/>
                     Eat &amp; Drink</h4>
                     <p>Peet's and Philz coffee provided all day to order and pantry snacks</p>
@@ -354,24 +354,24 @@
     <section class="mt16 mb16">
         <div class="container">
             <div class="row">
-                <div class="col-sm-12 col-md-6 mt16 mb16">
+                <div class="col-md-12 col-lg-6 mt16 mb16">
                     <img alt="" class="img img-fluid" src="/website_hr_recruitment/static/src/img/job_image_3.jpg"/>
                 </div>
-                <div class="col-sm-6 col-md-3 mt16 mb16">
+                <div class="col-md-6 col-lg-3 mt16 mb16">
                     <img alt="" class="img img-fluid" src="/website_hr_recruitment/static/src/img/job_image_2.jpg"/>
                 </div>
-                <div class="col-sm-6 col-md-3 mt16 mb16">
+                <div class="col-md-6 col-lg-3 mt16 mb16">
                     <img alt="" class="img img-fluid" src="/website_hr_recruitment/static/src/img/job_image_4.jpg"/>
                 </div>
             </div>
             <div class="row">
-                <div class="col-sm-6 col-md-3 mt16 mb16">
+                <div class="col-md-6 col-lg-3 mt16 mb16">
                     <img alt="" class="img img-fluid" src="/website_hr_recruitment/static/src/img/job_image_6.jpg"/>
                 </div>
-                <div class="col-sm-6 col-md-3 mt16 mb16">
+                <div class="col-md-6 col-lg-3 mt16 mb16">
                     <img alt="" class="img img-fluid" src="/website_hr_recruitment/static/src/img/job_image_5.jpg"/>
                 </div>
-                <div class="col-sm-12 col-md-6 mt16 mb16">
+                <div class="col-md-12 col-lg-6 mt16 mb16">
                     <img alt="" class="img img-fluid" src="/website_hr_recruitment/static/src/img/job_image_1.jpg"/>
                 </div>
             </div>
@@ -392,7 +392,7 @@
                     <div class="oe_structure">
                         <div class="container">
                             <div class="row">
-                                <div class="col-md-12">
+                                <div class="col-lg-12">
                                     <h1 class="text-center">Congratulations!</h1>
                                     <p class="text-center">
                                         Your application has been posted successfully.
@@ -403,13 +403,13 @@
                                     <t t-set="responsible" t-value="job and job.user_id.website_published and job.user_id "/>
                                 </t>
                                 <t t-if="responsible">
-                                    <div class="col-md-12">
+                                    <div class="col-lg-12">
                                         <h3 class="mb32 text-center">Your application has been sent to:</h3>
                                     </div>
-                                    <div class="col-md-1 col-md-offset-4">
+                                    <div class="col-lg-1 offset-lg-4">
                                         <p t-field="responsible.image_small" t-field-options="{'widget': 'image', 'class': 'img-circle center-block'}"/>
                                     </div>
-                                    <div class="col-md-5 o_responsible_data">
+                                    <div class="col-lg-5 o_responsible_data">
                                         <h4 class="mt0" t-field="responsible.name"/>
                                         <p t-field="responsible.function"/>
                                         <t t-if='responsible.email'>
@@ -419,7 +419,7 @@
                                             <br/><i class="fa fa-phone" role="img" aria-label="Phone" title="Phone"></i> <span t-field="responsible.phone"/>
                                         </t>
                                     </div>
-                                    <div class="col-md-12 mt32 text-center">
+                                    <div class="col-lg-12 mt32 text-center">
                                         <span>
                                             We usually reply between one and three days.<br/>
                                             Feel free to contact him/her if you have further questions.
@@ -428,7 +428,7 @@
                                 </t>
                             </div>
                             <div class="row" id="o_recruitment_thank_cta">
-                                <div class="col-md-12 text-center mt32 mb32">
+                                <div class="col-lg-12 text-center mt32 mb32">
                                     In the meantime,
                                     <h3 class="mt8 mb32">Look around on our website:</h3>
                                     <a role="button" href="/" class="btn btn-primary btn-lg">Continue To Our Website</a>
@@ -455,10 +455,10 @@
         </ul>
     </xpath>
     <xpath expr="//div[@id='jobs_grid_left']" position="attributes">
-        <attribute name="class">col-md-3</attribute>
+        <attribute name="class">col-lg-3</attribute>
     </xpath>
     <xpath expr="//div[@id='jobs_grid']" position="attributes">
-        <attribute name="class">col-md-9</attribute>
+        <attribute name="class">col-lg-9</attribute>
     </xpath>
 </template>
 
@@ -474,10 +474,10 @@
         </ul>
     </xpath>
     <xpath expr="//div[@id='jobs_grid_left']" position="attributes">
-        <attribute name="class">col-md-3</attribute>
+        <attribute name="class">col-lg-3</attribute>
     </xpath>
     <xpath expr="//div[@id='jobs_grid']" position="attributes">
-        <attribute name="class">col-md-9</attribute>
+        <attribute name="class">col-lg-9</attribute>
     </xpath>
 </template>
 
@@ -498,10 +498,10 @@
         </ul>
     </xpath>
     <xpath expr="//div[@id='jobs_grid_left']" position="attributes">
-        <attribute name="class">col-md-3</attribute>
+        <attribute name="class">col-lg-3</attribute>
     </xpath>
     <xpath expr="//div[@id='jobs_grid']" position="attributes">
-        <attribute name="class">col-md-9</attribute>
+        <attribute name="class">col-lg-9</attribute>
     </xpath>
 </template>
 
diff --git a/addons/website_links/static/src/xml/recent_link.xml b/addons/website_links/static/src/xml/recent_link.xml
index 6fd5fffb1dd..5e3b328a9a4 100644
--- a/addons/website_links/static/src/xml/recent_link.xml
+++ b/addons/website_links/static/src/xml/recent_link.xml
@@ -3,11 +3,11 @@
 <templates id="template" xml:space="preserve">
     <t t-name="website_links.RecentLink">
         <div class="row mb16">
-            <div class="col-sm-1 col-xs-2 text-center">
+            <div class="col-md-1 col-2 text-center">
                 <h4><t t-esc="widget.link_obj.count"/></h4>
                 <p class="text-muted" style="margin-top: -5px;">clicks</p>
             </div>
-            <div class="col-sm-7 col-xs-7">
+            <div class="col-md-7 col-7">
                 
                 <h4 class="truncate_text">
                     <img t-att-src="widget.link_obj.icon_src" alt="Icon"/> 
@@ -33,7 +33,7 @@
                 <p class='o_website_links_code_error' style='color:red;font-weight:bold;'></p>
             </div>
 
-            <div class="col-sm-4 col-xs-2">
+            <div class="col-md-4 col-2">
                 <button class="btn btn-info btn_shorten_url_clipboard mt8" t-att-data-clipboard-text="widget.link_obj.short_url">Copy</button>
                 <a role="button" t-attf-href="{{widget.link_obj.short_url}}+" class="btn btn-warning mt8">Stats</a>
             </div>
diff --git a/addons/website_links/views/website_links_graphs.xml b/addons/website_links/views/website_links_graphs.xml
index eb0e4ce22ef..772d6787e39 100644
--- a/addons/website_links/views/website_links_graphs.xml
+++ b/addons/website_links/views/website_links_graphs.xml
@@ -16,7 +16,7 @@
                 <div class="o_website_links_chart">
                     <div class="container">
                         <div class="row mt8">
-                            <div class="col-sm-12">
+                            <div class="col-md-12">
                                 <ol class="breadcrumb">
                                   <li class="breadcrumb-item"><a href="/r">Link Tracker</a></li>
                                   <li class="breadcrumb-item active"><t t-esc="title"/></li>
@@ -30,21 +30,21 @@
                         <h1 class="page-header mt0"><t t-esc="title"/></h1>
 
                         <div class="row">
-                            <div class="col-sm-8">
+                            <div class="col-md-8">
                                 <div class="row">
-                                    <div class="col-sm-4 col-xs-11">
+                                    <div class="col-md-4 col-11">
                                         <p><strong>Original URL</strong></p>
                                     </div>
-                                    <div class="col-sm-8 col-xs-11">
+                                    <div class="col-md-8 col-11">
                                         <p class="truncate_text"><a t-att-href="url"><t t-esc="url"/></a></p>
                                     </div>
                                 </div>
 
                                 <div class="row">
-                                    <div class="col-sm-4">
+                                    <div class="col-md-4">
                                         <p><strong>Tracked Link</strong></p>
                                     </div>
-                                    <div class="col-sm-8">
+                                    <div class="col-md-8">
                                         <p>
                                             <span class="o_website_links_short_url" id="short_url"><span id="short-url-host"><t t-esc="short_url_host"/></span><span id="o_website_links_code"><t t-esc="code"/></span></span>
                                             <span class="o_website_links_edit_tools" style="display:none;">
@@ -60,21 +60,21 @@
                                 </div>
 
                                 <div class="row">
-                                    <div class="col-sm-4 col-xs-12">
+                                    <div class="col-md-4 col-12">
                                         <p><strong>Redirected URL</strong></p>
                                     </div>
-                                    <div class="col-sm-8 col-xs-11" style="word-wrap:break-word;">
+                                    <div class="col-md-8 col-11" style="word-wrap:break-word;">
                                         <t t-esc="redirected_url"/>
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-sm-4">
+                            <div class="col-md-4">
                                 <t t-if="campaign_id">
                                     <div class="row">
-                                        <div class="col-sm-4">
+                                        <div class="col-md-4">
                                             <p><strong>Campaign</strong></p>
                                         </div>
-                                        <div class="col-sm-8">
+                                        <div class="col-md-8">
                                             <p><t t-esc="campaign_id[1]"/></p>
                                         </div>
                                     </div>
@@ -82,10 +82,10 @@
 
                                 <t t-if="medium_id">
                                     <div class="row">
-                                        <div class="col-sm-4">
+                                        <div class="col-md-4">
                                             <p><strong>Medium</strong></p>
                                         </div>
-                                        <div class="col-sm-8">
+                                        <div class="col-md-8">
                                             <p><t t-esc="medium_id[1]"/></p>
                                         </div>
                                     </div>
@@ -93,10 +93,10 @@
 
                                 <t t-if="source_id">
                                     <div class="row">
-                                        <div class="col-sm-4">
+                                        <div class="col-md-4">
                                             <p><strong>Source</strong></p>
                                         </div>
-                                        <div class="col-sm-8">
+                                        <div class="col-md-8">
                                             <p><t t-esc="source_id[1]"/></p>
                                         </div>
                                     </div>
@@ -115,17 +115,17 @@
                         </h1>
 
                         <div class="row">
-                            <div class="col-sm-12 mb8">
+                            <div class="col-md-12 mb8">
                                 <div class="tab-content">
 
                                     <!-- All Time Charts -->
                                     <div role="tabpanel" class="tab-pane active" id="all_time_charts">
                                         <div class="row">
-                                            <div class="col-sm-7 website_links_click_chart" id="all_time_clicks_chart">
+                                            <div class="col-md-7 website_links_click_chart" id="all_time_clicks_chart">
                                                 <h3 class="title"></h3>
                                                 <svg style="height:20em;"></svg>
                                             </div>
-                                            <div class="col-sm-5 website_links_click_chart" id="all_time_countries_charts">
+                                            <div class="col-md-5 website_links_click_chart" id="all_time_countries_charts">
                                                 <h3 class="title"></h3>
                                                 <svg style="height:20em;"></svg>
                                             </div>
@@ -135,11 +135,11 @@
                                     <!-- Last Month Charts -->
                                     <div role="tabpanel" class="tab-pane" id="last_month_charts">
                                         <div class="row">
-                                            <div class="col-sm-7 website_links_click_chart" id="last_month_clicks_chart">
+                                            <div class="col-md-7 website_links_click_chart" id="last_month_clicks_chart">
                                                 <h3 class="title"></h3>
                                                 <svg style="height:20em;"></svg>
                                             </div>
-                                            <div class="col-sm-5 website_links_click_chart" id="last_month_countries_charts">
+                                            <div class="col-md-5 website_links_click_chart" id="last_month_countries_charts">
                                                 <h3 class="title"></h3>
                                                 <svg style="height:20em;"></svg>
                                             </div>
@@ -149,11 +149,11 @@
                                     <!-- Last Week Charts -->
                                     <div role="tabpanel" class="tab-pane" id="last_week_charts">
                                         <div class="row">
-                                            <div class="col-sm-7 website_links_click_chart" id="last_week_clicks_chart">
+                                            <div class="col-md-7 website_links_click_chart" id="last_week_clicks_chart">
                                                 <h3 class="title"></h3>
                                                 <svg style="height:20em;"></svg>
                                             </div>
-                                            <div class="col-sm-5 website_links_click_chart" id="last_week_countries_charts">
+                                            <div class="col-md-5 website_links_click_chart" id="last_week_countries_charts">
                                                 <h3 class="title"></h3>
                                                 <svg style="height:20em;"></svg>
                                             </div>
diff --git a/addons/website_links/views/website_links_template.xml b/addons/website_links/views/website_links_template.xml
index 04614feb8eb..370ab1687ed 100644
--- a/addons/website_links/views/website_links_template.xml
+++ b/addons/website_links/views/website_links_template.xml
@@ -32,45 +32,45 @@
                     <div class="notification"></div>
 
                     <div class="row">
-                        <div class="col-sm-7">
+                        <div class="col-md-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>
+                                    <label class="col-md-3 control-label text-left">URL</label>
 
-                                    <div class="col-sm-9">
+                                    <div class="col-md-9">
                                         <input type="text" id="url" class="form-control required-form-control"  required="True" placeholder="e.g. https://www.odoo.com/page/contactus" t-att-value="u"/>
                                     </div>
                                 </div>
 
                                 <div class="o_website_links_utm_forms">
                                     <div class="form-group">
-                                        <label class="col-sm-3 control-label">Campaign <i class="fa fa-info-circle" data-toggle="tooltip" data-placement="top" role="img" aria-label="Tooltip info" title="Defines the context of your link. It might be an event you want to promote or a special promotion."></i></label>
+                                        <label class="col-md-3 control-label">Campaign <i class="fa fa-info-circle" data-toggle="tooltip" data-placement="top" role="img" aria-label="Tooltip info" title="Defines the context of your link. It might be an event you want to promote or a special promotion."></i></label>
 
-                                        <div class="col-sm-9">
+                                        <div class="col-md-9">
                                             <input type="hidden" class="form-control" id="campaign-select"/>
                                         </div>
                                     </div>
 
                                     <div class="form-group">
-                                        <label class="col-sm-3 control-label">Medium <i class="fa fa-info-circle" data-toggle="tooltip" data-placement="top" role="img" aria-label="Tooltip info" title="Defines the medium used to share your link. It might be an email, or a Facebook Ads for instance."></i></label>
+                                        <label class="col-md-3 control-label">Medium <i class="fa fa-info-circle" data-toggle="tooltip" data-placement="top" role="img" aria-label="Tooltip info" title="Defines the medium used to share your link. It might be an email, or a Facebook Ads for instance."></i></label>
 
-                                        <div class="col-sm-9">
+                                        <div class="col-md-9">
                                             <input type="hidden" class="form-control" id="channel-select" />
                                         </div>
                                     </div>
 
                                     <div class="form-group">
-                                        <label class="col-sm-3 control-label">Source <i class="fa fa-info-circle" data-toggle="tooltip" data-placement="top" role="img" aria-label="Tooltip info" title="Defines the source from which your traffic will come from, Facebook or Twitter for instance."></i></label>
+                                        <label class="col-md-3 control-label">Source <i class="fa fa-info-circle" data-toggle="tooltip" data-placement="top" role="img" aria-label="Tooltip info" title="Defines the source from which your traffic will come from, Facebook or Twitter for instance."></i></label>
 
-                                        <div class="col-sm-9">
+                                        <div class="col-md-9">
                                             <input type="hidden" class="form-control" id="source-select" />
                                         </div>
                                     </div>
                                 </div>
 
                                 <div class="form-group">
-                                    <div class="col-sm-offset-3 col-sm-9">
+                                    <div class="offset-md-3 col-md-9">
                                         <button type="submit" class="btn btn-primary" id="btn_shorten_url" data-clipboard-text="">Get tracked link</button>
 
                                         <span id="generated_tracked_link" style="display:none;" class="text-muted"></span>
@@ -79,7 +79,7 @@
                             </form>
                         </div>
 
-                        <div class="col-sm-offset-1 col-sm-3 d-none d-md-block">
+                        <div class="offset-md-1 col-md-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>
diff --git a/addons/website_livechat/views/res_config_settings_views.xml b/addons/website_livechat/views/res_config_settings_views.xml
index 6608a3f5c2d..db77ff3203c 100644
--- a/addons/website_livechat/views/res_config_settings_views.xml
+++ b/addons/website_livechat/views/res_config_settings_views.xml
@@ -7,7 +7,7 @@
         <field name="inherit_id" ref="website.res_config_settings_view_form"/>
         <field name="arch" type="xml">
             <div id="languages_setting" position="after">
-                <div class="col-xs-12 col-md-6 o_setting_box" id="live_chat_install_setting">
+                <div class="col-12 col-lg-6 o_setting_box" id="live_chat_install_setting">
                     <div class="o_setting_right_pane">
                         <span class="o_form_label">Live Chat</span>
                         <div class="text-muted">
@@ -15,7 +15,7 @@
                         </div>
                         <div class="content-group mt16">
                             <div class="row">
-                                <label class="col-md-3 o_light_label" string="Channel" for="channel_id"/>
+                                <label class="col-lg-3 o_light_label" string="Channel" for="channel_id"/>
                                 <field name="channel_id" class="oe_inline"/>
                             </div>
                         </div>
diff --git a/addons/website_livechat/views/website_livechat.xml b/addons/website_livechat/views/website_livechat.xml
index 8adf8c07555..343730c643a 100644
--- a/addons/website_livechat/views/website_livechat.xml
+++ b/addons/website_livechat/views/website_livechat.xml
@@ -54,12 +54,12 @@
                     <h1><span>Livechat Channel</span>  <small t-field="channel.name" /></h1>
                     <div t-field="channel.website_description" class="oe_structure mt16" />
                     <div class="row mt32">
-                        <div class="col-md-8">
+                        <div class="col-lg-8">
                             <t t-if="len(ratings) &gt; 0">
                                 <div class="row">
                                     <h3>Statistics</h3>
                                     <div class="row">
-                                        <div class="col-md-3">
+                                        <div class="col-lg-3">
                                             <div class="panel panel-warming">
                                                 <div class="panel-body text-center bg-warning">
                                                     <img src="/rating/static/src/img/rating_5.png" style="height:50px" alt="Neutral face"/>
@@ -74,7 +74,7 @@
                                                 </div>
                                             </div>
                                         </div>
-                                        <div class="col-md-4">
+                                        <div class="col-lg-4">
                                             <div class="panel panel-success">
                                                 <div class="panel-body text-center bg-success">
                                                     <img src="/rating/static/src/img/rating_10.png" style="height:60px" alt="Happy face"/>
@@ -89,7 +89,7 @@
                                                 </div>
                                             </div>
                                         </div>
-                                        <div class="col-md-3">
+                                        <div class="col-lg-3">
                                             <div class="panel panel-danger">
                                                 <div class="panel-body text-center bg-danger">
                                                     <img src="/rating/static/src/img/rating_1.png" style="height:40px" alt="Sad face"/>
@@ -107,7 +107,7 @@
                                     </div>
                                 </div>
                                 <div class="row">
-                                    <div class="col-md-12 mb32">
+                                    <div class="col-lg-12 mb32">
                                         <h3>The <t t-esc="len(ratings)"/> last feedbacks</h3>
                                         <div style="text-align:center">
                                             <t t-foreach="ratings" t-as="rating" class="media">
@@ -124,7 +124,7 @@
                                 <h4 style="text-align:center">This is no rating for this channel for now.</h4>
                             </t>
                         </div>
-                        <div class="col-md-4 mb32">
+                        <div class="col-lg-4 mb32">
                             <h3>The Team</h3>
                             <t t-foreach="team" t-as="user" class="media">
                                 <div class="media">
@@ -153,12 +153,12 @@
                         <h1>Livechat Support Channels</h1>
                         <div class="row mt32 mb32">
                             <t t-if="not len(channels)">
-                                <div class="col-md-6 col-md-offset-3">
+                                <div class="col-lg-6 offset-lg-3">
                                     There is no public livechat channel to show.
                                 </div>
                             </t>
                             <t t-if="len(channels)">
-                                <div class="col-md-6 col-md-offset-3">
+                                <div class="col-lg-6 offset-lg-3">
                                     <t t-foreach="channels" t-as="channel">
                                         <div class="media">
                                             <a class="pull-left" t-attf-href="/livechat/channel/#{ slug(channel)}">
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 82719db275b..2bc25de07c4 100644
--- a/addons/website_mail_channel/views/website_mail_channel_templates.xml
+++ b/addons/website_mail_channel/views/website_mail_channel_templates.xml
@@ -28,11 +28,11 @@
             </section>
         </div>
         <div class="container mt32">
-            <div t-if="'unsubscribe' in request.params" class="col-md-offset-9 col-md-3 alert alert-info" role="status">
+            <div t-if="'unsubscribe' in request.params" class="offset-lg-9 col-lg-3 alert alert-info" role="status">
                <h3>Need to unsubscribe? It's right here! <span class="fa fa-2x fa-arrow-down pull-right" role="img" aria-label="" title="Read this !"></span></h3>
             </div>
             <div class="row mt8" t-foreach="groups" t-as="group">
-                <div class="col-md-3">
+                <div class="col-lg-3">
                     <img t-att-src="website.image_url(group, 'image_small')" class="pull-left" alt="Group"/>
                     <strong><a t-attf-href="/groups/#{ slug(group) }" t-esc="group.name"/></strong><br />
                     <t t-if="group.alias_id and group.alias_id.alias_name and group.alias_id.alias_domain">
@@ -40,14 +40,14 @@
                         <a t-attf-href="mailto:#{group.alias_id.alias_name}@#{group.alias_id.alias_domain}"><span t-field="group.alias_id"/></a>
                     </t>
                 </div>
-                <div class="col-md-4">
+                <div class="col-lg-4">
                     <div t-esc="group.description" class="text-muted"/>
                 </div>
-                <div class="col-md-2">
+                <div class="col-lg-2">
                     <i class='fa fa-fw fa-user' role="img" aria-label="Recipients" title="Recipients"/> <t t-esc="group_data[group.id]['members_count']"/> members<br />
                     <i class='fa fa-fw fa-envelope-o' role="img" aria-label="Traffic" title="Traffic"/> <t t-raw="group_data[group.id]['monthly_message_nbr']"/> messages / month
                 </div>
-                <div class="col-md-3">
+                <div class="col-lg-3">
                     <!--<t t-call="website_mail.follow"><t t-set="object" t-value="group"/></t>-->
 
                     <div class="js_follow_alias"
@@ -93,7 +93,7 @@
                 </ol>
             </div>
             <div class="row">
-                <div class="col-md-12">
+                <div class="col-lg-12">
                     <h1 class="text-center">
                         <t t-esc="group.name"/> mailing list archives
                     </h1><h4 class="text-center text-muted" t-if="group.alias_id and group.alias_id.alias_name and group.alias_id.alias_domain">
@@ -101,7 +101,7 @@
                         <a t-attf-href="mailto:#{group.alias_id.alias_name}@#{group.alias_id.alias_domain}"><span t-field="group.alias_id"/></a>
                     </h4>
                 </div>
-                <div class="col-md-3">
+                <div class="col-lg-3">
                     <h2>Archives</h2>
                     <ul class="nav nav-pills flex-column" id="group_mode">
                         <li class="nav-item">
@@ -123,7 +123,7 @@
                         </li>
                     </ul>
                 </div>
-                <div class="col-md-9">
+                <div class="col-lg-9">
                     <div>
                         <t t-call="website.pager"/>
                     </div>
@@ -163,7 +163,7 @@
                 </h4>
             </div>
             <div class="row">
-                <div class="col-md-3">
+                <div class="col-lg-3">
                     <h4>Browse archives</h4>
                     <ul class="nav nav-pills flex-column" id="group_mode">
                         <li class="nav-item">
@@ -185,14 +185,14 @@
                         </li>
                     </ul>
                 </div>
-                <div class="col-md-9">
+                <div class="col-lg-9">
                     <div class="row">
-                        <h4 class="col-md-6">
+                        <h4 class="col-lg-6">
                             <t t-if="prev_message"><a t-attf-href='/groups/#{slug(group)}/#{slug(prev_message)}?#{mode and "mode=%s" % mode or ""}'>
                                 <i class="fa fa-arrow-left" role="img" aria-label="Previous message" title="Previous message"/> <t t-esc="prev_message.description"/>
                             </a></t>
                         </h4>
-                        <h4 class="col-md-6">
+                        <h4 class="col-lg-6">
                             <t t-if="next_message"><a class="pull-right" t-attf-href='/groups/#{slug(group)}/#{slug(next_message)}?#{mode and "mode=%s" % mode or ""}'>
                                 <t t-esc="next_message.description"/> <i class="fa fa-arrow-right" role="img" aria-label="Next message" title="Next message"/>
                             </a></t>
@@ -226,7 +226,7 @@
                                     </a>
                                 </p>
                                 <div class="o_mg_link_content">
-                                    <div class="col-md-2 col-sm-3 text-center" t-foreach='message.attachment_ids' t-as='attachment'>
+                                    <div class="col-lg-2 col-md-3 text-center" t-foreach='message.attachment_ids' t-as='attachment'>
                                         <a t-attf-href="/web/content/#{attachment.id}?download=true" target="_blank">
                                             <div class='oe_attachment_embedded o_image' t-att-title="attachment.name" t-att-data-mimetype="attachment.mimetype" t-attf-data-src="/web/image/#{attachment.id}/100x80"/>
                                             <div class='oe_attachment_name'><t t-raw='attachment.name' /></div>
diff --git a/addons/website_mass_mailing/views/res_config_settings_views.xml b/addons/website_mass_mailing/views/res_config_settings_views.xml
index d8c330d2050..16cbcbeda83 100644
--- a/addons/website_mass_mailing/views/res_config_settings_views.xml
+++ b/addons/website_mass_mailing/views/res_config_settings_views.xml
@@ -6,7 +6,7 @@
         <field name="model">res.config.settings</field>
         <field name="arch" type="xml">
             <xpath expr="//div[@id='mailing_list']" position="inside">
-                <div class="col-md-6 o_setting_box col-xs-12" title="This adds a new Newsletter Popup snippet to drag &amp; drop on your website pages. It triggers a popup when visitors land on the page. This popup prompts them to enter their email address to join a mailing list.">
+                <div class="col-lg-6 o_setting_box col-12" title="This adds a new Newsletter Popup snippet to drag &amp; drop on your website pages. It triggers a popup when visitors land on the page. This popup prompts them to enter their email address to join a mailing list.">
                     <div class="o_setting_left_pane">
                         <field name="group_website_popup_on_exit"/>
                     </div>
diff --git a/addons/website_mass_mailing/views/unsubscribe_templates.xml b/addons/website_mass_mailing/views/unsubscribe_templates.xml
index f523b5b7ab4..68527e9d8d1 100644
--- a/addons/website_mass_mailing/views/unsubscribe_templates.xml
+++ b/addons/website_mass_mailing/views/unsubscribe_templates.xml
@@ -8,7 +8,7 @@
                     <input type="hidden" name="email" t-att-value="email"/>
                     <input type="hidden" name="mailing_id" t-att-value="mailing_id"/>
 
-                    <div class="col-md-6 col-md-offset-3">
+                    <div class="col-lg-6 offset-lg-3">
 
                         <h1 class="page-header">Mailing Subscriptions</h1>
 
@@ -48,7 +48,7 @@
     <template id="unsubscribed">
         <div class="container mt8">
             <div class="row">
-                <div class="col-md-6 col-md-offset-3">
+                <div class="col-lg-6 offset-lg-3">
                     <h1 class="page-header">Mailing Subscriptions</h1>
 
                     <div class="alert alert-success text-center" role="status">
diff --git a/addons/website_membership/views/website_membership_templates.xml b/addons/website_membership/views/website_membership_templates.xml
index b8a527ddf5e..ee317698c1a 100644
--- a/addons/website_membership/views/website_membership_templates.xml
+++ b/addons/website_membership/views/website_membership_templates.xml
@@ -9,7 +9,7 @@
                 <section>
                     <div class="container">
                         <div class="row">
-                            <div class="col-md-12">
+                            <div class="col-lg-12">
                                 <h1 class="text-center">Our Members Directory</h1>
                                 <h3 class="text-muted text-center">Find a business partner</h3>
                             </div>
@@ -20,7 +20,7 @@
             <div class="container">
                 <div class="row">
 
-            <div class="col-md-3 mb32" id="left_column">
+            <div class="col-lg-3 mb32" id="left_column">
                 <ul class="nav nav-pills flex-column mt16">
                     <li class="nav-header nav-item"><h3>Associations</h3></li>
                     <li class="nav-item"><a href="/members" class="nav-link#{'' if membership_id else ' active'}">All</a></li>
@@ -32,7 +32,7 @@
                     </t>
                 </ul>
             </div>
-            <div class="col-md-8" id="ref_content">
+            <div class="col-lg-8" id="ref_content">
                 <div class='navbar'>
                     <t t-call="website.pager">
                        <t t-set="classname">pull-left</t>
diff --git a/addons/website_partner/views/website_partner_templates.xml b/addons/website_partner/views/website_partner_templates.xml
index e15dcf3ca66..3053411e9df 100644
--- a/addons/website_partner/views/website_partner_templates.xml
+++ b/addons/website_partner/views/website_partner_templates.xml
@@ -15,8 +15,8 @@
 </template>
 
 <template id="partner_detail" name="Partner Details">
-    <h1 class="col-md-12 text-center" id="partner_name" t-field="partner.display_name"/>
-    <div class="col-md-4">
+    <h1 class="col-lg-12 text-center" id="partner_name" t-field="partner.display_name"/>
+    <div class="col-lg-4">
         <div t-field="partner.image" t-options='{"widget": "image", "class": "center-block mb16", "max_width": 512, "avoid_if_small": True}'/>
         <address class="well">
              <div t-field="partner.self" t-options='{
@@ -26,7 +26,7 @@
         </address>
         <t t-raw="left_column or ''"/>
     </div>
-    <div class="col-md-8 mt32">
+    <div class="col-lg-8 mt32">
         <t t-if="partner">
             <div t-field="partner.website_description"/>
             <t groups="website.group_website_publisher">
diff --git a/addons/website_quote/data/website_quote_data.xml b/addons/website_quote/data/website_quote_data.xml
index 7ed587e5167..eee83f616dd 100644
--- a/addons/website_quote/data/website_quote_data.xml
+++ b/addons/website_quote/data/website_quote_data.xml
@@ -12,7 +12,7 @@
                 </section>
                 <section data-snippet-id="text-block">
                     <div class="row">
-                        <div class="col-md-12">
+                        <div class="col-lg-12">
                             <p>
                                 This is a <strong>sample quotation template</strong>. You should
                                 customize it to fit your own needs from the <i>Sale</i>
@@ -30,7 +30,7 @@
                 </section>
                 <section data-snippet-id="quality">
                     <div class="row mt32">
-                        <div class="col-md-4">
+                        <div class="col-lg-4">
                             <div class="panel panel-info">
                                 <div class="panel-heading">
                                    <center><h3 class="panel-title">Our Quality</h3></center>
@@ -44,7 +44,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="col-md-4">
+                        <div class="col-lg-4">
                             <div class="panel panel-info">
                                 <div class="panel-heading">
                                    <center><h3 class="panel-title">Our Service</h3></center>
@@ -58,7 +58,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="col-md-4">
+                        <div class="col-lg-4">
                             <div class="panel panel-info">
                                 <div class="panel-heading">
                                    <center><h3 class="panel-title">Price</h3></center>
diff --git a/addons/website_quote/views/website_quote_templates.xml b/addons/website_quote/views/website_quote_templates.xml
index 60f43f024f9..4230b76416c 100644
--- a/addons/website_quote/views/website_quote_templates.xml
+++ b/addons/website_quote/views/website_quote_templates.xml
@@ -128,7 +128,7 @@
 
           <div class="clearfix">
             <div id="total" class="row" name="total">
-              <div t-attf-class="col-sm-4 pull-right #{'col-xs-4' if not type_html else ''}">
+              <div t-attf-class="col-md-4 pull-right #{'col-4' if not type_html else ''}">
                 <table class="table table-condensed" style="min-width: 250px;max-width: 400px;">
                   <tr class="border-black" style="border-bottom:1px solid #dddddd;">
                     <td><strong>Subtotal</strong></td>
@@ -182,13 +182,13 @@
 
   <template id="signature" name="Signature">
       <div t-if="quotation.signature" class="row mt64" name="signature">
-          <div class="col-xs-offset-8 col-xs-4">
+          <div class="offset-8 col-4">
               <strong>Signature</strong>
           </div>
-          <div class="col-xs-offset-8 col-xs-4">
+          <div class="offset-8 col-4">
               <img t-att-src="'data:image/png;base64,%s' % to_text(quotation.signature)" style="max-height: 4cm; max-width: 8cm;"/>
           </div>
-          <div class="col-xs-offset-8 col-xs-4 text-center">
+          <div class="offset-8 col-4 text-center">
               <p t-field="quotation.signed_by"/>
           </div>
       </div>
@@ -248,7 +248,7 @@
             <div class="container o_website_quote">
               <div class="row mt16">
                 <!-- Sidebar -->
-                  <div class="col-md-3 d-print-none">
+                  <div class="col-lg-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">
@@ -318,7 +318,7 @@
                       </div>
                   </div>
                   <!-- Page content -->
-                  <div id="quote_content" class="col-md-9">
+                  <div id="quote_content" class="col-lg-9">
 
                       <div class="alert alert-success alert-dismissable" t-if="message==1" role="status">
                           <button type="button" class="close" data-dismiss="alert" aria-label="Close">&amp;times;</button>
@@ -390,7 +390,7 @@
                             </p>
                         </main>
                         <footer class="modal-footer">
-                            <div t-if="pms or s2s_acquirers or form_acquirers" id="payment_method" class="text-left col-md-13">
+                            <div t-if="pms or s2s_acquirers or form_acquirers" id="payment_method" class="text-left">
                                 <h3 class="mb24">Pay with</h3>
                                 <t t-call="payment.payment_tokens_list">
                                     <t t-set="mode" t-value="'payment'"/>
@@ -451,7 +451,7 @@
                           </a>
                       </div>
 
-                  </div><!-- //col-md-9 -->
+                  </div><!-- //col-lg-9 -->
               </div>
             </div>
         </body>
@@ -506,16 +506,16 @@
       </div>
       <!-- Informations -->
       <div class="row mt32">
-          <div class="col-sm-6 col-xs-12">
+          <div class="col-md-6 col-12">
               <div class="row">
-                  <label class="col-sm-4 col-xs-4 text-right">Customer:</label>
-                  <div class="col-sm-8 col-xs-8">
+                  <label class="col-md-4 col-4 text-right">Customer:</label>
+                  <div class="col-md-8 col-8">
                       <div t-field="quotation.partner_id"/>
                   </div>
               </div>
               <div class="row">
-                  <label class="col-sm-4 col-xs-4 text-right">Bill To:</label>
-                  <div class="col-sm-8 col-xs-8">
+                  <label class="col-md-4 col-4 text-right">Bill To:</label>
+                  <div class="col-md-8 col-8">
                       <div t-field="quotation.partner_invoice_id" t-options='{
                           "widget": "contact",
                           "fields": ["address", "name", "phone", "email"]
@@ -523,8 +523,8 @@
                   </div>
               </div>
               <div t-if="quotation.partner_shipping_id.id != quotation.partner_invoice_id.id" class="row">
-                  <label class="col-sm-4 col-xs-4 text-right">Ship To:</label>
-                  <div class="col-sm-8 col-xs-8">
+                  <label class="col-md-4 col-4 text-right">Ship To:</label>
+                  <div class="col-md-8 col-8">
                       <div t-field="quotation.partner_shipping_id" t-options='{
                         "widget": "contact",
                         "fields": ["address", "name", "phone"]
@@ -532,10 +532,10 @@
                   </div>
               </div>
           </div>
-          <div class="col-sm-6 col-xs-12">
+          <div class="col-md-6 col-12">
               <div class="row">
-                  <label class="col-sm-5 col-xs-4 text-right">Your Contact:</label>
-                  <div class="col-sm-7 col-xs-8">
+                  <label class="col-md-5 col-4 text-right">Your Contact:</label>
+                  <div class="col-md-7 col-8">
                       <div t-field="quotation.user_id" t-options='{
                           "widget": "contact",
                           "fields": ["name", "phone", "email"]
@@ -543,28 +543,28 @@
                   </div>
               </div>
               <div class="row">
-                  <label class="col-sm-5 col-xs-4 text-right">Quote Date:</label>
-                  <div class="col-sm-7 col-xs-8">
+                  <label class="col-md-5 col-4 text-right">Quote Date:</label>
+                  <div class="col-md-7 col-8">
                       <span t-field="quotation.date_order"/>
                   </div>
                   <div class="clearfix"/>
                   <div t-if="quotation.validity_date and quotation.state in ['draft', 'sent']">
-                    <label class="col-sm-5 col-xs-4 text-right">Expiration Date:</label>
-                    <div class="col-sm-7 col-xs-8">
+                    <label class="col-md-5 col-4 text-right">Expiration Date:</label>
+                    <div class="col-md-7 col-8">
                         <span t-field="quotation.validity_date"/>
                     </div>
                   </div>
                   <div class="clearfix"/>
                   <div t-if="quotation.client_order_ref">
-                      <label class="col-sm-5 col-xs-4 text-right">Your Reference:</label>
-                      <div class="col-sm-7 col-xs-8">
+                      <label class="col-md-5 col-4 text-right">Your Reference:</label>
+                      <div class="col-md-7 col-8">
                           <span t-field="quotation.client_order_ref"/>
                       </div>
                   </div>
                   <div class="clearfix"/>
                   <div t-if="quotation.payment_term_id">
-                      <label class="col-sm-5 col-xs-4 text-right">Payment Terms:</label>
-                      <div class="col-sm-7 col-xs-8">
+                      <label class="col-md-5 col-4 text-right">Payment Terms:</label>
+                      <div class="col-md-7 col-8">
                           <span t-field="quotation.payment_term_id"/>
                       </div>
                   </div>
@@ -655,16 +655,16 @@
         <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 d-print-none">
+                    <div class="col-lg-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"/>
                             </div>
                         </div>
                     </div>
-                    <div class="col-md-9">
+                    <div class="col-lg-9">
                         <div class="row mb8">
-                            <div t-ignore="true" class="css_editable_mode_hidden col-md-offset-11">
+                            <div t-ignore="true" class="css_editable_mode_hidden offset-lg-11">
                               <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>
diff --git a/addons/website_rating/static/src/xml/website_mail.xml b/addons/website_rating/static/src/xml/website_mail.xml
index de521b32b02..7f462ed3926 100644
--- a/addons/website_rating/static/src/xml/website_mail.xml
+++ b/addons/website_rating/static/src/xml/website_mail.xml
@@ -20,7 +20,7 @@
 
     <t t-name="website_rating.rating_card">
         <div class="row o_website_rating_card_container">
-            <div class="col-md-3 col-md-offset-2" t-if="!_.isEmpty(widget.get('rating_card_values'))">
+            <div class="col-lg-3 offset-lg-2" t-if="!_.isEmpty(widget.get('rating_card_values'))">
                 <p><strong>Average</strong></p>
                 <div class="o_website_rating_avg text-center">
                     <h1><t t-esc="widget.get('rating_card_values')['avg']"/></h1>
@@ -30,7 +30,7 @@
                     <t t-call="portal.chatter_message_count"/>
                 </div>
             </div>
-            <div class="col-md-6" t-if="!_.isEmpty(widget.get('rating_card_values'))">
+            <div class="col-lg-6" t-if="!_.isEmpty(widget.get('rating_card_values'))">
                 <p><strong>Details</strong></p>
                 <div class="o_website_rating_progress_bars">
                     <table class="o_website_rating_progress_table">
diff --git a/addons/website_sale/static/description/index.html b/addons/website_sale/static/description/index.html
index bd0b40a0978..4d2047bb2a0 100644
--- a/addons/website_sale/static/description/index.html
+++ b/addons/website_sale/static/description/index.html
@@ -65,14 +65,14 @@
 
 <section class="oe_container">
     <div class="oe_row oe_spaced">
-        <div class="col-md-7">
+        <div class="col-lg-7">
             <h2 class="oe_slogan" style="color:#875A7B; text-align: left;">Marketplaces integration</h2>
             <h3 class="oe_slogan" style="text-align: left;">Amazon &amp; eBay</h3>
             <p class="oe_mt16 text-justify">
             Get extra exposure and sell more by publishing your products on eBay and Amazon. Import and manage your items straight from your Odoo instance.
             </p>
         </div>
-        <div class="col-md-5">
+        <div class="col-lg-5">
             <h2 class="oe_slogan" style="color:#875A7B; text-align: left;">Shippers integration</h2>
             <h3 class="oe_slogan" style="text-align: left;">UPS, DHL &amp; FedEx</h3>
             <p class="oe_mt16 text-justify">
diff --git a/addons/website_sale/static/src/scss/website_sale.scss b/addons/website_sale/static/src/scss/website_sale.scss
index debc7b33572..f9a89299393 100644
--- a/addons/website_sale/static/src/scss/website_sale.scss
+++ b/addons/website_sale/static/src/scss/website_sale.scss
@@ -237,14 +237,14 @@
         height: 100%;
     }
 
-    &.col-md-12,
-    &.col-md-9 {
+    &.col-lg-12,
+    &.col-lg-9 {
         > table > tbody > tr > td:empty {
             height: 0;
         }
     }
 
-    &.col-md-12 {
+    &.col-lg-12 {
         .oe-height-1 {
             height: 75px;
         }
@@ -266,7 +266,7 @@
         }
     }
 
-    &.col-md-9 {
+    &.col-lg-9 {
         .oe-height-1 {
             height: 70px;
         }
@@ -294,7 +294,7 @@
 }
 @include media-breakpoint-up(lg) {
     #products_grid {
-        &.col-md-12 {
+        &.col-lg-12 {
             .oe-height-1 {
                 height: 95px;
             }
@@ -320,7 +320,7 @@
             }
         }
 
-        &.col-md-9 {
+        &.col-lg-9 {
             .oe-height-1 {
                 height: 72px;
             }
@@ -345,7 +345,7 @@
 }
 @include media-breakpoint-up(xl) {
     #products_grid {
-        &.col-md-12 {
+        &.col-lg-12 {
             .oe-height-1 {
                 height: 125px;
             }
@@ -367,7 +367,7 @@
             }
         }
 
-        &.col-md-9 {
+        &.col-lg-9 {
             .oe-height-1 {
                 height: 95px;
             }
@@ -512,7 +512,7 @@ div#payment_method {
     }
 }
 
-.oe_website_sale .row .row .col-md-12 {
+.oe_website_sale .row .row .col-lg-12 {
     float: none;
 }
 /* product detail */
diff --git a/addons/website_sale/static/src/xml/website_sale_dashboard.xml b/addons/website_sale/static/src/xml/website_sale_dashboard.xml
index 0ae647c45d4..a52d25660ab 100644
--- a/addons/website_sale/static/src/xml/website_sale_dashboard.xml
+++ b/addons/website_sale/static/src/xml/website_sale_dashboard.xml
@@ -26,16 +26,16 @@
     <t t-extend="website.dashboard_content">
         <t t-jquery="div.o_website_dashboard_content" t-operation="prepend">
             <div t-if="widget.groups.sale_salesman" class="row o_dashboard_sales">
-                <div class="col-xs-12 o_box">
+                <div class="col-12 o_box">
                     <t t-if="widget.dashboards_data.sales.summary.order_count">
                         <t t-if="widget.date_range">
                             <h2>Sales Since Last <t t-esc="widget.date_range"></t></h2>
                         </t>
                         <t t-else=""><h2>Sales</h2></t>
-                        <div class="col-md-7 col-xs-12">
+                        <div class="col-lg-7 col-12">
                             <div class="o_graph_sales" data-type="sales"/>
                         </div>
-                        <div class="col-md-5 col-xs-12">
+                        <div class="col-lg-5 col-12">
                             <t t-call="website_sale.products_table"/>
                         </div>
                     </t>
@@ -44,7 +44,7 @@
                             <h2>Sales Since Last <t t-esc="widget.date_range"></t></h2>
                         </t>
                         <t t-else=""><h2>Sales</h2></t>
-                        <div class="col-md-12 col-xs-12">
+                        <div class="col-lg-12 col-12">
                             <div class="o_demo_background">
                             </div>
                             <div class="o_demo_message">
@@ -59,12 +59,12 @@
 
     <t t-name="website_sale.products_table">
         <div class="row">
-            <div class="col-md-12 col-xs-12">
+            <div class="col-lg-12 col-12">
                 <div class="row">
-                    <div class="col-md-12 col-xs-12">
+                    <div class="col-lg-12 col-12">
                         <h4>AT A GLANCE</h4>
                         <a href="#" class="o_dashboard_action" name="website_sale.sale_report_action_dashboard">
-                            <div class="col-sm-4 o_link_enable" title="Orders">
+                            <div class="col-md-4 o_link_enable" title="Orders">
                                 <div class="o_highlight">
                                     <t t-esc="widget.dashboards_data.sales.summary.order_count"/>
                                 </div>
@@ -72,7 +72,7 @@
                             </div>
                         </a>
                         <a href="#" class="o_dashboard_action" name="website_sale.sale_report_action_dashboard">
-                            <div class="col-sm-4 o_link_enable" title="Untaxed Total Sold">
+                            <div class="col-md-4 o_link_enable" title="Untaxed Total Sold">
                                 <div class="o_highlight">
                                     <t t-esc="widget.render_monetary_field(widget.dashboards_data.sales.summary.total_sold, widget.data.currency)"/>
                                 </div>
@@ -80,29 +80,29 @@
                             </div>
                         </a>
                         <a href="#" class="o_dashboard_action" name="website_sale.sale_report_action_carts">
-                            <div class="col-sm-4 o_link_enable o_invisible_border" title="Carts">
+                            <div class="col-md-4 o_link_enable o_invisible_border" title="Carts">
                                 <div class="o_highlight"><t t-esc="widget.dashboards_data.sales.summary.order_carts_count"/></div>
                                 Carts
                             </div>
                         </a>
-                        <div class="col-sm-4 o_link_disable" title="Orders/Day">
+                        <div class="col-md-4 o_link_disable" title="Orders/Day">
                             <div class="o_highlight"><t t-esc="widget.dashboards_data.sales.summary.order_per_day_ratio"/></div>
                             Orders/Day
                         </div>
-                        <div class="col-sm-4 o_link_disable" title="Average Order">
+                        <div class="col-md-4 o_link_disable" title="Average Order">
                             <div class="o_highlight"><t t-esc="widget.render_monetary_field(widget.dashboards_data.sales.summary.order_sold_ratio, widget.data.currency)"/></div>
                             Average Order
                         </div>
-                        <div class="col-sm-4 o_link_disable o_invisible_border" title="Conversion">
+                        <div class="col-md-4 o_link_disable o_invisible_border" title="Conversion">
                             <div class="o_highlight"><t t-esc="widget.format_number(widget.dashboards_data.sales.summary.order_convertion_pctg, 'float', [3, 2], '%')"/></div>
                             Conversion
                         </div>
                     </div>
                 </div>
             </div>
-            <div class="col-md-12 col-xs-12 o_top_margin">
+            <div class="col-lg-12 col-12 o_top_margin">
                 <div class="row">
-                    <div class="col-md-12 col-xs-12">
+                    <div class="col-lg-12 col-12">
                         <h4>Best Sellers</h4>
                         <table class="table table-responsive table-hover">
                             <tr>
diff --git a/addons/website_sale/views/crm_team_views.xml b/addons/website_sale/views/crm_team_views.xml
index 897d38e1b82..dda9efe8c3e 100644
--- a/addons/website_sale/views/crm_team_views.xml
+++ b/addons/website_sale/views/crm_team_views.xml
@@ -12,7 +12,7 @@
                 </xpath>
                 <xpath expr="//t[@name='third_options']" position="after">
                     <div class="row" t-if="record.team_type.raw_value == 'website' &amp;&amp; record.abandoned_carts_count.raw_value">
-                        <div class="col-xs-8">
+                        <div class="col-8">
                             <div>
                                 <a name="get_abandoned_carts" type="object">
                                     <field name="abandoned_carts_count"/>
@@ -20,7 +20,7 @@
                                 </a>
                             </div>
                         </div>
-                        <div class="col-xs-4 text-right">
+                        <div class="col-4 text-right">
                             <field name="abandoned_carts_amount" widget="monetary"/>
                         </div>
                     </div>
diff --git a/addons/website_sale/views/product_views.xml b/addons/website_sale/views/product_views.xml
index 71bba73da01..326835da7c9 100644
--- a/addons/website_sale/views/product_views.xml
+++ b/addons/website_sale/views/product_views.xml
@@ -239,14 +239,14 @@
         <field name="arch" type="xml">
             <form string="Product Images">
                 <div class="row o_website_sale_image_modal">
-                    <div class="col-sm-6 col-lg-5">
+                    <div class="col-md-6 col-xl-5">
                         <div class="oe_title">
                             <label class="small text-muted" for="name" string="Image Name"/>
                             <h2><field name="name" placeholder="Image Name" required="True"/></h2>
                             <field name="product_tmpl_id" invisible="1"/>
                         </div>
                     </div>
-                    <div class="col-sm-6 col-lg-7 text-center o_website_sale_image_modal_container">
+                    <div class="col-md-6 col-xl-7 text-center o_website_sale_image_modal_container">
                         <field name="image" widget="image"/>
                     </div>
                 </div>
diff --git a/addons/website_sale/views/res_config_settings_views.xml b/addons/website_sale/views/res_config_settings_views.xml
index cce68e47a13..d9362110674 100644
--- a/addons/website_sale/views/res_config_settings_views.xml
+++ b/addons/website_sale/views/res_config_settings_views.xml
@@ -10,7 +10,7 @@
                 <!--
                 Show the automatic invoices setting in sales settings.
                 -->
-                <div class="col-xs-12 col-md-6 o_setting_box"
+                <div class="col-12 col-lg-6 o_setting_box"
                      attrs="{'invisible': ['|', ('default_invoice_policy', '!=', 'order'), '&amp;', ('portal_confirmation_pay', '=', False), ('module_website_quote', '=', False)]}">
                     <div class="o_setting_left_pane">
                         <field name="automatic_invoice" nolabel="1"/>
@@ -26,7 +26,7 @@
             <div id="webmaster_settings" position="after">
                 <h2>Product Catalog</h2>
                 <div class="row mt16 o_settings_container" id="sale_product_catalog_settings">
-                    <div class="col-xs-12 col-md-6 o_setting_box" id="product_attributes_setting">
+                    <div class="col-12 col-lg-6 o_setting_box" id="product_attributes_setting">
                         <div class="o_setting_left_pane">
                             <field name="group_product_variant"/>
                         </div>
@@ -42,7 +42,7 @@
                             </div>
                         </div>
                     </div>
-                    <div class="col-xs-12 col-md-6 o_setting_box" id="digital_content_setting" title="Provide customers with product-specific links or downloadable content in the confirmation page of the checkout process if the payment gets through. To do so, attach some files to a product using the new Files button and publish them.">
+                    <div class="col-12 col-lg-6 o_setting_box" id="digital_content_setting" title="Provide customers with product-specific links or downloadable content in the confirmation page of the checkout process if the payment gets through. To do so, attach some files to a product using the new Files button and publish them.">
                         <div class="o_setting_left_pane">
                             <field name="module_website_sale_digital"/>
                         </div>
@@ -57,7 +57,7 @@
 
                 <h2>Customer Experience</h2>
                 <div class="row mt16 o_settings_container" id="sale_customer_experience_settings">
-                    <div class="col-xs-12 col-md-6 o_setting_box" id="whishlist_option_setting">
+                    <div class="col-12 col-lg-6 o_setting_box" id="whishlist_option_setting">
                         <div class="o_setting_left_pane">
                             <field name="module_website_sale_wishlist"/>
                         </div>
@@ -68,7 +68,7 @@
                             </div>
                         </div>
                     </div>
-                    <div class="col-xs-12 col-md-6 o_setting_box" id="comparator_option_setting">
+                    <div class="col-12 col-lg-6 o_setting_box" id="comparator_option_setting">
                         <div class="o_setting_left_pane">
                             <field name="module_website_sale_comparison"/>
                         </div>
@@ -79,7 +79,7 @@
                             </div>
                         </div>
                     </div>
-                    <div class="col-xs-12 col-md-6 o_setting_box" id="sale_option_setting" title="Select optional products from the configuration form of your main products (in Sales tab).">
+                    <div class="col-12 col-lg-6 o_setting_box" id="sale_option_setting" title="Select optional products from the configuration form of your main products (in Sales tab).">
                         <div class="o_setting_left_pane">
                             <field name="module_website_sale_options"/>
                         </div>
@@ -90,7 +90,7 @@
                             </div>
                         </div>
                     </div>
-                    <div class="col-xs-12 col-md-6 o_setting_box" id="product_availability_setting">
+                    <div class="col-12 col-lg-6 o_setting_box" id="product_availability_setting">
                         <div class="o_setting_left_pane">
                             <field name="module_website_sale_stock"/>
                         </div>
@@ -106,7 +106,7 @@
                 <h2>Taxes</h2>
                 <field name="company_id" invisible="1"/>
                 <div class="row mt16 o_settings_container" id="website_taxes_settings">
-                    <div class="col-xs-12 col-md-6 o_setting_box" title="This tax is applied to any new product created in the catalog.">
+                    <div class="col-12 col-lg-6 o_setting_box" title="This tax is applied to any new product created in the catalog.">
                         <div class="o_setting_right_pane">
                             <span class="o_form_label">Default Sales Tax</span>
                             <div class="text-muted">
@@ -122,7 +122,7 @@
                             </div>
                         </div>
                     </div>
-                    <div class="col-xs-12 col-md-6 o_setting_box" id="website_tax_inclusion_setting">
+                    <div class="col-12 col-lg-6 o_setting_box" id="website_tax_inclusion_setting">
                         <div class="o_setting_right_pane">
                             <label string="Product Prices" for="show_line_subtotals_tax_selection"/>
                             <div class="text-muted">
@@ -137,7 +137,7 @@
                             </div>
                         </div>
                     </div>
-                    <div class="col-xs-12 col-md-6 o_setting_box" id="website_rounding_method" title="A rounding per line is advised if your prices are tax-included. That way, the sum of line subtotals equals the total with taxes.">
+                    <div class="col-12 col-lg-6 o_setting_box" id="website_rounding_method" title="A rounding per line is advised if your prices are tax-included. That way, the sum of line subtotals equals the total with taxes.">
                         <div class="o_setting_right_pane">
                             <span class="o_form_label">Rounding Method</span>
                             <div class="text-muted">
@@ -148,7 +148,7 @@
                             </div>
                         </div>
                     </div>
-                    <div class="col-xs-12 col-md-6 o_setting_box" id="website_eu_service" title="If you're selling digital goods to customers in the EU, you must charge VAT based on your customers' locations. This rule applies regardless of you are located. Digital goods are defined in the legislation as broadcasting, telecommunications, and services that are electronically supplied instead of shipped. Gift cards sent online are not included in the definition.">
+                    <div class="col-12 col-lg-6 o_setting_box" id="website_eu_service" title="If you're selling digital goods to customers in the EU, you must charge VAT based on your customers' locations. This rule applies regardless of you are located. Digital goods are defined in the legislation as broadcasting, telecommunications, and services that are electronically supplied instead of shipped. Gift cards sent online are not included in the definition.">
                         <div class="o_setting_left_pane">
                             <field name="module_l10n_eu_service"/>
                         </div>
@@ -163,7 +163,7 @@
 
                 <h2>Pricing</h2>
                 <div class="row mt16 o_settings_container" id="sale_pricing_settings">
-                    <div class="col-xs-12 col-md-6 o_setting_box" id="pricelists_setting"  title="With the first mode you can set several prices in the product config form (from Sales tab). With the second one, you set prices and computation rules from Pricelists.">
+                    <div class="col-12 col-lg-6 o_setting_box" id="pricelists_setting"  title="With the first mode you can set several prices in the product config form (from Sales tab). With the second one, you set prices and computation rules from Pricelists.">
                         <div class="o_setting_left_pane">
                             <field name="multi_sales_price"/>
                         </div>
@@ -183,7 +183,7 @@
                             </div>
                         </div>
                     </div>
-                    <div class="col-xs-12 col-md-6 o_setting_box" id="discount_setting" title="Once activated, discounted prices can be applied from Pricelists setup form (Discount policy field).">
+                    <div class="col-12 col-lg-6 o_setting_box" id="discount_setting" title="Once activated, discounted prices can be applied from Pricelists setup form (Discount policy field).">
                         <div class="o_setting_left_pane">
                             <field name="group_discount_per_so_line"/>
                         </div>
@@ -194,7 +194,7 @@
                             </div>
                         </div>
                     </div>
-                    <div class="col-xs-12 col-md-6 o_setting_box" id="multicurrencies_setting" title="This adds the choice of a currency on pricelists.">
+                    <div class="col-12 col-lg-6 o_setting_box" id="multicurrencies_setting" title="This adds the choice of a currency on pricelists.">
                         <div class="o_setting_left_pane">
                             <field name="group_multi_currency"/>
                         </div>
@@ -210,7 +210,7 @@
                             </div>
                         </div>
                     </div>
-                    <div class="col-xs-12 col-md-6 o_setting_box" title="Boost your sales with two kinds of discount programs: promotions and coupon codes. Specific conditions can be set (products, customers, minimum purchase amount, period). Rewards can be discounts (% or amount) or free products.">
+                    <div class="col-12 col-lg-6 o_setting_box" title="Boost your sales with two kinds of discount programs: promotions and coupon codes. Specific conditions can be set (products, customers, minimum purchase amount, period). Rewards can be discounts (% or amount) or free products.">
                         <div class="o_setting_left_pane">
                             <field name="module_sale_coupon" widget="upgrade_boolean"/>
                         </div>
@@ -225,7 +225,7 @@
 
                 <h2>Shipping</h2>
                 <div class="row mt16 o_settings_container" id="sale_shipping_settings">
-                    <div class="col-xs-12 col-md-6 o_setting_box" id="shipping_address_setting">
+                    <div class="col-12 col-lg-6 o_setting_box" id="shipping_address_setting">
                         <div class="o_setting_left_pane">
                             <field name="group_delivery_invoice_address"/>
                         </div>
@@ -236,7 +236,7 @@
                             </div>
                         </div>
                     </div>
-                    <div class="col-xs-12 col-md-6 o_setting_box" id="delivery_method_setting">
+                    <div class="col-12 col-lg-6 o_setting_box" id="delivery_method_setting">
                         <div class="o_setting_left_pane">
                             <field name="module_website_sale_delivery"/>
                         </div>
@@ -247,7 +247,7 @@
                             </div>
                         </div>
                     </div>
-                    <div class="col-xs-12 col-md-6 o_setting_box" id="ups_provider_setting">
+                    <div class="col-12 col-lg-6 o_setting_box" id="ups_provider_setting">
                         <div class="o_setting_left_pane">
                             <field name="module_delivery_ups" widget="upgrade_boolean"/>
                         </div>
@@ -258,7 +258,7 @@
                             </div>
                         </div>
                     </div>
-                    <div class="col-xs-12 col-md-6 o_setting_box" id="shipping_provider_dhl_setting">
+                    <div class="col-12 col-lg-6 o_setting_box" id="shipping_provider_dhl_setting">
                         <div class="o_setting_left_pane">
                             <field name="module_delivery_dhl" widget="upgrade_boolean"/>
                         </div>
@@ -269,7 +269,7 @@
                             </div>
                         </div>
                     </div>
-                    <div class="col-xs-12 col-md-6 o_setting_box" id="shipping_provider_fedex_setting">
+                    <div class="col-12 col-lg-6 o_setting_box" id="shipping_provider_fedex_setting">
                         <div class="o_setting_left_pane">
                             <field name="module_delivery_fedex" widget="upgrade_boolean"/>
                         </div>
@@ -280,7 +280,7 @@
                             </div>
                         </div>
                     </div>
-                    <div class="col-xs-12 col-md-6 o_setting_box" id="shipping_provider_usps_setting">
+                    <div class="col-12 col-lg-6 o_setting_box" id="shipping_provider_usps_setting">
                         <div class="o_setting_left_pane">
                             <field name="module_delivery_usps" widget="upgrade_boolean"/>
                         </div>
@@ -291,7 +291,7 @@
                             </div>
                         </div>
                     </div>
-                    <div class="col-xs-12 col-md-6 o_setting_box" id="shipping_provider_bpost_setting">
+                    <div class="col-12 col-lg-6 o_setting_box" id="shipping_provider_bpost_setting">
                         <div class="o_setting_left_pane">
                             <field name="module_delivery_bpost" widget="upgrade_boolean"/>
                         </div>
@@ -302,7 +302,7 @@
                             </div>
                         </div>
                     </div>
-                    <div class="col-xs-12 col-md-6 o_setting_box" id="shipping_provider_easypost_setting">
+                    <div class="col-12 col-lg-6 o_setting_box" id="shipping_provider_easypost_setting">
                         <div class="o_setting_left_pane">
                             <field name="module_delivery_easypost" widget="upgrade_boolean"/>
                         </div>
@@ -319,7 +319,7 @@
                 <div attrs="{'invisible': [('module_account_invoicing', '=', False)]}">
                     <h2>Invoicing</h2>
                     <div class="row mt16 o_settings_container" id="sale_invoicing_settings">
-                       <div class="col-xs-12 col-md-6 o_setting_box" id="invoicing_policy_setting" title="The mode selected here applies as invoicing policy of any new product created but not of products already existing.">
+                       <div class="col-12 col-lg-6 o_setting_box" id="invoicing_policy_setting" title="The mode selected here applies as invoicing policy of any new product created but not of products already existing.">
                             <div class="o_setting_right_pane">
                                 <span class="o_form_label">Invoicing Policy</span>
                                 <div class="text-muted">
@@ -332,7 +332,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="col-xs-12 col-md-6 o_setting_box" attrs="{'invisible': [('default_invoice_policy', '=', 'delivery')]}">
+                        <div class="col-12 col-lg-6 o_setting_box" attrs="{'invisible': [('default_invoice_policy', '=', 'delivery')]}">
                             <div class="o_setting_left_pane">
                                 <field name="automatic_invoice" nolabel="1"/>
                             </div>
@@ -348,7 +348,7 @@
 
                 <h2>Orders</h2>
                 <div class="row mt16 o_settings_container" id="sale_checkout_settings">
-                    <div class="col-xs-12 col-md-6 o_setting_box" id="abandoned_carts_setting" title="Send a recovery email to authenticated shoppers">
+                    <div class="col-12 col-lg-6 o_setting_box" id="abandoned_carts_setting" title="Send a recovery email to authenticated shoppers">
                         <div class="o_setting_left_pane"/>
                         <div class="o_setting_right_pane">
                             <span class="o_form_label">Email for Abandoned carts</span>
@@ -357,19 +357,19 @@
                             </div>
                             <div class="content-group">
                                 <div class="row mt16">
-                                    <label for="cart_recovery_mail_template" string="Email Template" class="col-md-3 o_light_label"/>
+                                    <label for="cart_recovery_mail_template" string="Email Template" class="col-lg-3 o_light_label"/>
                                     <field name="cart_recovery_mail_template" class="oe_inline"/>
                                 </div>
                             </div>
                             <div class="content-group">
                                 <div class="row mt16">
-                                  <label for="cart_abandoned_delay" string="Cart are considered abandoned after" class="col-md-6 o_light_label"/>
-                                  <span class="col-md-3"><field name="cart_abandoned_delay"/>hours</span>
+                                  <label for="cart_abandoned_delay" string="Cart are considered abandoned after" class="col-lg-6 o_light_label"/>
+                                  <span class="col-lg-3"><field name="cart_abandoned_delay"/>hours</span>
                                 </div>
                             </div>
                         </div>
                     </div>
-                    <div class="col-xs-12 col-md-6 o_setting_box" id="checkout_assignation_setting">
+                    <div class="col-12 col-lg-6 o_setting_box" id="checkout_assignation_setting">
                         <div class="o_setting_right_pane">
                             <span class="o_form_label">Assignation</span>
                             <div class="text-muted">
@@ -377,11 +377,11 @@
                             </div>
                             <div class="content-group">
                                 <div class="row mt16">
-                                    <label class="o_light_label col-md-3" string="Sales Team" for="salesteam_id"/>
+                                    <label class="o_light_label col-lg-3" string="Sales Team" for="salesteam_id"/>
                                     <field name="salesteam_id" context="{'default_team_type': 'website'}"/>
                                 </div>
                                 <div class="row">
-                                    <label class="o_light_label col-md-3" for="salesperson_id"/>
+                                    <label class="o_light_label col-lg-3" for="salesperson_id"/>
                                     <field name="salesperson_id"/>
                                 </div>
                             </div>
diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index aae7e4f20f2..84f95883a3c 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -188,7 +188,7 @@
                     </div>
                     <div class="row">
                         <div class="d-none" id="products_grid_before"></div>
-                        <div class="col-md-12" id="products_grid">
+                        <div class="col-lg-12" id="products_grid">
                             <table width="100%">
                                 <tbody>
                                     <tr t-ignore="true">
@@ -290,10 +290,10 @@
             </ul>
         </xpath>
         <xpath expr="//div[@id='products_grid_before']" position="attributes">
-            <attribute name="class">col-md-3 col-sm-4 col-xs-12</attribute>
+            <attribute name="class">col-lg-3 col-md-4 col-12</attribute>
         </xpath>
         <xpath expr="//div[@id='products_grid']" position="attributes">
-            <attribute name="class">col-md-9 col-sm-8</attribute>
+            <attribute name="class">col-lg-9 col-md-8</attribute>
         </xpath>
     </template>
 
@@ -367,10 +367,10 @@
             </form>
         </xpath>
         <xpath expr="//div[@id='products_grid_before']" position="attributes">
-            <attribute name="class">col-md-3 d-none d-md-block</attribute>
+            <attribute name="class">col-lg-3 d-none d-md-block</attribute>
         </xpath>
         <xpath expr="//div[@id='products_grid']" position="attributes">
-            <attribute name="class">col-md-9</attribute>
+            <attribute name="class">col-lg-9</attribute>
         </xpath>
     </template>
 
@@ -398,7 +398,7 @@
             <div itemscope="itemscope" itemtype="http://schema.org/Product" id="wrap" class="js_sale">
                 <section t-attf-class="container mt8 oe_website_sale #{(compute_currency(product.lst_price) - product.website_price) &gt; 0.01 and website.get_current_pricelist().discount_policy == 'without_discount'  and 'discount'}" id="product_detail">
                     <div class="row">
-                        <div class="col-sm-4">
+                        <div class="col-md-4">
                             <ol class="breadcrumb">
                                 <li class="breadcrumb-item">
                                     <a t-att-href="keep(category=0)">Products</a>
@@ -411,17 +411,17 @@
                                 </li>
                             </ol>
                         </div>
-                        <div class="col-sm-3 mb8">
+                        <div class="col-md-3 mb8">
                             <t t-call="website_sale.search" />
                         </div>
-                        <div id="website_published_button" class="col-sm-3">
+                        <div id="website_published_button" class="col-md-3">
                         </div>
-                        <div class="col-sm-2 text-right">
+                        <div class="col-md-2 text-right">
                             <t t-call="website_sale.pricelist_list" />
                         </div>
                     </div>
                     <div class="row">
-                        <div class="col-sm-6">
+                        <div class="col-md-6">
                             <t t-set="variant_img" t-value="any(product.mapped('product_variant_ids.image_variant'))"/>
                             <t t-set="image_ids"  t-value="product.product_image_ids"/>
                             <div id="o-carousel-product" class="carousel slide" data-ride="carousel" data-interval="0">
@@ -459,7 +459,7 @@
                               </ol>
                             </div>
                         </div>
-                        <div class="col-sm-6 col-lg-4 col-lg-offset-1" id="product_details">
+                        <div class="col-md-6 col-xl-4 offset-xl-1" id="product_details">
                             <h1 itemprop="name" t-field="product.name">Product Name</h1>
                             <span itemprop="url" style="display:none;" t-esc="'%sshop/product/%s' % (request.httprequest.url_root, slug(product))"/>
                             <form action="/shop/cart/update" method="POST">
@@ -527,7 +527,7 @@
                 <h3>Alternative Products:</h3>
                 <div class="row mt16" style="">
                     <t t-foreach="product.alternative_product_ids" t-as="alt_product">
-                        <div class="col-md-2 thumbnail" style="width: 170px; height:130px; float:left; display:inline; margin-right: 10px; overflow:hidden;">
+                        <div class="col-lg-2 thumbnail" style="width: 170px; height:130px; float:left; display:inline; margin-right: 10px; overflow:hidden;">
                             <div class="mt16 text-center" style="height: 100%;">
                                 <div t-field="alt_product.image_small" t-options="{'widget': 'image', 'class': 'img-rounded shadow o_alternative_product' }" />
                                 <h5>
@@ -562,7 +562,7 @@
                 <section class="container mt16 mb16">
                     <hr/>
                     <div class="row">
-                        <div class="col-md-8 col-md-offset-2">
+                        <div class="col-lg-8 offset-lg-2">
                             <t t-call="portal.message_thread">
                                 <t t-set="object" t-value="product"/>
                                 <t t-set="display_rating" t-value="True"/>
@@ -700,7 +700,7 @@
         <t t-set="website_sale_order" t-value="website.sale_get_order()"/>
 
         <div class="row">
-            <div class="col-lg-8">
+            <div class="col-xl-8">
                 <div class="wizard">
                     <div class="progress-wizard">
                         <a class="no-decoration" t-att-href="step&gt;=10 and '/shop/cart' or '#'">
@@ -736,46 +736,46 @@
             <div id="wrap">
                 <div class="container oe_website_sale">
                     <div class="row">
-                        <div class='col-md-12'>
+                        <div class='col-lg-12'>
                             <t t-call="website_sale.wizard_checkout">
                                 <t t-set="step" t-value="30"/>
                             </t>
                         </div>
-                        <div class="col-lg-4 col-lg-push-8 d-none d-xl-block">
+                        <div class="col-xl-4 order-xl-2 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">
+                        <div class="col-xl-8 order-xl-1 col-md-12 col-12 oe_cart">
                             <div class="row">
-                                <div class='col-md-12'>
+                                <div class='col-lg-12'>
                                     <form action="/website_form/" method="post" class="s_website_form form-horizontal container-fluid" enctype="multipart/form-data" data-force_action="shop.sale.order" data-model_name="sale.order" data-success_page="/shop/payment">
                                         <div class="form-group form-field o_website_form_custom">
-                                            <div class="col-md-3 col-sm-4 text-right-not-xs">
+                                            <div class="col-lg-3 col-md-4 text-right-not-xs">
                                                 <label class="control-label" for="client_order_ref">Your Reference</label>
                                             </div>
-                                            <div class="col-md-9 col-sm-8">
+                                            <div class="col-lg-9 col-md-8">
                                                 <input type="text" class="form-control o_website_form_input" name="client_order_ref"/>
                                             </div>
                                         </div>
                                         <div class="form-group form-field o_website_form_custom">
-                                            <div class="col-md-3 col-sm-4 text-right-not-xs">
+                                            <div class="col-lg-3 col-md-4 text-right-not-xs">
                                                 <label class="control-label" for="Give us your feedback">Give us your feedback</label>
                                             </div>
-                                            <div class="col-md-9 col-sm-8">
+                                            <div class="col-lg-9 col-md-8">
                                                 <textarea class="form-control o_website_form_input" rows="8" name="Give us your feedback" />
                                             </div>
                                         </div>
                                         <div class="form-group form-field o_website_form_custom">
-                                            <div class="col-md-3 col-sm-4 text-right-not-xs">
+                                            <div class="col-lg-3 col-md-4 text-right-not-xs">
                                                 <label class="control-label" for="a_document">A document to provide</label>
                                             </div>
-                                            <div class="col-md-9 col-sm-8">
+                                            <div class="col-lg-9 col-md-8">
                                                 <input type="file" class="form-control o_website_form_input" name="a_document" />
                                             </div>
                                         </div>
                                         <div class="form-group">
-                                            <div class="col-md-3 col-sm-4">
+                                            <div class="col-lg-3 col-md-4">
                                             </div>
-                                            <div class="col-md-9 col-sm-8">
+                                            <div class="col-lg-9 col-md-8">
                                                 <a role="button" href="/shop/checkout" class="btn btn-secondary mb32 pull-left"><span class="fa fa-chevron-left" /> Previous</a>
                                                 <a role="button" class="btn btn-primary pull-right mb32 o_website_form_send" href="/shop/confirm_order">Next <span class="fa fa-chevron-right" /></a>
                                             </div>
@@ -873,14 +873,14 @@
             <div id="wrap">
                 <div class="container oe_website_sale">
                     <div class="row">
-                        <div class="col-md-12">
+                        <div class="col-lg-12">
                             <t t-call="website_sale.wizard_checkout">
                                 <t t-set="step" t-value="10" />
                             </t>
                         </div>
-                        <div class="col-lg-8 col-sm-12 col-xs-12 oe_cart">
+                        <div class="col-xl-8 col-md-12 col-12 oe_cart">
                             <div class="row">
-                                <div class="col-md-12">
+                                <div class="col-lg-12">
                                     <div t-if="abandoned_proceed or access_token" class="mt8 mb8 alert alert-info" role="alert"> <!-- abandoned cart choices -->
                                         <t t-if="abandoned_proceed">
                                             <p>Your previous cart has already been completed.</p>
@@ -909,7 +909,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="col-lg-4 col-sm-12 col-xs-12">
+                        <div class="col-xl-4 col-md-12 col-12">
                             <t t-call='website_sale.short_cart_summary'/>
                             <div class="d-xl-none">
                                 <a role="button" href="/shop" class="btn btn-secondary mb32">
@@ -936,10 +936,10 @@
         <t t-if="website_sale_order and website_sale_order.website_order_line">
             <t t-foreach="website_sale_order.website_order_line" t-as="line">
                 <div class="row mb8 cart_line">
-                    <div class="col-xs-3">
+                    <div class="col-3">
                         <span t-field="line.product_id.image_small" t-options="{'widget': 'image', 'class': 'img-rounded'}" />
                     </div>
-                    <div class="col-xs-9">
+                    <div class="col-9">
                         <a t-attf-href="/shop/product/#{ slug(line.product_id.product_tmpl_id) }">
                             <span t-esc="line.product_id.with_context(display_default_code=False).display_name" class="h6" />
                         </a>
@@ -986,7 +986,7 @@
                             </t>
                             <span t-field="product.website_price" style="white-space: nowrap;" t-options="{'widget': 'monetary','display_currency': website.currency_id}" />
                         </td>
-                        <td class="col-md-2 col-sm-3 col-xs-4 text-center">
+                        <td class="col-lg-2 col-md-3 col-4 text-center">
                             <input class="js_quantity" name="product_id" t-att-data-product-id="product.id" type="hidden" />
                             <a role="button" class="btn btn-link js_add_suggested_products">
                                 <strong>Add to Cart</strong>
@@ -1022,20 +1022,20 @@
                 <div class="container oe_website_sale">
                     <t t-set="same_shipping" t-value="bool(order.partner_shipping_id==order.partner_id or only_services)" />
                     <div class="row">
-                        <div class='col-md-12'>
+                        <div class='col-lg-12'>
                             <t t-call="website_sale.wizard_checkout">
                                 <t t-set="step" t-value="20" />
                             </t>
                         </div>
-                        <div class="col-lg-4 col-lg-push-8 d-none d-xl-block">
+                        <div class="col-xl-4 order-xl-2 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">
+                        <div class="col-xl-8 order-xl-1 col-md-12 col-12 oe_cart">
                             <div class="row">
-                                <div class="col-md-12">
+                                <div class="col-lg-12">
                                     <h3 class="page-header mt8">Billing Address</h3>
                                 </div>
-                                <div class="col-md-6 one_kanban">
+                                <div class="col-lg-6 one_kanban">
                                     <t t-call="website_sale.address_kanban">
                                         <t t-set='contact' t-value="order.partner_id"/>
                                         <t t-set='selected' t-value="1"/>
@@ -1045,14 +1045,14 @@
                             </div>
                             <t t-if="not only_services" groups="sale.group_delivery_invoice_address">
                                 <div class="row">
-                                    <div class="col-md-12">
+                                    <div class="col-lg-12">
                                         <h3 class="page-header mt16 mb4">Shipping Address</h3>
                                     </div>
                                 </div>
                                 <div class="row all_shipping">
-                                    <div class="col-md-12">
+                                    <div class="col-lg-12">
                                         <div class="row mt8">
-                                            <div class="col-sm-12 col-md-12 one_kanban">
+                                            <div class="col-md-12 col-lg-12 one_kanban">
                                                 <form action="/shop/address" method="post" class=''>
                                                     <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()" />
                                                     <a role="button" class='a-submit btn btn-secondary mb16 btn-block'>
@@ -1061,7 +1061,7 @@
                                                 </form>
                                             </div>
                                             <t t-foreach="shippings" t-as="ship">
-                                                <div class="col-sm-12 col-md-6 one_kanban">
+                                                <div class="col-md-12 col-lg-6 one_kanban">
                                                     <t t-call="website_sale.address_kanban">
                                                         <t t-set="actual_partner" t-value="order.partner_id" />
                                                         <t t-set='contact' t-value="ship"/>
@@ -1123,17 +1123,17 @@
             <div id="wrap">
                 <div class="container oe_website_sale">
                     <div class='row'>
-                        <div class="col-md-12">
+                        <div class="col-lg-12">
                             <t t-call="website_sale.wizard_checkout">
                                 <t t-set="step" t-value="20" />
                             </t>
                         </div>
                     </div>
                     <div class="row">
-                        <div class="col-lg-4 col-lg-push-8 d-none d-xl-block">
+                        <div class="col-xl-4 order-xl-2 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">
+                        <div class="col-xl-8 order-xl-1 col-md-12 col-12 oe_cart">
                             <div class="row">
                                 <t t-if="mode == ('new', 'billing')">
                                     <h2 class="page-header mt8 ml16">Your Address
@@ -1151,61 +1151,61 @@
                                     <h4 class="text-danger" t-esc="err" />
                                 </t>
                                 <form action="/shop/address" method="post" class="checkout_autoformat">
-                                    <div t-attf-class="form-group #{error.get('name') and 'has-error' or ''} col-md-12 div_name">
+                                    <div t-attf-class="form-group #{error.get('name') and 'has-error' or ''} col-lg-12 div_name">
                                         <label class="control-label" for="name">Name</label>
                                         <input type="text" name="name" class="form-control" t-att-value="'name' in checkout and checkout['name']" />
                                     </div>
                                     <div class="clearfix" />
                                     <t t-if="mode[1] == 'billing'">
-                                        <div t-attf-class="form-group #{error.get('email') and 'has-error' or ''} col-md-6" id="div_email">
+                                        <div t-attf-class="form-group #{error.get('email') and 'has-error' or ''} col-lg-6" id="div_email">
                                             <label class="control-label" for="email">Email</label>
                                             <input type="email" name="email" class="form-control" t-att-value="'email' in checkout and checkout['email']" />
                                         </div>
                                     </t>
-                                    <div t-attf-class="form-group #{error.get('phone') and 'has-error' or ''} col-md-6" id="div_phone">
+                                    <div t-attf-class="form-group #{error.get('phone') and 'has-error' or ''} col-lg-6" id="div_phone">
                                         <label class="control-label" for="phone">Phone</label>
                                         <input type="tel" name="phone" class="form-control" t-att-value="'phone' in checkout and checkout['phone']" />
                                     </div>
                                     <div class="clearfix" />
                                     <t t-if="mode == ('new', 'billing') or (mode == ('edit', 'billing') and (can_edit_vat or 'vat' in checkout and checkout['vat']))">
-                                        <div t-attf-class="form-group #{error.get('company_name') and 'has-error' or ''} col-md-6">
+                                        <div t-attf-class="form-group #{error.get('company_name') and 'has-error' or ''} col-lg-6">
                                             <label class="control-label font-weight-normal label-optional" for="company_name">Company Name</label>
                                             <input type="text" name="company_name" class="form-control" t-att-value="'company_name' in checkout and checkout['company_name']" t-att-readonly="'1' if 'vat' in checkout and checkout['vat'] and not can_edit_vat else None" t-att-title="'Changing company name is not allowed once document(s) have been issued for your account. Please contact us directly for this operation.' if 'vat' in checkout and checkout['vat'] and not can_edit_vat else None" />
                                         </div>
-                                        <div t-attf-class="form-group #{error.get('vat') and 'has-error' or ''} col-md-6 div_vat">
+                                        <div t-attf-class="form-group #{error.get('vat') and 'has-error' or ''} col-lg-6 div_vat">
                                             <label class="control-label font-weight-normal label-optional" for="vat">TIN / VAT </label>
                                             <input type="text" name="vat" class="form-control" t-att-value="'vat' in checkout and checkout['vat']" t-att-readonly="'1' if 'vat' in checkout and checkout['vat'] and not can_edit_vat else None" t-att-title="'Changing VAT number is not allowed once document(s) have been issued for your account. Please contact us directly for this operation.' if 'vat' in checkout and checkout['vat'] and not can_edit_vat else None" />
                                         </div>
                                     </t>
                                     <div class="clearfix" />
-                                    <div t-attf-class="form-group #{error.get('street') and 'has-error' or ''} col-md-12 div_street">
+                                    <div t-attf-class="form-group #{error.get('street') and 'has-error' or ''} col-lg-12 div_street">
                                         <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">
+                                    <div t-attf-class="form-group #{error.get('street2') and 'has-error' or ''} col-lg-12 div_street2">
                                         <label class="control-label label-optional" for="street2">Street 2</label>
                                         <input type="text" name="street2" class="form-control" t-att-value="'street2' in checkout and checkout['street2']" />
                                     </div>
                                     <div class="clearfix" />
                                     <t t-set='zip_city' t-value='country and [x for x in country.get_address_fields() if x in ["zip", "city"]] or ["city", "zip"]'/>
                                     <t t-if="'zip' in zip_city and zip_city.index('zip') &lt; zip_city.index('city')">
-                                        <div t-attf-class="form-group #{error.get('zip') and 'has-error' or ''} col-sm-4 div_zip">
+                                        <div t-attf-class="form-group #{error.get('zip') and 'has-error' or ''} col-md-4 div_zip">
                                             <label class="control-label label-optional" for="zip">Zip Code</label>
                                             <input type="text" name="zip" class="form-control" t-att-value="'zip' in checkout and checkout['zip']" />
                                         </div>
                                     </t>
-                                    <div t-attf-class="form-group #{error.get('city') and 'has-error' or ''} col-sm-8 div_city">
+                                    <div t-attf-class="form-group #{error.get('city') and 'has-error' or ''} col-md-8 div_city">
                                         <label class="control-label" for="city">City</label>
                                         <input type="text" name="city" class="form-control" t-att-value="'city' in checkout and checkout['city']" />
                                     </div>
                                     <t t-if="'zip' in zip_city and zip_city.index('zip') &gt; zip_city.index('city')">
-                                        <div t-attf-class="form-group #{error.get('zip') and 'has-error' or ''} col-sm-4 div_zip">
+                                        <div t-attf-class="form-group #{error.get('zip') and 'has-error' or ''} col-md-4 div_zip">
                                             <label class="control-label label-optional" for="zip">Zip Code</label>
                                             <input type="text" name="zip" class="form-control" t-att-value="'zip' in checkout and checkout['zip']" />
                                         </div>
                                     </t>
                                     <div class="clearfix" />
-                                    <div t-attf-class="form-group #{error.get('country_id') and 'has-error' or ''} col-md-6 div_country">
+                                    <div t-attf-class="form-group #{error.get('country_id') and 'has-error' or ''} col-lg-6 div_country">
                                         <label class="control-label" for="country_id">Country</label>
                                         <select id="country_id" name="country_id" class="form-control">
                                             <option value="">Country...</option>
@@ -1216,7 +1216,7 @@
                                             </t>
                                         </select>
                                     </div>
-                                    <div t-attf-class="form-group #{error.get('state_id') and 'has-error' or ''} col-md-6 div_state" t-att-style="(not country or not country.state_ids) and 'display: none'">
+                                    <div t-attf-class="form-group #{error.get('state_id') and 'has-error' or ''} col-lg-6 div_state" t-att-style="(not country or not country.state_ids) and 'display: none'">
                                         <label class="control-label" for="state_id">State / Province</label>
                                         <select name="state_id" class="form-control" data-init="1">
                                             <option value="">State / Province...</option>
@@ -1230,7 +1230,7 @@
 
                                     <div class="clearfix" />
                                     <t t-if="mode == ('new', 'billing') and not only_services">
-                                        <div class="col-md-12">
+                                        <div class="col-lg-12">
                                             <div class="well checkbox">
                                               <label>
                                                 <input type="checkbox" id='shipping_use_same'  name='use_same' value="1" checked='checked'/>Ship to the same address
@@ -1274,12 +1274,12 @@
             <div id="wrap">
                 <div class="container oe_website_sale">
                     <div class="row">
-                        <div class='col-xs-12'>
+                        <div class='col-12'>
                             <t t-call="website_sale.wizard_checkout">
                                 <t t-set="step" t-value="40" />
                             </t>
                         </div>
-                        <div class="col-xs-12" t-if="errors">
+                        <div class="col-12" t-if="errors">
                             <t t-foreach="errors" t-as="error">
                                 <div class="alert alert-danger" t-if="error" role="alert">
                                     <h4>
@@ -1289,12 +1289,12 @@
                                 </div>
                             </t>
                         </div>
-                        <div class="col-lg-4 col-lg-push-8 col-sm-12 col-xs-12">
+                        <div class="col-xl-4 order-xl-2 col-md-12 col-12">
                             <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">
+                        <div class="col-xl-8 order-xl-1 col-md-12 col-12 oe_cart">
                          <div class="row">
-                            <div class='col-md-12' id="shipping_and_billing">
+                            <div class='col-lg-12' id="shipping_and_billing">
                                 <div class="panel panel-default">
                                   <div class="panel-headisng"></div>
                                   <div class="panel-body">
@@ -1308,7 +1308,7 @@
                             <div class="clearfix" />
                             <div class="oe_structure" />
 
-                            <div id="payment_method" class="col-md-12" t-if="(form_acquirers or s2s_acquirers or tokens) and website_sale_order.amount_total">
+                            <div id="payment_method" class="col-lg-12" t-if="(form_acquirers or s2s_acquirers or tokens) and website_sale_order.amount_total">
                                 <h3 class="mb24">Pay with </h3>
                                 <t t-call="payment.payment_tokens_list">
                                     <t t-set="mode" t-value="'payment'"/>
@@ -1336,7 +1336,7 @@
                                 </a>
                             </div>
                             <div class="js_payment mb64 row" t-if="not website_sale_order.amount_total" id="payment_method">
-                                <div class="col-sm-12">
+                                <div class="col-md-12">
                                     <form target="_self" action="/shop/payment/validate" method="post" class="pull-right">
                                         <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()" />
                                         <a role="button" class="btn btn-primary a-submit">
@@ -1359,9 +1359,9 @@
     <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 d-none d-xl-block'>Order Total</h4>
+                <h4 class='col-lg-12 d-none d-xl-block'>Order Total</h4>
                 <hr class='d-none d-xl-block mt4 mb4'/>
-                <div class='col-md-12'>
+                <div class='col-lg-12'>
                     <t t-call="website_sale.total">
                         <t t-set='no_rowspan'>1</t>
                     </t>
@@ -1376,7 +1376,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 d-xl-none'>
+                <div class='toggle_summary col-lg-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>
@@ -1385,7 +1385,7 @@
                   Your cart is empty!
                 </div>
                 <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">
+                    <table class="table table-striped table-condensed col-lg-12" id="cart_products" t-if="website_sale_order and website_sale_order.website_order_line">
                         <thead>
                             <tr>
                                 <th class='td-img'>Product</th>
@@ -1426,7 +1426,7 @@
     <template id="payment_sale_note" inherit_id="payment" name="Accept Terms &amp; Conditions" customize_show="True" active="False">
         <xpath expr="//div[@id='payment_method'][hasclass('js_payment')]" position="after">
             <div class="clearfix"/>
-            <div class="oe_accept_cgv_button col-md-12 text-right oe_accept_cgv_button">
+            <div class="oe_accept_cgv_button col-lg-12 text-right oe_accept_cgv_button">
                 <label>
                     <input type="checkbox" id="checkbox_cgv"/>
                     I agree to the <a target='_BLANK' href='/shop/terms'>terms &amp; conditions</a>
@@ -1442,12 +1442,12 @@
             <div id="wrap">
                 <div class="container oe_website_sale">
                     <div class='row'>
-                        <div class="col-md-12">
+                        <div class="col-lg-12">
                             <h1><span>Order</span> <em t-field="order.name" /> <t t-if="order.state == 'sale'"><span>Confirmed</span></t></h1>
                         </div>
                     </div>
                     <div class="row">
-                        <div class="col-md-12 col-lg-8">
+                        <div class="col-lg-12 col-xl-8">
                             <div class="oe_cart">
                                 <div class="thanks_msg mb32">
                                     <h2>Thank you for your order.
@@ -1492,7 +1492,7 @@
                                 <div class="oe_structure" />
                             </div>
                         </div>
-                        <div class="col-lg-4 col-md-12 mt16">
+                        <div class="col-xl-4 col-lg-12 mt16">
                             <t t-set='website_sale_order' t-value='order'/>
                             <t t-call='website_sale.cart_summary'>
                                 <t t-set='hide_coupon'>1</t>
@@ -1510,8 +1510,8 @@
             <table class='table'>
                   <tr id="empty">
                       <t t-if='not no_rowspan'><td rowspan="10" class="noborder"/></t>
-                      <td class="col-sm-2 col-xs-3 noborder"></td>
-                      <td class="col-sm-2 col-xs-3 noborder" ></td>
+                      <td class="col-md-2 col-3 noborder"></td>
+                      <td class="col-md-2 col-3 noborder" ></td>
                   </tr>
                   <tr id="order_total_untaxed">
                       <td class="text-right noborder">Subtotal:</td>
@@ -1628,7 +1628,7 @@
                 <section class="s_title">
                   <div class="container">
                     <div class="row">
-                      <div class="col-md-12">
+                      <div class="col-lg-12">
                         <h1 class="text-center">Terms &amp;amp; Conditions</h1>
                         <div class="well s_well clearfix">
                             <ul>
@@ -1648,7 +1648,7 @@
                 <section class="s_text_block">
                   <div class="container">
                     <div class="row">
-                      <div class="col-md-12 mb16 mt16">
+                      <div class="col-lg-12 mb16 mt16">
                         <p style='white-space:pre' t-esc="website.company_id.sale_note"/>
                       </div>
                     </div>
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 96e8c794195..39b4097bea6 100644
--- a/addons/website_sale_comparison/views/website_sale_comparison_template.xml
+++ b/addons/website_sale_comparison/views/website_sale_comparison_template.xml
@@ -31,7 +31,7 @@
                 <t t-if='len(atts)'>
                     <h3 class="text-center mb32">Specifications for <t t-esc="product.name"/></h3>
                     <div class="row">
-                        <div class='col-md-8 col-md-offset-2' id='product_specifications'>
+                        <div class='col-lg-8 offset-lg-2' id='product_specifications'>
                             <table class='table table-striped table-condensed table-hover'>
                                 <t t-foreach="atts.keys()" t-as="spec">
                                     <t t-if="len(atts.keys())&gt;1">
@@ -122,10 +122,10 @@
 
     <template id="product_product" name="Comparator - Product row in comparator popover">
         <div class="row mt8 o_product_row" t-att-data-category_ids="product.public_categ_ids.ids">
-            <div class="col-sm-3 col-xs-3 mb8">
+            <div class="col-md-3 col-3 mb8">
                 <img class="img img-fluid" t-attf-src="/web/image/product.product/#{product.id}/image_small" style="max-height: 50px;" alt="Product image"/>
             </div>
-            <div class="col-sm-7 col-xs-7 mb8 text-left">
+            <div class="col-md-7 col-7 mb8 text-left">
                 <h5>
                     <strong><a t-attf-href="/shop/product/#{product.product_tmpl_id[0].id}"><t t-esc="product.display_name" /></a></strong>
                 </h5>
@@ -138,7 +138,7 @@
                     </strong>
                 </h5>
             </div>
-            <div class="col-sm-1 col-xs-1 mt32">
+            <div class="col-md-1 col-1 mt32">
                 <a href='#' class="o_remove" title="Remove" t-att-data-product_product_id="product.id">
                     <i class="fa fa-trash" role="img" aria-label="Remove"></i>
                 </a>
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 6a4839a858a..ff9f5835abf 100644
--- a/addons/website_sale_delivery/views/website_sale_delivery_templates.xml
+++ b/addons/website_sale_delivery/views/website_sale_delivery_templates.xml
@@ -49,7 +49,7 @@
             </div>
         </xpath>
         <xpath expr="//div[@id='payment_method']" position="before">
-            <div t-if="deliveries" class="col-md-12" id="delivery_carrier">
+            <div t-if="deliveries" class="col-lg-12" id="delivery_carrier">
                 <t t-set="delivery_nb" t-value="len(deliveries)"/>
                 <h3 t-if="delivery_nb &gt; 1" class="mb24">Choose a delivery method</h3>
                 <div t-if="delivery_nb &gt; 1" class="panel panel-default" id="delivery_method">
diff --git a/addons/website_sale_link_tracker/static/src/xml/website_sale_dashboard_utm_chart.xml b/addons/website_sale_link_tracker/static/src/xml/website_sale_dashboard_utm_chart.xml
index e9e9bc88e99..ed47f027e99 100644
--- a/addons/website_sale_link_tracker/static/src/xml/website_sale_dashboard_utm_chart.xml
+++ b/addons/website_sale_link_tracker/static/src/xml/website_sale_dashboard_utm_chart.xml
@@ -1,11 +1,11 @@
 <?xml version="1.0" encoding="utf-8"?>
 <templates>
     <t t-extend="website_sale.products_table">
-        <t t-jquery=".o_top_margin .row .col-xs-12" t-operation="attributes">
-            <attribute name="class">col-md-6 col-xs-12</attribute>
+        <t t-jquery=".o_top_margin .row .col-12" t-operation="attributes">
+            <attribute name="class">col-lg-6 col-12</attribute>
         </t>
         <t t-jquery=".o_top_margin .row" t-operation="append">
-            <div class="col-md-6 col-xs-12 o_dashboard_utms">
+            <div class="col-lg-6 col-12 o_dashboard_utms">
                 <div>
                     <h4 class="pull-left">REVENUE BY</h4>
                     <t t-call="website_sale.LinkTrackersDropDown"/>
diff --git a/addons/website_sale_stock/views/res_config_settings_views.xml b/addons/website_sale_stock/views/res_config_settings_views.xml
index 6010f9025c3..2f41856a038 100644
--- a/addons/website_sale_stock/views/res_config_settings_views.xml
+++ b/addons/website_sale_stock/views/res_config_settings_views.xml
@@ -13,11 +13,11 @@
             <xpath expr="//div[@name='stock_inventory_availability']" position="inside">
                 <div class="content-group">
                     <div class="row mt16" title="Default availability mode set on newly created storable products. This can be changed at the product level.">
-                        <label for="inventory_availability" string="Default Availability Mode" class="col-md-3 o_light_label" />
+                        <label for="inventory_availability" string="Default Availability Mode" class="col-lg-3 o_light_label" />
                         <field name="inventory_availability" string="Inventory"/>
                     </div><br/>
                     <div class="row" attrs="{'invisible': [('inventory_availability', '!=', 'threshold')]}">
-                        <label for="available_threshold" string="Default threshold" class="col-md-3 o_light_label" />
+                        <label for="available_threshold" string="Default threshold" class="col-lg-3 o_light_label" />
                         <field name="available_threshold" class="oe_inline" attrs="{'required': [('inventory_availability', '=', 'threshold')]}"/>
                     </div>
                 </div>
diff --git a/addons/website_slides/static/src/scss/website_slides.scss b/addons/website_slides/static/src/scss/website_slides.scss
index dc14211ccfd..10f50bef28b 100644
--- a/addons/website_slides/static/src/scss/website_slides.scss
+++ b/addons/website_slides/static/src/scss/website_slides.scss
@@ -185,7 +185,7 @@ textarea.o_slides_comment {
     .o_slide_navigation_buttons {
         margin-left: 15px;
         margin-right: -15px;
-        .col-xs-4 {
+        .col-4 {
             display: none;
         }
     }
diff --git a/addons/website_slides/static/src/xml/website_slides.xml b/addons/website_slides/static/src/xml/website_slides.xml
index 80c7f8d3a14..d8e31a0ae41 100644
--- a/addons/website_slides/static/src/xml/website_slides.xml
+++ b/addons/website_slides/static/src/xml/website_slides.xml
@@ -14,14 +14,14 @@
                     <main class="modal-body">
                         <form class="clearfix form-horizontal">
                             <div class="form-group">
-                                <div class="col-sm-4">
+                                <div class="col-md-4">
                                     <div class="img-thumbnail">
                                         <div class="o_slide_preview">
                                             <img src="/website_slides/static/src/img/document.png" id="slide-image" title="Content Preview" alt="Content Preview" class="img-fluid"/>
                                         </div>
                                     </div>
                                 </div>
-                                <div class="col-sm-8">
+                                <div class="col-md-8">
                                     <ul class="list-group">
                                         <li class="list-group-item active">
                                             <h5 class="list-group-item-heading">
@@ -39,26 +39,26 @@
                                 </div>
                             </div>
                             <div class="form-group">
-                                <label for="name" class="control-label col-sm-2">Title</label>
-                                <div class="col-sm-10">
+                                <label for="name" class="control-label col-md-2">Title</label>
+                                <div class="col-md-10">
                                     <input id="name" placeholder="Title" class="form-control" required="required"/>
                                 </div>
                             </div>
                             <div class="form-group">
-                                <label for="tag_ids" class="control-label col-sm-2">Tags</label>
-                                <div class="controls col-sm-10">
+                                <label for="tag_ids" class="control-label col-md-2">Tags</label>
+                                <div class="controls col-md-10">
                                     <input id="tag_ids" type="hidden"/>
                                 </div>
                             </div>
                             <div class="form-group">
-                                <label for="category_id" class="control-label col-sm-2">Category</label>
-                                <div class="controls col-sm-10">
+                                <label for="category_id" class="control-label col-md-2">Category</label>
+                                <div class="controls col-md-10">
                                     <input id="category_id" type="hidden"/>
                                 </div>
                             </div>
                             <div class="form-group">
-                                <label for="description" class="control-label col-sm-2">Description</label>
-                                <div class="controls col-sm-10">
+                                <label for="description" class="control-label col-md-2">Description</label>
+                                <div class="controls col-md-10">
                                     <textarea id="description" rows="4" placeholder="Description" class="form-control"></textarea>
                                 </div>
                             </div>
diff --git a/addons/website_slides/views/res_config_settings_views.xml b/addons/website_slides/views/res_config_settings_views.xml
index 468c58e383c..8eb95f74fce 100644
--- a/addons/website_slides/views/res_config_settings_views.xml
+++ b/addons/website_slides/views/res_config_settings_views.xml
@@ -6,7 +6,7 @@
         <field name="inherit_id" ref="website.res_config_settings_view_form"/>
         <field name="arch" type="xml">
             <div id="languages_setting" position="after">
-                <div class="col-xs-12 col-md-6 o_setting_box" id="slides_install_setting">
+                <div class="col-12 col-lg-6 o_setting_box" id="slides_install_setting">
                     <div class="o_setting_right_pane">
                         <span class="o_form_label">Slides</span>
                         <div class="text-muted">
@@ -14,7 +14,7 @@
                         </div>
                         <div class="content-group">
                             <div class="row mt16">
-                                <label for="website_slide_google_app_key" class="col-md-3 o_light_label" string="API Key"/>
+                                <label for="website_slide_google_app_key" class="col-lg-3 o_light_label" string="API Key"/>
                                 <field name="website_slide_google_app_key" class="oe_inline"/>
                             </div>
                             <div class="oe_link">
diff --git a/addons/website_slides/views/website_slides.xml b/addons/website_slides/views/website_slides.xml
index 5636f6882bc..f56d6c762e0 100644
--- a/addons/website_slides/views/website_slides.xml
+++ b/addons/website_slides/views/website_slides.xml
@@ -30,7 +30,7 @@
             <div class="row">
                 <t t-foreach="channels" t-as="channel">
                     <div t-if="channel_index % 3 == 0" class="clearfix"/>
-                    <div class="col-sm-4 mb32">
+                    <div class="col-md-4 mb32">
                         <div class="well well-sm">
                             <div>
                                 <a t-attf-href="/slides/#{slug(channel)}">
@@ -91,7 +91,7 @@
         <div class="container">
             <div class="row">
                 <!-- Name and breadcrumb -->
-                <div class="pull-left col-md-8 col-sm-12 col-xs-12 mt16 mb8">
+                <div class="pull-left col-lg-8 col-md-12 col-12 mt16 mb8">
                     <h3 class="mt0">
                         <a t-attf-href="/slides/#{slug(channel)}" t-esc="channel.name"/>
                         <t t-if="category">
@@ -106,7 +106,7 @@
                     </h3>
                 </div>
                 <!-- Search box -->
-                <div class="col-md-4 col-sm-12 col-xs-12 pul-right mt16 mb8">
+                <div class="col-lg-4 col-md-12 col-12 pul-right mt16 mb8">
                     <form t-attf-action="/slides/#{slug(channel)}" role="search" method="get">
                         <div class="input-group">
                             <input type="text" class="form-control" name="search" t-attf-placeholder="Search in #{channel.name}" t-att-value="search"/>
@@ -121,7 +121,7 @@
             </div>
             <div class="row" t-if="not search">
                 <!-- Navigation -->
-                <div class="col-md-8 col-sm-12 col-xs-12">
+                <div class="col-lg-8 col-md-12 col-12">
                     <ul class="nav nav-tabs nav-tabs-border" role="tablist">
                         <li class="nav-item">
                             <a t-attf-href="/slides/#{slug(channel)}#{category and '/category/' + slug(category) or ''}"
@@ -154,7 +154,7 @@
                     </ul>
                 </div>
                 <!-- Sort options -->
-                <div class="col-md-4 col-sm-12 col-xs-12">
+                <div class="col-lg-4 col-md-12 col-12">
                     <span class="pull-right">
                         <span class="text-muted">Sort by:</span>
                         <a href="?sorting=date">
@@ -208,12 +208,12 @@
             <section class="oe_slides_promote_box" t-if="channel.promoted_slide_id and not tag and not slide_type and not search and not category">
                 <div class="container">
                     <div class="row">
-                        <div class="col-md-5 mt16 mb16">
+                        <div class="col-lg-5 mt16 mb16">
                             <a t-attf-href="/slides/slide/#{slug(channel.promoted_slide_id)}">
                                 <img t-attf-src="/web/image/slide.slide/#{channel.promoted_slide_id.id}/image_medium" class="img-fluid shadow oe_slides_promote_image" alt="Promoted slide"/>
                             </a>
                         </div>
-                        <div class="col-md-7 mt16 mb16">
+                        <div class="col-lg-7 mt16 mb16">
                             <h3 class="row">
                                 <a t-attf-href="/slides/slide/#{slug(channel.promoted_slide_id)}">
                                     <t t-esc="channel.promoted_slide_id.name"/>
@@ -238,7 +238,7 @@
             <section>
                 <div class="container mt16">
                     <div class="row">
-                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="padding-left: 15px;padding-right: 15px;" t-if="channel.total == 0">
+                        <div class="col-xl-12 col-lg-12 col-md-12 col-12" style="padding-left: 15px;padding-right: 15px;" t-if="channel.total == 0">
                             <div class="jumbotron">
                                 <h1>No presentation published yet.</h1>
                                 <p>
@@ -256,7 +256,7 @@
                             </div>
                         </div>
 
-                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" t-if="slide_type or category or tag">
+                        <div class="col-xl-12 col-lg-12 col-md-12 col-12" t-if="slide_type or category or tag">
                             <div class="alert alert-success mb0" role="status" t-if="tag">
                                 Results for <strong t-esc="tag.name"/>
                             </div>
@@ -266,10 +266,10 @@
                             <t t-call="website.pager"/>
                         </div>
 
-                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 mb16" t-if="not slide_type and category_datas and not tag">
+                        <div class="col-xl-12 col-lg-12 col-md-12 col-12 mb16" t-if="not slide_type and category_datas and not tag">
                             <t t-foreach="category_datas" t-as="category">
-                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
-                                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 mt8 oe_slides_bottom_border">
+                                <div class="col-xl-12 col-lg-12 col-md-12 col-12">
+                                    <div class="col-xl-12 col-lg-12 col-md-12 col-12 mt8 oe_slides_bottom_border">
                                         <a t-if="category['id']" t-attf-href="/slides/#{slug(channel)}/category/#{category['id']}" class="h3 mt0 mb0">
                                             <t t-esc="category['name']"/>
                                         </a>
@@ -323,7 +323,7 @@
 
 <!-- Embedded template: display a list of slides in a grid view -->
 <template id='slides_grid_view' name="Slides (Grid View)">
-    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 mt16 mb16" t-foreach="slides" t-as="slide">
+    <div class="col-xl-3 col-lg-4 col-md-6 col-12 mt16 mb16" t-foreach="slides" t-as="slide">
         <div class="well well-sm oe_slides_thumbnail_container">
             <a t-attf-href="/slides/slide/#{slug(slide)}">
                 <img t-attf-src="/web/image/slide.slide/#{slide.id}/image_thumb" class="img-fluid img-thumbnail oe_slides_grid_thumbnail" alt="slide.name"/>
@@ -379,7 +379,7 @@
         <t t-set="main_object" t-value="slide"/>
         <div class="container mt16">
             <div class="row">
-                <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
+                <div class="col-xl-8 col-lg-8 col-md-12 col-12">
                     <div t-if="private" class="mb16">
                         <h3 class="alert alert-danger" role="alert">
                             <i class="fa fa-exclamation-triangle" role="img" aria-label="Attention" title="Attention"></i> This <t t-esc="slide.slide_type"/> is private
@@ -400,10 +400,10 @@
                             <t t-raw="slide.embed_code"/>
                         </div>
                         <div class="row">
-                            <h4 t-field="slide.name" class="col-md-6"/>
-                            <div class="col-md-6">
+                            <h4 t-field="slide.name" class="col-lg-6"/>
+                            <div class="col-lg-6">
                                 <div clas="row">
-                                    <div class="col-md-8" t-if="slide.tag_ids">
+                                    <div class="col-lg-8" t-if="slide.tag_ids">
                                         <t t-foreach="slide.tag_ids" t-as="slide_tag">
                                             <a t-attf-href="/slides/#{slug(slide.channel_id)}/tag/#{slug(slide_tag)}"  t-attf-class="label label-default ml4 mb4 pull-right #{tag and tag.id == slide_tag.id and 'label-primary' ''}" t-field="slide_tag.name"/>
                                         </t>
@@ -412,7 +412,7 @@
                             </div>
                         </div>
                         <div class="row">
-                            <div class="col-sm-8 col-xs-12">
+                            <div class="col-md-8 col-12">
                                 <div class="pull-left">
                                     <a t-attf-href="/slides/#{slug(slide.channel_id)}" t-attf-title="Channel #{slide.channel_id.name}" t-attf-aria-label="Channel #{slide.channel_id.name}">
                                         <i class="fa fa-circle-o fa-5x" style="color: #875A7B;font-weight: bold;"></i>
@@ -434,7 +434,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-sm-4 d-none d-md-block">
+                            <div class="col-md-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>
@@ -544,7 +544,7 @@
                                 </div>
                                 <div role="tabpanel" class="tab-pane fade" id="statistic" t-att-slide-url="slide.website_url">
                                     <div class="row">
-                                        <div class="col-md-4">
+                                        <div class="col-lg-4">
                                             <h4 class="mt0 oe_slides_statistics_title">Views</h4>
                                             <ul class="list-group">
                                                 <li class="list-group-item">
@@ -562,7 +562,7 @@
                                             </ul>
                                         </div>
 
-                                        <div class="col-md-4">
+                                        <div class="col-lg-4">
                                             <h4 class="mt0 oe_slides_statistics_title">Actions</h4>
                                             <ul class="list-group">
                                                 <li class="list-group-item">
@@ -584,7 +584,7 @@
                                             </ul>
                                         </div>
 
-                                        <div class="col-md-4">
+                                        <div class="col-lg-4">
                                             <h4 class="mt0 oe_slides_statistics_title">Share count</h4>
                                             <ul class="list-group">
                                                 <li class="list-group-item">
@@ -607,7 +607,7 @@
                                         </div>
                                     </div>
                                     <div class="row" t-if="not slide.document_id and slide.embedcount_ids">
-                                        <div class="col-md-12">
+                                        <div class="col-lg-12">
                                             <h4 class="mt0"> Embeds
                                                 <span class="badge pull-right">
                                                     <t t-esc="len(slide.embedcount_ids)"/>
@@ -626,14 +626,14 @@
                         </div>
                     </div>
                 </div>
-                <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
+                <div class="col-xl-4 col-lg-4 col-md-12 col-12">
                     <ul class="nav nav-tabs" role="tablist">
                         <li class="nav-item"><a aria-controls="related" href="#related" class="nav-link active" data-toggle="tab">Related</a></li>
                         <li class="nav-item"><a aria-controls="most_viewed" href="#most_viewed" class="nav-link" data-toggle="tab">Most Viewed</a></li>
                     </ul>
                     <div class="tab-content">
                         <div role="tabpanel" id="related" class="tab-pane active mt4">
-                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 panel panel-default">
+                            <div class="col-xl-12 col-lg-12 col-md-12 col-12 panel panel-default">
                                 <ul class="media-list panel-body">
                                     <t t-set="related_slides_list" t-value="list(related_slides)"/>
                                     <t t-if="not related_slides_list">
@@ -646,7 +646,7 @@
                             </div>
                         </div>
                         <div role="tabpanel" id="most_viewed" class="tab-pane  mt4">
-                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 panel panel-default">
+                            <div class="col-xl-12 col-lg-12 col-md-12 col-12 panel panel-default">
                                 <ul class="media-list panel-body">
                                     <t t-set="most_viewed_slides_list" t-value="list(most_viewed_slides)"/>
                                     <t t-if="not list(most_viewed_slides_list)">
@@ -696,7 +696,7 @@
     <h4 class="mt0">Share with a friend</h4>
     <t t-if="not is_public_user">
         <form class="form-group oe_slide_js_share_email" role="form">
-            <div class="input-group col-md-6">
+            <div class="input-group col-lg-6">
                 <input type="email" class="form-control" placeholder="your-friend@domain.com"/>
                 <span class="input-group-btn">
                     <button class="btn btn-primary" type="button"
@@ -723,8 +723,8 @@
             <textarea class="form-control slide_embed_code" readonly="readonly" onClick="this.select();"><t t-esc="slide.embed_code"/></textarea>
         </div>
         <div class="form-group" t-if="slide.slide_type in ('presentation', 'document')">
-            <div class="help-block col-lg-3 col-md-3 col-sm-6 col-xs-6">Select page to start with</div>
-            <div class="input-group col-lg-3 col-md-3 col-sm-6 col-xs-6">
+            <div class="help-block col-xl-3 col-lg-3 col-md-6 col-6">Select page to start with</div>
+            <div class="input-group col-xl-3 col-lg-3 col-md-6 col-6">
                 <input type="number" value="1" class="form-control"/>
             </div>
         </div>
diff --git a/addons/website_slides/views/website_slides_embed.xml b/addons/website_slides/views/website_slides_embed.xml
index c048a44486a..f6abb52506b 100644
--- a/addons/website_slides/views/website_slides_embed.xml
+++ b/addons/website_slides/views/website_slides_embed.xml
@@ -37,20 +37,20 @@
                     <div t-if="is_embedded" class="navbar-default oe_slides_share_bar">
                         <div class="container-fluid">
                             <div class="row">
-                                <div class="col-lg-8 col-md-8 col-sm-4 col-xs-4 text-left">
+                                <div class="col-xl-8 col-lg-8 col-md-4 col-4 text-left">
                                     <div class="oe_slides_ellipsis">
                                         <a target="_new" t-att-href="slide.website_url">
                                             <span  t-esc="slide.name" t-attf-title="#{slide.name}"/>
                                         </a>
                                     </div>
                                 </div>
-                                <div class="col-lg-1 col-md-1 col-sm-2 col-xs-2 text-right">
+                                <div class="col-xl-1 col-lg-1 col-md-2 col-2 text-right">
                                     <b class="oe_slide_js_embed_option_link" data-slide-option-id="#slide_share"><i class="fa fa-share-alt"></i> Share</b>
                                 </div>
-                                <div class="col-lg-1 col-md-1 col-sm-2 col-xs-2 text-right">
+                                <div class="col-xl-1 col-lg-1 col-md-2 col-2 text-right">
                                     <b class="oe_slide_js_embed_option_link" data-slide-option-id="#slide_email"><i class="fa fa-envelope"></i> Email</b>
                                 </div>
-                                <div class="col-lg-1 col-md-1 col-sm-2 col-xs-2 text-right">
+                                <div class="col-xl-1 col-lg-1 col-md-2 col-2 text-right">
                                     <b class="oe_slide_js_embed_option_link" data-slide-option-id="#slide_embed"><i class="fa fa-code"></i> Embed</b>
                                 </div>
                             </div>
@@ -75,7 +75,7 @@
                         </t>
                         <div id="slide_suggest" class="oe_slide_embed_option">
                             <t t-foreach="related_slides" t-as="suggest_slide">
-                                <div class="col-md-4 col-sm-4 col-xs-4 oe_slides_suggestion_media">
+                                <div class="col-lg-4 col-md-4 col-4 oe_slides_suggestion_media">
                                     <a t-att-href="suggest_slide.website_url" target="_new">
                                         <div class="oe_slides_suggestion_caption">
                                             <h4><t t-esc="suggest_slide.name"/></h4>
@@ -105,34 +105,34 @@
                     <div class="navbar navbar-default navbar-fixed-bottom" role="navigation" t-if="slide.slide_type in ('presentation', 'document')">
                         <div class="container-fluid oe_slides_panel_footer">
                             <div class="row" style="padding-top:15px;">
-                                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 text-left">
+                                <div class="col-xl-2 col-lg-2 col-md-2 col-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 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">
+                                <div class="col-xl-8 col-lg-8 col-md-8 col-8 d-none o_slide_navigation_buttons">
+                                    <div class="col-xl-4 col-lg-4 col-md-4 col-4 text-center"></div>
+                                    <div class="col-xl-1 col-lg-1 col-md-1 col-1 text-center">
                                         <span id="first" title="First slide" role="img" aria-label="First slide">
                                             <i class="fa fa-step-backward fa-2x"></i>
                                         </span>
                                     </div>
-                                    <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 text-center">
+                                    <div class="col-xl-1 col-lg-1 col-md-1 col-1 text-center">
                                         <a id="previous" title="Previous slide" aria-label="Previous slide"  role="button">
                                             <i class="fa fa-arrow-circle-left fa-2x"></i>
                                         </a>
                                     </div>
-                                    <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 text-center">
+                                    <div class="col-xl-1 col-lg-1 col-md-1 col-1 text-center">
                                         <a id="next" title="Next slide" aria-label="Next slide" role="button">
                                             <i class="fa fa-arrow-circle-right fa-2x"></i>
                                         </a>
                                     </div>
-                                    <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 text-center">
+                                    <div class="col-xl-1 col-lg-1 col-md-1 col-1 text-center">
                                         <a id="last" title="Last slide" aria-label="Last slide" role="button">
                                             <i class="fa fa-step-forward fa-2x"></i>
                                         </a>
                                     </div>
-                                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center"></div>
+                                    <div class="col-xl-4 col-lg-4 col-md-4 col-4 text-center"></div>
                                 </div>
-                                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 pull-right text-right">
+                                <div class="col-xl-2 col-lg-2 col-md-2 col-2 pull-right text-right">
                                     <a t-if="slide.download_security and not is_embedded" target="_top" t-attf-href="/slides/slide/#{slug(slide)}/download" title="Download" id="download">
                                         <i class="fa fa-download fa-2x" role="img" aria-label="Download"></i>
                                     </a>
diff --git a/addons/website_twitter/views/res_config_settings_views.xml b/addons/website_twitter/views/res_config_settings_views.xml
index 3ea04ac6e5f..2b4e68f499f 100644
--- a/addons/website_twitter/views/res_config_settings_views.xml
+++ b/addons/website_twitter/views/res_config_settings_views.xml
@@ -6,7 +6,7 @@
         <field name="inherit_id" ref="website.res_config_settings_view_form"/>
         <field name="arch" type="xml">
             <div id="languages_setting" position="after">
-                <div class="col-xs-12 col-md-6 o_setting_box" id="twitter_roller_install_setting">
+                <div class="col-12 col-lg-6 o_setting_box" id="twitter_roller_install_setting">
                     <div class="o_setting_right_pane">
                         <span class="o_form_label">Twitter Roller</span>
                         <div class="text-muted">
@@ -14,15 +14,15 @@
                         </div>
                         <div class="content-group">
                             <div class="row mt16">
-                                <label class="col-md-3 o_light_label" string="API Key" for="twitter_api_key"/>
+                                <label class="col-lg-3 o_light_label" string="API Key" for="twitter_api_key"/>
                                 <field name="twitter_api_key" class="oe_inline"/>
                             </div>
                             <div class="row">
-                                <label class="col-md-3 o_light_label" string="API secret" for="twitter_api_secret"/>
+                                <label class="col-lg-3 o_light_label" string="API secret" for="twitter_api_secret"/>
                                 <field name="twitter_api_secret" class="oe_inline"/>
                             </div>
                             <div class="row">
-                                <label class="col-md-3 o_light_label" string="Favorites From" for="twitter_screen_name"/>
+                                <label class="col-lg-3 o_light_label" string="Favorites From" for="twitter_screen_name"/>
                                 <field name="twitter_screen_name" class="oe_inline"/>
                             </div>
                             <div>
diff --git a/doc/howtos/themes.rst b/doc/howtos/themes.rst
index 0ce91112e43..a6362beb4db 100644
--- a/doc/howtos/themes.rst
+++ b/doc/howtos/themes.rst
@@ -659,17 +659,17 @@ The template contains the HTML markup that will be displayed by the snippet.
      <section class="snippet_testimonial">
        <div class="container text-center">
          <div class="row">
-           <div class="col-md-4">
+           <div class="col-lg-4">
              <img alt="client" class="img-circle" src="/theme_tutorial/static/src/img/client_1.jpg"/>
              <h3>Client Name</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
-           <div class="col-md-4">
+           <div class="col-lg-4">
              <img alt="client" class="img-circle" src="/theme_tutorial/static/src/img/client_2.jpg"/>
              <h3>Client Name</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
-           <div class="col-md-4">
+           <div class="col-lg-4">
              <img alt="client" class="img-circle" src="/theme_tutorial/static/src/img/client_3.jpg"/>
              <h3>Client Name</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
@@ -931,8 +931,8 @@ Layout
 ``<section />``
   Any section element can be edited like a block of content. The publisher can move or duplicate it. It’s also possible to set a background image or color. Section is the standard main container of any snippet.
 
-``.row > .col-md-*``
-  Any medium  bootstrap columns  directly descending from a .row element, will be resizable by the publisher.
+``.row > .col-lg-*``
+  Any large bootstrap columns directly descending from a .row element, will be resizable by the publisher.
 
 ``contenteditable="False"``
   This attribute will prevent editing to the element and all its children.
diff --git a/doc/reference/reports.rst b/doc/reference/reports.rst
index ed408a0d817..372be4ff34a 100644
--- a/doc/reference/reports.rst
+++ b/doc/reference/reports.rst
@@ -158,7 +158,7 @@ For example, let's look at the Sale Order report from the Sale module::
             <div class="page">
                 <div class="oe_structure"/>
                 <div class="row">
-                    <div class="col-xs-6">
+                    <div class="col-6">
                         <strong t-if="doc.partner_shipping_id == doc.partner_invoice_id">Invoice and shipping address:</strong>
                         <strong t-if="doc.partner_shipping_id != doc.partner_invoice_id">Invoice address:</strong>
                         <div t-field="doc.partner_invoice_id" t-options="{&quot;no_marker&quot;: True}"/>
diff --git a/doc/webservices/iap_service/03-template b/doc/webservices/iap_service/03-template
index 6517181ce29..de79726e1f8 100644
--- a/doc/webservices/iap_service/03-template
+++ b/doc/webservices/iap_service/03-template
@@ -29,7 +29,7 @@ Index: coalroller_service/coalroller_service/views/no-credit.xml
 +    <div>
 +      <div class="container-fluid">
 +        <div class="row">
-+          <div class="col-sm-7 col-md-offset-1 mt32 mb32">
++          <div class="col-md-7 offset-lg-1 mt32 mb32">
 +            <h2>Consume electricity doing nothing useful!</h2>
 +            <ul>
 +              <li>Heat our state of the art data center for no reason</li>
diff --git a/odoo/addons/base/report/ir_module_report_templates.xml b/odoo/addons/base/report/ir_module_report_templates.xml
index 2fab9748cce..a6fdfcbf302 100644
--- a/odoo/addons/base/report/ir_module_report_templates.xml
+++ b/odoo/addons/base/report/ir_module_report_templates.xml
@@ -52,7 +52,7 @@
                                 <th colspan="2">Object: <span t-esc="obj.model"/></th>
                             </tr>
                             <tr t-foreach="findfields(obj.model, o)" t-as="field">
-                                <td class="col-xs-3"><t t-esc="field[0]"/></td>
+                                <td class="col-3"><t t-esc="field[0]"/></td>
                                 <td>
                                     <span t-esc="field[1].get('string','Unknown')"/><span>, </span><span t-esc="field[1].get('type')"/><span t-if="field[1].get('required')">, required</span><span t-if="field[1].get('readonly',False)">, readonly</span>
                                     <div t-esc="field[1].get('help', '')"/>
diff --git a/odoo/addons/base/static/tests/base_settings_mobile_tests.js b/odoo/addons/base/static/tests/base_settings_mobile_tests.js
index 04d8ba100a2..86966d4a388 100644
--- a/odoo/addons/base/static/tests/base_settings_mobile_tests.js
+++ b/odoo/addons/base/static/tests/base_settings_mobile_tests.js
@@ -52,7 +52,7 @@ QUnit.module('mobile_base_settings_tests', {
                         '<div class="settings">' +
                             '<div class="app_settings_block" data-string="CRM" data-key="crm">' +
                                 '<div class="row mt16 o_settings_container">'+
-                                    '<div class="col-xs-12 col-md-6 o_setting_box">'+
+                                    '<div class="col-12 col-lg-6 o_setting_box">'+
                                         '<div class="o_setting_left_pane">' +
                                             '<field name="bar"/>'+
                                         '</div>'+
@@ -67,7 +67,7 @@ QUnit.module('mobile_base_settings_tests', {
                             '</div>' +
                             '<div class="app_settings_block" data-string="Project" data-key="project">' +
                                 '<div class="row mt16 o_settings_container">'+
-                                    '<div class="col-xs-12 col-md-6 o_setting_box">'+
+                                    '<div class="col-12 col-lg-6 o_setting_box">'+
                                         '<div class="o_setting_left_pane">' +
                                             '<field name="foo"/>'+
                                         '</div>'+
diff --git a/odoo/addons/base/static/tests/base_settings_tests.js b/odoo/addons/base/static/tests/base_settings_tests.js
index 46eaa05fca9..e0ee5dd6380 100644
--- a/odoo/addons/base/static/tests/base_settings_tests.js
+++ b/odoo/addons/base/static/tests/base_settings_tests.js
@@ -47,7 +47,7 @@ QUnit.module('base_settings_tests', {
                             '<div class="notFound o_hidden">No Record Found</div>' +
                             '<div class="app_settings_block" string="CRM" data-key="crm">' +
                                 '<div class="row mt16 o_settings_container">'+
-                                    '<div class="col-xs-12 col-md-6 o_setting_box">'+
+                                    '<div class="col-12 col-lg-6 o_setting_box">'+
                                         '<div class="o_setting_left_pane">' +
                                             '<field name="bar"/>'+
                                         '</div>'+
@@ -58,7 +58,7 @@ QUnit.module('base_settings_tests', {
                                             '</div>'+
                                         '</div>' +
                                     '</div>'+
-                                    '<div class="col-xs-12 col-md-6 o_setting_box">'+
+                                    '<div class="col-12 col-lg-6 o_setting_box">'+
                                         '<div class="o_setting_left_pane">' +
                                             '<field name="foo"/>'+
                                         '</div>'+
diff --git a/odoo/addons/base/views/res_company_views.xml b/odoo/addons/base/views/res_company_views.xml
index e6a76289242..e5940c39fbf 100644
--- a/odoo/addons/base/views/res_company_views.xml
+++ b/odoo/addons/base/views/res_company_views.xml
@@ -75,16 +75,16 @@
                                 </div>
                                 <hr class="mt4 mb4"/>
                                 <div class="row">
-                                    <div t-if="record.email.value" class="col-xs-6 text-center">
+                                    <div t-if="record.email.value" class="col-6 text-center">
                                         <strong>Email:</strong>
                                     </div>
-                                    <div t-if="record.phone.value" class="col-xs-6 text-center">
+                                    <div t-if="record.phone.value" class="col-6 text-center">
                                         <strong>Phone</strong>
                                     </div>
-                                    <div t-if="record.phone.value" class="col-xs-6 text-center">
+                                    <div t-if="record.phone.value" class="col-6 text-center">
                                         <field name="email"/>
                                     </div>
-                                    <div t-if="record.phone.value" class="col-xs-6 text-center">
+                                    <div t-if="record.phone.value" class="col-6 text-center">
                                         <field name="phone"/>
                                     </div>
                                 </div>
diff --git a/odoo/addons/base/views/res_currency_views.xml b/odoo/addons/base/views/res_currency_views.xml
index 6c9de0ca574..4b1bf985fe1 100644
--- a/odoo/addons/base/views/res_currency_views.xml
+++ b/odoo/addons/base/views/res_currency_views.xml
@@ -93,15 +93,15 @@
                         <t t-name="kanban-box">
                             <div t-attf-class="oe_kanban_global_click">
                                 <div class="row mb4">
-                                    <div class="col-xs-6">
+                                    <div class="col-6">
                                         <strong><span><t t-esc="record.name.value"/></span></strong>
                                     </div>
-                                    <div class="col-xs-6 pull-right text-right">
+                                    <div class="col-6 pull-right text-right">
                                         <span class="badge"><t t-esc="record.symbol.value"/></span>
                                     </div>
                                 </div>
                                 <div class="row">
-                                    <div class="col-xs-12">
+                                    <div class="col-12">
                                         <strong><span>Current Rate: </span></strong>
                                         <field name="rate"/>
                                     </div>