From e8c8db20cc92c7109ec72fb2aa998117c6f1ffa9 Mon Sep 17 00:00:00 2001
From: Romeo Fragomeli <rfr@odoo.com>
Date: Wed, 19 Jan 2022 13:48:34 +0100
Subject: [PATCH] [FIX][media] *: fix removal of .media in BS5

https://getbootstrap.com/docs/5.1/migration/#grid-updates
https://getbootstrap.com/docs/5.1/utilities/flex/#media-object
https://github.com/twbs/bootstrap/pull/28265
---
 .../data/gamification_karma_rank_data.xml     | 20 +++++++++----------
 .../data/gamification_karma_rank_demo.xml     | 16 +++++++--------
 .../static/src/scss/hr_org_chart.scss         | 10 +++++-----
 .../static/src/xml/hr_org_chart.xml           |  8 ++++----
 addons/mail_group/views/portal_templates.xml  |  8 ++++----
 addons/portal/static/src/scss/portal.scss     |  2 +-
 .../portal/static/src/xml/portal_chatter.xml  |  8 ++++----
 .../static/src/xml/portal_chatter.xml         |  8 ++++----
 .../src/scss/project_sharing/chatter.scss     |  2 +-
 addons/website/data/website_demo.xml          |  8 ++++----
 .../s_mega_menu_images_subtitles/000.scss     |  2 +-
 .../static/src/snippets/s_searchbar/000.xml   |  4 ++--
 .../s_mega_menu_big_icons_subtitles.xml       |  4 ++--
 .../snippets/s_mega_menu_images_subtitles.xml |  4 ++--
 addons/website/views/website_templates.xml    |  4 ++--
 .../website_crm_partner_assign_templates.xml  |  8 ++++----
 .../views/website_customer_templates.xml      | 10 +++++-----
 addons/website_forum/views/website_forum.xml  |  4 ++--
 .../views/website_livechat.xml                |  8 ++++----
 .../views/website_membership_templates.xml    |  4 ++--
 .../website_profile/views/website_profile.xml |  8 ++++----
 .../static/src/xml/website_sale_utils.xml     |  4 ++--
 22 files changed, 77 insertions(+), 77 deletions(-)

diff --git a/addons/gamification/data/gamification_karma_rank_data.xml b/addons/gamification/data/gamification_karma_rank_data.xml
index e0ef1320a4eed..5ae425d547320 100644
--- a/addons/gamification/data/gamification_karma_rank_data.xml
+++ b/addons/gamification/data/gamification_karma_rank_data.xml
@@ -13,8 +13,8 @@
         <field name="name">Newbie</field>
         <field name="description" type="html"><p>You just began the adventure! Welcome!</p></field>
         <field name="description_motivational" type="html">
-            <div class="media align-items-center">
-                <div class="media-body">Earn your first points and join the adventure !</div>
+            <div class="d-flex align-items-center">
+                <div class="flex-grow-1">Earn your first points and join the adventure !</div>
                 <img class="ml-3 img img-fluid" style="max-height: 72px;" src="/gamification/static/img/rank_newbie_badge.svg"/>
             </div>
         </field>
@@ -26,8 +26,8 @@
         <field name="name">Student</field>
         <field name="description" type="html"><p>You're a young padawan now. May the force be with you!</p></field>
         <field name="description_motivational" type="html">
-            <div class="media align-items-center">
-                <div class="media-body">Reach the next rank to show the rest of the world you exist.</div>
+            <div class="d-flex align-items-center">
+                <div class="flex-grow-1">Reach the next rank to show the rest of the world you exist.</div>
                 <img class="ml-3 img img-fluid" style="max-height: 72px;" src="/gamification/static/img/rank_student_badge.svg"/>
             </div>
         </field>
@@ -39,8 +39,8 @@
         <field name="name">Bachelor</field>
         <field name="description" type="html"><p>You love learning things. Curiosity is a good way to progress.</p></field>
         <field name="description_motivational" type="html">
-            <div class="media align-items-center">
-                <div class="media-body">Reach the next rank to improve your status!</div>
+            <div class="d-flex align-items-center">
+                <div class="flex-grow-1">Reach the next rank to improve your status!</div>
                 <img class="ml-3 img img-fluid" style="max-height: 72px;" src="/gamification/static/img/rank_bachelor_badge.svg"/>
             </div>
         </field>
@@ -52,8 +52,8 @@
         <field name="name">Master</field>
         <field name="description" type="html"><p>You know what you are talking about. People learn from you.</p></field>
         <field name="description_motivational" type="html">
