diff --git a/addons/account/views/account_portal_templates.xml b/addons/account/views/account_portal_templates.xml
index 1517c0d6395..18037aa5ec0 100644
--- a/addons/account/views/account_portal_templates.xml
+++ b/addons/account/views/account_portal_templates.xml
@@ -93,8 +93,8 @@
                         <div class="pb8 ml16 mr16 container">
                             <t t-if="invoice.user_id">
                                 <div><strong>Your Contact:</strong></div>
-                                <img class="img-circle mr4 pull-left o_portal_contact_img" t-if="invoice.user_id.image" t-attf-src="data:image/png;base64,#{invoice.user_id.image}" alt="Contact"/>
-                                <img class="img-circle mr4 pull-left o_portal_contact_img" t-if="not invoice.user_id.image" src="/web/static/src/img/placeholder.png" alt="Contact"/>
+                                <img class="rounded-circle mr4 pull-left o_portal_contact_img" t-if="invoice.user_id.image" t-attf-src="data:image/png;base64,#{invoice.user_id.image}" alt="Contact"/>
+                                <img class="rounded-circle mr4 pull-left o_portal_contact_img" t-if="not invoice.user_id.image" src="/web/static/src/img/placeholder.png" alt="Contact"/>
                                 <span t-field="invoice.user_id" t-field-options='{"widget": "contact", "fields": ["name", "phone"], "no_marker": True}'/>
                                 <a data-toggle="modal" href="#" data-target="#invoice_chatter">Contact us</a>
                             </t>
diff --git a/addons/hr_attendance/static/src/xml/attendance.xml b/addons/hr_attendance/static/src/xml/attendance.xml
index da09e4f8f9d..9d390a02f27 100644
--- a/addons/hr_attendance/static/src/xml/attendance.xml
+++ b/addons/hr_attendance/static/src/xml/attendance.xml
@@ -38,7 +38,7 @@
                 <t t-set="checked_in" t-value="widget.employee.attendance_state=='checked_in'"/>
                 <t t-if="widget.employee">
                     <div class="o_hr_attendance_user_badge o_home_menu_background">
-                        <img class="img img-circle" t-attf-src="/web/image?model=hr.employee&amp;field=image_medium&amp;id=#{widget.employee.id}" t-att-title="widget.employee.name" t-att-alt="widget.employee.name"/>
+                        <img class="img rounded-circle" t-attf-src="/web/image?model=hr.employee&amp;field=image_medium&amp;id=#{widget.employee.id}" t-att-title="widget.employee.name" t-att-alt="widget.employee.name"/>
                     </div>
                     <h1 class="mb8"><t t-esc="widget.employee.name"/></h1>
                     <h3 class="mt8 mb24"><t t-if="!checked_in">Welcome!</t><t t-else="">Want to check out?</t></h3>
@@ -65,7 +65,7 @@
                 </div>
                 <t t-if="widget.employee_id">
                     <div class="o_hr_attendance_user_badge o_home_menu_background">
-                        <img class="img img-circle" t-attf-src="/web/image?model=hr.employee&amp;field=image_medium&amp;id=#{widget.employee_id}" t-att-title="widget.employee_name" t-att-alt="widget.employee_name"/>
+                        <img class="img rounded-circle" t-attf-src="/web/image?model=hr.employee&amp;field=image_medium&amp;id=#{widget.employee_id}" t-att-title="widget.employee_name" t-att-alt="widget.employee_name"/>
                     </div>
                     <h1 class="mb8"><t t-esc="widget.employee_name"/></h1>
                     <h3 class="mt8 mb24"><t t-if="!checked_in">Welcome!</t><t t-else="">Want to check out?</t></h3>
@@ -107,7 +107,7 @@
             <div class="o_hr_attendance_kiosk_mode">
                 <t t-if="widget.attendance">
                     <div class="o_hr_attendance_user_badge o_home_menu_background">
-                        <img class="img img-circle" t-attf-src="/web/image?model=hr.employee&amp;field=image_medium&amp;id=#{widget.attendance.employee_id[0]}" t-att-title="widget.employee_name" t-att-alt="widget.employee_name"/>
+                        <img class="img rounded-circle" t-attf-src="/web/image?model=hr.employee&amp;field=image_medium&amp;id=#{widget.attendance.employee_id[0]}" t-att-title="widget.employee_name" t-att-alt="widget.employee_name"/>
                     </div>
                     <t t-if="widget.attendance.check_out">
                         <h1 class="mb0">Goodbye <t t-esc="widget.employee_name"/>!</h1>
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 2e6f9377785..1b4cfd680a9 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
@@ -9,13 +9,13 @@
             <!-- NOTE: Since by the default on not squared images odoo add white borders,
                 use bg-images to get a clean and centred images -->
             <a t-if="! is_self"
