diff --git a/addons/calendar/views/calendar_templates.xml b/addons/calendar/views/calendar_templates.xml
index 6423c0bcd66..987d7ef1cb6 100644
--- a/addons/calendar/views/calendar_templates.xml
+++ b/addons/calendar/views/calendar_templates.xml
@@ -26,7 +26,7 @@
 
             <div class="container">
                 <div class="o_logo">
-                    <img class="img img-fluid center-block" src="/web/binary/company_logo" alt="Logo"/>
+                    <img class="img img-fluid d-block mx-auto" src="/web/binary/company_logo" alt="Logo"/>
                 </div>
 
                 <div class="card">
diff --git a/addons/hr_attendance/static/src/xml/attendance.xml b/addons/hr_attendance/static/src/xml/attendance.xml
index 9d390a02f27..3cef6203763 100644
--- a/addons/hr_attendance/static/src/xml/attendance.xml
+++ b/addons/hr_attendance/static/src/xml/attendance.xml
@@ -14,7 +14,7 @@
                 <img t-attf-src="{{widget.company_image_url}}" alt="Company Logo" class="o_hr_attendance_kiosk_company_image"/>
                 <div class="row o_hr_attendance_kiosk_welcome_row">
                     <div class="col-sm-5">
-                        <img class="img img-fluid center-block" src="/hr_attendance/static/src/img/barcode.png"/>
+                        <img class="img img-fluid d-block mx-auto" src="/hr_attendance/static/src/img/barcode.png"/>
                         <h5 class="mt8 mb0 text-muted">Scan your badge</h5>
                     </div>
                     <div class="col-sm-2">
diff --git a/addons/hr_expense/static/description/index.html b/addons/hr_expense/static/description/index.html
index 7311afe71b3..ed33331efdf 100644
--- a/addons/hr_expense/static/description/index.html
+++ b/addons/hr_expense/static/description/index.html
@@ -56,7 +56,7 @@
         <h2 class="oe_slogan" style="color:#875A7B;">Share the workload between departments</h2>
         <h3 class="oe_slogan oe_mb32">Get everyone involved to save time</h3>
         <div class="oe_span4">
-            <img class="center-block" src="employees.png">
+            <img class="d-block mx-auto" src="employees.png">
             <div class="text-center">
                 <h4 class="oe_mt16">
                     <b>Employees</b>
@@ -65,7 +65,7 @@
             <p class="oe_mt8">Draft and confirm expenses, and load receipts to the expense records.</p>
         </div>
         <div class="oe_span4">
-            <img class="center-block" src="managers.png">
+            <img class="d-block mx-auto" src="managers.png">
             <div class="text-center">
                 <h4 class="oe_mt16">
                     <b>Managers</b>
@@ -74,7 +74,7 @@
             <p class="oe_mt8">Comment, validate or refuse expenses, and add or edit information.</p>
         </div>
         <div class="oe_span4">
-            <img class="center-block" src="accountants.png">
+            <img class="d-block mx-auto" src="accountants.png">
             <div class="text-center">
                 <h4 class="oe_mt16">
                     <b>Accountants</b>
diff --git a/addons/mass_mailing/views/snippets_themes.xml b/addons/mass_mailing/views/snippets_themes.xml
index b7a69de548c..2f446c55d19 100644
--- a/addons/mass_mailing/views/snippets_themes.xml
+++ b/addons/mass_mailing/views/snippets_themes.xml
@@ -142,7 +142,7 @@
                     <tr>
                         <td width="100%" valign="top" class="o_mail_full_width_padding">
                             <a href="#">
-                                <img src="/mass_mailing/static/src/img/theme_basic/s_default_image_block_banner.jpg" class="center-block" alt="Your Banner Image" />
+                                <img src="/mass_mailing/static/src/img/theme_basic/s_default_image_block_banner.jpg" class="d-block mx-auto" alt="Your Banner Image" />
                             </a>
                         </td>
                     </tr>
@@ -355,7 +355,7 @@
                     <tr>
                         <td style="vertical-align:top;width:270px;" class="o_mail_col_mv">
                             <div class="o_mail_col_container">
-                                <img src="/mass_mailing/static/src/img/theme_basic/s_default_image_block_two_cols_1.jpg" class="center-block" alt="Your Picture" />
+                                <img src="/mass_mailing/static/src/img/theme_basic/s_default_image_block_two_cols_1.jpg" class="d-block mx-auto" alt="Your Picture" />
                                 <h4 class="text-center">Column title</h4>
                                 <p class="text-center o_mail_no_margin">
                                     Write one paragraph describing your product,
