From a10d6bb9eb1f7f25bf24419b31d4d3787cba699d Mon Sep 17 00:00:00 2001
From: Romeo Fragomeli <rfr@odoo.com>
Date: Wed, 11 May 2022 12:22:44 +0000
Subject: [PATCH] [REF] *: BS5:  use `text-bg-#{$color}` to keep the contrasted
 text color

In BS5 `bg-#{$color}` don't set the color of the text. So in some case
the color is not the right one.

Task ID: 2766483

Part-of: odoo/odoo#95450
---
 addons/event/views/event_event_views.xml      |  2 +-
 .../views/snippets/s_three_columns.xml        |  6 +-
 addons/web/static/src/legacy/xml/base.xml     |  6 +-
 .../src/search/search_bar/search_bar.xml      |  4 +-
 .../views/snippets/s_three_columns.xml        |  6 +-
 .../views/event_meet_templates_list.xml       |  2 +-
 .../data/hr_job_demo.xml                      | 98 +++++++++----------
 .../website_hr_recruitment_templates.xml      | 14 +--
 8 files changed, 69 insertions(+), 69 deletions(-)

diff --git a/addons/event/views/event_event_views.xml b/addons/event/views/event_event_views.xml
index 866638f87fc..4914b21457b 100644
--- a/addons/event/views/event_event_views.xml
+++ b/addons/event/views/event_event_views.xml
@@ -184,7 +184,7 @@
                     <t t-name="kanban-box">
                         <div t-attf-class="d-flex flex-column p-0 oe_kanban_card oe_kanban_global_click">
                             <div class="o_kanban_content p-0 m-0 position-relative row d-flex flex-fill">
-                                <div class="col-3 bg-primary p-2 text-center d-flex flex-column justify-content-center">
+                                <div class="col-3 text-bg-primary p-2 text-center d-flex flex-column justify-content-center">
                                     <div t-esc="record.date_begin.raw_value.getDate()" class="o_event_fontsize_20"/>
                                     <div>
                                         <t t-esc="luxon.DateTime.fromJSDate(record.date_begin.raw_value).toFormat('MMM yyyy')"/>
diff --git a/addons/mass_mailing/views/snippets/s_three_columns.xml b/addons/mass_mailing/views/snippets/s_three_columns.xml
index 3922a05accf..62d9df2bb7f 100644
--- a/addons/mass_mailing/views/snippets/s_three_columns.xml
+++ b/addons/mass_mailing/views/snippets/s_three_columns.xml
@@ -6,7 +6,7 @@
         <div class="container">
             <div class="row d-flex align-items-stretch">
                 <div class="col-lg-4 s_col_no_bgcolor pt16 pb16">
-                    <div class="card bg-white h-100">
+                    <div class="card text-bg-white h-100">
                         <img class="card-img-top" src="/web/image/mass_mailing.s_three_columns_default_image_1" alt=""/>
                         <div class="card-body">
                             <h3 class="card-title">Feature One</h3>
@@ -15,7 +15,7 @@
                     </div>
                 </div>
                 <div class="col-lg-4 s_col_no_bgcolor pt16 pb16">
-                    <div class="card bg-white h-100">
+                    <div class="card text-bg-white h-100">
                         <img class="card-img-top" src="/web/image/mass_mailing.s_three_columns_default_image_2" alt=""/>
                         <div class="card-body">
                             <h3 class="card-title">Feature Two</h3>
@@ -24,7 +24,7 @@
                     </div>
                 </div>
                 <div class="col-lg-4 s_col_no_bgcolor pt16 pb16">
-                    <div class="card bg-white h-100">
+                    <div class="card text-bg-white h-100">
                         <img class="card-img-top" src="/web/image/mass_mailing.s_three_columns_default_image_3" alt=""/>
                         <div class="card-body">
                             <h3 class="card-title">Feature Three</h3>
diff --git a/addons/web/static/src/legacy/xml/base.xml b/addons/web/static/src/legacy/xml/base.xml
index faf562935d9..b5d26717041 100644
--- a/addons/web/static/src/legacy/xml/base.xml
+++ b/addons/web/static/src/legacy/xml/base.xml
@@ -341,9 +341,9 @@
             role="img"
             aria-label="search"
             t-on-keydown="(ev) => this._onFacetKeydown(facet, facet_index, ev)">
