[REF] *: BS4, 'img-responsive' -> 'img-fluid'

34 files changed, 105 insertions, 105 deletions

diff --git a/addons/calendar/views/calendar_templates.xml b/addons/calendar/views/calendar_templates.xml
index ab5117a88b9..f2a6ca2b152 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-responsive center-block" src="/web/binary/company_logo" alt="Logo"/>
+                    <img class="img img-fluid center-block" src="/web/binary/company_logo" alt="Logo"/>
                 </div>
 
                 <div class="panel panel-default">
diff --git a/addons/crm/static/description/index.html b/addons/crm/static/description/index.html
index 6f4ab397d69..3191abfb168 100644
--- a/addons/crm/static/description/index.html
+++ b/addons/crm/static/description/index.html
@@ -43,7 +43,7 @@
             <p class="oe_mt32 oe_mb32 text-justify">
             Automate activities based on your sales scripts: calls, meetings, mails and quotations. Get all information you need, right on the opportunity: page viewed, mails received, etc.
             </p>
-            <img class='img-responsive' src="crm_sc_02b.png">
+            <img class='img-fluid' src="crm_sc_02b.png">
         </div>
     </div>
 </section>
diff --git a/addons/fleet/views/fleet_vehicle_model_views.xml b/addons/fleet/views/fleet_vehicle_model_views.xml
index d04413af0b5..f85a81649bd 100644
--- a/addons/fleet/views/fleet_vehicle_model_views.xml
+++ b/addons/fleet/views/fleet_vehicle_model_views.xml
@@ -125,7 +125,7 @@
                     <t t-name="kanban-box">
                         <div class="oe_kanban_vignette oe_semantic_html_override">
                             <a type="open" href="#" class="o_kanban_image oe_kanban_action">
-                                <img alt="Open" t-att-src="kanban_image('fleet.vehicle.model.brand', 'image_small', record.id.raw_value)" class="img-responsive" style="width:100px;"/>
+                                <img alt="Open" t-att-src="kanban_image('fleet.vehicle.model.brand', 'image_small', record.id.raw_value)" class="img-fluid" style="width:100px;"/>
                             </a>
                             <div class="oe_kanban_details">
                                 <h4 class="oe_partner_heading">
diff --git a/addons/hr_attendance/static/src/xml/attendance.xml b/addons/hr_attendance/static/src/xml/attendance.xml
index 7da29413eeb..f9a2be5b041 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-responsive center-block" src="/hr_attendance/static/src/img/barcode.png"/>
+                        <img class="img img-fluid center-block" 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_timesheet/views/res_config_settings_views.xml b/addons/hr_timesheet/views/res_config_settings_views.xml
index a8f5e440abf..19ca5289205 100644
--- a/addons/hr_timesheet/views/res_config_settings_views.xml
+++ b/addons/hr_timesheet/views/res_config_settings_views.xml
@@ -26,17 +26,17 @@
                                     <div class="row mt16 oe_center">
                                         <div class="col-md-4">
                                             <a href="http://www.odoo.com/page/timesheet?platform=chrome">
-                                                <img alt="Google Chrome Store" class="img img-responsive" src="project/static/src/img/chrome_store.png"/>
+                                                <img alt="Google Chrome Store" class="img img-fluid" src="project/static/src/img/chrome_store.png"/>
                                             </a>
                                         </div>
                                         <div class="col-md-4">
                                             <a href="http://www.odoo.com/page/timesheet?platform=ios">
-                                                <img alt="Apple App Store" class="img img-responsive" src="project/static/src/img/app_store.png"/>
+                                                <img alt="Apple App Store" class="img img-fluid" src="project/static/src/img/app_store.png"/>
                                             </a>
                                         </div>
                                         <div class="col-md-4">
                                             <a href="http://www.odoo.com/page/timesheet?platform=android">
-                                                <img alt="Google Play Store" class="img img-responsive" src="project/static/src/img/play_store.png"/>
+                                                <img alt="Google Play Store" class="img img-fluid" src="project/static/src/img/play_store.png"/>
                                             </a>
                                         </div>
                                     </div>
diff --git a/addons/im_livechat/views/im_livechat_channel_views.xml b/addons/im_livechat/views/im_livechat_channel_views.xml
index d08e427f2c4..bb24a19eb87 100644
--- a/addons/im_livechat/views/im_livechat_channel_views.xml
+++ b/addons/im_livechat/views/im_livechat_channel_views.xml
@@ -36,7 +36,7 @@
                         <t t-name="kanban-box">
                             <div class="oe_kanban_global_click">
                                 <div class="o_kanban_image">
-                                    <img t-att-src="kanban_image('im_livechat.channel', 'image_medium', record.id.raw_value)" class="img-responsive" alt="Channel"/>
+                                    <img t-att-src="kanban_image('im_livechat.channel', 'image_medium', record.id.raw_value)" class="img-fluid" alt="Channel"/>
                                 </div>
                                 <div class="oe_kanban_details">
                                     <strong class="o_kanban_record_title"><field name="name"/></strong>
diff --git a/addons/portal/static/src/scss/portal.scss b/addons/portal/static/src/scss/portal.scss
index faf5942d121..178e37b1907 100644
--- a/addons/portal/static/src/scss/portal.scss
+++ b/addons/portal/static/src/scss/portal.scss
@@ -137,7 +137,7 @@ img, .media_iframe_video, .o_image {
     }
 }
 img.o_we_custom_image {
-    // Images added with the editor are .img-responsive by default but should
+    // Images added with the editor are .img-fluid by default but should
     // still behave like inline content.
     display: inline-block;
 }
diff --git a/addons/web/models/ir_qweb.py b/addons/web/models/ir_qweb.py
index 29426b9d8a8..757f30dc1e2 100644
--- a/addons/web/models/ir_qweb.py
+++ b/addons/web/models/ir_qweb.py
@@ -29,7 +29,7 @@ class Image(models.AbstractModel):
         if options.get('qweb_img_raw_data', False):
             return super(Image, self).record_to_html(record, field_name, options)
 
-        aclasses = ['img', 'img-responsive'] if options.get('qweb_img_responsive', True) else ['img']
+        aclasses = ['img', 'img-fluid'] if options.get('qweb_img_responsive', True) else ['img']
         aclasses += options.get('class', '').split()
         classes = ' '.join(pycompat.imap(escape, aclasses))
 