@@ -370,7 +370,7 @@
 
                         <td style="vertical-align:top;width:270px;" class="o_mail_col_mv">
                             <div class="o_mail_col_container">
-                                <img src="/mass_mailing/static/src/img/theme_basic/s_default_image_block_two_cols_2.jpg" class="center-block" alt="Your Picture" />
+                                <img src="/mass_mailing/static/src/img/theme_basic/s_default_image_block_two_cols_2.jpg" class="d-block mx-auto" alt="Your Picture" />
                                 <h4 class="text-center">Column title</h4>
                                 <p class="text-center o_mail_no_margin">
                                     Write one paragraph describing your product,
@@ -397,7 +397,7 @@
                     <tr>
                         <td style="vertical-align:top;width:180px;" class="o_mail_col_mv">
                             <div class="o_mail_col_container">
-                                <img src="/mass_mailing/static/src/img/theme_basic/s_default_image_block_three_cols_1.jpg" class="center-block" alt="Your Picture" />
+                                <img src="/mass_mailing/static/src/img/theme_basic/s_default_image_block_three_cols_1.jpg" class="d-block mx-auto" alt="Your Picture" />
                                 <h4 class="text-center">Column Title</h4>
                                 <p class="text-center o_mail_no_margin">
                                     A short description
@@ -410,7 +410,7 @@
 
                         <td style="vertical-align:top;width:180px;" class="o_mail_col_mv">
                             <div class="o_mail_col_container">
-                                <img src="/mass_mailing/static/src/img/theme_basic/s_default_image_block_three_cols_2.jpg" class="center-block" alt="Your Picture" />
+                                <img src="/mass_mailing/static/src/img/theme_basic/s_default_image_block_three_cols_2.jpg" class="d-block mx-auto" alt="Your Picture" />
                                 <h4 class="text-center">Column Title</h4>
                                 <p class="text-center o_mail_no_margin">
                                     A short description
@@ -423,7 +423,7 @@
 
                         <td style="vertical-align:top;width:180px;" class="o_mail_col_mv">
                             <div class="o_mail_col_container">
-                                <img src="/mass_mailing/static/src/img/theme_basic/s_default_image_block_three_cols_3.jpg" class="center-block" alt="Your Picture" />
+                                <img src="/mass_mailing/static/src/img/theme_basic/s_default_image_block_three_cols_3.jpg" class="d-block mx-auto" alt="Your Picture" />
                                 <h4 class="text-center">Column Title</h4>
                                 <p class="text-center o_mail_no_margin">
                                     A short description
@@ -447,7 +447,7 @@
                 <tbody>
                     <tr>
                         <td style="width:270px;text-align:center;vertical-align:middle" class="o_mail_col_mv o_mail_img_container o_mail_h_padding o_mail_v_padding">
-                            <img src="/mass_mailing/static/src/img/theme_basic/s_default_image_block_image_text.jpg" class="center-block" alt="Your Picture" />
+                            <img src="/mass_mailing/static/src/img/theme_basic/s_default_image_block_image_text.jpg" class="d-block mx-auto" alt="Your Picture" />
                         </td>
                         <td style="width:270px;vertical-align:middle;text-align:center;" class="o_mail_col_mv o_mail_h_padding o_mail_v_padding">
                             <h3>Omnichannel sales</h3>
@@ -477,7 +477,7 @@
                             </div>
                         </td>
                         <td style="width:270px;text-align:center;vertical-align:middle" class="o_mail_img_container o_mail_h_padding o_mail_v_padding">
-                            <img src="/mass_mailing/static/src/img/theme_basic/s_default_image_block_text_image.jpg" class="center-block" alt="Your Picture" />
+                            <img src="/mass_mailing/static/src/img/theme_basic/s_default_image_block_text_image.jpg" class="d-block mx-auto" alt="Your Picture" />
                         </td>
                     </tr>
                 </tbody>
@@ -493,7 +493,7 @@
                 <tbody>
                     <tr>
                         <td width="100%" align="center" style="text-align:center" class="">
-                            <img src="/mass_mailing/static/src/img/theme_basic/s_default_image_block_image.jpg" class="center-block" alt="Your Picture" />
+                            <img src="/mass_mailing/static/src/img/theme_basic/s_default_image_block_image.jpg" class="d-block mx-auto" alt="Your Picture" />
                         </td>
                     </tr>
                     <tr>