-            <span t-if="facet.icon" t-attf-class="o_searchview_facet_label bg-odoo {{ facet.icon }}"/>
-            <span t-else="" class="o_searchview_facet_label bg-odoo" t-esc="facet.title"/>
-            <div class="o_facet_values border border-odoo border-left-0">
+            <span t-if="facet.icon" t-attf-class="o_searchview_facet_label text-bg-odoo {{ facet.icon }}"/>
+            <span t-else="" class="o_searchview_facet_label text-bg-odoo" t-esc="facet.title"/>
+            <div class="o_facet_values border border-odoo border-start-0">
                 <t t-foreach="facet.values" t-as="facetValue" t-key="facetValue_index">
                     <span t-if="!facetValue_first" class="o_facet_values_sep" t-esc="facet.separator"/>
                     <span class="o_facet_value" t-esc="facetValue"/>
diff --git a/addons/web/static/src/search/search_bar/search_bar.xml b/addons/web/static/src/search/search_bar/search_bar.xml
index f15c8472cf1..59034b833a0 100644
--- a/addons/web/static/src/search/search_bar/search_bar.xml
+++ b/addons/web/static/src/search/search_bar/search_bar.xml
@@ -10,10 +10,10 @@
                 t-on-keydown="ev => this.onFacetKeydown(facet, facet_index, ev)"
                 >
                 <t t-if="facet.icon">
-                    <span t-attf-class="o_searchview_facet_label bg-odoo {{ facet.icon }}"/>
+                    <span t-attf-class="o_searchview_facet_label text-bg-odoo {{ facet.icon }}"/>
                 </t>
                 <t t-else="">
-                    <span class="o_searchview_facet_label bg-odoo" t-esc="facet.title"/>
+                    <span class="o_searchview_facet_label text-bg-odoo" t-esc="facet.title"/>
                 </t>
                 <div class="o_facet_values border border-odoo border-left-0">
                     <t t-foreach="facet.values" t-as="facetValue" t-key="facetValue_index">
diff --git a/addons/website/views/snippets/s_three_columns.xml b/addons/website/views/snippets/s_three_columns.xml
index dbf1bfe0ba1..82659aaaad4 100644
--- a/addons/website/views/snippets/s_three_columns.xml
+++ b/addons/website/views/snippets/s_three_columns.xml
@@ -6,7 +6,7 @@
         <div class="container">
             <div class="row d-flex align-items-stretch">
                 <div class="col-lg-4 s_col_no_bgcolor pt16 pb16">
-                    <div class="card bg-white h-100">
+                    <div class="card text-bg-white h-100">
                         <img class="card-img-top" src="/web/image/website.s_three_columns_default_image_1" alt=""/>
                         <div class="card-body">
                             <h3 class="card-title">Feature One</h3>
@@ -15,7 +15,7 @@
                     </div>
                 </div>
                 <div class="col-lg-4 s_col_no_bgcolor pt16 pb16">
-                    <div class="card bg-white h-100">
+                    <div class="card text-bg-white h-100">
                         <img class="card-img-top" src="/web/image/website.s_three_columns_default_image_2" alt=""/>
                         <div class="card-body">
                             <h3 class="card-title">Feature Two</h3>
@@ -24,7 +24,7 @@
                     </div>
                 </div>
                 <div class="col-lg-4 s_col_no_bgcolor pt16 pb16">
-                    <div class="card bg-white h-100">
+                    <div class="card text-bg-white h-100">
                         <img class="card-img-top" src="/web/image/website.s_three_columns_default_image_3" alt=""/>
                         <div class="card-body">
                             <h3 class="card-title">Feature Three</h3>
diff --git a/addons/website_event_meet/views/event_meet_templates_list.xml b/addons/website_event_meet/views/event_meet_templates_list.xml
index ad6ed80892d..6134ee2095a 100644
--- a/addons/website_event_meet/views/event_meet_templates_list.xml
+++ b/addons/website_event_meet/views/event_meet_templates_list.xml
@@ -139,7 +139,7 @@
                         <span t-if="meeting_room.target_audience" class="text-uppercase" t-field="meeting_room.target_audience"/>
                         <span t-else="" class="text-uppercase">participant(s)</span>
                     </span>
