[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
This commit is contained in:
Romeo Fragomeli
2022-07-07 13:30:22 +02:00
parent 06b03ba5ef
commit a10d6bb9eb
8 changed files with 69 additions and 69 deletions
+1 -1
View File
@@ -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')"/>
@@ -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>
+3 -3
View File
@@ -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"/>
@@ -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">
@@ -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>
@@ -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>
@@ -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>
@@ -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>