-                class="media-object img-circle o_employee_redirect"
+                class="media-object rounded-circle o_employee_redirect"
                 t-att-style="'background-image:url(\'/web/image/hr.employee/' + employee.id + '/image/\')'"
                 t-att-alt="employee.name"
                 t-att-data-employee-id="employee.id"
                 t-att-href="employee.link"/>
             <div t-if="is_self"
-                class="media-object img-circle"
+                class="media-object rounded-circle"
                 t-att-style="'background-image:url(\'/web/image/hr.employee/' + employee.id + '/image/\')'"/>
         </div>
 
diff --git a/addons/mail/static/src/xml/activity.xml b/addons/mail/static/src/xml/activity.xml
index cbb2b222c90..93732a20505 100644
--- a/addons/mail/static/src/xml/activity.xml
+++ b/addons/mail/static/src/xml/activity.xml
@@ -6,9 +6,9 @@
                 <i class="fa fa-fw fa-caret-down"/>
                 Planned activities
                 <small class="o_chatter_planned_activities_summary ml8">
-                    <span class="label img-circle label-danger"><t t-esc="nbOverdueActivities"/></span>
-                    <span class="label img-circle label-warning"><t t-esc="nbTodayActivities"/></span>
-                    <span class="label img-circle label-success"><t t-esc="nbPlannedActivities"/></span>
+                    <span class="label rounded-circle label-danger"><t t-esc="nbOverdueActivities"/></span>
+                    <span class="label rounded-circle label-warning"><t t-esc="nbTodayActivities"/></span>
+                    <span class="label rounded-circle label-success"><t t-esc="nbPlannedActivities"/></span>
                 </small>
             </a>
         </div>
@@ -17,7 +17,7 @@
                 <div class="o_thread_message" style="margin-bottom: 10px">
                     <div class="o_thread_message_sidebar">
                         <div class="o_avatar_stack">
-                            <img t-attf-src="/web/image#{activity.user_id[0] >= 0 ? ('/res.users/' + activity.user_id[0] + '/image_small') : ''}" class="o_thread_message_avatar img-circle mb8" t-att-title="activity.user_id[1]" t-att-alt="activity.user_id[1]"/>
+                            <img t-attf-src="/web/image#{activity.user_id[0] >= 0 ? ('/res.users/' + activity.user_id[0] + '/image_small') : ''}" class="o_thread_message_avatar rounded-circle mb8" t-att-title="activity.user_id[1]" t-att-alt="activity.user_id[1]"/>
                             <i t-att-class="'o_avatar_icon fa ' + activity.icon + ' bg-' + (activity.state == 'planned'? 'success' : (activity.state == 'today'? 'warning' : 'danger')) + '-full'"
                                t-att-title="activity.activity_type_id[1]"/>
                         </div>
@@ -44,14 +44,14 @@
                                         by
                                         <img t-attf-src="/web/image#{activity.create_user_id[0] >= 0 ? ('/res.users/' + activity.create_user_id[0] + '/image_small') : ''}"
                                             height="18" width="18"
-                                            class="img-circle mr4"
+                                            class="rounded-circle mr4"
                                             t-att-title="activity.create_user_id[1]"
                                             t-att-alt="activity.create_user_id[1]"/>
                                         <b><t t-esc="activity.create_user_id[1]"/></b>
                                     </dd>
                                     <dt>Assigned to</dt>
                                     <dd class="mb8">
-                                        <img t-attf-src="/web/image#{activity.user_id[0] >= 0 ? ('/res.users/' + activity.user_id[0] + '/image_small') : ''}" height="18" width="18" class="img-circle mr4" t-att-title="activity.user_id[1]" t-att-alt="activity.user_id[1]"/>
+                                        <img t-attf-src="/web/image#{activity.user_id[0] >= 0 ? ('/res.users/' + activity.user_id[0] + '/image_small') : ''}" height="18" width="18" class="rounded-circle mr4" t-att-title="activity.user_id[1]" t-att-alt="activity.user_id[1]"/>
                                         <b><t t-esc="activity.user_id[1]"/></b>
                                         <em>, due on </em><span t-attf-class="o_activity_color_#{activity.state}"><t t-esc="activity.date_deadline.format(dateFormat)"/></span>
                                     </dd>