-                    <div class="d-inline border py-1 px-2 bg-secondary" t-out="meeting_room.room_lang_id.name"/>
+                    <div class="d-inline border py-1 px-2 text-bg-secondary" t-out="meeting_room.room_lang_id.name"/>
                 </div>
             </div>
         </div>
diff --git a/addons/website_hr_recruitment/data/hr_job_demo.xml b/addons/website_hr_recruitment/data/hr_job_demo.xml
index 1a4a9140d0c..2d8af292723 100644
--- a/addons/website_hr_recruitment/data/hr_job_demo.xml
+++ b/addons/website_hr_recruitment/data/hr_job_demo.xml
@@ -99,7 +99,7 @@
                 <div class="container">
                     <div class="row">
                         <div class="col-lg-4 s_col_no_bgcolor pt16 pb16" data-name="Box">
-                            <div class="card bg-primary">
+                            <div class="card text-bg-primary">
                                 <h4 class="card-header">Responsibilities</h4>
                                 <ul class="list-group list-group-flush">
                                     <li class="list-group-item">Lead the entire sales cycle</li>
@@ -111,7 +111,7 @@
                             </div>
                         </div>
                         <div class="col-lg-4 s_col_no_bgcolor pt16 pb16" data-name="Box">
-                            <div class="card bg-primary">
+                            <div class="card text-bg-primary">
                                 <h4 class="card-header">Must Have</h4>
                                 <ul class="list-group list-group-flush">
                                     <li class="list-group-item">Bachelor Degree or Higher</li>
@@ -123,7 +123,7 @@
                             </div>
                         </div>
                         <div class="col-lg-4 s_col_no_bgcolor pt16 pb16" data-name="Box">
-                            <div class="card bg-primary">
+                            <div class="card text-bg-primary">
                                 <h4 class="card-header">Nice to have</h4>
                                 <ul class="list-group list-group-flush">
                                     <li class="list-group-item">Experience in writing online content</li>
@@ -176,22 +176,22 @@
                     </p>
                     <div class="row pt16">
                         <div class="col-lg-3 text-center pt16 pb32">
-                            <i class="fa fa-2x fa-gift rounded-circle bg-primary m-3"></i>
+                            <i class="fa fa-2x fa-gift rounded-circle text-bg-primary m-3"></i>
                             <h3>Perks</h3>
                             <p>A full-time position <br/>Attractive salary package.</p>
                         </div>
                         <div class="col-lg-3 text-center pt16 pb32">
-                            <i class="fa fa-2x fa-bar-chart rounded-circle bg-primary m-3"></i>
+                            <i class="fa fa-2x fa-bar-chart rounded-circle text-bg-primary m-3"></i>
                             <h3>Trainings</h3>
                             <p>12 days / year, including <br/>6 of your choice.</p>
                         </div>
                         <div class="col-lg-3 text-center pt16 pb32">
-                            <i class="fa fa-2x fa-futbol-o rounded-circle bg-primary m-3"></i>
+                            <i class="fa fa-2x fa-futbol-o rounded-circle text-bg-primary m-3"></i>
                             <h3>Sport Activity</h3>
                             <p>Play any sport with colleagues, <br/>the bill is covered.</p>
                         </div>
                         <div class="col-lg-3 text-center pt16 pb32">
-                            <i class="fa fa-2x fa-coffee rounded-circle bg-primary m-3"></i>
+                            <i class="fa fa-2x fa-coffee rounded-circle text-bg-primary m-3"></i>
                             <h3>Eat &amp; Drink</h3>
                             <p>Fruit, coffee and <br/>snacks provided.</p>
                         </div>
@@ -326,7 +326,7 @@
                 <div class="container">
                     <div class="row">
                         <div class="col-lg-4 s_col_no_bgcolor pt16 pb16" data-name="Box">
