From 59237ea81988bdcd0cc746422a7c94bf2eadaaa2 Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Thu, 15 Mar 2018 14:25:57 +0100
Subject: [PATCH] [REF] *: BS4, review panel and well structure

Panels and wells were dropped and replaced by the "Card" component.
---
 .../views/account_portal_templates.xml        |   2 +-
 .../views/account_portal_templates.xml        |   2 +-
 addons/calendar/views/calendar_templates.xml  |   6 +-
 .../static/src/scss/hr_org_chart.scss         |   2 +-
 .../static/src/xml/hr_org_chart.xml           |   4 +-
 .../views/project_portal_templates.xml        |   2 +-
 .../mail/static/src/scss/mail_activity.scss   |   2 +-
 addons/mail/static/src/xml/activity.xml       |   2 +-
 addons/payment/views/payment_templates.xml    |  12 +-
 .../portal/static/src/js/portal_signature.js  |   2 +-
 .../static/src/xml/portal_signature.xml       |   6 +-
 .../views/project_portal_templates.xml        |  18 +-
 .../views/project_rating_templates.xml        |   4 +-
 addons/purchase/views/portal_templates.xml    |   8 +-
 addons/sale/views/sale_onboarding_views.xml   |   4 +-
 addons/sale/views/sale_portal_templates.xml   |  12 +-
 .../views/sale_portal_templates.xml           |   2 +-
 addons/survey/static/src/js/survey_result.js  |   2 +-
 addons/survey/views/survey_result.xml         |   6 +-
 .../static/src/scss/web_editor.ui.scss        |   6 +-
 .../static/src/scss/web_editor.variables.scss |   2 +-
 addons/web_editor/static/src/xml/editor.xml   |  30 ++--
 .../static/src/js/editor/snippets.options.js  |   8 +-
 addons/website/static/src/scss/website.scss   |  12 +-
 addons/website/static/src/xml/website.seo.xml |   6 +-
 addons/website/static/src/xml/website.xml     |  18 +-
 addons/website/views/snippets.xml             |  90 ++++------
 addons/website/views/website_templates.xml    |  54 +++---
 .../website_crm_partner_assign_templates.xml  |  16 +-
 .../views/website_customer_templates.xml      |   8 +-
 addons/website_event/data/event_demo.xml      |  18 +-
 .../website_event/views/event_templates.xml   |  44 ++---
 .../views/event_track_templates.xml           |  42 ++---
 .../static/src/js/website_forum.js            |   2 +-
 addons/website_forum/views/website_forum.xml  |  72 ++++----
 .../website_forum_doc/views/website_doc.xml   |  62 +++----
 .../data/hr_job_demo.xml                      | 168 +++++++++---------
 .../views/website_livechat.xml                |  18 +-
 .../website_mail_channel/views/snippets.xml   |   6 +-
 .../views/website_mail_channel_templates.xml  |   4 +-
 .../views/snippets_templates.xml              |   2 +-
 .../views/website_partner_templates.xml       |   2 +-
 .../website_quote/data/website_quote_data.xml |  48 ++---
 .../static/src/js/website_sale.js             |   4 +-
 .../static/src/scss/website_sale.scss         |   2 +-
 addons/website_sale/views/templates.xml       |  76 ++++----
 .../views/website_sale_delivery_templates.xml |   2 +-
 .../website_slides/views/website_slides.xml   |  50 +++---
 .../views/website_slides_embed.xml            |   2 +-
 49 files changed, 460 insertions(+), 512 deletions(-)

diff --git a/addons/account/views/account_portal_templates.xml b/addons/account/views/account_portal_templates.xml
index c8159190839..1517c0d6395 100644
--- a/addons/account/views/account_portal_templates.xml
+++ b/addons/account/views/account_portal_templates.xml
@@ -28,7 +28,7 @@
         <t t-if="not invoices">
             <p>There are currently no invoices and payments for your account.</p>
         </t>
-        <div t-if="invoices" class="panel panel-default">
+        <div t-if="invoices" class="card">
             <div class="table-responsive"><table class="table table-hover o_portal_my_doc_table">
                 <thead>
                   <tr class="active">
diff --git a/addons/account_payment/views/account_portal_templates.xml b/addons/account_payment/views/account_portal_templates.xml
index 7846e8d8fa0..16c471649b7 100644
--- a/addons/account_payment/views/account_portal_templates.xml
+++ b/addons/account_payment/views/account_portal_templates.xml
@@ -97,7 +97,7 @@
                     <t t-call="account_payment.portal_invoice_payment"/>
                 </div>
             </div>
-            <div class="panel-body" t-if="existing_token">
+            <div class="panel-body" t-if="existing_token"><!-- FIXME -->
                 <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>
diff --git a/addons/calendar/views/calendar_templates.xml b/addons/calendar/views/calendar_templates.xml
index f2a6ca2b152..4342144fcdd 100644
--- a/addons/calendar/views/calendar_templates.xml
+++ b/addons/calendar/views/calendar_templates.xml
@@ -29,11 +29,11 @@
                     <img class="img img-fluid center-block" src="/web/binary/company_logo" alt="Logo"/>
                 </div>
 
-                <div class="panel panel-default">
-                    <div class="panel-heading">
+                <div class="card">
+                    <div class="card-header">
                         <h2>Calendar Invitation <small><t t-esc="event.name"/></small></h2>
                     </div>
-                    <div class="panel-body">
+                    <div class="card-body">
                         <div class="clearfix mb16" t-if="attendee.state != 'needsAction'">
                             <span class="pull-right label label-info">
                                 <t t-if="attendee.state == 'accepted'">Yes I'm going.</t>
diff --git a/addons/hr_org_chart/static/src/scss/hr_org_chart.scss b/addons/hr_org_chart/static/src/scss/hr_org_chart.scss
index 3d8b3e54933..b708eb48753 100644
--- a/addons/hr_org_chart/static/src/scss/hr_org_chart.scss
+++ b/addons/hr_org_chart/static/src/scss/hr_org_chart.scss
@@ -169,7 +169,7 @@
             background-size: cover;
             background-position: center center;
 
-            &.well {
+            &.card {
                 height: 20px;
                 box-shadow: none;
                 border-color: transparent;
diff --git a/addons/hr_org_chart/static/src/xml/hr_org_chart.xml b/addons/hr_org_chart/static/src/xml/hr_org_chart.xml
index 2984d98a72d..2e6f9377785 100644
--- a/addons/hr_org_chart/static/src/xml/hr_org_chart.xml
+++ b/addons/hr_org_chart/static/src/xml/hr_org_chart.xml
@@ -60,7 +60,7 @@
         <t t-if='managers_more'>
             <div class="o_org_chart_entry o_org_chart_more media">
                 <div class="media-left">
-                    <a class="well media-object text-center o_employee_redirect"
+                    <a class="media-object text-center o_employee_redirect"
                             t-att-href="managers[0].link"
                             t-att-data-employee-id="managers[0].id">
                         <i t-attf-class="fa fa-angle-double-up" role="img" aria-label="More managers" title="More managers"/>
@@ -105,7 +105,7 @@
                 <div class="media-left">
                     <a href="#"
                         t-att-data-employee-id="self.id"
-                        class="well o_org_chart_show_more media-object text-center o_employee_sub_redirect">&#8230;</a>
+                        class="o_org_chart_show_more media-object text-center o_employee_sub_redirect">&#8230;</a>
                 </div>
             </div>
         </t>
diff --git a/addons/hr_timesheet/views/project_portal_templates.xml b/addons/hr_timesheet/views/project_portal_templates.xml
index de30a5df302..32cc7a6f132 100644
--- a/addons/hr_timesheet/views/project_portal_templates.xml
+++ b/addons/hr_timesheet/views/project_portal_templates.xml
@@ -2,7 +2,7 @@
 <odoo>
 
     <template id="portal_my_task" inherit_id="project.portal_my_task" name="Portal: My Task with imesheets">
-        <xpath expr="//div[hasclass('panel-body')]" position="inside">
+        <xpath expr="//div[hasclass('card-body')]" position="inside">
             <div class="container" t-if="task.timesheet_ids">
                 <hr/>
                 <table class="table table-hover">
diff --git a/addons/mail/static/src/scss/mail_activity.scss b/addons/mail/static/src/scss/mail_activity.scss
index 647362deecf..05337117a21 100644
--- a/addons/mail/static/src/scss/mail_activity.scss
+++ b/addons/mail/static/src/scss/mail_activity.scss
@@ -77,7 +77,7 @@
                 }
             }
 