diff --git a/addons/mail/static/src/xml/composer.xml b/addons/mail/static/src/xml/composer.xml
index 8ecf3f8a7c6..f0bdd70fcef 100644
--- a/addons/mail/static/src/xml/composer.xml
+++ b/addons/mail/static/src/xml/composer.xml
@@ -3,7 +3,7 @@
 
      <div t-name="mail.Composer" t-attf-class="o_thread_composer #{widget.extended ? 'o_thread_composer_extended' : (widget.notInline ? '' : 'o_chat_inline_composer')} #{widget.isMini ? 'o_chat_mini_composer' : ''}">
          <div class="o_composer_container">
-             <img t-if="widget.avatarURL" height="36" width="36" class="o_thread_message_sidebar o_chatter_avatar img-circle" t-att-src="widget.avatarURL" alt="Avatar"/>
+             <img t-if="widget.avatarURL" height="36" width="36" class="o_thread_message_sidebar o_chatter_avatar rounded-circle" t-att-src="widget.avatarURL" alt="Avatar"/>
              <div t-if="widget.extended" class="o_composer_subject">
                  <input tabindex="1" type="text" placeholder="Subject" class="o_input"/>
              </div>
diff --git a/addons/mail/static/src/xml/thread.xml b/addons/mail/static/src/xml/thread.xml
index 41335c3f5f3..4b7d13f8d35 100644
--- a/addons/mail/static/src/xml/thread.xml
+++ b/addons/mail/static/src/xml/thread.xml
@@ -183,13 +183,13 @@
                         t-att-src="message.getAvatarSource()"
                         data-oe-model="res.partner"
                         t-att-data-oe-id="message.shouldRedirectToAuthor() ? message.getAuthorID() : ''"
-                        t-attf-class="o_thread_message_avatar img-circle #{message.shouldRedirectToAuthor() ? 'o_mail_redirect' : ''}"/>
+                        t-attf-class="o_thread_message_avatar rounded-circle #{message.shouldRedirectToAuthor() ? 'o_mail_redirect' : ''}"/>
                 </t>
                 <t t-else="">
                     <img t-if="displayAuthorMessages[message.getID()]"
                         alt=""
                         t-att-src="message.getAvatarSource()"
-                        class="o_thread_message_avatar img-circle"/>
+                        class="o_thread_message_avatar rounded-circle"/>
                 </t>
                 <span t-if="!displayAuthorMessages[message.getID()]" t-att-title="message.getDate().format(dateFormat)" class="o_thread_message_side_date">
                     <t t-esc="message.getDate().format('hh:mm')"/>
diff --git a/addons/payment/static/src/scss/portal_payment.scss b/addons/payment/static/src/scss/portal_payment.scss
index 07cdf859c3a..6dcbd7f42dd 100644
--- a/addons/payment/static/src/scss/portal_payment.scss
+++ b/addons/payment/static/src/scss/portal_payment.scss
@@ -55,7 +55,7 @@ div.visa {
     background-repeat: no-repeat;
 }
 