-                            <div class="card bg-primary">
+                            <div class="card text-bg-primary">
                                 <h4 class="card-header">Responsibilities</h4>
                                 <ul class="list-group list-group-flush">
                                     <li class="list-group-item">Lead the entire sales cycle</li>
@@ -338,7 +338,7 @@
                             </div>
                         </div>
                         <div class="col-lg-4 s_col_no_bgcolor pt16 pb16" data-name="Box">
-                            <div class="card bg-primary">
+                            <div class="card text-bg-primary">
                                 <h4 class="card-header">Must Have</h4>
                                 <ul class="list-group list-group-flush">
                                     <li class="list-group-item">Bachelor Degree or Higher</li>
@@ -350,7 +350,7 @@
                             </div>
                         </div>
                         <div class="col-lg-4 s_col_no_bgcolor pt16 pb16" data-name="Box">
-                            <div class="card bg-primary">
+                            <div class="card text-bg-primary">
                                 <h4 class="card-header">Nice to have</h4>
                                 <ul class="list-group list-group-flush">
                                     <li class="list-group-item">Experience in writing online content</li>
@@ -403,22 +403,22 @@
                     </p>
                     <div class="row pt16">
                         <div class="col-lg-3 text-center pt16 pb32">
-                            <i class="fa fa-2x fa-gift rounded-circle bg-primary m-3"></i>
+                            <i class="fa fa-2x fa-gift rounded-circle text-bg-primary m-3"></i>
                             <h3>Perks</h3>
                             <p>A full-time position <br/>Attractive salary package.</p>
                         </div>
                         <div class="col-lg-3 text-center pt16 pb32">
-                            <i class="fa fa-2x fa-bar-chart rounded-circle bg-primary m-3"></i>
+                            <i class="fa fa-2x fa-bar-chart rounded-circle text-bg-primary m-3"></i>
                             <h3>Trainings</h3>
                             <p>12 days / year, including <br/>6 of your choice.</p>
                         </div>
                         <div class="col-lg-3 text-center pt16 pb32">
-                            <i class="fa fa-2x fa-futbol-o rounded-circle bg-primary m-3"></i>
+                            <i class="fa fa-2x fa-futbol-o rounded-circle text-bg-primary m-3"></i>
                             <h3>Sport Activity</h3>
                             <p>Play any sport with colleagues, <br/>the bill is covered.</p>
                         </div>
                         <div class="col-lg-3 text-center pt16 pb32">
-                            <i class="fa fa-2x fa-coffee rounded-circle bg-primary m-3"></i>
+                            <i class="fa fa-2x fa-coffee rounded-circle text-bg-primary m-3"></i>
                             <h3>Eat &amp; Drink</h3>
                             <p>Fruit, coffee and <br/>snacks provided.</p>
                         </div>
@@ -553,7 +553,7 @@
                 <div class="container">
                     <div class="row">
                         <div class="col-lg-4 s_col_no_bgcolor pt16 pb16" data-name="Box">
-                            <div class="card bg-primary">
+                            <div class="card text-bg-primary">
                                 <h4 class="card-header">Responsibilities</h4>
                                 <ul class="list-group list-group-flush">
                                     <li class="list-group-item">Lead the entire sales cycle</li>
@@ -565,7 +565,7 @@
                             </div>
                         </div>
                         <div class="col-lg-4 s_col_no_bgcolor pt16 pb16" data-name="Box">
-                            <div class="card bg-primary">
+                            <div class="card text-bg-primary">
                                 <h4 class="card-header">Must Have</h4>
                                 <ul class="list-group list-group-flush">
                                     <li class="list-group-item">Bachelor Degree or Higher</li>
@@ -577,7 +577,7 @@
                             </div>
                         </div>
                         <div class="col-lg-4 s_col_no_bgcolor pt16 pb16" data-name="Box">
-                            <div class="card bg-primary">
+                            <div class="card text-bg-primary">
                                 <h4 class="card-header">Nice to have</h4>
                                 <ul class="list-group list-group-flush">
                                     <li class="list-group-item">Experience in writing online content</li>
@@ -630,22 +630,22 @@
                     </p>
                     <div class="row pt16">
                         <div class="col-lg-3 text-center pt16 pb32">