@@ -560,7 +560,7 @@
                 <tbody>
                     <tr>
                         <td class="o_mail_v_padding">
-                            <div class="text-center center-block">
+                            <div class="text-center d-block mx-auto">
                                 <p class="o_mail_display_coupon o_mail_no_margin text-center text-beta" style="font-weight:800;">
                                     $20
                                 </p>
@@ -639,7 +639,7 @@
                         <p class="o_mail_no_margin">ALL DAY</p>
                     </td>
                     <td style="width:25%;min-height: 150px;" class="text-center bg-delta o_mail_col_mv">
-                        <img src="/mass_mailing/static/src/img/theme_basic/s_default_image_block_event.jpg" class="center-block" alt="Your Picture" />
+                        <img src="/mass_mailing/static/src/img/theme_basic/s_default_image_block_event.jpg" class="d-block mx-auto" alt="Your Picture" />
                     </td>
                     <td class="o_mail_h_padding o_mail_v_padding o_mail_col_mv" style="min-height: 150px;">
                         <div style="min-height: 111px">
diff --git a/addons/theme_default/views/theme_default_templates.xml b/addons/theme_default/views/theme_default_templates.xml
index 72382b058e0..35b1b1193cd 100644
--- a/addons/theme_default/views/theme_default_templates.xml
+++ b/addons/theme_default/views/theme_default_templates.xml
@@ -35,13 +35,13 @@
                   <table name="layout">
                       <tr>
                           <td class=" text-center" width="50%">
-                              <label class=" center-block">
+                              <label class=" d-block mx-auto">
                                   <div class="text-center" style="background-image: url(/theme_default/static/src/img/theme/layout-full.gif); background-size: 100%; line-height: 40px;">FULL WIDTH</div>
                                   <input name="layoutvar" type="radio" data-xmlid=""/>
                               </label>
                           </td>
                           <td class=" text-center">
-                              <label class=" center-block">
+                              <label class=" d-block mx-auto">
                                  <div class="text-center" style="background-image: url(/theme_default/static/src/img/theme/layout-boxed.gif); background-size: 100%; line-height: 40px;">BOXED</div>
                                   <input name="layoutvar" type="radio" data-xmlid="theme_default.option_layout_boxed"/>
                               </label>
diff --git a/addons/web/views/database_manager.html b/addons/web/views/database_manager.html
index dda8a2c59f2..12bd3cb28dd 100644
--- a/addons/web/views/database_manager.html
+++ b/addons/web/views/database_manager.html
@@ -114,7 +114,7 @@
   <div class="row">
     <div class="col-lg-6 offset-lg-3 o_database_list">
       <div class="text-center">
-        <img src="/web/static/src/img/logo2.png" class="img-fluid center-block"/>
+        <img src="/web/static/src/img/logo2.png" class="img-fluid d-block mx-auto"/>
       </div>
       {% if not list_db %}
       <div class="alert alert-danger text-center">
diff --git a/addons/web_editor/static/src/js/editor/rte.summernote.js b/addons/web_editor/static/src/js/editor/rte.summernote.js
index e66ff98c21e..7c394812e7e 100644
--- a/addons/web_editor/static/src/js/editor/rte.summernote.js
+++ b/addons/web_editor/static/src/js/editor/rte.summernote.js
@@ -267,7 +267,7 @@ eventHandler.modules.popover.button.update = function ($container, oStyle) {
         }
 
         $container.find('button[data-event="floatMe"][data-value="left"]').toggleClass("active", $(oStyle.image).hasClass("float-left"));
-        $container.find('button[data-event="floatMe"][data-value="center"]').toggleClass("active", $(oStyle.image).hasClass("center-block"));
+        $container.find('button[data-event="floatMe"][data-value="center"]').toggleClass("active", $(oStyle.image).hasClass("d-block mx-auto"));
         $container.find('button[data-event="floatMe"][data-value="right"]').toggleClass("active", $(oStyle.image).hasClass("float-right"));
 
         $(oStyle.image).trigger('attributes_change');