-ul.payment_method_list img.img-rounded {
+ul.payment_method_list img.rounded {
     max-width: 100px;
     max-height: 40px;
 }
diff --git a/addons/sale/views/sale_portal_templates.xml b/addons/sale/views/sale_portal_templates.xml
index a744751c8fa..609aa1db4e3 100644
--- a/addons/sale/views/sale_portal_templates.xml
+++ b/addons/sale/views/sale_portal_templates.xml
@@ -247,7 +247,7 @@
                 <div t-attf-class="row orders_vertical_align {{ 'o_is_' + line.display_type if line.display_type else '' }} pt8 pb8">
                   <t t-if="not line.display_type">
                       <div class="d-none d-xl-block col-xl-1 text-center">
-                        <span t-field="line.product_image" t-options="{'widget': 'image', 'class': 'img-rounded', 'style':'width: 48px;height:48px'}" />
+                        <span t-field="line.product_image" t-options="{'widget': 'image', 'class': 'rounded', 'style':'width: 48px;height:48px'}" />
                       </div>
                       <div id='product_name' t-att-class="'col-xl-3 col-md-4 col-5' if display_discount else 'col-xl-4 col-md-5 col-6'">
                         <span t-field="line.product_id.name"/>
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index aa99336d218..3a31c1c0cd4 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -1451,7 +1451,7 @@
 <t t-name="UserMenu">
     <li class="o_user_menu">
         <a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false" href="#">
-            <img class="img-circle oe_topbar_avatar" t-att-src="_s + '/web/static/src/img/user_menu_avatar.png'" alt="Avatar"/>
+            <img class="rounded-circle oe_topbar_avatar" t-att-src="_s + '/web/static/src/img/user_menu_avatar.png'" alt="Avatar"/>
             <span class="oe_topbar_name"/>
         </a>
         <div class="dropdown-menu dropdown-menu-right" role="menu">
diff --git a/addons/web_editor/static/lib/summernote/src/js/Renderer.js b/addons/web_editor/static/lib/summernote/src/js/Renderer.js
index e461bdb892f..ce39a7d3db2 100644
--- a/addons/web_editor/static/lib/summernote/src/js/Renderer.js
+++ b/addons/web_editor/static/lib/summernote/src/js/Renderer.js
@@ -450,12 +450,12 @@ define([
         var roundedButton = tplIconButton(options.iconPrefix + options.icons.image.shapeRounded, {
           title: lang.image.shapeRounded,
           event: 'imageShape',
-          value: 'img-rounded'
+          value: 'rounded'
         });
         var circleButton = tplIconButton(options.iconPrefix + options.icons.image.shapeCircle, {
           title: lang.image.shapeCircle,
           event: 'imageShape',
-          value: 'img-circle'
+          value: 'rounded-circle'
         });
         var thumbnailButton = tplIconButton(options.iconPrefix + options.icons.image.shapeThumbnail, {
           title: lang.image.shapeThumbnail,
diff --git a/addons/web_editor/static/lib/summernote/src/js/module/Button.js b/addons/web_editor/static/lib/summernote/src/js/module/Button.js
index b7a1614d4db..59e3fa19f63 100644
--- a/addons/web_editor/static/lib/summernote/src/js/module/Button.js
+++ b/addons/web_editor/static/lib/summernote/src/js/module/Button.js
@@ -43,17 +43,17 @@ define([
       if (styleInfo.image) {
         var $img = $(styleInfo.image);
 
-        btnState('button[data-event="imageShape"][data-value="img-rounded"]', function () {
-          return $img.hasClass('img-rounded');
+        btnState('button[data-event="imageShape"][data-value="rounded"]', function () {
+          return $img.hasClass('rounded');
         });
-        btnState('button[data-event="imageShape"][data-value="img-circle"]', function () {
-          return $img.hasClass('img-circle');
+        btnState('button[data-event="imageShape"][data-value="rounded-circle"]', function () {
+          return $img.hasClass('rounded-circle');
         });
         btnState('button[data-event="imageShape"][data-value="img-thumbnail"]', function () {
           return $img.hasClass('img-thumbnail');
         });
         btnState('button[data-event="imageShape"]:not([data-value])', function () {
-          return !$img.is('.img-rounded, .img-circle, .img-thumbnail');
+          return !$img.is('.rounded, .rounded-circle, .img-thumbnail');
         });
 
         var imgFloat = $img.css('float');
diff --git a/addons/web_editor/static/lib/summernote/src/js/module/Editor.js b/addons/web_editor/static/lib/summernote/src/js/module/Editor.js
index 99947c346cf..50bb9857fdf 100644
--- a/addons/web_editor/static/lib/summernote/src/js/module/Editor.js
+++ b/addons/web_editor/static/lib/summernote/src/js/module/Editor.js
@@ -760,7 +760,7 @@ define([
     this.imageShape = function ($editable, value, $target) {
       beforeCommand($editable);
 
-      $target.removeClass('img-rounded img-circle img-thumbnail');
+      $target.removeClass('rounded rounded-circle img-thumbnail');
 
       if (value) {
         $target.addClass(value);
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 fa993dff99a..79b70dd7bed 100644
--- a/addons/web_editor/static/src/js/editor/rte.summernote.js
+++ b/addons/web_editor/static/src/js/editor/rte.summernote.js
@@ -121,7 +121,7 @@ renderer.tplPopovers = function (lang, options) {
         title: _t('Shadow'),
         event: 'imageShape',
         value: 'shadow'
-    })).insertAfter($imagePopover.find('[data-event="imageShape"][data-value="img-circle"]'));
+    })).insertAfter($imagePopover.find('[data-event="imageShape"][data-value="rounded-circle"]'));
 
     // add spin for fa
     var $spin = $('<div class="btn-group d-none only_fa"/>').insertAfter($button.parent());
diff --git a/addons/web_editor/static/src/js/tours/rte.js b/addons/web_editor/static/src/js/tours/rte.js
index c7aa60cee2f..db7d98d20fc 100644
--- a/addons/web_editor/static/src/js/tours/rte.js
+++ b/addons/web_editor/static/src/js/tours/rte.js
@@ -288,7 +288,7 @@ tour.register('rte_inline', {
             '    <tbody>\n'+
             '      <tr>\n'+
             '        <td valign="center" width="270">\n'+
-            '          <img src="/logo.png" alt="Your Logo" class="img-circle img-thumbnail">\n'+
+            '          <img src="/logo.png" alt="Your Logo" class="rounded-circle img-thumbnail">\n'+
             '        </td>\n'+
             '        <td valign="center" width="270">\n'+
             '          <a href="https://www.facebook.com/Odoo"><span class="fa fa-facebook-square fa-2x text-primary"></span></a>\n'+
diff --git a/addons/website/views/snippets.xml b/addons/website/views/snippets.xml
index b11375f7f3f..6a9fc78a404 100644
--- a/addons/website/views/snippets.xml
+++ b/addons/website/views/snippets.xml
@@ -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-fluid" src="/web/image/website.s_image_floating_default_image" alt="Odoo CMS- Sample image floating"/>
+            <img class="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-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 img-circle center-block shadow"/>
+                            <img alt="Company team" src="/web/image/website.s_company_team_image_1" class="img-fluid rounded-circle center-block 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 img-circle center-block shadow"/>
+                            <img alt="Company team" src="/web/image/website.s_company_team_image_2" class="img-fluid rounded-circle center-block 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 img-circle center-block shadow"/>
+                            <img alt="Company team" src="/web/image/website.s_company_team_image_3" class="img-fluid rounded-circle center-block 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 img-circle center-block shadow"/>
+                            <img alt="Company team" src="/web/image/website.s_company_team_image_4" class="img-fluid rounded-circle center-block shadow"/>
                         </div>
                         <div class="col-lg-8">
                             <h4>Iris Joe, CFO</h4>
@@ -799,9 +799,9 @@
             <a tabindex="-2" href="#" class="dropdown-item"><i class="fa fa-paint-brush"/>Styling</a>
             <div class="dropdown-menu" role="menu">
                 <a href="#" class="dropdown-item" role="menuitem" data-styling="">Square</a>
-                <a href="#" class="dropdown-item" role="menuitem" data-styling="img-rounded">Rounded corners</a>
+                <a href="#" class="dropdown-item" role="menuitem" data-styling="rounded">Rounded corners</a>
                 <a href="#" class="dropdown-item" role="menuitem" data-styling="img-thumbnail">Thumbnails</a>
-                <a href="#" class="dropdown-item" role="menuitem" data-styling="img-circle">Circle</a>
+                <a href="#" class="dropdown-item" role="menuitem" data-styling="rounded-circle">Circle</a>
                 <a href="#" class="dropdown-item" role="menuitem" data-styling="shadow">Shadows</a>
             </div>
         </div>
diff --git a/addons/website_blog/views/website_blog_templates.xml b/addons/website_blog/views/website_blog_templates.xml
index fa7385b6303..4fa040b1086 100644
--- a/addons/website_blog/views/website_blog_templates.xml
+++ b/addons/website_blog/views/website_blog_templates.xml
@@ -206,7 +206,7 @@
         customize_show="True" active="False" inherit_id="website_blog.blog_post_short">
     <xpath expr="//span[@t-field='blog_post.author_id']" position="before">
         <t t-if="blog_post.author_avatar">
-            <div t-field="blog_post.author_avatar" class="o_not_editable" style="display:inline" t-field-options='{"widget": "image", "class": "img-circle o_author_avatar_little "}' />
+            <div t-field="blog_post.author_avatar" class="o_not_editable" style="display:inline" t-field-options='{"widget": "image", "class": "rounded-circle o_author_avatar_little "}' />
         </t>
     </xpath>
 </template>
@@ -317,7 +317,7 @@
                     <h2 t-field="next_post.subtitle" placeholder="Subtitle"/>
                     <div>
                         <t t-if="next_post.author_avatar">
-                            <span t-field="next_post.author_avatar" t-field-options='{"widget": "image", "class": "img-circle", "style":"width: 30px; margin-right: 10px; display:inline"}' />
+                            <span t-field="next_post.author_avatar" t-field-options='{"widget": "image", "class": "rounded-circle", "style":"width: 30px; margin-right: 10px; display:inline"}' />
                         </t>
                         <span t-field="next_post.author_id" style="display: inline-block;" t-field-options='{
                             "widget": "contact",
@@ -337,7 +337,7 @@
     <xpath expr="//p[@name='blog_post_data']" position="after">
         <div>
             <t t-if="blog_post.author_avatar">
-                <span t-field="blog_post.author_avatar" class="o_not_editable" t-field-options='{"widget": "image", "class": "img-circle", "style":"width: 30px; margin-right: 10px; display:inline"}' />
+                <span t-field="blog_post.author_avatar" class="o_not_editable" t-field-options='{"widget": "image", "class": "rounded-circle", "style":"width: 30px; margin-right: 10px; display:inline"}' />
             </t>
             <span t-field="blog_post.author_id" style="display: inline-block;" t-field-options='{
                 "widget": "contact",
diff --git a/addons/website_event/views/event_templates.xml b/addons/website_event/views/event_templates.xml
index dc36e8f7cd0..665e7275a9e 100644
--- a/addons/website_event/views/event_templates.xml
+++ b/addons/website_event/views/event_templates.xml
@@ -93,13 +93,13 @@
         <div class="row">
             <div class="col-lg-12 mb16">
                 <div class="oe_demo">
-                    <img src="/website_event/static/src/img/openerp_enterprise_of_the_year.png" class="img-rounded" alt=""/>
+                    <img src="/website_event/static/src/img/openerp_enterprise_of_the_year.png" class="rounded" alt=""/>
                     <div class="text-center"><a href="/event">Photos of Past Events</a></div>
                 </div>
             </div>
             <div class="col-lg-12 mb16">
                 <div class="oe_demo">
-                    <img src="/website_event/static/src/img/training.jpg" class="img-rounded" alt=""/>
+                    <img src="/website_event/static/src/img/training.jpg" class="rounded" alt=""/>
                     <div class="text-center"><a href="/event">Our Trainings</a></div>
                 </div>
             </div>
@@ -641,7 +641,7 @@
                 <div class="country_events_list">
                     <div class="text-muted text-left">
                         <div>
-                            <img class="img-rounded img-fluid" src="/website_event/static/src/img/world_map.jpg" alt=""></img>
+                            <img class="rounded img-fluid" src="/website_event/static/src/img/world_map.jpg" alt=""></img>
                         </div>
                         <div>Events in visitor's country</div>
                     </div>
@@ -666,11 +666,11 @@
             <div class="country_events_list">
                 <div>
                     <t t-if="country">
-                        <img class="img-rounded img-fluid" t-att-src="website.image_url(country, 'image')" alt=""></img>
+                        <img class="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-fluid" src="/website_event/static/src/img/world_map.jpg" alt=""></img>
+                        <img class="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_event_track/views/event_track_templates.xml b/addons/website_event_track/views/event_track_templates.xml
index fc3800174ff..1641ecee05a 100644
--- a/addons/website_event_track/views/event_track_templates.xml
+++ b/addons/website_event_track/views/event_track_templates.xml
@@ -126,7 +126,7 @@
                 <div class="col-md-2">
                     <t t-if="track.image">
                         <span t-field="track.image"
-                            t-options='{"widget": "image", "class": "img-circle"}'/>
+                            t-options='{"widget": "image", "class": "rounded-circle"}'/>
                     </t>
                 </div>
                 <div class="col-md-10">
@@ -239,7 +239,7 @@
                         <div class="row">
                             <div class="col-md-2">
                                 <span t-field="track.partner_id.sudo().image_medium"
-                                    t-options='{"widget": "image", "class": "img-circle"}'/>
+                                    t-options='{"widget": "image", "class": "rounded-circle"}'/>
                             </div><div class="col-md-10">
                                <h4 t-field="track.partner_id.name" class="mb4"/>
                                <div class="fa fa-home mb16" t-if="track.partner_id.website">
diff --git a/addons/website_forum/views/website_forum.xml b/addons/website_forum/views/website_forum.xml
index 1f94d7af120..9570c15d8eb 100644
--- a/addons/website_forum/views/website_forum.xml
+++ b/addons/website_forum/views/website_forum.xml
@@ -946,7 +946,7 @@
                     <t t-call="website_forum.forum_user_tooltip"/>
                 </div>
                 <a t-att-href="user_profile_url" class="o_forum_user_info">
-                    <img class="pull-left img img-rounded o_forum_avatar" t-attf-src="/forum/user/#{answer.create_uid.id}/avatar" alt="Avatar"/>
+                    <img class="pull-left img rounded o_forum_avatar" t-attf-src="/forum/user/#{answer.create_uid.id}/avatar" alt="Avatar"/>
                 </a>
                 <a t-att-href="user_profile_url"
                     t-field="answer.create_uid"
@@ -1047,7 +1047,7 @@
     <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"/>
+                <img class="pull-left 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"
@@ -1231,7 +1231,7 @@
     <t t-call="website_forum.header">
         <div t-foreach="users" t-as="row_users" class="row mt16">
             <div t-foreach="row_users" t-as="user" class="col-md-4">
-                <img class="pull-left img img-circle o_forum_avatar" t-attf-src="/forum/user/#{user.id}/avatar" alt="Avatar"/>
+                <img class="pull-left img rounded-circle o_forum_avatar" t-attf-src="/forum/user/#{user.id}/avatar" alt="Avatar"/>
                 <div>
                     <a t-attf-href="/forum/#{slug(forum)}/user/#{user.id}" t-field="user.name"/>
                     <t t-if="user.country_id">
@@ -1288,7 +1288,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-fluid img-circle o_forum_avatar_img" t-attf-src="/forum/user/#{user.id}/avatar" alt="Avatar"/>
+                    <img class="img img-fluid rounded-circle o_forum_avatar_img" t-attf-src="/forum/user/#{user.id}/avatar" alt="Avatar"/>
                 </div>
                 <div class="col-lg-10">
                     <input name="user_id" t-att-value="user.id" type="hidden"/>
@@ -1363,7 +1363,7 @@
         </h1>
         <div class="row">
             <div class="col-md-2">
-                <img class="img img-fluid img-circle" t-attf-src="/forum/user/#{user.id}/avatar" alt="Avatar"/>
+                <img class="img img-fluid rounded-circle" t-attf-src="/forum/user/#{user.id}/avatar" alt="Avatar"/>
             </div>
             <div class="col-md-10">
                 <table class="table table-condensed">
diff --git a/addons/website_hr/views/website_hr_templates.xml b/addons/website_hr/views/website_hr_templates.xml
index 5015042020b..214af38ad52 100644
--- a/addons/website_hr/views/website_hr_templates.xml
+++ b/addons/website_hr/views/website_hr_templates.xml
@@ -22,7 +22,7 @@
                     <t t-set="publish_edit" t-value="True"/>
                 </t>
                 <div class="clearfix"/>
-                <img t-att-src="website.image_url(employee, 'image_medium')" class="img shadow img-rounded" alt="Employee"/>
+                <img t-att-src="website.image_url(employee, 'image_medium')" class="img shadow rounded" alt="Employee"/>
                 <div class="mt8">
                     <strong t-field="employee.name"></strong>
                 </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 6b956a87983..0b561674b43 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': 'img-circle center-block'}"/>
+                                        <p t-field="responsible.image_small" t-field-options="{'widget': 'image', 'class': 'rounded-circle center-block'}"/>
                                     </div>
                                     <div class="col-lg-5 o_responsible_data">
                                         <h4 class="mt0" t-field="responsible.name"/>
diff --git a/addons/website_livechat/views/website_livechat.xml b/addons/website_livechat/views/website_livechat.xml
index 64a8151b853..c14d1562b97 100644
--- a/addons/website_livechat/views/website_livechat.xml
+++ b/addons/website_livechat/views/website_livechat.xml
@@ -130,7 +130,7 @@
                                 <div class="media">
                                     <div class="pull-left" t-if='user.image_small'>
                                         <img t-att-src="user.image_small and ('data:image/png;base64,' + to_text(user.image_small)) or '/web/static/src/img/placeholder.png'"
-                                            class="img-rounded" t-att-alt="user.name"/>
+                                            class="rounded" t-att-alt="user.name"/>
                                     </div>
                                     <div class="media-body">
                                         <h5><t t-esc="user.name"/></h5>
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 72ce7e54446..651b3852cbf 100644
--- a/addons/website_mail_channel/views/website_mail_channel_templates.xml
+++ b/addons/website_mail_channel/views/website_mail_channel_templates.xml
@@ -199,7 +199,7 @@
                         </h4>
                     </div>
                     <div class="media">
-                        <img class="img-rounded pull-left mt0 media-object o_mg_avatar" alt="Avatar"
+                        <img class="rounded pull-left mt0 media-object o_mg_avatar" alt="Avatar"
                             t-att-src="website.image_url(message, 'author_avatar')"/>
                         <div class="media-body">
                             <h4 class="media-heading" t-esc="message.description"/>
@@ -260,7 +260,7 @@
     <div>
         <ul class="media-list">
             <li t-foreach="messages" t-as="thread" class="media">
-                <img class="img-rounded pull-left mt0 media-object o_mg_avatar" alt="Avatar"
+                <img class="rounded pull-left mt0 media-object o_mg_avatar" alt="Avatar"
                     t-att-src="website.image_url(thread, 'author_avatar')"/>
                 <div class="media-body">
                     <h4 class="media-heading">
diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index efb7390f14c..dcd4458872e 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -529,7 +529,7 @@
                     <t t-foreach="product.alternative_product_ids" t-as="alt_product">
                         <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' }" />
+                                <div t-field="alt_product.image_small" t-options="{'widget': 'image', 'class': 'rounded shadow o_alternative_product' }" />
                                 <h5>
                                     <a t-attf-href="/shop/product/#{ slug(alt_product) }" style="display: block">
                                         <span t-att-title="alt_product.name" t-field="alt_product.name" class="o_text_overflow" style="display: block;" />
@@ -830,7 +830,7 @@
                     <tr>
                         <td colspan="2" t-if="not line.product_id.product_tmpl_id" class='td-img'></td>
                         <td align="center" t-if="line.product_id.product_tmpl_id" class='td-img'>
-                            <span t-field="line.product_id.image_small" t-options="{'widget': 'image', 'class': 'img-rounded'}" />
+                            <span t-field="line.product_id.image_small" t-options="{'widget': 'image', 'class': 'rounded'}" />
                         </td>
                         <td t-if="line.product_id.product_tmpl_id" class='td-product_name'>
                             <div>
@@ -945,7 +945,7 @@
             <t t-foreach="website_sale_order.website_order_line" t-as="line">
                 <div class="row mb8 cart_line">
                     <div class="col-3">
-                        <span t-field="line.product_id.image_small" t-options="{'widget': 'image', 'class': 'img-rounded'}" />
+                        <span t-field="line.product_id.image_small" t-options="{'widget': 'image', 'class': 'rounded'}" />
                     </div>
                     <div class="col-9">
                         <a t-attf-href="/shop/product/#{ slug(line.product_id.product_tmpl_id) }">
@@ -977,7 +977,7 @@
                     <tr t-foreach="suggested_products" t-as="product">
                         <td class='td-img'>
                             <a t-attf-href="/shop/product/#{ slug(product.product_tmpl_id) }">
-                                <span t-field="product.image_small" t-options="{'widget': 'image', 'class': 'img-rounded'}" />
+                                <span t-field="product.image_small" t-options="{'widget': 'image', 'class': 'rounded'}" />
                             </a>
                         </td>
                         <td class='td-product_name'>
@@ -1406,7 +1406,7 @@
                             <tr t-foreach="website_sale_order.website_order_line" t-as="line">
                                 <td class='' colspan="2" t-if="not line.product_id.product_tmpl_id"></td>
                                 <td class='td-img' t-if="line.product_id.product_tmpl_id">
-                                    <span t-field="line.product_id.image_small" t-options="{'widget': 'image', 'class': 'img-rounded'}" />
+                                    <span t-field="line.product_id.image_small" t-options="{'widget': 'image', 'class': 'rounded'}" />
                                 </td>
                                 <td class='td-product_name' t-if="line.product_id.product_tmpl_id">
                                     <div>
diff --git a/addons/website_theme_install/views/views.xml b/addons/website_theme_install/views/views.xml
index a310aa6f37a..8880d774e3f 100644
--- a/addons/website_theme_install/views/views.xml
+++ b/addons/website_theme_install/views/views.xml
@@ -21,7 +21,7 @@
 
                         <div class="o_theme_preview_top bg-white mb4">
                             <div class="o_browser_bar"/>
-                            <i states="installed" class="text-center bg-white text-success img-circle fa fa-check-circle" role="img" aria-label="Installed" title="Installed"/>
+                            <i states="installed" class="text-center bg-white text-success rounded-circle fa fa-check-circle" role="img" aria-label="Installed" title="Installed"/>
                             <div t-attf-class="bg-gray-lighter #{has_screenshot? 'o_theme_screenshot' : (has_image ? 'o_theme_cover' : 'o_theme_logo')}" t-attf-style="background-image: url(#{image_url});"/>
                             <div states="uninstalled" class="o_button_area">
                                 <button type="object" name="button_choose_theme" class="btn btn-primary">Use this theme</button>
diff --git a/doc/howtos/themes.rst b/doc/howtos/themes.rst
index a6362beb4db..f4f18dff759 100644
--- a/doc/howtos/themes.rst
+++ b/doc/howtos/themes.rst
@@ -660,17 +660,17 @@ The template contains the HTML markup that will be displayed by the snippet.
        <div class="container text-center">
          <div class="row">
            <div class="col-lg-4">
-             <img alt="client" class="img-circle" src="/theme_tutorial/static/src/img/client_1.jpg"/>
+             <img alt="client" class="rounded-circle" src="/theme_tutorial/static/src/img/client_1.jpg"/>
              <h3>Client Name</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
            <div class="col-lg-4">
-             <img alt="client" class="img-circle" src="/theme_tutorial/static/src/img/client_2.jpg"/>
+             <img alt="client" class="rounded-circle" src="/theme_tutorial/static/src/img/client_2.jpg"/>
              <h3>Client Name</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
            <div class="col-lg-4">
-             <img alt="client" class="img-circle" src="/theme_tutorial/static/src/img/client_3.jpg"/>
+             <img alt="client" class="rounded-circle" src="/theme_tutorial/static/src/img/client_3.jpg"/>
              <h3>Client Name</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>