-                            <i class="fa fa-2x fa-gift rounded-circle bg-primary m-3"></i>
+                            <i class="fa fa-2x fa-gift rounded-circle text-bg-primary m-3"></i>
                             <h3>Perks</h3>
                             <p>A full-time position <br/>Attractive salary package.</p>
                         </div>
                         <div class="col-lg-3 text-center pt16 pb32">
-                            <i class="fa fa-2x fa-bar-chart rounded-circle bg-primary m-3"></i>
+                            <i class="fa fa-2x fa-bar-chart rounded-circle text-bg-primary m-3"></i>
                             <h3>Trainings</h3>
                             <p>12 days / year, including <br/>6 of your choice.</p>
                         </div>
                         <div class="col-lg-3 text-center pt16 pb32">
-                            <i class="fa fa-2x fa-futbol-o rounded-circle bg-primary m-3"></i>
+                            <i class="fa fa-2x fa-futbol-o rounded-circle text-bg-primary m-3"></i>
                             <h3>Sport Activity</h3>
                             <p>Play any sport with colleagues, <br/>the bill is covered.</p>
                         </div>
                         <div class="col-lg-3 text-center pt16 pb32">
-                            <i class="fa fa-2x fa-coffee rounded-circle bg-primary m-3"></i>
+                            <i class="fa fa-2x fa-coffee rounded-circle text-bg-primary m-3"></i>
                             <h3>Eat &amp; Drink</h3>
                             <p>Fruit, coffee and <br/>snacks provided.</p>
                         </div>
@@ -779,7 +779,7 @@
                 <div class="container">
                     <div class="row">
                         <div class="col-lg-4 s_col_no_bgcolor pt16 pb16" data-name="Box">
-                            <div class="card bg-primary">
+                            <div class="card text-bg-primary">
                                 <h4 class="card-header">Responsibilities</h4>
                                 <ul class="list-group list-group-flush">
                                     <li class="list-group-item">Lead the entire sales cycle</li>
@@ -791,7 +791,7 @@
                             </div>
                         </div>
                         <div class="col-lg-4 s_col_no_bgcolor pt16 pb16" data-name="Box">
-                            <div class="card bg-primary">
+                            <div class="card text-bg-primary">
                                 <h4 class="card-header">Must Have</h4>
                                 <ul class="list-group list-group-flush">
                                     <li class="list-group-item">Bachelor Degree or Higher</li>
@@ -803,7 +803,7 @@
                             </div>
                         </div>
                         <div class="col-lg-4 s_col_no_bgcolor pt16 pb16" data-name="Box">
-                            <div class="card bg-primary">
+                            <div class="card text-bg-primary">
                                 <h4 class="card-header">Nice to have</h4>
                                 <ul class="list-group list-group-flush">
                                     <li class="list-group-item">Experience in writing online content</li>
@@ -856,22 +856,22 @@
                     </p>
                     <div class="row pt16">
                         <div class="col-lg-3 text-center pt16 pb32">
-                            <i class="fa fa-2x fa-gift rounded-circle bg-primary m-3"></i>
+                            <i class="fa fa-2x fa-gift rounded-circle text-bg-primary m-3"></i>
                             <h3>Perks</h3>
                             <p>A full-time position <br/>Attractive salary package.</p>
                         </div>
                         <div class="col-lg-3 text-center pt16 pb32">
-                            <i class="fa fa-2x fa-bar-chart rounded-circle bg-primary m-3"></i>
+                            <i class="fa fa-2x fa-bar-chart rounded-circle text-bg-primary m-3"></i>
                             <h3>Trainings</h3>
                             <p>12 days / year, including <br/>6 of your choice.</p>
                         </div>
                         <div class="col-lg-3 text-center pt16 pb32">
-                            <i class="fa fa-2x fa-futbol-o rounded-circle bg-primary m-3"></i>
+                            <i class="fa fa-2x fa-futbol-o rounded-circle text-bg-primary m-3"></i>
                             <h3>Sport Activity</h3>
                             <p>Play any sport with colleagues, <br/>the bill is covered.</p>
                         </div>
                         <div class="col-lg-3 text-center pt16 pb32">