-            <div class="media align-items-center">
-                <div class="media-body">Reach the next rank and become a Master!</div>
+            <div class="d-flex align-items-center">
+                <div class="flex-grow-1">Reach the next rank and become a Master!</div>
                 <img class="ml-3 img img-fluid" style="max-height: 72px;" src="/gamification/static/img/rank_master_badge.svg"/>
             </div>
         </field>
@@ -65,8 +65,8 @@
         <field name="name">Doctor</field>
         <field name="description" type="html"><p>You have reached the last rank. Congratulations!</p></field>
         <field name="description_motivational" type="html">
-            <div class="media align-items-center">
-                <div class="media-body">Reach the next rank and become a powerful user!</div>
+            <div class="d-flex align-items-center">
+                <div class="flex-grow-1">Reach the next rank and become a powerful user!</div>
                 <img class="ml-3 img img-fluid" style="max-height: 72px;" src="/gamification/static/img/rank_doctor_badge.svg"/>
             </div>
         </field>
diff --git a/addons/gamification/data/gamification_karma_rank_demo.xml b/addons/gamification/data/gamification_karma_rank_demo.xml
index 848e7fd68d097..bdf1ecbac4412 100644
--- a/addons/gamification/data/gamification_karma_rank_demo.xml
+++ b/addons/gamification/data/gamification_karma_rank_demo.xml
@@ -3,8 +3,8 @@
     <!--Ranks-->
     <record id="rank_student" model="gamification.karma.rank">
         <field name="description_motivational" type="html">
-            <div class="media align-items-center">
-                <div class="media-body">Reach the next rank and gain a very nice mug !</div>
+            <div class="d-flex align-items-center">
+                <div class="flex-grow-1">Reach the next rank and gain a very nice mug !</div>
                 <img class="ml-3 img img-fluid" style="max-height: 72px;" src="/gamification/static/img/rank_misc_mug.png"/>
             </div>
         </field>
@@ -12,8 +12,8 @@
 
     <record id="rank_bachelor" model="gamification.karma.rank">
         <field name="description_motivational" type="html">
-            <div class="media align-items-center">
-                <div class="media-body">Reach the next rank and gain a very magic wand !</div>
+            <div class="d-flex align-items-center">
+                <div class="flex-grow-1">Reach the next rank and gain a very magic wand !</div>
                 <img class="ml-3 img img-fluid" style="max-height: 72px;" src="/gamification/static/img/rank_misc_wand.png"/>
             </div>
         </field>
@@ -21,8 +21,8 @@
 
     <record id="rank_master" model="gamification.karma.rank">
         <field name="description_motivational" type="html">
-            <div class="media align-items-center">
-                <div class="media-body">Reach the next rank and gain a very nice hat !</div>
+            <div class="d-flex align-items-center">
+                <div class="flex-grow-1">Reach the next rank and gain a very nice hat !</div>
                 <img class="ml-3 img img-fluid" style="max-height: 72px;" src="/gamification/static/img/rank_misc_hat.png"/>
             </div>
         </field>
@@ -30,8 +30,8 @@
 
     <record id="rank_doctor" model="gamification.karma.rank">
         <field name="description_motivational" type="html">
-            <div class="media align-items-center">
-                <div class="media-body">Reach the next rank and gain a very nice unicorn !</div>
+            <div class="d-flex align-items-center">
+                <div class="flex-grow-1">Reach the next rank and gain a very nice unicorn !</div>
                 <img class="ml-3 img img-fluid" style="max-height: 72px;" src="/gamification/static/img/rank_misc_unicorn.png"/>
             </div>
         </field>
diff --git a/addons/hr_org_chart/static/src/scss/hr_org_chart.scss b/addons/hr_org_chart/static/src/scss/hr_org_chart.scss
index cc8f8af2812fe..0be973463425e 100644
--- a/addons/hr_org_chart/static/src/scss/hr_org_chart.scss
+++ b/addons/hr_org_chart/static/src/scss/hr_org_chart.scss
@@ -135,7 +135,7 @@
         overflow: visible;
         margin-top: 0;
 
-        &, .o_media_left, .media-body {
+        &, .o_media_left, .flex-grow-1 {
             position: relative;
         }
 
@@ -143,7 +143,7 @@
             padding-right: 10px;
         }
 