diff --git a/addons/web/static/src/js/fields/basic_fields.js b/addons/web/static/src/js/fields/basic_fields.js
index 00092073d6a..707a944a727 100644
--- a/addons/web/static/src/js/fields/basic_fields.js
+++ b/addons/web/static/src/js/fields/basic_fields.js
@@ -2691,7 +2691,7 @@ var ImageSelection = AbstractField.extend({
         _.each(this.nodeOptions, function (val, key) {
             var $container = $('<div>').addClass('col-xs-3 text-center');
             var $img = $('<img>')
-                .addClass('img img-responsive img-thumbnail ml16')
+                .addClass('img img-fluid img-thumbnail ml16')
                 .toggleClass('btn-info', key === self.value)
                 .attr('src', val.image_link)
                 .data('key', key);
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index 1eaa2e59b84..561290d6322 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -939,7 +939,7 @@
     </div>
 </t>
 <t t-name="FieldBinaryImage-img">
-    <img class="img img-responsive"
+    <img class="img img-fluid"
         alt="Binary file"
         t-att-src='url'
         t-att-border="widget.readonly ? 0 : 1"
@@ -1492,7 +1492,7 @@
             </ul>
         </div>
         <div class="col-xs-6">
-            <img class="img-responsive" t-att-src='_s + "/web/static/src/img/enterprise_upgrade.jpg"' draggable="false" alt="Upgrade to enterprise"/>
+            <img class="img-fluid" t-att-src='_s + "/web/static/src/img/enterprise_upgrade.jpg"' draggable="false" alt="Upgrade to enterprise"/>
         </div>
     </div>
 </t>
diff --git a/addons/web/static/tests/fields/basic_fields_tests.js b/addons/web/static/tests/fields/basic_fields_tests.js
index a2224193bab..7d3108d5b43 100644
--- a/addons/web/static/tests/fields/basic_fields_tests.js
+++ b/addons/web/static/tests/fields/basic_fields_tests.js
@@ -1828,7 +1828,7 @@ QUnit.module('basic_fields', {
             "the widget should have the correct class");
         assert.strictEqual(form.$('div[name="document"] > img').length, 1,
             "the widget should contain an image");
-        assert.ok(form.$('div[name="document"] > img').hasClass('img-responsive'),
+        assert.ok(form.$('div[name="document"] > img').hasClass('img-fluid'),
             "the image should have the correct class");
         assert.strictEqual(form.$('div[name="document"] > img').attr('width'), "90",
             "the image should correctly set its attributes");
@@ -4679,14 +4679,14 @@ QUnit.module('basic_fields', {
             res_id: 2,
         });
 
-        assert.strictEqual(form.$('.img.img-responsive').length, 2,
+        assert.strictEqual(form.$('.img.img-fluid').length, 2,
             "Two images should be rendered");
         assert.strictEqual(form.$('.img.btn-info').length, 0,
             "No image should be selected");
 
         // select first image
-        form.$(".img.img-responsive:first").click();
-        assert.ok(form.$(".img.img-responsive:first").hasClass('btn-info'),
+        form.$(".img.img-fluid:first").click();
+        assert.ok(form.$(".img.img-fluid:first").hasClass('btn-info'),
             "First image should be selected");
 
         form.destroy();
diff --git a/addons/web/views/database_manager.html b/addons/web/views/database_manager.html
index c555c9e2e88..32033d94987 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-md-6 col-md-offset-3 o_database_list">
       <div class="text-center">
-        <img src="/web/static/src/img/logo2.png" class="img-responsive center-block"/>
+        <img src="/web/static/src/img/logo2.png" class="img-fluid center-block"/>
       </div>
       {% if not list_db %}
       <div class="alert alert-danger text-center">
diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js
index 463d2acf08e..059a0524ab4 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -994,7 +994,7 @@ registry.background_position = SnippetOption.extend({
 
             var img_url = /\(['"]?([^'"]+)['"]?\)/g.exec(self.$target.css('background-image'));
             img_url = (img_url && img_url[1]) || '';
-            var $img = $('<img/>', {class: 'img img-responsive', src: img_url});
+            var $img = $('<img/>', {class: 'img img-fluid', src: img_url});
             $img.on('load', function () {
                 self._bindImageEvents($img);
             });
diff --git a/addons/web_editor/static/src/js/tours/rte.js b/addons/web_editor/static/src/js/tours/rte.js
index 0a4ae0b32c3..a2c16262b6a 100644
--- a/addons/web_editor/static/src/js/tours/rte.js
+++ b/addons/web_editor/static/src/js/tours/rte.js
@@ -37,7 +37,7 @@ tour.register('rte', {
             '<p>Harum trium sententiarum nulli prorsus assentior.</p>\n'+
             '        </div>\n'+
             '        <div class="col-md-6 mt16">\n'+
-            '            <img class="img img-responsive shadow mb16" src="/web/static/src/img/logo.png" alt="Odoo text and image block">\n'+
+            '            <img class="img img-fluid shadow mb16" src="/web/static/src/img/logo.png" alt="Odoo text and image block">\n'+
             '        </div>\n'+
             '    </div>\n'+
             '</section>\n';
diff --git a/addons/web_editor/static/src/js/widgets/widgets.js b/addons/web_editor/static/src/js/widgets/widgets.js
index 9e04c9dbe7d..e189726051d 100644
--- a/addons/web_editor/static/src/js/widgets/widgets.js
+++ b/addons/web_editor/static/src/js/widgets/widgets.js
@@ -313,9 +313,9 @@ var ImageWidget = MediaWidget.extend({
                 }
                 if (!self.$media.is('img')) {
                     // Note: by default the images receive the bootstrap opt-in
-                    // img-responsive class. We cannot make them all responsive
+                    // img-fluid class. We cannot make them all responsive
                     // by design because of libraries and client databases img.
-                    self._replaceMedia($('<img/>', {class: 'img-responsive o_we_custom_image'}));
+                    self._replaceMedia($('<img/>', {class: 'img-fluid o_we_custom_image'}));
                 }
                 self.$media.attr('src', img.src);
 
@@ -459,7 +459,7 @@ var ImageWidget = MediaWidget.extend({
             var $div = $(el);
             if (/gif|jpe|jpg|png/.test($div.data('mimetype'))) {
                 var $img = $('<img/>', {
-                    class: 'img-responsive',
+                    class: 'img-fluid',
                     src: $div.data('url') || $div.data('src'),
                 });
                 var def = $.Deferred();
diff --git a/addons/web_editor/static/src/xml/editor.xml b/addons/web_editor/static/src/xml/editor.xml
index 96f126391cd..651cd60f883 100644
--- a/addons/web_editor/static/src/xml/editor.xml
+++ b/addons/web_editor/static/src/xml/editor.xml
@@ -310,7 +310,7 @@
         </div>
         <t t-else="">
            <div class="o_crop_area">
-                <img class="img img-responsive o_cropper_image" t-att-src="widget.imageData.originalSrc"/>
+                <img class="img img-fluid o_cropper_image" t-att-src="widget.imageData.originalSrc"/>
            </div>
            <div class="o_crop_options text-center mt16">
                <div class="btn-group" title="Aspect Ratio" data-toggle="buttons">
diff --git a/addons/web_settings_dashboard/static/src/xml/dashboard.xml b/addons/web_settings_dashboard/static/src/xml/dashboard.xml
index a98a557d66d..35fff93174f 100644
--- a/addons/web_settings_dashboard/static/src/xml/dashboard.xml
+++ b/addons/web_settings_dashboard/static/src/xml/dashboard.xml
@@ -148,7 +148,7 @@
             <div class="text-center o_web_settings_dashboard_enterprise">
                 <div class="text-center o_web_settings_dashboard_header">Odoo Enterprise</div>
                 <div class="mb16"><a href="http://www.odoo.com/editions" target="_blank">Get more features with the Enterprise Edition!</a></div>
-                <div><img class="img img-responsive" t-att-src='_s + "/web/static/src/img/enterprise_upgrade.jpg"' alt="Upgrade to enterprise"/></div>
+                <div><img class="img img-fluid" t-att-src='_s + "/web/static/src/img/enterprise_upgrade.jpg"' alt="Upgrade to enterprise"/></div>
                 <div>
                     <a class="btn btn-primary btn-block o_confirm_upgrade" role="button"><strong>Upgrade Now</strong></a>
                 </div>
diff --git a/addons/website/data/website_data.xml b/addons/website/data/website_data.xml
index b8e493c1505..2b30197235d 100644
--- a/addons/website/data/website_data.xml
+++ b/addons/website/data/website_data.xml
@@ -129,7 +129,7 @@
                                                 </p>
                                             </div>
                                             <div class="col-md-4 col-md-offset-2 mt16 mb16">
-                                                <img src="/website/static/src/img/library/business_conference.jpg" class="img img-responsive shadow" alt="Our Team"/>
+                                                <img src="/website/static/src/img/library/business_conference.jpg" class="img img-fluid shadow" alt="Our Team"/>
                                             </div>
                                         </div>
                                     </div>
diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index 0c3d02bffb8..6806d53be23 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -878,7 +878,7 @@ options.registry.gallery = options.Class.extend({
         dialog.on('save', this, function (attachments) {
             for (var i = 0 ; i < attachments.length; i++) {
                 $('<img/>', {
-                    class: 'img img-responsive',
+                    class: 'img img-fluid',
                     src: attachments[i].src,
                     'data-index': ++index,
                 }).appendTo($container);
diff --git a/addons/website/static/src/xml/website.gallery.xml b/addons/website/static/src/xml/website.gallery.xml
index 08226cb911b..ec82b3cf8ee 100644
--- a/addons/website/static/src/xml/website.gallery.xml
+++ b/addons/website/static/src/xml/website.gallery.xml
@@ -14,7 +14,7 @@
             <div class="carousel-inner container" style="padding: 0;">
                  <t t-foreach="srcs" t-as="src">
                     <div t-attf-class="item #{src_index == index and 'active' or ''}">
-                        <img t-attf-class="img img-responsive #{userStyle}" t-att-src="src" alt="Slide image"/>
+                        <img t-attf-class="img img-fluid #{userStyle}" t-att-src="src" alt="Slide image"/>
                     </div>
                  </t>
             </div>
diff --git a/addons/website/tests/test_qweb.py b/addons/website/tests/test_qweb.py
index e73083a66b2..5e078d89dd6 100644
--- a/addons/website/tests/test_qweb.py
+++ b/addons/website/tests/test_qweb.py
@@ -56,7 +56,7 @@ class TestQweb(TransactionCase):
         <div widget="html"><span class="toto">
                 span<span class="fa"></span><img src="http://test.cdn/web/image/1">
             </span></div>
-        <div widget="image"><img src="http://test.cdn/web/image/res.users/%(user_id)s/image" class="img img-responsive"/></div>
+        <div widget="image"><img src="http://test.cdn/web/image/res.users/%(user_id)s/image" class="img img-fluid"/></div>
     </body>
 </html>""" % {
             "js": attachments[0].url,
diff --git a/addons/website/views/snippets.xml b/addons/website/views/snippets.xml
index e1d9efb767d..b8cd2ccb2e9 100644
--- a/addons/website/views/snippets.xml
+++ b/addons/website/views/snippets.xml
@@ -30,7 +30,7 @@
                             <p><a role="button" href="/contactus" class="btn btn-warning btn-large">Contact us</a></p>
                         </div>
                         <div class="carousel-img col-md-6 col-md-offset-1 d-none d-lg-block">
-                            <img class="img-responsive" src="/web/image/website.s_banner_default_image" alt="Slider Odoo Image"/>
+                            <img class="img-fluid" src="/web/image/website.s_banner_default_image" alt="Slider Odoo Image"/>
                         </div>
                     </div>
                 </div>
@@ -57,7 +57,7 @@
                     </p>
                 </div>
                 <div class="col-md-6">
-                  <img class="img img-responsive pull-left mb16" src="/web/image/website.s_text_image_default_image" alt="Odoo text and image block"/>
+                  <img class="img img-fluid pull-left mb16" src="/web/image/website.s_text_image_default_image" alt="Odoo text and image block"/>
                 </div>
             </div>
         </div>
@@ -69,7 +69,7 @@
         <div class="container">
             <div class="row">
                 <div class="col-md-6">
-                  <img class="img img-responsive center-block mb16" src="/web/image/website.s_image_text_default_image"  alt="Odoo image and text block"/>
+                  <img class="img img-fluid center-block mb16" src="/web/image/website.s_image_text_default_image"  alt="Odoo image and text block"/>
                 </div>
                 <div class="col-md-6 mt32">
                     <h3>A Section Subtitle</h3>
@@ -179,7 +179,7 @@
             <h2 class="text-center">A Punchy Headline</h2>
             <div class="row">
                 <div class="col-md-12">
-                  <img class="img img-responsive" src="/web/image/website.s_big_picture_default_image" style="margin: 0 auto;"  alt="Odoo CMS - a big picture"/>
+                  <img class="img img-fluid" src="/web/image/website.s_big_picture_default_image" style="margin: 0 auto;"  alt="Odoo CMS - a big picture"/>
                 </div>
                 <div class="col-md-6 col-md-offset-3 mt16">
                     <p class="text-center">
@@ -204,7 +204,7 @@
         <div class="container">
             <div class="row">
                 <div class="col-md-4">
-                    <img class="img img-responsive" src="/web/image/website.library_image_11" alt="Odoo - Sample 1 for three columns"/>
+                    <img class="img img-fluid" src="/web/image/website.library_image_11" alt="Odoo - Sample 1 for three columns"/>
                     <h4 class="mt16">Feature One</h4>
                     <p>
                         Adapt these three columns to fit you design need.
@@ -213,7 +213,7 @@
                     </p>
                 </div>
                 <div class="col-md-4">
-                    <img class="img img-responsive" src="/web/image/website.library_image_13" alt="Odoo - Sample 2 for three columns"/>
+                    <img class="img img-fluid" src="/web/image/website.library_image_13" alt="Odoo - Sample 2 for three columns"/>
                     <h4 class="mt16">Feature Two</h4>
                     <p>
                         To add a fourth column, reduce the size of these
@@ -223,7 +223,7 @@
                     </p>
                 </div>
                 <div class="col-md-4">
-                    <img class="img img-responsive" src="/web/image/website.library_image_07" alt="Odoo - Sample 3 for three columns"/>
+                    <img class="img img-fluid" src="/web/image/website.library_image_07" alt="Odoo - Sample 3 for three columns"/>
                     <h4 class="mt16">Feature Three</h4>
                     <p>
                         Delete the above image or replace it with a picture
@@ -262,7 +262,7 @@
 <template id="s_image_floating" name="Image Floating">
     <div class="o_image_floating o_margin_l pull-right s_image_floating">
         <div class="o_container">
-            <img class="img img-rounded img-responsive" src="/web/image/website.s_image_floating_default_image" alt="Odoo CMS- Sample image floating"/>
+            <img class="img img-rounded img-fluid" src="/web/image/website.s_image_floating_default_image" alt="Odoo CMS- Sample image floating"/>
         </div>
         <div class="o_footer">
             <small class="text-muted">A great way to catch your reader's attention is to tell a story. Everything you consider writing can be told as a story.</small>
@@ -391,7 +391,7 @@
                 <div class="col-md-6 pt16 pb16">
                     <div class="row s_no_resize_cols">
                         <div class="col-md-4">
-                            <img alt="Company team" src="/web/image/website.s_company_team_image_1" class="img-responsive img-circle center-block shadow"/>
+                            <img alt="Company team" src="/web/image/website.s_company_team_image_1" class="img-fluid img-circle center-block shadow"/>
                         </div>
                         <div class="col-md-8">
                             <h4>Tony Fred, CEO</h4>
@@ -406,7 +406,7 @@
                 <div class="col-md-6 pt16 pb16">
                     <div class="row s_no_resize_cols">
                         <div class="col-md-4">
-                            <img alt="Company team" src="/web/image/website.s_company_team_image_2" class="img-responsive img-circle center-block shadow"/>
+                            <img alt="Company team" src="/web/image/website.s_company_team_image_2" class="img-fluid img-circle center-block shadow"/>
                         </div>
                         <div class="col-md-8">
                             <h4>Mich Stark, COO</h4>
@@ -421,7 +421,7 @@
                 <div class="col-md-6 pt16 pb16">
                     <div class="row s_no_resize_cols">
                         <div class="col-md-4">
-                            <img alt="Company team" src="/web/image/website.s_company_team_image_3" class="img-responsive img-circle center-block shadow"/>
+                            <img alt="Company team" src="/web/image/website.s_company_team_image_3" class="img-fluid img-circle center-block shadow"/>
                         </div>
                         <div class="col-md-8">
                             <h4>Aline Turner, CTO</h4>
@@ -436,7 +436,7 @@
                 <div class="col-md-6 pt16 pb16">
                     <div class="row s_no_resize_cols">
                         <div class="col-md-4">
-                            <img alt="Company team" src="/web/image/website.s_company_team_image_4" class="img-responsive img-circle center-block shadow"/>
+                            <img alt="Company team" src="/web/image/website.s_company_team_image_4" class="img-fluid img-circle center-block shadow"/>
                         </div>
                         <div class="col-md-8">
                             <h4>Iris Joe, CFO</h4>
@@ -547,19 +547,19 @@
                   <h4 class="text-center">Our References</h4>
                 </div>
                 <div class="col-md-2 col-sm-3 col-xs-6">
-                  <img src="/web/image/website.s_reference_demo_image_1" class="img img-responsive " alt="Demo Logo"/>
+                  <img src="/web/image/website.s_reference_demo_image_1" class="img img-fluid " alt="Demo Logo"/>
                 </div>
                 <div class="col-md-2 col-sm-3 col-xs-6">
-                  <img src="/web/image/website.s_reference_demo_image_2" class="img img-responsive " alt="Demo Logo"/>
+                  <img src="/web/image/website.s_reference_demo_image_2" class="img img-fluid " alt="Demo Logo"/>
                 </div>
                 <div class="col-md-2 col-sm-3 col-xs-6">
-                  <img src="/web/image/website.s_reference_demo_image_3" class="img img-responsive " alt="Demo Logo"/>
+                  <img src="/web/image/website.s_reference_demo_image_3" class="img img-fluid " alt="Demo Logo"/>
                 </div>
                 <div class="col-md-2 col-sm-3 col-xs-6">
-                  <img src="/web/image/website.s_reference_demo_image_4" class="img img-responsive " alt="Demo Logo"/>
+                  <img src="/web/image/website.s_reference_demo_image_4" class="img img-fluid " alt="Demo Logo"/>
                 </div>
                 <div class="col-md-2 col-sm-3 col-xs-6">
-                  <img src="/web/image/website.s_reference_demo_image_5" class="img img-responsive " alt="Demo Logo"/>
+                  <img src="/web/image/website.s_reference_demo_image_5" class="img img-fluid " alt="Demo Logo"/>
                 </div>
             </div>
         </div>
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index 44018c26a39..f18abdf667a 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -843,7 +843,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-responsive" t-att-src="res_company.google_map_img()" alt="Google Maps"/>
+           <img class="thumbnail img-fluid" t-att-src="res_company.google_map_img()" alt="Google Maps"/>
         </a>
     </t>
 </template>
diff --git a/addons/website_blog/data/website_blog_demo.xml b/addons/website_blog/data/website_blog_demo.xml
index 721a23bcedd..6cf92624bbd 100644
--- a/addons/website_blog/data/website_blog_demo.xml
+++ b/addons/website_blog/data/website_blog_demo.xml
@@ -71,7 +71,7 @@
                         read) the inbox and easily mark messages for future
                         actions. Every inbox should be empty after having
                         been processed; no more overload of information.
-                        <img class="img-responsive" src="/website_blog/static/src/img/mail-sc-00.png" alt=""/>
+                        <img class="img-fluid" src="/website_blog/static/src/img/mail-sc-00.png" alt=""/>
                     </li><li>
                         Keep control of what you want to receive or don't want
                         to receive. People should never receive spam. You
@@ -82,7 +82,7 @@
                         interface does not require you to click on every mail
                         to read a thread. Reading a full thread, replying,
                         attaching documents is super fast.
-                        <img class="img-responsive" src="/website_blog/static/src/img/mail-sc-03.png" alt=""/>
+                        <img class="img-fluid" src="/website_blog/static/src/img/mail-sc-03.png" alt=""/>
                     </li><li>
                         A mix of push & pull: Today, people
                         are victims of what others decide to push to them.
@@ -139,7 +139,7 @@
     <div class="container">
         <div class="row">
             <div class="col-md-6 mt16">
-                <img class="img img-responsive mb16" src="/website_blog/static/src/img/CMS_WMS_screens.jpg" alt=""/>
+                <img class="img img-fluid mb16" src="/website_blog/static/src/img/CMS_WMS_screens.jpg" alt=""/>
             </div>
             <div class="col-md-6 mt16">
                 <h3>New Features Launched</h3>
diff --git a/addons/website_event/views/event_templates.xml b/addons/website_event/views/event_templates.xml
index 462942423c2..eea982d496f 100644
--- a/addons/website_event/views/event_templates.xml
+++ b/addons/website_event/views/event_templates.xml
@@ -647,7 +647,7 @@
                 <div class="country_events_list">
                     <div class="text-muted text-left">
                         <div>
-                            <img class="img-rounded img-responsive" src="/website_event/static/src/img/world_map.jpg" alt=""></img>
+                            <img class="img-rounded img-fluid" src="/website_event/static/src/img/world_map.jpg" alt=""></img>
                         </div>
                         <div>Events in visitor's country</div>
                     </div>
@@ -672,11 +672,11 @@
             <div class="country_events_list">
                 <div>
                     <t t-if="country">
-                        <img class="img-rounded img-responsive" t-att-src="website.image_url(country, 'image')" alt=""></img>
+                        <img class="img-rounded img-fluid" t-att-src="website.image_url(country, 'image')" alt=""></img>
                         <h4><b>Events: <span t-esc="country.name"></span></b></h4>
                     </t>
                     <t t-if="not country">
-                        <img class="img-rounded img-responsive" src="/website_event/static/src/img/world_map.jpg" alt=""></img>
+                        <img class="img-rounded img-fluid" src="/website_event/static/src/img/world_map.jpg" alt=""></img>
                         <h4><b>Upcoming Events</b></h4>
                     </t>
                     <div t-foreach="events[:5]" t-as="event_dict" class="oe_website_overflow_ellipsis mb8">
diff --git a/addons/website_forum/views/website_forum.xml b/addons/website_forum/views/website_forum.xml
index 200e26bb1d1..7e5c4c3c4f3 100644
--- a/addons/website_forum/views/website_forum.xml
+++ b/addons/website_forum/views/website_forum.xml
@@ -1297,7 +1297,7 @@
                     <a href="#" title="Clear" aria-label="Clear">
                         <i class="fa fa-trash-o fa-1g pull-right o_forum_profile_pic_clear"></i>
                     </a>
-                    <img class="img img-responsive img-circle o_forum_avatar_img" t-attf-src="/forum/user/#{user.id}/avatar" alt="Avatar"/>
+                    <img class="img img-fluid img-circle o_forum_avatar_img" t-attf-src="/forum/user/#{user.id}/avatar" alt="Avatar"/>
                 </div>
                 <div class="col-md-10">
                     <input name="user_id" t-att-value="user.id" type="hidden"/>
@@ -1372,7 +1372,7 @@
         </h1>
         <div class="row">
             <div class="col-sm-2">
-                <img class="img img-responsive img-circle" t-attf-src="/forum/user/#{user.id}/avatar" alt="Avatar"/>
+                <img class="img img-fluid img-circle" t-attf-src="/forum/user/#{user.id}/avatar" alt="Avatar"/>
             </div>
             <div class="col-sm-10">
                 <table class="table table-condensed">
diff --git a/addons/website_hr_recruitment/data/hr_job_demo.xml b/addons/website_hr_recruitment/data/hr_job_demo.xml
index 1b5434c6b88..959a57b27bc 100644
--- a/addons/website_hr_recruitment/data/hr_job_demo.xml
+++ b/addons/website_hr_recruitment/data/hr_job_demo.xml
@@ -115,16 +115,16 @@
             </div>
             <div class="col-md-12 text-center">
                 <div class="col-md-5 mt16">
-                    <img alt="" class="img img-responsive" style="height:355px;" src="/website_hr_recruitment/static/src/img/882207_10151545507603963_1381082528_o.jpg"/>
+                    <img alt="" class="img img-fluid" style="height:355px;" src="/website_hr_recruitment/static/src/img/882207_10151545507603963_1381082528_o.jpg"/>
                 </div>
                 <div class="col-md-3 mt16">
-                    <img alt="" class="img img-responsive" style="height:355px;" src="/website_hr_recruitment/static/src/img/1010054_10151543538268963_186969588_n.jpg"/>
+                    <img alt="" class="img img-fluid" style="height:355px;" src="/website_hr_recruitment/static/src/img/1010054_10151543538268963_186969588_n.jpg"/>
                 </div>
                 <div class="col-md-3 mt16">
-                    <img alt="" class="img img-responsive" src="/website_hr_recruitment/static/src/img/1017407_10151536656083963_857938319_n.jpg"/>
+                    <img alt="" class="img img-fluid" src="/website_hr_recruitment/static/src/img/1017407_10151536656083963_857938319_n.jpg"/>
                 </div>
                 <div class="col-md-3 mt16">
-                    <img alt="" class="img img-responsive" src="/website_hr_recruitment/static/src/img/1044326_10151536655788963_587131144_n.jpg"/>
+                    <img alt="" class="img img-fluid" src="/website_hr_recruitment/static/src/img/1044326_10151536655788963_587131144_n.jpg"/>
                 </div>
             </div>
         </div>
@@ -248,16 +248,16 @@
             </div>
             <div class="col-md-12 text-center">
                 <div class="col-md-5 mt16">
-                    <img alt="" class="img img-responsive" style="height:355px;" src="/website_hr_recruitment/static/src/img/882207_10151545507603963_1381082528_o.jpg"/>
+                    <img alt="" class="img img-fluid" style="height:355px;" src="/website_hr_recruitment/static/src/img/882207_10151545507603963_1381082528_o.jpg"/>
                 </div>
                 <div class="col-md-3 mt16">
-                    <img alt="" class="img img-responsive" style="height:355px;" src="/website_hr_recruitment/static/src/img/1010054_10151543538268963_186969588_n.jpg"/>
+                    <img alt="" class="img img-fluid" style="height:355px;" src="/website_hr_recruitment/static/src/img/1010054_10151543538268963_186969588_n.jpg"/>
                 </div>
                 <div class="col-md-3 mt16">
-                    <img alt="" class="img img-responsive" src="/website_hr_recruitment/static/src/img/1017407_10151536656083963_857938319_n.jpg"/>
+                    <img alt="" class="img img-fluid" src="/website_hr_recruitment/static/src/img/1017407_10151536656083963_857938319_n.jpg"/>
                 </div>
                 <div class="col-md-3 mt16">
-                    <img alt="" class="img img-responsive" src="/website_hr_recruitment/static/src/img/1044326_10151536655788963_587131144_n.jpg"/>
+                    <img alt="" class="img img-fluid" src="/website_hr_recruitment/static/src/img/1044326_10151536655788963_587131144_n.jpg"/>
                 </div>
             </div>
         </div>
@@ -382,16 +382,16 @@
             </div>
             <div class="col-md-12 text-center">
                 <div class="col-md-5 mt16">
-                    <img alt="" class="img img-responsive" style="height:355px;" src="/website_hr_recruitment/static/src/img/882207_10151545507603963_1381082528_o.jpg"/>
+                    <img alt="" class="img img-fluid" style="height:355px;" src="/website_hr_recruitment/static/src/img/882207_10151545507603963_1381082528_o.jpg"/>
                 </div>
                 <div class="col-md-3 mt16">
-                    <img alt="" class="img img-responsive" style="height:355px;" src="/website_hr_recruitment/static/src/img/1010054_10151543538268963_186969588_n.jpg"/>
+                    <img alt="" class="img img-fluid" style="height:355px;" src="/website_hr_recruitment/static/src/img/1010054_10151543538268963_186969588_n.jpg"/>
                 </div>
                 <div class="col-md-3 mt16">
-                    <img alt="" class="img img-responsive" src="/website_hr_recruitment/static/src/img/1017407_10151536656083963_857938319_n.jpg"/>
+                    <img alt="" class="img img-fluid" src="/website_hr_recruitment/static/src/img/1017407_10151536656083963_857938319_n.jpg"/>
                 </div>
                 <div class="col-md-3 mt16">
-                    <img alt="" class="img img-responsive" src="/website_hr_recruitment/static/src/img/1044326_10151536655788963_587131144_n.jpg"/>
+                    <img alt="" class="img img-fluid" src="/website_hr_recruitment/static/src/img/1044326_10151536655788963_587131144_n.jpg"/>
                 </div>
             </div>
     </div>
@@ -511,16 +511,16 @@
             </div>
             <div class="col-md-12 text-center">
                 <div class="col-md-5 mt16">
-                    <img alt="" class="img img-responsive" style="height:355px;" src="/website_hr_recruitment/static/src/img/882207_10151545507603963_1381082528_o.jpg"/>
+                    <img alt="" class="img img-fluid" style="height:355px;" src="/website_hr_recruitment/static/src/img/882207_10151545507603963_1381082528_o.jpg"/>
                 </div>
                 <div class="col-md-3 mt16">
-                    <img alt="" class="img img-responsive" style="height:355px;" src="/website_hr_recruitment/static/src/img/1010054_10151543538268963_186969588_n.jpg"/>
+                    <img alt="" class="img img-fluid" style="height:355px;" src="/website_hr_recruitment/static/src/img/1010054_10151543538268963_186969588_n.jpg"/>
                 </div>
                 <div class="col-md-3 mt16">
-                    <img alt="" class="img img-responsive" src="/website_hr_recruitment/static/src/img/1017407_10151536656083963_857938319_n.jpg"/>
+                    <img alt="" class="img img-fluid" src="/website_hr_recruitment/static/src/img/1017407_10151536656083963_857938319_n.jpg"/>
                 </div>
                 <div class="col-md-3 mt16">
-                    <img alt="" class="img img-responsive" src="/website_hr_recruitment/static/src/img/1044326_10151536655788963_587131144_n.jpg"/>
+                    <img alt="" class="img img-fluid" src="/website_hr_recruitment/static/src/img/1044326_10151536655788963_587131144_n.jpg"/>
                 </div>
             </div>
         </div>
@@ -639,16 +639,16 @@
             </div>
             <div class="col-md-12 text-center">
                 <div class="col-md-5 mt16">
-                    <img alt="" class="img img-responsive" style="height:355px;" src="/website_hr_recruitment/static/src/img/882207_10151545507603963_1381082528_o.jpg"/>
+                    <img alt="" class="img img-fluid" style="height:355px;" src="/website_hr_recruitment/static/src/img/882207_10151545507603963_1381082528_o.jpg"/>
                 </div>
                 <div class="col-md-3 mt16">
-                    <img alt="" class="img img-responsive" style="height:355px;" src="/website_hr_recruitment/static/src/img/1010054_10151543538268963_186969588_n.jpg"/>
+                    <img alt="" class="img img-fluid" style="height:355px;" src="/website_hr_recruitment/static/src/img/1010054_10151543538268963_186969588_n.jpg"/>
                 </div>
                 <div class="col-md-3 mt16">
-                    <img alt="" class="img img-responsive" src="/website_hr_recruitment/static/src/img/1017407_10151536656083963_857938319_n.jpg"/>
+                    <img alt="" class="img img-fluid" src="/website_hr_recruitment/static/src/img/1017407_10151536656083963_857938319_n.jpg"/>
                 </div>
                 <div class="col-md-3 mt16">
-                    <img alt="" class="img img-responsive" src="/website_hr_recruitment/static/src/img/1044326_10151536655788963_587131144_n.jpg"/>
+                    <img alt="" class="img img-fluid" src="/website_hr_recruitment/static/src/img/1044326_10151536655788963_587131144_n.jpg"/>
                 </div>
             </div>
         </div>
@@ -767,16 +767,16 @@
             </div>
             <div class="col-md-12 text-center">
                 <div class="col-md-5 mt16">
-                    <img alt="" class="img img-responsive" style="height:355px;" src="/website_hr_recruitment/static/src/img/882207_10151545507603963_1381082528_o.jpg"/>
+                    <img alt="" class="img img-fluid" style="height:355px;" src="/website_hr_recruitment/static/src/img/882207_10151545507603963_1381082528_o.jpg"/>
                 </div>
                 <div class="col-md-3 mt16">
-                    <img alt="" class="img img-responsive" style="height:355px;" src="/website_hr_recruitment/static/src/img/1010054_10151543538268963_186969588_n.jpg"/>
+                    <img alt="" class="img img-fluid" style="height:355px;" src="/website_hr_recruitment/static/src/img/1010054_10151543538268963_186969588_n.jpg"/>
                 </div>
                 <div class="col-md-3 mt16">
-                    <img alt="" class="img img-responsive" src="/website_hr_recruitment/static/src/img/1017407_10151536656083963_857938319_n.jpg"/>
+                    <img alt="" class="img img-fluid" src="/website_hr_recruitment/static/src/img/1017407_10151536656083963_857938319_n.jpg"/>
                 </div>
                 <div class="col-md-3 mt16">
-                    <img alt="" class="img img-responsive" src="/website_hr_recruitment/static/src/img/1044326_10151536655788963_587131144_n.jpg"/>
+                    <img alt="" class="img img-fluid" src="/website_hr_recruitment/static/src/img/1044326_10151536655788963_587131144_n.jpg"/>
                 </div>
             </div>
         </div>
@@ -896,16 +896,16 @@
             </div>
             <div class="col-md-12 text-center">
                 <div class="col-md-5 mt16">
-                    <img alt="" class="img img-responsive" style="height:355px;" src="/website_hr_recruitment/static/src/img/882207_10151545507603963_1381082528_o.jpg"/>
+                    <img alt="" class="img img-fluid" style="height:355px;" src="/website_hr_recruitment/static/src/img/882207_10151545507603963_1381082528_o.jpg"/>
                 </div>
                 <div class="col-md-3 mt16">
-                    <img alt="" class="img img-responsive" style="height:355px;" src="/website_hr_recruitment/static/src/img/1010054_10151543538268963_186969588_n.jpg"/>
+                    <img alt="" class="img img-fluid" style="height:355px;" src="/website_hr_recruitment/static/src/img/1010054_10151543538268963_186969588_n.jpg"/>
                 </div>
                 <div class="col-md-3 mt16">
-                    <img alt="" class="img img-responsive" src="/website_hr_recruitment/static/src/img/1017407_10151536656083963_857938319_n.jpg"/>
+                    <img alt="" class="img img-fluid" src="/website_hr_recruitment/static/src/img/1017407_10151536656083963_857938319_n.jpg"/>
                 </div>
                 <div class="col-md-3 mt16">
-                    <img alt="" class="img img-responsive" src="/website_hr_recruitment/static/src/img/1044326_10151536655788963_587131144_n.jpg"/>
+                    <img alt="" class="img img-fluid" src="/website_hr_recruitment/static/src/img/1044326_10151536655788963_587131144_n.jpg"/>
                 </div>
             </div>
         </div>
diff --git a/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml b/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml
index c26ee165d7b..9206577c5d8 100644
--- a/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml
+++ b/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml
@@ -355,24 +355,24 @@
         <div class="container">
             <div class="row">
                 <div class="col-sm-12 col-md-6 mt16 mb16">
-                    <img alt="" class="img img-responsive" src="/website_hr_recruitment/static/src/img/job_image_3.jpg"/>
+                    <img alt="" class="img img-fluid" src="/website_hr_recruitment/static/src/img/job_image_3.jpg"/>
                 </div>
                 <div class="col-sm-6 col-md-3 mt16 mb16">
-                    <img alt="" class="img img-responsive" src="/website_hr_recruitment/static/src/img/job_image_2.jpg"/>
+                    <img alt="" class="img img-fluid" src="/website_hr_recruitment/static/src/img/job_image_2.jpg"/>
                 </div>
                 <div class="col-sm-6 col-md-3 mt16 mb16">
-                    <img alt="" class="img img-responsive" src="/website_hr_recruitment/static/src/img/job_image_4.jpg"/>
+                    <img alt="" class="img img-fluid" src="/website_hr_recruitment/static/src/img/job_image_4.jpg"/>
                 </div>
             </div>
             <div class="row">
                 <div class="col-sm-6 col-md-3 mt16 mb16">
-                    <img alt="" class="img img-responsive" src="/website_hr_recruitment/static/src/img/job_image_6.jpg"/>
+                    <img alt="" class="img img-fluid" src="/website_hr_recruitment/static/src/img/job_image_6.jpg"/>
                 </div>
                 <div class="col-sm-6 col-md-3 mt16 mb16">
-                    <img alt="" class="img img-responsive" src="/website_hr_recruitment/static/src/img/job_image_5.jpg"/>
+                    <img alt="" class="img img-fluid" src="/website_hr_recruitment/static/src/img/job_image_5.jpg"/>
                 </div>
                 <div class="col-sm-12 col-md-6 mt16 mb16">
-                    <img alt="" class="img img-responsive" src="/website_hr_recruitment/static/src/img/job_image_1.jpg"/>
+                    <img alt="" class="img img-fluid" src="/website_hr_recruitment/static/src/img/job_image_1.jpg"/>
                 </div>
             </div>
         </div>
diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index d8c3b3442ab..9a863f4e481 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -446,14 +446,14 @@
 
                               <ol class="carousel-indicators" t-if="len(image_ids) or variant_img">
                                 <li t-if="variant_img" data-target="#o-carousel-product" data-slide-to="0" class="active">
-                                    <img class="img img-responsive js_variant_img_small" t-attf-src="/website/image/product.product/{{product.product_variant_id.id}}/image/90x90" t-att-alt="product.name"/>
+                                    <img class="img img-fluid js_variant_img_small" t-attf-src="/website/image/product.product/{{product.product_variant_id.id}}/image/90x90" t-att-alt="product.name"/>
                                 </li>
                                 <li data-target="#o-carousel-product" t-att-data-slide-to="1 if variant_img else '0'" t-att-class="'' if variant_img else 'active'">
-                                    <img class="img img-responsive" t-attf-src="/website/image/product.template/{{product.id}}/image/90x90" t-att-alt="product.name"/>
+                                    <img class="img img-fluid" t-attf-src="/website/image/product.template/{{product.id}}/image/90x90" t-att-alt="product.name"/>
                                 </li>
                                 <t t-if="len(image_ids)" t-foreach="image_ids" t-as="pimg">
                                     <li data-target="#o-carousel-product" t-att-data-slide-to="pimg_index + (variant_img and 2 or 1)">
-                                        <img class="img img-responsive" t-attf-src="/website/image/product.image/{{pimg.id}}/image/90x90" t-att-alt="pimg.name"/>
+                                        <img class="img img-fluid" t-attf-src="/website/image/product.image/{{pimg.id}}/image/90x90" t-att-alt="pimg.name"/>
                                     </li>
                                 </t>
                               </ol>
diff --git a/addons/website_sale_comparison/views/website_sale_comparison_template.xml b/addons/website_sale_comparison/views/website_sale_comparison_template.xml
index b15e981ad02..96e8c794195 100644
--- a/addons/website_sale_comparison/views/website_sale_comparison_template.xml
+++ b/addons/website_sale_comparison/views/website_sale_comparison_template.xml
@@ -78,7 +78,7 @@
                                         <strong class='pull-right'>x</strong>
                                     </a>
                                     <a t-att-href="'/shop/product/%s' % slug(product.product_tmpl_id)">
-                                        <img t-attf-src="/web/image/product.product/#{product.id}/image/200x150" class="img img-responsive" style="margin:auto;" alt="Product image"/>
+                                        <img t-attf-src="/web/image/product.product/#{product.id}/image/200x150" class="img img-fluid" style="margin:auto;" alt="Product image"/>
                                     </a>
                                     <div class='product_summary'>
                                         <a class="o_product_comparison_table" t-attf-href="/shop/product/#{ slug(product.product_tmpl_id) }">
@@ -123,7 +123,7 @@
     <template id="product_product" name="Comparator - Product row in comparator popover">
         <div class="row mt8 o_product_row" t-att-data-category_ids="product.public_categ_ids.ids">
             <div class="col-sm-3 col-xs-3 mb8">
-                <img class="img img-responsive" t-attf-src="/web/image/product.product/#{product.id}/image_small" style="max-height: 50px;" alt="Product image"/>
+                <img class="img img-fluid" t-attf-src="/web/image/product.product/#{product.id}/image_small" style="max-height: 50px;" alt="Product image"/>
             </div>
             <div class="col-sm-7 col-xs-7 mb8 text-left">
                 <h5>
diff --git a/addons/website_sale_wishlist/views/website_sale_wishlist_template.xml b/addons/website_sale_wishlist/views/website_sale_wishlist_template.xml
index 225143a5642..ea92a3bbf97 100644
--- a/addons/website_sale_wishlist/views/website_sale_wishlist_template.xml
+++ b/addons/website_sale_wishlist/views/website_sale_wishlist_template.xml
@@ -56,7 +56,7 @@
                                     <tr t-att-data-wish-id='wish.id' t-att-data-product-id='wish.product_id.id'>
                                         <td class='td-img'>
                                             <a t-att-href="'/shop/product/%s' % slug(wish.product_id.product_tmpl_id)">
-                                                <img t-attf-src="/web/image/product.product/#{wish.product_id.id}/image/100x100" class="img img-responsive" style="margin:auto;" alt="Product image"/>
+                                                <img t-attf-src="/web/image/product.product/#{wish.product_id.id}/image/100x100" class="img img-fluid" style="margin:auto;" alt="Product image"/>
                                             </a>
                                         </td>
                                         <td class='text-left'>
diff --git a/addons/website_slides/static/src/xml/website_slides.xml b/addons/website_slides/static/src/xml/website_slides.xml
index 46074498ef0..80c7f8d3a14 100644
--- a/addons/website_slides/static/src/xml/website_slides.xml
+++ b/addons/website_slides/static/src/xml/website_slides.xml
@@ -17,7 +17,7 @@
                                 <div class="col-sm-4">
                                     <div class="img-thumbnail">
                                         <div class="o_slide_preview">
-                                            <img src="/website_slides/static/src/img/document.png" id="slide-image" title="Content Preview" alt="Content Preview" class="img-responsive"/>
+                                            <img src="/website_slides/static/src/img/document.png" id="slide-image" title="Content Preview" alt="Content Preview" class="img-fluid"/>
                                         </div>
                                     </div>
                                 </div>
diff --git a/addons/website_slides/views/website_slides.xml b/addons/website_slides/views/website_slides.xml
index 585658ce67e..e0da8b660f7 100644
--- a/addons/website_slides/views/website_slides.xml
+++ b/addons/website_slides/views/website_slides.xml
@@ -34,8 +34,8 @@
                         <div class="well well-sm">
                             <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-responsive oe_slides_channel_thumbnail" alt="Promoted slide"/>
-                                    <img t-if="not channel.promoted_slide_id" src="/website_slides/static/src/img/channel-default.jpg" class="img-responsive oe_slides_opacity" alt="Channel without promoted slide"/>
+                                    <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"/>
+                                    <img t-if="not channel.promoted_slide_id" src="/website_slides/static/src/img/channel-default.jpg" class="img-fluid oe_slides_opacity" alt="Channel without promoted slide"/>
                                 </a>
                             </div>
                             <div>
@@ -205,7 +205,7 @@
                     <div class="row">
                         <div class="col-md-5 mt16 mb16">
                             <a t-attf-href="/slides/slide/#{slug(channel.promoted_slide_id)}">
-                                <img t-attf-src="/web/image/slide.slide/#{channel.promoted_slide_id.id}/image_medium" class="img-responsive shadow oe_slides_promote_image" alt="Promoted slide"/>
+                                <img t-attf-src="/web/image/slide.slide/#{channel.promoted_slide_id.id}/image_medium" class="img-fluid shadow oe_slides_promote_image" alt="Promoted slide"/>
                             </a>
                         </div>
                         <div class="col-md-7 mt16 mb16">
@@ -321,7 +321,7 @@
     <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 mt16 mb16" t-foreach="slides" t-as="slide">
         <div class="well well-sm oe_slides_thumbnail_container">
             <a t-attf-href="/slides/slide/#{slug(slide)}">
-                <img t-attf-src="/web/image/slide.slide/#{slide.id}/image_thumb" class="img-responsive img-thumbnail oe_slides_grid_thumbnail" alt="slide.name"/>
+                <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>
             <span t-if="not slide.website_published" class="label label-danger" style="position: absolute;right: 20px;top: 7px;">Unpublished</span>
             <a t-if="not is_public_user and slide.website_published and slide.channel_id.promote_strategy == 'custom' and slide.channel_id.promoted_slide_id.id != slide.id"
@@ -386,7 +386,7 @@
 
                     <div t-if="not private">
                             <t t-if="slide.datas and slide.slide_type == 'infographic'">
-                                <img t-attf-src="/web/image/slide.slide/#{slide.id}/datas" class="img-responsive" style="width:100%" alt="Slide image"/>
+                                <img t-attf-src="/web/image/slide.slide/#{slide.id}/datas" class="img-fluid" style="width:100%" alt="Slide image"/>
                             </t>
                         <div t-if="slide.slide_type in ('presentation', 'document')" class="embed-responsive embed-responsive-4by3 embed-responsive-item mb8">
                             <t t-raw="slide.embed_code"/>
diff --git a/addons/website_slides/views/website_slides_embed.xml b/addons/website_slides/views/website_slides_embed.xml
index 61364da9a0f..c048a44486a 100644
--- a/addons/website_slides/views/website_slides_embed.xml
+++ b/addons/website_slides/views/website_slides_embed.xml
@@ -81,7 +81,7 @@
                                             <h4><t t-esc="suggest_slide.name"/></h4>
                                         </div>
                                         <span class="oe-image-thumbnail">
-                                            <img class="img-responsive" t-attf-src="/web/image/slide.slide/#{suggest_slide.id}/image_thumb" alt="suggest_slide.name"/>
+                                            <img class="img-fluid" t-attf-src="/web/image/slide.slide/#{suggest_slide.id}/image_thumb" alt="suggest_slide.name"/>
                                         </span>
                                     </a>
 
@@ -90,15 +90,15 @@
                         </div>
                         <t t-if="slide.slide_type in ('presentation', 'document')">
                             <div id="PDFViewerLoader" class="oe_slides_loader">
-                                <img class="img-responsive" t-attf-src="/web/image/slide.slide/#{slide.id}/image_medium" style="margin:auto;height:100%" alt="suggest_slide.name"/>
+                                <img class="img-fluid" t-attf-src="/web/image/slide.slide/#{slide.id}/image_medium" style="margin:auto;height:100%" alt="suggest_slide.name"/>
                                 <h4 class="text-center">
                                     <i class="fa fa-spinner fa-spin"></i> Loading ...
                                 </h4>
                             </div>
-                            <canvas id="PDFViewerCanvas" class="img-responsive" style="margin:auto;height:100%;display:none;"></canvas>
+                            <canvas id="PDFViewerCanvas" class="img-fluid" style="margin:auto;height:100%;display:none;"></canvas>
                         </t>
                         <t t-if="slide.slide_type in ('infographic')">
-                            <img t-attf-src="/web/image/slide.slide/#{slide.id}/datas" class="img-responsive" style="width:100%" alt="Slide image"/>
+                            <img t-attf-src="/web/image/slide.slide/#{slide.id}/datas" class="img-fluid" style="width:100%" alt="Slide image"/>
                         </t>
                     </div>
                     <!-- Fixed bottom navbar -->