-                            <i class="fa fa-2x fa-coffee rounded-circle bg-primary m-3"></i>
+                            <i class="fa fa-2x fa-coffee rounded-circle text-bg-primary m-3"></i>
                             <h3>Eat &amp; Drink</h3>
                             <p>Fruit, coffee and <br/>snacks provided.</p>
                         </div>
@@ -1005,7 +1005,7 @@
                 <div class="container">
                     <div class="row">
                         <div class="col-lg-4 s_col_no_bgcolor pt16 pb16" data-name="Box">
-                            <div class="card bg-primary">
+                            <div class="card text-bg-primary">
                                 <h4 class="card-header">Responsibilities</h4>
                                 <ul class="list-group list-group-flush">
                                     <li class="list-group-item">Lead the entire sales cycle</li>
@@ -1017,7 +1017,7 @@
                             </div>
                         </div>
                         <div class="col-lg-4 s_col_no_bgcolor pt16 pb16" data-name="Box">
-                            <div class="card bg-primary">
+                            <div class="card text-bg-primary">
                                 <h4 class="card-header">Must Have</h4>
                                 <ul class="list-group list-group-flush">
                                     <li class="list-group-item">Bachelor Degree or Higher</li>
@@ -1029,7 +1029,7 @@
                             </div>
                         </div>
                         <div class="col-lg-4 s_col_no_bgcolor pt16 pb16" data-name="Box">
-                            <div class="card bg-primary">
+                            <div class="card text-bg-primary">
                                 <h4 class="card-header">Nice to have</h4>
                                 <ul class="list-group list-group-flush">
                                     <li class="list-group-item">Experience in writing online content</li>
@@ -1082,22 +1082,22 @@
                     </p>
                     <div class="row pt16">
                         <div class="col-lg-3 text-center pt16 pb32">
-                            <i class="fa fa-2x fa-gift rounded-circle bg-primary m-3"></i>
+                            <i class="fa fa-2x fa-gift rounded-circle text-bg-primary m-3"></i>
                             <h3>Perks</h3>
                             <p>A full-time position <br/>Attractive salary package.</p>
                         </div>
                         <div class="col-lg-3 text-center pt16 pb32">
-                            <i class="fa fa-2x fa-bar-chart rounded-circle bg-primary m-3"></i>
+                            <i class="fa fa-2x fa-bar-chart rounded-circle text-bg-primary m-3"></i>
                             <h3>Trainings</h3>
                             <p>12 days / year, including <br/>6 of your choice.</p>
                         </div>
                         <div class="col-lg-3 text-center pt16 pb32">
-                            <i class="fa fa-2x fa-futbol-o rounded-circle bg-primary m-3"></i>
+                            <i class="fa fa-2x fa-futbol-o rounded-circle text-bg-primary m-3"></i>
                             <h3>Sport Activity</h3>
                             <p>Play any sport with colleagues, <br/>the bill is covered.</p>
                         </div>
                         <div class="col-lg-3 text-center pt16 pb32">
-                            <i class="fa fa-2x fa-coffee rounded-circle bg-primary m-3"></i>
+                            <i class="fa fa-2x fa-coffee rounded-circle text-bg-primary m-3"></i>
                             <h3>Eat &amp; Drink</h3>
                             <p>Fruit, coffee and <br/>snacks provided.</p>
                         </div>
@@ -1231,7 +1231,7 @@
                 <div class="container">
                     <div class="row">
                         <div class="col-lg-4 s_col_no_bgcolor pt16 pb16" data-name="Box">
-                            <div class="card bg-primary">
+                            <div class="card text-bg-primary">
                                 <h4 class="card-header">Responsibilities</h4>
                                 <ul class="list-group list-group-flush">
                                     <li class="list-group-item">Lead the entire sales cycle</li>
@@ -1243,7 +1243,7 @@
                             </div>
                         </div>
                         <div class="col-lg-4 s_col_no_bgcolor pt16 pb16" data-name="Box">