-        .media-body {
+        .flex-grow-1 {
             vertical-align: middle;
 
             .badge {
@@ -203,7 +203,7 @@
             .o_media_left {
                 padding-right: 0;
             }
-            .media-body > a {
+            .flex-grow-1 > a {
                 padding-left: 10px;
                 max-width: 100%;
                 display: block;
@@ -218,7 +218,7 @@
                 .o_media_object {
                     box-shadow: 0 0 0 $o-hr-org-chart-entry-line-w*2 rgba($o-brand-primary, 0.6);
                 }
-                .media-body > a {
+                .flex-grow-1 > a {
                     .o_media_heading {
                         color: $o-brand-primary;
                     }
@@ -246,7 +246,7 @@
                 box-shadow: inset 0 0 0 $o-hr-org-chart-entry-line-w*2 white;
             }
 
-            .media-body {
+            .flex-grow-1 {
                 opacity: 1;
             }
         }
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 d3835bea5cfa0..0e4918b4367d4 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
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
 
 <t t-name="hr_org_chart_employee">
-    <div t-attf-class="o_org_chart_entry o_org_chart_entry_#{employee_type} media">
+    <div t-attf-class="o_org_chart_entry o_org_chart_entry_#{employee_type} d-flex">
         <t t-set="is_self" t-value="employee.id == view_employee_id"/>
 
         <div class="o_media_left">
@@ -19,7 +19,7 @@
                 t-att-style="'background-image:url(\'/web/image/hr.employee.public/' + employee.id + '/avatar_1024/\')'"/>
         </div>
 
-        <div class="media-body">
+        <div class="flex-grow-1">
             <span
                     t-if="employee.indirect_sub_count &gt; 0"
                     class="badge badge-pill"
@@ -58,7 +58,7 @@
 
     <div t-if='managers.length &gt; 0' class="o_org_chart_group_up">
         <t t-if='managers_more'>
-            <div class="o_org_chart_entry o_org_chart_more media">
+            <div class="o_org_chart_entry o_org_chart_more d-flex">
                 <div class="o_media_left">
                     <a class="text-center o_employee_more_managers"
                             t-att-data-employee-id="managers[0].id">
@@ -100,7 +100,7 @@
         </t>
 
         <t t-if="(children.length + managers.length) &gt; 19">
-            <div class="o_org_chart_entry o_org_chart_more media">
+            <div class="o_org_chart_entry o_org_chart_more d-flex">
                 <div class="o_media_left">
                     <a href="#"
                         t-att-data-employee-id="self.id"
diff --git a/addons/mail_group/views/portal_templates.xml b/addons/mail_group/views/portal_templates.xml
index 3c3f38cd9f9cd..814d2d6eeb7af 100644
--- a/addons/mail_group/views/portal_templates.xml
+++ b/addons/mail_group/views/portal_templates.xml
@@ -123,8 +123,8 @@
                                 </a>
                             </h4>
                         </div>
-                        <div class="media">
-                            <div class="media-body">
+                        <div class="d-flex">
+                            <div class="flex-grow-1">
                                 <div class="card">
                                     <div class="card-body">
                                         <h4 class="card-title d-flex flex-row justify-content-start align-items-center">
@@ -162,8 +162,8 @@
     <template id="messages_short">
         <div>
             <ul class="list-unstyled">
-                <li t-foreach="messages" t-as="message" class="media mt-3">
-                    <div class="media-body o_mg_message mw-100">
+                <li t-foreach="messages" t-as="message" class="d-flex mt-3">
+                    <div class="flex-grow-1 o_mg_message mw-100">
                         <div class="card">
                             <div class="o_mg_ribbon" t-if="message.moderation_status == 'pending_moderation'"><span class="bg-warning">Pending</span></div>
                             <div class="card-body">
diff --git a/addons/portal/static/src/scss/portal.scss b/addons/portal/static/src/scss/portal.scss
index 1d351e93469b6..33eea4d7bcade 100644
--- a/addons/portal/static/src/scss/portal.scss
+++ b/addons/portal/static/src/scss/portal.scss
@@ -473,7 +473,7 @@ form label {
         word-break: break-word;
 
         .o_portal_chatter_message {
-            div.media-body > p:not(.o_portal_chatter_puslished_date):last-of-type {
+            div.flex-grow-1 > p:not(.o_portal_chatter_puslished_date):last-of-type {
                 margin-bottom: 5px;
             }
         }
diff --git a/addons/portal/static/src/xml/portal_chatter.xml b/addons/portal/static/src/xml/portal_chatter.xml
index 9f5f439a6ce8f..1ec86afdd12c7 100644
--- a/addons/portal/static/src/xml/portal_chatter.xml
+++ b/addons/portal/static/src/xml/portal_chatter.xml
@@ -31,10 +31,10 @@
                 <div class="alert alert-danger mb8 d-none o_portal_chatter_composer_error" role="alert">
                     Oops! Something went wrong. Try to reload the page and log in.
                 </div>
-                <div class="media">
+                <div class="d-flex">
                     <img alt="Avatar" class="o_portal_chatter_avatar o_object_fit_cover" t-attf-src="/web/image/res.partner/#{widget.options['partner_id']}/avatar_128"
                          t-if="!widget.options['is_user_public'] or !widget.options['token']"/>
-                    <div class="media-body">
+                    <div class="flex-grow-1">
                         <div class="o_portal_chatter_composer_input">
                             <div class="o_portal_chatter_composer_body mb32">
                                 <textarea rows="4" name="message" class="form-control" placeholder="Write a message..."></textarea>
@@ -79,9 +79,9 @@
     <t t-name="portal.chatter_messages">
         <div class="o_portal_chatter_messages">
             <t t-foreach="widget.get('messages') || []" t-as="message">
-                <div class="media o_portal_chatter_message" t-att-id="'message-' + message.id">
+                <div class="d-flex o_portal_chatter_message" t-att-id="'message-' + message.id">
                     <img class="o_portal_chatter_avatar" t-att-src="message.author_avatar_url" alt="avatar"/>
-                    <div class="media-body">
+                    <div class="flex-grow-1">
                         <t t-call="portal.chatter_internal_toggle" t-if="widget.options['is_user_employee']"/>
 
                         <div class="o_portal_chatter_message_title">
diff --git a/addons/portal_rating/static/src/xml/portal_chatter.xml b/addons/portal_rating/static/src/xml/portal_chatter.xml
index b9931c8fdc638..3628afaab23b4 100644
--- a/addons/portal_rating/static/src/xml/portal_chatter.xml
+++ b/addons/portal_rating/static/src/xml/portal_chatter.xml
@@ -74,9 +74,9 @@
     </t>
 
     <t t-name="portal_rating.chatter_rating_publisher_comment">
-        <div class="media o_portal_chatter_message">
+        <div class="d-flex o_portal_chatter_message">
             <img class="o_portal_chatter_avatar" t-att-src="rating.publisher_avatar" alt="avatar"/>
-            <div class="media-body">
+            <div class="flex-grow-1">
                 <div class="o_portal_chatter_message_title">
                     <div class="d-inline-block">
                         <h5 class="mb-1"><t t-esc="rating.publisher_name"/></h5>
@@ -101,9 +101,9 @@
         </div>
     </t>
     <t t-name="portal_rating.chatter_rating_publisher_form">
-        <div t-if="is_publisher" class="media o_portal_chatter_message shadow bg-white rounded px-3 py-3 my-1">
+        <div t-if="is_publisher" class="d-flex o_portal_chatter_message shadow bg-white rounded px-3 py-3 my-1">
             <img class="o_portal_chatter_avatar" t-att-src="rating.publisher_avatar" alt="avatar"/>
-            <div class="media-body">
+            <div class="flex-grow-1">
                 <div class="o_portal_chatter_message_title">
                     <h5 class='mb-1'><t t-esc="rating.publisher_name"/></h5>
                 </div>
diff --git a/addons/project/static/src/scss/project_sharing/chatter.scss b/addons/project/static/src/scss/project_sharing/chatter.scss
index e8a8331926887..c43b6c36040d1 100644
--- a/addons/project/static/src/scss/project_sharing/chatter.scss
+++ b/addons/project/static/src/scss/project_sharing/chatter.scss
@@ -13,7 +13,7 @@
 
         div.o_portal_chatter_composer,
         div.o_portal_chatter_messages {
-            div.media {
+            div.d-flex {
                 gap: 10px;
 
                 .o_portal_chatter_attachments {
diff --git a/addons/website/data/website_demo.xml b/addons/website/data/website_demo.xml
index 231ee267c2db8..dd1aa41bedc24 100644
--- a/addons/website/data/website_demo.xml
+++ b/addons/website/data/website_demo.xml
@@ -243,9 +243,9 @@
                                                     <tr>
                                                         <th colspan="2" class="align-middle">Theme Colors</th>
                                                         <td t-foreach="[1, 2, 3, 4, 5]" t-as="i">
-                                                            <div class="media">
+                                                            <div class="d-flex">
                                                                 <span t-attf-class="border p-3 mr-1 bg-o-color-#{i}"></span>
-                                                                <div class="media-body align-self-center">
+                                                                <div class="flex-grow-1 align-self-center">
                                                                     <h5 class="m-0">o-color-<t t-esc="i"/></h5>
                                                                 </div>
                                                             </div>
@@ -254,9 +254,9 @@
                                                     <tr>
                                                         <th colspan="2" class="align-middle">BTS Base Colors</th>
                                                         <td t-foreach="['primary', 'secondary', 'light', 'dark']" t-as="i">
-                                                            <div class="media">
+                                                            <div class="d-flex">
                                                                 <span t-attf-class="border p-3 mr-1 bg-#{i}"></span>
-                                                                <div class="media-body align-self-center">
+                                                                <div class="flex-grow-1 align-self-center">
                                                                     <h5 class="m-0" t-esc="i"></h5>
                                                                 </div>
                                                             </div>
diff --git a/addons/website/static/src/snippets/s_mega_menu_images_subtitles/000.scss b/addons/website/static/src/snippets/s_mega_menu_images_subtitles/000.scss
index dab08d77d89e5..10a96b5a3e2bc 100644
--- a/addons/website/static/src/snippets/s_mega_menu_images_subtitles/000.scss
+++ b/addons/website/static/src/snippets/s_mega_menu_images_subtitles/000.scss
@@ -1,6 +1,6 @@
 
 .s_mega_menu_images_subtitles:not([data-vcss]) {
-    .media img {
+    .d-flex img {
         max-width: 64px;
     }
 
diff --git a/addons/website/static/src/snippets/s_searchbar/000.xml b/addons/website/static/src/snippets/s_searchbar/000.xml
index d82521ce96dbb..e28893b4de5d2 100644
--- a/addons/website/static/src/snippets/s_searchbar/000.xml
+++ b/addons/website/static/src/snippets/s_searchbar/000.xml
@@ -12,12 +12,12 @@
     </t>
     <a t-foreach="results" t-as="result"
         t-att-href="result['website_url']" class="dropdown-item p-2 text-wrap">
-        <div class="media align-items-center o_search_result_item">
+        <div class="d-flex align-items-center o_search_result_item">
             <t t-if="parts['image_url'] and widget.displayImage">
                 <img t-if="result['image_url']" t-att-src="result['image_url']" class="flex-shrink-0 o_image_64_contain"/>
                 <i t-else="" t-attf-class="o_image_64_contain text-center pt16 fa #{result['_fa']}" style="font-size: 34px;"/>
             </t>
-            <div class="media-body px-3">
+            <div class="flex-grow-1 px-3">
                 <t t-set="description" t-value="parts['description'] and widget.displayDescription and result['description']"/>
                 <t t-set="extra_link" t-value="parts['extra_link'] and widget.displayExtraLink and result['extra_link_url'] and result['extra_link']"/>
                 <t t-set="extra_link_html" t-value="parts['extra_link'] and widget.displayExtraLink and !result['extra_link_url'] and result['extra_link']"/>
diff --git a/addons/website/views/snippets/s_mega_menu_big_icons_subtitles.xml b/addons/website/views/snippets/s_mega_menu_big_icons_subtitles.xml
index e98a876b3bf56..7cf0a320ff521 100644
--- a/addons/website/views/snippets/s_mega_menu_big_icons_subtitles.xml
+++ b/addons/website/views/snippets/s_mega_menu_big_icons_subtitles.xml
@@ -70,9 +70,9 @@
 
 <template id="s_mega_menu_big_icons_subtitles_item">
     <a href="#" class="nav-link o_default_snippet_text px-2 my-2 rounded text-wrap" data-name="Menu Item">
-        <div class="media align-items-center">
+        <div class="d-flex align-items-center">
             <i t-attf-class="fa rounded rounded-circle mr-3 #{_icon_classes}"/>
-            <div class="media-body">
+            <div class="flex-grow-1">
                 <h4 class="mt-0 mb-0" t-esc="_title"/>
                 <span><font style="font-size: 14px;" t-esc="_text"/></span>
             </div>
diff --git a/addons/website/views/snippets/s_mega_menu_images_subtitles.xml b/addons/website/views/snippets/s_mega_menu_images_subtitles.xml
index ddad7419b9457..e7ce5a47aacba 100644
--- a/addons/website/views/snippets/s_mega_menu_images_subtitles.xml
+++ b/addons/website/views/snippets/s_mega_menu_images_subtitles.xml
@@ -58,9 +58,9 @@
 
 <template id="s_mega_menu_images_subtitles_item">
     <a href="#" class="nav-link o_default_snippet_text px-2 rounded text-wrap" data-name="Menu Item">
-        <div class="media">
+        <div class="d-flex">
             <img t-att-src="_img_src" class="mr-3 rounded shadow" alt=""/>
-            <div class="media-body">
+            <div class="flex-grow-1">
                 <h4 class="mt-0 mb-0" t-esc="_title"/>
                 <span><font style="font-size: 14px;" t-esc="_text"/></span>
             </div>
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index 987fb80f9d12b..f210602522373 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -2456,10 +2456,10 @@ Sitemap: <t t-esc="url_root"/>sitemap.xml
 
 <template id="one_hybrid" name="Single any Search Results">
     <a t-att-href="result.get('website_url')" class="dropdown-item p-2 text-wrap">
-        <div class="media align-items-center o_search_result_item">
+        <div class="d-flex align-items-center o_search_result_item">
             <img t-if="result.get('image_url')" t-att-src="result.get('image_url')" class="flex-shrink-0 o_image_64_contain"/>
             <i t-else="" t-att-class="'o_image_64_contain text-center pt16 fa %s' % result.get('_fa')" style="font-size: 34px;"/>
-            <div class="media-body px-3">
+            <div class="flex-grow-1 px-3">
                 <t t-set="description" t-value="result.get('description')"/>
                 <t t-set="extra_link" t-value="result.get('extra_link_url') and result.get('extra_link')"/>
                 <t t-set="extra_link_html" t-value="not result.get('extra_link_url') and result.get('extra_link')"/>
diff --git a/addons/website_crm_partner_assign/views/website_crm_partner_assign_templates.xml b/addons/website_crm_partner_assign/views/website_crm_partner_assign_templates.xml
index 8810ad42f318a..f1c6a555489de 100644
--- a/addons/website_crm_partner_assign/views/website_crm_partner_assign_templates.xml
+++ b/addons/website_crm_partner_assign/views/website_crm_partner_assign_templates.xml
@@ -80,13 +80,13 @@
                         </h3>
                         <t t-set="last_grade" t-value="partner.grade_id.id"/>
                     </t>
-                    <div class="media mt-3">
+                    <div class="d-flex mt-3">
                         <a t-attf-href="/partners/#{slug(partner)}?#{current_grade and 'grade_id=%s&amp;' % current_grade.id}#{current_country and 'country_id=%s' % current_country.id}"
                            t-field="partner.avatar_128"
                            class="mr-3 text-center o_width_128"
                            t-options='{"widget": "image", "qweb_img_responsive": False, "class": "o_image_128_max"}'
                         ></a>
-                        <div class="media-body o_partner_body" style="min-height: 64px;">
+                        <div class="flex-grow-1 o_partner_body" style="min-height: 64px;">
                             <a t-attf-href="/partners/#{slug(partner)}?#{current_grade and 'grade_id=%s&amp;' % current_grade.id}#{current_country and 'country_id=%s' % current_country.id}">
                                 <span t-field="partner.display_name"/>
                             </a>
@@ -161,9 +161,9 @@
 <template id="references_block" name="Partner References Block">
     <t t-if="any(p.website_published for p in partner.implemented_partner_ids)">
         <h3 id="references">References</h3>
-        <div t-foreach="partner.implemented_partner_ids" t-if="reference.website_published" t-as="reference" class="media mt-3">
+        <div t-foreach="partner.implemented_partner_ids" t-if="reference.website_published" t-as="reference" class="d-flex mt-3">
             <span t-field="reference.avatar_128" class="d-block mr-3 text-center o_width_128" t-options='{"widget": "image", "qweb_img_responsive": False, "class": "o_image_128_max"}'/>
-            <div class="media-body" style="min-height: 64px;">
+            <div class="flex-grow-1" style="min-height: 64px;">
                 <span t-field="reference.self"/>
                 <div t-field='reference.website_short_description'/>
             </div>
diff --git a/addons/website_customer/views/website_customer_templates.xml b/addons/website_customer/views/website_customer_templates.xml
index 02868bdbd8e29..df7f9f048d507 100644
--- a/addons/website_customer/views/website_customer_templates.xml
+++ b/addons/website_customer/views/website_customer_templates.xml
@@ -34,13 +34,13 @@
 
                     <p t-if="not partners">No result found</p>
                     <t t-foreach="partners" t-as="partner">
-                        <div class="media mt-3">
+                        <div class="d-flex mt-3">
                             <a t-attf-href="/customers/#{slug(partner)}"
                                t-field="partner.avatar_128"
                                class="d-block mr-3 text-center o_width_128"
                                t-options='{"widget": "image", "qweb_img_responsive": False, "class": "o_image_128_max"}'
                             ></a>
-                            <div class="media-body" style="min-height: 64px;">
+                            <div class="flex-grow-1" style="min-height: 64px;">
                                 <a t-attf-href="/customers/#{slug(partner)}">
                                     <span t-field="partner.display_name"/>
                                 </a>
@@ -217,12 +217,12 @@
 <template id="references_block" name="Partner References Block">
         <t t-if="any(p.website_published for p in partner.implemented_partner_ids)">
             <h3 id="references">References</h3>
-            <div t-foreach="partner.implemented_partner_ids" t-as="reference" class="media mt-3">
+            <div t-foreach="partner.implemented_partner_ids" t-as="reference" class="d-flex mt-3">
               <t t-if="reference.website_published">
                 <a t-attf-href="/customers/#{slug(reference)}">
                     <span t-field="reference.avatar_128" class="d-block mr-3 text-center o_width_128" t-options='{"widget": "image", "qweb_img_responsive": False, "class": "o_image_128_max"}'/>
                 </a>
-                <div class="media-body" style="min-height: 64px;">
+                <div class="flex-grow-1" style="min-height: 64px;">
                     <a t-attf-href="/customers/#{slug(reference)}">
                         <span t-field="reference.self"/>
                     </a>
@@ -240,7 +240,7 @@
     <xpath expr="//div/span" position="replace">
         <a t-attf-href="/customers/#{slug(reference)}">$0</a>
     </xpath>
-    <xpath expr="//div[hasclass('media-body')]/span" position="replace">
+    <xpath expr="//div[hasclass('flex-grow-1')]/span" position="replace">
         <a t-attf-href="/customers/#{slug(reference)}">$0</a>
     </xpath>
 </template>
diff --git a/addons/website_forum/views/website_forum.xml b/addons/website_forum/views/website_forum.xml
index 49d29a3d4c8af..e46c5c279566f 100644
--- a/addons/website_forum/views/website_forum.xml
+++ b/addons/website_forum/views/website_forum.xml
@@ -305,14 +305,14 @@
 
 <template id="display_post">
     <div t-attf-class="#{show_author_avatar and 'mt-2 mb-4' or 'card py-2 px-3'}">
-        <div class="media">
+        <div class="d-flex">
             <div t-if="show_author_avatar">
                 <t t-call="website_forum.author_box">
                     <t t-set="object" t-value="question"/>
                     <t t-set="allow_biography" t-value="True"/>
                 </t>
             </div>
-            <div t-attf-class="media-body #{show_author_avatar and 'pl-2'}">
+            <div t-attf-class="flex-grow-1 #{show_author_avatar and 'pl-2'}">
                 <t t-call="website_forum.display_post_question_block"/>
             </div>
         </div>
diff --git a/addons/website_livechat/views/website_livechat.xml b/addons/website_livechat/views/website_livechat.xml
index 71f45527473fc..61d0fbe8094d2 100644
--- a/addons/website_livechat/views/website_livechat.xml
+++ b/addons/website_livechat/views/website_livechat.xml
@@ -100,9 +100,9 @@
                         <div class="col-lg-4 mb32">
                             <h3>The Team</h3>
                             <t t-foreach="team" t-as="user">
-                                <div class="media mt-3">
+                                <div class="d-flex mt-3">
                                     <img t-att-src="image_data_uri(user.avatar_128)" class="o_image_64_cover rounded o_livechat_operator_avatar" t-att-alt="user.livechat_username or user.name"/>
-                                    <div class="media-body">
+                                    <div class="flex-grow-1">
                                         <h5>
                                             <t t-if="user.livechat_username">
                                                 <t t-esc="user.livechat_username"/>
@@ -158,11 +158,11 @@
                             <t t-if="len(channels)">
                                 <div class="col-lg-6">
                                     <t t-foreach="channels" t-as="channel">
-                                        <div t-attf-class="media#{' mt-3' if channel_index else ''}">
+                                        <div t-attf-class="d-flex#{' mt-3' if channel_index else ''}">
                                             <a t-attf-href="/livechat/channel/#{ slug(channel)}">
                                                 <img t-att-src="channel.image_128 and image_data_uri(channel.image_128) or '/web/static/img/placeholder.png'" t-att-alt="channel.name" class="o_image_64_cover"/>
                                             </a>
-                                            <div class="media-body h-100 my-auto">
+                                            <div class="flex-grow-1 h-100 my-auto">
                                                 <h4><t t-esc="channel.name"/></h4>
                                             </div>
                                         </div>
diff --git a/addons/website_membership/views/website_membership_templates.xml b/addons/website_membership/views/website_membership_templates.xml
index 4bd05acb825a8..f45631b096d97 100644
--- a/addons/website_membership/views/website_membership_templates.xml
+++ b/addons/website_membership/views/website_membership_templates.xml
@@ -52,12 +52,12 @@
                             <h3 class="text-center"><span t-esc="membership_data['name']"/></h3>
                             <t t-foreach="memberships_partner_ids[membership_data['id']]" t-as="partner_id">
                                 <t t-set="partner" t-value="partners[partner_id]"/>
-                                <div class="media mt-3">
+                                <div class="d-flex mt-3">
                                     <a t-attf-href="/members/#{slug(partner)}"
                                        t-field="partner.avatar_128"
                                        t-options='{"widget": "image", "qweb_img_responsive": False, "class": "o_image_64_cover mr-3"}'
                                     ></a>
-                                    <div class="media-body" style="min-height: 64px;">
+                                    <div class="flex-grow-1" style="min-height: 64px;">
                                         <a t-attf-href="/members/#{slug(partner)}">
                                             <span t-field="partner.display_name"/>
                                         </a>
diff --git a/addons/website_profile/views/website_profile.xml b/addons/website_profile/views/website_profile.xml
index 78673e78e5d20..405d411100a09 100644
--- a/addons/website_profile/views/website_profile.xml
+++ b/addons/website_profile/views/website_profile.xml
@@ -361,7 +361,7 @@
                     <div class="col px-1 mb-2 col-xl-4">
                         <div class="card">
                             <div class="card-body p-2 pr-3">
-                                <div class="media align-items-center">
+                                <div class="d-flex align-items-center">
                                     <img t-if="not badge.badge_id.image_1920 and badge.badge_id.level"
                                         width="38" height="38"
                                         t-attf-src="/website_profile/static/src/img/badge_#{badge.badge_id.level}.svg"
@@ -372,7 +372,7 @@
                                         t-att-src="website.image_url(badge.badge_id, 'image_128')"
                                         class="o_object_fit_cover mr-0"
                                         t-att-alt="badge.badge_id.name"/>
-                                    <div class="media-body col-md-10 p-0">
+                                    <div class="flex-grow-1 col-md-10 p-0">
                                         <h6 class="my-0 pl-1 text-truncate" t-field="badge.badge_id.name"/>
                                     </div>
                                 </div>
@@ -420,9 +420,9 @@
                             <ul class="list-group list-group-flush">
                                 <t t-foreach="ranks" t-as="rank">
                                     <li t-attf-class="list-group-item">
-                                        <div class="media align-items-center">
+                                        <div class="d-flex align-items-center">
                                             <img t-att-src="website.image_url(rank, 'image_128')" class="mr-2 o_image_40_cover" alt="Rank badge"/>
-                                            <div class="media-body">
+                                            <div class="flex-grow-1">
                                                 <h5 class="mt-0 mb-0" t-field="rank.name"/>
                                                 <span class="badge badge-success"><span t-field="rank.karma_min"/></span> point<span t-if="rank.karma_min">s</span>
                                             </div>
diff --git a/addons/website_sale/static/src/xml/website_sale_utils.xml b/addons/website_sale/static/src/xml/website_sale_utils.xml
index 717cde096bb44..55c2b5a2e5acb 100644
--- a/addons/website_sale/static/src/xml/website_sale_utils.xml
+++ b/addons/website_sale/static/src/xml/website_sale_utils.xml
@@ -9,12 +9,12 @@
     </t>
     <a t-foreach="products" t-as="product"
         t-att-href="product['website_url']" class="dropdown-item p-2 text-wrap">
-        <div class="media align-items-center o_search_product_item">
+        <div class="d-flex align-items-center o_search_product_item">
             <t t-if="widget.displayImage">
                 <img t-attf-src="/web/image/product.template/#{product['id']}/image_128"
                     class="flex-shrink-0 o_image_64_contain"/>
             </t>
-            <div class="media-body px-3">
+            <div class="flex-grow-1 px-3">
                 <t t-set="description" t-value="widget.displayDescription and product['description_sale']"/>
                 <h6 t-attf-class="font-weight-bold #{description ? '' : 'mb-0'}" t-out="product['name']"/>
                 <p t-if="description" class="mb-0" t-out="description"/>