@@ -360,9 +360,9 @@ eventHandler.modules.editor.floatMe = function ($editable, sValue) {
     var $target = $(getImgTarget($editable));
     $editable.data('NoteHistory').recordUndo();
     switch (sValue) {
-        case 'center': $target.toggleClass('center-block').removeClass('float-right float-left'); break;
-        case 'left': $target.toggleClass('float-left').removeClass('float-right center-block'); break;
-        case 'right': $target.toggleClass('float-right').removeClass('float-left center-block'); break;
+        case 'center': $target.toggleClass('d-block mx-auto').removeClass('float-right float-left'); break;
+        case 'left': $target.toggleClass('float-left').removeClass('float-right d-block mx-auto'); break;
+        case 'right': $target.toggleClass('float-right').removeClass('float-left d-block mx-auto'); break;
     }
 };
 eventHandler.modules.editor.imageShape = function ($editable, sValue) {
diff --git a/addons/web_editor/static/src/scss/web_editor.common.scss b/addons/web_editor/static/src/scss/web_editor.common.scss
index bcd8548fbc4..31ae70b766c 100644
--- a/addons/web_editor/static/src/scss/web_editor.common.scss
+++ b/addons/web_editor/static/src/scss/web_editor.common.scss
@@ -71,7 +71,7 @@ img.padding-xl, .img.padding-xl, span.fa.padding-xl, iframe.padding-xl {
 .fa-10x {
     font-size: 10em;
 }
-.fa.center-block {
+.fa.d-block.mx-auto {
     text-align: center;
 }
 
diff --git a/addons/website/static/src/xml/website.backend.xml b/addons/website/static/src/xml/website.backend.xml
index 11afcaacd52..b61d4503e95 100644
--- a/addons/website/static/src/xml/website.backend.xml
+++ b/addons/website/static/src/xml/website.backend.xml
@@ -33,7 +33,7 @@
                             </div>
                             <div class="o_buttons text-center">
                                 <h3>There is no data currently available.</h3>
-                                <button class="btn btn-primary js_link_analytics_settings center-block mb8">Link my Analytics Account</button>
+                                <button class="btn btn-primary js_link_analytics_settings d-block mx-auto mb8">Link my Analytics Account</button>
                             </div>
                         </div>
                     </div>
diff --git a/addons/website/views/snippets.xml b/addons/website/views/snippets.xml
index 6fb0a8d21b6..2fb2ac8dba3 100644
--- a/addons/website/views/snippets.xml
+++ b/addons/website/views/snippets.xml
@@ -69,7 +69,7 @@
         <div class="container">
             <div class="row">
                 <div class="col-lg-6">
-                  <img class="img img-fluid center-block mb16" src="/web/image/website.s_image_text_default_image"  alt="Odoo image and text block"/>
+                  <img class="img img-fluid d-block mx-auto mb16" src="/web/image/website.s_image_text_default_image"  alt="Odoo image and text block"/>
                 </div>
                 <div class="col-lg-6 mt32">
                     <h3>A Section Subtitle</h3>
@@ -391,7 +391,7 @@
                 <div class="col-lg-6 pt16 pb16">
                     <div class="row s_no_resize_cols">
                         <div class="col-lg-4">
-                            <img alt="Company team" src="/web/image/website.s_company_team_image_1" class="img-fluid rounded-circle center-block shadow"/>
+                            <img alt="Company team" src="/web/image/website.s_company_team_image_1" class="img-fluid rounded-circle d-block mx-auto shadow"/>
                         </div>
                         <div class="col-lg-8">
                             <h4>Tony Fred, CEO</h4>
@@ -406,7 +406,7 @@
                 <div class="col-lg-6 pt16 pb16">
                     <div class="row s_no_resize_cols">
                         <div class="col-lg-4">
-                            <img alt="Company team" src="/web/image/website.s_company_team_image_2" class="img-fluid rounded-circle center-block shadow"/>
+                            <img alt="Company team" src="/web/image/website.s_company_team_image_2" class="img-fluid rounded-circle d-block mx-auto shadow"/>
                         </div>
                         <div class="col-lg-8">
                             <h4>Mich Stark, COO</h4>
@@ -421,7 +421,7 @@
                 <div class="col-lg-6 pt16 pb16">
                     <div class="row s_no_resize_cols">
                         <div class="col-lg-4">
-                            <img alt="Company team" src="/web/image/website.s_company_team_image_3" class="img-fluid rounded-circle center-block shadow"/>
+                            <img alt="Company team" src="/web/image/website.s_company_team_image_3" class="img-fluid rounded-circle d-block mx-auto shadow"/>
                         </div>
                         <div class="col-lg-8">
                             <h4>Aline Turner, CTO</h4>
@@ -436,7 +436,7 @@
                 <div class="col-lg-6 pt16 pb16">
                     <div class="row s_no_resize_cols">
                         <div class="col-lg-4">
-                            <img alt="Company team" src="/web/image/website.s_company_team_image_4" class="img-fluid rounded-circle center-block shadow"/>
+                            <img alt="Company team" src="/web/image/website.s_company_team_image_4" class="img-fluid rounded-circle d-block mx-auto shadow"/>
                         </div>
                         <div class="col-lg-8">
                             <h4>Iris Joe, CFO</h4>
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 b8482595980..1d51eb67f20 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
@@ -168,7 +168,7 @@
         <div t-foreach="partner.implemented_partner_ids" t-as="reference" class="media">
           <t t-if="reference.website_published">
             <a class="float-left" t-attf-href="/customers/#{slug(reference)}">
-                <span t-field="reference.image_small" t-options='{"widget": "image", "class": "center-block"}'/>
+                <span t-field="reference.image_small" t-options='{"widget": "image", "class": "d-block mx-auto"}'/>
             </a>
             <div class="media-body" style="min-height: 64px;">
                 <a class="media-heading" t-attf-href="/customers/#{slug(reference)}">
diff --git a/addons/website_customer/views/website_customer_templates.xml b/addons/website_customer/views/website_customer_templates.xml
index a0c02c88c48..7c44b38161d 100644
--- a/addons/website_customer/views/website_customer_templates.xml
+++ b/addons/website_customer/views/website_customer_templates.xml
@@ -198,7 +198,7 @@
         </h4>
         <div><a t-attf-href="/partners/#{slug(partner.assigned_partner_id)}"
                 t-field="partner.assigned_partner_id.image_medium"
-                t-options='{"widget": "image", "class": "center-block"}'
+                t-options='{"widget": "image", "class": "d-block mx-auto"}'
              />
         </div>
         <address class="text-left">
@@ -218,7 +218,7 @@
             <div t-foreach="partner.implemented_partner_ids" t-as="reference" class="media">
               <t t-if="reference.website_published">
                 <a class="float-left" t-attf-href="/customers/#{slug(reference)}">
-                    <span t-field="reference.image_small" t-options='{"widget": "image", "class": "center-block"}'/>
+                    <span t-field="reference.image_small" t-options='{"widget": "image", "class": "d-block mx-auto"}'/>
                 </a>
                 <div class="media-body" style="min-height: 64px;">
                     <a class="media-heading" t-attf-href="/customers/#{slug(reference)}">
diff --git a/addons/website_hr/views/website_hr_templates.xml b/addons/website_hr/views/website_hr_templates.xml
index 214af38ad52..061b779e2ed 100644
--- a/addons/website_hr/views/website_hr_templates.xml
+++ b/addons/website_hr/views/website_hr_templates.xml
@@ -27,7 +27,7 @@
                     <strong t-field="employee.name"></strong>
                 </div>
                 <div t-field="employee.job_id"/>
-                <div t-field="employee.public_info" class="text-muted mt16 center-block"/>
+                <div t-field="employee.public_info" class="text-muted mt16 d-block mx-auto"/>
             </div>
         </section>
     </xpath>
diff --git a/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml b/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml
index 4e351a31242..35469c7477f 100644
--- a/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml
+++ b/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml
@@ -407,7 +407,7 @@
                                         <h3 class="mb32 text-center">Your application has been sent to:</h3>
                                     </div>
                                     <div class="col-lg-1 offset-lg-4">
-                                        <p t-field="responsible.image_small" t-field-options="{'widget': 'image', 'class': 'rounded-circle center-block'}"/>
+                                        <p t-field="responsible.image_small" t-field-options="{'widget': 'image', 'class': 'rounded-circle d-block mx-auto'}"/>
                                     </div>
                                     <div class="col-lg-5 o_responsible_data">
                                         <h4 class="mt0" t-field="responsible.name"/>
diff --git a/addons/website_partner/views/website_partner_templates.xml b/addons/website_partner/views/website_partner_templates.xml
index b58c61ee609..7ecd9e09148 100644
--- a/addons/website_partner/views/website_partner_templates.xml
+++ b/addons/website_partner/views/website_partner_templates.xml
@@ -17,7 +17,7 @@
 <template id="partner_detail" name="Partner Details">
     <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}'/>
+        <div t-field="partner.image" t-options='{"widget": "image", "class": "d-block mx-auto mb16", "max_width": 512, "avoid_if_small": True}'/>
         <address>
              <div t-field="partner.self" t-options='{
                  "widget": "contact",