-            .o_thread_message_collapse .dl-horizontal.well {
+            .o_thread_message_collapse .dl-horizontal.card {
                 display: inline-block;
                 margin-bottom: 0;
 
diff --git a/addons/mail/static/src/xml/activity.xml b/addons/mail/static/src/xml/activity.xml
index abad7e51a4f..cbb2b222c90 100644
--- a/addons/mail/static/src/xml/activity.xml
+++ b/addons/mail/static/src/xml/activity.xml
@@ -33,7 +33,7 @@
                                 <i class="fa fa-info-circle" role="img" aria-label="Info" title="Info"></i>
                             </a>
                             <div class="o_thread_message_collapse collapse" t-attf-id="o_chatter_activity_info_#{activity.id}">
-                                <dl class="dl-horizontal well">
+                                <dl class="dl-horizontal">
                                     <dt>Activity type</dt>
                                     <dd class="mb8">
                                         <t t-esc="activity.activity_type_id[1]"/>
diff --git a/addons/payment/views/payment_templates.xml b/addons/payment/views/payment_templates.xml
index b0a733a7fad..73eb1d88040 100644
--- a/addons/payment/views/payment_templates.xml
+++ b/addons/payment/views/payment_templates.xml
@@ -40,12 +40,12 @@
             <input type="hidden" t-if="error_url" name="error_url" t-att-value="error_url"/>
             <input type="hidden" t-if="callback_method" name="callback_method" t-att-value="callback_method"/>
 
-            <div class="panel panel-default">
+            <div class="card">
                 <t t-set="acquirers_count" t-value="(len(s2s_acquirers) if s2s_acquirers else 0) + (len(form_acquirers) if form_acquirers else 0)"/>
                 <t t-set="pms_count" t-value="len(pms) if pms else 0"/>
                 <t t-set="MAX_BRAND_LINE" t-value="3"/>
                 <t t-foreach="s2s_acquirers" t-as="acq">
-                    <div class="panel-body">
+                    <div class="card-body">
                         <label>
                             <t t-if="mode == 'manage'">
                                 <input type="radio" t-att-data-acquirer-id="acq.id"
@@ -81,7 +81,7 @@
                             </t>
                         </ul>
                     </div>
-                    <div t-attf-id="o_payment_add_token_acq_{{acq.id}}" t-attf-class="panel-footer {{'d-none' if(acquirers_count &gt; 1 and pms_count==0 and s2s_acquirers[0]!=acq) else 'd-none' if pms_count &gt;0 else ''}}">
+                    <div t-attf-id="o_payment_add_token_acq_{{acq.id}}" t-attf-class="card-footer {{'d-none' if(acquirers_count &gt; 1 and pms_count==0 and s2s_acquirers[0]!=acq) else 'd-none' if pms_count &gt;0 else ''}}">
                         <div class="clearfix">
                             <t t-call="{{acq.sudo().get_s2s_form_xml_id()}}">
                                 <t t-set="id" t-value="acq.id"/>
@@ -92,7 +92,7 @@
                     </div>
                 </t>
                 <t t-if="mode == 'payment'" t-foreach="form_acquirers" t-as="acq">
-                    <div class="panel-body">
+                    <div class="card-body">
                         <label>
                             <input type="radio" t-att-data-acquirer-id="acq.id"
                                 t-att-data-form-payment="true"
@@ -118,12 +118,12 @@
                             </t>
                         </ul>
                     </div>
-                    <div t-attf-id="o_payment_form_acq_{{acq.id}}" t-attf-class="d-none {{'panel-footer' if acq.save_token == 'ask' else ''}}">
+                    <div t-attf-id="o_payment_form_acq_{{acq.id}}" t-attf-class="d-none {{'card-footer' if acq.save_token == 'ask' else ''}}">
                         <label t-if="acq.save_token == 'ask'"><input type="checkbox" name="o_payment_form_save_token" data-remove-me=""/> Save my payment data</label>
                     </div>
                 </t>
                 <t t-foreach="pms" t-as="pm">
-                    <div class="panel-body">
+                    <div class="card-body">
                         <label>
                             <input t-if="mode == 'payment'" type="radio" name="pm_id" t-att-value="pm.id" t-att-checked="checked_pm_id == pm.id"/>
                             <span class="payment_option_name" t-esc="pm.name"/>
diff --git a/addons/portal/static/src/js/portal_signature.js b/addons/portal/static/src/js/portal_signature.js
index 96e729f5869..24fcc843aa4 100644
--- a/addons/portal/static/src/js/portal_signature.js
+++ b/addons/portal/static/src/js/portal_signature.js
@@ -62,7 +62,7 @@ odoo.define('portal.signature_form', function (require){
             var is_empty = signature ? this.empty_sign[1] === signature[1] : true;
 
             this.$('#o_portal_sign_name').parent().toggleClass('has-error', !partner_name);
-            this.$('#o_portal_sign_draw').toggleClass('panel-danger', is_empty).toggleClass('panel-default', !is_empty);
+            this.$('#o_portal_sign_draw').toggleClass('bg-danger text-white', is_empty);
             if (is_empty || ! partner_name) {
                 return false;
             }
diff --git a/addons/portal/static/src/xml/portal_signature.xml b/addons/portal/static/src/xml/portal_signature.xml
index 801b88cb06a..5c032da0543 100644
--- a/addons/portal/static/src/xml/portal_signature.xml
+++ b/addons/portal/static/src/xml/portal_signature.xml
@@ -6,14 +6,14 @@
                 <label class="control-label" for="name">Your Name</label>
                 <input type="text" name="partner_name" id="o_portal_sign_name" class="form-control" t-att-value="widget.options.partnerName"/>
             </div>
-            <div class="panel panel-default mt16 mb0" id="o_portal_sign_draw">
-                <div class="panel-heading">
+            <div class="card mt16 mb0" id="o_portal_sign_draw">
+                <div class="card-header">
                     <div class="pull-right">
                         <a role="button" id="o_portal_sign_clear" class="btn btn-xs">Clear</a>
                     </div>
                     <strong>Draw your signature</strong>
                 </div>
-                <div id="o_portal_signature" class="panel-body" style="padding: 0"/>
+                <div id="o_portal_signature" class="card-body" style="padding: 0"/>
             </div>
             <div class="mt16 clearfix">
               <button type="submit" class="btn btn-primary o_portal_sign_submit pull-right"><t t-esc="widget.options.signLabel or 'Accept &amp; Sign'"/></button>
diff --git a/addons/project/views/project_portal_templates.xml b/addons/project/views/project_portal_templates.xml
index b9e0770e1b6..3211922fc49 100644
--- a/addons/project/views/project_portal_templates.xml
+++ b/addons/project/views/project_portal_templates.xml
@@ -42,7 +42,7 @@
                     There are no projects.
                 </div>
             </t>
-            <div t-if="projects" class="panel panel-default">
+            <div t-if="projects" class="card">
                 <div class="table-responsive"><table class="table table-hover o_portal_my_doc_table">
                     <thead>
                         <tr class="active">
@@ -73,8 +73,8 @@
 
     <template id="portal_my_project" name="My Project">
         <t t-call="portal.portal_layout">
-            <div class="panel panel-default">
-                <div class="panel-heading">
+            <div class="card">
+                <div class="card-header">
                     <div class="row">
                         <div class="col-lg-12">
                             <h4>
@@ -83,7 +83,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="panel-body">
+                <div class="card-body">
                     <div class='row'>
                         <div class="col-lg-6">
                             <t t-if="project.partner_id">
@@ -124,7 +124,7 @@
                     There are no tasks.
                 </div>
             </t>
-            <div t-if="grouped_tasks" class="panel panel-default">
+            <div t-if="grouped_tasks" class="card">
                 <div class="table-responsive">
                     <t t-foreach="grouped_tasks" t-as="tasks">
                         <table class="table table-hover o_portal_my_doc_table">
@@ -163,8 +163,8 @@
 
     <template id="portal_my_task" name="My Task">
         <t t-call="portal.portal_layout">
-            <div class="panel panel-default">
-                <div class="panel-heading">
+            <div class="card">
+                <div class="card-header">
                     <div class="row">
                         <div class="col-lg-12">
                             <h4>
@@ -175,7 +175,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="panel-body">
+                <div class="card-body">
                     <div class="mb8" t-if="user.partner_id.id in task.sudo().project_id.message_partner_ids.ids">
                         <strong>Project:</strong> <a t-attf-href="/my/project/#{task.project_id.id}" t-field="task.project_id.name"/>
                     </div>
@@ -192,7 +192,7 @@
                                     <address t-field="task.user_id" t-field-options='{"widget": "contact", "fields": ["name", "email", "phone"]}'/>
                                 </div>
                             </div>
-                            <div t-if="task.attachment_ids" class='panel-footer'>
+                            <div t-if="task.attachment_ids" class='card-footer'>
                                 <strong>
                                     <t t-if='len(task.attachment_ids)&gt;1'>Attachments</t>
                                     <t t-else="">Attachment</t>
diff --git a/addons/project/views/project_rating_templates.xml b/addons/project/views/project_rating_templates.xml
index 11954d5a590..bd6a9be5c36 100644
--- a/addons/project/views/project_rating_templates.xml
+++ b/addons/project/views/project_rating_templates.xml
@@ -21,8 +21,8 @@
                             </t>
                             <t t-foreach="projects" t-as="project">
                                 <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="card">
+                                        <div class="card-body">
                                             <div class="caption">
                                                 <span class="label label-default pull-right"><t t-esc="project.privacy_visibility"/></span>
                                                 <h4><t t-esc="project.name"/></h4>
diff --git a/addons/purchase/views/portal_templates.xml b/addons/purchase/views/portal_templates.xml
index 21627f95e35..bcc62dc0f2a 100644
--- a/addons/purchase/views/portal_templates.xml
+++ b/addons/purchase/views/portal_templates.xml
@@ -27,7 +27,7 @@
       <t t-call="portal.portal_searchbar">
         <t t-set="title">Purchase Orders</t>
       </t>
-      <div t-if="orders" class="panel panel-default">
+      <div t-if="orders" class="card">
       <div class="table-responsive"><table class="table table-hover o_portal_my_doc_table">
         <thead>
           <tr class="active">
@@ -68,8 +68,8 @@
       <t t-set="purchase_order" t-value="order"/>
       <div id="optional_placeholder"></div>
       <div class="container">
-          <div class="panel panel-default">
-            <div class="panel-heading">
+          <div class="card">
+            <div class="card-header">
               <div class="row">
                 <div class="col-lg-12">
                   <h4>
@@ -79,7 +79,7 @@
                 </div>
               </div>
             </div>
-            <div class="panel-body">
+            <div class="card-body">
               <div class="mb8">
                   <strong>Date:</strong> <span t-field="order.date_order" t-options='{"widget": "date"}'/>
               </div>
diff --git a/addons/sale/views/sale_onboarding_views.xml b/addons/sale/views/sale_onboarding_views.xml
index 6811c09631d..0f4ae9ede2e 100644
--- a/addons/sale/views/sale_onboarding_views.xml
+++ b/addons/sale/views/sale_onboarding_views.xml
@@ -52,7 +52,7 @@
         <field name="model">res.company</field>
         <field name="arch" type="xml">
             <form string="Request an electronic signature">
-                <div class="panel-body row">
+                <div class="panel-body row"><!-- FIXME -->
                     Quotations can be confirmed automatically based on a customer signature, in
                     order to automate the delivery process. This functionality is convenient for all
                     the parties and offers as much legal guarantee as a paper signature.
@@ -60,7 +60,7 @@
                     <br />
                     Do you want to activate the digital signature?
                 </div>
-                <div class="panel-body row">
+                <div class="panel-body row"><!-- FIXME -->
                     <field name="portal_confirmation_sign_radio" widget="radio" />
                 </div>
                 <footer>
diff --git a/addons/sale/views/sale_portal_templates.xml b/addons/sale/views/sale_portal_templates.xml
index 782650066f9..a744751c8fa 100644
--- a/addons/sale/views/sale_portal_templates.xml
+++ b/addons/sale/views/sale_portal_templates.xml
@@ -38,7 +38,7 @@
         <t t-if="not quotations">
             <p>There are currently no quotations for your account.</p>
         </t>
-        <div t-if="quotations" class="panel panel-default">
+        <div t-if="quotations" class="card">
             <div class="table-responsive"><table class="table table-hover o_portal_my_doc_table">
                 <thead>
                   <tr class="active">
@@ -84,7 +84,7 @@
         <t t-if="not orders">
             <p>There are currently no orders for your account.</p>
         </t>
-        <div t-if="orders" class="panel panel-default">
+        <div t-if="orders" class="card">
             <div class="table-responsive"><table class="table table-hover o_portal_my_doc_table">
                 <thead>
                   <tr class="active">
@@ -129,8 +129,8 @@
         <t t-set="invoices_amount" t-value="sum(i.amount_total for i in invoices)"/>
         <div id="optional_placeholder"></div>
         <div class="container">
-          <div class="panel panel-default">
-            <div class="panel-heading">
+          <div class="card">
+            <div class="card-header">
               <div class="row">
                 <div class="col-lg-6 col-9 col-md-9">
                     <h4>
@@ -163,7 +163,7 @@
                 </div>
               </div>
             </div>
-            <div class="panel-body">
+            <div class="card-body">
               <t t-if="error or warning" t-call="sale.portal_order_error"/>
               <t t-if="success and (not error and not warning)" t-call="sale.portal_order_success"/>
               <div class="mb8">
@@ -357,7 +357,7 @@
                 </div>
               </div>
             </div>
-            <div class="panel-body">
+            <div class="card-body">
                 <div class="row" t-if="order.state == 'sent' and portal_confirmation == 'sign'" id="portal_sign">
                     <div class="offset-lg-3 col-lg-6">
                         <h4>Accept &amp; Sign</h4>
diff --git a/addons/sale_payment/views/sale_portal_templates.xml b/addons/sale_payment/views/sale_portal_templates.xml
index 8f30ffcc83f..c283b7ca722 100644
--- a/addons/sale_payment/views/sale_portal_templates.xml
+++ b/addons/sale_payment/views/sale_portal_templates.xml
@@ -38,7 +38,7 @@
                         </t>
                     </div>
                 </div>
-                <div class="panel-body" t-if="existing_token">
+                <div class="panel-body" t-if="existing_token"><!-- FIXME -->
                     <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>
diff --git a/addons/survey/static/src/js/survey_result.js b/addons/survey/static/src/js/survey_result.js
index 0b4003f5991..6e2351ae39a 100644
--- a/addons/survey/static/src/js/survey_result.js
+++ b/addons/survey/static/src/js/survey_result.js
@@ -41,7 +41,7 @@ if(!$('.js_surveyresult').length) {
 
         // Replacing Library's Default Tooltip with our Custom One
         chart.tooltip(function(key, x, y, e) {
-            return '<h5 class="panel-primary"><div class="panel-heading">' + x + '</div></h5>' +
+            return '<h5 class="bg-primary text-white"><div class="card-header">' + x + '</div></h5>' +
             '<p>' + '<b>Responses : </b>' + key + '</p>' +
             '<p>' + "<b>Total Vote : </b>" + y + '</p>';
         });
diff --git a/addons/survey/views/survey_result.xml b/addons/survey/views/survey_result.xml
index 01e64128d56..e928efa5afc 100644
--- a/addons/survey/views/survey_result.xml
+++ b/addons/survey/views/survey_result.xml
@@ -10,9 +10,9 @@
                     <h1><span t-field="survey.title" /> <span style="font-size:1.5em;" class="fa fa-bar-chart-o pull-right " role="img" aria-label="Chart" title="Chart"/></h1>
                     <div t-field="survey.description" class="oe_no_empty" />
                 </div>
-                <div class="panel panel-default d-print-none">
-                    <div class="panel-heading"><span class="fa fa-filter"></span>  Filters <span t-if="filter_display_data" class="pull-right text-primary clear_survey_filter"><i class="fa fa-times"></i> Clear All Filters</span></div>
-                    <div class="panel-body">
+                <div class="card d-print-none">
+                    <div class="card-header"><span class="fa fa-filter"></span>  Filters <span t-if="filter_display_data" class="pull-right text-primary clear_survey_filter"><i class="fa fa-times"></i> Clear All Filters</span></div>
+                    <div class="card-body">
                         <span t-if="filter_finish == True">
                             <span class="label label-default only_left_radius filter-all">All surveys</span><span class="label label-primary only_right_radius filter-finished">Finished surveys</span>
                         </span>
diff --git a/addons/web_editor/static/src/scss/web_editor.ui.scss b/addons/web_editor/static/src/scss/web_editor.ui.scss
index e22d98a9ffb..eb872c432e3 100644
--- a/addons/web_editor/static/src/scss/web_editor.ui.scss
+++ b/addons/web_editor/static/src/scss/web_editor.ui.scss
@@ -1356,7 +1356,7 @@ body .modal {
                 }
             }
 
-            .well {
+            .card {
                 border-color: gray('200');
                 border-top-width: 0;
             }
@@ -1422,7 +1422,7 @@ body .modal {
             }
 
             #editor-media-image, #editor-media-document {
-                .well {
+                .card {
                     label {
                         margin: auto 10px;
                     }
@@ -1434,7 +1434,7 @@ body .modal {
             }
 
             // VIDEO TAB
-            #editor-media-video .well {
+            #editor-media-video .card {
                 padding: 0;
                 display: flex;
                 flex-flow: row wrap;
diff --git a/addons/web_editor/static/src/scss/web_editor.variables.scss b/addons/web_editor/static/src/scss/web_editor.variables.scss
index 37a24e1b79c..b5472208bff 100644
--- a/addons/web_editor/static/src/scss/web_editor.variables.scss
+++ b/addons/web_editor/static/src/scss/web_editor.variables.scss
@@ -209,7 +209,7 @@ $o-we-switch-inactive-color: $o-we-color-paper !default;
 }
 
 @mixin o-w-preserve-wells {
-    .well {
+    .card {
         padding: 19px;
         margin-bottom: 20px;
         background-color: $o-we-color-paper;
diff --git a/addons/web_editor/static/src/xml/editor.xml b/addons/web_editor/static/src/xml/editor.xml
index c94b9ee18fe..1b478a09d9c 100644
--- a/addons/web_editor/static/src/xml/editor.xml
+++ b/addons/web_editor/static/src/xml/editor.xml
@@ -88,17 +88,19 @@
             <input type="hidden" name="filters" t-att-value="widget.firstFilters.join('_')"/>
             <input t-if="widget.options.res_id" type="hidden" name="res_id" t-att-value="widget.options.res_id"/>
             <input t-if="widget.options.res_model" type="hidden" name="res_model" t-att-value="widget.options.res_model"/>
-            <div class="well">
-                <div class="form-group pull-left">
-                    <input type="file" class="d-none" name="upload" t-att-accept="widget.accept" multiple="multiple"/>
-                    <input type="hidden" name="disable_optimization" value=""/>
-                    <div class="btn-group">
-                        <button class="btn btn-primary o_upload_image_button" type="button">Upload an image</button>
-                        <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button">
-                            <span class="sr-only">Alternate Upload</span>
-                        </button>
-                        <div class="dropdown-menu" role="menu">
-                            <a role="menuitem" class="dropdown-item o_upload_image_button_no_optimization">Upload image without optimization</a>
+            <div class="card">
+                <div class="card-body">
+                    <div class="form-group pull-left">
+                        <input type="file" class="d-none" name="upload" t-att-accept="widget.accept" multiple="multiple"/>
+                        <input type="hidden" name="disable_optimization" value=""/>
+                        <div class="btn-group">
+                            <button class="btn btn-primary o_upload_image_button" type="button">Upload an image</button>
+                            <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button">
+                                <span class="sr-only">Alternate Upload</span>
+                            </button>
+                            <div class="dropdown-menu" role="menu">
+                                <a role="menuitem" class="dropdown-item o_upload_image_button_no_optimization">Upload image without optimization</a>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -184,8 +186,8 @@
     </t>
 
     <!-- Video choosing part of the Media Dialog -->
-    <t t-name="web_editor.dialog.video">
-        <form action="#" class="form-inline well">
+    <div t-name="web_editor.dialog.video" class="card">
+        <form action="#" class="form-inline card-body">
             <div class="o_video_dialog_form">
                 <div class="form-group" id="o_video_form_group">
                     <label class="mt8" for="o_video_text">Video code <small class="text-muted">(URL or Embed)</small></label>
@@ -230,7 +232,7 @@
                 </div>
             </div>
         </form>
-    </t>
+    </div>
 
     <!-- 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">
diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index c71afc1085f..14f1b6f0a4f 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -758,7 +758,7 @@ options.registry.collapse = options.Class.extend({
      */
     onClone: function () {
         this.$target.find('[data-toggle="collapse"]').removeAttr('data-target').removeData('target');
-        this.$target.find('.panel-collapse').removeAttr('id');
+        this.$target.find('.collapse').removeAttr('id');
         this._createIDs();
     },
     /**
@@ -766,9 +766,9 @@ options.registry.collapse = options.Class.extend({
      */
     onMove: function () {
         this._createIDs();
-        var $panel = this.$target.find('.panel-collapse').removeData('bs.collapse');
+        var $panel = this.$target.find('.collapse').removeData('bs.collapse');
         if ($panel.attr('aria-expanded') === 'true') {
-            $panel.closest('.panel-group').find('.panel-collapse[aria-expanded="true"]')
+            $panel.closest('.accordion').find('.collapse[aria-expanded="true"]')
                 .filter(function () {return this !== $panel[0];})
                 .collapse('hide')
                 .one('hidden.bs.collapse', function () {
@@ -791,7 +791,7 @@ options.registry.collapse = options.Class.extend({
         var $tab = this.$target.find('[data-toggle="collapse"]');
 
         // link to the parent group
-        var $tablist = this.$target.closest('.panel-group');
+        var $tablist = this.$target.closest('.accordion');
         var tablist_id = $tablist.attr('id');
         if (!tablist_id) {
             tablist_id = 'myCollapse' + time;
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index 9076e9565ca..406b25e2e24 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -112,11 +112,11 @@ table.table_desc tr td {
     overflow: auto;
 }
 
-.s_comparisons .panel .list-group-item:not(.active) {
+.s_comparisons .card .list-group-item:not(.active) {
     color: #666;
 }
 .s_comparisons {
-    .panel small {
+    .card small {
         color: inherit;
     }
     .text-muted {
@@ -124,13 +124,13 @@ table.table_desc tr td {
     }
 }
 
-.s_faq_collapse .container .panel {
+.s_faq_collapse .container .card {
     background-color: inherit;
     border : 1px solid rgba(0, 0, 0, 0.15);
-    .panel-body {
+    .card-body {
         border-top: none;
-        border-bottom-left-radius: ($panel-border-radius - 1);
-        border-bottom-right-radius: ($panel-border-radius - 1);
+        border-bottom-left-radius: ($card-border-radius - 1);
+        border-bottom-right-radius: ($card-border-radius - 1);
     }
 }
 
diff --git a/addons/website/static/src/xml/website.seo.xml b/addons/website/static/src/xml/website.seo.xml
index 266dbe380ff..dd6decda977 100644
--- a/addons/website/static/src/xml/website.seo.xml
+++ b/addons/website/static/src/xml/website.seo.xml
@@ -26,9 +26,9 @@
             </div>
             <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">
-                        <div class="panel-body">
+                <div>
+                    <div class="card mb0">
+                        <div class="card-body">
                             <div class="js_seo_preview"/>
                         </div>
                     </div>
diff --git a/addons/website/static/src/xml/website.xml b/addons/website/static/src/xml/website.xml
index ca97d0a6eb1..72036f9217b 100644
--- a/addons/website/static/src/xml/website.xml
+++ b/addons/website/static/src/xml/website.xml
@@ -62,15 +62,17 @@
     </div>
 
     <div t-name="website.rename_page">
-        <div class="well">
-            <form class="form-horizontal">
-                <div class="form-group mb0">
-                    <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 class="card">
+            <div class="card-body">
+                <form class="form-horizontal">
+                    <div class="form-group mb0">
+                        <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>
-                </div>
-            </form>
+                </form>
+            </div>
         </div>
         <t t-call="website.dependencies"/>
     </div>
diff --git a/addons/website/views/snippets.xml b/addons/website/views/snippets.xml
index bc63db88c9b..b11375f7f3f 100644
--- a/addons/website/views/snippets.xml
+++ b/addons/website/views/snippets.xml
@@ -237,20 +237,20 @@
 </template>
 
 <template id="s_well" name="Well">
-    <div class="well s_well clearfix">
-        <p>
-            Explain the benefits you offer. Don't write about products or
-            services here, write about solutions.
-        </p>
+    <div class="card s_well clearfix">
+        <div class="card-body">
+            <p>
+                Explain the benefits you offer. Don't write about products or
+                services here, write about solutions.
+            </p>
+        </div>
     </div>
 </template>
 
 <template id="s_panel" name="Panel">
-    <div class="panel panel-default o_panel s_panel">
-        <div class="panel-heading ">
-            <h3 class="panel-title">Feature Title</h3>
-        </div>
-        <div class="panel-body">
+    <div class="card o_panel s_panel">
+        <h3 class="card-header">Feature Title</h3>
+        <div class="card-body">
             <p>
                 Panels are a great tool to compare offers or to emphasize on
                 key features. To compare products, use the inside columns.
@@ -307,14 +307,14 @@
             <h2 class="text-center">Our Offers</h2>
             <div class="row">
                 <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)">
+                    <div class="card bg-gray-light">
+                        <div class="card-header text-center" style="background-color: rgba(255, 255, 255, 0.1)">
                             <h3 style="margin: 0">Beginner</h3>
                             <p style="margin: 0">
                                 Starter package
                             </p>
                         </div>
-                        <div class="panel-body text-center">
+                        <div class="card-body text-center">
                             <h3 style="margin: 0"><span>$</span><b style="font-size: 60px">35</b><small>.00</small></h3>
                             <div>user / month (billed annually)</div>
                         </div>
@@ -324,7 +324,7 @@
                             <li class="list-group-item">No customization</li>
                             <li class="list-group-item">No support</li>
                         </ul>
-                        <div class="panel-footer text-center">
+                        <div class="card-footer text-center">
                             <p class="text-muted">
                                 <i>Instant setup, satisfied or reimbursed.</i>
                             </p>
@@ -333,12 +333,12 @@
                     </div>
                 </div>
                 <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)">
+                    <div class="card bg-beta">
+                        <div class="card-header text-center" style="background-color: rgba(255, 255, 255, 0.1)">
                             <h3 style="margin: 0">Professional</h3>
                             <p style="margin: 0">Enterprise package</p>
                         </div>
-                        <div class="panel-body text-center">
+                        <div class="card-body text-center">
                             <h3 style="margin: 0"><span>$</span><b style="font-size: 60px">65</b><small>.00</small></h3>
                             <div>user / month (billed annually)</div>
                         </div>
@@ -348,19 +348,19 @@
                             <li class="list-group-item">Limited customization</li>
                             <li class="list-group-item">Email support</li>
                         </ul>
-                        <div class="panel-footer text-center">
+                        <div class="card-footer text-center">
                             <p class="text-muted"><i>Instant setup, satisfied or reimbursed.</i></p>
                             <a role="button" href="/contactus" class="btn btn-primary btn-lg">Order now</a>
                         </div>
                     </div>
                 </div>
                 <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)">
+                    <div class="card bg-gray-light">
+                        <div class="card-header text-center" style="background-color: rgba(255, 255, 255, 0.1)">
                             <h3 style="margin: 0">Expert</h3>
                             <p style="margin: 0">Ultimate package</p>
                         </div>
-                        <div class="panel-body text-center">
+                        <div class="card-body text-center">
                             <h3 style="margin: 0"><span>$</span><b style="font-size: 60px">125</b><small>.00</small></h3>
                             <div>user / month (billed annually)</div>
                         </div>
@@ -370,7 +370,7 @@
                             <li class="list-group-item">Unlimited customization</li>
                             <li class="list-group-item">24x7 toll-free support</li>
                         </ul>
-                        <div class="panel-footer text-center">
+                        <div class="card-footer text-center">
                             <p class="text-muted"><i>Instant setup, satisfied or reimbursed.</i></p>
                             <a role="button" href="/contactus" class="btn btn-primary btn-lg">Contact us</a>
                         </div>
@@ -479,15 +479,11 @@
     <section class="s_faq_collapse">
         <div class="container">
             <h2 class="page-header"> General Terms and Conditions / Service Policies </h2>
-            <div class="panel-group" role="tablist">
-                <div class="panel">
-                    <div class="panel-heading bg-gray-lighter" role="tab" data-toggle="collapse">
-                        <h4 class="panel-title">
-                            Terms of service
-                        </h4>
-                    </div>
-                    <div class="panel-collapse collapse" role="tabpanel">
-                        <div class="panel-body bg-white-50">
+            <div class="accordion" role="tablist">
+                <div class="card">
+                    <h4 class="card-header bg-gray-lighter" role="tab" data-toggle="collapse">Terms of service</h4>
+                    <div class="collapse" role="tabpanel">
+                        <div class="card-body bg-white-50">
                             <p>
                                 These terms of service ("Terms", "Agreement") are an agreement between the website
                                 ("Website operator", "us", "we" or "our") and you ("User", "you" or "your").
@@ -499,14 +495,10 @@
                         </div>
                     </div>
                 </div>
-                <div class="panel">
-                    <div class="panel-heading bg-gray-lighter" role="tab" data-toggle="collapse">
-                        <h4 class="panel-title">
-                            Links to other websites
-                        </h4>
-                    </div>
-                    <div class="panel-collapse collapse" role="tabpanel">
-                        <div class="panel-body bg-white-50">
+                <div class="card">
+                    <h4 class="card-header bg-gray-lighter" role="tab" data-toggle="collapse">Links to other websites</h4>
+                    <div class="collapse" role="tabpanel">
+                        <div class="card-body bg-white-50">
                             <p>
                                 Although this Website may be linked to other websites, we are not, directly or
                                 indirectly, implying any approval, association, sponsorship, endorsement, or
@@ -520,14 +512,10 @@
                         </div>
                     </div>
                 </div>
-                <div class="panel">
-                    <div class="panel-heading bg-gray-lighter" role="tab" data-toggle="collapse">
-                        <h4 class="panel-title">
-                            Use Of Cookies
-                        </h4>
-                    </div>
-                    <div class="panel-collapse collapse" role="tabpanel">
-                        <div class="panel-body bg-white-50">
+                <div class="card">
+                    <h4 class="card-header bg-gray-lighter" role="tab" data-toggle="collapse">Use Of Cookies</h4>
+                    <div class="collapse" role="tabpanel">
+                        <div class="card-body bg-white-50">
                             <p>Website may use cookies to personalize and facilitate maximum navigation of the
                                 User by this site. The User may configure his / her browser to notify and
                                 reject the installation of the cookies sent by us.</p>
@@ -909,8 +897,8 @@
     </div>
 
     <div data-js='content'
-        data-selector="blockquote, .well, .s_panel, .o_facebook_page, .oe_share, .o_image_floating"
-        data-drop-near="p, h1, h2, h3, blockquote, .well, .o_facebook_page, .s_panel, .oe_share"
+        data-selector="blockquote, .card, .s_panel, .o_facebook_page, .oe_share, .o_image_floating"
+        data-drop-near="p, h1, h2, h3, blockquote, .card, .o_facebook_page, .s_panel, .oe_share"
         data-drop-in=".content">
     </div>
 
@@ -968,8 +956,8 @@
     </div>
 
     <div data-js='collapse'
-         data-selector='.panel-group > .panel:has(> .panel-collapse)'
-         data-drop-in='.panel-group:has(> .panel > .panel-collapse)'>
+         data-selector='.accordion > .card:has(> .collapse)'
+         data-drop-in='.accordion:has(> .card > .collapse)'>
     </div>
 
     <div data-js="menu_data"
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index ac3e17f09f3..a46cbca04ca 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -571,7 +571,7 @@
 <template id="page_404">
     <t t-call="website.404">
         <div class="container">
-            <div class="well mt32">
+            <div class="alert alert-info mt32">
                 <p>This page does not exist, but you can create it as you are administrator of this site.</p>
                 <a role="button" class="btn btn-primary js_disable_on_click" t-attf-href="/website/add/#{ path }#{ from_template and '?template=%s' % from_template }">Create Page</a>
             </div>
@@ -595,17 +595,13 @@
 </template>
 
 <template id="http_error_debug">
-    <div class="container panel-group mb32 mt32" id="debug_infos">
-        <div class="panel panel-default" t-if="exception">
-            <div class="panel-heading">
-                <h4 class="panel-title">
-                    <a data-toggle="collapse" data-parent="#debug_infos" href="#error_main">
-                        Error
-                    </a>
-                </h4>
-            </div>
-            <div id="error_main" class="panel-collapse collapse in">
-                <div class="panel-body">
+    <div class="container accordion mb32 mt32" id="debug_infos">
+        <div class="card" t-if="exception">
+            <h4 class="card-header">
+                <a data-toggle="collapse" data-parent="#debug_infos" href="#error_main">Error</a>
+            </h4>
+            <div id="error_main" class="collapse in">
+                <div class="card-body">
                     <p t-if="website_controller">The following error was raised in the website controller <code t-esc="website_controller"/></p>
                     <p>
                         <strong>Error message:</strong>
@@ -614,16 +610,12 @@
                 </div>
             </div>
         </div>
-        <div class="panel panel-default" t-if="qweb_exception">
-            <div class="panel-heading">
-                <h4 class="panel-title">
-                    <a data-toggle="collapse" data-parent="#adebug_infos" href="#error_qweb">
-                        QWeb
-                    </a>
-                </h4>
-            </div>
-            <div id="error_qweb" class="panel-collapse collapse">
-                <div class="panel-body">
+        <div class="card" t-if="qweb_exception">
+            <h4 class="card-header">
+                <a data-toggle="collapse" data-parent="#adebug_infos" href="#error_qweb">QWeb</a>
+            </h4>
+            <div id="error_qweb" class="collapse">
+                <div class="card-body">
                     <p t-if="exception.qweb.get('message')">
                         <strong>Error message:</strong>
                         <pre t-esc="exception.qweb.get('message')"/>
@@ -638,16 +630,12 @@
                 </div>
             </div>
         </div>
-        <div class="panel panel-default" t-if="traceback">
-            <div class="panel-heading">
-                <h4 class="panel-title">
-                    <a data-toggle="collapse" data-parent="#adebug_infos" href="#error_traceback">
-                        Traceback
-                    </a>
-                </h4>
-            </div>
-            <div id="error_traceback" class="panel-collapse collapse">
-                <div class="panel-body">
+        <div class="card" t-if="traceback">
+            <h4 class="card-header">
+                <a data-toggle="collapse" data-parent="#adebug_infos" href="#error_traceback">Traceback</a>
+            </h4>
+            <div id="error_traceback" class="collapse">
+                <div class="card-body">
                     <pre id="exception_traceback" t-esc="traceback"/>
                 </div>
             </div>
@@ -849,7 +837,7 @@ Sitemap: <t t-esc="url_root"/>sitemap.xml
     </address>
     <t t-if="res_company.google_map_img()">
         <a t-att-href="res_company.google_map_link()" target="_BLANK">
-           <img class="thumbnail img-fluid" t-att-src="res_company.google_map_img()" alt="Google Maps"/>
+           <img class="img-fluid" t-att-src="res_company.google_map_img()" alt="Google Maps"/>
         </a>
     </t>
 </template>
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 22ab426dab3..968770545a7 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
@@ -235,7 +235,7 @@
             <div t-if="not leads" class="alert alert-warning mt8" role="alert">
                 There are no leads.
             </div>
-            <div t-if="leads" class="panel panel-default">
+            <div t-if="leads" class="card">
                 <table class="table table-hover">
                     <thead>
                         <tr class="active">
@@ -301,7 +301,7 @@
                     There are no opportunities.
                 </div>
             </t>
-            <div class="panel panel-default" t-if="opportunities">
+            <div class="card" t-if="opportunities">
                 <table class="table table-hover">
                     <thead>
                         <tr class="active">
@@ -337,8 +337,8 @@
 
     <template id="portal_my_lead" name="My Lead">
         <t t-call="portal.portal_layout">
-            <div class="panel panel-default">
-                <div class="panel-heading">
+            <div class="card">
+                <div class="card-header">
                     <div class="row">
                         <div class="col-lg-12">
                             <span class="pull-right" title="Rating" role="img" t-attf-aria-label="Rating: #{lead.priority} on 3">
@@ -352,7 +352,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="panel-body row">
+                <div class="card-body row">
                     <div class="col-lg-6">
                         <div class="row" t-if="lead.partner_name or lead.email_from or lead.partner_id">
                             <label class="col-4">Customer</label>
@@ -503,8 +503,8 @@
 
     <template id="portal_my_opportunity" name="My Opportunity">
         <t t-call="portal.portal_layout">
-            <div class="panel panel-default">
-                <div class="panel-heading">
+            <div class="card">
+                <div class="card-header">
                     <div class="row">
                         <div class="col-lg-12">
                             <h4 style="display:inline-block">
@@ -535,7 +535,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="panel-body">
+                <div class="card-body">
                     <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>
diff --git a/addons/website_customer/views/website_customer_templates.xml b/addons/website_customer/views/website_customer_templates.xml
index 391cb66b6cd..a5f11dc6e95 100644
--- a/addons/website_customer/views/website_customer_templates.xml
+++ b/addons/website_customer/views/website_customer_templates.xml
@@ -185,11 +185,11 @@
 
 <template id="implemented_by_block" name="Partner Implemented By Block">
         <t t-if="partner.assigned_partner_id and partner.assigned_partner_id.website_published">
-            <div class="panel panel-default">
-                <div class="panel-heading">
+            <div class="card">
+                <div class="card-header">
                     <h4>Implemented By</h4>
                 </div>
-                <div class="panel-body text-center">
+                <div class="card-body text-center">
         <h4>
             <a t-attf-href="/partners/#{slug(partner.assigned_partner_id)}">
               <span t-field="partner.assigned_partner_id"/>
@@ -201,7 +201,7 @@
                 t-options='{"widget": "image", "class": "center-block"}'
              />
         </div>
-        <address class="well text-left">
+        <address class="text-left">
              <div t-field="partner.assigned_partner_id" t-options='{
                  "widget": "contact",
                  "fields": ["address", "website", "phone", "email"]
diff --git a/addons/website_event/data/event_demo.xml b/addons/website_event/data/event_demo.xml
index 472d243202b..1a8ea0814c9 100644
--- a/addons/website_event/data/event_demo.xml
+++ b/addons/website_event/data/event_demo.xml
@@ -39,8 +39,8 @@
 </div>
 
 <div class="col-lg-4">
-<div class="panel panel-info">
-<div class="panel-heading text-center">
+<div class="card bg-info text-white">
+<div class="card-header text-center">
 <h2 style="margin: 0">Day 1</h2>
 
 <p class="text-muted" style="margin: 0">Introduction to Javascript</p>
@@ -52,15 +52,15 @@
 	<li class="list-group-item">Functions</li>
 	<li class="list-group-item">Loops</li>
 	<li class="list-group-item">Arrays</li>
-</ul><div class="panel-footer text-center">
+</ul><div class="card-footer text-center">
 <p class="text-muted"><i>You will be able to develop simple dynamic components in HTML pages.</i></p>
 </div>
 </div>
 </div>
 
 <div class="col-lg-4">
-<div class="panel panel-info">
-<div class="panel-heading text-center">
+<div class="card bg-info text-white">
+<div class="card-header text-center">
 <h2 style="margin: 0">Day 2</h2>
 
 <p class="text-muted" style="margin: 0">Odoo Web Client</p>
@@ -73,15 +73,15 @@
 	<li class="list-group-item">Controllers and Views</li>
 	<li class="list-group-item">Bootstrap CSS</li>
 	<li class="list-group-item">Calling the ORM</li>
-</ul><div class="panel-footer text-center">
+</ul><div class="card-footer text-center">
 <p class="text-muted"><i>You will be able to create dynamic page interacting with the ORM.</i></p>
 </div>
 </div>
 </div>
 
 <div class="col-lg-4">
-<div class="panel panel-info">
-<div class="panel-heading text-center">
+<div class="card bg-info text-white">
+<div class="card-header text-center">
 <h2 style="margin: 0">Day 3</h2>
 
 <p class="text-muted" style="margin: 0">Building a Full Application</p>
@@ -94,7 +94,7 @@
 	<li class="list-group-item">Training Center Module</li>
 	<li class="list-group-item">Integrated Help</li>
 	<li class="list-group-item">How to Debug</li>
-</ul><div class="panel-footer text-center">
+</ul><div class="card-footer text-center">
 <p class="text-muted"><i>You will be able to develop a full application with backend and user interface.</i></p>
 </div>
 </div>
diff --git a/addons/website_event/views/event_templates.xml b/addons/website_event/views/event_templates.xml
index f9acb92b87f..dc36e8f7cd0 100644
--- a/addons/website_event/views/event_templates.xml
+++ b/addons/website_event/views/event_templates.xml
@@ -331,11 +331,9 @@
             <div class="clearfix"/>
 
             <t t-if="not event.is_online">
-                <div class="panel panel-default" t-if="event.address_id">
-                    <div class="panel-heading">
-                        <h4>Where</h4>
-                    </div>
-                    <div class="panel-body">
+                <div class="card" t-if="event.address_id">
+                    <h4 class="card-header">Where</h4>
+                    <div class="card-body">
                         <t t-if="event.google_map_img()">
                             <a t-att-href="event.google_map_link()" target="_BLANK">
                                <img t-att-src="event.google_map_img()" width="100%%" alt="Google Maps"/>
@@ -352,31 +350,25 @@
                 </div>
             </t>
 
-            <div class="panel panel-default">
-                <div class="panel-heading">
-                    <h4>When</h4>
-                </div>
-                <div class="panel-body">
+            <div class="card">
+                <h4 class="card-header">When</h4>
+                <div class="card-body">
                     <i class="fa fa-clock-o"></i> From <span t-field="event.with_context(tz=event.date_tz).date_begin" t-options='{"hide_seconds":"True"}'> </span><br/>
                     <i class="fa fa-clock-o"></i> To <span t-field="event.with_context(tz=event.date_tz).date_end" t-options='{"hide_seconds":"True"}'> </span>
                 </div>
             </div>
 
-            <div class="panel panel-default" t-if="event.organizer_id">
-                <div class="panel-heading">
-                    <h4>Organizer</h4>
-                </div>
-                <div class="panel-body" t-field="event.organizer_id" t-options='{
+            <div class="card" t-if="event.organizer_id">
+                <h4 class="card-header">Organizer</h4>
+                <div class="card-body" t-field="event.organizer_id" t-options='{
                     "widget": "contact",
                     "fields": ["name", "phone", "mobile", "email"]
                     }'/>
             </div>
 
-            <div class="panel panel-default">
-                <div class="panel-heading">
-                    <h4>Social Stream</h4>
-                </div>
-                <div class="panel-body">
+            <div class="card">
+                <h4 class="card-header">Social Stream</h4>
+                <div class="card-body">
                     <t t-call="website_mail.follow"><t t-set="object" t-value="event"/></t>
                     <div t-if="event.twitter_hashtag" class="mt16">
                         <p><strong>Participate on Twitter</strong></p>
@@ -414,9 +406,9 @@
     <t t-set="tickets_available" t-value="event.seats_available or event.seats_availability == 'unlimited'"/>
     <t t-set="buy" t-value="tickets_available and event.state == 'confirm'"/>
     <div itemscope="itemscope" itemprop="offers" itemtype="http://schema.org/AggregateOffer">
-        <form id="registration_form" t-attf-action="/event/#{slug(event)}/registration/new" method="post" class="panel panel-default" t-if="buy">
+        <form id="registration_form" t-attf-action="/event/#{slug(event)}/registration/new" method="post" class="card" t-if="buy">
             <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
-            <div class="panel-heading d-none d-lg-block">
+            <div class="card-header d-none d-lg-block">
                 <div class="row">
                     <div class="col-lg-3">
                         <h5><b>Ticket Type</b></h5>
@@ -457,7 +449,7 @@
                     </select>
                 </t>
             </t>
-            <div class="panel-footer">
+            <div class="card-footer">
                 <div class="row">
                     <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}">
@@ -485,7 +477,7 @@
 </template>
 
 <template id="ticket" name="Ticket offer template">
-    <div class="col-12 d-lg-none panel-heading mb4">
+    <div class="col-12 d-lg-none card-header mb4">
         <h5>
             <strong>Ticket Type:</strong>
             <t t-raw="name"/>
@@ -494,7 +486,7 @@
             <t t-raw="description"/>
         </small>
     </div>
-    <div class="panel-body">
+    <div class="card-body">
         <div class="row" itemscope="itemscope" itemtype="http://schema.org/Offer">
             <div class="col-lg-3 d-none d-lg-block" t-raw="name"/>
             <div class="col-6 d-lg-none">
@@ -660,7 +652,7 @@
     <xpath expr="//div[@id='snippet_options']" position="inside">
         <div data-js='country_events'
             data-selector=".oe_country_events"
-            data-drop-near="p, h1, h2, h3, blockquote, .well, .panel"
+            data-drop-near="p, h1, h2, h3, blockquote, .card"
             data-drop-in=".content"
            >
         </div>
diff --git a/addons/website_event_track/views/event_track_templates.xml b/addons/website_event_track/views/event_track_templates.xml
index 43583baf218..fc3800174ff 100644
--- a/addons/website_event_track/views/event_track_templates.xml
+++ b/addons/website_event_track/views/event_track_templates.xml
@@ -235,7 +235,7 @@
                             </div>
                         </div>
                     </section>
-                    <div t-if="track.partner_id" class="well mt32">
+                    <div t-if="track.partner_id" class="mt32">
                         <div class="row">
                             <div class="col-md-2">
                                 <span t-field="track.partner_id.sudo().image_medium"
@@ -251,11 +251,9 @@
                     </div>
                 </div>
                 <div class="col-lg-4" id="right_column">
-                    <div class="panel panel-default">
-                        <div class="panel-heading">
-                            <h4>Practical Info</h4>
-                        </div>
-                        <div class="panel-body">
+                    <div class="card">
+                        <h4 class="card-header">Practical Info</h4>
+                        <div class="card-body">
                             <b>Date</b><br/>
                             <span t-field="track.date" t-options='{"hide_seconds":"True"}'/>
                             <t t-if="event.date_tz">(<span t-field="event.date_tz"/>)</t>
@@ -267,11 +265,9 @@
                         </div>
                     </div>
 
-                    <div class="panel panel-default" t-if="False">
-                        <div class="panel-heading">
-                            <h4>Documents</h4>
-                        </div>
-                        <div class="panel-body">
+                    <div class="card" t-if="False">
+                        <h4 class="card-header">Documents</h4>
+                        <div class="card-body">
                             Put here the list of documents, like slides of
                             the presentations. Remove the above t-if when
                             it's implemented.
@@ -285,11 +281,9 @@
 
 <template id="event_track_social" name="Social Widgets" inherit_id="website_event_track.track_view" active="False" customize_show="True">
     <xpath expr="//div[@id='right_column']" position="inside">
-        <div class="panel panel-default">
-            <div class="panel-heading">
-                <h4>Social Stream</h4>
-            </div>
-            <div class="panel-body">
+        <div class="card">
+            <h4 class="card-header">Social Stream</h4>
+            <div class="card-body">
                 <t t-call="website_mail.follow"><t t-set="object" t-value="event"/></t>
                 <div t-if="event.twitter_hashtag" class="mt16">
                     <p><strong>Participate on Twitter</strong></p>
@@ -404,11 +398,9 @@
                     </section>
                     <div class="oe_structure"/>
                 </div><div class="col-lg-3 offset-lg-1">
-                    <div class="panel panel-default">
-                        <div class="panel-heading">
-                            <h4>Talks Types</h4>
-                        </div>
-                        <div class="panel-body">
+                    <div class="card">
+                        <h4 class="card-header">Talks Types</h4>
+                        <div class="card-body">
                             <ul class="list-unstyled">
                                 <li>
                                     <strong>Regular Talks</strong>. These are standard talks with slides,
@@ -422,11 +414,9 @@
                     </div>
 
 
-                    <div class="panel panel-default">
-                        <div class="panel-heading">
-                            <h4>Submission Agreement</h4>
-                        </div>
-                        <div class="panel-body">
+                    <div class="card">
+                        <h4 class="card-header">Submission Agreement</h4>
+                        <div class="card-body">
                             <p>
                             We require speakers to accept an agreement in which they commit to:
                             </p>
diff --git a/addons/website_forum/static/src/js/website_forum.js b/addons/website_forum/static/src/js/website_forum.js
index 96cc4946b64..d0bc94c4889 100644
--- a/addons/website_forum/static/src/js/website_forum.js
+++ b/addons/website_forum/static/src/js/website_forum.js
@@ -177,7 +177,7 @@ odoo.define('website_forum.website_forum', function (require) {
         $(this).parents('.post_to_validate').hide();
         $.get($link.attr('href'))
             .fail(function() {
-                self.parents('.o_js_validation_queue > div').addClass('panel-danger').css('background-color', '#FAA');
+                self.parents('.o_js_validation_queue > div').addClass('bg-danger text-white').css('background-color', '#FAA');
                 self.parents('.post_to_validate').show();
             })
             .done(function() {
diff --git a/addons/website_forum/views/website_forum.xml b/addons/website_forum/views/website_forum.xml
index d391316c8a0..1f94d7af120 100644
--- a/addons/website_forum/views/website_forum.xml
+++ b/addons/website_forum/views/website_forum.xml
@@ -145,52 +145,42 @@
                             </div>
                         </t>
                     </div>
-                    <div class="panel panel-default">
-                        <div class="panel-heading">
-                            <h3 class="panel-title">Keep Informed</h3>
-                        </div>
-                        <div class="panel-body">
+                    <div class="card">
+                        <h3 class="card-header">Keep Informed</h3>
+                        <div class="card-body">
                             <t t-call="website_mail.follow">
                                 <t t-set="email" t-value="user.email"/>
                                 <t t-set="object" t-value="forum"/>
                             </t>
                         </div>
                     </div>
-                    <div class="panel panel-default" id="about_forum">
-                        <div class="panel-heading">
-                            <h3 class="panel-title">About This Community</h3>
-                        </div>
-                        <div class="panel-body">
+                    <div class="card" id="about_forum">
+                        <h3 class="card-header">About This Community</h3>
+                        <div class="card-body">
                             <span t-field="forum.description"/>
                             <a t-if="not header.get('is_guidelines')" t-attf-href="/forum/#{slug(forum)}/faq" class="fa fa-arrow-right"> Read Guidelines</a>
                             <a t-if="header.get('is_guidelines')" t-attf-href="/forum/#{slug(forum)}" class="fa fa-arrow-right"> Back to <span t-field="forum.name"/></a>
                         </div>
                     </div>
-                    <div class="panel panel-default" id="moderation_tools" t-if="user.karma>=forum.karma_moderate">
-                        <div class="panel-heading">
-                            <h3 class="panel-title">Moderation Tools</h3>
-                        </div>
-                        <div class="panel-body text-center">
+                    <div class="card" id="moderation_tools" t-if="user.karma>=forum.karma_moderate">
+                        <h3 class="card-header">Moderation Tools</h3>
+                        <div class="card-body text-center">
                             <a t-attf-href="/forum/#{slug(forum)}/validation_queue"><strong><t t-esc="forum.count_posts_waiting_validation"/></strong> waiting for validation</a>
                             <hr style="margin-top:4px;margin-bottom:0;padding-bottom:4px;" />
                             <a t-attf-href="/forum/#{slug(forum)}/flagged_queue"><strong id="count_flagged_posts"><t t-esc="forum.count_flagged_posts"/></strong> post<t t-if="forum.count_flagged_posts&gt;1">s</t> flagged</a>
                         </div>
                     </div>
                     <div t-if="header.get('question_data')">
-                        <div class="panel panel-default">
-                            <div class="panel-heading text-center">
-                                <h3 class="panel-title">Question tools</h3>
-                            </div>
-                            <div class="panel-body text-center">
+                        <div class="card">
+                            <h3 class="card-header text-center">Question tools</h3>
+                            <div class="card-body text-center">
                                 <t t-call="website_mail.follow"><t t-set="object" t-value="question"/></t>
                                 <div class="mt8">
                                     <strong><t t-raw="len(question.message_follower_ids)"/></strong> follower(s)
                                 </div>
                             </div>
-                            <div class="panel-heading text-center">
-                                <h3 class="panel-title ">Stats</h3>
-                            </div>
-                            <div class="panel-body">
+                            <h3 class="card-header text-center">Stats</h3>
+                            <div class="card-body">
                                 <table class="table">
                                     <thead><tr><td> Asked: <strong><span t-field="question.create_date" t-options='{"format":"short"}'/></strong></td></tr></thead>
                                     <tr><td> Seen: <strong><t t-raw="question.views"/></strong>
@@ -384,7 +374,7 @@
         <div class="container">
             <h1 class="mb32">Our forums</h1>
             <div class="row">
-                <div t-if="not forums" class="well">No forum post yet.</div>
+                <div t-if="not forums" class="alert alert-info">No forum post yet.</div>
                 <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"/>
@@ -1054,19 +1044,21 @@
 
 <!-- Template for user tooltip  -->
 <template id="forum_user_tooltip">
-    <div class="o_forum_user_bio text-left panel panel-body">
-        <a t-att-href="user_profile_url">
-            <img class="pull-left img img-rounded o_forum_avatar_big" t-attf-src="/forum/user/#{answer.create_uid.id}/avatar" alt="Avatar"/>
-        </a>
-        <div class="o_forum_tooltip_header">
-            <h4 class="o_forum_tooltip_heading"><a t-att-href="user_profile_url"
-                t-field="answer.create_uid"
-                t-options='{"widget": "contact", "country_image": True, "fields": ["name", "country_id"]}'
-                style="display: inline-block;"/>
-            </h4>
-            <span t-field="answer.create_uid" t-options='{"widget": "contact", "UserBio": True, "badges": True, "fields": ["karma"]}'/>
+    <div class="o_forum_user_bio text-left card">
+        <div class="card-body">
+            <a t-att-href="user_profile_url">
+                <img class="pull-left img img-rounded o_forum_avatar_big" t-attf-src="/forum/user/#{answer.create_uid.id}/avatar" alt="Avatar"/>
+            </a>
+            <div class="o_forum_tooltip_header">
+                <h4 class="o_forum_tooltip_heading"><a t-att-href="user_profile_url"
+                    t-field="answer.create_uid"
+                    t-options='{"widget": "contact", "country_image": True, "fields": ["name", "country_id"]}'
+                    style="display: inline-block;"/>
+                </h4>
+                <span t-field="answer.create_uid" t-options='{"widget": "contact", "UserBio": True, "badges": True, "fields": ["karma"]}'/>
+            </div>
+            <div t-field="answer.create_uid" t-options='{"widget": "contact", "website_description": True, "fields": ["partner_id"]}'/>
         </div>
-        <div t-field="answer.create_uid" t-options='{"widget": "contact", "website_description": True, "fields": ["partner_id"]}'/>
     </div>
 </template>
 
@@ -1144,7 +1136,7 @@
                         t-attf-class="label #{'label-primary' if tag.message_is_follower else 'label-default'}">
                     <span t-field="tag.name"/>
                 </a>
-                <div t-attf-class="well o_forum_tag_follow_box">
+                <div t-attf-class="o_forum_tag_follow_box">
                     <div class="row input-group">
                         <span>
                             <t t-call="website_mail.follow">
@@ -1214,7 +1206,7 @@
         </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-md-2 o_js_validation_queue">
-                <div class="panel panel-default text-center" style="background-color:#eee;margin:0;padding:5px 12px 5px 12px;">
+                <div class="card 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>
                     <a t-if="queue_type == 'flagged'" t-attf-href="/forum/#{slug(forum)}/post/#{slug(question)}/ask_for_mark_as_offensive" aria-label="Mark as offensive" title="Mark as offensive"><i class="fa fa-times fa-2x"/></a>
@@ -1414,7 +1406,7 @@
                     </td>
                 </tr>
                 </table>
-                <div class="well well-sm">
+                <div>
                     <div><span t-field="user.partner_id.website_description" class="oe_no_empty"/></div>
                 </div>
                 <t t-if="uid == user.id">
diff --git a/addons/website_forum_doc/views/website_doc.xml b/addons/website_forum_doc/views/website_doc.xml
index d01301d8fe0..b2bb0f62029 100644
--- a/addons/website_forum_doc/views/website_doc.xml
+++ b/addons/website_forum_doc/views/website_doc.xml
@@ -132,11 +132,9 @@
                                 </ul>
                             </div>
                         </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>
-                                </div>
-                                <div class="panel-body">
+                            <div class="card mt48" id="about_doc">
+                                <h3 class="card-header">Need more info?</h3>
+                                <div class="card-body">
                                     <div class="text-muted">
                                         This documentation page has been extracted
                                         from the Q&amp;A section where you can
@@ -189,35 +187,37 @@
                     </p>
                 </section>
                 <div class="container">
-                    <div class="well">
-                        <form t-attf-action="/forum/#{ slug(forum) }/promote_ok" method="post" role="form" class="form-horizontal">
-                            <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-lg-3 control-label" for="reason">Question:</label>
-                                <div class="col-lg-8 mt8">
-                                    <span t-field="post.name"/>
+                    <div class="card">
+                        <div class="card-body">
+                            <form t-attf-action="/forum/#{ slug(forum) }/promote_ok" method="post" role="form" class="form-horizontal">
+                                <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-lg-3 control-label" for="reason">Question:</label>
+                                    <div class="col-lg-8 mt8">
+                                        <span t-field="post.name"/>
+                                    </div>
                                 </div>
-                            </div>
-                            <div class="form-group">
-                                <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">
-                                            <option t-att-value="chapter.id"><t t-esc="chapter.display_name"/></option>
-                                        </t>
-                                    </select>
+                                <div class="form-group">
+                                    <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">
+                                                <option t-att-value="chapter.id"><t t-esc="chapter.display_name"/></option>
+                                            </t>
+                                        </select>
+                                    </div>
                                 </div>
-                            </div>
-                            <div class="form-group">
-                                <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>
+                                <div class="form-group">
+                                    <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>
+                                    </div>
                                 </div>
-                            </div>
-                        </form>
+                            </form>
+                        </div>
                     </div>
                 </div>
                 <section class="container">
diff --git a/addons/website_hr_recruitment/data/hr_job_demo.xml b/addons/website_hr_recruitment/data/hr_job_demo.xml
index fcf08887d18..9286b123a41 100644
--- a/addons/website_hr_recruitment/data/hr_job_demo.xml
+++ b/addons/website_hr_recruitment/data/hr_job_demo.xml
@@ -18,9 +18,9 @@
     <div class="container">
         <div class="row">
             <div class="col-lg-4 mt16">
-                <div class="panel panel-info">
-                    <!-- Default panel contents -->
-                    <div class="panel-heading text-center">
+                <div class="card bg-info text-white">
+                    <!-- Default card contents -->
+                    <div class="card-header text-center">
                         <h2 style="margin: 0">Responsibilities</h2>
                         <p style="margin: 0" class="text-muted">
                             What you will do ...
@@ -34,7 +34,7 @@
                         <li class="list-group-item">Improve our communication to customers</li>
                         <li class="list-group-item">Transform our product into a suite of well positioned business Apps</li>
                     </ul>
-                    <div class="panel-footer text-center">
+                    <div class="card-footer text-center">
                         <p class="text-muted">
                             <i>Work in a fun atmosphere</i>
                         </p>
@@ -42,9 +42,9 @@
                 </div>
             </div>
             <div class="col-lg-4 mt16">
-                <div class="panel panel-info">
-                    <!-- Default panel contents -->
-                    <div class="panel-heading text-center">
+                <div class="card bg-info text-white">
+                    <!-- Default card contents -->
+                    <div class="card-header text-center">
                         <h2 style="margin: 0">Skills</h2>
                         <p style="margin: 0" class="text-muted">
                             Must have ...
@@ -57,7 +57,7 @@
                         <li class="list-group-item">Scale our events organization all around the world</li>
                         <li class="list-group-item">Launch new marketing campaigns and offers</li>
                     </ul>
-                    <div class="panel-footer text-center">
+                    <div class="card-footer text-center">
                         <p class="text-muted">
                             <i>You easily manage them</i>
                         </p>
@@ -65,9 +65,9 @@
                 </div>
             </div>
             <div class="col-lg-4 mt16">
-                <div class="panel panel-info">
-                    <!-- Default panel contents -->
-                    <div class="panel-heading text-center">
+                <div class="card bg-info text-white">
+                    <!-- Default card contents -->
+                    <div class="card-header text-center">
                         <h2 style="margin: 0">Nice to have</h2>
                         <p style="margin: 0" class="text-muted">
                             Close to the perfection ...
@@ -81,7 +81,7 @@
                         <li class="list-group-item">You are approachable, honest and fun team player</li>
                         <li class="list-group-item">You have an affinity with the IT world</li>
                     </ul>
-                    <div class="panel-footer text-center">
+                    <div class="card-footer text-center">
                         <p class="text-muted">
                             <i>You are passionate</i>
                         </p>
@@ -149,9 +149,9 @@
     <div class="container">
         <div class="row">
             <div class="col-lg-4 mt16">
-                <div class="panel panel-info">
-                    <!-- Default panel contents -->
-                    <div class="panel-heading text-center">
+                <div class="card bg-info text-white">
+                    <!-- Default card contents -->
+                    <div class="card-header text-center">
                         <h2 style="margin: 0">Responsibilities</h2>
                         <p style="margin: 0" class="text-muted">
                             What you will do ...
@@ -164,7 +164,7 @@
                         <li class="list-group-item">You will initially be coached by senior developers</li>
                         <li class="list-group-item">You will become a technical expert of the product.</li>
                     </ul>
-                    <div class="panel-footer text-center">
+                    <div class="card-footer text-center">
                         <p class="text-muted">
                             <i>Work in a fun atmosphere</i>
                         </p>
@@ -172,9 +172,9 @@
                 </div>
             </div>
             <div class="col-lg-4 mt16">
-                <div class="panel panel-info">
-                    <!-- Default panel contents -->
-                    <div class="panel-heading text-center">
+                <div class="card bg-info text-white">
+                    <!-- Default card contents -->
+                    <div class="card-header text-center">
                         <h2 style="margin: 0">Skills</h2>
                         <p style="margin: 0" class="text-muted">
                             Must have ...
@@ -188,7 +188,7 @@
                         <li class="list-group-item">Good knowledge of web design</li>
                         <li class="list-group-item">Good knowledge of HTML and Javascript</li>
                     </ul>
-                    <div class="panel-footer text-center">
+                    <div class="card-footer text-center">
                         <p class="text-muted">
                             <i>You autonomously and quickly learn</i>
                         </p>
@@ -196,9 +196,9 @@
                 </div>
             </div>
             <div class="col-lg-4 mt16">
-                <div class="panel panel-info">
-                    <!-- Default panel contents -->
-                    <div class="panel-heading text-center">
+                <div class="card bg-info text-white">
+                    <!-- Default card contents -->
+                    <div class="card-header text-center">
                         <h2 style="margin: 0">Nice to have</h2>
                         <p style="margin: 0" class="text-muted">
                             Close to the perfection ...
@@ -214,7 +214,7 @@
                         <li class="list-group-item">Quick and autonomous learner</li>
                         <li class="list-group-item">Team spirit and good communication</li>
                     </ul>
-                    <div class="panel-footer text-center">
+                    <div class="card-footer text-center">
                         <p class="text-muted">
                             <i>You are passionate</i>
                         </p>
@@ -282,9 +282,9 @@
     <div class="container">
         <div class="row">
             <div class="col-lg-4 mt16">
-                <div class="panel panel-info">
-                    <!-- Default panel contents -->
-                    <div class="panel-heading text-center">
+                <div class="card bg-info text-white">
+                    <!-- Default card contents -->
+                    <div class="card-header text-center">
                         <h2 style="margin: 0">Responsibilities</h2>
                         <p style="margin: 0" class="text-muted">
                             What you will do ...
@@ -300,7 +300,7 @@
                         <li class="list-group-item">Deliver generic Odoo functional training sessions</li>
                         <li class="list-group-item">Will report to the Head of Professional Services</li>
                     </ul>
-                    <div class="panel-footer text-center">
+                    <div class="card-footer text-center">
                         <p class="text-muted">
                             <i>Work in a fun atmosphere</i>
                         </p>
@@ -308,9 +308,9 @@
                 </div>
             </div>
             <div class="col-lg-4 mt16">
-                <div class="panel panel-info">
-                    <!-- Default panel contents -->
-                    <div class="panel-heading text-center">
+                <div class="card bg-info text-white">
+                    <!-- Default card contents -->
+                    <div class="card-header text-center">
                         <h2 style="margin: 0">Skills</h2>
                         <p style="margin: 0" class="text-muted">
                             Must have ...
@@ -324,7 +324,7 @@
                         <li class="list-group-item">You are an excellent communicator and negotiator</li>
                         <li class="list-group-item">You have an affinity with the IT world</li>
                     </ul>
-                    <div class="panel-footer text-center">
+                    <div class="card-footer text-center">
                         <p class="text-muted">
                             <i>You easily manage them</i>
                         </p>
@@ -332,9 +332,9 @@
                 </div>
             </div>
             <div class="col-lg-4 mt16">
-                <div class="panel panel-info">
-                    <!-- Default panel contents -->
-                    <div class="panel-heading text-center">
+                <div class="card bg-info text-white">
+                    <!-- Default card contents -->
+                    <div class="card-header text-center">
                         <h2 style="margin: 0">Nice to have</h2>
                         <p style="margin: 0" class="text-muted">
                             Close to the perfection ...
@@ -348,7 +348,7 @@
                         <li class="list-group-item">You are a quick and autonomous learner</li>
                         <li class="list-group-item">You are ready to travel in US</li>
                     </ul>
-                    <div class="panel-footer text-center">
+                    <div class="card-footer text-center">
                         <p class="text-muted">
                             <i>You are passionate</i>
                         </p>
@@ -416,9 +416,9 @@
     <div class="container">
         <div class="row">
             <div class="col-lg-4 mt16">
-                <div class="panel panel-info">
-                    <!-- Default panel contents -->
-                    <div class="panel-heading text-center">
+                <div class="card bg-info text-white">
+                    <!-- Default card contents -->
+                    <div class="card-header text-center">
                         <h2 style="margin: 0">Responsibilities</h2>
                         <p style="margin: 0" class="text-muted">
                             What you will do ...
@@ -431,7 +431,7 @@
                         <li class="list-group-item">Increase opportunities</li>
                         <li class="list-group-item">Improve our communication to customers</li>
                     </ul>
-                    <div class="panel-footer text-center">
+                    <div class="card-footer text-center">
                         <p class="text-muted">
                             <i>Work in a fun atmosphere</i>
                         </p>
@@ -439,9 +439,9 @@
                 </div>
             </div>
             <div class="col-lg-4 mt16">
-                <div class="panel panel-info">
-                    <!-- Default panel contents -->
-                    <div class="panel-heading text-center">
+                <div class="card bg-info text-white">
+                    <!-- Default card contents -->
+                    <div class="card-header text-center">
                         <h2 style="margin: 0">Skills</h2>
                         <p style="margin: 0" class="text-muted">
                             Must have ...
@@ -454,7 +454,7 @@
                         <li class="list-group-item">Scale our events organization all around the world</li>
                         <li class="list-group-item">Launch new products, marketing campaigns and offers</li>
                     </ul>
-                    <div class="panel-footer text-center">
+                    <div class="card-footer text-center">
                         <p class="text-muted">
                             <i>You easily manage them</i>
                         </p>
@@ -462,9 +462,9 @@
                 </div>
             </div>
             <div class="col-lg-4 mt16">
-                <div class="panel panel-info">
-                    <!-- Default panel contents -->
-                    <div class="panel-heading text-center">
+                <div class="card bg-info text-white">
+                    <!-- Default card contents -->
+                    <div class="card-header text-center">
                         <h2 style="margin: 0">Nice to have</h2>
                         <p style="margin: 0" class="text-muted">
                             Close to the perfection ...
@@ -477,7 +477,7 @@
                         <li class="list-group-item">You are ready to work in a dynamic company</li>
                         <li class="list-group-item">You are approachable, honest and fun team player</li>
                     </ul>
-                    <div class="panel-footer text-center">
+                    <div class="card-footer text-center">
                         <p class="text-muted">
                             <i>You are passionate</i>
                         </p>
@@ -544,9 +544,9 @@
     <div class="container">
         <div class="row">
             <div class="col-lg-4 mt16">
-                <div class="panel panel-info">
-                    <!-- Default panel contents -->
-                        <div class="panel-heading text-center">
+                <div class="card bg-info text-white">
+                    <!-- Default card contents -->
+                        <div class="card-header text-center">
                             <h2 style="margin: 0">Responsibilities</h2>
                             <p style="margin: 0" class="text-muted">
                                 What you will do ...
@@ -559,7 +559,7 @@
                             <li class="list-group-item">You will initially be coached by senior technical officer</li>
                             <li class="list-group-item">You will become a technical expert of the product.</li>
                         </ul>
-                        <div class="panel-footer text-center">
+                        <div class="card-footer text-center">
                             <p class="text-muted">
                                 <i>Work in a fun atmosphere</i>
                             </p>
@@ -567,9 +567,9 @@
                     </div>
             </div>
             <div class="col-lg-4 mt16">
-            <div class="panel panel-info">
-                <!-- Default panel contents -->
-                    <div class="panel-heading text-center">
+            <div class="card bg-info text-white">
+                <!-- Default card contents -->
+                    <div class="card-header text-center">
                         <h2 style="margin: 0">Skills</h2>
                         <p style="margin: 0" class="text-muted">
                             Must have ...
@@ -582,7 +582,7 @@
                         <li class="list-group-item">Good knowledge of object oriented programming</li>
                         <li class="list-group-item">Good knowledge of web design</li>
                     </ul>
-                    <div class="panel-footer text-center">
+                    <div class="card-footer text-center">
                         <p class="text-muted">
                             <i>You autonomously and quickly learn</i>
                         </p>
@@ -590,9 +590,9 @@
                 </div>
             </div>
             <div class="col-lg-4 mt16">
-                <div class="panel panel-info">
-                    <!-- Default panel contents -->
-                    <div class="panel-heading text-center">
+                <div class="card bg-info text-white">
+                    <!-- Default card contents -->
+                    <div class="card-header text-center">
                         <h2 style="margin: 0">Nice to have</h2>
                         <p style="margin: 0" class="text-muted">
                             Close to the perfection ...
@@ -605,7 +605,7 @@
                         <li class="list-group-item">Good language skills in another language</li>
                         <li class="list-group-item">Contributions to open source projects</li>
                     </ul>
-                    <div class="panel-footer text-center">
+                    <div class="card-footer text-center">
                         <p class="text-muted">
                             <i>You are passionate</i>
                         </p>
@@ -672,9 +672,9 @@
     <div class="container">
         <div class="row">
             <div class="col-lg-4 mt16">
-                <div class="panel panel-info">
-                    <!-- Default panel contents -->
-                    <div class="panel-heading text-center">
+                <div class="card bg-info text-white">
+                    <!-- Default card contents -->
+                    <div class="card-header text-center">
                         <h2 style="margin: 0">Responsibilities</h2>
                         <p style="margin: 0" class="text-muted">
                             What you will do ...
@@ -687,7 +687,7 @@
                         <li class="list-group-item">You will initially be coached by senior trainees</li>
                         <li class="list-group-item">You will become a technical expert of the product.</li>
                     </ul>
-                    <div class="panel-footer text-center">
+                    <div class="card-footer text-center">
                         <p class="text-muted">
                             <i>Work in a fun atmosphere</i>
                         </p>
@@ -695,9 +695,9 @@
                 </div>
             </div>
             <div class="col-lg-4 mt16">
-                <div class="panel panel-info">
-                    <!-- Default panel contents -->
-                    <div class="panel-heading text-center">
+                <div class="card bg-info text-white">
+                    <!-- Default card contents -->
+                    <div class="card-header text-center">
                         <h2 style="margin: 0">Skills</h2>
                         <p style="margin: 0" class="text-muted">
                             Must have ...
@@ -710,7 +710,7 @@
                         <li class="list-group-item">Good knowledge of object oriented programming</li>
                         <li class="list-group-item">Good knowledge of web design</li>
                     </ul>
-                    <div class="panel-footer text-center">
+                    <div class="card-footer text-center">
                         <p class="text-muted">
                             <i>You autonomously and quickly learn</i>
                         </p>
@@ -718,9 +718,9 @@
                 </div>
             </div>
             <div class="col-lg-4 mt16">
-                <div class="panel panel-info">
-                    <!-- Default panel contents -->
-                    <div class="panel-heading text-center">
+                <div class="card bg-info text-white">
+                    <!-- Default card contents -->
+                    <div class="card-header text-center">
                         <h2 style="margin: 0">Nice to have</h2>
                         <p style="margin: 0" class="text-muted">
                             Close to the perfection ...
@@ -733,7 +733,7 @@
                         <li class="list-group-item">Good language skills in another language</li>
                         <li class="list-group-item">Contributions to open source projects</li>
                     </ul>
-                    <div class="panel-footer text-center">
+                    <div class="card-footer text-center">
                         <p class="text-muted">
                             <i>You are passionate</i>
                         </p>
@@ -801,9 +801,9 @@
     <div class="container">
         <div class="row">
             <div class="col-lg-4 mt16" style="width:30%;">
-                <div class="panel panel-info">
-                    <!-- Default panel contents -->
-                    <div class="panel-heading text-center">
+                <div class="card bg-info text-white">
+                    <!-- Default card contents -->
+                    <div class="card-header text-center">
                         <h2 style="margin: 0">Responsibilities</h2>
                         <p style="margin: 0" class="text-muted">
                             What you will do ...
@@ -816,7 +816,7 @@
                         <li class="list-group-item">Increase opportunities</li>
                         <li class="list-group-item">Improve our communication to customers</li>
                     </ul>
-                    <div class="panel-footer text-center">
+                    <div class="card-footer text-center">
                         <p class="text-muted">
                             <i>Work in a fun atmosphere</i>
                         </p>
@@ -824,9 +824,9 @@
                 </div>
             </div>
             <div class="col-lg-4 mt16">
-                <div class="panel panel-info">
-                    <!-- Default panel contents -->
-                    <div class="panel-heading text-center">
+                <div class="card bg-info text-white">
+                    <!-- Default card contents -->
+                    <div class="card-header text-center">
                         <h2 style="margin: 0">Skills</h2>
                         <p style="margin: 0" class="text-muted">
                             Must have ...
@@ -839,7 +839,7 @@
                         <li class="list-group-item">Scale our events organization all around the world</li>
                         <li class="list-group-item">Launch new products, Human Resources campaigns and offers</li>
                     </ul>
-                    <div class="panel-footer text-center">
+                    <div class="card-footer text-center">
                         <p class="text-muted">
                             <i>You easily manage them</i>
                         </p>
@@ -847,9 +847,9 @@
                 </div>
             </div>
             <div class="col-lg-4 mt16">
-                <div class="panel panel-info">
-                    <!-- Default panel contents -->
-                    <div class="panel-heading text-center">
+                <div class="card bg-info text-white">
+                    <!-- Default card contents -->
+                    <div class="card-header text-center">
                         <h2 style="margin: 0">Nice to have</h2>
                         <p style="margin: 0" class="text-muted">
                             Close to the perfection ...
@@ -862,7 +862,7 @@
                         <li class="list-group-item">You are ready to work in a dynamic company</li>
                         <li class="list-group-item">You are approachable, honest and fun team player</li>
                     </ul>
-                    <div class="panel-footer text-center">
+                    <div class="card-footer text-center">
                         <p class="text-muted">
                             <i>You are passionate</i>
                         </p>
diff --git a/addons/website_livechat/views/website_livechat.xml b/addons/website_livechat/views/website_livechat.xml
index 343730c643a..64a8151b853 100644
--- a/addons/website_livechat/views/website_livechat.xml
+++ b/addons/website_livechat/views/website_livechat.xml
@@ -60,11 +60,11 @@
                                     <h3>Statistics</h3>
                                     <div class="row">
                                         <div class="col-lg-3">
-                                            <div class="panel panel-warming">
-                                                <div class="panel-body text-center bg-warning">
+                                            <div class="card bg-warning text-white">
+                                                <div class="card-body text-center">
                                                     <img src="/rating/static/src/img/rating_5.png" style="height:50px" alt="Neutral face"/>
                                                 </div>
-                                                <div class="panel-body text-center bg-warning">
+                                                <div class="card-body text-center">
                                                     <h2 style="margin: 0">
                                                         <b style="font-size: 50px">
                                                             <t t-esc="percentage['okay']" />
@@ -75,11 +75,11 @@
                                             </div>
                                         </div>
                                         <div class="col-lg-4">
-                                            <div class="panel panel-success">
-                                                <div class="panel-body text-center bg-success">
+                                            <div class="card bg-success text-white">
+                                                <div class="card-body text-center">
                                                     <img src="/rating/static/src/img/rating_10.png" style="height:60px" alt="Happy face"/>
                                                 </div>
-                                                <div class="panel-body text-center bg-success">
+                                                <div class="card-body text-center">
                                                     <h2 style="margin: 0">
                                                         <b style="font-size: 60px">
                                                             <t t-esc="percentage['great']" />
@@ -90,11 +90,11 @@
                                             </div>
                                         </div>
                                         <div class="col-lg-3">
-                                            <div class="panel panel-danger">
-                                                <div class="panel-body text-center bg-danger">
+                                            <div class="card bg-danger text-white">
+                                                <div class="card-body text-center">
                                                     <img src="/rating/static/src/img/rating_1.png" style="height:40px" alt="Sad face"/>
                                                 </div>
-                                                <div class="panel-body text-center bg-danger">
+                                                <div class="card-body text-center">
                                                     <h2 style="margin: 0">
                                                         <b style="font-size: 40px">
                                                             <t t-esc="percentage['bad']" />
diff --git a/addons/website_mail_channel/views/snippets.xml b/addons/website_mail_channel/views/snippets.xml
index cb46f5a38f8..bd4114dd826 100644
--- a/addons/website_mail_channel/views/snippets.xml
+++ b/addons/website_mail_channel/views/snippets.xml
@@ -27,12 +27,12 @@
                         <button href="#" class="btn btn-primary js_follow_btn">Subscribe</button>
                     </span>
                 </div>
-                <p class="js_mg_details d-none well well-sm">
+                <p class="js_mg_details d-none">
                     <span class="js_mg_email d-none"><a href="#" class="js_mg_email"><i class="fa fa-envelope-o"/> send mail</a> - </span>
                     <a href="#" class="js_mg_link"><i class="fa fa-file-o"/> archives</a> -
                     <a role="button" href="#" class="js_unfollow_btn"><i class="fa fa-times"/> unsubscribe</a>
                 </p>
-                <p class="js_mg_confirmation d-none well well-sm">
+                <p class="js_mg_confirmation d-none">
                     a confirmation email has been sent.
                 </p>
             </div>
@@ -43,7 +43,7 @@
     <xpath expr="//div[@id='snippet_options']" position="inside">
         <div data-js='subscribe'
             data-selector=".js_follow_alias"
-            data-drop-near="p, h1, h2, h3, blockquote, .well, .panel"
+            data-drop-near="p, h1, h2, h3, blockquote, .card"
            >
             <li data-select_mailing_list="" data-no-preview="true"><a>Change Discussion List</a></li>
         </div>
diff --git a/addons/website_mail_channel/views/website_mail_channel_templates.xml b/addons/website_mail_channel/views/website_mail_channel_templates.xml
index 2bc25de07c4..18976f29911 100644
--- a/addons/website_mail_channel/views/website_mail_channel_templates.xml
+++ b/addons/website_mail_channel/views/website_mail_channel_templates.xml
@@ -67,7 +67,7 @@
                                <button href="#" class="btn btn-primary js_follow_btn">Unsubscribe</button>
                             </span>
                         </div>
-                        <p class="js_mg_details d-none well well-sm">
+                        <p class="js_mg_details d-none">
                             <span class="js_mg_email d-none"><a href="#" class="js_mg_email"><i class="fa fa-envelope-o"/> send mail</a> - </span>
                             <a href="#" class="js_mg_link"><i class="fa fa-file-o"/> archives</a> -
                             <a role="button" href="#" class="js_unfollow_btn"><i class="fa fa-times"/> unsubscribe</a>
@@ -296,7 +296,7 @@
                 </div>
             </li>
         </ul>
-        <p t-if="messages and (msg_more_count or 0) > 0 and thread_header" class="well well-sm">
+        <p t-if="messages and (msg_more_count or 0) > 0 and thread_header">
             <button class="fa btn-link o_mg_read_more"
                 t-attf-data-href="/groups/#{slug(group)}/#{slug(thread_header)}/get_replies"
                 t-attf-data-msg-id="#{messages[-1].id}">
diff --git a/addons/website_mass_mailing/views/snippets_templates.xml b/addons/website_mass_mailing/views/snippets_templates.xml
index c72d2dde23c..68f5a21d795 100644
--- a/addons/website_mass_mailing/views/snippets_templates.xml
+++ b/addons/website_mass_mailing/views/snippets_templates.xml
@@ -54,7 +54,7 @@
     <xpath expr="//div" position="after">
         <div data-js='mailing_list_subscribe'
             data-selector=".js_subscribe"
-            data-drop-near="p, h1, h2, h3, blockquote, .well, .panel">
+            data-drop-near="p, h1, h2, h3, blockquote, .card">
             <li data-select_mailing_list="" data-no-preview="true"><a href="#">Change Newsletter</a></li>
         </div>
 
diff --git a/addons/website_partner/views/website_partner_templates.xml b/addons/website_partner/views/website_partner_templates.xml
index 3053411e9df..b58c61ee609 100644
--- a/addons/website_partner/views/website_partner_templates.xml
+++ b/addons/website_partner/views/website_partner_templates.xml
@@ -18,7 +18,7 @@
     <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">
+        <address>
              <div t-field="partner.self" t-options='{
                  "widget": "contact",
                  "fields": ["address", "website", "phone", "email"]
diff --git a/addons/website_quote/data/website_quote_data.xml b/addons/website_quote/data/website_quote_data.xml
index eee83f616dd..ff1af6ec595 100644
--- a/addons/website_quote/data/website_quote_data.xml
+++ b/addons/website_quote/data/website_quote_data.xml
@@ -31,44 +31,32 @@
                 <section data-snippet-id="quality">
                     <div class="row mt32">
                         <div class="col-lg-4">
-                            <div class="panel panel-info">
-                                <div class="panel-heading">
-                                   <center><h3 class="panel-title">Our Quality</h3></center>
-                                </div>
-                                <div class="panel-body">
-                                   <p>
-                                       Product quality is the foundation we
-                                       stand on; we build it with a relentless
-                                       focus on fabric, performance and craftsmanship.
-                                   </p>
+                            <div class="card bg-info text-white">
+                                <h3 class="card-header text-center">Our Quality</h3>
+                                <div class="card-body">
+                                    Product quality is the foundation we
+                                    stand on; we build it with a relentless
+                                    focus on fabric, performance and craftsmanship.
                                 </div>
                             </div>
                         </div>
                         <div class="col-lg-4">
-                            <div class="panel panel-info">
-                                <div class="panel-heading">
-                                   <center><h3 class="panel-title">Our Service</h3></center>
-                                </div>
-                                <div class="panel-body">
-                                   <p>
-                                       As a leading professional services firm,
-                                       we know that success is all about the
-                                       commitment we put on strong services.
-                                   </p>
+                            <div class="card bg-info text-white">
+                                <h3 class="card-header text-center">Our Service</h3>
+                                <div class="card-body">
+                                    As a leading professional services firm,
+                                    we know that success is all about the
+                                    commitment we put on strong services.
                                 </div>
                             </div>
                         </div>
                         <div class="col-lg-4">
-                            <div class="panel panel-info">
-                                <div class="panel-heading">
-                                   <center><h3 class="panel-title">Price</h3></center>
-                                </div>
-                                <div class="panel-body">
-                                   <p>
-                                       We always ensure that our products are
-                                       set at a fair price so that you will be
-                                       happy to buy them.
-                                   </p>
+                            <div class="card bg-info text-white">
+                                <h3 class="card-header text-center">Price</h3>
+                                <div class="card-body">
+                                    We always ensure that our products are
+                                    set at a fair price so that you will be
+                                    happy to buy them.
                                 </div>
                             </div>
                         </div>
diff --git a/addons/website_sale/static/src/js/website_sale.js b/addons/website_sale/static/src/js/website_sale.js
index 6d766f6f3b1..2e8be99285d 100644
--- a/addons/website_sale/static/src/js/website_sale.js
+++ b/addons/website_sale/static/src/js/website_sale.js
@@ -375,12 +375,12 @@ odoo.define('website_sale.website_sale', function (require) {
         });
         $('.oe_cart').on('click', '.js_change_shipping', function() {
           if (!$('body.editor_enable').length) { //allow to edit button text with editor
-            var $old = $('.all_shipping').find('.panel.border_primary');
+            var $old = $('.all_shipping').find('.card.border_primary');
             $old.find('.btn-ship').toggle();
             $old.addClass('js_change_shipping');
             $old.removeClass('border_primary');
 
-            var $new = $(this).parent('div.one_kanban').find('.panel');
+            var $new = $(this).parent('div.one_kanban').find('.card');
             $new.find('.btn-ship').toggle();
             $new.removeClass('js_change_shipping');
             $new.addClass('border_primary');
diff --git a/addons/website_sale/static/src/scss/website_sale.scss b/addons/website_sale/static/src/scss/website_sale.scss
index f9a89299393..56d30cc6ba4 100644
--- a/addons/website_sale/static/src/scss/website_sale.scss
+++ b/addons/website_sale/static/src/scss/website_sale.scss
@@ -33,7 +33,7 @@
     .show_coupon {
         white-space: nowrap;
     }
-    .o_payment_form .panel {
+    .o_payment_form .card {
         border-radius: 4px !important;
     }
     .address-inline address {
diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index 84f95883a3c..c62cadaf2b5 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -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-lg-2 thumbnail" style="width: 170px; height:130px; float:left; display:inline; margin-right: 10px; overflow:hidden;">
+                        <div class="col-lg-2" 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>
@@ -808,7 +808,7 @@
     </template>
 
     <template id="cart_lines" name="Shopping Cart Lines">
-        <div t-if="not website_sale_order or not website_sale_order.website_order_line" class="js_cart_lines well well-lg">
+        <div t-if="not website_sale_order or not website_sale_order.website_order_line" class="js_cart_lines alert alert-info">
           Your cart is empty!
         </div>
         <table class="mb16 table table-striped table-condensed js_cart_lines" id="cart_products" t-if="website_sale_order and website_sale_order.website_order_line">
@@ -930,7 +930,7 @@
     </template>
 
     <template id="cart_popover" name="Cart Popover">
-        <div t-if="not website_sale_order or not website_sale_order.website_order_line" class="well well-lg">
+        <div t-if="not website_sale_order or not website_sale_order.website_order_line" class="alert alert-info">
           Your cart is empty!
         </div>
         <t t-if="website_sale_order and website_sale_order.website_order_line">
@@ -1097,12 +1097,12 @@
                 </t>
                 <input type='submit'/>
             </form>
-            <a role="button" t-if="not actual_partner or (ship.id in actual_partner.ids + actual_partner.child_ids.ids)" class='btn btn-link pull-right js_edit_address no-decoration' title="Edit this address" aria-label="Edit this address"><i class='fa fa-edit'/></a>
-            <div t-att-class="'panel panel-default %s' % (selected and 'border_primary' or 'js_change_shipping')">
-                <div class='panel-body' style='min-height: 130px;'>
+            <a t-if="not actual_partner or (ship.id in actual_partner.ids + actual_partner.child_ids.ids)" class='btn btn-link pull-right js_edit_address no-decoration' role="button" title="Edit this address" aria-label="Edit this address"><i class='fa fa-edit'/></a>
+            <div t-attf-class="card #{selected and 'border_primary' or 'js_change_shipping'}">
+                <div class='card-body' style='min-height: 130px;'>
                     <t t-esc="contact" t-options="dict(widget='contact', fields=['name', 'address'], no_marker=True)"/>
                 </div>
-                <div class='panel-footer' t-if='not readonly'>
+                <div class='card-footer' t-if='not readonly'>
                     <span class='btn-ship' t-att-style="'' if selected else 'display:none;'">
                         <a role="button" class="btn btn-block btn-primary">
                             <i class='fa fa-check'></i> Ship to this address
@@ -1231,7 +1231,7 @@
                                     <div class="clearfix" />
                                     <t t-if="mode == ('new', 'billing') and not only_services">
                                         <div class="col-lg-12">
-                                            <div class="well checkbox">
+                                            <div class="checkbox">
                                               <label>
                                                 <input type="checkbox" id='shipping_use_same'  name='use_same' value="1" checked='checked'/>Ship to the same address
                                                 <span class='ship_to_other text-muted' style="display: none">&amp;nbsp;(<i>Your shipping address will be requested later) </i></span>
@@ -1295,10 +1295,10 @@
                         <div class="col-xl-8 order-xl-1 col-md-12 col-12 oe_cart">
                          <div class="row">
                             <div class='col-lg-12' id="shipping_and_billing">
-                                <div class="panel panel-default">
-                                  <div class="panel-headisng"></div>
-                                  <div class="panel-body">
-                                      <a class='pull-right no-decoration' href='/shop/checkout'><i class="fa fa-edit"/> Edit</a>
+                                <div class="card">
+                                  <div class="card-header"></div>
+                                  <div class="card-body">
+                                    <a class='pull-right no-decoration' href='/shop/checkout'><i class="fa fa-edit"/> Edit</a>
                                     <t t-set="same_shipping" t-value="bool(order.partner_shipping_id==order.partner_id or only_services)" />
                                     <div><b>Billing<t t-if="same_shipping and not only_services"> &amp; Shipping</t>: </b><span t-esc='order.partner_id' t-options="dict(widget='contact', fields=['address'], no_marker=True, separator=', ')" class="address-inline"/></div>
                                     <div t-if="not same_shipping and not only_services" groups="sale.group_delivery_invoice_address"><b>Shipping: </b><span t-esc='order.partner_shipping_id' t-options="dict(widget='contact', fields=['address'], no_marker=True, separator=', ')"  class="address-inline"/></div>
@@ -1357,8 +1357,8 @@
 
 
     <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">
+        <div class="card js_cart_summary" t-if="website_sale_order and website_sale_order.website_order_line" >
+            <div class="card-body row">
                 <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-lg-12'>
@@ -1374,14 +1374,14 @@
     </template>
 
     <template id="cart_summary" name="Cart right column">
-        <div class="panel panel-default">
-            <div class="panel-body row">
+        <div class="card">
+            <div class="card-body row">
                 <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>
 
-                <div t-if="not website_sale_order or not website_sale_order.website_order_line" class="well well-lg">
+                <div t-if="not website_sale_order or not website_sale_order.website_order_line" class="alert alert-info">
                   Your cart is empty!
                 </div>
                 <div class='toggle_summary_div d-none d-xl-block'>
@@ -1481,9 +1481,9 @@
                                     </tbody>
                                 </table>
                                 <t t-call="website_sale.payment_confirmation_status" />
-                                <div class="panel panel-default">
-                                  <div class="panel-headisng"></div>
-                                  <div class="panel-body">
+                                <div class="card">
+                                  <div class="card-header"></div>
+                                  <div class="card-body">
                                     <t t-set="same_shipping" t-value="bool(order.partner_shipping_id==order.partner_id or only_services)" />
                                     <div><b>Billing <t t-if="same_shipping and not only_services"> &amp; Shipping</t>: </b><span t-esc='order.partner_id' t-options="dict(widget='contact', fields=['address'], no_marker=True, separator=', ')" class="address-inline"/></div>
                                     <div t-if="not same_shipping and not only_services" groups="sale.group_delivery_invoice_address"><b>Shipping: </b><span t-esc='order.partner_shipping_id' t-options="dict(widget='contact', fields=['address'], no_marker=True, separator=', ')"  class="address-inline"/></div>
@@ -1559,16 +1559,16 @@
     <template id="payment_confirmation_status">
         <div class="oe_website_sale_tx_status" t-att-data-order-id="order.id">
             <t t-set="payment_tx_id" t-value="order.get_portal_last_transaction()"/>
-            <div t-att-class="'panel %s' % (
-                    (payment_tx_id.state == 'pending' and 'panel-info') or
-                    (payment_tx_id.state == 'done' and 'panel-success') or
-                    (payment_tx_id.state == 'authorized' and 'panel-success') or
-                    'panel-danger')">
+            <div t-att-class="'card %s' % (
+                    (payment_tx_id.state == 'pending' and 'bg-info text-white') or
+                    (payment_tx_id.state == 'done' and 'bg-success text-white') or
+                    (payment_tx_id.state == 'authorized' and 'bg-success text-white') or
+                    'bg-danger text-white')">
                 <a role="button" groups="base.group_system" class="btn pull-right" target="_blank" aria-label="Edit" title="Edit"
                         t-att-href="'/web#model=%s&amp;id=%s&amp;action=%s&amp;view_type=form' % ('payment.acquirer', payment_tx_id.acquirer_id.id, 'payment.action_payment_acquirer')">
                     <i class="fa fa-pencil"></i>
                 </a>
-                <div class="panel-heading">
+                <div class="card-header">
                     <t t-if="payment_tx_id.state == 'pending'">
                         <t t-raw="payment_tx_id.acquirer_id.pending_msg"/>
                     </t>
@@ -1582,7 +1582,7 @@
                         Your payment has been authorized.
                     </t>
                 </div>
-                <div class="panel-body" t-if="payment_tx_id.acquirer_id.post_msg">
+                <div class="card-body" t-if="payment_tx_id.acquirer_id.post_msg">
                     <t t-raw="payment_tx_id.acquirer_id.post_msg" />
                 </div>
             </div>
@@ -1630,16 +1630,18 @@
                     <div class="row">
                       <div class="col-lg-12">
                         <h1 class="text-center">Terms &amp;amp; Conditions</h1>
-                        <div class="well s_well clearfix">
-                            <ul>
-                                <li>The <b>Intellectual Property</b> disclosure will inform users that the contents, logo and other visual media you created is your property and is protected by copyright laws.</li>
-                                <li>A <b>Termination</b> clause will inform that users’ accounts on your website and mobile app or users’ access to your website and mobile (if users can’t have an account with you) can be terminated in case of abuses or at your sole discretion.</li>
-                                <li>A <b>Governing Law</b> will inform users which laws govern the agreement. This should the country in which your company is headquartered or the country from which you operate your web site and mobile app.</li>
-                                <li>A <b>Links To Other Web Sites</b> clause will inform users that you are not responsible for any third party web sites that you link to. This kind of clause will generally inform users that they are responsible for reading and agreeing (or disagreeing) with the Terms and Conditions or Privacy Policies of these third parties.</li>
-                                <li>If your website or mobile apps allows users to create content and make that content public to other users, a <b>Content</b> section will inform users that they own the rights to the content they have created.<br/>The “Content” clause usually mentions that users must give you (the website or mobile app developer) a license so that you can share this content on your website/mobile app and to make it available to other users.<br/>Because the content created by users is public to other users, a DMCA notice clause (or Copyright Infringement ) section is helpful to inform users and copyright authors that, if any content is found to be a copyright infringement, you will respond to any DMCA take down notices received and you will take down the content.</li>
-                                <li>A <b>Limit What Users Can Do</b> clause can inform users that by agreeing to use your service, they’re also agreeing to not do certain things. This can be part of a very long and thorough list in your Terms and Conditions agreements so as to encompass the most amount of negative uses.</li>
-                           </ul>
-                           <small class="text-muted pull-right">Source: https://termsfeed.com/blog/sample-terms-and-conditions-template</small>
+                        <div class="card s_well clearfix">
+                            <div class="card-body">
+                                <ul>
+                                    <li>The <b>Intellectual Property</b> disclosure will inform users that the contents, logo and other visual media you created is your property and is protected by copyright laws.</li>
+                                    <li>A <b>Termination</b> clause will inform that users’ accounts on your website and mobile app or users’ access to your website and mobile (if users can’t have an account with you) can be terminated in case of abuses or at your sole discretion.</li>
+                                    <li>A <b>Governing Law</b> will inform users which laws govern the agreement. This should the country in which your company is headquartered or the country from which you operate your web site and mobile app.</li>
+                                    <li>A <b>Links To Other Web Sites</b> clause will inform users that you are not responsible for any third party web sites that you link to. This kind of clause will generally inform users that they are responsible for reading and agreeing (or disagreeing) with the Terms and Conditions or Privacy Policies of these third parties.</li>
+                                    <li>If your website or mobile apps allows users to create content and make that content public to other users, a <b>Content</b> section will inform users that they own the rights to the content they have created.<br/>The “Content” clause usually mentions that users must give you (the website or mobile app developer) a license so that you can share this content on your website/mobile app and to make it available to other users.<br/>Because the content created by users is public to other users, a DMCA notice clause (or Copyright Infringement ) section is helpful to inform users and copyright authors that, if any content is found to be a copyright infringement, you will respond to any DMCA take down notices received and you will take down the content.</li>
+                                    <li>A <b>Limit What Users Can Do</b> clause can inform users that by agreeing to use your service, they’re also agreeing to not do certain things. This can be part of a very long and thorough list in your Terms and Conditions agreements so as to encompass the most amount of negative uses.</li>
+                               </ul>
+                               <small class="text-muted pull-right">Source: https://termsfeed.com/blog/sample-terms-and-conditions-template</small>
+                           </div>
                         </div>
                       </div>
                     </div>
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 ff9f5835abf..c96537aa10c 100644
--- a/addons/website_sale_delivery/views/website_sale_delivery_templates.xml
+++ b/addons/website_sale_delivery/views/website_sale_delivery_templates.xml
@@ -52,7 +52,7 @@
             <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">
+                <div t-if="delivery_nb &gt; 1" class="card" id="delivery_method">
                     <ul class="list-group">
                     <t t-foreach="deliveries" t-as="delivery">
                         <li class="list-group-item">
diff --git a/addons/website_slides/views/website_slides.xml b/addons/website_slides/views/website_slides.xml
index f56d6c762e0..6bfe1c8cfe7 100644
--- a/addons/website_slides/views/website_slides.xml
+++ b/addons/website_slides/views/website_slides.xml
@@ -31,7 +31,7 @@
                 <t t-foreach="channels" t-as="channel">
                     <div t-if="channel_index % 3 == 0" class="clearfix"/>
                     <div class="col-md-4 mb32">
-                        <div class="well well-sm">
+                        <div class="card card-body">
                             <div>
                                 <a t-attf-href="/slides/#{slug(channel)}">
                                     <img t-if="channel.promoted_slide_id" t-attf-src="/web/image/slide.slide/#{channel.promoted_slide_id.id}/image_medium" class="img-fluid oe_slides_channel_thumbnail" alt="Promoted slide"/>
@@ -324,7 +324,7 @@
 <!-- Embedded template: display a list of slides in a grid view -->
 <template id='slides_grid_view' name="Slides (Grid View)">
     <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">
+        <div class="card card-body 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"/>
             </a>
@@ -385,7 +385,7 @@
                             <i class="fa fa-exclamation-triangle" role="img" aria-label="Attention" title="Attention"></i> This <t t-esc="slide.slide_type"/> is private
                         </h3>
                         <t t-if="slide.channel_id.access_error_msg">
-                            <div t-field="slide.channel_id.access_error_msg" class="well oe_no_empty"/>
+                            <div t-field="slide.channel_id.access_error_msg" class="card card-body oe_no_empty"/>
                         </t>
                     </div>
 
@@ -633,29 +633,33 @@
                     </ul>
                     <div class="tab-content">
                         <div role="tabpanel" id="related" class="tab-pane active mt4">
-                            <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">
-                                        No presentation available.
-                                    </t>
-                                    <t t-foreach="related_slides_list" t-as="slide">
-                                        <t t-call="website_slides.related_slides"/>
-                                    </t>
-                                </ul>
+                            <div class="col-xl-12 col-lg-12 col-md-12 col-12">
+                                <div class="card">
+                                    <ul class="media-list card-body">
+                                        <t t-set="related_slides_list" t-value="list(related_slides)"/>
+                                        <t t-if="not related_slides_list">
+                                            No presentation available.
+                                        </t>
+                                        <t t-foreach="related_slides_list" t-as="slide">
+                                            <t t-call="website_slides.related_slides"/>
+                                        </t>
+                                    </ul>
+                                </div>
                             </div>
                         </div>
                         <div role="tabpanel" id="most_viewed" class="tab-pane  mt4">
-                            <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)">
-                                        No presentation available.
-                                    </t>
-                                    <t t-foreach="most_viewed_slides_list" t-as="slide">
-                                        <t t-call="website_slides.related_slides"/>
-                                    </t>
-                                </ul>
+                            <div class="col-xl-12 col-lg-12 col-md-12 col-12">
+                                <div class="card">
+                                    <ul class="media-list card-body">
+                                        <t t-set="most_viewed_slides_list" t-value="list(most_viewed_slides)"/>
+                                        <t t-if="not list(most_viewed_slides_list)">
+                                            No presentation available.
+                                        </t>
+                                        <t t-foreach="most_viewed_slides_list" t-as="slide">
+                                            <t t-call="website_slides.related_slides"/>
+                                        </t>
+                                    </ul>
+                                </div>
                             </div>
                         </div>
                     </div>
diff --git a/addons/website_slides/views/website_slides_embed.xml b/addons/website_slides/views/website_slides_embed.xml
index f6abb52506b..d25b598295d 100644
--- a/addons/website_slides/views/website_slides_embed.xml
+++ b/addons/website_slides/views/website_slides_embed.xml
@@ -32,7 +32,7 @@
                     </div>
                 </body>
                 <body>
-                <div id="PDFViewer" t-if="not private" class="panel panel-default oe_slides_panel">
+                <div id="PDFViewer" t-if="not private" class="card oe_slides_panel">
                     <!-- PDF Viewer Header : contains the name, and the share links -->
                     <div t-if="is_embedded" class="navbar-default oe_slides_share_bar">
                         <div class="container-fluid">