-                            <div class="card bg-primary">
+                            <div class="card text-bg-primary">
                                 <h4 class="card-header">Must Have</h4>
                                 <ul class="list-group list-group-flush">
                                     <li class="list-group-item">Bachelor Degree or Higher</li>
@@ -1255,7 +1255,7 @@
                             </div>
                         </div>
                         <div class="col-lg-4 s_col_no_bgcolor pt16 pb16" data-name="Box">
-                            <div class="card bg-primary">
+                            <div class="card text-bg-primary">
                                 <h4 class="card-header">Nice to have</h4>
                                 <ul class="list-group list-group-flush">
                                     <li class="list-group-item">Experience in writing online content</li>
@@ -1308,22 +1308,22 @@
                     </p>
                     <div class="row pt16">
                         <div class="col-lg-3 text-center pt16 pb32">
-                            <i class="fa fa-2x fa-gift rounded-circle bg-primary m-3"></i>
+                            <i class="fa fa-2x fa-gift rounded-circle text-bg-primary m-3"></i>
                             <h3>Perks</h3>
                             <p>A full-time position <br/>Attractive salary package.</p>
                         </div>
                         <div class="col-lg-3 text-center pt16 pb32">
-                            <i class="fa fa-2x fa-bar-chart rounded-circle bg-primary m-3"></i>
+                            <i class="fa fa-2x fa-bar-chart rounded-circle text-bg-primary m-3"></i>
                             <h3>Trainings</h3>
                             <p>12 days / year, including <br/>6 of your choice.</p>
                         </div>
                         <div class="col-lg-3 text-center pt16 pb32">
-                            <i class="fa fa-2x fa-futbol-o rounded-circle bg-primary m-3"></i>
+                            <i class="fa fa-2x fa-futbol-o rounded-circle text-bg-primary m-3"></i>
                             <h3>Sport Activity</h3>
                             <p>Play any sport with colleagues, <br/>the bill is covered.</p>
                         </div>
                         <div class="col-lg-3 text-center pt16 pb32">
-                            <i class="fa fa-2x fa-coffee rounded-circle bg-primary m-3"></i>
+                            <i class="fa fa-2x fa-coffee rounded-circle text-bg-primary m-3"></i>
                             <h3>Eat &amp; Drink</h3>
                             <p>Fruit, coffee and <br/>snacks provided.</p>
                         </div>
@@ -1457,7 +1457,7 @@
                 <div class="container">
                     <div class="row">
                         <div class="col-lg-4 s_col_no_bgcolor pt16 pb16" data-name="Box">
-                            <div class="card bg-primary">
+                            <div class="card text-bg-primary">
                                 <h4 class="card-header">Responsibilities</h4>
                                 <ul class="list-group list-group-flush">
                                     <li class="list-group-item">Lead the entire sales cycle</li>
@@ -1469,7 +1469,7 @@
                             </div>
                         </div>
                         <div class="col-lg-4 s_col_no_bgcolor pt16 pb16" data-name="Box">
-                            <div class="card bg-primary">
+                            <div class="card text-bg-primary">
                                 <h4 class="card-header">Must Have</h4>
                                 <ul class="list-group list-group-flush">
                                     <li class="list-group-item">Bachelor Degree or Higher</li>
@@ -1481,7 +1481,7 @@
                             </div>
                         </div>
                         <div class="col-lg-4 s_col_no_bgcolor pt16 pb16" data-name="Box">
-                            <div class="card bg-primary">
+                            <div class="card text-bg-primary">
                                 <h4 class="card-header">Nice to have</h4>
                                 <ul class="list-group list-group-flush">
                                     <li class="list-group-item">Experience in writing online content</li>
@@ -1534,22 +1534,22 @@
                     </p>
                     <div class="row pt16">
                         <div class="col-lg-3 text-center pt16 pb32">
-                            <i class="fa fa-2x fa-gift rounded-circle bg-primary m-3"></i>
+                            <i class="fa fa-2x fa-gift rounded-circle text-bg-primary m-3"></i>
                             <h3>Perks</h3>
                             <p>A full-time position <br/>Attractive salary package.</p>
                         </div>
                         <div class="col-lg-3 text-center pt16 pb32">
-                            <i class="fa fa-2x fa-bar-chart rounded-circle bg-primary m-3"></i>
+                            <i class="fa fa-2x fa-bar-chart rounded-circle text-bg-primary m-3"></i>
                             <h3>Trainings</h3>
                             <p>12 days / year, including <br/>6 of your choice.</p>
                         </div>
                         <div class="col-lg-3 text-center pt16 pb32">
-                            <i class="fa fa-2x fa-futbol-o rounded-circle bg-primary m-3"></i>
+                            <i class="fa fa-2x fa-futbol-o rounded-circle text-bg-primary m-3"></i>
                             <h3>Sport Activity</h3>
                             <p>Play any sport with colleagues, <br/>the bill is covered.</p>
                         </div>
                         <div class="col-lg-3 text-center pt16 pb32">
-                            <i class="fa fa-2x fa-coffee rounded-circle bg-primary m-3"></i>
+                            <i class="fa fa-2x fa-coffee rounded-circle text-bg-primary m-3"></i>
                             <h3>Eat &amp; Drink</h3>
                             <p>Fruit, coffee and <br/>snacks provided.</p>
                         </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 07a23f546b9..2b1ebe3e52d 100644
--- a/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml
+++ b/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml
@@ -320,7 +320,7 @@
         <div class="container">
             <div class="row">
                 <div class="col-lg-4 s_col_no_bgcolor pt16 pb16" data-name="Box">
-                    <div class="card bg-primary">
+                    <div class="card text-bg-primary">
                         <h4 class="card-header">Responsibilities</h4>
                         <ul class="list-group list-group-flush">
                             <li class="list-group-item">Lead the entire sales cycle</li>
@@ -332,7 +332,7 @@
                     </div>
                 </div>
                 <div class="col-lg-4 s_col_no_bgcolor pt16 pb16" data-name="Box">
-                    <div class="card bg-primary">
+                    <div class="card text-bg-primary">
                         <h4 class="card-header">Must Have</h4>
                         <ul class="list-group list-group-flush">
                             <li class="list-group-item">Bachelor Degree or Higher</li>
@@ -344,7 +344,7 @@
                     </div>
                 </div>
                 <div class="col-lg-4 s_col_no_bgcolor pt16 pb16" data-name="Box">
-                    <div class="card bg-primary">
+                    <div class="card text-bg-primary">
                         <h4 class="card-header">Nice to have</h4>
                         <ul class="list-group list-group-flush">
                             <li class="list-group-item">Experience in writing online content</li>
@@ -397,22 +397,22 @@
             </p>
             <div class="row pt16">
                 <div class="col-lg-3 text-center pt16 pb32">
-                    <i class="fa fa-2x fa-gift rounded-circle bg-primary m-3"></i>
+                    <i class="fa fa-2x fa-gift rounded-circle text-bg-primary m-3"></i>
                     <h3>Perks</h3>
                     <p>A full-time position <br/>Attractive salary package.</p>
                 </div>
                 <div class="col-lg-3 text-center pt16 pb32">
-                    <i class="fa fa-2x fa-bar-chart rounded-circle bg-primary m-3"></i>
+                    <i class="fa fa-2x fa-bar-chart rounded-circle text-bg-primary m-3"></i>
                     <h3>Trainings</h3>
                     <p>12 days / year, including <br/>6 of your choice.</p>
                 </div>
                 <div class="col-lg-3 text-center pt16 pb32">
-                    <i class="fa fa-2x fa-futbol-o rounded-circle bg-primary m-3"></i>
+                    <i class="fa fa-2x fa-futbol-o rounded-circle text-bg-primary m-3"></i>
                     <h3>Sport Activity</h3>
                     <p>Play any sport with colleagues, <br/>the bill is covered.</p>
                 </div>
                 <div class="col-lg-3 text-center pt16 pb32">
-                    <i class="fa fa-2x fa-coffee rounded-circle bg-primary m-3"></i>
+                    <i class="fa fa-2x fa-coffee rounded-circle text-bg-primary m-3"></i>
                     <h3>Eat &amp; Drink</h3>
                     <p>Fruit, coffee and <br/>snacks provided.</p>
                 </div>