diff --git a/addons/account/static/src/scss/account_dashboard.scss b/addons/account/static/src/scss/account_dashboard.scss
index 63fa1d72e35..0e7158f9b54 100644
--- a/addons/account/static/src/scss/account_dashboard.scss
+++ b/addons/account/static/src/scss/account_dashboard.scss
@@ -35,15 +35,15 @@
             font-weight: 500;
 
             .o_account_dashboard_index {
-                color: gray('900');
+                color: map-get($grays, '900');
             }
 
             &.o_action_done {
-                color: gray('900');
-                background-color: gray('200');
+                color: map-get($grays, '900');
+                background-color: map-get($grays, '200');
 
                 &:after {
-                    border-left-color: gray('200');
+                    border-left-color: map-get($grays, '200');
                 }
 
                 .fa-check {
@@ -54,7 +54,7 @@
             &:last-of-type {
                 margin-left: $o-horizontal-padding;
                 padding-left: $o-horizontal-padding*.5;
-                border-left: 1px solid gray('300');
+                border-left: 1px solid map-get($grays, '300');
             }
         }
     }
diff --git a/addons/account/static/src/scss/account_reconciliation.scss b/addons/account/static/src/scss/account_reconciliation.scss
index 582f76996cb..c23023b1b7e 100644
--- a/addons/account/static/src/scss/account_reconciliation.scss
+++ b/addons/account/static/src/scss/account_reconciliation.scss
@@ -113,7 +113,7 @@
 
         .cell_action {
             width: 15px;
-            color: gray('700');
+            color: map-get($grays, '700');
             background: #fff;
             border: 0;
             text-align: center;
diff --git a/addons/account/static/src/xml/account_journal_activity.xml b/addons/account/static/src/xml/account_journal_activity.xml
index 9d5dbf4d97f..149d6390986 100644
--- a/addons/account/static/src/xml/account_journal_activity.xml
+++ b/addons/account/static/src/xml/account_journal_activity.xml
@@ -10,7 +10,7 @@
                         <t t-esc="activity.name"/>
                     </a>
                 </div>
-                <div class="col-4 text-right">
+                <div class="col-4 text-end">
                     <span><t t-esc="activity.date"/></span>
                 </div>
             </div>
diff --git a/addons/account/static/src/xml/account_payment.xml b/addons/account/static/src/xml/account_payment.xml
index 17ceeb7c5e1..26b497f0f08 100644
--- a/addons/account/static/src/xml/account_payment.xml
+++ b/addons/account/static/src/xml/account_payment.xml
@@ -6,7 +6,7 @@
         <div>
             <t t-if="outstanding">
                 <div>
-                    <strong class="float-left" id="outstanding" t-esc="title"/>
+                    <strong class="float-start" id="outstanding" t-esc="title"/>
                 </div>
             </t>
             <table style="width:100%;">
@@ -20,7 +20,7 @@
                                t-att-data-id="line.id"
                                style="margin-right: 0px; padding-left: 5px; padding-right: 5px;"
                                href="#"
-                               data-toggle="tooltip">Add</a>
+                               data-bs-toggle="tooltip">Add</a>
                         </td>
                         <td style="max-width: 11em;">
                             <a t-att-title="line.date"
@@ -28,21 +28,21 @@
                                class="oe_form_field btn btn-link open_account_move"
                                t-att-move-id="line.move_id"
                                style="margin-right: 5px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding-left: 0px; width:100%; text-align:left;"
-                               data-toggle="tooltip"
+                               data-bs-toggle="tooltip"
                                t-att-payment-id="account_payment_id"
                                t-esc="line.journal_name"/>
                         </td>
                     </t>
                     <t t-if="!outstanding">
                         <td>
-                           <a role="button" tabindex="0" class="js_payment_info fa fa-info-circle" t-att-index="line.index" style="margin-right:5px;" aria-label="Info" title="Journal Entry Info" data-toggle="tooltip"></a>
+                           <a role="button" tabindex="0" class="js_payment_info fa fa-info-circle" t-att-index="line.index" style="margin-right:5px;" aria-label="Info" title="Journal Entry Info" data-bs-toggle="tooltip"></a>
                         </td>
                         <td t-if="!line.is_exchange">
-                            <i class="o_field_widget text-left o_payment_label">Paid on <t t-esc="line.date"></t></i>
+                            <i class="o_field_widget text-start o_payment_label">Paid on <t t-esc="line.date"></t></i>
                         </td>
                         <td t-if="line.is_exchange" colspan="2">
-                            <i class="o_field_widget text-left text-muted text-left">
-                                <span class="oe_form_field oe_form_field_float oe_form_field_monetary font-weight-bold">
+                            <i class="o_field_widget text-start text-muted text-start">
+                                <span class="oe_form_field oe_form_field_float oe_form_field_monetary fw-bold">
                                     <t t-if="line.position === 'before'">
                                         <t t-esc="line.currency"/>
                                     </t>
@@ -102,8 +102,8 @@
                 </tr>
             </table>
         </div>
-        <button class="btn btn-sm btn-primary js_unreconcile_payment float-left" t-att-partial-id="partial_id" t-att-payment-id="payment_id" t-att-move-id="move_id" style="margin-top:5px; margin-bottom:5px;" groups="account.group_account_invoice">Unreconcile</button>
-        <button class="btn btn-sm btn-secondary js_open_payment float-right" t-att-payment-id="account_payment_id" t-att-move-id="move_id" style="margin-top:5px; margin-bottom:5px;">View</button>
+        <button class="btn btn-sm btn-primary js_unreconcile_payment float-start" t-att-partial-id="partial_id" t-att-payment-id="payment_id" t-att-move-id="move_id" style="margin-top:5px; margin-bottom:5px;" groups="account.group_account_invoice">Unreconcile</button>
+        <button class="btn btn-sm btn-secondary js_open_payment float-end" t-att-payment-id="account_payment_id" t-att-move-id="move_id" style="margin-top:5px; margin-bottom:5px;">View</button>
     </t>
 
 </templates>
diff --git a/addons/account/views/account_account_views.xml b/addons/account/views/account_account_views.xml
index 907c8452a5e..be70ce6fe6c 100644
--- a/addons/account/views/account_account_views.xml
+++ b/addons/account/views/account_account_views.xml
@@ -103,7 +103,7 @@
                     <field name="allowed_journal_ids" optional="hide" widget="many2many_tags"/>
                     <field name="currency_id" options="{'no_create': True}" groups="base.group_multi_currency"/>
                     <field name="company_id" options="{'no_create': True}" groups="base.group_multi_company"/>
-                    <button name="action_read_account" type="object" string="Setup" class="float-right btn-secondary"/>
+                    <button name="action_read_account" type="object" string="Setup" class="float-end btn-secondary"/>
                 </tree>
             </field>
         </record>
@@ -123,8 +123,8 @@
                                     <div class="col-6">
                                         <strong><field name="name"/></strong>
                                     </div>
-                                    <div class="col-6 text-right">
-                                        <span class="badge badge-pill"><t t-esc="record.code.value"/></span>
+                                    <div class="col-6 text-end">
+                                        <span class="badge rounded-pill"><t t-esc="record.code.value"/></span>
                                     </div>
                                 </div>
                                 <div>
diff --git a/addons/account/views/account_analytic_default_view.xml b/addons/account/views/account_analytic_default_view.xml
index 379136cf677..42ae72a86d5 100644
--- a/addons/account/views/account_analytic_default_view.xml
+++ b/addons/account/views/account_analytic_default_view.xml
@@ -63,7 +63,7 @@
                                 <div t-if="record.date_start.value"><i class="fa fa-calendar"></i> From <field name="date_start"/> <t t-if="record.date_stop.value">to <field name="date_stop"/></t></div>
                                 <div t-if="record.product_id.value"><strong>Product</strong> <field name="product_id"/> </div>
                                 <div t-if="record.partner_id.value"><strong>Customer</strong> <field name="partner_id"/> </div>
-                                <div class="float-right">
+                                <div class="float-end">
                                     <field name="user_id" widget="many2one_avatar_user"/>
                                 </div>
                             </div>
diff --git a/addons/account/views/account_journal_dashboard_view.xml b/addons/account/views/account_journal_dashboard_view.xml
index 9b45fc41f57..f3fdd2f9641 100644
--- a/addons/account/views/account_journal_dashboard_view.xml
+++ b/addons/account/views/account_journal_dashboard_view.xml
@@ -221,7 +221,7 @@
                             <div class="col-6 position-relative">
                                 <field name="show_on_dashboard" widget="boolean_favorite" />
                             </div>
-                            <div class="col-6 text-right mt-1">
+                            <div class="col-6 text-end mt-1">
                                 <a class="dropdown-item" t-if="widget.editable" type="edit">Configuration</a>
                             </div>
                         </div>
@@ -237,10 +237,10 @@
                             <field name="json_activity_data" widget="kanban_vat_activity"/>
                             <t t-if="dashboard.number_to_check > 0">
                                 <div class="row">
-                                    <div class="col overflow-hidden text-left">
+                                    <div class="col overflow-hidden text-start">
                                         <a type="object" name="open_action" context="{'action_name': 'action_move_journal_line', 'search_default_to_check': True}"><t t-esc="dashboard.number_to_check"/> to check</a>
                                     </div>
-                                    <div class="col-auto text-right">
+                                    <div class="col-auto text-end">
                                         <span><t t-esc="dashboard.to_check_balance"/></span>
                                     </div>
                                 </div>
@@ -272,27 +272,27 @@
                         <!-- On the right, show other common informations/actions -->
                         <div id="dashboard_bank_cash_right" class="col-12 col-sm-7 o_kanban_primary_right">
                             <div class="row" t-if="dashboard.nb_lines_bank_account_balance > 0">
-                                <div id="dashboard_bank_cash_balance" class="col overflow-hidden text-left">
+                                <div id="dashboard_bank_cash_balance" class="col overflow-hidden text-start">
                                     <span title="Balance in General Ledger">Balance in GL</span>
                                 </div>
-                                <div class="col-auto text-right">
+                                <div class="col-auto text-end">
                                     <span><t t-esc="dashboard.account_balance"/></span>
                                 </div>
                             </div>
                             <div class="row" t-if="dashboard.nb_lines_outstanding_pay_account_balance > 0">
-                                <div id="dashboard_bank_cash_outstanding_balance" class="col overflow-hidden text-left">
+                                <div id="dashboard_bank_cash_outstanding_balance" class="col overflow-hidden text-start">
                                     <span title="Outstanding Payments/Receipts">Outstanding Payments/Receipts</span>
                                 </div>
-                                <div class="col-auto text-right">
+                                <div class="col-auto text-end">
                                     <span><t t-esc="dashboard.outstanding_pay_account_balance"/></span>
                                 </div>
                             </div>
                             <t t-if="dashboard.has_at_least_one_statement and dashboard.account_balance != dashboard.last_balance">
                                 <div class="row" name="latest_statement">
-                                    <div class="col overflow-hidden text-left">
+                                    <div class="col overflow-hidden text-start">
                                         <span title="Latest Statement">Latest Statement</span>
                                     </div>
-                                    <div class="col-auto text-right">
+                                    <div class="col-auto text-end">
                                         <span><t t-esc="dashboard.last_balance"/></span>
                                     </div>
                                 </div>
@@ -323,18 +323,18 @@
                         </div>
                         <div class="col-12 col-sm-7 o_kanban_primary_right">
                             <div class="row" t-if="dashboard.number_draft">
-                                <div class="col overflow-hidden text-left">
+                                <div class="col overflow-hidden text-start">
                                     <a type="object" name="open_action" context="{'search_default_draft': '1'}">
                                         <span t-if="journal_type == 'sale'" title="Invoices to Validate"><t t-esc="dashboard.number_draft"/> Invoices to Validate</span>
                                         <span t-if="journal_type == 'purchase'" title="Bills to Validate"><t t-esc="dashboard.number_draft"/> Bills to Validate</span>
                                     </a>
                                 </div>
-                                <div class="col-auto text-right">
+                                <div class="col-auto text-end">
                                     <span><t t-esc="dashboard.sum_draft"/></span>
                                 </div>
                             </div>
                             <div class="row" t-if="dashboard.number_waiting">
-                                <div class="col overflow-hidden text-left">
+                                <div class="col overflow-hidden text-start">
                                     <a type="object" t-if="journal_type == 'sale'" name="open_action"
                                     context="{'search_default_open':1, 'search_default_posted':1, 'search_default_partial': 1}" id="account_dashboard_sale_pay_link">
                                         <t t-esc="dashboard.number_waiting"/> Unpaid Invoices
@@ -345,27 +345,27 @@
                                         <t t-esc="dashboard.number_waiting"/> Bills to Pay
                                     </a>
                                 </div>
-                                <div class="col-auto text-right">
+                                <div class="col-auto text-end">
                                     <span><t t-esc="dashboard.sum_waiting"/></span>
                                 </div>
                             </div>
                             <div class="row" t-if="dashboard.number_late">
-                                <div class="col overflow-hidden text-left">
+                                <div class="col overflow-hidden text-start">
                                     <a type="object" name="open_action" context="{'search_default_late': '1'}">
                                         <span t-if="journal_type == 'sale'" title="Late Invoices"><t t-esc="dashboard.number_late"/> Late Invoices</span>
                                         <span t-if="journal_type == 'purchase'" title="Late Bills"><t t-esc="dashboard.number_late"/> Late Bills</span>
                                     </a>
                                 </div>
-                                <div class="col-auto text-right">
+                                <div class="col-auto text-end">
                                     <span><t t-esc="dashboard.sum_late"/></span>
                                 </div>
                             </div>
                             <t t-if="dashboard.number_to_check > 0">
                                 <div class="row">
-                                    <div class="col overflow-hidden text-left">
+                                    <div class="col overflow-hidden text-start">
                                         <a type="object" name="open_action" context="{'search_default_to_check': True}"><t t-esc="dashboard.number_to_check"/> to check</a>
                                     </div>
-                                    <div class="col-auto text-right">
+                                    <div class="col-auto text-end">
                                         <span><t t-esc="dashboard.to_check_balance"/></span>
                                     </div>
                                 </div>
diff --git a/addons/account/views/account_journal_views.xml b/addons/account/views/account_journal_views.xml
index fa58e3f94cd..37b6b40619a 100644
--- a/addons/account/views/account_journal_views.xml
+++ b/addons/account/views/account_journal_views.xml
@@ -184,7 +184,7 @@
                                         <strong><field name="name"/></strong>
                                     </div>
                                     <div class="col-6">
-                                        <span class="float-right"><field name="type"/></span>
+                                        <span class="float-end"><field name="type"/></span>
                                     </div>
                                 </div>
                             </div>
diff --git a/addons/account/views/account_move_views.xml b/addons/account/views/account_move_views.xml
index 95ec7400ad0..a0fc2ad1def 100644
--- a/addons/account/views/account_move_views.xml
+++ b/addons/account/views/account_move_views.xml
@@ -101,7 +101,7 @@
                                     <div class="col-8">
                                         <field name="account_id"/>
                                     </div>
-                                    <strong t-if="record.date_maturity.raw_value" class="col-4 pl-0 text-right">
+                                    <strong t-if="record.date_maturity.raw_value" class="col-4 ps-0 text-end">
                                         <i class="fa fa-clock-o" aria-label="Date" role="img" title="Date"/> <field name="date_maturity"/>
                                     </strong>
                                 </div>
@@ -109,7 +109,7 @@
                                     <em class="col-10">
                                         <field name="name"/>
                                     </em>
-                                    <div class="col-2 text-right">
+                                    <div class="col-2 text-end">
                                         <img t-att-src="kanban_image('res.partner', 'avatar_128', record.partner_id.raw_value)" t-att-title="record.partner_id.value" t-att-alt="record.partner_id.value" class="oe_kanban_avatar o_image_24_cover"/>
                                     </div>
                                 </div>
@@ -117,7 +117,7 @@
                                     <div class="col-6">
                                         <field name="tax_ids" widget="many2many_tags"/>
                                     </div>
-                                    <div class="col-6 text-right">
+                                    <div class="col-6 text-end">
                                         <t t-if="record.debit.raw_value > 0">
                                             <field name="debit"/><span> (DR)</span>
                                         </t>
@@ -530,7 +530,7 @@
                                             </span>
                                         </strong>
                                     </div>
-                                    <div class="col-6 text-right">
+                                    <div class="col-6 text-end">
                                         <strong><i class="fa fa-clock-o" aria-label="Date" role="img" title="Date"/> <t t-esc="record.date.value"/></strong>
                                     </div>
                                 </div>
@@ -545,7 +545,7 @@
                                         <span><field name="currency_id" invisible="1"/></span>
                                     </div>
                                     <div class="col-6">
-                                        <span class="float-right">
+                                        <span class="float-end">
                                             <field name="state" widget="label_selection" options="{'classes': {'draft': 'default', 'posted': 'success'}}"/>
                                         </span>
                                     </div>
@@ -922,10 +922,10 @@
                                         <field name="price_unit"/>
                                         <templates>
                                             <t t-name="kanban-box">
-                                                <div t-attf-class="oe_kanban_card oe_kanban_global_click pl-0 pr-0 {{ record.display_type.raw_value ? 'o_is_' + record.display_type.raw_value : '' }}">
+                                                <div t-attf-class="oe_kanban_card oe_kanban_global_click ps-0 pe-0 {{ record.display_type.raw_value ? 'o_is_' + record.display_type.raw_value : '' }}">
                                                     <t t-if="!record.display_type.raw_value">
-                                                        <div class="row no-gutters">
-                                                            <div class="col-2 pr-3">
+                                                        <div class="row g-0">
+                                                            <div class="col-2 pe-3">
                                                                 <img t-att-src="kanban_image('product.product', 'image_128', record.product_id.raw_value)" t-att-title="record.product_id.value" t-att-alt="record.product_id.value" style="max-width: 100%;"/>
                                                             </div>
                                                             <div class="col-10">
@@ -934,7 +934,7 @@
                                                                         <strong t-esc="record.product_id.value"/>
                                                                     </div>
                                                                     <div class="col-auto">
-                                                                        <strong class="float-right text-right">
+                                                                        <strong class="float-end text-end">
                                                                             <t t-esc="record.price_subtotal.value" groups="account.group_show_line_subtotals_tax_excluded"/>
                                                                             <t t-esc="record.price_total.value" groups="account.group_show_line_subtotals_tax_included"/>
                                                                         </strong>
@@ -1121,7 +1121,7 @@
                                                 icon="fa-calendar"
                                                 string="Cut-Off"
                                                 aria-label="Change Period"
-                                                class="float-right"
+                                                class="float-end"
                                                 attrs="{'invisible': [('account_internal_group', 'not in', ('income', 'expense'))], 'column_invisible': ['|', ('parent.move_type', '=', 'entry'), ('parent.state', '!=', 'posted')]}"
                                                 context="{'hide_automatic_options': 1, 'default_action': 'change_period'}"/>
 
diff --git a/addons/account/views/account_payment_view.xml b/addons/account/views/account_payment_view.xml
index 4cd09b0f4a7..edf3b77e093 100644
--- a/addons/account/views/account_payment_view.xml
+++ b/addons/account/views/account_payment_view.xml
@@ -66,7 +66,7 @@
                                     <div class="col-6">
                                         <strong><span><field name="name"/></span></strong>
                                     </div>
-                                    <div class="col-6 text-right">
+                                    <div class="col-6 text-end">
                                         <strong><i class="fa fa-clock-o" role="img" aria-label="Date" title="Date"/> <t t-esc="record.date.value"/></strong>
                                     </div>
                                 </div>
@@ -81,7 +81,7 @@
                                         <field name="currency_id" invisible="1"/>
                                     </div>
                                     <div class="col-6">
-                                        <span class="float-right">
+                                        <span class="float-end">
                                             <field name="state" widget="label_selection" options="{'classes': {'draft': 'secondary', 'sent': 'success'}}"/>
                                         </span>
                                     </div>
diff --git a/addons/account/views/account_portal_templates.xml b/addons/account/views/account_portal_templates.xml
index a1c500185e0..25dda0c4e1f 100644
--- a/addons/account/views/account_portal_templates.xml
+++ b/addons/account/views/account_portal_templates.xml
@@ -39,7 +39,7 @@
                     <th>Invoice Date</th>
                     <th class='d-none d-md-table-cell'>Due Date</th>
                     <th class="text-center">Status</th>
-                    <th class="text-right">Amount Due</th>
+                    <th class="text-end">Amount Due</th>
                 </tr>
             </thead>
             <tbody>
@@ -55,19 +55,19 @@
                         <td class='d-none d-md-table-cell'><span t-field="invoice.invoice_date_due"/></td>
                         <td class="tx_status text-center">
                             <t t-if="invoice.state == 'posted' and invoice.payment_state not in ('in_payment', 'paid', 'reversed')">
-                                <span class="badge badge-pill badge-info"><i class="fa fa-fw fa-clock-o" aria-label="Opened" title="Opened" role="img"></i><span class="d-none d-md-inline"> Waiting for Payment</span></span>
+                                <span class="badge rounded-pill text-bg-info"><i class="fa fa-fw fa-clock-o" aria-label="Opened" title="Opened" role="img"></i><span class="d-none d-md-inline"> Waiting for Payment</span></span>
                             </t>
                             <t t-if="invoice.state == 'posted' and invoice.payment_state in ('paid', 'in_payment')">
-                                <span class="badge badge-pill badge-success"><i class="fa fa-fw fa-check" aria-label="Paid" title="Paid" role="img"></i><span class="d-none d-md-inline"> Paid</span></span>
+                                <span class="badge rounded-pill text-bg-success"><i class="fa fa-fw fa-check" aria-label="Paid" title="Paid" role="img"></i><span class="d-none d-md-inline"> Paid</span></span>
                             </t>
                             <t t-if="invoice.state == 'posted' and invoice.payment_state == 'reversed'">
-                                <span class="badge badge-pill badge-success"><i class="fa fa-fw fa-check" aria-label="Reversed" title="Reversed" role="img"></i><span class="d-none d-md-inline"> Reversed</span></span>
+                                <span class="badge rounded-pill text-bg-success"><i class="fa fa-fw fa-check" aria-label="Reversed" title="Reversed" role="img"></i><span class="d-none d-md-inline"> Reversed</span></span>
                             </t>
                             <t t-if="invoice.state == 'cancel'">
-                                <span class="badge badge-pill badge-warning"><i class="fa fa-fw fa-remove" aria-label="Cancelled" title="Cancelled" role="img"></i><span class="d-none d-md-inline"> Cancelled</span></span>
+                                <span class="badge rounded-pill text-bg-warning"><i class="fa fa-fw fa-remove" aria-label="Cancelled" title="Cancelled" role="img"></i><span class="d-none d-md-inline"> Cancelled</span></span>
                             </t>
                         </td>
-                        <td class="text-right"><span t-esc="-invoice.amount_residual if invoice.move_type == 'out_refund' else invoice.amount_residual" t-options='{"widget": "monetary", "display_currency": invoice.currency_id}'/></td>
+                        <td class="text-end"><span t-esc="-invoice.amount_residual if invoice.move_type == 'out_refund' else invoice.amount_residual" t-options='{"widget": "monetary", "display_currency": invoice.currency_id}'/></td>
                     </tr>
                 </t>
             </tbody>
@@ -99,7 +99,7 @@
                         <ul class="list-group list-group-flush flex-wrap flex-row flex-lg-column">
                             <li class="list-group-item flex-grow-1">
                                 <div class="o_download_pdf btn-toolbar flex-sm-nowrap">
-                                    <div class="btn-group  flex-grow-1 mr-1 mb-1">
+                                    <div class="btn-group  flex-grow-1 me-1 mb-1">
                                         <a class="btn btn-secondary btn-block o_download_btn" t-att-href="invoice.get_portal_url(report_type='pdf', download=True)" title="Download"><i class="fa fa-download"/> Download</a>
                                     </div>
                                     <div class="btn-group flex-grow-1 mb-1">
@@ -117,10 +117,10 @@
                                     </t>
                                 </strong></div>
                                 <div class="row">
-                                    <div class="col flex-grow-0 pr-2">
+                                    <div class="col flex-grow-0 pe-2">
                                         <img class="rounded-circle mt-1 o_portal_contact_img" t-att-src="image_data_uri(invoice.invoice_user_id.avatar_1024)" alt="Contact"/>
                                     </div>
-                                    <div class="col pl-0">
+                                    <div class="col ps-0">
                                         <span t-field="invoice.invoice_user_id" t-options='{"widget": "contact", "fields": ["name", "phone"], "no_marker": True}'/>
                                         <a href="#discussion" class="small"><i class="fa fa-fw fa-comments"/><b>Send message</b></a>
                                     </div>
@@ -154,7 +154,7 @@
     <template id="portal_invoice_error" name="Invoice error/warning display">
         <div class="row mr16">
             <div t-attf-class="'col-lg-12 mr16 ml16 alert alert-dismissable' #{'alert-danger' if error else 'alert-warning'}" role="alert">
-                <a href="#" class="close" data-dismiss="alert" aria-label="close" title="close">×</a>
+                <a href="#" class="close" data-bs-dismiss="alert" aria-label="close" title="close">×</a>
                 <t t-if="error == 'generic'" name="generic">
                     There was an error processing this page.
                 </t>
@@ -165,7 +165,7 @@
     <template id="portal_invoice_success" name="Invoice success display">
         <div class="row mr16">
             <div class="col-lg-12 mr16 ml16 alert alert-dismissable alert-success" role="status">
-                <a href="#" class="close" data-dismiss="alert" aria-label="close" title="close">×</a>
+                <a href="#" class="close" data-bs-dismiss="alert" aria-label="close" title="close">×</a>
             </div>
         </div>
     </template>
diff --git a/addons/account/views/account_tax_views.xml b/addons/account/views/account_tax_views.xml
index d87c77c20fc..1edd43ebc54 100644
--- a/addons/account/views/account_tax_views.xml
+++ b/addons/account/views/account_tax_views.xml
@@ -75,9 +75,9 @@
                                     <div class="col-6">
                                         <strong><span><t t-esc="record.name.value"/></span></strong>
                                     </div>
-                                    <div class="col-6 text-right">
-                                        <span class="badge badge-pill"><t t-esc="record.type_tax_use.value"/></span>
-                                        <span class="badge badge-pill"><t t-esc="record.tax_scope.value"/></span>
+                                    <div class="col-6 text-end">
+                                        <span class="badge rounded-pill"><t t-esc="record.type_tax_use.value"/></span>
+                                        <span class="badge rounded-pill"><t t-esc="record.tax_scope.value"/></span>
                                     </div>
                                 </div>
                             </div>
diff --git a/addons/account/views/bill_preview_template.xml b/addons/account/views/bill_preview_template.xml
index 0811881b677..b342ba0fad3 100644
--- a/addons/account/views/bill_preview_template.xml
+++ b/addons/account/views/bill_preview_template.xml
@@ -62,11 +62,11 @@
                                 <table class="table table-sm o_main_table" name="invoice_line_table" style="width: 100%;">
                                     <thead>
                                         <tr>
-                                            <th name="th_description" class="text-left"><span>Description</span></th>
-                                            <th name="th_quantity" class="text-right"><span>Quantity</span></th>
-                                            <th name="th_priceunit" class="text-right d-md-table-cell"><span>Unit Price</span></th>
-                                            <th name="th_taxes" class="text-left d-md-table-cell"><span>Taxes</span></th>
-                                            <th name="th_subtotal" class="text-right"><span>Amount</span></th>
+                                            <th name="th_description" class="text-start"><span>Description</span></th>
+                                            <th name="th_quantity" class="text-end"><span>Quantity</span></th>
+                                            <th name="th_priceunit" class="text-end d-md-table-cell"><span>Unit Price</span></th>
+                                            <th name="th_taxes" class="text-start d-md-table-cell"><span>Taxes</span></th>
+                                            <th name="th_subtotal" class="text-end"><span>Amount</span></th>
                                         </tr>
                                     </thead>
                                     <tbody class="invoice_tbody">
@@ -74,16 +74,16 @@
                                             <td name="account_invoice_line_name">
                                                 [FURN_8999] Three-Seat Sofa
                                             </td>
-                                            <td class="text-right">
+                                            <td class="text-end">
                                                 <span>5.00</span>
                                             </td>
-                                            <td class="text-right d-md-table-cell">
+                                            <td class="text-end d-md-table-cell">
                                                 <span class="text-nowrap">1,500.00</span>
                                             </td>
-                                            <td class="text-left d-md-table-cell">
+                                            <td class="text-start d-md-table-cell">
                                                 <span>Tax 0%</span>
                                             </td>
-                                            <td class="text-right o_price_total">
+                                            <td class="text-end o_price_total">
                                                 <span class="text-nowrap">$ <span class="oe_currency_value">7,500.00</span></span>
                                             </td>
                                         </tr>
@@ -91,16 +91,16 @@
                                             <td name="account_invoice_line_name">
                                                 [FURN_8220] Four Person Desk
                                             </td>
-                                            <td class="text-right">
+                                            <td class="text-end">
                                                 <span>5.00</span>
                                             </td>
-                                            <td class="text-right d-md-table-cell">
+                                            <td class="text-end d-md-table-cell">
                                                 <span class="text-nowrap">2,350.00</span>
                                             </td>
-                                            <td class="text-left d-md-table-cell">
+                                            <td class="text-start d-md-table-cell">
                                                 <span>Tax 0%</span>
                                             </td>
-                                            <td class="text-right o_price_total">
+                                            <td class="text-end o_price_total">
                                                 <span class="text-nowrap">$ <span class="oe_currency_value">11,750.00</span></span>
                                             </td>
                                         </tr>
@@ -112,13 +112,13 @@
                                         <table class="table table-sm" style="page-break-inside: avoid; width:100%">
                                             <tbody><tr class="border-black o_subtotal" style="">
                                                 <td><strong>Subtotal</strong></td>
-                                                <td class="text-right">
+                                                <td class="text-end">
                                                     <span>$ <span class="oe_currency_value">19,250.00</span></span>
                                                 </td>
                                             </tr>
                                             <tr class="border-black o_total">
                                                 <td><strong>Total</strong></td>
-                                                <td class="text-right">
+                                                <td class="text-end">
                                                     <span class="text-nowrap">$ <span class="oe_currency_value">19,250.00</span></span>
                                                 </td>
                                             </tr>
diff --git a/addons/account/views/product_view.xml b/addons/account/views/product_view.xml
index 45e715891a0..f60d533589c 100644
--- a/addons/account/views/product_view.xml
+++ b/addons/account/views/product_view.xml
@@ -73,7 +73,7 @@
                     <field name="taxes_id" widget="many2many_tags" context="{'default_type_tax_use':'sale', 'search_default_sale': 1, 'search_default_service': type == 'service', 'search_default_goods': type == 'consu'}"/>
                 </xpath>
                 <xpath expr="//div[@name='pricing']" position="inside">
-                    <span class="ml-2"/><field name="tax_string"/>
+                    <span class="ms-2"/><field name="tax_string"/>
                 </xpath>
                 <group name="bill" position="inside">
                     <field name="supplier_taxes_id" widget="many2many_tags" context="{'default_type_tax_use':'purchase', 'search_default_purchase': 1, 'search_default_service': type == 'service', 'search_default_goods': type == 'consu'}"/>
diff --git a/addons/account/views/report_invoice.xml b/addons/account/views/report_invoice.xml
index 2bae85c2bc5..99a31cd6c12 100644
--- a/addons/account/views/report_invoice.xml
+++ b/addons/account/views/report_invoice.xml
@@ -88,14 +88,14 @@
                         <table class="table table-sm o_main_table" name="invoice_line_table">
                             <thead>
                                 <tr>
-                                    <th name="th_description" class="text-left"><span>Description</span></th>
-                                    <th name="th_quantity" class="text-right"><span>Quantity</span></th>
-                                    <th name="th_priceunit" t-attf-class="text-right {{ 'd-none d-md-table-cell' if report_type == 'html' else '' }}"><span>Unit Price</span></th>
-                                    <th name="th_price_unit" t-if="display_discount" t-attf-class="text-right {{ 'd-none d-md-table-cell' if report_type == 'html' else '' }}">
+                                    <th name="th_description" class="text-start"><span>Description</span></th>
+                                    <th name="th_quantity" class="text-end"><span>Quantity</span></th>
+                                    <th name="th_priceunit" t-attf-class="text-end {{ 'd-none d-md-table-cell' if report_type == 'html' else '' }}"><span>Unit Price</span></th>
+                                    <th name="th_price_unit" t-if="display_discount" t-attf-class="text-end {{ 'd-none d-md-table-cell' if report_type == 'html' else '' }}">
                                         <span>Disc.%</span>
                                     </th>
-                                    <th name="th_taxes" t-attf-class="text-left {{ 'd-none d-md-table-cell' if report_type == 'html' else '' }}"><span>Taxes</span></th>
-                                    <th name="th_subtotal" class="text-right">
+                                    <th name="th_taxes" t-attf-class="text-start {{ 'd-none d-md-table-cell' if report_type == 'html' else '' }}"><span>Taxes</span></th>
+                                    <th name="th_subtotal" class="text-end">
                                         <span groups="account.group_show_line_subtotals_tax_excluded">Amount</span>
                                         <span groups="account.group_show_line_subtotals_tax_included">Total Price</span>
                                     </th>
@@ -109,23 +109,23 @@
                                     <t t-set="current_subtotal" t-value="current_subtotal + line.price_subtotal" groups="account.group_show_line_subtotals_tax_excluded"/>
                                     <t t-set="current_subtotal" t-value="current_subtotal + line.price_total" groups="account.group_show_line_subtotals_tax_included"/>
 
-                                    <tr t-att-class="'bg-200 font-weight-bold o_line_section' if line.display_type == 'line_section' else 'font-italic o_line_note' if line.display_type == 'line_note' else ''">
+                                    <tr t-att-class="'bg-200 fw-bold o_line_section' if line.display_type == 'line_section' else 'fst-italic o_line_note' if line.display_type == 'line_note' else ''">
                                         <t t-if="not line.display_type" name="account_invoice_line_accountable">
                                             <td name="account_invoice_line_name"><span t-field="line.name" t-options="{'widget': 'text'}"/></td>
-                                            <td class="text-right">
+                                            <td class="text-end">
                                                 <span t-field="line.quantity"/>
                                                 <span t-field="line.product_uom_id"  groups="uom.group_uom"/>
                                             </td>
-                                            <td t-attf-class="text-right {{ 'd-none d-md-table-cell' if report_type == 'html' else '' }}">
+                                            <td t-attf-class="text-end {{ 'd-none d-md-table-cell' if report_type == 'html' else '' }}">
                                                 <span class="text-nowrap" t-field="line.price_unit"/>
                                             </td>
-                                            <td t-if="display_discount" t-attf-class="text-right {{ 'd-none d-md-table-cell' if report_type == 'html' else '' }}">
+                                            <td t-if="display_discount" t-attf-class="text-end {{ 'd-none d-md-table-cell' if report_type == 'html' else '' }}">
                                                 <span class="text-nowrap" t-field="line.discount"/>
                                             </td>
-                                            <td t-attf-class="text-left {{ 'd-none d-md-table-cell' if report_type == 'html' else '' }}">
+                                            <td t-attf-class="text-start {{ 'd-none d-md-table-cell' if report_type == 'html' else '' }}">
                                                 <span t-esc="', '.join(map(lambda x: (x.description or x.name), line.tax_ids))" id="line_tax_ids"/>
                                             </td>
-                                            <td class="text-right o_price_total">
+                                            <td class="text-end o_price_total">
                                                 <span class="text-nowrap" t-field="line.price_subtotal" groups="account.group_show_line_subtotals_tax_excluded"/>
                                                 <span class="text-nowrap" t-field="line.price_total" groups="account.group_show_line_subtotals_tax_included"/>
                                             </td>
@@ -145,7 +145,7 @@
                                     </tr>
 
                                     <t t-if="current_section and (line_last or lines[line_index+1].display_type == 'line_section')">
-                                        <tr class="is-subtotal text-right">
+                                        <tr class="is-subtotal text-end">
                                             <td colspan="99">
                                                 <strong class="mr16">Subtotal</strong>
                                                 <span
@@ -161,7 +161,7 @@
 
                     <div class="clearfix mb-4">
                         <div id="total" class="row">
-                            <div t-attf-class="#{'col-6' if report_type != 'html' else 'col-sm-7 col-md-6'} ml-auto">
+                            <div t-attf-class="#{'col-6' if report_type != 'html' else 'col-sm-7 col-md-6'} ms-auto">
                                 <table class="table table-sm" style="page-break-inside: avoid;">
 
                                         <!--Tax totals-->
@@ -175,9 +175,9 @@
                                             <t t-foreach="payments_vals" t-as="payment_vals">
                                                 <tr t-if="payment_vals['is_exchange'] == 0">
                                                     <td>
-                                                        <i class="oe_form_field text-right oe_payment_label">Paid on <t t-esc="payment_vals['date']" t-options='{"widget": "date"}'/></i>
+                                                        <i class="oe_form_field text-end oe_payment_label">Paid on <t t-esc="payment_vals['date']" t-options='{"widget": "date"}'/></i>
                                                     </td>
-                                                    <td class="text-right">
+                                                    <td class="text-end">
                                                         <span t-esc="payment_vals['amount']" t-options='{"widget": "monetary", "display_currency": o.currency_id}'/>
                                                     </td>
                                                 </tr>
@@ -185,7 +185,7 @@
                                             <t t-if="len(payments_vals) > 0">
                                                 <tr class="border-black">
                                                     <td><strong>Amount Due</strong></td>
-                                                    <td class="text-right">
+                                                    <td class="text-end">
                                                         <span t-field="o.amount_residual"/>
                                                     </td>
                                                 </tr>
@@ -252,7 +252,7 @@
                 <tr class="border-black o_subtotal">
                     <td><strong t-esc="subtotal['name']"/></td>
 
-                    <td class="text-right">
+                    <td class="text-end">
                         <span
                             t-att-class="oe_subtotal_footer_separator"
                             t-esc="subtotal['formatted_amount']"
@@ -267,7 +267,7 @@
             <!--Total amount with all taxes-->
             <tr class="border-black o_total">
                 <td><strong>Total</strong></td>
-                <td class="text-right">
+                <td class="text-end">
                     <span t-esc="tax_totals['formatted_amount_total']"/>
                 </td>
             </tr>
@@ -290,13 +290,13 @@
                                 <t t-esc="amount_by_group['formatted_tax_group_base_amount']"/>
                             </span>
                         </td>
-                        <td class="text-right o_price_total">
+                        <td class="text-end o_price_total">
                             <span class="text-nowrap" t-esc="amount_by_group['formatted_tax_group_amount']"/>
                         </td>
                     </t>
                     <t t-else="">
                         <td><span class="text-nowrap" t-esc="amount_by_group['tax_group_name']"/></td>
-                        <td class="text-right o_price_total">
+                        <td class="text-end o_price_total">
                             <span class="text-nowrap" t-esc="amount_by_group['formatted_tax_group_amount']" />
                         </td>
                     </t>
diff --git a/addons/account/views/report_payment_receipt_templates.xml b/addons/account/views/report_payment_receipt_templates.xml
index c746f7697db..7500f6e8ab1 100644
--- a/addons/account/views/report_payment_receipt_templates.xml
+++ b/addons/account/views/report_payment_receipt_templates.xml
@@ -39,7 +39,7 @@
                             <th><span>Invoice Date</span></th>
                             <th><span>Invoice Number</span></th>
                             <th><span>Reference</span></th>
-                            <th class="text-right"><span>Amount</span></th>
+                            <th class="text-end"><span>Amount</span></th>
                         </tr>
                     </thead>
                     <tbody>
@@ -51,7 +51,7 @@
                                     <td><span t-field="inv.invoice_date"/></td>
                                     <td><span t-field="inv.name"/></td>
                                     <td><span t-field="inv.ref"/></td>
-                                    <td class="text-right"><span t-field="inv.amount_total"/></td>
+                                    <td class="text-end"><span t-field="inv.amount_total"/></td>
                                 </tr>
                                 <!-- PAYMENTS/REVERSALS -->
                                 <tr t-foreach="inv._get_reconciled_invoices_partials()[0]" t-as="par">
@@ -60,14 +60,14 @@
                                     <td><span t-field="payment.date"/></td>
                                     <td><span t-field="payment.name"/></td>
                                     <td><span t-field="payment.ref"/></td>
-                                    <td class="text-right">-<span t-esc="amount" t-options="{'widget': 'monetary', 'display_currency': o.currency_id}"/></td>
+                                    <td class="text-end">-<span t-esc="amount" t-options="{'widget': 'monetary', 'display_currency': o.currency_id}"/></td>
                                 </tr>
                                 <!-- BALANCE -->
                                 <tr>
                                     <td/>
                                     <td><strong>Due Amount for <span t-field="inv.name"/></strong></td>
                                     <td/>
-                                    <td class="text-right"><strong><span t-field="inv.amount_residual"/></strong></td>
+                                    <td class="text-end"><strong><span t-field="inv.amount_residual"/></strong></td>
                                 </tr>
                             </t>
                         </t>
diff --git a/addons/account/views/report_statement.xml b/addons/account/views/report_statement.xml
index fc6a39978b2..4dc9f1855d5 100644
--- a/addons/account/views/report_statement.xml
+++ b/addons/account/views/report_statement.xml
@@ -6,10 +6,10 @@
                 <t t-foreach="docs" t-as="o">
                     <t t-call="web.internal_layout">
                         <div class="page">
-                            <div class="border border-top-0 border-right-0 border-left-0 border-info">
+                            <div class="border border-top-0 border-end-0 border-start-0 border-info">
                                 <div class="row">
                                     <div class="col-12">
-                                        <h4 class="text-right w-100">
+                                        <h4 class="text-end w-100">
                                             <strong>
                                                 <span t-if="o.journal_id.type == 'bank'">Bank Statement</span>
                                                 <span t-else="">Cash Statement</span>
@@ -49,10 +49,10 @@
                                 </div>
                             </div>
 
-                            <table class="table table-lg m-0 table-borderless border border-right-0 border-left-0 border-info">
+                            <table class="table table-lg m-0 table-borderless border border-end-0 border-start-0 border-info">
                                 <tbody>
                                     <tr>
-                                        <td class="pt-2 pb-2 pl-0 pr-0">
+                                        <td class="pt-2 pb-2 ps-0 pe-0">
                                             <table class="table table-borderless m-0">
                                                 <tr>
                                                     <td class="p-0 w-25">
@@ -63,7 +63,7 @@
                                                             <span t-esc="o.line_ids and o.line_ids.sorted(lambda line: line.date)[0].date" t-options='{"widget": "date"}'/>
                                                         </strong>
                                                     </td>
-                                                    <td class="text-right p-0">
+                                                    <td class="text-end p-0">
                                                         <strong>
                                                             <span t-field="o.balance_start"/>
                                                         </strong>
@@ -78,7 +78,7 @@
                                                             <span t-esc="o.line_ids and o.line_ids.sorted(lambda line: line.date)[-1].date" t-options='{"widget": "date"}'/>
                                                         </strong>
                                                     </td>
-                                                    <td class="text-right p-0">
+                                                    <td class="text-end p-0">
                                                         <strong>
                                                             <span t-field="o.balance_end_real"/>
                                                         </strong>
@@ -93,20 +93,20 @@
                             <table class="table table-borderless m-0">
                                 <tbody>
                                     <tr t-foreach="o.line_ids" t-as="line" class="pb-2">
-                                        <td class="pl-0 pr-0">
+                                        <td class="ps-0 pe-0">
                                             <table class="table table-borderless">
                                                 <tr>
                                                     <td class="p-0 w-25">
-                                                        <span class="d-block font-weight-bold" t-field="line.date"/>
+                                                        <span class="d-block fw-bold" t-field="line.date"/>
                                                     </td>
                                                     <td class="p-0">
-                                                        <span class="d-block font-weight-bold" t-if="line.partner_id" t-field="line.partner_id"/>
+                                                        <span class="d-block fw-bold" t-if="line.partner_id" t-field="line.partner_id"/>
                                                         <span class="d-block" t-if="line.partner_bank_id" t-field="line.partner_bank_id"/>
                                                         <span class="d-block" t-if="line.payment_ref" t-field="line.payment_ref"/>
                                                         <span class="d-block" t-if=" not is_html_empty(line.narration)" t-field="line.narration"/>
                                                     </td>
-                                                    <td class="text-right p-0">
-                                                        <span class="d-block font-weight-bold" t-field="line.amount"/>
+                                                    <td class="text-end p-0">
+                                                        <span class="d-block fw-bold" t-field="line.amount"/>
                                                     </td>
                                                 </tr>
                                             </table>
diff --git a/addons/account/views/res_config_settings_views.xml b/addons/account/views/res_config_settings_views.xml
index b5dded05fc9..6e37c5f2042 100644
--- a/addons/account/views/res_config_settings_views.xml
+++ b/addons/account/views/res_config_settings_views.xml
@@ -329,7 +329,7 @@
                                                 <button name="action_update_terms" icon="fa-arrow-right" type="object" string="Update Terms" class="btn-link"/>
                                             </div>
                                             <field name="preview_ready" invisible="1"/>
-                                            <div class="mt4 ml-1" attrs="{'invisible': [('preview_ready', '=', False)]}">
+                                            <div class="mt4 ms-1" attrs="{'invisible': [('preview_ready', '=', False)]}">
                                                 <a class="btn-link" href="/terms" role="button">
                                                     <i class="fa fa-arrow-right"></i>
                                                     Preview
diff --git a/addons/account/views/terms_template.xml b/addons/account/views/terms_template.xml
index 19552c590ac..ed888dc956b 100644
--- a/addons/account/views/terms_template.xml
+++ b/addons/account/views/terms_template.xml
@@ -3,9 +3,9 @@
     <template id="account.account_terms_conditions_setting_banner" name="Account Terms and Conditions Setting Banner">
         <div id="terms_conditions" t-ignore="true" class="text-center">
             <span>This is a preview of your Terms &amp; Conditions.</span>
-            <a t-att-href="backend_url"><i class="fa fa-arrow-right mr-1"/>Back to settings</a>
+            <a t-att-href="backend_url"><i class="fa fa-arrow-right me-1"/>Back to settings</a>
         </div>
-        <button type="button" class="close" data-dismiss="alert" aria-label="Close"> &#215; </button>
+        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
     </template>
 
     <template id="account_terms_conditions_page" name="Terms &amp; Conditions">
diff --git a/addons/account/wizard/account_invoice_send_views.xml b/addons/account/wizard/account_invoice_send_views.xml
index 1f80df4f877..f37c5006cf4 100644
--- a/addons/account/wizard/account_invoice_send_views.xml
+++ b/addons/account/wizard/account_invoice_send_views.xml
@@ -29,7 +29,7 @@
                         <field name="is_email" />
                         <b><label for="is_email"/></b>
                     </div>
-                    <div class="text-left d-inline-block mr8" attrs="{'invisible': ['|', ('is_email','=', False), ('invoice_without_email', '=', False)]}">
+                    <div class="text-start d-inline-block mr8" attrs="{'invisible': ['|', ('is_email','=', False), ('invoice_without_email', '=', False)]}">
                         <field name="invoice_without_email" class="mr4"/>
                     </div>
                     <div name="mail_form"  attrs="{'invisible': [('is_email', '=', False)]}">
diff --git a/addons/account/wizard/setup_wizards_view.xml b/addons/account/wizard/setup_wizards_view.xml
index b8b4b53ef28..546094a060e 100644
--- a/addons/account/wizard/setup_wizards_view.xml
+++ b/addons/account/wizard/setup_wizards_view.xml
@@ -81,7 +81,7 @@
                     <field name="tax_ids" optional="hide" widget="many2many_tags"/>
                     <field name="tag_ids" optional="hide" widget="many2many_tags"/>
                     <field name="allowed_journal_ids" optional="hide" widget="many2many_tags"/>
-                    <button name="action_read_account" type="object" string="Setup" class="float-right btn-secondary"/>
+                    <button name="action_read_account" type="object" string="Setup" class="float-end btn-secondary"/>
                 </tree>
             </field>
         </record>
diff --git a/addons/account_payment/views/account_portal_templates.xml b/addons/account_payment/views/account_portal_templates.xml
index a48dff7333c..20f85ad2873 100644
--- a/addons/account_payment/views/account_portal_templates.xml
+++ b/addons/account_payment/views/account_portal_templates.xml
@@ -17,22 +17,22 @@
             <t t-set="last_tx" t-value="invoice.get_portal_last_transaction()"/>
             <td class="tx_status text-center">
                 <t t-if="invoice.state == 'posted' and invoice.payment_state in ('not_paid', 'partial') and (last_tx.state not in ['pending', 'authorized', 'done', 'cancel'] or (last_tx.state == 'pending' and last_tx.provider in ('none', 'transfer')))">
-                    <span class="badge badge-pill badge-info"><i class="fa fa-fw fa-clock-o"></i><span class="d-none d-md-inline"> Waiting for Payment</span></span>
+                    <span class="badge rounded-pill text-bg-info"><i class="fa fa-fw fa-clock-o"></i><span class="d-none d-md-inline"> Waiting for Payment</span></span>
                 </t>
                 <t t-if="invoice.state == 'posted' and last_tx.state == 'authorized'">
-                    <span class="badge badge-pill badge-primary"><i class="fa fa-fw fa-check"/><span class="d-none d-md-inline"> Authorized</span></span>
+                    <span class="badge rounded-pill text-bg-primary"><i class="fa fa-fw fa-check"/><span class="d-none d-md-inline"> Authorized</span></span>
                 </t>
                 <t t-if="invoice.state == 'posted' and last_tx.state == 'pending' and last_tx.provider not in ('none', 'transfer')">
-                  <span class="badge badge-pill badge-warning"><span class="d-none d-md-inline"> Pending</span></span>
+                  <span class="badge rounded-pill text-bg-warning"><span class="d-none d-md-inline"> Pending</span></span>
                 </t>
                 <t t-if="invoice.state == 'posted' and invoice.payment_state in ('paid', 'in_payment') or last_tx.state == 'done'">
-                    <span class="badge badge-pill badge-success"><i class="fa fa-fw fa-check"></i><span class="d-none d-md-inline"> Paid</span></span>
+                    <span class="badge rounded-pill text-bg-success"><i class="fa fa-fw fa-check"></i><span class="d-none d-md-inline"> Paid</span></span>
                 </t>
                 <t t-if="invoice.state == 'posted' and invoice.payment_state == 'reversed'">
-                    <span class="badge badge-pill badge-success"><i class="fa fa-fw fa-check"></i><span class="d-none d-md-inline"> Reversed</span></span>
+                    <span class="badge rounded-pill text-bg-success"><i class="fa fa-fw fa-check"></i><span class="d-none d-md-inline"> Reversed</span></span>
                 </t>
                 <t t-if="invoice.state == 'cancel'">
-                    <span class="badge badge-pill badge-danger"><i class="fa fa-fw fa-remove"></i><span class="d-none d-md-inline"> Cancelled</span></span>
+                    <span class="badge rounded-pill text-bg-danger"><i class="fa fa-fw fa-remove"></i><span class="d-none d-md-inline"> Cancelled</span></span>
                 </t>
             </td>
         </xpath>
@@ -45,10 +45,10 @@
                     <div class="modal-content">
                         <div class="modal-header">
                             <h3 class="modal-title">Pay with</h3>
-                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button>
+                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                         </div>
                         <div class="modal-body">
-                            <div t-if="acquirers or tokens" id="payment_method" class="text-left col-md-13">
+                            <div t-if="acquirers or tokens" id="payment_method" class="text-start col-md-13">
                                 <t t-call="payment.checkout"/>
                             </div>
                             <div t-else="" class="alert alert-warning">
@@ -69,7 +69,7 @@
             <div class="d-grid">
                 <a href="#" t-if="invoice.state == 'posted' and invoice.payment_state in ('not_paid', 'partial') and invoice.amount_total and invoice.move_type == 'out_invoice' and (pending_manual_txs or not tx_ids or invoice.amount_paid &lt; invoice.amount_total)"
 
-                    class="btn btn-primary mb-2" data-toggle="modal" data-target="#pay_with">
+                    class="btn btn-primary mb-2" data-bs-toggle="modal" data-bs-target="#pay_with">
                     <i class="fa fa-fw fa-arrow-circle-right"/> Pay Now
                 </a>
                 <div t-if="tx_ids and not pending_manual_txs and not invoice.amount_residual and invoice.payment_state not in ('paid', 'in_payment')" class="alert alert-info py-1 mb-2" >
diff --git a/addons/analytic/views/analytic_account_views.xml b/addons/analytic/views/analytic_account_views.xml
index e1e5f83f93b..5a377d182cf 100644
--- a/addons/analytic/views/analytic_account_views.xml
+++ b/addons/analytic/views/analytic_account_views.xml
@@ -375,7 +375,7 @@
                                     <div class="col-6">
                                         <strong><span><t t-esc="record.name.value"/></span></strong>
                                     </div>
-                                    <div class="col-6 text-right">
+                                    <div class="col-6 text-end">
                                         <strong><t t-esc="record.date.value"/></strong>
                                     </div>
                                 </div>
@@ -384,7 +384,7 @@
                                         <span><t t-esc="record.account_id.value"/></span>
                                     </div>
                                     <div class="col-6">
-                                        <span class="float-right text-right">
+                                        <span class="float-end text-end">
                                             <field name="amount" widget="monetary"/>
                                         </span>
                                     </div>
diff --git a/addons/auth_oauth/static/src/scss/auth_oauth.scss b/addons/auth_oauth/static/src/scss/auth_oauth.scss
index 3225d521ace..0659d7561f9 100644
--- a/addons/auth_oauth/static/src/scss/auth_oauth.scss
+++ b/addons/auth_oauth/static/src/scss/auth_oauth.scss
@@ -9,7 +9,8 @@
 
     .o_custom_icon {
         margin: 0 0.15em;
-        @include size(1em);
+        width: 1em;
+        height: 1em;
         border: 3px solid #875A7B;
         border-radius: 100%;
         transform: translateY(2px);
diff --git a/addons/auth_oauth/views/auth_oauth_templates.xml b/addons/auth_oauth/views/auth_oauth_templates.xml
index 390a787cf7d..c59a50643f8 100644
--- a/addons/auth_oauth/views/auth_oauth_templates.xml
+++ b/addons/auth_oauth/views/auth_oauth_templates.xml
@@ -3,7 +3,7 @@
         <template id="providers" name="OAuth Providers">
             <t t-if="len(providers) &gt; 0">
                 <em t-attf-class="d-block text-center text-muted small my-#{len(providers) if len(providers) &lt; 3 else 3}">- or -</em>
-                <div class="o_auth_oauth_providers list-group mt-1 mb-1 text-left">
+                <div class="o_auth_oauth_providers list-group mt-1 mb-1 text-start">
                     <a t-foreach="providers" t-as="p" class="list-group-item list-group-item-action py-2" t-att-href="p['auth_link']">
                         <i t-att-class="p['css_class']"/>
                         <t t-esc="p['body']"/>
diff --git a/addons/auth_signup/views/auth_signup_login_templates.xml b/addons/auth_signup/views/auth_signup_login_templates.xml
index 5c00f9e70f9..620cb9d4af4 100644
--- a/addons/auth_signup/views/auth_signup_login_templates.xml
+++ b/addons/auth_signup/views/auth_signup_login_templates.xml
@@ -65,7 +65,7 @@
                     <p class="alert alert-success" t-if="message" role="status">
                         <t t-esc="message"/>
                     </p>
-                    <a href="/web/login" class="btn btn-link btn-sm float-left" role="button">Back to Login</a>
+                    <a href="/web/login" class="btn btn-link btn-sm float-start" role="button">Back to Login</a>
                 </div>
 
                 <form class="oe_reset_password_form" role="form" method="post" t-if="not message">
diff --git a/addons/auth_signup/views/res_users_views.xml b/addons/auth_signup/views/res_users_views.xml
index 5e2383ccb48..76163e4d4f8 100644
--- a/addons/auth_signup/views/res_users_views.xml
+++ b/addons/auth_signup/views/res_users_views.xml
@@ -19,7 +19,7 @@
 
                 <xpath expr="//sheet" position="before">
                     <div class="alert alert-success text-center o_form_header" attrs="{'invisible': [('signup_valid', '!=', True)]}" role="status">
-                        <a class="close" data-dismiss="alert" href="#" aria-label="Close"><i title="Close" class="small fa fa-times"/></a>
+                        <a class="close" data-bs-dismiss="alert" href="#" aria-label="Close"><i title="Close" class="small fa fa-times"/></a>
                         <div attrs="{'invisible': [('state', '!=', 'active')]}">
                             <strong>A password reset has been requested for this user. An email containing the following link has been sent:</strong>
                         </div>
diff --git a/addons/auth_totp/views/templates.xml b/addons/auth_totp/views/templates.xml
index d5c6a12ea28..3803af26026 100644
--- a/addons/auth_totp/views/templates.xml
+++ b/addons/auth_totp/views/templates.xml
@@ -15,7 +15,7 @@
                     <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
                     <input type="hidden" name="redirect" t-att-value="redirect"/>
                     <div class="form-group">
-                        <label class="font-weight-bold" for="totp_token">Authentication Code</label>
+                        <label class="fw-bold" for="totp_token">Authentication Code</label>
                         <input id="totp_token" name="totp_token" class="form-control mb-2"
                                 autocomplete="off" inputmode="numeric" autofocus="autofocus" required="required" placeholder="e.g. 123456"/>
                     </div>
diff --git a/addons/auth_totp/wizard/auth_totp_wizard_views.xml b/addons/auth_totp/wizard/auth_totp_wizard_views.xml
index e5af62ebb6a..8d59494630f 100644
--- a/addons/auth_totp/wizard/auth_totp_wizard_views.xml
+++ b/addons/auth_totp/wizard/auth_totp_wizard_views.xml
@@ -8,7 +8,7 @@
                 <sheet>
                     <div class="o_auth_totp_enable_2FA container">
                         <div class="mb-3 w-100">
-                            <h3 class="font-weight-bold">Authenticator App Setup</h3>
+                            <h3 class="fw-bold">Authenticator App Setup</h3>
                             <ul>
                                 <div class="d-md-none d-block">
                                     <li>
@@ -42,24 +42,24 @@
                             <div class="text-center d-none d-md-block">
                                 <field name="qrcode" readonly="True" widget="image"/>
 
-                                <h3 class="font-weight-bold"><a data-toggle="collapse"
+                                <h3 class="fw-bold"><a data-bs-toggle="collapse"
                                    href="#collapseTotpSecret" role="button" aria-expanded="false"
                                    aria-controls="collapseTotpSecret">Cannot scan it?</a></h3>
                                 <div class="collapse" id="collapseTotpSecret">
-                                  <field name="secret" widget="CopyClipboardChar" readonly="1" class="mb-3 pl-3"/>
+                                  <field name="secret" widget="CopyClipboardChar" readonly="1" class="mb-3 ps-3"/>
                                 </div>
                             </div>
 
                             <!-- Mobile Version -->
                             <div class="text-center d-block d-md-none">
-                                <field name="secret" widget="CopyClipboardChar" readonly="1" class="mb-3 pl-3"/>
+                                <field name="secret" widget="CopyClipboardChar" readonly="1" class="mb-3 ps-3"/>
                             </div>
 
-                            <h3 class="font-weight-bold">Enter your six-digit code below</h3>
+                            <h3 class="fw-bold">Enter your six-digit code below</h3>
                             <div class="mt-2">
                                 <label for="code" class="px-0">Verification Code</label>
                                 <div class="d-flex align-items-center">
-                                    <field required="True" name="code" autocomplete="off" class="px-0 mr-2" placeholder="e.g. 123456"/>
+                                    <field required="True" name="code" autocomplete="off" class="px-0 me-2" placeholder="e.g. 123456"/>
                                 </div>
                             </div>
                         </div>
diff --git a/addons/base_import/static/src/legacy/js/import_action.js b/addons/base_import/static/src/legacy/js/import_action.js
index eb3cf32bdd5..b095a257ed4 100644
--- a/addons/base_import/static/src/legacy/js/import_action.js
+++ b/addons/base_import/static/src/legacy/js/import_action.js
@@ -608,7 +608,7 @@ var DataImport = AbstractAction.extend({
                 },
                 // For each choice, if field is required, make it bold in the list
                 formatResultCssClass: function (object) {
-                    if (object.required) { return "font-weight-bold text-decoration-underline"; }
+                    if (object.required) { return "fw-bold text-decoration-underline"; }
                     return "";
                 },
                 placeholder: _t('To import, select a field...'),
diff --git a/addons/base_import/static/src/legacy/scss/base_import.scss b/addons/base_import/static/src/legacy/scss/base_import.scss
index 12a32d6bd0c..9f8c96c89a2 100644
--- a/addons/base_import/static/src/legacy/scss/base_import.scss
+++ b/addons/base_import/static/src/legacy/scss/base_import.scss
@@ -49,7 +49,7 @@
         overflow: auto;
         label {
             font-weight: normal;
-            &.custom-control-label {
+            &.form-check-label {
                 left: 20px;
             }
         }
diff --git a/addons/base_import/static/src/legacy/xml/base_import.xml b/addons/base_import/static/src/legacy/xml/base_import.xml
index e0e739f0218..cee5fa67b4c 100644
--- a/addons/base_import/static/src/legacy/xml/base_import.xml
+++ b/addons/base_import/static/src/legacy/xml/base_import.xml
@@ -61,11 +61,11 @@
     <t t-name="ImportView.preview">
         <thead>
             <tr class="oe_import_grid-header">
-                <td class="oe_import_grid-cell border-0 font-weight-bold" style="width: 20%;">
+                <td class="oe_import_grid-cell border-0 fw-bold" style="width: 20%;">
                     <span class="o_single_line_text" title="File Column">File Column</span></td>
-                <td class="oe_import_grid-cell border-0 font-weight-bold" style="width: 15%;" >
+                <td class="oe_import_grid-cell border-0 fw-bold" style="width: 15%;" >
                     <span class="o_single_line_text" title="File Column">Odoo Field</span></td>
-                <td class="oe_import_grid-cell border-0 font-weight-bold">
+                <td class="oe_import_grid-cell border-0 fw-bold">
                     <span class="o_single_line_text" title="File Column">Comments</span></td>
             </tr>
         </thead>
@@ -73,11 +73,11 @@
             <t t-set="columns" t-value="headers || preview"/>
             <tr t-if="columns" t-foreach="columns" t-as="column" class="oe_import_grid-row">
                 <td class="oe_import_grid-cell oe_import_name_cell">
-                    <span class="o_import_header_name o_single_line_text font-weight-bold" t-att-title="column">
+                    <span class="o_import_header_name o_single_line_text fw-bold" t-att-title="column">
                         <span t-if="column" t-esc="column"/>
                         <span t-else="">Untitled</span>
                     </span>
-                    <span t-if="options['has_headers']" class="font-italic small o_import_preview">
+                    <span t-if="options['has_headers']" class="fst-italic small o_import_preview">
                         <t t-esc="preview[column_index][0]"/>
                     </span>
                 </td>
@@ -220,7 +220,7 @@
                     field corresponding to the column. This makes imports
                     simpler especially when the file has many columns.</p>
             </div>
-            <div class="o_import_partial_alert alert alert-warning d-none mx-2 my-2 font-weight-bold">
+            <div class="o_import_partial_alert alert alert-warning d-none mx-2 my-2 fw-bold">
                 Click 'Resume' to proceed with the import, resuming at line
                 <span class="o_import_partial_count">0</span>.<br/>
                 You can test or reload your file before resuming the import.
@@ -239,9 +239,9 @@
             <div class="oe_import_with_file">
                 <h4>Imported file</h4>
                 <div class="mb-2 d-flex align-items-center">
-                    <i class="fa fa-file white mr-2"></i>
-                    <div id="oe_imported_file" class="font-italic truncate"></div>
-                    <span id="oe_imported_file_extension" class="font-italic"></span>
+                    <i class="fa fa-file white me-2"></i>
+                    <div id="oe_imported_file" class="fst-italic truncate"></div>
+                    <span id="oe_imported_file_extension" class="fst-italic"></span>
                 </div>
 
                 <div class="oe_import_has_multiple_sheets flex-column mt-2">
@@ -249,9 +249,9 @@
                     <input class="oe_import_sheet oe_import_dropdown" id="oe_import_sheet"/>
                 </div>
 
-                <input type="checkbox" class="oe_import_has_header custom-control-input"
+                <input type="checkbox" class="oe_import_has_header form-check-input"
                        id="oe_import_has_header" checked="checked"/>
-                <label class="custom-control-label" for="oe_import_has_header">Use first row as header</label>
+                <label class="form-check-label" for="oe_import_has_header">Use first row as header</label>
 
                 <div class="o_import_formatting">
                     <h4 class="mt-3">Formatting</h4>
@@ -270,15 +270,15 @@
 
                 <div class="o_import_batch">
                     <h4 class="mt-3">Batch Import</h4>
-                    <div class="o_import_batch_alert font-weight-bold d-none pb-2">
+                    <div class="o_import_batch_alert fw-bold d-none pb-2">
                         The file will be imported by batches
                     </div>
                     <div class="d-flex">
-                        <div class="oe_import_options oe_import_batch_limit w-50 pr-1">
+                        <div class="oe_import_options oe_import_batch_limit w-50 pe-1">
                             <label class="mb-1" for="oe_import_batch_limit">Batch limit</label>
                             <input class="w-100" id="oe_import_batch_limit" value="2000"/>
                         </div>
-                        <div class="oe_import_options w-50 pl-1" title="Warning: ignores the labels line, empty lines and
+                        <div class="oe_import_options w-50 ps-1" title="Warning: ignores the labels line, empty lines and
 lines composed only of empty cells">
                             <label class="mb-1" for="oe_import_row_start">Start at line</label>
                             <input class="w-100" id="oe_import_row_start" value="1"/>
@@ -299,16 +299,16 @@ lines composed only of empty cells">
                 <div class="oe_import_debug_option">
                     <h4 class="mt-3">Advanced</h4>
                     <div title="If the model uses openchatter, history tracking will set up subscriptions and send notifications during the import, but lead to a slower import.">
-                        <input type="checkbox" id="oe_import_tracking" class="custom-control-input"/>
-                        <label class="custom-control-label" for="oe_import_tracking">
+                        <input type="checkbox" id="oe_import_tracking" class="form-check-input"/>
+                        <label class="form-check-label" for="oe_import_tracking">
                             Track history during import
                         </label>
                     </div>
 
                     <div>
-                        <input type="checkbox" class="oe_import_advanced_mode custom-control-input" checked="checked"
+                        <input type="checkbox" class="oe_import_advanced_mode form-check-input" checked="checked"
                                id="oe_import_advanced_mode"/>
-                        <label class="custom-control-label" for="oe_import_advanced_mode">Allow matching with subfields</label>
+                        <label class="form-check-label" for="oe_import_advanced_mode">Allow matching with subfields</label>
                     </div>
                 </div>
 
@@ -337,7 +337,7 @@ lines composed only of empty cells">
                         <span>0%</span>
                     </div>
                 </div>
-                <a class="o_progress_stop_import ml-2" role="button"><i class="fa fa-close" aria-label="Stop Import"/></a>
+                <a class="o_progress_stop_import ms-2" role="button"><i class="fa fa-close" aria-label="Stop Import"/></a>
             </div>
         </div>
         <div t-else="">
diff --git a/addons/base_setup/static/src/xml/res_config_invite_users.xml b/addons/base_setup/static/src/xml/res_config_invite_users.xml
index 1e00ab09577..fb97e7b9642 100644
--- a/addons/base_setup/static/src/xml/res_config_invite_users.xml
+++ b/addons/base_setup/static/src/xml/res_config_invite_users.xml
@@ -10,7 +10,7 @@
         <t t-if="widget.pending_users.length">
             <p class="o_form_label pt-3">Pending Invitations:</p>
             <span t-foreach="widget.pending_users" t-as="pending">
-                <a href="#" class="badge badge-pill text-primary o_web_settings_user" t-att-data-user-id="pending[0]"> <t t-esc="pending[1]"/> </a>
+                <a href="#" class="badge rounded-pill text-primary o_web_settings_user" t-att-data-user-id="pending[0]"> <t t-esc="pending[1]"/> </a>
             </span>
             <t t-if="widget.pending_users.length &lt; widget.pending_count">
                 <br/>
diff --git a/addons/base_setup/views/res_config_settings_views.xml b/addons/base_setup/views/res_config_settings_views.xml
index 172838ed339..7980e79dd47 100644
--- a/addons/base_setup/views/res_config_settings_views.xml
+++ b/addons/base_setup/views/res_config_settings_views.xml
@@ -20,7 +20,7 @@
                                 <div class="col-12 col-lg-6 o_setting_box" id="active_user_setting">
                                     <div class="o_setting_right_pane">
                                         <span class="fa fa-lg fa-users" aria-label="Number of active users"/>
-                                        <field name='active_user_count' class="w-auto pl-3 font-weight-bold"/>
+                                        <field name='active_user_count' class="w-auto ps-3 fw-bold"/>
                                         <span class='o_form_label' attrs="{'invisible':[('active_user_count', '&gt;', '1')]}">
                                             Active User
                                         </span>
@@ -42,7 +42,7 @@
                                     <div class='o_setting_right_pane'>
                                         <!-- TODO This is not an ideal solution but it looks ok on the interface -->
                                         <div class="w-50">
-                                            <field name="language_count" class="w-auto pl-1 font-weight-bold"/>
+                                            <field name="language_count" class="w-auto ps-1 fw-bold"/>
                                             <span class='o_form_label' attrs="{'invisible':[('language_count', '&gt;', '1')]}">
                                                 Language
                                             </span>
@@ -67,7 +67,7 @@
                                 <div class="col-12 col-lg-6 o_setting_box" id="company_details_settings">
                                     <field name="company_id" invisible="1"/>
                                     <div class="o_setting_right_pane">
-                                        <field name="company_name" class="font-weight-bold"/>
+                                        <field name="company_name" class="fw-bold"/>
                                         <br/>
                                         <field name="company_informations" class="text-muted" style="width: 90%;"/>
                                         <br/>
@@ -95,7 +95,7 @@
                                 </div>
                                 <div class="col-12 col-lg-6 o_setting_box" id="companies_setting">
                                     <div class="o_setting_right_pane">
-                                        <field name='company_count' class="w-auto pl-1 font-weight-bold"/>
+                                        <field name='company_count' class="w-auto ps-1 fw-bold"/>
                                         <span class='o_form_label' attrs="{'invisible':[('company_count', '&gt;', '1')]}">
                                             Company
                                         </span>
@@ -136,7 +136,7 @@
                                         <div class="o_setting_right_pane" id="sms_settings">
                                             <div class="o_form_label">
                                             Send SMS
-                                            <a href="https://www.odoo.com/documentation/master/applications/marketing/sms_marketing/pricing/pricing_and_faq.html" title="Documentation" class="ml-1 o_doc_link" target="_blank"></a>
+                                            <a href="https://www.odoo.com/documentation/master/applications/marketing/sms_marketing/pricing/pricing_and_faq.html" title="Documentation" class="ms-1 o_doc_link" target="_blank"></a>
                                             </div>
                                             <div class="text-muted">
                                                 Send texts to your contacts
diff --git a/addons/board/static/src/board_controller.xml b/addons/board/static/src/board_controller.xml
index 6bcedfd3f85..7169e0c125e 100644
--- a/addons/board/static/src/board_controller.xml
+++ b/addons/board/static/src/board_controller.xml
@@ -35,9 +35,9 @@
                         <div class="o-dashboard-action mx-3 my-1" t-att-data-idx="action_index">
                             <h3 t-attf-class="o-dashboard-action-header {{action.title ? '' : 'oe_header_empty'}} p-2 m-2">
                                 <span> <t t-esc="action.title"/> </span>
-                                <span class="btn float-right p-1 text-muted" t-on-click="() => this.closeAction(column, action)"><i class="fa fa-close"/></span>
-                                <span class="btn float-right p-1 text-muted" t-if="!action.isFolded" t-on-click="() => this.toggleAction(action)"><i class="fa fa-window-minimize"/></span>
-                                <span class="btn float-right p-1 text-muted" t-if="action.isFolded"  t-on-click="() => this.toggleAction(action)"><i class="fa fa-window-maximize"/></span>
+                                <span class="btn float-end p-1 text-muted" t-on-click="() => this.closeAction(column, action)"><i class="fa fa-close"/></span>
+                                <span class="btn float-end p-1 text-muted" t-if="!action.isFolded" t-on-click="() => this.toggleAction(action)"><i class="fa fa-window-minimize"/></span>
+                                <span class="btn float-end p-1 text-muted" t-if="action.isFolded"  t-on-click="() => this.toggleAction(action)"><i class="fa fa-window-maximize"/></span>
                             </h3>
                             <BoardAction t-if="!action.isFolded" action="action" />
                         </div>
diff --git a/addons/calendar/data/mail_template_data.xml b/addons/calendar/data/mail_template_data.xml
index 4111503b309..188d0179d08 100644
--- a/addons/calendar/data/mail_template_data.xml
+++ b/addons/calendar/data/mail_template_data.xml
@@ -55,7 +55,7 @@
     </div>
     <table border="0" cellpadding="0" cellspacing="0"><tr>
         <td width="130px;">
-            <div style="border-top-left-radius: 3px; border-top-right-radius: 3px; font-size: 12px; border-collapse: separate; text-align: center; font-weight: bold; color: #ffffff; min-height: 18px; background-color: #875A7B; border: 1px solid #875A7B;">
+            <div style="border-top-start-radius: 3px; border-top-end-radius: 3px; font-size: 12px; border-collapse: separate; text-align: center; font-weight: bold; color: #ffffff; min-height: 18px; background-color: #875A7B; border: 1px solid #875A7B;">
                 <t t-out="format_datetime(dt=object.event_id.start, tz=object.mail_tz if not object.event_id.allday else None, dt_format='EEEE', lang_code=object.env.lang) or ''">Tuesday</t>
             </div>
             <div style="font-size: 48px; min-height: auto; font-weight: bold; text-align: center; color: #5F5F5F; background-color: #F8F8F8; border: 1px solid #875A7B;">
@@ -64,7 +64,7 @@
             <div style='font-size: 12px; text-align: center; font-weight: bold; color: #ffffff; background-color: #875A7B;'>
                 <t t-out="format_datetime(dt=object.event_id.start, tz=object.mail_tz if not object.event_id.allday else None, dt_format='MMMM y', lang_code=object.env.lang) or ''">May 2021</t>
             </div>
-            <div style="border-collapse: separate; color: #5F5F5F; text-align: center; font-size: 12px; border-bottom-right-radius: 3px; font-weight: bold ; border: 1px solid #875A7B; border-bottom-left-radius: 3px;">
+            <div style="border-collapse: separate; color: #5F5F5F; text-align: center; font-size: 12px; border-bottom-end-radius: 3px; font-weight: bold ; border: 1px solid #875A7B; border-bottom-start-radius: 3px;">
                 <t t-if="not object.event_id.allday">
                     <div>
                         <t t-out="format_time(time=object.event_id.start, tz=object.mail_tz, time_format='short', lang_code=object.env.lang) or ''">11:00 AM</t>
@@ -183,7 +183,7 @@
     </div>
     <table border="0" cellpadding="0" cellspacing="0"><tr>
         <td width="130px;">
-            <div style="border-top-left-radius: 3px; border-top-right-radius: 3px; font-size: 12px; border-collapse: separate; text-align: center; font-weight: bold; color: #ffffff; min-height: 18px; background-color: #875A7B; border: 1px solid #875A7B;">
+            <div style="border-top-start-radius: 3px; border-top-end-radius: 3px; font-size: 12px; border-collapse: separate; text-align: center; font-weight: bold; color: #ffffff; min-height: 18px; background-color: #875A7B; border: 1px solid #875A7B;">
                 <t t-out='format_datetime(dt=object.event_id.start, tz=object.mail_tz if not object.event_id.allday else None, dt_format="EEEE", lang_code=object.env.lang) or ""'>Tuesday</t>
             </div>
             <div style="font-size: 48px; min-height: auto; font-weight: bold; text-align: center; color: #5F5F5F; background-color: #F8F8F8; border: 1px solid #875A7B;">
@@ -192,7 +192,7 @@
             <div style='font-size: 12px; text-align: center; font-weight: bold; color: #ffffff; background-color: #875A7B;'>
                 <t t-out='format_datetime(dt=object.event_id.start, tz=object.mail_tz if not object.event_id.allday else None, dt_format="MMMM y", lang_code=object.env.lang) or ""'>May 2021</t>
             </div>
-            <div style="border-collapse: separate; color: #5F5F5F; text-align: center; font-size: 12px; border-bottom-right-radius: 3px; font-weight: bold; border: 1px solid #875A7B; border-bottom-left-radius: 3px;">
+            <div style="border-collapse: separate; color: #5F5F5F; text-align: center; font-size: 12px; border-bottom-end-radius: 3px; font-weight: bold; border: 1px solid #875A7B; border-bottom-start-radius: 3px;">
                  <t t-if="not object.event_id.allday">
                     <div>
                         <t t-out='format_time(time=object.event_id.start, tz=object.mail_tz, time_format="short", lang_code=object.env.lang) or ""'>11:00 AM</t>
@@ -284,7 +284,7 @@
     </div>
     <table border="0" cellpadding="0" cellspacing="0"><tr>
         <td width="130px;">
-            <div style="border-top-left-radius: 3px; border-top-right-radius: 3px; font-size: 12px; border-collapse: separate; text-align: center; font-weight: bold; color: #ffffff; min-height: 18px; background-color: #875A7B; border: 1px solid #875A7B;">
+            <div style="border-top-start-radius: 3px; border-top-end-radius: 3px; font-size: 12px; border-collapse: separate; text-align: center; font-weight: bold; color: #ffffff; min-height: 18px; background-color: #875A7B; border: 1px solid #875A7B;">
                 <t t-out='format_datetime(dt=object.event_id.start, tz=object.mail_tz if not object.event_id.allday else None, dt_format="EEEE", lang_code=object.env.lang) or ""'>Tuesday</t>
             </div>
             <div style="font-size: 48px; min-height: auto; font-weight: bold; text-align: center; color: #5F5F5F; background-color: #F8F8F8; border: 1px solid #875A7B;">
@@ -293,7 +293,7 @@
             <div style='font-size: 12px; text-align: center; font-weight: bold; color: #ffffff; background-color: #875A7B;'>
                 <t t-out='format_datetime(dt=object.event_id.start, tz=object.mail_tz if not object.event_id.allday else None, dt_format="MMMM y", lang_code=object.env.lang) or ""'>May 2021</t>
             </div>
-            <div style="border-collapse: separate; color: #5F5F5F; text-align: center; font-size: 12px; border-bottom-right-radius: 3px; font-weight: bold; border: 1px solid #875A7B; border-bottom-left-radius: 3px;">
+            <div style="border-collapse: separate; color: #5F5F5F; text-align: center; font-size: 12px; border-bottom-end-radius: 3px; font-weight: bold; border: 1px solid #875A7B; border-bottom-start-radius: 3px;">
                 <t t-if="not object.event_id.allday">
                     <div>
                         <t t-out='format_time(time=object.event_id.start, tz=object.mail_tz, time_format="short", lang_code=object.env.lang) or ""'>11:00 AM</t>
@@ -374,7 +374,7 @@
         <table border="0" cellpadding="0" cellspacing="0">
             <tr>
                 <td width="130px;">
-                    <div style="border-top-left-radius: 3px; border-top-right-radius: 3px; font-size: 12px; border-collapse: separate; text-align: center; font-weight: bold; color: #ffffff; min-height: 18px; background-color: #875A7B; border: 1px solid #875A7B;">
+                    <div style="border-top-start-radius: 3px; border-top-end-radius: 3px; font-size: 12px; border-collapse: separate; text-align: center; font-weight: bold; color: #ffffff; min-height: 18px; background-color: #875A7B; border: 1px solid #875A7B;">
                         <t t-out="format_datetime(dt=object.start, tz=mail_tz if not object.allday else None, dt_format='EEEE', lang_code=object.env.lang) "></t>
                     </div>
                     <div style="font-size: 48px; min-height: auto; font-weight: bold; text-align: center; color: #5F5F5F; background-color: #F8F8F8; border: 1px solid #875A7B;">
@@ -383,7 +383,7 @@
                     <div style='font-size: 12px; text-align: center; font-weight: bold; color: #ffffff; background-color: #875A7B;'>
                         <t t-out="format_datetime(dt=object.start, tz=mail_tz if not object.allday else None, dt_format='MMMM y', lang_code=object.env.lang)"></t>
                     </div>
-                    <div style="border-collapse: separate; color: #5F5F5F; text-align: center; font-size: 12px; border-bottom-right-radius: 3px; font-weight: bold; border: 1px solid #875A7B; border-bottom-left-radius: 3px;">
+                    <div style="border-collapse: separate; color: #5F5F5F; text-align: center; font-size: 12px; border-bottom-end-radius: 3px; font-weight: bold; border: 1px solid #875A7B; border-bottom-start-radius: 3px;">
                         <t t-if="not object.allday">
                             <div>
                                 <t t-out="format_time(time=object.start, tz=mail_tz, time_format='short', lang_code=object.env.lang)"></t>
diff --git a/addons/calendar/static/src/scss/calendar.scss b/addons/calendar/static/src/scss/calendar.scss
index 8fd245b8d76..dfa3b9752e3 100644
--- a/addons/calendar/static/src/scss/calendar.scss
+++ b/addons/calendar/static/src/scss/calendar.scss
@@ -2,7 +2,7 @@
     @extend .o_status;
 
     &.accepted {
-        background-color: theme-color('success');
+        background-color: map-get($theme-colors, 'success');
     }
 
     &.tentative {
@@ -10,7 +10,7 @@
     }
 
     &.declined {
-        background-color: theme-color('danger');
+        background-color: map-get($theme-colors, 'danger');
     }
 }
 
@@ -84,11 +84,11 @@
 }
 
 .o_attendee_border_accepted {
-    border-color: theme-color('success');
+    border-color: map-get($theme-colors, 'success');
 }
 .o_attendee_border_declined {
-    border-color: theme-color('danger');
+    border-color: map-get($theme-colors, 'danger');
 }
 .o_attendee_border_tentative {
-    border-color: theme-color('light');
+    border-color: map-get($theme-colors, 'light');
 }
diff --git a/addons/calendar/static/src/xml/base_calendar.xml b/addons/calendar/static/src/xml/base_calendar.xml
index f61321088dc..eb0dc0b464f 100644
--- a/addons/calendar/static/src/xml/base_calendar.xml
+++ b/addons/calendar/static/src/xml/base_calendar.xml
@@ -34,7 +34,7 @@
                         <span t-att-class="!meeting.allday and is_next_meeting ? 'o_meeting_filter o_meeting_bold' : 'o_meeting_filter'" t-att-data-res_model="activity.model" t-att-data-res_id="meeting.id" t-att-data-model_name="activity.name" t-att-title="meeting.name">
                             <span><t t-esc="meeting.name"/></span>
                         </span>
-                        <span t-if="meeting.start" class="float-right">
+                        <span t-if="meeting.start" class="float-end">
                             <t t-if="meeting.allday">All Day</t>
                             <t t-else=''>
                                 <t t-set="is_next_meeting" t-value="false"/>
@@ -49,8 +49,8 @@
 
     <t t-name="Calendar.attendee.status.popover" t-extend="CalendarView.event.popover">
         <t t-jquery=".o_cw_popover_delete" t-operation="after">
-            <div t-if="widget.displayAttendeeAnswerChoice()" class="btn-group o-calendar-attendee-status ml-2">
-                <a href="#" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <div t-if="widget.displayAttendeeAnswerChoice()" class="btn-group o-calendar-attendee-status ms-2">
+                <a href="#" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                     <i t-attf-class="fa fa-circle o-calendar-attendee-status-icon #{widget.selectedStatusInfo.color}"/> <span class="o-calendar-attendee-status-text" t-esc="widget.selectedStatusInfo.text"></span>
                 </a>
                 <div class="dropdown-menu overflow-hidden">
@@ -70,7 +70,7 @@
 
     <t t-name="Calendar.calendar-box">
         <div t-attf-class="#{record.is_highlighted ? 'o_event_hightlight' : ''} #{typeof color === 'number' ? _.str.sprintf('o_calendar_color_%s', color) : 'o_calendar_color_1'} fc-event o_event o_attendee_status_#{record.is_alone ? 'alone' : record.attendee_status} py-0" >
-            <div t-attf-class="#{record.attendee_status != 'accepted' ? 'font-weight-normal' : ''} o_event_title mr-2">
+            <div t-attf-class="#{record.attendee_status != 'accepted' ? 'fw-normal' : ''} o_event_title me-2">
                 <span t-if="record.is_alone" class="fa fa-exclamation-circle"/>
                 <t t-esc="record.display_name"/>
             </div>
diff --git a/addons/calendar/views/calendar_templates.xml b/addons/calendar/views/calendar_templates.xml
index 0f3e6d4e911..e37a4c34141 100644
--- a/addons/calendar/views/calendar_templates.xml
+++ b/addons/calendar/views/calendar_templates.xml
@@ -19,7 +19,7 @@
                     </div>
                     <div class="card-body">
                         <div class="clearfix mb16" t-if="attendee.state != 'needsAction'">
-                            <span class="float-right badge badge-info">
+                            <span class="float-end badge text-bg-info">
                                 <t t-if="attendee.state == 'accepted'">Yes I'm going.</t>
                                 <t t-if="attendee.state == 'declined'">No I'm not going.</t>
                                 <t t-if="attendee.state == 'tentative'">Tentative</t>
diff --git a/addons/calendar/views/calendar_views.xml b/addons/calendar/views/calendar_views.xml
index 3970d08913b..6f2b39f93d4 100644
--- a/addons/calendar/views/calendar_views.xml
+++ b/addons/calendar/views/calendar_views.xml
@@ -253,7 +253,7 @@
                                                 <field name="email" widget="email"/>
                                                 <span>Status: <field name="state" /></span>
 
-                                                <div class="text-right">
+                                                <div class="text-end">
                                                     <button name="do_tentative" states="needsAction,declined,accepted" string="Uncertain" type="object" class="btn fa fa-asterisk"/>
                                                     <button name="do_accept" states="needsAction,tentative,declined" string="Accept" type="object" class="btn fa fa-check text-success"/>
                                                     <button name="do_decline" states="needsAction,tentative,accepted" string="Decline" type="object" class="btn fa fa-times-circle text-danger"/>
diff --git a/addons/calendar/views/res_partner_views.xml b/addons/calendar/views/res_partner_views.xml
index dc49f50a005..98f8e2f2351 100644
--- a/addons/calendar/views/res_partner_views.xml
+++ b/addons/calendar/views/res_partner_views.xml
@@ -13,8 +13,8 @@
                 </field>
                 <xpath expr="//div[hasclass('oe_kanban_bottom_left')]" position="inside">
                     <a t-if="record.meeting_count.value>0" data-type="object" data-name="schedule_meeting"
-                       href="#" class="oe_kanban_action oe_kanban_action_a mr-1">
-                        <span class="badge badge-pill">
+                       href="#" class="oe_kanban_action oe_kanban_action_a me-1">
+                        <span class="badge rounded-pill">
                             <i class="fa fa-fw fa-calendar" aria-label="Meetings" role="img" title="Meetings"/>
                             <t t-out="record.meeting_count.value"/>
                         </span>
diff --git a/addons/crm/data/crm_lead_merge_template.xml b/addons/crm/data/crm_lead_merge_template.xml
index 029b5d41da9..90604b07d01 100644
--- a/addons/crm/data/crm_lead_merge_template.xml
+++ b/addons/crm/data/crm_lead_merge_template.xml
@@ -6,10 +6,10 @@
         <t t-foreach="opportunities" t-as="lead">
             <div>
                 <span>Merged the Lead/Opportunity</span>
-                <span class="font-weight-bold" t-field="lead.name"/>
+                <span class="fw-bold" t-field="lead.name"/>
                 <span>into this one.</span>
             </div>
-            <blockquote class="border-left" data-o-mail-quote="1">
+            <blockquote class="border-start" data-o-mail-quote="1">
                 <div t-if="lead.expected_revenue">
                     <span>Expected Revenues:</span>
                     <span t-if="lead.expected_revenue">
@@ -66,9 +66,9 @@
                 </div>
                 <div t-if="lead.tag_ids" name="tag_ids" class="d-flex flex-row">
                     Tags:
-                    <div class="ml-2 d-flex flex-row">
+                    <div class="ms-2 d-flex flex-row">
                         <div t-foreach="lead.tag_ids" t-as="tag" t-esc="tag.name"
-                            t-attf-class="badge badge-pill o_tag_color_#{tag.color} d-inline-block"/>
+                            t-attf-class="badge rounded-pill o_tag_color_#{tag.color} d-inline-block"/>
                     </div>
                 </div>
                 <div t-if="lead.user_id" class="mt-3">
@@ -83,7 +83,7 @@
                 <div>
                     <div class="mt-3"
                             t-if="lead.contact_name or lead.partner_name or lead.phone or lead.mobile or lead.email_from or lead.website">
-                        <div class="font-weight-bold">
+                        <div class="fw-bold">
                             Contact Details:
                         </div>
                         <div t-if="lead.contact_name">
@@ -115,7 +115,7 @@
                 <div class="mt-3"
                         t-if="lead.street or lead.street2 or lead.zip or lead.city or lead.state_id or lead.country_id"
                         name="address">
-                    <div class="font-weight-bold">
+                    <div class="fw-bold">
                         Address:
                     </div>
                     <div t-if="lead.street" t-field="lead.street"/>
@@ -127,7 +127,7 @@
                 </div>
                 <div class="mt-3" name="marketing"
                         t-if="lead.campaign_id or lead.medium_id or lead.source_id">
-                    <div class="font-weight-bold">
+                    <div class="fw-bold">
                         Marketing:
                     </div>
                     <div t-if="lead.campaign_id">
@@ -145,7 +145,7 @@
                     <div>
                         The contacts below have been added as followers of this lead
                         because they have been contacted less than 30 days ago on
-                        <span class="font-weight-bold" t-esc="lead.name"/>.
+                        <span class="fw-bold" t-esc="lead.name"/>.
                     </div>
                     <ul>
                       <li t-foreach="lead_followers" t-as="follower">
diff --git a/addons/crm/views/crm_lead_views.xml b/addons/crm/views/crm_lead_views.xml
index 2c1e97137b6..1ecd3951bdc 100644
--- a/addons/crm/views/crm_lead_views.xml
+++ b/addons/crm/views/crm_lead_views.xml
@@ -49,7 +49,7 @@
                         <widget name="web_ribbon" title="Won" attrs="{'invisible': [('probability', '&lt;', 100)]}" />
                         <div class="oe_title">
                             <h1><field class="o_text_overflow" name="name" placeholder="e.g. Product Pricing"/></h1>
-                            <h2 class="o_row no-gutters align-items-end">
+                            <h2 class="o_row g-0 align-items-end">
                                 <div class="col" attrs="{'invisible': [('type', '=', 'lead')]}">
                                     <label for="expected_revenue" class="oe_edit_only" />
                                     <div class="o_row">
@@ -61,7 +61,7 @@
                                 </div>
                                 <div class="col" attrs="{'invisible': [('type', '=', 'lead')]}" groups="crm.group_use_recurring_revenues">
                                     <div class="o_row">
-                                        <field name="recurring_revenue" class="pr-2 oe_inline" widget="monetary" options="{'currency_field': 'company_currency'}"/>
+                                        <field name="recurring_revenue" class="pe-2 oe_inline" widget="monetary" options="{'currency_field': 'company_currency'}"/>
                                     </div>
                                 </div>
                                 <div class="col" attrs="{'invisible': [('type', '=', 'lead')]}" groups="crm.group_use_recurring_revenues">
@@ -470,11 +470,11 @@
                         <field name="phone" string="Phone" />
                         <label for="expected_revenue"/>
                         <div class="o_row">
-                            <field name="expected_revenue" class="oe_inline mr-5" widget="monetary" options="{'currency_field': 'company_currency'}"/>
+                            <field name="expected_revenue" class="oe_inline me-5" widget="monetary" options="{'currency_field': 'company_currency'}"/>
                             <field name="priority" class="oe_inline" nolabel="1" widget="priority"/>
                         </div>
                         <div class="o_row" groups="crm.group_use_recurring_revenues">
-                            <field name="recurring_revenue" class="oe_inline pr-4" widget="monetary" options="{'currency_field': 'company_currency'}"/>
+                            <field name="recurring_revenue" class="oe_inline pe-4" widget="monetary" options="{'currency_field': 'company_currency'}"/>
                             <field name="recurring_plan" class="oe_inline" placeholder="E.g. Monthly"
                                    attrs="{'required': [('recurring_revenue', '!=', 0)]}" options="{'no_create': True, 'no_open': True}"/>
                         </div>
@@ -556,7 +556,7 @@
                                 </div>
 
                                 <div class="o_dropdown_kanban dropdown">
-                                    <a class="dropdown-toggle o-no-caret btn" role="button" data-toggle="dropdown" data-display="static" href="#" aria-label="Dropdown menu" title="Dropdown menu">
+                                    <a class="dropdown-toggle o-no-caret btn" role="button" data-bs-toggle="dropdown" data-bs-display="static" href="#" aria-label="Dropdown menu" title="Dropdown menu">
                                         <span class="fa fa-ellipsis-v"/>
                                     </a>
                                     <div class="dropdown-menu" role="menu">
diff --git a/addons/crm/views/crm_team_views.xml b/addons/crm/views/crm_team_views.xml
index 87b0cc29f1f..cd37e4df0bd 100644
--- a/addons/crm/views/crm_team_views.xml
+++ b/addons/crm/views/crm_team_views.xml
@@ -277,7 +277,7 @@
                                     <t t-else="">Open Opportunities</t>
                                 </a>
                             </div>
-                            <div class="col-4 text-right text-truncate">
+                            <div class="col-4 text-end text-truncate">
                                 <field name="opportunities_amount" widget="monetary" options="{'currency_field': 'currency_id'}"/>
                             </div>
                         </div>
@@ -289,7 +289,7 @@
                                     <t t-else="">Overdue Opportunities</t>
                                 </a>
                             </div>
-                             <div class="col-4 text-right text-truncate">
+                             <div class="col-4 text-end text-truncate">
                                 <field name="opportunities_overdue_amount" widget="monetary" options="{'currency_field': 'currency_id'}"/>
                             </div>
                         </div>
diff --git a/addons/crm/views/res_config_settings_views.xml b/addons/crm/views/res_config_settings_views.xml
index 20f9755e8f0..d0af2d8f18a 100644
--- a/addons/crm/views/res_config_settings_views.xml
+++ b/addons/crm/views/res_config_settings_views.xml
@@ -103,7 +103,7 @@
                                 <div class="row mt16" attrs="{'invisible': ['|', ('crm_use_auto_assignment', '=', False), ('crm_auto_assignment_action', '=', 'manual')]}">
                                     <label string="Repeat every" for="crm_auto_assignment_interval_type" class="col-lg-3 o_light_label"/>
                                     <field name="crm_auto_assignment_interval_number"
-                                        class="oe_inline mr-2"
+                                        class="oe_inline me-2"
                                         attrs="{'required': [('crm_use_auto_assignment', '=', True), ('crm_auto_assignment_action', '=', 'auto')]}"/>
                                     <field name="crm_auto_assignment_interval_type"
                                         class="oe_inline"
diff --git a/addons/crm/views/res_partner_views.xml b/addons/crm/views/res_partner_views.xml
index 518f92cf298..2bf32ad1271 100644
--- a/addons/crm/views/res_partner_views.xml
+++ b/addons/crm/views/res_partner_views.xml
@@ -15,8 +15,8 @@
                 <xpath expr="//div[hasclass('oe_kanban_bottom_left')]" position="inside">
                     <a t-if="record.opportunity_count.value>0" href="#"
                        data-type="object" data-name="action_view_opportunity"
-                       class="oe_kanban_action oe_kanban_action_a mr-1">
-                        <span class="badge badge-pill">
+                       class="oe_kanban_action oe_kanban_action_a me-1">
+                        <span class="badge rounded-pill">
                             <i class="fa fa-fw fa-star" aria-label="Opportunities"
                                role="img" title="Opportunities"/>
                             <t t-out="record.opportunity_count.value"/>
diff --git a/addons/crm/views/utm_campaign_views.xml b/addons/crm/views/utm_campaign_views.xml
index 4bdec4a1c50..56d18bc79f9 100644
--- a/addons/crm/views/utm_campaign_views.xml
+++ b/addons/crm/views/utm_campaign_views.xml
@@ -9,11 +9,11 @@
                 <field name="use_leads"/>
             </xpath>
             <xpath expr="//div[@id='utm_statistics']" position="inside">
-                <div class="mr-3"
+                <div class="me-3"
                     groups="sales_team.group_sale_salesman"
                     t-att-title="record.use_leads.raw_value ? 'Leads' : 'Opportunities'">
                     <i class="fa fa-star text-muted"></i>
-                    <small class="font-weight-bold"><field name="crm_lead_count"/></small>
+                    <small class="fw-bold"><field name="crm_lead_count"/></small>
                 </div>
             </xpath>
         </field>
diff --git a/addons/crm_iap_mine/views/crm_iap_lead_mining_request_views.xml b/addons/crm_iap_mine/views/crm_iap_lead_mining_request_views.xml
index d88cc564e85..c2f2fba67a6 100644
--- a/addons/crm_iap_mine/views/crm_iap_lead_mining_request_views.xml
+++ b/addons/crm_iap_mine/views/crm_iap_lead_mining_request_views.xml
@@ -51,7 +51,7 @@
                     <group name="requests">
                         <group>
                             <div  class="o_row">
-                                <field name="lead_number" attrs="{'readonly': [('state', '=', 'done')]}" nolabel="1" class="oe_inline col-md-2 pl-0"/>
+                                <field name="lead_number" attrs="{'readonly': [('state', '=', 'done')]}" nolabel="1" class="oe_inline col-md-2 ps-0"/>
                                 <field name="search_type" widget="selection" attrs="{'readonly': [('state', '=', 'done')]}" nolabel="1" class="oe_inline col-md-6"/>
                             </div>
                         </group>
diff --git a/addons/crm_iap_mine/views/mail_templates.xml b/addons/crm_iap_mine/views/mail_templates.xml
index 65cdccca034..7763c66c4db 100644
--- a/addons/crm_iap_mine/views/mail_templates.xml
+++ b/addons/crm_iap_mine/views/mail_templates.xml
@@ -11,8 +11,8 @@
                 <table style="width:100%;
                     border-top-style: solid;border-top-color: #eeeeee;border-top-width: 1px;
                     border-bottom-style: solid;border-bottom-color: #eeeeee;border-bottom-width: 1px;
-                    border-left-style: solid;border-left-color: #eeeeee;border-left-width: 1px;
-                    border-right-style: solid;border-right-color: #eeeeee;border-right-width: 1px;" t-if="people_data">
+                    border-start-style: solid;border-start-color: #eeeeee;border-start-width: 1px;
+                    border-end-style: solid;border-end-color: #eeeeee;border-end-width: 1px;" t-if="people_data">
                     <thead>
                         <tr style="background-color: #eeeeee">
                             <th t-attf-style="padding: 5px; width: {{hasPhoneNumbers and '30%;' or '50%;'}}">
diff --git a/addons/data_recycle/views/data_recycle_model_views.xml b/addons/data_recycle/views/data_recycle_model_views.xml
index 6babb15e299..e4bffad3b92 100644
--- a/addons/data_recycle/views/data_recycle_model_views.xml
+++ b/addons/data_recycle/views/data_recycle_model_views.xml
@@ -51,7 +51,7 @@
 
                                 <label for="notify_frequency" invisible="1" />
                                 <div class="o_row" attrs="{'invisible': ['|', ('recycle_mode', '=', 'automatic'), ('notify_user_ids', '=', [])]}">
-                                    <span class="mr-1">Every</span>
+                                    <span class="me-1">Every</span>
                                     <field name="notify_frequency" attrs="{'required': [('notify_user_ids', '!=', [])]}" />
                                     <field name="notify_frequency_period" attrs="{'required': [('notify_user_ids', '!=', [])]}" />
                                 </div>
diff --git a/addons/delivery/views/delivery_portal_template.xml b/addons/delivery/views/delivery_portal_template.xml
index 0e583dfa866..6816f1aa44d 100644
--- a/addons/delivery/views/delivery_portal_template.xml
+++ b/addons/delivery/views/delivery_portal_template.xml
@@ -24,7 +24,7 @@
                 </t>
             </div>
             <div t-if="picking.carrier_id.get_return_label_from_portal and picking.return_label_ids">
-                <a class="ml-3" t-attf-href="/web/content/#{picking.return_label_ids[:1].id}" target="_blank">
+                <a class="ms-3" t-attf-href="/web/content/#{picking.return_label_ids[:1].id}" target="_blank">
                     Print Return Label
                 </a>
             </div>
diff --git a/addons/delivery/wizard/choose_delivery_carrier_views.xml b/addons/delivery/wizard/choose_delivery_carrier_views.xml
index 4ac0e9a99a7..2c4fdd8b091 100644
--- a/addons/delivery/wizard/choose_delivery_carrier_views.xml
+++ b/addons/delivery/wizard/choose_delivery_carrier_views.xml
@@ -17,7 +17,7 @@
                         <div class="o_row">
                             <field name='display_price' widget="monetary" options="{'currency_field': 'currency_id'}" attrs="{'invisible': [('carrier_id','=', False)]}"/>
                             <button name="update_price" type="object" attrs="{'invisible': [('delivery_type','in', ('fixed', 'base_on_rule'))]}">
-                                <i class="fa fa-arrow-right mr-1"/>Get rate
+                                <i class="fa fa-arrow-right me-1"/>Get rate
                             </button>
                         </div>
                     </group>
diff --git a/addons/digest/data/digest_data.xml b/addons/digest/data/digest_data.xml
index c9376f8c54a..644c51ee1e5 100644
--- a/addons/digest/data/digest_data.xml
+++ b/addons/digest/data/digest_data.xml
@@ -260,8 +260,8 @@
                 }
                 #header {
                     padding: 20px 30px 25px 30px;
-                    border-left: 1px solid #875a7b;
-                    border-right: 1px solid #875a7b;
+                    border-start: 1px solid #875a7b;
+                    border-end: 1px solid #875a7b;
                 }
                 .global_layout {
                     padding: 25px 30px 30px 30px;
diff --git a/addons/digest/views/res_config_settings_views.xml b/addons/digest/views/res_config_settings_views.xml
index d6f32128e77..4105e610506 100644
--- a/addons/digest/views/res_config_settings_views.xml
+++ b/addons/digest/views/res_config_settings_views.xml
@@ -17,7 +17,7 @@
                             </div>
                             <div class="o_setting_right_pane">
                                 <label string="Digest Email" for="digest_emails"/>
-                                <a href="https://www.odoo.com/documentation/master/applications/general/digest_emails.html" title="Documentation" class="ml-1 o_doc_link" target="_blank"></a>
+                                <a href="https://www.odoo.com/documentation/master/applications/general/digest_emails.html" title="Documentation" class="ms-1 o_doc_link" target="_blank"></a>
                                 <div class="text-muted" id="msg_module_digest">
                                     Add new users as recipient of a periodic email with key metrics
                                 </div>
diff --git a/addons/event/data/event_demo.xml b/addons/event/data/event_demo.xml
index 51b83ab1420..1b58ac70688 100644
--- a/addons/event/data/event_demo.xml
+++ b/addons/event/data/event_demo.xml
@@ -15,7 +15,7 @@
         <field name="stage_id" ref="event_stage_booked"/>
         <field name="tag_ids" eval="[(4, ref('event.event_tag_category_1_tag_1')), (4, ref('event.event_tag_category_2_tag_1'))]"/>
         <field name="ticket_instructions" type="html">
-<div class="text-center font-weight-bold py-3">Important ticket information</div>
+<div class="text-center fw-bold py-3">Important ticket information</div>
 <ul>
     <li>Please come <b>at least</b> 30 minutes before the beginning of the event.</li>
     <li>Tickets can be printed or scanned directly from your phone.</li>
@@ -243,7 +243,7 @@
     <p>And this time, we go fully ONLINE! Meet us in our live streams from the comfort of your house.<br/>
     Special discount codes will be handed out during the various streams, make sure to be there on time.</p>
     <p class="mb-3">For any additional information, please contact us at <a href="mailto:events@idea.com">events@idea.com</a>.</p>
-    <div class="bg-light rounded-right border-left border-secondary p-3 mb-5" style="border-left-width: 3px !important;">
+    <div class="bg-light rounded-end border-start border-secondary p-3 mb-5" style="border-start-width: 3px !important;">
         <p class="mb-1">This event is fully online and FREE, if you have paid for tickets, you should get a refund.<br/>
         It will require a good Internet connection to get the best video quality.</p>
     </div>
diff --git a/addons/event/report/event_event_templates.xml b/addons/event/report/event_event_templates.xml
index a39ee91c82d..1d6c99a70b2 100644
--- a/addons/event/report/event_event_templates.xml
+++ b/addons/event/report/event_event_templates.xml
@@ -15,19 +15,19 @@
                 <div class="oe_structure"/>
                 <div class="o_event_foldable_badge_ticket_wrapper p-2">
                     <div class="o_event_foldable_badge_ticket_wrapper_top page">
-                        <h5 class="o_event_foldable_badge_event_name text-odoo font-weight-bold text-center" t-field="event.name"/>
+                        <h5 class="o_event_foldable_badge_event_name text-odoo fw-bold text-center" t-field="event.name"/>
                         <div class="text-center o_event_foldable_badge_font_small">
                             <span itemprop="startDate" t-out="event.date_begin.date()"
-                                class="font-weight-bold"/>
+                                class="fw-bold"/>
                             <span itemprop="startDateTime" t-out="event.date_begin"
-                                class="font-weight-bold"
+                                class="fw-bold"
                                 t-options='{"widget": "datetime", "time_only": True, "tz_name": event.date_tz, "hide_seconds": True}'/>
                             <span class="fa fa-arrow-right o_event_foldable_badge_font_faded"/>
                             <span t-if="not event.is_one_day"
                                 itemprop="endDate" t-out="event.date_end.date()"
-                                class="font-weight-bold"/>
+                                class="fw-bold"/>
                             <span itemprop="endDateTime" t-out="event.date_end"
-                                class="font-weight-bold"
+                                class="fw-bold"
                                 t-options='{"widget": "datetime", "time_only": True, "tz_name": event.date_tz, "hide_seconds": True}'/>
                         </div>
                         <div class="o_event_foldable_badge_font_faded o_event_foldable_badge_font_small text-center">
@@ -63,21 +63,21 @@
                 <div class="oe_structure"/>
                 <div class="h-50 col-12 row m-0">
                     <div class="col-6 h-100 p-0">
-                        <div class="o_event_foldable_badge_step font-weight-bold">1</div>
+                        <div class="o_event_foldable_badge_step fw-bold">1</div>
                         <img src="/event/static/src/img/how_to_fold_1.png" class="w-100 h-100" alt="How to Fold (1)"/>
                     </div>
                     <div class="col-6 h-100 p-0">
-                        <div class="o_event_foldable_badge_step font-weight-bold">2</div>
+                        <div class="o_event_foldable_badge_step fw-bold">2</div>
                         <img src="/event/static/src/img/how_to_fold_2.png" class="w-100 h-100" alt="How to Fold (2)"/>
                     </div>
                 </div>
                 <div class="h-50 col-12 row m-0">
                     <div class="col-6 h-100 p-0">
-                        <div class="o_event_foldable_badge_step font-weight-bold">3</div>
+                        <div class="o_event_foldable_badge_step fw-bold">3</div>
                         <img src="/event/static/src/img/how_to_fold_3.png" class="w-100 h-100" alt="How to Fold (3)"/>
                     </div>
                     <div class="col-6 h-100 p-0">
-                        <div class="o_event_foldable_badge_step font-weight-bold">4</div>
+                        <div class="o_event_foldable_badge_step fw-bold">4</div>
                         <img src="/event/static/src/img/how_to_fold_4.png" class="w-100 h-100" alt="How to Fold (4)"/>
                     </div>
                 </div>
@@ -117,18 +117,18 @@
                                 <div class="o_event_full_page_ticket_font_faded">
                                     Event Ticket For
                                 </div>
-                                <h5 class="o_event_full_page_ticket_event_name text-odoo font-weight-bold py-0 my-0" t-field="event.name"/>
+                                <h5 class="o_event_full_page_ticket_event_name text-odoo fw-bold py-0 my-0" t-field="event.name"/>
                                 <span itemprop="startDate" t-out="event.date_begin.date()"
-                                    class="font-weight-bold"/>
+                                    class="fw-bold"/>
                                 <span itemprop="startDateTime" t-out="event.date_begin"
-                                    class="font-weight-bold"
+                                    class="fw-bold"
                                     t-options='{"widget": "datetime", "time_only": True, "hide_seconds": True, "tz_name": event.date_tz}'/>
                                 <span class="fa fa-arrow-right o_event_full_page_ticket_font_faded"/>
                                 <span t-if="not event.is_one_day"
                                     itemprop="endDate" t-out="event.date_end.date()"
-                                    class="font-weight-bold"/>
+                                    class="fw-bold"/>
                                 <span itemprop="endDateTime" t-out="event.date_end"
-                                    class="font-weight-bold"
+                                    class="fw-bold"
                                     t-options='{"widget": "datetime", "time_only": True, "hide_seconds": True, "tz_name": event.date_tz}'/>
                                 <span itemprop="timeZone" class="o_event_full_page_ticket_font_faded small">(<t t-out="event.date_tz"/>)</span>
                                 <div t-if="event.address_id" class="o_event_full_page_ticket_font_faded">
@@ -147,7 +147,7 @@
                                     <img t-att-src="image_data_uri(event.organizer_id.image_128)" class="o_event_full_page_ticket_event_logo mb-2"/>
                                 </span>
                                 <div t-if="attendee and attendee.partner_id" class="mb-2 o_event_full_page_ticket_side_info_booked_by">
-                                    <div class="o_event_full_page_ticket_font_faded o_event_full_page_ticket_small_caps font-weight-bold">Booked By</div>
+                                    <div class="o_event_full_page_ticket_font_faded o_event_full_page_ticket_small_caps fw-bold">Booked By</div>
                                     <div class="o_event_full_page_ticket_small" t-field="attendee.partner_id"/>
                                 </div>
                             </div>
@@ -179,12 +179,12 @@
     <div class="row footer o_event_full_page_ticket_footer d-block">
         <div class="o_event_full_page_ticket_powered_by bg-odoo text-white text-center p-2 w-100">
             <t t-if="event.organizer_id">
-                <span class="font-weight-bold" t-field="event.organizer_id.name"></span>
-                <span t-if="event.organizer_id.phone" class="pl-3 fa fa-phone"/>
+                <span class="fw-bold" t-field="event.organizer_id.name"></span>
+                <span t-if="event.organizer_id.phone" class="ps-3 fa fa-phone"/>
                 <span t-if="event.organizer_id.phone" t-field="event.organizer_id.phone"/>
-                <span t-if="event.organizer_id.email_normalized" class="pl-3 fa fa-envelope"/>
+                <span t-if="event.organizer_id.email_normalized" class="ps-3 fa fa-envelope"/>
                 <span t-if="event.organizer_id.email_normalized" t-field="event.organizer_id.email_normalized"/>
-                <span t-if="event.organizer_id.website" class="pl-3 fa fa-globe"/>
+                <span t-if="event.organizer_id.website" class="ps-3 fa fa-globe"/>
                 <span t-if="event.organizer_id.website" t-field="event.organizer_id.website"/>
             </t>
             <t t-else="">
diff --git a/addons/event/views/event_event_views.xml b/addons/event/views/event_event_views.xml
index 4914b21457b..e6ea43fae38 100644
--- a/addons/event/views/event_event_views.xml
+++ b/addons/event/views/event_event_views.xml
@@ -31,7 +31,7 @@
                     <field name="legend_normal" invisible="1"/>
                     <field name="legend_done" invisible="1"/>
                     <widget name="web_ribbon" text="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
-                    <field name="kanban_state" widget="state_selection" class="ml-auto float-right"/>
+                    <field name="kanban_state" widget="state_selection" class="ms-auto float-end"/>
                     <div class="oe_title">
                         <label for="name" string="Event Name"/>
                         <h1><field class="o_text_overflow" name="name" placeholder="e.g. Conference for Architects"/></h1>
@@ -191,7 +191,7 @@
                                     </div>
                                     <div><t t-esc="luxon.DateTime.fromJSDate(record.date_begin.raw_value).toFormat('t')"/></div>
                                         <div t-if="luxon.DateTime.fromJSDate(record.date_begin.raw_value).toFormat('DDMMYYYY') !== luxon.DateTime.fromJSDate(record.date_end.raw_value).toFormat('DDMMYYYY')">
-                                            <i class="fa fa-arrow-right mr-2 o_event_fontsize_09" title="End date"/>
+                                            <i class="fa fa-arrow-right me-2 o_event_fontsize_09" title="End date"/>
                                             <t t-esc="luxon.DateTime.fromJSDate(record.date_end.raw_value).toFormat('d MMM')"/>
                                         </div>
                                 </div>
@@ -210,8 +210,8 @@
                                         </a>
                                         <t t-set="total_seats" t-value="record.seats_reserved.raw_value + record.seats_used.raw_value"/>
                                         <div  class="pt-2 pt-md-0" t-if="total_seats > 0 and ! record.auto_confirm.raw_value"><br/>
-                                            <a class="pl-2" name="%(event_registration_action_stats_from_event)d" type="action" context="{'search_default_confirmed': True}">
-                                                <i class="fa fa-level-up fa-rotate-90" title="Confirmed"/><span class="pl-2"><t t-esc="total_seats"/> Confirmed</span>
+                                            <a class="ps-2" name="%(event_registration_action_stats_from_event)d" type="action" context="{'search_default_confirmed': True}">
+                                                <i class="fa fa-level-up fa-rotate-90" title="Confirmed"/><span class="ps-2"><t t-esc="total_seats"/> Confirmed</span>
                                             </a>
                                         </div>
                                     </h5>
diff --git a/addons/event/views/event_registration_views.xml b/addons/event/views/event_registration_views.xml
index 673c88d0118..d254fe7df92 100644
--- a/addons/event/views/event_registration_views.xml
+++ b/addons/event/views/event_registration_views.xml
@@ -106,7 +106,7 @@
                 <templates>
                     <t t-name="event_attendees_kanban_icons_desktop">
                         <div class="d-none d-md-block h-100">
-                            <div id="event_attendees_kanban_icons_desktop" class="h-100 float-right p-2 d-flex align-items-end flex-column">
+                            <div id="event_attendees_kanban_icons_desktop" class="h-100 float-end p-2 d-flex align-items-end flex-column">
                                 <t t-if="record.active.raw_value">
                                     <a class="btn btn-md btn-primary" string="Confirm Registration" name="action_confirm" type="object" states="draft" role="button">
                                         <i class="fa fa-check" role="img" aria-label="Confirm button" title="Confirm Registration"/>
@@ -121,7 +121,7 @@
                         </div>
                     </t>
                     <t t-name="event_attendees_kanban_icons_mobile">
-                        <div id="event_attendees_kanban_icons_mobile" class="d-md-none h-100 pl-4">
+                        <div id="event_attendees_kanban_icons_mobile" class="d-md-none h-100 ps-4">
                             <t t-if="record.active.raw_value">
                                 <a class="btn btn-primary d-flex justify-content-center align-items-center h-100 w-100"
                                     string="Confirm Registration" name="action_confirm" type="object" states="draft" role="button">
@@ -144,15 +144,15 @@
                                 <span class="bg-danger">Archived</span>
                             </div>
                             <div class="row h-100">
-                                <div class="col-9 pr-0">
+                                <div class="col-9 pe-0">
                                     <div class="oe_kanban_content h-100">
-                                        <div class="o_kanban_record_body pt-1 pl-2 h-100 d-flex flex-column">
+                                        <div class="o_kanban_record_body pt-1 ps-2 h-100 d-flex flex-column">
                                             <b class="o_kanban_record_title"><field name="name"/></b>
                                             <field class="o_text_overflow" name="event_id" invisible="context.get('default_event_id')" />
                                             <span class="o_text_overflow" attrs="{'invisible': [('partner_id', '=', False)]}">Booked by <field name="partner_id" /></span>
                                             <div id="event_ticket_id" class="o_field_many2manytags o_field_widget d-flex mt-auto">
                                                 <t t-if="record.event_ticket_id.raw_value">
-                                                    <div t-attf-class="badge badge-pill o_tag_color_#{(record.event_ticket_id.raw_value % 11) + 1}" >
+                                                    <div t-attf-class="badge rounded-pill o_tag_color_#{(record.event_ticket_id.raw_value % 11) + 1}" >
                                                         <b><span class="o_badge_text o_text_overflow"><t t-out="record.event_ticket_id.value"/></span></b>
                                                     </div>
                                                 </t>
@@ -160,7 +160,7 @@
                                         </div>
                                     </div>
                                 </div>
-                                <div id="event_attendees_kanban_icons" class="col-3 pl-0">
+                                <div id="event_attendees_kanban_icons" class="col-3 ps-0">
                                     <t t-call="event_attendees_kanban_icons_desktop"/>
                                     <t t-call="event_attendees_kanban_icons_mobile"/>
                                 </div>
diff --git a/addons/event_crm/data/crm_lead_merge_template.xml b/addons/event_crm/data/crm_lead_merge_template.xml
index 3dfecd8d128..ff8c515a5ca 100644
--- a/addons/event_crm/data/crm_lead_merge_template.xml
+++ b/addons/event_crm/data/crm_lead_merge_template.xml
@@ -4,7 +4,7 @@
 <template id="crm_lead_merge_summary_inherit_event_crm" inherit_id="crm.crm_lead_merge_summary">
     <xpath expr="//div[@name='marketing']" position="after">
         <div class="mt-3 mb-3" name="event" t-if="lead.event_lead_rule_id or lead.event_id">
-            <div class="font-weight-bold">
+            <div class="fw-bold">
                 Event:
             </div>
             <div t-if="lead.event_id">
diff --git a/addons/event_sale/report/event_event_templates.xml b/addons/event_sale/report/event_event_templates.xml
index 33f3b239ab7..39f23f593ce 100644
--- a/addons/event_sale/report/event_event_templates.xml
+++ b/addons/event_sale/report/event_event_templates.xml
@@ -3,17 +3,17 @@
     <template id="event_report_template_full_page_ticket_inherit_sale" inherit_id="event.event_report_template_full_page_ticket">
         <xpath expr="//div[hasclass('o_event_full_page_ticket_side_info_booked_by')]" position="before">
             <div t-if="attendee and attendee.sale_order_id" class="mb-2">
-                <div class="o_event_full_page_ticket_font_faded o_event_full_page_ticket_small_caps font-weight-bold">Order Ref</div>
+                <div class="o_event_full_page_ticket_font_faded o_event_full_page_ticket_small_caps fw-bold">Order Ref</div>
                 <div class="o_event_full_page_ticket_small" t-field="attendee.sale_order_id"/>
             </div>
         </xpath>
         <xpath expr="//div[hasclass('o_event_full_page_ticket_side_info')]" position="inside">
             <div t-if="attendee and attendee.sale_order_id" class="mb-2">
-                <div class="o_event_full_page_ticket_font_faded o_event_full_page_ticket_small_caps font-weight-bold">Order Date</div>
+                <div class="o_event_full_page_ticket_font_faded o_event_full_page_ticket_small_caps fw-bold">Order Date</div>
                 <div class="o_event_full_page_ticket_small" t-out="attendee.sale_order_id.date_order.date()"/>
             </div>
             <div t-if="attendee and attendee.sale_order_line_id.price_total">
-                <div class="o_event_full_page_ticket_font_faded o_event_full_page_ticket_small_caps font-weight-bold">Price</div>
+                <div class="o_event_full_page_ticket_font_faded o_event_full_page_ticket_small_caps fw-bold">Price</div>
                 <div class="o_event_full_page_ticket_small" t-field="attendee.sale_order_line_id.price_total"
                         t-options="{'widget': 'monetary', 'display_currency': attendee.sale_order_line_id.currency_id}"/>
             </div>
diff --git a/addons/event_sale/views/event_ticket_views.xml b/addons/event_sale/views/event_ticket_views.xml
index 5a7bae91ee7..d2882fd4b18 100644
--- a/addons/event_sale/views/event_ticket_views.xml
+++ b/addons/event_sale/views/event_ticket_views.xml
@@ -75,7 +75,7 @@
                 <field name="price"/>
             </field>
             <xpath expr="//div[hasclass('col-8')]" position="after">
-                <div class="col-4 text-right"><strong> <t t-out="record.price.value"/></strong></div>
+                <div class="col-4 text-end"><strong> <t t-out="record.price.value"/></strong></div>
             </xpath>
             <xpath expr="//div[hasclass('row')]" position="after">
                 <div t-out="record.product_id.value"/>
diff --git a/addons/fetchmail_gmail/views/fetchmail_server_views.xml b/addons/fetchmail_gmail/views/fetchmail_server_views.xml
index b72e3ed1c87..259ebe57ee4 100644
--- a/addons/fetchmail_gmail/views/fetchmail_server_views.xml
+++ b/addons/fetchmail_gmail/views/fetchmail_server_views.xml
@@ -12,7 +12,7 @@
                 <div></div>
                 <div attrs="{'invisible': [('server_type', '!=', 'gmail')]}">
                     <span attrs="{'invisible': ['|', ('server_type', '!=', 'gmail'), ('google_gmail_refresh_token', '=', False)]}"
-                        class="badge badge-success">
+                        class="badge text-bg-success">
                         Gmail Token Valid
                     </span>
                     <button type="object"
diff --git a/addons/fetchmail_outlook/views/fetchmail_server_views.xml b/addons/fetchmail_outlook/views/fetchmail_server_views.xml
index ad5ec760069..30d432d74e0 100644
--- a/addons/fetchmail_outlook/views/fetchmail_server_views.xml
+++ b/addons/fetchmail_outlook/views/fetchmail_server_views.xml
@@ -18,7 +18,7 @@
                 <div></div>
                 <div attrs="{'invisible': [('use_microsoft_outlook_service', '=', False)]}">
                     <span attrs="{'invisible': ['|', ('use_microsoft_outlook_service', '=', False), ('microsoft_outlook_refresh_token', '=', False)]}"
-                        class="badge badge-success">
+                        class="badge text-bg-success">
                         Outlook Token Valid
                     </span>
                     <button type="object"
diff --git a/addons/fleet/views/fleet_vehicle_cost_views.xml b/addons/fleet/views/fleet_vehicle_cost_views.xml
index 49ad38e5aa8..4351a5b44db 100644
--- a/addons/fleet/views/fleet_vehicle_cost_views.xml
+++ b/addons/fleet/views/fleet_vehicle_cost_views.xml
@@ -75,7 +75,7 @@
                 sample="1">
                 <field name="active" invisible="1"/>
                 <field name="expires_today" invisible="1"/>
-                <field name="name" class="font-weight-bold" />
+                <field name="name" class="fw-bold" />
                 <field name="start_date" />
                 <field name="expiration_date" widget="remaining_days"/>
                 <field name="days_left" invisible="1"/>
@@ -104,7 +104,7 @@
                             <div>
                                 <strong>
                                     <field name="vehicle_id" widget="res_partner_many2one"/>
-                                    <span class="float-right badge badge-secondary">
+                                    <span class="float-end badge text-bg-secondary">
                                         <field name="state"/>
                                     </span>
                                 </strong>
@@ -238,7 +238,7 @@
                             <label for="odometer"/>
                             <div class="o_row">
                                 <field name="odometer" class="oe_inline"/>
-                                <field name="odometer_unit" class="pl-1 pl-sm-0"/>
+                                <field name="odometer_unit" class="ps-1 ps-sm-0"/>
                             </div>
                         </group>
                     </group>
@@ -292,12 +292,12 @@
                         <div t-attf-class="oe_kanban_global_click container" class="o_kanban_record_has_image_fill">
                             <div class="oe_kanban_details">
                                 <div class="o_kanban_record_top">
-                                    <img t-att-src="kanban_image('fleet.vehicle', 'image_128', record.vehicle_id.raw_value)" t-att-alt="record.vehicle_id.value" class="o_image_24_cover float-left"/>
-                                    <div class="o_kanban_record_headings pl-2 pr-2">
+                                    <img t-att-src="kanban_image('fleet.vehicle', 'image_128', record.vehicle_id.raw_value)" t-att-alt="record.vehicle_id.value" class="o_image_24_cover float-start"/>
+                                    <div class="o_kanban_record_headings ps-2 pe-2">
                                         <div class="text-truncate o_kanban_record_title">
                                             <strong>
                                                 <field name="vehicle_id"/>
-                                                <span t-attf-class="float-right badge #{['todo', 'running'].indexOf(record.state.raw_value) > -1 ? 'badge-secondary' : ['cancelled'].indexOf(record.state.raw_value) > -1 ? 'badge-danger' : 'badge-success'}">
+                                                <span t-attf-class="float-end badge #{['todo', 'running'].indexOf(record.state.raw_value) > -1 ? 'text-bg-secondary' : ['cancelled'].indexOf(record.state.raw_value) > -1 ? 'text-bg-danger' : 'text-bg-success'}">
                                                     <field name="state"/>
                                                 </span>
                                             </strong>
@@ -309,7 +309,7 @@
                                 </div>
                                 <div class="text-truncate">
                                     <field name="purchaser_id"/>
-                                    <span class="float-right"><field name="date"/></span>
+                                    <span class="float-end"><field name="date"/></span>
                                 </div>
                                 <div class="text-truncate">
                                     <field name="vendor_id"/>
diff --git a/addons/fleet/views/fleet_vehicle_model_views.xml b/addons/fleet/views/fleet_vehicle_model_views.xml
index aa940da960c..9a961223be9 100644
--- a/addons/fleet/views/fleet_vehicle_model_views.xml
+++ b/addons/fleet/views/fleet_vehicle_model_views.xml
@@ -77,7 +77,7 @@
                                                 <div>
                                                     <div class="o_kanban_record_title">
                                                         <field name="name"/>
-                                                        <div class="o_kanban_details float-right">
+                                                        <div class="o_kanban_details float-end">
                                                             <span class="text-muted">
                                                                 <t t-if="record.phone.raw_value"><field name="phone"/><br/></t>
                                                                 <t t-if="record.email.raw_value"><field name="email"/></t>
@@ -206,7 +206,7 @@
                     <t t-name="kanban-box">
                         <div class="oe_kanban_vignette oe_semantic_html_override oe_kanban_global_click">
                             <div class="o_dropdown_kanban dropdown">
-                                <a class="dropdown-toggle o-no-caret btn" role="button" data-toggle="dropdown" href="#" aria-label="Dropdown menu" title="Dropdown menu">
+                                <a class="dropdown-toggle o-no-caret btn" role="button" data-bs-toggle="dropdown" href="#" aria-label="Dropdown menu" title="Dropdown menu">
                                     <span class="fa fa-ellipsis-v"/>
                                 </a>
                                 <div class="dropdown-menu" role="menu">
diff --git a/addons/fleet/views/fleet_vehicle_views.xml b/addons/fleet/views/fleet_vehicle_views.xml
index 2975bbaf6c2..dd9fcfb3ac7 100644
--- a/addons/fleet/views/fleet_vehicle_views.xml
+++ b/addons/fleet/views/fleet_vehicle_views.xml
@@ -370,7 +370,7 @@
                             <label for="value"/>
                             <div class="o_row">
                                 <field name="value" class="oe_inline"/>
-                                <field name="unit" class="ml-2"/>
+                                <field name="unit" class="ms-2"/>
                             </div>
                             <field name="date"/>
                         </group>
@@ -405,12 +405,12 @@
                             <div>
                                 <strong>
                                     <field name="vehicle_id"/>
-                                    <span class="float-right"><field name="date"/></span>
+                                    <span class="float-end"><field name="date"/></span>
                                 </strong>
                             </div>
                             <div>
                                 <span><field name="driver_id"/></span>
-                                <span class="float-right"><field name="value"/> Km</span>
+                                <span class="float-end"><field name="value"/> Km</span>
                             </div>
                         </div>
                     </t>
diff --git a/addons/gamification/data/gamification_karma_rank_data.xml b/addons/gamification/data/gamification_karma_rank_data.xml
index 5ae425d5473..9cb6d088de6 100644
--- a/addons/gamification/data/gamification_karma_rank_data.xml
+++ b/addons/gamification/data/gamification_karma_rank_data.xml
@@ -15,7 +15,7 @@
         <field name="description_motivational" type="html">
             <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"/>
+                <img class="ms-3 img img-fluid" style="max-height: 72px;" src="/gamification/static/img/rank_newbie_badge.svg"/>
             </div>
         </field>
         <field name="karma_min">1</field>
@@ -28,7 +28,7 @@
         <field name="description_motivational" type="html">
             <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"/>
+                <img class="ms-3 img img-fluid" style="max-height: 72px;" src="/gamification/static/img/rank_student_badge.svg"/>
             </div>
         </field>
         <field name="karma_min">100</field>
@@ -41,7 +41,7 @@
         <field name="description_motivational" type="html">
             <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"/>
+                <img class="ms-3 img img-fluid" style="max-height: 72px;" src="/gamification/static/img/rank_bachelor_badge.svg"/>
             </div>
         </field>
         <field name="karma_min">500</field>
@@ -54,7 +54,7 @@
         <field name="description_motivational" type="html">
             <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"/>
+                <img class="ms-3 img img-fluid" style="max-height: 72px;" src="/gamification/static/img/rank_master_badge.svg"/>
             </div>
         </field>
         <field name="karma_min">2000</field>
@@ -67,7 +67,7 @@
         <field name="description_motivational" type="html">
             <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"/>
+                <img class="ms-3 img img-fluid" style="max-height: 72px;" src="/gamification/static/img/rank_doctor_badge.svg"/>
             </div>
         </field>
         <field name="karma_min">10000</field>
diff --git a/addons/gamification/data/gamification_karma_rank_demo.xml b/addons/gamification/data/gamification_karma_rank_demo.xml
index bdf1ecbac44..be032f41242 100644
--- a/addons/gamification/data/gamification_karma_rank_demo.xml
+++ b/addons/gamification/data/gamification_karma_rank_demo.xml
@@ -5,7 +5,7 @@
         <field name="description_motivational" type="html">
             <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"/>
+                <img class="ms-3 img img-fluid" style="max-height: 72px;" src="/gamification/static/img/rank_misc_mug.png"/>
             </div>
         </field>
     </record>
@@ -14,7 +14,7 @@
         <field name="description_motivational" type="html">
             <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"/>
+                <img class="ms-3 img img-fluid" style="max-height: 72px;" src="/gamification/static/img/rank_misc_wand.png"/>
             </div>
         </field>
     </record>
@@ -23,7 +23,7 @@
         <field name="description_motivational" type="html">
             <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"/>
+                <img class="ms-3 img img-fluid" style="max-height: 72px;" src="/gamification/static/img/rank_misc_hat.png"/>
             </div>
         </field>
     </record>
@@ -32,7 +32,7 @@
         <field name="description_motivational" type="html">
             <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"/>
+                <img class="ms-3 img img-fluid" style="max-height: 72px;" src="/gamification/static/img/rank_misc_unicorn.png"/>
             </div>
         </field>
     </record>
diff --git a/addons/gamification/views/gamification_goal_views.xml b/addons/gamification/views/gamification_goal_views.xml
index cfe6d35c218..76c81b75728 100644
--- a/addons/gamification/views/gamification_goal_views.xml
+++ b/addons/gamification/views/gamification_goal_views.xml
@@ -169,7 +169,7 @@
                         <div t-attf-class="oe_kanban_card oe_kanban_global_click o_kanban_gamification #{record.end_date.raw_value &lt; record.last_update.raw_value and record.state.raw_value == 'failed' ? 'oe_kanban_color_2' : ''} #{record.end_date.raw_value &lt; record.last_update.raw_value and record.state.raw_value == 'reached' ? 'oe_kanban_color_5' : ''}">
                             <div class="o_kanban_content">
                                 <p><strong><h4 class="oe_goal_name text-center" tooltip="kanban-tooltip"><field name="definition_id" /></h4></strong></p>
-                                <div class="float-left">
+                                <div class="float-start">
                                     <img class="o_image_24_cover" t-att-src="kanban_image('res.users', 'avatar_128', record.user_id.raw_value)" t-att-title="record.user_id.value" t-att-alt="record.user_id.value"/>
                                 </div>
                                 <field name="user_id" />
diff --git a/addons/google_calendar/static/src/xml/base_calendar.xml b/addons/google_calendar/static/src/xml/base_calendar.xml
index 32db6a7f8c8..667d8c5188d 100644
--- a/addons/google_calendar/static/src/xml/base_calendar.xml
+++ b/addons/google_calendar/static/src/xml/base_calendar.xml
@@ -5,7 +5,7 @@
             <button type="button" id="google_sync_pending" class="o_google_sync_button o_google_sync_pending btn btn-secondary btn">
                 <b><i class='fa fa-refresh'/> Google</b>
             </button>
-            <button type="button" id="google_sync_configured" class="mr-1 o_google_sync_button o_google_sync_button_configured btn badge-primary">
+            <button type="button" id="google_sync_configured" class="me-1 o_google_sync_button o_google_sync_button_configured btn text-bg-primary">
                 <b>
                     <i id="google_check" class='fa fa-check'/>
                     <i id="google_stop" class='fa fa-times' style="display: none"/>&amp;nbsp;Google
diff --git a/addons/google_gmail/views/ir_mail_server_views.xml b/addons/google_gmail/views/ir_mail_server_views.xml
index 76bb5a40123..910a77efa46 100644
--- a/addons/google_gmail/views/ir_mail_server_views.xml
+++ b/addons/google_gmail/views/ir_mail_server_views.xml
@@ -11,7 +11,7 @@
                 <div></div>
                 <div attrs="{'invisible': [('smtp_authentication', '!=', 'gmail')]}">
                     <span attrs="{'invisible': ['|', ('smtp_authentication', '!=', 'gmail'), ('google_gmail_refresh_token', '=', False)]}"
-                        class="badge badge-success">
+                        class="badge text-bg-success">
                         Gmail Token Valid
                     </span>
                     <button type="object"
diff --git a/addons/google_gmail/views/res_config_settings_views.xml b/addons/google_gmail/views/res_config_settings_views.xml
index 3c6b3cac5e9..3a7a1bfcdac 100644
--- a/addons/google_gmail/views/res_config_settings_views.xml
+++ b/addons/google_gmail/views/res_config_settings_views.xml
@@ -9,11 +9,11 @@
                 <div id="msg_module_google_gmail" position="replace">
                     <div class="row mt16" id="gmail_client_identifier">
                         <label string="Client ID" for="google_gmail_client_identifier" class="col-lg-3 o_light_label"/>
-                        <field name="google_gmail_client_identifier" class="ml-2"/>
+                        <field name="google_gmail_client_identifier" class="ms-2"/>
                     </div>
                     <div class="row mt16" id="gmail_client_secret">
                         <label string="Client Secret" for="google_gmail_client_secret" class="col-lg-3 o_light_label"/>
-                        <field name="google_gmail_client_secret" class="ml-2"/>
+                        <field name="google_gmail_client_secret" class="ms-2"/>
                     </div>
                 </div>
             </field>
diff --git a/addons/hr/views/hr_employee_public_views.xml b/addons/hr/views/hr_employee_public_views.xml
index 25a86e684c7..d63efaf5a01 100644
--- a/addons/hr/views/hr_employee_public_views.xml
+++ b/addons/hr/views/hr_employee_public_views.xml
@@ -134,21 +134,21 @@
                                 <div class="o_kanban_record_top">
                                     <div class="o_kanban_record_headings">
                                         <strong class="o_kanban_record_title">
-                                            <div class="float-right"
+                                            <div class="float-end"
                                                  t-if="record.hr_icon_display.raw_value == 'presence_present'">
                                                 <!-- Employee is present/connected and it is normal according to his work schedule  -->
                                                 <span class="fa fa-circle text-success" role="img" aria-label="Present"
                                                       title="Present" name="presence_present">
                                                 </span>
                                             </div>
-                                            <div class="float-right"
+                                            <div class="float-end"
                                                  t-if="record.hr_icon_display.raw_value == 'presence_absent'">
                                                 <!-- Employee is absent and it is normal according to his work schedule  -->
                                                 <span class="fa fa-circle-o text-muted" role="img" aria-label="Absent"
                                                       title="Absent" name="presence_absent">
                                                 </span>
                                             </div>
-                                            <div class="float-right"
+                                            <div class="float-end"
                                                  t-if="record.hr_icon_display.raw_value == 'presence_absent_active'">
                                                 <!-- Employee is connected but according to his work schedule, he should not work for now  -->
                                                 <span class="fa fa-circle-o text-success" role="img"
@@ -157,7 +157,7 @@
                                                 </span>
                                             </div>
                                             <!-- Employee is not here but according to his work schedule, he should be connected -->
-                                            <div class="float-right"
+                                            <div class="float-end"
                                                  t-if="record.hr_icon_display.raw_value == 'presence_to_define'">
                                                 <span class="fa fa-circle text-warning" role="img"
                                                       aria-label="To define" title="To define"
@@ -174,7 +174,7 @@
                                     <li t-if="record.work_email.raw_value"><field name="work_email" /></li>
                                     <li t-if="record.work_phone.raw_value" class="o_force_ltr"><field name="work_phone" /></li>
                                 </ul>
-                                <div class="oe_kanban_content position-absolute fixed-bottom mr-2">
+                                <div class="oe_kanban_content position-absolute fixed-bottom me-2">
                                     <div class="o_kanban_record_bottom">
                                         <div class="oe_kanban_bottom_left"/>
                                         <div class="oe_kanban_bottom_right">
diff --git a/addons/hr/views/hr_employee_views.xml b/addons/hr/views/hr_employee_views.xml
index 3d2e6166a12..66c75d1db9a 100644
--- a/addons/hr/views/hr_employee_views.xml
+++ b/addons/hr/views/hr_employee_views.xml
@@ -272,7 +272,7 @@
                                <div class="o_kanban_record_top">
                                    <div class="o_kanban_record_headings">
                                        <strong class="o_kanban_record_title">
-                                            <div class="float-right"
+                                            <div class="float-end"
                                                  t-if="record.hr_icon_display.raw_value == 'presence_present'"
                                                  name="presence_present">
                                                 <!-- Employee is present/connected and it is normal according to his work schedule  -->
@@ -280,7 +280,7 @@
                                                       title="Present" name="presence_present">
                                                 </span>
                                             </div>
-                                            <div class="float-right"
+                                            <div class="float-end"
                                                  t-if="record.hr_icon_display.raw_value == 'presence_absent'"
                                                  name="presence_absent">
                                                 <!-- Employee is not present and it is normal according to his work schedule -->
@@ -288,7 +288,7 @@
                                                       title="Absent" name="presence_absent">
                                                 </span>
                                             </div>
-                                            <div class="float-right"
+                                            <div class="float-end"
                                                  t-if="record.hr_icon_display.raw_value == 'presence_absent_active'"
                                                     name="presence_absent_active">
                                                 <!-- Employee is connected but according to his work schedule,
@@ -299,7 +299,7 @@
                                                       name="presence_absent_active">
                                                 </span>
                                             </div>
-                                            <div class="float-right"
+                                            <div class="float-end"
                                                  t-if="record.hr_icon_display.raw_value == 'presence_to_define'"
                                                     name="presence_to_define">
                                                 <!-- Employee is not here but according to his work schedule, he should be connected -->
@@ -320,10 +320,10 @@
                                    <li t-if="record.work_phone.raw_value" class="o_force_ltr"><field name="work_phone" /></li>
                                </ul>
                            </div>
-                           <div class="oe_kanban_content position-absolute fixed-bottom mr-2 o_hr_employee_kanban_bottom">
+                           <div class="oe_kanban_content position-absolute fixed-bottom me-2 o_hr_employee_kanban_bottom">
                                <div class="o_kanban_record_bottom">
                                    <div class="oe_kanban_bottom_left"/>
-                                   <div class="oe_kanban_bottom_right float-right">
+                                   <div class="oe_kanban_bottom_right float-end">
                                        <a title="Chat" icon="fa-comments" href="#" class="ml8 o_employee_chat_btn" attrs="{'invisible': [('user_id','=', False)]}" role="button"><i class="fa fa-comments"/></a>
                                        <div class="hr_activity_container">
                                            <field name="activity_ids" widget="kanban_activity"/>
diff --git a/addons/hr/views/hr_job_views.xml b/addons/hr/views/hr_job_views.xml
index 695a2f91a2c..740a8b7ec88 100644
--- a/addons/hr/views/hr_job_views.xml
+++ b/addons/hr/views/hr_job_views.xml
@@ -24,8 +24,8 @@
                                     <group>
                                         <label for="no_of_recruitment"/>
                                         <div class="o_row" name="recruitment_target">
-                                            <field name="no_of_recruitment" class="col-3 pl-0"/>
-                                            <span class="pl-1">new Employees</span>
+                                            <field name="no_of_recruitment" class="col-3 ps-0"/>
+                                            <span class="ps-1">new Employees</span>
                                         </div>
                                     </group>
                                 </group>
diff --git a/addons/hr/views/res_config_settings_views.xml b/addons/hr/views/res_config_settings_views.xml
index 20f2a89832f..6bd4866d6cc 100644
--- a/addons/hr/views/res_config_settings_views.xml
+++ b/addons/hr/views/res_config_settings_views.xml
@@ -43,16 +43,16 @@
                                     <label for="hr_presence_control_email" class="o_light_label"/>
                                 </div>
                                 <div class="d-flex ml32" attrs="{'invisible': ['|', ('module_hr_presence', '=', False), ('hr_presence_control_email', '=', False)]}">
-                                    <span class="flex-shrink-0 ml8 mr-2">Minimum number of emails to sent </span>
-                                    <field name="hr_presence_control_email_amount" class="ml-2 oe_inline"/>
+                                    <span class="flex-shrink-0 ml8 me-2">Minimum number of emails to sent </span>
+                                    <field name="hr_presence_control_email_amount" class="ms-2 oe_inline"/>
                                 </div>
                                 <div class="d-flex" attrs="{'invisible': [('module_hr_presence', '=', False)]}">
                                     <field name="hr_presence_control_ip" class="ml16"/>
                                     <label for="hr_presence_control_ip" class="o_light_label"/>
                                 </div>
                                 <div class="d-flex ml32" attrs="{'invisible': ['|', ('module_hr_presence', '=', False), ('hr_presence_control_ip', '=', False)]}">
-                                    <span class="flex-shrink-0 ml8 mr-2">IP Addresses (comma-separated)</span>
-                                    <field name="hr_presence_control_ip_list" class="ml-2 oe_inline"/>
+                                    <span class="flex-shrink-0 ml8 me-2">IP Addresses (comma-separated)</span>
+                                    <field name="hr_presence_control_ip_list" class="ms-2 oe_inline"/>
                                 </div>
                             </div>
                         </div>
diff --git a/addons/hr/views/res_users.xml b/addons/hr/views/res_users.xml
index 8d2429e6a07..ebe2af538be 100644
--- a/addons/hr/views/res_users.xml
+++ b/addons/hr/views/res_users.xml
@@ -92,7 +92,7 @@
                         </h1>
                     </div>
                     <div class="row">
-                        <h2 class="col-6 pl-0">
+                        <h2 class="col-6 ps-0">
                             <field name="job_title" placeholder="Job Position" attrs="{'readonly': [('can_edit', '=', False)]}"/>
                         </h2>
                     </div>
diff --git a/addons/hr_attendance/static/src/xml/attendance.xml b/addons/hr_attendance/static/src/xml/attendance.xml
index 9a4b6060a16..ab96e8c6e63 100644
--- a/addons/hr_attendance/static/src/xml/attendance.xml
+++ b/addons/hr_attendance/static/src/xml/attendance.xml
@@ -8,7 +8,7 @@
     <t t-name="HrAttendanceCardLayout">
         <div class="o_hr_attendance_kiosk_mode_container o_home_menu_background d-flex flex-column align-items-center justify-content-center h-100 text-center">
             <span class="o_hr_attendance_kiosk_backdrop position-absolute top-0 start-0 end-0 bottom-0 bg-black-25"/>
-            <div class="o_hr_attendance_clock bg-black-50 p-3 py-md-2 m-0 mt-md-5 mr-md-5 h2 text-white text-monospace"/>
+            <div class="o_hr_attendance_clock bg-black-50 p-3 py-md-2 m-0 mt-md-5 me-md-5 h2 text-white font-monospace"/>
             <div t-attf-class="o_hr_attendance_kiosk_mode flex-grow-1 flex-md-grow-0 card pb-3 px-0 px-lg-5 {{kioskModeClasses ? kioskModeClasses : '' }}">
                 <div class="card-body d-flex flex-column p-0 p-md-4">
                     <t t-out="bodyContent"></t>
@@ -112,12 +112,12 @@
                         <h3 class="mt-4 mb0 text-muted">Please enter your PIN to <b t-if="checked_in">check out</b><b t-else="">check in</b></h3>
                         <div class="row">
                             <div class="col-md-8 offset-md-2 o_hr_attendance_pin_pad">
-                                <div class="row no-gutters" >
+                                <div class="row g-0" >
                                     <div class="col-12 mb8 mt8">
                                         <input class="o_hr_attendance_PINbox border-0 bg-white fs-1 text-center" type="password" disabled="true"/>
                                     </div>
                                 </div>
-                                <div class="row no-gutters">
+                                <div class="row g-0">
                                     <t t-foreach="['1', '2', '3', '4', '5', '6', '7', '8', '9', ['C', 'btn-warning'], '0', ['ok', 'btn-primary']]" t-as="btn_name">
                                         <div class="col-4 p-1">
                                             <a href="#" t-attf-class="o_hr_attendance_PINbox_button btn {{btn_name[1]? btn_name[1] : 'btn-secondary border'}} btn-block btn-lg {{ 'o_hr_attendance_pin_pad_button_' + btn_name[0] }} d-flex align-items-center justify-content-center">
@@ -164,7 +164,7 @@
                         <t t-if="widget.total_overtime_float &gt; 0">
                             Total extra hours: <span t-esc="widget.total_overtime"/>
                         </t>
-                        <h3 class="o_hr_attendance_random_message font-italic mb24"/>
+                        <h3 class="o_hr_attendance_random_message fst-italic mb24"/>
                         <div class="o_hr_attendance_warning_message mt24 alert alert-warning" style="display:none" role="alert"/>
                     </div>
                     <div t-else="" class="flex-grow-1">
diff --git a/addons/hr_attendance/views/hr_employee_view.xml b/addons/hr_attendance/views/hr_employee_view.xml
index 1e4b977ec67..eb7ce5ec342 100644
--- a/addons/hr_attendance/views/hr_employee_view.xml
+++ b/addons/hr_attendance/views/hr_employee_view.xml
@@ -143,10 +143,10 @@
                         </div>
                         <div class="oe_kanban_details">
                             <div id="textbox">
-                                <div class="float-right" t-if="record.attendance_state.raw_value == 'checked_in'">
+                                <div class="float-end" t-if="record.attendance_state.raw_value == 'checked_in'">
                                     <span id="oe_hr_attendance_status" class="fa fa-circle text-success me-1" role="img" aria-label="Available" title="Available"></span>
                                 </div>
-                                <div class="float-right" t-if="record.attendance_state.raw_value == 'checked_out'">
+                                <div class="float-end" t-if="record.attendance_state.raw_value == 'checked_out'">
                                     <span id="oe_hr_attendance_status" class="fa fa-circle text-warning me-1"
                                           role="img" aria-label="Not available" title="Not available">
                                     </span>
diff --git a/addons/hr_contract/report/hr_contract_history_report_views.xml b/addons/hr_contract/report/hr_contract_history_report_views.xml
index 11a1f6c8e02..e9d7f6ab62c 100644
--- a/addons/hr_contract/report/hr_contract_history_report_views.xml
+++ b/addons/hr_contract/report/hr_contract_history_report_views.xml
@@ -52,7 +52,7 @@
                             <div>
                                 <field name="display_name"/>
                             </div>
-                            <div class="pl-3">
+                            <div class="ps-3">
                                 <field name="under_contract_state" widget="state_selection" readonly="1"/>
                             </div>
                         </div>
@@ -186,7 +186,7 @@
                                     <field name="job_id"/>
                                 </div>
                                 <div class="oe_kanban_bottom_right">
-                                    <span class="float-right">
+                                    <span class="float-end">
                                         <field name="employee_id" widget="many2one_avatar_employee"/>
                                     </span>
                                 </div>
diff --git a/addons/hr_contract/views/hr_contract_views.xml b/addons/hr_contract/views/hr_contract_views.xml
index c62e2700f83..6f348115654 100644
--- a/addons/hr_contract/views/hr_contract_views.xml
+++ b/addons/hr_contract/views/hr_contract_views.xml
@@ -52,7 +52,7 @@
                         <div>
                             <field name="resource_calendar_id" required="1" nolabel="1"/>
                             <span attrs="{'invisible': [('calendar_mismatch', '=', False)]}"
-                                class="fa fa-exclamation-triangle text-danger o_calendar_warning ml-3"
+                                class="fa fa-exclamation-triangle text-danger o_calendar_warning ms-3"
                                 data-tooltip-template="hr_contract.CalendarMismatch"
                                 data-tooltip-info='{
                                         "text":"Calendar Mismatch : The employee&apos;s calendar does not match this contract&apos;s calendar. This could lead to unexpected behaviors."
@@ -141,7 +141,7 @@
                     <sheet>
                         <div class="oe_button_box" name="button_box"/>
                         <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
-                        <div class="oe_title pr-0" name="title">
+                        <div class="oe_title pe-0" name="title">
                             <h1 class="d-flex flex-row justify-content-between">
                                 <field name="name" class="text-truncate" placeholder="Contract Reference"/>
                                 <field name="kanban_state" widget="state_selection" readonly="1"/>
@@ -164,7 +164,7 @@
                                 <div id="resource_calendar_warning">
                                     <field name="resource_calendar_id" required="1" nolabel="1" options="{'no_open': True, 'no_create': True}"/>
                                     <span attrs="{'invisible': ['|', ('calendar_mismatch', '=', False), ('state', '!=', 'open')]}"
-                                        class="fa fa-exclamation-triangle text-danger o_calendar_warning ml-3"
+                                        class="fa fa-exclamation-triangle text-danger o_calendar_warning ms-3"
                                         data-tooltip-template="hr_contract.CalendarMismatch"
                                         data-tooltip-info='{
                                                 "text":"Calendar Mismatch : The employee&apos;s calendar does not match this contract&apos;s calendar. This could lead to unexpected behaviors."
@@ -272,7 +272,7 @@
                     <t t-name="kanban-box">
                         <div class="oe_kanban_card oe_kanban_global_click">
                             <div class="o_dropdown_kanban dropdown" t-if="!selection_mode" groups="hr_contract.group_hr_contract_manager">
-                                <a class="dropdown-toggle o-no-caret btn" role="button" data-toggle="dropdown" data-display="static" href="#" aria-label="Dropdown menu" title="Dropdown menu">
+                                <a class="dropdown-toggle o-no-caret btn" role="button" data-bs-toggle="dropdown" data-bs-display="static" href="#" aria-label="Dropdown menu" title="Dropdown menu">
                                     <span class="fa fa-ellipsis-v"/>
                                 </a>
                                 <div class="dropdown-menu" role="menu">
@@ -290,10 +290,10 @@
                                     <field name="job_id"/>
                                 </div>
                                 <div class="oe_kanban_bottom_right">
-                                    <span class="float-right">
+                                    <span class="float-end">
                                         <field name="employee_id" widget="many2one_avatar_employee"/>
                                     </span>
-                                    <span class="float-right mr4">
+                                    <span class="float-end mr4">
                                         <field name="kanban_state" widget="state_selection"/>
                                     </span>
                                 </div>
diff --git a/addons/hr_expense/report/hr_expense_report.xml b/addons/hr_expense/report/hr_expense_report.xml
index f7131f12a61..fac8d826092 100644
--- a/addons/hr_expense/report/hr_expense_report.xml
+++ b/addons/hr_expense/report/hr_expense_report.xml
@@ -39,8 +39,8 @@
                                     <th>Unit Price</th>
                                     <th>Taxes</th>
                                     <th class="text-center">Qty</th>
-                                    <th class="text-right">Price</th>
-                                    <th t-if="o.is_multiple_currency" class="text-right">Price in Company Currency</th>
+                                    <th class="text-end">Price</th>
+                                    <th t-if="o.is_multiple_currency" class="text-end">Price in Company Currency</th>
                                 </tr>
                             </thead>
                             <tbody>
@@ -70,11 +70,11 @@
                                     <td class="text-center">
                                         <span t-field="line.quantity"/>
                                     </td>
-                                    <td class="text-right">
+                                    <td class="text-end">
                                         <span t-field="line.total_amount"
                                             t-options='{"widget": "monetary", "display_currency": line.currency_id}'/>
                                     </td>
-                                    <td t-if="o.is_multiple_currency" class="text-right">
+                                    <td t-if="o.is_multiple_currency" class="text-end">
                                         <span t-field="line.total_amount_company"/>
                                     </td>
                                 </tr>
@@ -86,7 +86,7 @@
                                 <table class="table table-sm">
                                     <tr class="border-black">
                                         <td><strong>Total</strong></td>
-                                        <td class="text-right">
+                                        <td class="text-end">
                                             <span t-field="o.total_amount"
                                                 t-options='{"widget": "monetary", "display_currency": o.currency_id}'/>
                                         </td>
diff --git a/addons/hr_expense/static/src/scss/hr_expense.scss b/addons/hr_expense/static/src/scss/hr_expense.scss
index 436275b49c9..8ea31cc9c80 100644
--- a/addons/hr_expense/static/src/scss/hr_expense.scss
+++ b/addons/hr_expense/static/src/scss/hr_expense.scss
@@ -10,7 +10,8 @@
 
         .o_view_nocontent_expense_receipt:before {
             @extend %o-nocontent-init-image;
-            @include size(300px, 230px);
+            width: 300px;
+            height: 230px;
             background: transparent url(/hr_expense/static/img/nocontent.png) no-repeat center;
             background-size: 300px 230px;
             margin-bottom: 0.75rem;
diff --git a/addons/hr_expense/views/account_journal_dashboard.xml b/addons/hr_expense/views/account_journal_dashboard.xml
index e589a4f674d..b1ca4800dae 100644
--- a/addons/hr_expense/views/account_journal_dashboard.xml
+++ b/addons/hr_expense/views/account_journal_dashboard.xml
@@ -8,12 +8,12 @@
         <field name="arch" type="xml">
             <xpath expr="//t[@id='account.JournalBodySalePurchase']//div[hasclass('o_kanban_primary_right')]" position="inside">
                 <div class="row" t-if="dashboard.number_expenses_to_pay">
-                    <div class="col overflow-hidden text-left">
+                    <div class="col overflow-hidden text-start">
                         <a type="object" t-if="journal_type == 'purchase'" name="open_expenses_action">
                             <t t-esc="dashboard.number_expenses_to_pay"/> Expenses to Process
                         </a>
                     </div>
-                    <div class="col-auto text-right">
+                    <div class="col-auto text-end">
                         <span t-if="journal_type == 'purchase'"><t t-esc="dashboard.sum_expenses_to_pay"/></span>
                     </div>
                 </div>
diff --git a/addons/hr_expense/views/hr_expense_views.xml b/addons/hr_expense/views/hr_expense_views.xml
index e747716b35a..d6a19573625 100644
--- a/addons/hr_expense/views/hr_expense_views.xml
+++ b/addons/hr_expense/views/hr_expense_views.xml
@@ -67,7 +67,7 @@
                     <field name="quantity" optional="hide"/>
                     <field name="tax_ids" optional="hide" widget="many2many_tags" groups="account.group_account_invoice,account.group_account_readonly"/>
                     <field name="amount_tax_company" optional="hide" groups="account.group_account_invoice,account.group_account_readonly"/>
-                    <field name="attachment_number" nolabel="1" class='fa fa-paperclip pr-0' attrs="{'invisible': [('attachment_number', '=', 0)]}"/>
+                    <field name="attachment_number" nolabel="1" class='fa fa-paperclip pe-0' attrs="{'invisible': [('attachment_number', '=', 0)]}"/>
                     <field name="total_amount_company" optional="show" sum="Total Company Currency" widget='monetary' options="{'currency_field': 'company_currency_id'}" decoration-bf="True"/>
                     <field name="total_amount" optional="hide" decoration-bf="True" groups="base.group_multi_currency"/>
                     <field name="currency_id" optional="hide" groups="base.group_multi_currency"/>
@@ -142,7 +142,7 @@
                             <field name="product_id" required="1" attrs="{'readonly': [('sheet_is_editable', '=', False)]}" context="{'default_can_be_expensed': 1, 'tree_view_ref': 'hr_expense.product_product_expense_tree_view', 'form_view_ref': 'hr_expense.product_product_expense_form_view'}"/>
                             <label for="product_description" string="" attrs="{'invisible': ['|', ('product_description', '=', False), ('product_id', '=', False)]}"/>
                             <div class="o_row" attrs="{'invisible': ['|', ('product_description', '=', False), ('product_id', '=', False)]}">
-                                <field name ="product_description" class="font-italic"/>
+                                <field name ="product_description" class="fst-italic"/>
                             </div>
                             <field name="unit_amount" required="1" force_save="1" widget="monetary" options="{'currency_field': 'currency_id', 'field_digits': True}" attrs="{'invisible': [('product_has_cost', '=', False)], 'readonly': ['|', ('sheet_is_editable', '=', False), ('product_has_cost', '=', True)]}"/>
                             <field name="product_uom_category_id" invisible="1"/>
@@ -173,11 +173,11 @@
                                         options="{'no_create': True}"/>
                                 </div>
                                 <div class="d-flex pt-2">
-                                    <span attrs="{'invisible': [('product_has_tax', '=', False)]}" class="oe_inline o_form_label ml-1 mr-1"> ( </span>
+                                    <span attrs="{'invisible': [('product_has_tax', '=', False)]}" class="oe_inline o_form_label ms-1 me-1"> ( </span>
                                     <field name="amount_tax"
-                                        class="pl-0"
+                                        class="ps-0"
                                         attrs="{'invisible': [('product_has_tax', '=', False)]}"/>
-                                    <span attrs="{'invisible': [('product_has_tax', '=', False)]}" class="oe_inline o_form_label ml-1 mr-3"> ) </span>
+                                    <span attrs="{'invisible': [('product_has_tax', '=', False)]}" class="oe_inline o_form_label ms-1 me-3"> ) </span>
                                 </div>
                             </div>
                         </group><group>
@@ -248,7 +248,7 @@
                                 <div class="row">
                                     <div class="col-12">
                                         <strong class="o_kanban_record_title"><span><t t-esc="record.name.value"/></span></strong>
-                                        <strong class="o_kanban_record_subtitle float-right"><span class="text-right"><field name="total_amount" widget="monetary"/></span></strong>
+                                        <strong class="o_kanban_record_subtitle float-end"><span class="text-end"><field name="total_amount" widget="monetary"/></span></strong>
                                     </div>
                                 </div>
                                 <div class="row mt8">
@@ -256,7 +256,7 @@
                                         <span><t t-esc="record.employee_id.value"/> <t t-esc="record.date.value"/></span>
                                     </div>
                                     <div class="col-6">
-                                        <span class="float-right text-right">
+                                        <span class="float-end text-end">
                                             <field name="state" widget="label_selection" options="{'classes': {'draft': 'default', 'reported': 'primary', 'refused': 'danger', 'done': 'warning',
                                             'approved': 'success'}}"/>
                                         </span>
@@ -765,8 +765,8 @@
                                     <field name="analytic_account_id" optional="show" domain="['|', ('company_id', '=', parent.company_id), ('company_id', '=', False)]" groups="analytic.group_analytic_accounting"/>
                                     <field name="analytic_tag_ids" optional="hide" widget="many2many_tags" groups="analytic.group_analytic_tags"/>
                                     <field name="account_id" optional="hide" readonly="True"/>
-                                    <button name="action_get_attachment_view" type="object" icon="fa-paperclip" aria-label="View Attachments" title="View Attachments" class="float-right pr-0" readonly="True"/>
-                                    <field name="attachment_number" class="text-right pl-0 pr-4" width="1" nolabel="1"/>
+                                    <button name="action_get_attachment_view" type="object" icon="fa-paperclip" aria-label="View Attachments" title="View Attachments" class="float-end pe-0" readonly="True"/>
+                                    <field name="attachment_number" class="text-end ps-0 pe-4" width="1" nolabel="1"/>
                                     <field name="product_has_cost" invisible="True"/>
                                     <field name="unit_amount" optional="hide" widget="monetary" attrs="{'readonly': [('product_has_cost', '=', False)]}" options="{'currency_field': 'currency_id'}"/>
                                     <field name="currency_id" optional="hide" readonly="True"/>
@@ -826,7 +826,7 @@
                                 <div class="row">
                                     <div class="col-12">
                                         <strong class="o_kanban_record_title"><span><t t-esc="record.name.value"/></span></strong>
-                                        <strong class="o_kanban_record_subtitle float-right"><span class="text-right"><field name="total_amount" widget="monetary"/></span></strong>
+                                        <strong class="o_kanban_record_subtitle float-end"><span class="text-end"><field name="total_amount" widget="monetary"/></span></strong>
                                     </div>
                                 </div>
                                 <div class="row mt8">
@@ -834,7 +834,7 @@
                                         <span><t t-esc="record.employee_id.value"/> <t t-esc="record.accounting_date.value"/></span>
                                     </div>
                                     <div class="col-6">
-                                        <span class="float-right text-right">
+                                        <span class="float-end text-end">
                                             <field name="state" widget="label_selection" options="{'classes': {'draft': 'default', 'submit': 'default', 'cancel': 'danger', 'post': 'warning',
                                             'done': 'success'}}"/>
                                         </span>
diff --git a/addons/hr_holidays/static/src/leave_stats/leave_stats.xml b/addons/hr_holidays/static/src/leave_stats/leave_stats.xml
index c9d85655067..c1cef412ac6 100644
--- a/addons/hr_holidays/static/src/leave_stats/leave_stats.xml
+++ b/addons/hr_holidays/static/src/leave_stats/leave_stats.xml
@@ -21,7 +21,7 @@
             <div t-if="state.departmentLeaves.length === 0">
                 None
             </div>
-            <div t-foreach="state.departmentLeaves" t-as="leave" t-key="leave_index" t-attf-class="d-flex flex-row justify-content-between {{leave.sameEmployee ? 'font-weight-bold': ''}}">
+            <div t-foreach="state.departmentLeaves" t-as="leave" t-key="leave_index" t-attf-class="d-flex flex-row justify-content-between {{leave.sameEmployee ? 'fw-bold': ''}}">
                 <span><t t-esc="leave.employee_id[1]"/>: <t t-esc="leave.number_of_days"/> day(s)</span>
                 <span><t t-esc="leave.dateFrom"/> - <t t-esc="leave.dateTo"/></span>
             </div>
diff --git a/addons/hr_holidays/static/src/scss/accrual_plan_level.scss b/addons/hr_holidays/static/src/scss/accrual_plan_level.scss
index 3264dd86276..3682ca9be8b 100644
--- a/addons/hr_holidays/static/src/scss/accrual_plan_level.scss
+++ b/addons/hr_holidays/static/src/scss/accrual_plan_level.scss
@@ -1,4 +1,4 @@
-$o-hr-holidays-border-color: gray('300');
+$o-hr-holidays-border-color: map-get($grays, '300');
 
 .o_hr_holidays_hierarchy {
     margin-left: -$o-horizontal-padding;
diff --git a/addons/hr_holidays/static/src/scss/time_off.scss b/addons/hr_holidays/static/src/scss/time_off.scss
index edebb7d77b3..a549bf18356 100644
--- a/addons/hr_holidays/static/src/scss/time_off.scss
+++ b/addons/hr_holidays/static/src/scss/time_off.scss
@@ -137,7 +137,7 @@
             padding: 16px;
         }
         .col_right {
-            background-color: gray('200');
+            background-color: map-get($grays, '200');
             padding-top: 28px;
         }
         .o_hr_leave_date {
diff --git a/addons/hr_holidays/static/src/xml/time_off_calendar.xml b/addons/hr_holidays/static/src/xml/time_off_calendar.xml
index e5b82ef8791..e80eb3a9393 100644
--- a/addons/hr_holidays/static/src/xml/time_off_calendar.xml
+++ b/addons/hr_holidays/static/src/xml/time_off_calendar.xml
@@ -13,11 +13,11 @@
     <t t-name="hr_holidays.calendar.popover.placeholder">
         <div t-attf-class="o_cw_popover popover card shadow #{typeof color === 'number' ? _.str.sprintf('o_calendar_color_%s', color) : ''}" role="tooltip">
             <div class="arrow"/>
-            <div class="card-header d-flex justify-content-between py-2 pr-2">
+            <div class="card-header d-flex justify-content-between py-2 pe-2">
                 <h4 class="popover-header border-0 p-0 pt-1"/>
-                <div class="ml-4">
+                <div class="ms-4">
                     <i t-if="calendarIcon" t-attf-class="fa {{calendarIcon}}"></i>
-                    <span class="o_cw_popover_close ml-1"><i class="fa fa-close small"/></span>
+                    <span class="o_cw_popover_close ms-1"><i class="fa fa-close small"/></span>
                 </div>
             </div>
             <div class="o_cw_body">
@@ -42,16 +42,16 @@
             </ul>
             <div class="card-footer border-top" t-if="widget.canEdit or widget.canDelete">
                 <a t-if="widget.canEdit" href="#" class="btn btn-primary o_cw_popover_edit">Edit</a>
-                <a t-if="widget.canDelete" href="#" class="btn btn-secondary o_cw_popover_delete ml-2">Delete</a>
+                <a t-if="widget.canDelete" href="#" class="btn btn-secondary o_cw_popover_delete ms-2">Delete</a>
             </div>
         </div>
     </t>
 
     <t t-name="FieldRadioIcon.button">
-        <div t-if="mode === 'edit'" class="custom-control custom-radio o_radio_item" aria-atomic="true">
-            <input type="radio" class="custom-control-input o_radio_input" t-att-checked="checked ? true : undefined" t-att-disabled="disabled ? true : undefined"
+        <div t-if="mode === 'edit'" class="custom-control form-check o_radio_item" aria-atomic="true">
+            <input type="radio" class="form-check-input o_radio_input" t-att-checked="checked ? true : undefined" t-att-disabled="disabled ? true : undefined"
                 t-att-name="name" t-att-data-value="value[0]" t-att-data-index="index" t-att-id="id"/>
-            <label class="custom-control-label o_form_label" t-att-for="id"><img t-attf-src="/hr_holidays/static/src/img/icons/{{value[1]}}" width="48" height="48" /></label>
+            <label class="form-check-label o_form_label" t-att-for="id"><img t-attf-src="/hr_holidays/static/src/img/icons/{{value[1]}}" width="48" height="48" /></label>
         </div>
         <div t-else="">
             <img t-attf-src="/hr_holidays/static/src/img/icons/{{value[1]}}" width="48" height="48"/>
diff --git a/addons/hr_holidays/views/hr_leave_allocation_views.xml b/addons/hr_holidays/views/hr_leave_allocation_views.xml
index 542e78da1e6..9b64198d116 100644
--- a/addons/hr_holidays/views/hr_leave_allocation_views.xml
+++ b/addons/hr_holidays/views/hr_leave_allocation_views.xml
@@ -256,7 +256,7 @@
             <tree string="Allocation Requests" sample="1" decoration-info="state == 'draft'">
                 <field name="employee_id" decoration-muted="not active_employee"/>
                 <field name="department_id" optional="hide"/>
-                <field name="holiday_status_id" class="font-weight-bold"/>
+                <field name="holiday_status_id" class="fw-bold"/>
                 <field name="name"/>
                 <field name="duration_display" string="Duration"/>
                 <field name="date_from" string="Validity Start" optional="hide"/>
@@ -355,21 +355,21 @@
                 <templates>
                     <t t-name="kanban-box">
                         <div class="oe_kanban_global_click container">
-                            <div class="row no-gutters">
+                            <div class="row g-0">
                                 <div class="col-3">
                                     <img t-att-src="kanban_image('hr.employee', 'avatar_128', record.employee_id.raw_value)"
                                         t-att-title="record.employee_id.value"
                                         t-att-alt="record.employee_id.value"
-                                        class="o_image_64_cover float-left mr4"/>
+                                        class="o_image_64_cover float-start mr4"/>
                                 </div>
                                 <div class="col-9">
-                                    <span class="badge badge-pill float-right mt4 mr16"><t t-esc="record.number_of_days.value"/> days</span>
+                                    <span class="badge rounded-pill float-end mt4 mr16"><t t-esc="record.number_of_days.value"/> days</span>
                                     <strong class="o_kanban_record_title"><t t-esc="record.employee_id.value"/></strong>
                                     <div class="text-muted o_kanban_record_subtitle">
                                         <t t-esc="record.holiday_status_id.value"/>
                                     </div>
                                     <div class="o_dropdown_kanban dropdown" groups="base.group_user">
-                                        <a role="button" class="dropdown-toggle o-no-caret btn" data-toggle="dropdown" href="#" aria-label="Dropdown menu" title="Dropdown menu">
+                                        <a role="button" class="dropdown-toggle o-no-caret btn" data-bs-toggle="dropdown" href="#" aria-label="Dropdown menu" title="Dropdown menu">
                                             <span class="fa fa-ellipsis-v"/>
                                         </a>
                                         <div class="dropdown-menu" role="menu">
@@ -380,14 +380,14 @@
                                     <div t-if="['validate', 'refuse'].includes(record.state.raw_value)">
                                         <span t-if="record.state.raw_value === 'validate'" class="fa fa-check text-muted" aria-label="validated"/>
                                         <span t-else="" class="fa fa-ban text-muted" aria-label="refused"/>
-                                        <t t-set="classname" t-value="{'validate': 'badge-success', 'refuse': 'badge-danger'}[record.state.raw_value] || 'badge-light'"/>
-                                        <span t-attf-class="badge badge-pill {{ classname }}"><t t-esc="record.state.value"/></span>
+                                        <t t-set="classname" t-value="{'validate': 'text-bg-success', 'refuse': 'text-bg-danger'}[record.state.raw_value] || 'text-bg-light'"/>
+                                        <span t-attf-class="badge rounded-pill {{ classname }}"><t t-esc="record.state.value"/></span>
                                     </div>
                                     <div t-if="record.can_approve.raw_value">
-                                        <button t-if="record.state.raw_value === 'confirm'" name="action_validate" type="object" class="btn btn-link btn-sm pl-0">
+                                        <button t-if="record.state.raw_value === 'confirm'" name="action_validate" type="object" class="btn btn-link btn-sm ps-0">
                                             <i class="fa fa-check"/> Validate
                                         </button>
-                                        <button t-if="record.state.raw_value === 'confirm'" name="action_refuse" type="object" class="btn btn-link btn-sm pl-0">
+                                        <button t-if="record.state.raw_value === 'confirm'" name="action_refuse" type="object" class="btn btn-link btn-sm ps-0">
                                             <i class="fa fa-times"/> Refuse
                                         </button>
                                     </div>
@@ -411,7 +411,7 @@
                         <img t-att-src="activity_image('hr.employee', 'avatar_128', record.employee_id.raw_value)" t-att-title="record.employee_id.value" t-att-alt="record.employee_id.value"/>
                         <div>
                             <field name="employee_id"/>
-                            <span class="ml-3 text-muted">
+                            <span class="ms-3 text-muted">
                                 <field name="number_of_days"/> days
                             </span>
                             <field name="holiday_status_id" muted="1" display="full"/>
diff --git a/addons/hr_holidays/views/hr_leave_type_views.xml b/addons/hr_holidays/views/hr_leave_type_views.xml
index 15fbc98196c..f8045112c5c 100644
--- a/addons/hr_holidays/views/hr_leave_type_views.xml
+++ b/addons/hr_holidays/views/hr_leave_type_views.xml
@@ -111,7 +111,7 @@
                             </div>
                             <div>
                                 <span>Max Time Off: <field name="max_leaves"/></span>
-                                <span class="float-right">Time Off Taken: <field name="leaves_taken"/></span>
+                                <span class="float-end">Time Off Taken: <field name="leaves_taken"/></span>
                             </div>
                         </div>
                     </t>
diff --git a/addons/hr_holidays/views/hr_leave_views.xml b/addons/hr_holidays/views/hr_leave_views.xml
index a8abce78508..c75dfa6d284 100644
--- a/addons/hr_holidays/views/hr_leave_views.xml
+++ b/addons/hr_holidays/views/hr_leave_views.xml
@@ -109,15 +109,15 @@
                 <templates>
                     <t t-name="kanban-box">
                         <div class="d-flex flex-column justify-content-between oe_kanban_global_click container">
-                            <div class="row no-gutters">
+                            <div class="row g-0">
                                 <div class="o_leave_kanban_info col-12">
-                                    <span class="badge badge-pill float-right mt4 mr16"><t t-esc="record.number_of_days.value"/> days</span>
+                                    <span class="badge rounded-pill float-end mt4 mr16"><t t-esc="record.number_of_days.value"/> days</span>
                                     <strong class="o_kanban_record_title"><t t-esc="record.employee_id.value"/></strong>
                                     <div class="text-muted o_kanban_record_subtitle">
                                         <t t-esc="record.holiday_status_id.value"/>
                                     </div>
                                     <div class="o_dropdown_kanban dropdown" groups="base.group_user">
-                                        <a role="button" class="dropdown-toggle o-no-caret btn" data-toggle="dropdown" href="#" aria-label="Dropdown menu" title="Dropdown menu">
+                                        <a role="button" class="dropdown-toggle o-no-caret btn" data-bs-toggle="dropdown" href="#" aria-label="Dropdown menu" title="Dropdown menu">
                                             <span class="fa fa-ellipsis-v"/>
                                         </a>
                                         <div class="dropdown-menu" role="menu">
@@ -137,25 +137,25 @@
                                 </div>
                             </div>
                             <div class="d-flex justify-content-end">
-                                <div class="mr-2 d-flex align-items-center" t-if="['validate', 'refuse'].includes(record.state.raw_value)">
-                                    <span t-if="record.state.raw_value === 'validate'" class="fa fa-check text-muted mr-1" aria-label="validated"/>
-                                    <span t-else="" class="fa fa-ban text-muted mr-1" aria-label="refused"/>
-                                    <t t-set="classname" t-value="{'validate': 'badge-success', 'refuse': 'badge-danger'}[record.state.raw_value] || 'badge-light'"/>
-                                    <span t-attf-class="badge badge-pill {{ classname }}"><t t-esc="record.state.value"/></span>
+                                <div class="me-2 d-flex align-items-center" t-if="['validate', 'refuse'].includes(record.state.raw_value)">
+                                    <span t-if="record.state.raw_value === 'validate'" class="fa fa-check text-muted me-1" aria-label="validated"/>
+                                    <span t-else="" class="fa fa-ban text-muted me-1" aria-label="refused"/>
+                                    <t t-set="classname" t-value="{'validate': 'text-bg-success', 'refuse': 'text-bg-danger'}[record.state.raw_value] || 'text-bg-light'"/>
+                                    <span t-attf-class="badge rounded-pill {{ classname }}"><t t-esc="record.state.value"/></span>
                                 </div>
-                                <div class="mr-2 align-items-center" t-if="['confirm', 'validate1'].includes(record.state.raw_value)">
-                                    <button t-if="record.state.raw_value === 'confirm'" name="action_approve" type="object" class="btn btn-link btn-sm pl-0">
+                                <div class="me-2 align-items-center" t-if="['confirm', 'validate1'].includes(record.state.raw_value)">
+                                    <button t-if="record.state.raw_value === 'confirm'" name="action_approve" type="object" class="btn btn-link btn-sm ps-0">
                                         <i class="fa fa-thumbs-up"/> Approve
                                     </button>
-                                    <button t-if="record.state.raw_value === 'validate1'" name="action_validate" type="object" class="btn btn-link btn-sm pl-0" groups="hr_holidays.group_hr_holidays_manager">
+                                    <button t-if="record.state.raw_value === 'validate1'" name="action_validate" type="object" class="btn btn-link btn-sm ps-0" groups="hr_holidays.group_hr_holidays_manager">
                                         <i class="fa fa-check"/> Validate
                                     </button>
-                                    <button t-if="['confirm', 'validate1'].includes(record.state.raw_value)" name="action_refuse" type="object" class="btn btn-link btn-sm pl-0">
+                                    <button t-if="['confirm', 'validate1'].includes(record.state.raw_value)" name="action_refuse" type="object" class="btn btn-link btn-sm ps-0">
                                         <i class="fa fa-times"/> Refuse
                                     </button>
                                 </div>
-                                <div class="text-right">
-                                    <button t-if="record.supported_attachment_ids_count.raw_value > 0" name="action_documents" type="object" class="btn btn-link btn-sm pl-0">
+                                <div class="text-end">
+                                    <button t-if="record.supported_attachment_ids_count.raw_value > 0" name="action_documents" type="object" class="btn btn-link btn-sm ps-0">
                                         <i class="fa fa-paperclip"> <field name="supported_attachment_ids_count" nolabel="1"/></i>
                                     </button>
                                 </div>
@@ -178,7 +178,7 @@
                     <img t-att-src="kanban_image('hr.employee', 'avatar_128', record.employee_id.raw_value)"
                         t-att-title="record.employee_id.value"
                         t-att-alt="record.employee_id.value"
-                        class="o_image_64_cover float-left mr4"/>
+                        class="o_image_64_cover float-start mr4"/>
                 </div>
             </xpath>
             <xpath expr="//div[hasclass('o_leave_kanban_info')]" position="attributes">
@@ -202,7 +202,7 @@
                         <img t-att-src="activity_image('hr.employee', 'avatar_128', record.employee_id.raw_value)" t-att-title="record.employee_id.value" t-att-alt="record.employee_id.value" width="50" height="50"/>
                         <div>
                             <field name="name"/>
-                            <span class="ml-3 text-muted">
+                            <span class="ms-3 text-muted">
                                 <field name="number_of_days"/> days
                             </span>
                             <div class="text-muted">
@@ -312,7 +312,7 @@
                                     <field name="request_unit_hours" attrs="{
                                         'readonly': [('state', 'not in', ('draft', 'confirm'))],
                                         'invisible': [('leave_type_request_unit', '!=', 'hour')]
-                                    }" class="ml-5"/>
+                                    }" class="ms-5"/>
                                     <label for="request_unit_hours" attrs="{
                                         'invisible': [('leave_type_request_unit', '!=', 'hour')]
                                     }"/>
@@ -522,7 +522,7 @@
                 <field name="all_employee_ids" widget="many2many_avatar_employee" decoration-muted="not active_employee" string="Employees" />
                 <field name="department_id" optional="hidden"/>
                 <field name="holiday_type" string="Mode" groups="base.group_no_one"/>
-                <field name="holiday_status_id" class="font-weight-bold"/>
+                <field name="holiday_status_id" class="fw-bold"/>
                 <field name="name"/>
                 <field name="date_from"/>
                 <field name="date_to"/>
diff --git a/addons/hr_holidays/views/hr_views.xml b/addons/hr_holidays/views/hr_views.xml
index 49eb0762b24..59c0fd44d82 100644
--- a/addons/hr_holidays/views/hr_views.xml
+++ b/addons/hr_holidays/views/hr_views.xml
@@ -88,14 +88,14 @@
             </xpath>
             <xpath expr="//strong[hasclass('o_kanban_record_title')]" position="inside">
                  <!-- Employee is absent, in holiday but he is connected -->
-                <div class="float-right"
+                <div class="float-end"
                      t-if="record.hr_icon_display.raw_value == 'presence_holiday_present'">
                     <span class="fa fa-plane text-success" role="img" aria-label="Present but on leave"
                           title="Present but on leave" name="presence_absent_active">
                     </span>
                 </div>
                 <!-- Employee is on holiday, not present and not connected -->
-                <div class="float-right"
+                <div class="float-end"
                      t-if="record.hr_icon_display.raw_value == 'presence_holiday_absent'"
                      name="presence_absent">
                     <span class="fa fa-plane text-warning" role="img" aria-label="To define" title="On Leave"/>
@@ -119,7 +119,7 @@
             <xpath expr="//div[@name='presence_absent_active']" position="after">
                 <!-- Employee is absent, in holiday but he is connected -->
                 <!-- green plane -->
-                <div class="float-right"
+                <div class="float-end"
                      t-if="record.hr_icon_display.raw_value == 'presence_holiday_present'">
                     <span class="fa fa-plane text-success" role="img" aria-label="Present but on leave"
                           title="Present but on leave" name="presence_absent_active">
@@ -127,7 +127,7 @@
                 </div>
                 <!-- Employee is on holiday, not present and not connected -->
                 <!-- orange plane -->
-                <div class="float-right"
+                <div class="float-end"
                      t-if="record.hr_icon_display.raw_value == 'presence_holiday_absent'"
                      name="presence_absent">
                     <span class="fa fa-plane text-warning" role="img" aria-label="To define" title="On Leave"/>
diff --git a/addons/hr_org_chart/static/src/js/hr_org_chart.js b/addons/hr_org_chart/static/src/js/hr_org_chart.js
index 93f2934b525..783abd91894 100644
--- a/addons/hr_org_chart/static/src/js/hr_org_chart.js
+++ b/addons/hr_org_chart/static/src/js/hr_org_chart.js
@@ -91,7 +91,7 @@ var FieldOrgChart = AbstractField.extend({
             }
             orgData.view_employee_id = self.recordData.id;
             self.$el.html(QWeb.render("hr_org_chart", orgData));
-            self.$('[data-toggle="popover"]').each(function () {
+            self.$('[data-bs-toggle="popover"]').each(function () {
                 $(this).popover({
                     html: true,
                     title: function () {
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 7a3a2ff4c05..751d6d67cdb 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
@@ -25,7 +25,7 @@
         border-left: 1px solid $o-hr-org-chart-border-color;
 
         .o_org_chart_title {
-            color: gray('600')
+            color: map-get($grays, '600')
         }
     }
 }
@@ -67,7 +67,8 @@
             &:before {
                 @include o-hr-org-chart-line;
                 border-width: 0 0 $o-hr-org-chart-entry-line-w $o-hr-org-chart-entry-line-w;
-                @include size(($o-hr-org-chart-entry-pic-size*0.5) - ($o-hr-org-chart-entry-v-gap*2), $o-hr-org-chart-entry-pic-size*0.5 + $o-hr-org-chart-entry-v-gap*2 );
+                width: ($o-hr-org-chart-entry-pic-size*0.5) - ($o-hr-org-chart-entry-v-gap*2);
+                height: $o-hr-org-chart-entry-pic-size*0.5 + $o-hr-org-chart-entry-v-gap*2 ;
                 @include o-position-absolute(
                     $left: $o-hr-org-chart-entry-pic-size*0.5 - $o-hr-org-chart-entry-line-w*0.5,
                     $top: 100%
@@ -105,7 +106,8 @@
             &:before {
                 @include o-hr-org-chart-line;
                 border-top-width:  $o-hr-org-chart-entry-line-w;
-                @include size($tmp-gap-base, 0);
+                width: $tmp-gap-base;
+                height: 0;
                 @include o-position-absolute(
                     $left: $tmp-gap-base*-0.5 + $o-hr-org-chart-entry-pic-size*0.1 + $o-hr-org-chart-entry-line-w*0.5,
                     $top: $o-hr-org-chart-entry-pic-size*0.5
@@ -150,9 +152,9 @@
                 float: right;
                 cursor: pointer;
                 margin-right: 5px;
-                color: gray('600');
+                color: map-get($grays, '600');
                 background: $o-hr-org-chart-bg;
-                border: 1px solid gray('600');
+                border: 1px solid map-get($grays, '600');
                 &:hover {
                     color: $o-brand-primary;
                     border-color: $o-brand-primary;
@@ -166,7 +168,7 @@
                 display: block;
                 line-height: 1.2;
                 font-size: 11px;
-                color: lighten(gray('600'), 15%);
+                color: lighten(map-get($grays, '600'), 15%);
             }
         }
 
@@ -209,7 +211,7 @@
                 display: block;
 
                 .o_media_heading {
-                    color: lighten(gray('600'), 5%);
+                    color: lighten(map-get($grays, '600'), 5%);
                     font-size: 13px;
                 }
             }
@@ -223,7 +225,7 @@
                         color: $o-brand-primary;
                     }
                     strong {
-                        color: lighten(gray('600'), 5%);
+                        color: lighten(map-get($grays, '600'), 5%);
                     }
                 }
             }
@@ -267,7 +269,8 @@
         }
 
         span {
-            @include size(30px, 30px);
+            width: 30px;
+            height: 30px;
             margin-right: 10px;
             border-radius: 100%;
             background-position: center;
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 0e4918b4367..661f6a2556e 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
@@ -22,14 +22,14 @@
         <div class="flex-grow-1">
             <span
                     t-if="employee.indirect_sub_count &gt; 0"
-                    class="badge badge-pill"
+                    class="badge rounded-pill"
                     tabindex="0"
                     data-trigger="focus"
                     t-att-data-emp-name="employee.name"
                     t-att-data-emp-id="employee.id"
                     t-att-data-emp-dir-subs="employee.direct_sub_count"
                     t-att-data-emp-ind-subs="employee.indirect_sub_count"
-                    data-toggle="popover">
+                    data-bs-toggle="popover">
                 <t t-esc="employee.indirect_sub_count"/>
             </span>
 
@@ -113,13 +113,13 @@
 </t>
 
 <t t-name="hr_orgchart_emp_popover">
-    <div class="popover o_org_chart_popup" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>
+    <div class="popover o_org_chart_popup" role="tooltip"><div class="tooltip-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>
 </t>
 
 <t t-name="hr_orgchart_emp_popover_content">
     <table class="table table-sm">
         <thead>
-            <td class="text-right"><t t-esc="employee.direct_sub_count"/></td>
+            <td class="text-end"><t t-esc="employee.direct_sub_count"/></td>
             <td>
                 <a href="#" class="o_employee_sub_redirect" data-type='direct'
                         t-att-data-employee-name="employee.name" t-att-data-employee-id="employee.id">
@@ -128,7 +128,7 @@
         </thead>
         <tbody>
             <tr>
-                <td class="text-right">
+                <td class="text-end">
                     <t t-esc="employee.indirect_sub_count - employee.direct_sub_count"/>
                 </td>
                 <td>
@@ -138,7 +138,7 @@
                 </td>
             </tr>
             <tr>
-                <td class="text-right"><t t-esc="employee.indirect_sub_count"/></td>
+                <td class="text-end"><t t-esc="employee.indirect_sub_count"/></td>
                 <td>
                     <a href="#" class="o_employee_sub_redirect" data-type='total'
                             t-att-data-employee-name="employee.name" t-att-data-employee-id="employee.id">
@@ -153,7 +153,7 @@
     <div class="d-flex align-items-center">
         <span class="flex-shrink-0" t-att-style='"background-image:url(\"/web/image/hr.employee.public/" + employee.id + "/avatar_1024/\")"'/>
         <b class="flew-grow-1"><t t-esc="employee.name"/></b>
-        <a href="#" class="ml-auto o_employee_redirect" t-att-data-employee-id="employee.id"><i class="fa fa-external-link" role="img" aria-label='Redirect' title="Redirect"></i></a>
+        <a href="#" class="ms-auto o_employee_redirect" t-att-data-employee-id="employee.id"><i class="fa fa-external-link" role="img" aria-label='Redirect' title="Redirect"></i></a>
     </div>
 </t>
 
diff --git a/addons/hr_recruitment/views/hr_recruitment_views.xml b/addons/hr_recruitment/views/hr_recruitment_views.xml
index 8fd69b2f930..3684c80282d 100644
--- a/addons/hr_recruitment/views/hr_recruitment_views.xml
+++ b/addons/hr_recruitment/views/hr_recruitment_views.xml
@@ -34,7 +34,7 @@
                 <field name="name" readonly="1"/>
                 <field name="stage_id"/>
                 <field name="priority" widget="priority" optional="show"/>
-                <field name="partner_mobile" widget="phone" readonly="1" optional="show" class="text-right"/>
+                <field name="partner_mobile" widget="phone" readonly="1" optional="show" class="text-end"/>
                 <field name="categ_ids" widget="many2many_tags" options="{'color_field': 'color'}" optional="show"/>
                 <field name="user_id" widget="many2one_avatar_user" optional="show"/>
                 <field name="interviewer_id" widget="many2one_avatar_user" optional="hide"/>
@@ -344,9 +344,9 @@
                             <div class="ribbon ribbon-top-right" attrs="{'invisible': [('date_closed', '=', False)]}">
                                 <span class="bg-success">Hired</span>
                             </div>
-                            <span class="badge badge-pill badge-danger float-end mr-4" attrs="{'invisible': ['|', ('active', '=', True), ('refuse_reason_id', '=', False)]}">Refused</span>
+                            <span class="badge rounded-pill text-bg-danger float-end me-4" attrs="{'invisible': ['|', ('active', '=', True), ('refuse_reason_id', '=', False)]}">Refused</span>
                             <div class="o_dropdown_kanban dropdown">
-                                <a class="dropdown-toggle o-no-caret btn" role="button" data-toggle="dropdown" href="#" aria-label="Dropdown menu" title="Dropdown menu" data-display="static">
+                                <a class="dropdown-toggle o-no-caret btn" role="button" data-bs-toggle="dropdown" href="#" aria-label="Dropdown menu" title="Dropdown menu" data-bs-display="static">
                                     <span class="fa fa-ellipsis-v"/>
                                 </a>
                                 <div class="dropdown-menu" role="menu">
@@ -373,7 +373,7 @@
                                 <t t-if="record.partner_mobile.raw_value"><i class="fa fa-mobile mr4" role="img" aria-label="Mobile" title="Mobile"/><field name="partner_mobile" widget="phone"/><br/></t>
                                 <div class="o_kanban_record_bottom mt4">
                                     <div class="oe_kanban_bottom_left">
-                                        <div class="float-left mr4" groups="base.group_user">
+                                        <div class="float-start mr4" groups="base.group_user">
                                             <field name="priority" widget="priority"/>
                                         </div>
                                         <div class="o_kanban_inline_block mr8">
@@ -386,7 +386,7 @@
                                                 <t t-esc="record.attachment_number.raw_value"/>
                                             </span>
                                         </a>
-                                        <div class="o_kanban_state_with_padding ml-1 mr-2" >
+                                        <div class="o_kanban_state_with_padding ms-1 me-2" >
                                             <field name="kanban_state" widget="kanban_state_selection"/>
                                             <field name="legend_normal" invisible="1"/>
                                             <field name="legend_blocked" invisible="1"/>
@@ -811,7 +811,7 @@
                         <field name="is_warning_visible" invisible="1"/>
                         <span attrs="{'invisible': [('is_warning_visible', '=', False)]}">
                             <span
-                                class="fa fa-exclamation-triangle text-danger pl-3">
+                                class="fa fa-exclamation-triangle text-danger ps-3">
                             </span>
                             <span class="text-danger">
                                 All applications will lose their hired date and hired status.
@@ -967,13 +967,13 @@
                                         <div class="col-4">
                                             <h3 class="o_kanban_record_title"><field name="source_id"/></h3>
                                         </div>
-                                        <div class="col-8 text-right">
+                                        <div class="col-8 text-end">
                                             <div><field name="job_id"/></div>
                                         </div>
                                     </div>
                                 </div>
                                 <div class="o_kanban_record_body mt-3">
-                                    <div class="text-right">
+                                    <div class="text-end">
                                         <field name="email" attrs="{'invisible': [('has_domain', '=', False)]}" widget="email"/>
                                         <button name="create_alias" class="btn btn-primary mb-2" type="object" attrs="{'invisible': ['|', ('has_domain', '=', False), ('email', '!=', False)]}">Generate Email</button>
                                     </div>
diff --git a/addons/hr_recruitment/views/res_config_settings_views.xml b/addons/hr_recruitment/views/res_config_settings_views.xml
index d110ab2fc5f..d3743f04e2f 100644
--- a/addons/hr_recruitment/views/res_config_settings_views.xml
+++ b/addons/hr_recruitment/views/res_config_settings_views.xml
@@ -45,7 +45,7 @@
                                 <div class="o_setting_right_pane" id="sms_settings">
                                     <div class="o_form_label">
                                         Send SMS
-                                        <a href="https://www.odoo.com/documentation/master/applications/marketing/sms_marketing/pricing/pricing_and_faq.html" title="Documentation" class="ml-1 o_doc_link" target="_blank"></a>
+                                        <a href="https://www.odoo.com/documentation/master/applications/marketing/sms_marketing/pricing/pricing_and_faq.html" title="Documentation" class="ms-1 o_doc_link" target="_blank"></a>
                                     </div>
                                     <div class="text-muted">
                                         Send texts to your contacts
diff --git a/addons/hr_recruitment_skills/views/hr_applicant_skill_views.xml b/addons/hr_recruitment_skills/views/hr_applicant_skill_views.xml
index 691d3b1d8b5..c014865f4cc 100644
--- a/addons/hr_recruitment_skills/views/hr_applicant_skill_views.xml
+++ b/addons/hr_recruitment_skills/views/hr_applicant_skill_views.xml
@@ -20,7 +20,7 @@
                                     attrs="{'invisible': ['|', ('skill_id', '=', False), ('skill_type_id', '=', False)]}"/>
                             <div class="o_row"
                                     attrs="{'invisible': ['|', ('skill_id', '=', False), ('skill_type_id', '=', False)]}">
-                                <span class="col-4 pl-0">
+                                <span class="col-4 ps-0">
                                     <field name="skill_level_id"
                                             attrs="{'readonly': [('skill_id', '=', False)]}"
                                             context="{'from_skill_level_dropdown': True}" />
diff --git a/addons/hr_skills/static/src/css/hr_skills.scss b/addons/hr_skills/static/src/css/hr_skills.scss
index 97153beab2a..9f58bbe49c9 100644
--- a/addons/hr_skills/static/src/css/hr_skills.scss
+++ b/addons/hr_skills/static/src/css/hr_skills.scss
@@ -43,12 +43,14 @@
 
                 &.o_resume_timeline_cell {
                     div {
-                        @include size($o-hrs-timeline-dot-size);
+                        width: $o-hrs-timeline-dot-size;
+                        height: $o-hrs-timeline-dot-size;
                     }
 
                     &:before {
                         @include o-position-absolute(0, $left: ($o-hrs-timeline-dot-size * .5 + $o-hrs-timeline-entry-padding));
-                        @include size(1px, 100%);
+                        width: 1px;
+                        height: 100%;
                         margin-left: -.01rem;
                         background-color: $border-color;
                         content: "";
@@ -126,7 +128,7 @@
 .o_form_view.o_form_editable {
     .o_form_sheet .o_hr_skills_group {
         .o_group_name {
-            background-color: gray('200');
+            background-color: map-get($grays, '200');
         }
 
         .o_resume_group_header .btn {
@@ -144,7 +146,7 @@
         }
 
         &.o_group_skills .o_group_name > b, .o_horizontal_separator {
-            color: color-contrast(gray('200'));
+            color: color-contrast(map-get($grays, '200'));
             font-style: italic;
         }
     }
diff --git a/addons/hr_skills/static/src/xml/resume_templates.xml b/addons/hr_skills/static/src/xml/resume_templates.xml
index 8909636707c..c41201fb8bb 100644
--- a/addons/hr_skills/static/src/xml/resume_templates.xml
+++ b/addons/hr_skills/static/src/xml/resume_templates.xml
@@ -4,7 +4,7 @@
 <t t-name="hr_resume_data_row">
     <tr class="o_data_row o_cursor_default" t-attf-class="o_data_row #{is_last? 'o_data_row_last' : ''}" t-att-data-id="id">
         <t t-if="data.display_type === 'classic'">
-            <td class="o_resume_timeline_cell position-relative pr-lg-2">
+            <td class="o_resume_timeline_cell position-relative pe-lg-2">
                 <div class="rounded-circle bg-info position-relative"/>
             </td>
             <td class="o_data_cell pt-0 w-100">
@@ -21,7 +21,7 @@
 </t>
 
 <t t-name="hr_trash_button">
-    <td class="o_list_record_remove pr-3">
+    <td class="o_list_record_remove pe-3">
         <button name="delete" arial-label="Delete row" class="btn btn-link text-danger">
             <i class="fa fa-trash"/>
         </button>
diff --git a/addons/hr_skills/static/src/xml/skills_templates.xml b/addons/hr_skills/static/src/xml/skills_templates.xml
index 8548b5f6cab..f3432a236ef 100644
--- a/addons/hr_skills/static/src/xml/skills_templates.xml
+++ b/addons/hr_skills/static/src/xml/skills_templates.xml
@@ -6,7 +6,7 @@
         <td class="o_data_cell o_skill_cell w-100">
             <t t-esc="data.skill_id.data.display_name"/>
         </td>
-        <td class="o_data_cell o_skill_cell pr-3">
+        <td class="o_data_cell o_skill_cell pe-3">
             <t t-esc="data.skill_level_id.data.display_name"/>
         </td>
     </tr>
@@ -14,7 +14,7 @@
 
 <t t-name="hr_default_group_row">
     <tr class="o_group_header o_group_has_content">
-        <td class="o_group_name border-0 pr-2" colspan="99">
+        <td class="o_group_name border-0 pe-2" colspan="99">
             <b t-esc="display_name"/>
         </td>
     </tr>
diff --git a/addons/hr_skills/views/hr_views.xml b/addons/hr_skills/views/hr_views.xml
index 9827b198820..d29ff0fe7e1 100644
--- a/addons/hr_skills/views/hr_views.xml
+++ b/addons/hr_skills/views/hr_views.xml
@@ -275,7 +275,7 @@
                                     attrs="{'invisible': ['|', ('skill_id', '=', False), ('skill_type_id', '=', False)]}"/>
                             <div class="o_row"
                                     attrs="{'invisible': ['|', ('skill_id', '=', False), ('skill_type_id', '=', False)]}">
-                                <span class="col-4 pl-0">
+                                <span class="col-4 ps-0">
                                     <field name="skill_level_id"
                                             attrs="{'readonly': [('skill_id', '=', False)]}"
                                             context="{'from_skill_level_dropdown': True}" />
diff --git a/addons/hr_timesheet/report/report_timesheet_templates.xml b/addons/hr_timesheet/report/report_timesheet_templates.xml
index 4db110b6613..d0f99fe4f4f 100644
--- a/addons/hr_timesheet/report/report_timesheet_templates.xml
+++ b/addons/hr_timesheet/report/report_timesheet_templates.xml
@@ -10,7 +10,7 @@
                             <th class="align-middle" t-if="show_project"><span>Project</span></th>
                             <th class="align-middle" t-if="show_task"><span>Task</span></th>
                             <th class="align-middle"><span>Description</span></th>
-                            <th class="text-right">
+                            <th class="text-end">
                                 <span t-if="is_uom_day">Days Spent</span>
                                 <span t-else="">Hours Spent</span>
                             </th>
@@ -34,7 +34,7 @@
                             <td >
                                 <span t-field="line.name" t-options="{'widget': 'text'}"/>
                             </td>
-                            <td class="text-right">
+                            <td class="text-end">
                                 <span t-if="is_uom_day" t-esc="line._get_timesheet_time_day()" t-options="{'widget': 'timesheet_uom'}"/>
                                 <span t-else="" t-field="line.unit_amount" t-options="{'widget': 'duration', 'digital': True, 'unit': 'hour', 'round': 'minute'}"/>
                             </td>
@@ -43,7 +43,7 @@
                             <t t-set="nbCols" t-value="4"/>
                             <t t-if="show_project" t-set="nbCols" t-value="nbCols + 1"/>
                             <t t-if="show_task" t-set="nbCols" t-value="nbCols + 1"/>
-                            <td class="text-right" t-attf-colspan="{{nbCols}}">
+                            <td class="text-end" t-attf-colspan="{{nbCols}}">
                                 <strong t-if="is_uom_day">
                                     <span style="margin-right: 15px;">Total (Days)</span>
                                     <t t-esc="lines._convert_hours_to_days(sum(lines.mapped('unit_amount')))" t-options="{'widget': 'timesheet_uom'}"/>
diff --git a/addons/hr_timesheet/views/hr_timesheet_portal_templates.xml b/addons/hr_timesheet/views/hr_timesheet_portal_templates.xml
index 59f81a81ae0..23977eb485d 100644
--- a/addons/hr_timesheet/views/hr_timesheet_portal_templates.xml
+++ b/addons/hr_timesheet/views/hr_timesheet_portal_templates.xml
@@ -40,20 +40,20 @@
                             <th t-if="not groupby == 'project'">Project</th>
                             <th t-if="not groupby == 'task'">Task</th>
                             <th>Description</th>
-                            <th t-if="is_uom_day" class="text-right">Days Spent</th>
-                            <th t-else="" class="text-right">Hours Spent</th>
+                            <th t-if="is_uom_day" class="text-end">Days Spent</th>
+                            <th t-else="" class="text-end">Hours Spent</th>
                         </tr>
                     </thead>
                     <t t-foreach="grouped_timesheets" t-as="timesheets_with_hours">
                         <t t-set="timesheets" t-value="timesheets_with_hours[0]"/>
                         <t t-set="hours_spent" t-value="timesheets_with_hours[1]"/>
                         <tbody style="font-size: 0.8rem">
-                            <tr t-if="not groupby =='none'" class="thead-light">
+                            <tr t-if="not groupby =='none'" class="table-light">
                                 <t t-if="groupby == 'project'">
                                     <th t-if="groupby == 'project'" colspan="5">
                                         <span t-field="timesheets[0].project_id.name"/>
                                     </th>
-                                    <th colspan="1" class="text-right text-muted">
+                                    <th colspan="1" class="text-end text-muted">
                                         <t t-if="is_uom_day">
                                             Total: <span class="text-muted" t-esc="timesheets._convert_hours_to_days(hours_spent)" t-options='{"widget": "timesheet_uom"}'/>
                                         </t>
@@ -66,7 +66,7 @@
                                     <th colspan="5">
                                         <span t-field="timesheets[0].task_id.name"/>
                                     </th>
-                                    <th colspan="1" class="text-right text-muted">
+                                    <th colspan="1" class="text-end text-muted">
                                         <t t-if="is_uom_day">
                                             Total: <span t-esc="timesheets._convert_hours_to_days(hours_spent)" t-options='{"widget": "timesheet_uom"}'/>
                                         </t>
@@ -79,7 +79,7 @@
                                     <th colspan="5">
                                         <span t-field="timesheets[0].date"/>
                                     </th>
-                                    <th colspan="1" class="text-right text-muted">
+                                    <th colspan="1" class="text-end text-muted">
                                         <t t-if="is_uom_day">
                                             Total: <span t-esc="timesheets._convert_hours_to_days(hours_spent)" t-options='{"widget": "timesheet_uom"}'/>
                                         </t>
@@ -92,7 +92,7 @@
                                     <th colspan="5">
                                         <span t-field="timesheets[0].employee_id.name"/>
                                     </th>
-                                    <th colspan="1" class="text-right text-muted">
+                                    <th colspan="1" class="text-end text-muted">
                                         <t t-if="is_uom_day">
                                             Total: <span t-esc="timesheets._convert_hours_to_days(hours_spent)" t-options='{"widget": "timesheet_uom"}'/>
                                         </t>
@@ -103,7 +103,7 @@
                                 </t>
                             </tr>
                             <tr t-else="">
-                                <div style="text-align: right;" class="mr-2 mb-1 text-muted">
+                                <div style="text-align: right;" class="me-2 mb-1 text-muted">
                                     <t t-if="is_uom_day">
                                         Total: <span t-esc="timesheets._convert_hours_to_days(hours_spent)" t-options='{"widget": "timesheet_uom"}'/>
                                     </t>
@@ -121,7 +121,7 @@
                                     <td t-if="not groupby == 'project'"><span t-field="timesheet.project_id" t-att-title="timesheet.project_id.display_name"/></td>
                                     <td t-if="not groupby == 'task'"><span t-field="timesheet.task_id" t-att-title="timesheet.task_id.display_name"/></td>
                                     <td><span t-esc="timesheet.name" t-att-title="timesheet.name"/></td>
-                                    <td class="text-right">
+                                    <td class="text-end">
                                         <span t-if="is_uom_day" t-esc="timesheet._get_timesheet_time_day()" t-options='{"widget": "timesheet_uom"}'/>
                                         <span t-else="" t-field="timesheet.unit_amount" t-options='{"widget": "float_time"}'/>
                                     </td>
diff --git a/addons/hr_timesheet/views/hr_timesheet_views.xml b/addons/hr_timesheet/views/hr_timesheet_views.xml
index 9f2f80fcf0e..64cf21409f0 100644
--- a/addons/hr_timesheet/views/hr_timesheet_views.xml
+++ b/addons/hr_timesheet/views/hr_timesheet_views.xml
@@ -232,8 +232,8 @@
                             <div class="oe_kanban_global_click o_kanban_record_has_image_fill px-0 pb-0">
                                 <div class="oe_kanban_details d-flex flex-column">
                                     <div class="o_kanban_record_top px-2 h-50">
-                                        <img t-att-src="kanban_image('hr.employee', 'avatar_128', record.employee_id.raw_value)" t-att-title="record.employee_id.value" t-att-alt="record.employee_id.value" class="o_image_40_cover float-left"/>
-                                        <div class="o_kanban_record_headings pl-4 pr-2">
+                                        <img t-att-src="kanban_image('hr.employee', 'avatar_128', record.employee_id.raw_value)" t-att-title="record.employee_id.value" t-att-alt="record.employee_id.value" class="o_image_40_cover float-start"/>
+                                        <div class="o_kanban_record_headings ps-4 pe-2">
                                             <div class="text-truncate">
                                                 <strong class="o_kanban_record_title">
                                                     <span t-esc="record.project_id.value" t-att-title="record.project_id.value"/>
diff --git a/addons/hr_timesheet/views/project_portal_templates.xml b/addons/hr_timesheet/views/project_portal_templates.xml
index 9084dedc8a0..c222420ae01 100644
--- a/addons/hr_timesheet/views/project_portal_templates.xml
+++ b/addons/hr_timesheet/views/project_portal_templates.xml
@@ -5,7 +5,7 @@
         <xpath expr="//li[@id='task-nav']" position="before">
             <li t-if="timesheets and allow_timesheets" class="list-group-item flex-grow-1" id='nav-report'>
                 <div class="o_download_pdf btn-toolbar flex-sm-nowrap">
-                    <div class="btn-group flex-grow-1 mr-1 mb-1">
+                    <div class="btn-group flex-grow-1 me-1 mb-1">
                         <a class="btn btn-secondary btn-block o_download_btn" t-att-href="task.get_portal_url(report_type='pdf', download=True)" title="Download"><i class="fa fa-download"/> Download</a>
                     </div>
                     <div class="btn-group flex-grow-1 mb-1">
@@ -16,7 +16,7 @@
         </xpath>
         <xpath expr="//li[@id='nav-header']" position="after">
             <li t-if="timesheets and allow_timesheets" class="nav-item">
-                <a class="nav-link pl-3" href="#task_timesheets">
+                <a class="nav-link ps-3" href="#task_timesheets">
                     Timesheets
                 </a>
             </li>
@@ -52,11 +52,11 @@
             <attribute name="t-value">8</attribute>
         </xpath>
         <xpath expr="//thead/tr/th[@name='project_portal_assignees']" position="after">
-            <th t-if="is_uom_day" class="text-right">Days Spent</th>
-            <th t-else="" class="text-right">Hours Spent</th>
+            <th t-if="is_uom_day" class="text-end">Days Spent</th>
+            <th t-else="" class="text-end">Hours Spent</th>
         </xpath>
         <xpath expr="//tbody/t/tr/td[@name='project_portal_assignees']" position="after">
-            <td class="text-right">
+            <td class="text-end">
                 <t t-if="is_uom_day">
                     <t t-out="timesheet_ids._convert_hours_to_days(task.effective_hours)"/>
                     <span t-if="task.planned_hours > 0"> / <t t-out="timesheet_ids._convert_hours_to_days(task.planned_hours)"/></span>
@@ -79,15 +79,15 @@
                 <th>Date</th>
                 <th>Employee</th>
                 <th>Description</th>
-                <th t-if="is_uom_day" class="text-right">Days Spent</th>
-                <th t-else="" class="text-right">Hours Spent</th>
+                <th t-if="is_uom_day" class="text-end">Days Spent</th>
+                <th t-else="" class="text-end">Hours Spent</th>
               </tr>
             </thead>
             <tr t-foreach="timesheets" t-as="timesheet">
                 <td><t t-esc="timesheet.date" t-options='{"widget": "date"}'/></td>
                 <td><t t-esc="timesheet.employee_id.name"/></td>
                 <td><t t-esc="timesheet.name"/></td>
-                <td class="text-right">
+                <td class="text-end">
                     <span t-if="is_uom_day" t-esc="timesheet._get_timesheet_time_day()" t-options='{"widget": "timesheet_uom"}'/>
                     <span t-else="" t-field="timesheet.unit_amount" t-options='{"widget": "float_time"}'/>
                 </td>
@@ -95,7 +95,7 @@
             <tfoot>
                 <tr>
                     <th colspan="3"></th>
-                    <th class="text-right">
+                    <th class="text-end">
                         <t t-set="timesheets_amount" t-value="round(sum(timesheets.mapped('unit_amount')), 2) or 0.0"></t>
                         <div t-if="is_uom_day"><strong>Days Spent:</strong> <span t-esc="timesheets._convert_hours_to_days(timesheets_amount)" t-options='{"widget": "timesheet_uom"}'/></div>
                         <div t-else=""><strong>Hours Spent:</strong> <span t-esc="timesheets_amount" t-options='{"widget": "float_time"}'/></div>
diff --git a/addons/hr_timesheet/views/project_sharing_views.xml b/addons/hr_timesheet/views/project_sharing_views.xml
index 3a5bcc2394b..f3ec8ca44ff 100644
--- a/addons/hr_timesheet/views/project_sharing_views.xml
+++ b/addons/hr_timesheet/views/project_sharing_views.xml
@@ -56,7 +56,7 @@
                                             <div class="col-6">
                                                 <strong><span><t t-esc="record.employee_id.value"/></span></strong>
                                             </div>
-                                            <div class="col-6 float-end text-right">
+                                            <div class="col-6 float-end text-end">
                                                 <strong><t t-esc="record.date.value"/></strong>
                                             </div>
                                         </div>
@@ -65,7 +65,7 @@
                                                 <span><t t-esc="record.name.value"/></span>
                                             </div>
                                             <div class="col-6">
-                                                <span class="float-end text-right">
+                                                <span class="float-end text-end">
                                                     <field name="unit_amount" widget="float_time"/>
                                                 </span>
                                             </div>
@@ -78,28 +78,28 @@
                     <group attrs="{'invisible': [('analytic_account_active', '=', False)]}">
                         <group class="oe_subtotal_footer oe_right" name="project_hours">
                             <span>
-                                <label class="font-weight-bold" for="effective_hours" string="Hours Spent" attrs="{'invisible': [('encode_uom_in_days', '=', True)]}"/>
-                                <label class="font-weight-bold" for="effective_hours" string="Days Spent" attrs="{'invisible': [('encode_uom_in_days', '=', False)]}"/>
+                                <label class="fw-bold" for="effective_hours" string="Hours Spent" attrs="{'invisible': [('encode_uom_in_days', '=', True)]}"/>
+                                <label class="fw-bold" for="effective_hours" string="Days Spent" attrs="{'invisible': [('encode_uom_in_days', '=', False)]}"/>
                             </span>
                             <field name="effective_hours" widget="timesheet_uom" nolabel="1"/>
-                            <button name="action_view_subtask_timesheet" type="object" class="o_td_label o_form_label o_form_subtask_button oe_inline oe_link mr-0" attrs="{'invisible' : ['|', ('allow_subtasks', '=', False), ('subtask_effective_hours', '=', 0.0)]}">
+                            <button name="action_view_subtask_timesheet" type="object" class="o_td_label o_form_label o_form_subtask_button oe_inline oe_link me-0" attrs="{'invisible' : ['|', ('allow_subtasks', '=', False), ('subtask_effective_hours', '=', 0.0)]}">
                                 <span class="text-nowrap" attrs="{'invisible' : [('encode_uom_in_days', '=', True)]}">Sub-tasks Hours Spent</span>
                                 <span class="text-nowrap" attrs="{'invisible' : [('encode_uom_in_days', '=', False)]}">Sub-tasks Days Spent</span>
                             </button>
                             <field name="subtask_effective_hours" class="mt-2" widget="timesheet_uom"
                                   attrs="{'invisible' : ['|', ('allow_subtasks', '=', False), ('subtask_effective_hours', '=', 0.0)]}" nolabel="1"/>
                             <span>
-                                <label class="font-weight-bold" for="total_hours_spent" string="Total Hours"
+                                <label class="fw-bold" for="total_hours_spent" string="Total Hours"
                                       attrs="{'invisible': ['|', '|', ('allow_subtasks', '=', False), ('subtask_effective_hours', '=', 0.0), ('encode_uom_in_days', '=', True)]}"/>
-                                <label class="font-weight-bold" for="total_hours_spent" string="Total Days"
+                                <label class="fw-bold" for="total_hours_spent" string="Total Days"
                                       attrs="{'invisible': ['|', '|', ('allow_subtasks', '=', False), ('subtask_effective_hours', '=', 0.0), ('encode_uom_in_days', '=', False)]}"/>
                             </span>
                             <field name="total_hours_spent" widget="timesheet_uom" class="oe_subtotal_footer_separator" nolabel="1"
                                   attrs="{'invisible' : ['|', ('allow_subtasks', '=', False), ('subtask_effective_hours', '=', 0.0)]}" />
                             <span>
-                                <label class="font-weight-bold" for="remaining_hours" string="Remaining Hours"
+                                <label class="fw-bold" for="remaining_hours" string="Remaining Hours"
                                       attrs="{'invisible': ['|', ('planned_hours', '=', 0.0), ('encode_uom_in_days', '=', True)]}"/>
-                                <label class="font-weight-bold" for="remaining_hours" string="Remaining Days"
+                                <label class="fw-bold" for="remaining_hours" string="Remaining Days"
                                       attrs="{'invisible': ['|', ('planned_hours', '=', 0.0), ('encode_uom_in_days', '=', False)]}"/>
                             </span>
                             <field name="remaining_hours" widget="timesheet_uom" class="oe_subtotal_footer_separator"
@@ -126,8 +126,8 @@
             <div class="oe_kanban_bottom_left" position="inside">
                 <t name="planned_hours" t-if="record.planned_hours.raw_value &gt; 0 and record.allow_timesheets.raw_value">
                     <t t-set="badge" t-value=""/>
-                    <t t-set="badge" t-value="'badge-warning'" t-if="record.progress.raw_value &gt;= 80 and record.progress.raw_value &lt;= 100"/>
-                    <t t-set="badge" t-value="'badge-danger'" t-if="record.remaining_hours.raw_value &lt; 0"/>
+                    <t t-set="badge" t-value="'text-bg-warning'" t-if="record.progress.raw_value &gt;= 80 and record.progress.raw_value &lt;= 100"/>
+                    <t t-set="badge" t-value="'text-bg-danger'" t-if="record.remaining_hours.raw_value &lt; 0"/>
                     <t t-set="title" t-value="'Remaining days'" t-if="record.encode_uom_in_days.raw_value"/>
                     <t t-set="title" t-value="'Remaining hours'" t-else=""/>
                     <div t-attf-class="oe_kanban_align badge {{ badge }}" t-att-title="title">
diff --git a/addons/hr_timesheet/views/project_views.xml b/addons/hr_timesheet/views/project_views.xml
index b397511c83f..f3df8dcc5e8 100644
--- a/addons/hr_timesheet/views/project_views.xml
+++ b/addons/hr_timesheet/views/project_views.xml
@@ -75,7 +75,7 @@
                     <button class="oe_stat_button" name="action_show_timesheets_by_employee_invoice_type" type="object" icon="fa-clock-o" attrs="{'invisible': [('allow_timesheets', '=', False)]}" groups="hr_timesheet.group_hr_timesheet_user">
                         <div class="o_field_widget o_stat_info">
                             <div class="oe_inline">
-                                <span class="o_stat_value mr-1">
+                                <span class="o_stat_value me-1">
                                     <field name="total_timesheet_time" widget="statinfo" nolabel="1"/>
                                 </span>
                                 <span class="o_stat_value">
@@ -131,10 +131,10 @@
                                 <div class="o_td_label">
                                     <label for="planned_hours" string="Allocated Hours" attrs="{'invisible': [('encode_uom_in_days', '=', True)]}"/>
                                     <label for="planned_hours" string="Allocated Days" attrs="{'invisible': [('encode_uom_in_days', '=', False)]}"/>
-                                    <field name="planned_hours" class="oe_inline ml-2" widget="timesheet_uom_no_toggle"/>
+                                    <field name="planned_hours" class="oe_inline ms-2" widget="timesheet_uom_no_toggle"/>
                                     <span attrs="{'invisible': ['|', ('allow_subtasks', '=', False), ('subtask_count', '=', 0)]}">
                                         (incl. <field name="subtask_planned_hours" nolabel="1" groups="project.group_subtask_project" widget="timesheet_uom_no_toggle"/> on
-                                        <span class="font-weight-bold text-dark"> Sub-tasks</span>)
+                                        <span class="fw-bold text-dark"> Sub-tasks</span>)
                                     </span>
                                 </div>
                             </group>
@@ -174,7 +174,7 @@
                                                 <field name="employee_id" widget="many2one_avatar_employee"/>
                                                 <strong><span><t t-esc="record.employee_id.value"/></span></strong>
                                             </div>
-                                            <div class="col-6 float-end text-right">
+                                            <div class="col-6 float-end text-end">
                                                 <strong><t t-esc="record.date.value"/></strong>
                                             </div>
                                         </div>
@@ -183,7 +183,7 @@
                                                 <span><t t-esc="record.name.value"/></span>
                                             </div>
                                             <div class="col-6">
-                                                <span class="float-end text-right">
+                                                <span class="float-end text-end">
                                                     <field name="unit_amount" widget="float_time"/>
                                                 </span>
                                             </div>
@@ -210,8 +210,8 @@
                     <group attrs="{'invisible': [('analytic_account_active', '=', False)]}">
                         <group class="oe_subtotal_footer oe_right" name="project_hours">
                             <span>
-                                <label class="font-weight-bold" for="effective_hours" string="Hours Spent" attrs="{'invisible': [('encode_uom_in_days', '=', True)]}"/>
-                                <label class="font-weight-bold" for="effective_hours" string="Days Spent" attrs="{'invisible': [('encode_uom_in_days', '=', False)]}"/>
+                                <label class="fw-bold" for="effective_hours" string="Hours Spent" attrs="{'invisible': [('encode_uom_in_days', '=', True)]}"/>
+                                <label class="fw-bold" for="effective_hours" string="Days Spent" attrs="{'invisible': [('encode_uom_in_days', '=', False)]}"/>
                             </span>
                             <field name="effective_hours" widget="timesheet_uom" nolabel="1"/>
 
@@ -222,17 +222,17 @@
                             <field name="subtask_effective_hours" class="mt-2" widget="timesheet_uom"
                                    attrs="{'invisible' : ['|', ('allow_subtasks', '=', False), ('subtask_effective_hours', '=', 0.0)]}" nolabel="1"/>
                             <span>
-                                <label class="font-weight-bold" for="total_hours_spent" string="Total Hours"
+                                <label class="fw-bold" for="total_hours_spent" string="Total Hours"
                                        attrs="{'invisible': ['|', '|', ('allow_subtasks', '=', False), ('subtask_effective_hours', '=', 0.0), ('encode_uom_in_days', '=', True)]}"/>
-                                <label class="font-weight-bold" for="total_hours_spent" string="Total Days"
+                                <label class="fw-bold" for="total_hours_spent" string="Total Days"
                                        attrs="{'invisible': ['|', '|', ('allow_subtasks', '=', False), ('subtask_effective_hours', '=', 0.0), ('encode_uom_in_days', '=', False)]}"/>
                             </span>
                             <field name="total_hours_spent" widget="timesheet_uom" class="oe_subtotal_footer_separator" nolabel="1"
                                    attrs="{'invisible' : ['|', ('allow_subtasks', '=', False), ('subtask_effective_hours', '=', 0.0)]}" />
                             <span>
-                                <label class="font-weight-bold" for="remaining_hours" string="Remaining Hours"
+                                <label class="fw-bold" for="remaining_hours" string="Remaining Hours"
                                        attrs="{'invisible': ['|', ('planned_hours', '=', 0.0), ('encode_uom_in_days', '=', True)]}"/>
-                                <label class="font-weight-bold" for="remaining_hours" string="Remaining Days"
+                                <label class="fw-bold" for="remaining_hours" string="Remaining Days"
                                        attrs="{'invisible': ['|', ('planned_hours', '=', 0.0), ('encode_uom_in_days', '=', False)]}"/>
                             </span>
                             <field name="remaining_hours" widget="timesheet_uom" class="oe_subtotal_footer_separator"
diff --git a/addons/hr_timesheet/views/res_config_settings_views.xml b/addons/hr_timesheet/views/res_config_settings_views.xml
index 122079aa1cc..ece21060a07 100644
--- a/addons/hr_timesheet/views/res_config_settings_views.xml
+++ b/addons/hr_timesheet/views/res_config_settings_views.xml
@@ -38,7 +38,7 @@
                                 </div>
                                 <div class="content-group">
                                     <div class="mt16">
-                                        <field name="timesheet_encode_uom_id" options="{'no_create': True, 'no_open': True}" required="1" class="col-lg-5 pl-0"/>
+                                        <field name="timesheet_encode_uom_id" options="{'no_create': True, 'no_open': True}" required="1" class="col-lg-5 ps-0"/>
                                         <field name="is_encode_uom_days" invisible="1"/>
                                     </div>
                                 </div>
@@ -55,15 +55,15 @@
                                 </div>
                                 <div class="content-group">
                                     <div class="row mt16 oe_center">
-                                        <div class="col-lg-3 pr-0 o_chrome_store_link d-none d-sm-inline-block">
+                                        <div class="col-lg-3 pe-0 o_chrome_store_link d-none d-sm-inline-block">
                                             <a href="http://www.odoo.com/app/timesheet?platform=chrome" class="align-middle" target="_blank">
                                                 <img alt="Google Chrome Store" class="img img-fluid align-middle mt-1" style="height: 85% !important;" src="project/static/src/img/chrome_store.png"/>
                                             </a>
                                         </div>
-                                        <div class="col-lg-3 pr-0">
+                                        <div class="col-lg-3 pe-0">
                                             <img alt="Apple App Store" class="img img-fluid o_config_app_store mt-1" style="height: 85% !important; cursor: pointer;" src="project/static/src/img/app_store.png"/>
                                         </div>
-                                        <div class="col-lg-3 pr-0">
+                                        <div class="col-lg-3 pe-0">
                                             <img alt="Google Play Store" class="img img-fluid o_config_play_store mt-1" style="height: 85% !important; cursor: pointer;" src="project/static/src/img/play_store.png"/>
                                         </div>
                                     </div>
diff --git a/addons/hr_work_entry/views/hr_work_entry_views.xml b/addons/hr_work_entry/views/hr_work_entry_views.xml
index 878cbe73544..b8fbe845116 100644
--- a/addons/hr_work_entry/views/hr_work_entry_views.xml
+++ b/addons/hr_work_entry/views/hr_work_entry_views.xml
@@ -193,7 +193,7 @@
                     <t t-name="kanban-box">
                         <div t-attf-class="#{!selection_mode ? kanban_color(record.color.raw_value) : ''} oe_kanban_global_click">
                             <div class="o_dropdown_kanban dropdown" t-if="!selection_mode">
-                                <a class="dropdown-toggle o-no-caret btn" role="button" data-toggle="dropdown" href="#" aria-label="Dropdown menu" title="Dropdown menu">
+                                <a class="dropdown-toggle o-no-caret btn" role="button" data-bs-toggle="dropdown" href="#" aria-label="Dropdown menu" title="Dropdown menu">
                                     <span class="fa fa-ellipsis-v"/>
                                 </a>
                                 <div class="dropdown-menu" role="menu">
diff --git a/addons/hr_work_entry_contract/wizard/hr_work_entry_regeneration_wizard_views.xml b/addons/hr_work_entry_contract/wizard/hr_work_entry_regeneration_wizard_views.xml
index a18518482cb..29da1ba9a68 100644
--- a/addons/hr_work_entry_contract/wizard/hr_work_entry_regeneration_wizard_views.xml
+++ b/addons/hr_work_entry_contract/wizard/hr_work_entry_regeneration_wizard_views.xml
@@ -11,7 +11,7 @@
                         <label for="date_from"></label>
                         <div name="date_from">
                             <div class="text-info" attrs="{'invisible': [('earliest_available_date_message', '=', '')]}">
-                                <i class="fa fa-info-circle mr-1" title="Hint"/>
+                                <i class="fa fa-info-circle me-1" title="Hint"/>
                                 <field name="earliest_available_date_message" nolabel="1"/>
                             </div >
                             <field name="date_from"/>
@@ -19,7 +19,7 @@
                         <label for="date_to"></label>
                         <div name="date_to">
                             <div class="text-info" attrs="{'invisible': [('latest_available_date_message', '=', '')]}">
-                                <i class="fa fa-info-circle mr-1" title="Hint"/>
+                                <i class="fa fa-info-circle me-1" title="Hint"/>
                                 <field name="latest_available_date_message" nolabel="1"/>
                             </div>
                             <field name="date_to"/>
@@ -29,7 +29,7 @@
                 <field name="search_criteria_completed" invisible="1"/>
                 <field name="valid" invisible="1"/>
                 <div attrs="{'invisible': ['|', ('search_criteria_completed', '=', False), ('valid', '=', True)]}">
-                    <div class="text-danger"><i class="fa fa-exclamation-triangle mr-1" title="Warning"/>You are not allowed to regenerate validated work entries</div>
+                    <div class="text-danger"><i class="fa fa-exclamation-triangle me-1" title="Warning"/>You are not allowed to regenerate validated work entries</div>
                     <field name="validated_work_entry_ids" widget="many2many" nolabel="1">
                         <tree string="Work Entries"
                               default_order = "date_start"
diff --git a/addons/http_routing/views/http_routing_template.xml b/addons/http_routing/views/http_routing_template.xml
index 13a0167a4e7..6e001156e31 100644
--- a/addons/http_routing/views/http_routing_template.xml
+++ b/addons/http_routing/views/http_routing_template.xml
@@ -24,7 +24,7 @@
         <div class="container accordion mb32 mt32" id="debug_infos">
             <div class="card" t-if="error_message">
                 <h4 class="card-header">
-                    <a data-toggle="collapse" href="#error_main">Error</a>
+                    <a data-bs-toggle="collapse" href="#error_main">Error</a>
                 </h4>
                 <div id="error_main" class="collapse show">
                     <div class="card-body">
@@ -34,7 +34,7 @@
             </div>
             <div class="card" t-if="qweb_exception">
                 <h4 class="card-header">
-                    <a data-toggle="collapse" href="#error_qweb">QWeb</a>
+                    <a data-bs-toggle="collapse" href="#error_qweb">QWeb</a>
                 </h4>
                 <div id="error_qweb" class="collapse show">
                     <div class="card-body">
@@ -51,7 +51,7 @@
             </div>
             <div class="card" t-if="traceback">
                 <h4 class="card-header">
-                    <a data-toggle="collapse" href="#error_traceback">Traceback</a>
+                    <a data-bs-toggle="collapse" href="#error_traceback">Traceback</a>
                 </h4>
                 <div id="error_traceback" t-attf-class="collapse #{not error_message and not qweb_exception and 'show'}">
                     <div class="card-body">
@@ -111,8 +111,8 @@
                                 <div class="col-lg-4 pb32">
                                     <img class="img img-fluid mx-auto" src="/web_editor/shape/http_routing/404.svg?c2=o-color-2"/>
                                 </div>
-                                <div class="col-lg-8 text-lg-left text-center my-auto">
-                                    <h1 class="sr-only">Error 404</h1>
+                                <div class="col-lg-8 text-lg-start text-center my-auto">
+                                    <h1 class="visually-hidden">Error 404</h1>
                                     <h2>We couldn't find the page you're looking for!</h2>
                                     <p></p>
                                     <p><b>Don't panic.</b> If you think it's our mistake, please send us a message on <a href="/contactus">this page</a>.</p>
@@ -166,7 +166,7 @@
                         <div class="navbar navbar-expand-md navbar-light bg-light">
                             <div class="container">
                                 <div class="collapse navbar-collapse navbar-top-collapse">
-                                    <ul class="navbar-nav ml-auto" id="top_menu">
+                                    <ul class="navbar-nav ms-auto" id="top_menu">
                                         <li class="nav-item"><a href="/" class="nav-link">Home</a></li>
                                         <li class="nav-item"><a href="javascript: window.history.back()" class="nav-link">Back</a></li>
                                     </ul>
diff --git a/addons/hw_drivers/views/pos_display.html b/addons/hw_drivers/views/pos_display.html
index e1f024773ed..a4426db2899 100644
--- a/addons/hw_drivers/views/pos_display.html
+++ b/addons/hw_drivers/views/pos_display.html
@@ -81,10 +81,10 @@
                         </tbody>
                     </table>
                     <p class="mb-2 info-text">
-                        <i class="fa fa-info-circle mr-1"></i>The customer cart will be displayed here once a Point of Sale session is started.
+                        <i class="fa fa-info-circle me-1"></i>The customer cart will be displayed here once a Point of Sale session is started.
                     </p>
                     <p class="mb-2 info-text">
-                        <i class="fa fa-info-circle mr-1"></i>Odoo version 11 or above is required.
+                        <i class="fa fa-info-circle me-1"></i>Odoo version 11 or above is required.
                     </p>
                     <div class="error-message alert alert-danger mb-2 d-none" role="alert" />
                 </div>
diff --git a/addons/hw_posbox_homepage/views/homepage.html b/addons/hw_posbox_homepage/views/homepage.html
index 482c5451489..a2ae801df7f 100644
--- a/addons/hw_posbox_homepage/views/homepage.html
+++ b/addons/hw_posbox_homepage/views/homepage.html
@@ -13,10 +13,10 @@
     }
     table td {
         padding: 8px;
-        border-left: 1px solid #f1f1f1;
+        border-start: 1px solid #f1f1f1;
     }
     table td:first-child {
-        border-left: 0;
+        border-start: 0;
     }
     td.heading {
         font-weight: bold;
@@ -88,11 +88,11 @@
     <table align="center" cellpadding="3">
         <tr>
             <td class="heading">Name</td>
-            <td> {{ hostname }} <a class="btn btn-sm float-right" href='/server'>configure</a></td>
+            <td> {{ hostname }} <a class="btn btn-sm float-end" href='/server'>configure</a></td>
         </tr>
         <tr>
             <td class="heading">Version</td>
-            <td> {{ version }} <a class="btn btn-sm float-right" href='/hw_proxy/upgrade/'>update</a></td>
+            <td> {{ version }} <a class="btn btn-sm float-end" href='/hw_proxy/upgrade/'>update</a></td>
         </tr>
         <tr>
             <td class="heading">IP Address</td>
@@ -104,16 +104,16 @@
         </tr>
         <tr>
             <td class="heading">Network</td>
-            <td>{{ network_status }} <a class="btn btn-sm float-right" href='/wifi'>configure wifi</a></td>
+            <td>{{ network_status }} <a class="btn btn-sm float-end" href='/wifi'>configure wifi</a></td>
         </tr>
         <tr>
             <td class="heading">Server</td>
-            <td><a href='{{ server_status }}' target=_blank>{{ server_status }}<a class="btn btn-sm float-right" href='/server'>configure</a></td>
+            <td><a href='{{ server_status }}' target=_blank>{{ server_status }}<a class="btn btn-sm float-end" href='/server'>configure</a></td>
         </tr>
         {% if server_status != "Not Configured" %}
         <tr>
             <td class="heading">Six payment terminal</td>
-            <td>{{ six_terminal }} <a class="btn btn-sm float-right" href='/six_payment_terminal'>configure</a></td>
+            <td>{{ six_terminal }} <a class="btn btn-sm float-end" href='/six_payment_terminal'>configure</a></td>
         </tr>
         {% endif %}
         <tr>
diff --git a/addons/hw_posbox_homepage/views/layout.html b/addons/hw_posbox_homepage/views/layout.html
index d450b4b56e2..ee01d62258b 100644
--- a/addons/hw_posbox_homepage/views/layout.html
+++ b/addons/hw_posbox_homepage/views/layout.html
@@ -26,7 +26,7 @@
             .text-center {
                 text-align: center;
             }
-            .float-right {
+            .float-end {
                 float: right;
             }
             .btn {
diff --git a/addons/iap/static/src/xml/iap_templates.xml b/addons/iap/static/src/xml/iap_templates.xml
index 2dbb2876cbd..b6298da0d56 100644
--- a/addons/iap/static/src/xml/iap_templates.xml
+++ b/addons/iap/static/src/xml/iap_templates.xml
@@ -33,7 +33,7 @@
     <div t-name="iap.buy_more_credits" class="mt-2 row">
         <div class="col-sm">
             <button class="btn btn-link buy_credits px-0 o-hidden-ios"><i class="fa fa-arrow-right"/> Buy credits</button><br/>
-            <button t-if="!hideService" class="btn btn-link o_iap_view_my_services px-0 o-hidden-ios"><i class="fa fa-arrow-right mr-1"/>View My Services</button>
+            <button t-if="!hideService" class="btn btn-link o_iap_view_my_services px-0 o-hidden-ios"><i class="fa fa-arrow-right me-1"/>View My Services</button>
         </div>
     </div>
 </template>
diff --git a/addons/iap/views/res_config_settings.xml b/addons/iap/views/res_config_settings.xml
index d1fe209316e..d5c0838153c 100644
--- a/addons/iap/views/res_config_settings.xml
+++ b/addons/iap/views/res_config_settings.xml
@@ -24,7 +24,7 @@ if records:
                                 <div class="o_form_label">
                                 Odoo IAP
                                 <a href="https://www.odoo.com/documentation/master/applications/general/in_app_purchase.html" title="Documentation" class="o_doc_link" target="_blank"></a>
-                                <a href="https://www.odoo.com/documentation/master/developer/misc/api/iap.html" title="Documentation" class="ml-1 o_doc_link" target="_blank"></a>
+                                <a href="https://www.odoo.com/documentation/master/developer/misc/api/iap.html" title="Documentation" class="ms-1 o_doc_link" target="_blank"></a>
                                 </div>
                                 <div class="text-muted">
                                     View your IAP Services and recharge your credits
diff --git a/addons/iap_mail/data/mail_templates.xml b/addons/iap_mail/data/mail_templates.xml
index 062cbe34b53..3deb23a99ce 100644
--- a/addons/iap_mail/data/mail_templates.xml
+++ b/addons/iap_mail/data/mail_templates.xml
@@ -3,27 +3,27 @@
 
     <template id="enrich_company">
         <p t-esc="flavor_text" />
-        <div class="o_partner_autocomplete_enrich_info bg-white p-3 mt-3 mb-3 mr-5">
+        <div class="o_partner_autocomplete_enrich_info bg-white p-3 mt-3 mb-3 me-5">
             <div class="row p-0 m-0">
             <div class="col-sm-10 p-0">
                 <h4>
-                    <span class="mr-3 align-middle" t-esc="name"/>
-                    <a t-if="twitter" class="ml-2" target="_blank" t-attf-href="http://www.twitter.com/{{twitter}}">
+                    <span class="me-3 align-middle" t-esc="name"/>
+                    <a t-if="twitter" class="ms-2" target="_blank" t-attf-href="http://www.twitter.com/{{twitter}}">
                         <img src="/web_editor/font_to_img/61569/rgb(0,132,180)/22"/>
                     </a>
-                    <a t-if="facebook" class="ml-2" target="_blank" t-attf-href="http://www.facebook.com/{{facebook}}">
+                    <a t-if="facebook" class="ms-2" target="_blank" t-attf-href="http://www.facebook.com/{{facebook}}">
                         <img src="/web_editor/font_to_img/61570/rgb(59,89,152)/22"/>
                     </a>
-                    <a t-if="linkedin" class="ml-2" target="_blank" t-attf-href="https://www.linkedin.com/{{linkedin}}">
+                    <a t-if="linkedin" class="ms-2" target="_blank" t-attf-href="https://www.linkedin.com/{{linkedin}}">
                         <img src="/web_editor/font_to_img/61580/rgb(0,119,181)/22"/>
                     </a>
-                    <a t-if="crunchbase" class="ml-2" target="_blank" t-attf-href="https://www.crunchbase.com/{{crunchbase}}">
+                    <a t-if="crunchbase" class="ms-2" target="_blank" t-attf-href="https://www.crunchbase.com/{{crunchbase}}">
                         <img width="19px" height="19px" src="/partner_autocomplete/static/img/crunchbase.ico"/>
                     </a>
                 </h4>
                 <p t-esc="description"/>
             </div>
-            <div class="col-sm-2 p-0 text-center text-md-right order-first order-md-last">
+            <div class="col-sm-2 p-0 text-center text-md-end order-first order-md-last">
                 <img t-attf-src="{{logo}}" alt="Company Logo" style="max-width: 80px;"/>
             </div>
             </div>
@@ -31,12 +31,12 @@
 
             <div class="col-sm-12 row m-0 p-0">
                 <div t-if="company_type" class="my-1 p-0 col-sm-3">
-                    <i class="fa fa-fw mr-2 fa-building text-primary"/>
+                    <i class="fa fa-fw me-2 fa-building text-primary"/>
                     <b>Company type</b>
                 </div>
                 <div t-if="company_type" class="my-1 col-sm-9" t-esc="company_type" />
                 <div t-if="founded_year" class="my-1 p-0 col-sm-3">
-                    <i class="fa fa-fw mr-2 fa-calendar text-primary"/>
+                    <i class="fa fa-fw me-2 fa-calendar text-primary"/>
                     <b>Founded</b>
                 </div>
                 <div t-if="founded_year" class="my-1 col-sm-9" t-esc="founded_year" />
@@ -46,7 +46,7 @@
                 <t t-if="industry_group" t-set="sectors" t-value="sectors + [industry_group]" />
                 <t t-if="sub_industry" t-set="sectors" t-value="sectors + [sub_industry]" />
                 <div t-if="sectors" class="my-1 p-0 col-sm-3">
-                    <i class="fa fa-fw mr-2 fa-industry text-primary"/>
+                    <i class="fa fa-fw me-2 fa-industry text-primary"/>
                     <b>Sectors</b>
                 </div>
                 <div t-if="sectors" class="my-1 col-sm-9">
@@ -55,19 +55,19 @@
                     </t>
                 </div>
                 <div t-if="employees" class="my-1 p-0 col-sm-3">
-                    <i class="fa fa-fw mr-2 fa-users text-primary"/>
+                    <i class="fa fa-fw me-2 fa-users text-primary"/>
                     <b>Employees</b>
                 </div>
                 <div t-if="employees" class="my-1 col-sm-9" t-esc="'%.0f' % employees" />
                 <div t-if="estimated_annual_revenue" class="my-1 p-0 col-sm-3">
-                    <i class="fa fa-fw mr-2 fa-money text-primary"/>
+                    <i class="fa fa-fw me-2 fa-money text-primary"/>
                     <b>Estimated revenue</b>
                 </div>
                 <div t-if="estimated_annual_revenue" class="my-1 col-sm-9">
                     <span t-esc="estimated_annual_revenue" /><span> per year</span>
                 </div>
                 <div t-if="phone_numbers" class="my-1 p-0 col-sm-3">
-                    <i class="fa fa-fw mr-2 fa-phone text-primary"/>
+                    <i class="fa fa-fw me-2 fa-phone text-primary"/>
                     <b>Phone</b>
                 </div>
                 <div t-if="phone_numbers" class="col-sm-9">
@@ -76,7 +76,7 @@
                     </t>
                 </div>
                 <div t-if="email" class="my-1 p-0 col-sm-3">
-                    <i class="fa fa-fw mr-2 fa-envelope text-primary"/>
+                    <i class="fa fa-fw me-2 fa-envelope text-primary"/>
                     <b>Email</b>
                 </div>
                 <div t-if="email" class="col-sm-9">
@@ -85,12 +85,12 @@
                     </t>
                 </div>
                 <div t-if="timezone" class="my-1 p-0 col-sm-3">
-                    <i class="fa fa-fw mr-2 fa-globe text-primary"/>
+                    <i class="fa fa-fw me-2 fa-globe text-primary"/>
                     <b>Timezone</b>
                 </div>
                 <div t-if="timezone" class="my-1 col-sm-9" t-esc="timezone.replace('_', ' ')" />
                 <div t-if="tech" class="my-1 p-0 col-sm-3">
-                    <i class="fa fa-fw mr-2 fa-cube text-primary"/>
+                    <i class="fa fa-fw me-2 fa-cube text-primary"/>
                     <b>Technologies Used</b>
                 </div>
                 <div t-if="tech" class="my-1 col-sm-9">
@@ -99,7 +99,7 @@
                     </t>
                 </div>
                 <div t-if="twitter_bio" class="my-1 p-0 col-sm-3">
-                    <i class="fa fa-fw mr-2 fa-twitter text-primary"/>
+                    <i class="fa fa-fw me-2 fa-twitter text-primary"/>
                     <b>Twitter</b>
                 </div>
                 <div t-if="twitter_bio" class="my-1 col-sm-9">
diff --git a/addons/im_livechat/data/mail_data.xml b/addons/im_livechat/data/mail_data.xml
index 29d1c5e2032..b1466120cb0 100644
--- a/addons/im_livechat/data/mail_data.xml
+++ b/addons/im_livechat/data/mail_data.xml
@@ -26,8 +26,8 @@
     <!-- CONTENT -->
     <t t-set="top" t-value="'border-top: thin solid #dee2e6;'" />
     <t t-set="bottom" t-value="'border-bottom: thin solid #dee2e6;'" />
-    <t t-set="right" t-value="'border-right: thin solid #dee2e6;'" />
-    <t t-set="left" t-value="'border-left: thin solid #dee2e6;'" />
+    <t t-set="right" t-value="'border-end: thin solid #dee2e6;'" />
+    <t t-set="left" t-value="'border-start: thin solid #dee2e6;'" />
     <tr>
         <td style="padding: 0 50px;">
             <div style="font-size: 13px; padding: 10px 0;">
diff --git a/addons/im_livechat/static/src/legacy/public_livechat.scss b/addons/im_livechat/static/src/legacy/public_livechat.scss
index 2b7ddf70ad7..7368528801b 100644
--- a/addons/im_livechat/static/src/legacy/public_livechat.scss
+++ b/addons/im_livechat/static/src/legacy/public_livechat.scss
@@ -39,7 +39,7 @@ $o-mail-thread-window-zindex: $zindex-modal + 1 !default;
         color: white;
         padding: $o-mail-chatter-gap*0.5 $o-mail-chatter-gap;
         border-radius: 3px 3px 0 0;
-        border-bottom: 1px solid gray('300');
+        border-bottom: 1px solid map-get($grays, '300');
         background-color: $o-brand-odoo;
         padding: 8px;
 
@@ -89,7 +89,7 @@ $o-mail-thread-window-zindex: $zindex-modal + 1 !default;
                 padding-left: 2px;
 
                 .o_mail_thread_typing_icon_dot {
-                    background: gray('300');
+                    background: map-get($grays, '300');
                 }
             }
         }
@@ -139,7 +139,7 @@ $o-mail-thread-window-zindex: $zindex-modal + 1 !default;
     width: auto;
     height: 28px;
     color: white;
-    background-color: gray('900');
+    background-color: map-get($grays, '900');
     cursor: pointer;
     box-shadow: none;
 
@@ -239,7 +239,7 @@ $o-mail-thread-window-zindex: $zindex-modal + 1 !default;
             margin-top: 0px;
             margin-bottom: 15px;
         }
-        border-bottom: 1px solid gray('400');
+        border-bottom: 1px solid map-get($grays, '400');
         text-align: center;
 
         .o_thread_date {
@@ -272,8 +272,8 @@ $o-mail-thread-window-zindex: $zindex-modal + 1 !default;
         margin-bottom: 0px;
 
         &.o_mail_not_discussion {
-            background-color: rgba(gray('300'), 0.5);
-            border-bottom: 1px solid gray('400');
+            background-color: rgba(map-get($grays, '300'), 0.5);
+            border-bottom: 1px solid map-get($grays, '400');
         }
 
         .o_thread_message_sidebar {
@@ -438,7 +438,8 @@ $o-mail-thread-window-zindex: $zindex-modal + 1 !default;
 
         &.o_neutral_face_icon:before {
             @extend %o-nocontent-init-image;
-            @include size(120px, 140px);
+            width: 120px;
+            height: 140px;
             background: transparent url(/web/static/img/neutral_face.svg) no-repeat center;
         }
     }
@@ -479,7 +480,7 @@ $o-mail-thread-window-zindex: $zindex-modal + 1 !default;
         width: 3px;
         height: 3px;
         border-radius: 50%;
-        background: gray('800');
+        background: map-get($grays, '800');
         animation: o_mail_thread_typing_icon_dot 1.5s linear infinite;
 
         &:nth-child(2) {
diff --git a/addons/im_livechat/static/src/legacy/public_livechat_chatbot.js b/addons/im_livechat/static/src/legacy/public_livechat_chatbot.js
index 5e9dbf56f55..23dfb88fe33 100644
--- a/addons/im_livechat/static/src/legacy/public_livechat_chatbot.js
+++ b/addons/im_livechat/static/src/legacy/public_livechat_chatbot.js
@@ -195,7 +195,7 @@ const QWeb = core.qweb;
     _chatbotDisableInput(disableText) {
         this.messaging.livechatButtonView.chatWindow.legacyChatWindow.$('.o_composer_text_field')
             .prop('disabled', true)
-            .addClass('text-center font-italic bg-200')
+            .addClass('text-center fst-italic bg-200')
             .val(disableText);
     },
 
@@ -206,7 +206,7 @@ const QWeb = core.qweb;
         const $composerTextField = this.messaging.livechatButtonView.chatWindow.legacyChatWindow.$('.o_composer_text_field');
         $composerTextField
             .prop('disabled', false)
-            .removeClass('text-center font-italic bg-200')
+            .removeClass('text-center fst-italic bg-200')
             .val('')
             .focus();
 
diff --git a/addons/im_livechat/static/src/legacy/public_livechat_chatbot.xml b/addons/im_livechat/static/src/legacy/public_livechat_chatbot.xml
index 6dcc46c5e0e..50d3271a0c5 100644
--- a/addons/im_livechat/static/src/legacy/public_livechat_chatbot.xml
+++ b/addons/im_livechat/static/src/legacy/public_livechat_chatbot.xml
@@ -10,7 +10,7 @@
     <!-- Extend the base livechat window to include a div allowing to restart the script at the end -->
     <t t-extend="im_livechat.legacy.PublicLivechatWindow">
         <t t-jquery='div.o_chat_mini_composer' t-operation="after">
-            <div class="o_livechat_chatbot_end bg-200 font-italic text-center border" style="display: none;">
+            <div class="o_livechat_chatbot_end bg-200 fst-italic text-center border" style="display: none;">
                 <span>Conversation ended...</span>
                 <a href="#" class="o_livechat_chatbot_restart">Restart</a>
             </div>
@@ -41,7 +41,7 @@
                 <t t-foreach="message.getChatbotStepAnswers()" t-as="stepAnswer">
                     <li t-att-data-chatbot-step-answer-id="stepAnswer.id"
                         t-att-data-chatbot-step-redirect-link="stepAnswer.redirect_link"
-                        class="d-inline-block border border-primary rounded p-2 mr-3 mb-1 font-weight-bold">
+                        class="d-inline-block border border-primary rounded p-2 me-3 mb-1 fw-bold">
                         <t t-out="stepAnswer.label"/>
                     </li>
                     <br/>
diff --git a/addons/im_livechat/static/src/legacy/widgets/document_viewer/document_viewer.js b/addons/im_livechat/static/src/legacy/widgets/document_viewer/document_viewer.js
index d601ef69eed..faacd0a729a 100644
--- a/addons/im_livechat/static/src/legacy/widgets/document_viewer/document_viewer.js
+++ b/addons/im_livechat/static/src/legacy/widgets/document_viewer/document_viewer.js
@@ -76,7 +76,7 @@ const DocumentViewer = Widget.extend({
         this.$el.modal('show');
         this.$el.on('hidden.bs.modal', _.bind(this._onDestroy, this));
         this.$('.o_viewer_img').on("load", _.bind(this._onImageLoaded, this));
-        this.$('[data-toggle="tooltip"]').tooltip({ delay: 0 });
+        this.$('[data-bs-toggle="tooltip"]').tooltip({ delay: 0 });
         return this._super(...arguments);
     },
     /**
@@ -135,7 +135,7 @@ const DocumentViewer = Widget.extend({
             hidePDFJSButtons(this.$('.o_viewer_content')[0]);
         }
         this.$('.o_viewer_img').on("load", _.bind(this._onImageLoaded, this));
-        this.$('[data-toggle="tooltip"]').tooltip({ delay: 0 });
+        this.$('[data-bs-toggle="tooltip"]').tooltip({ delay: 0 });
         this._reset();
     },
     /**
diff --git a/addons/im_livechat/static/src/legacy/widgets/document_viewer/document_viewer.xml b/addons/im_livechat/static/src/legacy/widgets/document_viewer/document_viewer.xml
index 4f483850b22..153667935c8 100644
--- a/addons/im_livechat/static/src/legacy/widgets/document_viewer/document_viewer.xml
+++ b/addons/im_livechat/static/src/legacy/widgets/document_viewer/document_viewer.xml
@@ -31,9 +31,9 @@
                     <i class="fa fa-file-text mr8" t-if="widget.activeAttachment.fileType == 'application/pdf'" role="img" aria-label="PDF file" title="PDF file"/>
                     <i class="fa fa-video-camera mr8" t-if="widget.activeAttachment.fileType == 'video'" role="img" aria-label="Video" title="Video"/>
                     <t t-esc="widget.activeAttachment.name"/>
-                    <a role="button" href="#" class="o_download_btn ml8 small" data-toggle="tooltip" data-placement="right" title="Download"><i class="fa fa-fw fa-download" role="img" aria-label="Download"/></a>
+                    <a role="button" href="#" class="o_download_btn ml8 small" data-bs-toggle="tooltip" data-bs-placement="right" title="Download"><i class="fa fa-fw fa-download" role="img" aria-label="Download"/></a>
                 </span>
-                <a role="button" class="o_close_btn float-right" href="#" aria-label="Close" title="Close">×</a>
+                <a role="button" class="o_close_btn float-end" href="#" aria-label="Close" title="Close">×</a>
             </div>
             <div class="o_viewer_img_wrapper">
                 <div class="o_viewer_zoomer">
@@ -54,16 +54,16 @@
             </div>
             <div t-if="widget.activeAttachment.fileType == 'image'" class="o_viewer_toolbar btn-toolbar" role="toolbar">
                 <div class="btn-group" role="group">
-                    <a role="button" href="#" class="o_viewer_toolbar_btn btn o_zoom_in" data-toggle="tooltip" title="Zoom In"><i class="fa fa-fw fa-plus" role="img" aria-label="Zoom In"/></a>
-                    <a role="button" href="#" class="o_viewer_toolbar_btn btn o_zoom_reset disabled" data-toggle="tooltip" title="Reset Zoom"><i class="fa fa-fw fa-search" role="img" aria-label="Reset Zoom"/></a>
-                    <a role="button" href="#" class="o_viewer_toolbar_btn btn o_zoom_out disabled" data-toggle="tooltip" title="Zoom Out"><i class="fa fa-fw fa-minus" role="img" aria-label="Zoom Out"/></a>
+                    <a role="button" href="#" class="o_viewer_toolbar_btn btn o_zoom_in" data-bs-toggle="tooltip" title="Zoom In"><i class="fa fa-fw fa-plus" role="img" aria-label="Zoom In"/></a>
+                    <a role="button" href="#" class="o_viewer_toolbar_btn btn o_zoom_reset disabled" data-bs-toggle="tooltip" title="Reset Zoom"><i class="fa fa-fw fa-search" role="img" aria-label="Reset Zoom"/></a>
+                    <a role="button" href="#" class="o_viewer_toolbar_btn btn o_zoom_out disabled" data-bs-toggle="tooltip" title="Zoom Out"><i class="fa fa-fw fa-minus" role="img" aria-label="Zoom Out"/></a>
                 </div>
                 <div class="btn-group" role="group">
-                    <a role="button" href="#" class="o_viewer_toolbar_btn btn o_rotate" data-toggle="tooltip" title="Rotate"><i class="fa fa-fw fa-repeat" role="img" aria-label="Rotate"/></a>
+                    <a role="button" href="#" class="o_viewer_toolbar_btn btn o_rotate" data-bs-toggle="tooltip" title="Rotate"><i class="fa fa-fw fa-repeat" role="img" aria-label="Rotate"/></a>
                 </div>
                 <div class="btn-group" role="group">
-                    <a role="button" href="#" class="o_viewer_toolbar_btn btn o_print_btn" data-toggle="tooltip" title="Print"><i class="fa fa-fw fa-print" role="img" aria-label="Print"/></a>
-                    <a role="button" href="#" class="o_viewer_toolbar_btn btn o_download_btn" data-toggle="tooltip" title="Download"><i class="fa fa-fw fa-download" role="img" aria-label="Download"/></a>
+                    <a role="button" href="#" class="o_viewer_toolbar_btn btn o_print_btn" data-bs-toggle="tooltip" title="Print"><i class="fa fa-fw fa-print" role="img" aria-label="Print"/></a>
+                    <a role="button" href="#" class="o_viewer_toolbar_btn btn o_download_btn" data-bs-toggle="tooltip" title="Download"><i class="fa fa-fw fa-download" role="img" aria-label="Download"/></a>
                 </div>
             </div>
         </div>
diff --git a/addons/im_livechat/static/src/legacy/widgets/feedback/feedback.xml b/addons/im_livechat/static/src/legacy/widgets/feedback/feedback.xml
index 9d116992870..f02cc1c649a 100644
--- a/addons/im_livechat/static/src/legacy/widgets/feedback/feedback.xml
+++ b/addons/im_livechat/static/src/legacy/widgets/feedback/feedback.xml
@@ -20,7 +20,7 @@
                     <input type="button" class="btn btn-primary btn-sm o_rating_submit_button" value="Send" />
                 </div>
             </div>
-            <div class="o_livechat_email text-left">
+            <div class="o_livechat_email text-start">
                 <strong class="o_livechat_email_sentLabel" style="display: none;">Conversation Sent</strong>
                 <span class="o_livechat_email_receiveCopyLabel text-muted">Receive a copy of this conversation</span>
                 <div class="o_livechat_email_receiveCopyForm input-group">
diff --git a/addons/im_livechat/static/src/legacy/widgets/thread/thread.xml b/addons/im_livechat/static/src/legacy/widgets/thread/thread.xml
index 2fb18cce943..a7157f20869 100644
--- a/addons/im_livechat/static/src/legacy/widgets/thread/thread.xml
+++ b/addons/im_livechat/static/src/legacy/widgets/thread/thread.xml
@@ -199,7 +199,7 @@
                     <span t-if="options.displayNotificationIcons and message.hasNotifications()" class="o_thread_tooltip_container">
                         <span name="notification_icon" t-attf-class="d-inline-flex align-items-center o_thread_tooltip o_thread_message_notification {{ message.hasNotificationsError() ? 'o_thread_message_notification_error' : '' }}" t-att-data-message-id="message.getID()" t-att-data-message-type="message.getType()">
                             <i t-att-class="message.getNotificationIcon()"/>
-                            <small t-if="message.getNotificationText()" t-esc="message.getNotificationText()" class="font-weight-bold ml-1"/>
+                            <small t-if="message.getNotificationText()" t-esc="message.getNotificationText()" class="fw-bold ms-1"/>
                         </span>
                     </span>
                     <span t-attf-class="o_thread_icons">
@@ -334,7 +334,7 @@
                 <t t-set="has_preview" t-value="type == 'image' or type == 'video' or attachment.mimetype == 'application/pdf'"/>
                 <t t-set="ext" t-value="attachment.filename.split('.').pop()"/>
 
-                <div t-attf-class="o_image_box float-left #{has_preview ? 'o_attachment_view' : ''}" t-att-data-id="attachment.id">
+                <div t-attf-class="o_image_box float-start #{has_preview ? 'o_attachment_view' : ''}" t-att-data-id="attachment.id">
                     <div t-if="has_preview"
                          class="o_image o_hover"
                          t-att-style="type == 'image' ? 'background-image:url(/web/image/' + attachment.id + '/38x38/?crop=true' : '' "
@@ -359,7 +359,7 @@
                 <div t-if="!editable" class="caption small">
                     <b t-if="has_preview" class="ml4 small text-uppercase o_attachment_view" t-att-data-id="attachment.id"><t t-esc="ext"/></b>
                     <a t-else="" class="ml4 small text-uppercase" t-att-href="attachment.url" t-att-title="'Download ' + attachment.name"><b><t t-esc='ext'/></b></a>
-                    <a class="ml4 o_attachment_download float-right" t-att-title="'Download ' + attachment.name" t-att-href='attachment.url'><i t-attf-class="fa fa-download" role="img" aria-label="Download"/></a>
+                    <a class="ml4 o_attachment_download float-end" t-att-title="'Download ' + attachment.name" t-att-href='attachment.url'><i t-attf-class="fa fa-download" role="img" aria-label="Download"/></a>
                 </div>
                 <div t-if="editable" class="o_attachment_uploaded"><i class="text-success fa fa-check" role="img" aria-label="Uploaded" title="Uploaded"/></div>
                 <div t-if="editable" class="o_attachment_delete" t-att-data-id="attachment.id"><span class="text-white" role="img" aria-label="Delete" title="Delete">×</span></div>
diff --git a/addons/im_livechat/static/src/scss/im_livechat_bootstrap.scss b/addons/im_livechat/static/src/scss/im_livechat_bootstrap.scss
index dddf5baa73f..9d97ddd0ed7 100644
--- a/addons/im_livechat/static/src/scss/im_livechat_bootstrap.scss
+++ b/addons/im_livechat/static/src/scss/im_livechat_bootstrap.scss
@@ -1,8 +1,8 @@
 .text-muted {
-  color: gray('600');
+  color: map-get($grays, '600');
 }
 
-.text-left {
+.text-start {
   text-align: left;
 }
 
diff --git a/addons/im_livechat/views/im_livechat_channel_views.xml b/addons/im_livechat/views/im_livechat_channel_views.xml
index 4b97830f5e8..6a4d424bbf9 100644
--- a/addons/im_livechat/views/im_livechat_channel_views.xml
+++ b/addons/im_livechat/views/im_livechat_channel_views.xml
@@ -37,7 +37,7 @@
                                     <img t-att-src="kanban_image('im_livechat.channel', 'image_128', record.id.raw_value)" class="img-fluid" alt="Channel"/>
                                 </div>
                                 <div class="oe_kanban_details">
-                                    <div class="float-right">
+                                    <div class="float-end">
                                         <button t-if="record.are_you_inside.raw_value" name="action_quit" type="object" class="btn btn-primary">Leave</button>
                                         <button t-if="!record.are_you_inside.raw_value" name="action_join" type="object" class="btn btn-primary">Join</button>
                                     </div>
@@ -49,7 +49,7 @@
                                             <br/>
                                             <i class="fa fa-comments" role="img" aria-label="Comments" title="Comments"></i>
                                             <t t-esc="record.nbr_channel.raw_value"/> Sessions
-                                            <div t-if="record.rating_count.raw_value &gt; 0" class="float-right">
+                                            <div t-if="record.rating_count.raw_value &gt; 0" class="float-end">
                                                 <a name="action_view_rating" type="object" tabindex="10">
                                                     <i class="fa fa-smile-o text-success" title="Percentage of happy ratings" role="img" aria-label="Happy face"/>
                                                     <t t-esc="record.rating_percentage_satisfaction.raw_value"/>%
@@ -240,7 +240,7 @@
                             <div attrs="{'invisible': [('action', '=', 'hide_button')]}">
                                 <field name="chatbot_script_id" class="oe_inline" style="width: 60% !important;"
                                        options="{'no_create': True, 'no_open': True}"/>
-                                <span attrs="{'invisible': [('chatbot_script_id', '=', False)]}" class="oe_inline ml-3">
+                                <span attrs="{'invisible': [('chatbot_script_id', '=', False)]}" class="oe_inline ms-3">
                                     <label for="chatbot_only_if_no_operator" string="Enabled only if no operator"/>
                                     <field name="chatbot_only_if_no_operator"/>
                                 </span>
diff --git a/addons/im_livechat/views/im_livechat_chatbot_templates.xml b/addons/im_livechat/views/im_livechat_chatbot_templates.xml
index 4455b9086c7..bbe8bc25525 100644
--- a/addons/im_livechat/views/im_livechat_chatbot_templates.xml
+++ b/addons/im_livechat/views/im_livechat_chatbot_templates.xml
@@ -19,7 +19,7 @@
                                 <i class="fa fa-fw fa-arrow-right"/>Back to edit mode
                             </a>
                         </div>
-                        <button type="button" class="close" data-dismiss="alert" aria-label="Close"> &#215; </button>
+                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                     </div>
                 </div>
             </t>
diff --git a/addons/im_livechat/views/mail_channel_views.xml b/addons/im_livechat/views/mail_channel_views.xml
index a17845c4533..e883a2bf691 100644
--- a/addons/im_livechat/views/mail_channel_views.xml
+++ b/addons/im_livechat/views/mail_channel_views.xml
@@ -36,11 +36,11 @@
             <field name="arch" type="xml">
                 <form string="Session Form" create="false" edit="false">
                     <sheet>
-                        <div style="width:50%" class="float-right">
-                            <field name="rating_last_image" widget="image" class="float-right" readonly="1" nolabel="1"/>
+                        <div style="width:50%" class="float-end">
+                            <field name="rating_last_image" widget="image" class="float-end" readonly="1" nolabel="1"/>
                             <field name="rating_last_feedback" nolabel="1"/>
                         </div>
-                        <div style="width:50%" class="float-left">
+                        <div style="width:50%" class="float-start">
                             <group>
                                 <field name="name" string="Attendees"/>
                                 <field name="create_date" readonly="1" string="Session Date"/>
@@ -69,7 +69,7 @@
                                                             </div>
                                                         </div>
                                                         <div class="oe_module_desc">
-                                                            <div class="float-right"><p><field name="date"/></p></div>
+                                                            <div class="float-end"><p><field name="date"/></p></div>
                                                             <div>
                                                                 <p><strong>
                                                                     <t t-if="record.author_id.raw_value"><field name="author_id"/></t>
diff --git a/addons/knowledge/data/article_templates.xml b/addons/knowledge/data/article_templates.xml
index 3afdf4eb417..50c6cfcedde 100644
--- a/addons/knowledge/data/article_templates.xml
+++ b/addons/knowledge/data/article_templates.xml
@@ -146,7 +146,7 @@
         <div class="o_knowledge_file_name">Odoo Survival Guide</div>
         <div class="o_knowledge_file_extension">pdf</div>
     </div>
-    <div class="o_knowledge_toolbar_anchor o_knowledge_toolbar_type_file mt-auto ml-auto"></div>
+    <div class="o_knowledge_toolbar_anchor o_knowledge_toolbar_type_file mt-auto ms-auto"></div>
 </div>
 <p><br /></p>
 <p>
diff --git a/addons/knowledge/data/knowledge_data.xml b/addons/knowledge/data/knowledge_data.xml
index 1656785ed0a..f0c25c9bc0c 100644
--- a/addons/knowledge/data/knowledge_data.xml
+++ b/addons/knowledge/data/knowledge_data.xml
@@ -62,7 +62,7 @@
                         <div class="o_knowledge_file_name">Car_Catalog.png</div>
                         <div class="o_knowledge_file_extension">png</div>
                     </div>
-                    <div class="o_knowledge_toolbar_anchor o_knowledge_toolbar_type_file mt-auto ml-auto"></div>
+                    <div class="o_knowledge_toolbar_anchor o_knowledge_toolbar_type_file mt-auto ms-auto"></div>
                 </div>
                 <p><br /></p>
                 <blockquote data-o-mail-quote="1">
@@ -392,7 +392,7 @@
                         <div class="o_knowledge_file_name">Odoo Logo</div>
                         <div class="o_knowledge_file_extension">JPG</div>
                     </div>
-                    <div class="o_knowledge_toolbar_anchor o_knowledge_toolbar_type_file mt-auto ml-auto"></div>
+                    <div class="o_knowledge_toolbar_anchor o_knowledge_toolbar_type_file mt-auto ms-auto"></div>
                 </div>
                 <p><br /></p>
                 <h4>Usage</h4>
diff --git a/addons/knowledge/static/src/components/permission_panel/permission_panel.xml b/addons/knowledge/static/src/components/permission_panel/permission_panel.xml
index d22d3b3a778..a2d85dc1289 100644
--- a/addons/knowledge/static/src/components/permission_panel/permission_panel.xml
+++ b/addons/knowledge/static/src/components/permission_panel/permission_panel.xml
@@ -24,7 +24,7 @@
                     <div t-if="state.based_on" class="text-muted">Based on <a href="#" t-on-click="event => this._onOpen(event, state.based_on_id)" t-out="state.based_on"/></div>
                 </div>
                 <div class="flex-shrink-0 bg-white">
-                    <select class="o_permission custom-select"
+                    <select class="o_permission form-select"
                         t-att-value="state.internal_permission"
                         t-on-change="_onChangeInternalPermission"
                         t-att-disabled="state.user_is_admin || props.user_permission === 'write' ? undefined : 'disabled'"
@@ -45,8 +45,8 @@
                     <div class="flex-grow-1 px-3">
                         <div t-out="member.partner_name"/>
                         <div class="d-flex align-items-center text-muted">
-                            <span t-if="member.partner_share"><i class="fa fa-user pr-1" title="External Guest"/>Guest</span>
-                            <span t-if="state.user_is_admin &amp;&amp; this.isLoggedUser(member)"><i class="fa fa-cog pr-1" title="Administrator"/>Admin</span>
+                            <span t-if="member.partner_share"><i class="fa fa-user pe-1" title="External Guest"/>Guest</span>
+                            <span t-if="state.user_is_admin &amp;&amp; this.isLoggedUser(member)"><i class="fa fa-cog pe-1" title="Administrator"/>Admin</span>
                             <span t-if="(member.partner_share || (state.user_is_admin &amp;&amp; this.isLoggedUser(member))) &amp;&amp; member.partner_email" class="px-1">•</span>
                             <div class="o_member_email" t-if="member.partner_email" t-out="member.partner_email"/>
                         </div>
@@ -56,12 +56,12 @@
                         <div class="input-group">
                             <div t-if="!(member.based_on &amp;&amp; member.permission === 'none') &amp;&amp; !member.is_unique_writer
                                         &amp;&amp; (state.user_is_admin || props.user_permission === 'write' || state.partner_id === member.partner_id)"
-                                 class="d-flex align-items-center mr-2">
+                                 class="d-flex align-items-center me-2">
                                 <i class="fa fa-w fa-times o_delete text-danger" title="Remove Member"
                                    t-on-click="event => this._onRemoveMember(event, member)" type="button">
                                 </i>
                             </div>
-                            <select t-attf-class="o_permission custom-select {{ member.partner_share ? 'readonly' : '' }}"
+                            <select t-attf-class="o_permission form-select {{ member.partner_share ? 'readonly' : '' }}"
                                 t-att-value="member.permission"
                                 t-on-change="event => this._onChangeMemberPermission(event, member)"
                                 t-att-disabled="member.is_unique_writer || member.partner_share
@@ -77,7 +77,7 @@
                 </div>
             </t>
             <div t-if="state.show_admin_tip" class="d-flex align-items-center px-3 py-1 my-1 bg-light text-muted">
-                <i><i class="fa fa-cog mr-2"/>As an administrator, you can always modify this article.</i>
+                <i><i class="fa fa-cog me-2"/>As an administrator, you can always modify this article.</i>
             </div>
         </t>
     </t>
diff --git a/addons/knowledge/static/src/js/form_renderer.js b/addons/knowledge/static/src/js/form_renderer.js
index 2770b71ecdd..d55200fb5e6 100644
--- a/addons/knowledge/static/src/js/form_renderer.js
+++ b/addons/knowledge/static/src/js/form_renderer.js
@@ -65,7 +65,7 @@ FormRenderer.include({
             } else {
                 let pane = $sel[i].closest('.tab-pane:not(.active)');
                 if (pane) {
-                    let $paneSwitch = $(`[data-toggle="tab"][href*="${pane.id}"]`);
+                    let $paneSwitch = $(`[data-bs-toggle="tab"][href*="${pane.id}"]`);
                     if ($paneSwitch.is(':visible:hasVisibility')) {
                         return true;
                     }
diff --git a/addons/knowledge/static/src/js/knowledge_macros.js b/addons/knowledge/static/src/js/knowledge_macros.js
index eb0478250c1..4d5d0dd7f56 100644
--- a/addons/knowledge/static/src/js/knowledge_macros.js
+++ b/addons/knowledge/static/src/js/knowledge_macros.js
@@ -157,7 +157,7 @@ export class KnowledgeMacro {
                         for (let i = 0; i < $sel.length; i++) {
                             const pane = $sel[i].closest('.tab-pane:not(.active)');
                             if (pane) {
-                                const paneSwitch = this.getElement(`[data-toggle="tab"][href*="${pane.id}"]`);
+                                const paneSwitch = this.getElement(`[data-bs-toggle="tab"][href*="${pane.id}"]`);
                                 if (paneSwitch) {
                                     paneSwitch.click();
                                     break;
diff --git a/addons/knowledge/static/src/js/widgets/knowledge_dialogs.js b/addons/knowledge/static/src/js/widgets/knowledge_dialogs.js
index f414e88520a..54d0ea56269 100644
--- a/addons/knowledge/static/src/js/widgets/knowledge_dialogs.js
+++ b/addons/knowledge/static/src/js/widgets/knowledge_dialogs.js
@@ -140,7 +140,7 @@ const MoveArticleToDialog = Dialog.extend({
                 const markup = [];
                 if (data.id === 'private') {
                     const src = escapeMarkup(this.getLoggedUserPicture());
-                    markup.push(`<img src="${src}" class="rounded-circle mr-1"/>`);
+                    markup.push(`<img src="${src}" class="rounded-circle me-1"/>`);
                 }
                 markup.push(escapeMarkup(data.text));
                 return markup.join('');
@@ -157,7 +157,7 @@ const MoveArticleToDialog = Dialog.extend({
                 window.Select2.util.markMatch(text, query.term, markup, escapeMarkup);
                 if (result.id === 'private') {
                     const src = escapeMarkup(this.getLoggedUserPicture());
-                    markup.unshift(`<img src="${src}" class="rounded-circle mr-1"/>`);
+                    markup.unshift(`<img src="${src}" class="rounded-circle me-1"/>`);
                 }
                 if (subject && subject !== text) {
                     markup.push(`<span class="test-ellipsis small">  -  ${escapeMarkup(subject)}</span>`);
diff --git a/addons/knowledge/static/src/xml/knowledge_command_palette.xml b/addons/knowledge/static/src/xml/knowledge_command_palette.xml
index 03db616ff4e..9e232f7f0c6 100644
--- a/addons/knowledge/static/src/xml/knowledge_command_palette.xml
+++ b/addons/knowledge/static/src/xml/knowledge_command_palette.xml
@@ -2,13 +2,13 @@
 <templates id="template" xml:space="preserve">
     <t t-name="KnowledgeCommandTemplate" owl="1">
         <div class="o_command_left d-flex align-items-center">
-            <span class="pr-2" t-if="props.icon_string" t-out="props.icon_string" />
-            <span class="pr-2" t-else="">📄</span>
-            <span class="pr-2 test-ellipsis">
+            <span class="pe-2" t-if="props.icon_string" t-out="props.icon_string" />
+            <span class="pe-2" t-else="">📄</span>
+            <span class="pe-2 test-ellipsis">
                 <t t-slot="name" />
             </span>
-            <icon t-if="props.isFavorite" class="fa fa-star o_favorite pr-2 position-static" />
-            <span t-if="props.subjectName" t-out="'— '" class="text-muted small pr-2" />
+            <icon t-if="props.isFavorite" class="fa fa-star o_favorite pe-2 position-static" />
+            <span t-if="props.subjectName" t-out="'— '" class="text-muted small pe-2" />
             <span t-if="props.subjectName" class="o_command_name test-ellipsis text-muted small">
                 <t t-foreach="props.splitSubjectName" t-as="name" t-key="name_index">
                     <b t-if="name_index % 2" t-out="name" />
@@ -32,7 +32,7 @@
     <t t-name="KnowledgeExtraCommandTemplate" owl="1">
         <div class="o_command_hotkey">
             <span>
-                <icon class="fa fa-arrows-alt pr-2" />
+                <icon class="fa fa-arrows-alt pe-2" />
                 <t t-out="props.name" />
             </span>
             <span>
diff --git a/addons/knowledge/static/src/xml/knowledge_editor.xml b/addons/knowledge/static/src/xml/knowledge_editor.xml
index e78dc95d10d..d7455295125 100644
--- a/addons/knowledge/static/src/xml/knowledge_editor.xml
+++ b/addons/knowledge/static/src/xml/knowledge_editor.xml
@@ -8,7 +8,7 @@
                 <div class="o_knowledge_file_name" t-out="img.name"/>
                 <div class="o_knowledge_file_extension" t-out="img.extension"/>
             </div>
-            <div class="o_knowledge_toolbar_anchor o_knowledge_toolbar_type_file mt-auto ml-auto"/>
+            <div class="o_knowledge_toolbar_anchor o_knowledge_toolbar_type_file mt-auto ms-auto"/>
         </div>
     </t>
     <t t-name="knowledge.template_block">
diff --git a/addons/knowledge/static/src/xml/knowledge_templates.xml b/addons/knowledge/static/src/xml/knowledge_templates.xml
index 5083a7f2c7b..19e6efd65e4 100644
--- a/addons/knowledge/static/src/xml/knowledge_templates.xml
+++ b/addons/knowledge/static/src/xml/knowledge_templates.xml
@@ -13,7 +13,7 @@
     <t t-name="knowledge.knowledge_move_article_to_modal">
         <form class="container">
             <div class="mb-3">
-                Move "<span t-out="widget.article_name" class="font-weight-bold"/>" under:
+                Move "<span t-out="widget.article_name" class="fw-bold"/>" under:
             </div>
             <div class="form-group m-0">
                 <input class="form-control" type="hidden" placeholder="Search an Article to use as Parent"/>
diff --git a/addons/knowledge/views/knowledge_article_views.xml b/addons/knowledge/views/knowledge_article_views.xml
index aa848774a63..bbb3411b22c 100644
--- a/addons/knowledge/views/knowledge_article_views.xml
+++ b/addons/knowledge/views/knowledge_article_views.xml
@@ -19,7 +19,7 @@
                             <!-- Search bar -->
                             <div id="knowledge_search_bar" class="d-flex align-items-center border bg-light rounded m-3 o_cursor_pointer" data-hotkey="f">
                                 <div class="flex-grow-1 px-2 py-1">Search an article...</div>
-                                <i class="oi oi-search pr-2" title="search"/>
+                                <i class="oi oi-search pe-2" title="search"/>
                             </div>
                             <!-- File explorer -->
                             <div class="flex-grow-1 position-relative">
@@ -42,10 +42,10 @@
                                     <!-- Breadcrumbs -->
                                     <ol class="breadcrumb align-items-center p-3" role="navigation">
                                         <li class="breadcrumb-item d-flex align-items-center">
-                                            <div class="o_knowledge_icon pr-1" attrs="{'invisible': [('icon', '=', False)]}">
+                                            <div class="o_knowledge_icon pe-1" attrs="{'invisible': [('icon', '=', False)]}">
                                                 <div class="o_article_emoji_dropdown dropdown">
                                                     <a href="#" class="o_article_editable_emoji o_article_emoji dropdown-toggle o-no-caret"
-                                                       type="button" data-toggle="dropdown" aria-expanded="true"
+                                                       type="button" data-bs-toggle="dropdown" aria-expanded="true"
                                                        attrs="{'invisible': ['|', ('is_locked', '=', True), ('user_has_write_access', '=', False)]}"/>
                                                     <span class="o_article_editable_emoji o_article_emoji o-no-caret"
                                                        attrs="{'invisible': [('is_locked', '=', False), ('user_has_write_access', '=', True)]}"/>
@@ -68,18 +68,18 @@
                                     </div>
                                 </div>
                                 <!-- Buttons -->
-                                <div class="d-flex flex-shrink-0 align-items-center pr-2">
-                                    <a type="button" role="button" class="btn btn-light btn-create text-capitalize mr-1" data-hotkey="c">
+                                <div class="d-flex flex-shrink-0 align-items-center pe-2">
+                                    <a type="button" role="button" class="btn btn-light btn-create text-capitalize me-1" data-hotkey="c">
                                         <i class="fa fa-plus-circle"/> Create
                                     </a>
                                     <div class="btn-group" role="toolbar" aria-label="options">
                                         <div class="o-dropdown dropdown o-dropdown--no-caret">
-                                            <a type="button" role="button" class="btn btn-light btn-share dropdown-toggle mr-1"
-                                               data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-hotkey="s"
+                                            <a type="button" role="button" class="btn btn-light btn-share dropdown-toggle me-1"
+                                               data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-hotkey="s"
                                                attrs="{'invisible': [('id', '=', False)]}">
                                                 <i class="fa fa-share-alt"/> Share
                                             </a>
-                                            <a type="button" role="button" class="btn btn-light btn-chatter mr-1" data-hotkey="d"
+                                            <a type="button" role="button" class="btn btn-light btn-chatter me-1" data-hotkey="d"
                                                 attrs="{'invisible': [('id', '=', False)]}">
                                                 <i class="rounded-circle text-center fa fa-comments" title="Open chatter"/>
                                             </a>
@@ -97,7 +97,7 @@
                                     </div>
                                     <div class="btn-group" role="toolbar" aria-label="options">
                                         <div class="o-dropdown dropdown o-dropdown--no-caret">
-                                            <a type="button" role="button" class="btn btn-light dropdown-toggle" data-toggle="dropdown"
+                                            <a type="button" role="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown"
                                                aria-haspopup="true" aria-expanded="false" data-hotkey="p">
                                                 <i class="fa fa-ellipsis-v"/>
                                             </a>
@@ -134,13 +134,13 @@
                                                          attrs="{'invisible': [('last_edition_uid', '=', False), ('last_edition_date', '=', False)]}"/>
                                                 </div>
                                                 <div class="px-4 py-2 mx-1" attrs="{'invisible': [('last_edition_uid', '=', False)]}">
-                                                    <h6 class="small font-weight-bold m-0">Last Edited by:</h6>
+                                                    <h6 class="small fw-bold m-0">Last Edited by:</h6>
                                                     <div class="d-flex">
                                                         <field name="last_edition_uid" widget="many2one_avatar_user" readonly="1" class="text-truncate"/>
                                                         <span class="mx-1">-</span>
                                                         <field name="last_edition_date" widget="datetime" readonly="1" class="text-nowrap"/>
                                                     </div>
-                                                    <h6 class="small font-weight-bold m-0">Created by:</h6>
+                                                    <h6 class="small fw-bold m-0">Created by:</h6>
                                                     <div class="d-flex">
                                                         <field name="create_uid" widget="many2one_avatar_user" readonly="1" class="text-truncate"/>
                                                         <span class="mx-1">-</span>
@@ -171,7 +171,7 @@
                                                     <div class="o_knowledge_icon_cover_buttons text-muted bg-white d-print-none mt-2"
                                                          attrs="{'invisible': ['|', ('is_locked', '=', True), ('user_has_write_access', '=', False)]}">
                                                         <a type="button" role="button" attrs="{'invisible': [('icon', '!=', False)]}"
-                                                           class="btn btn-secondary mr-2 pl-1 o_knowledge_add_icon">
+                                                           class="btn btn-secondary me-2 ps-1 o_knowledge_add_icon">
                                                             <i class="fa fa-fw fa-smile-o" style="font-size: 1.5em;" title="Add icon"/> Add icon
                                                         </a>
                                                         <a type="button" role="button" attrs="{'invisible': [('cover', '!=', False)]}"
@@ -185,7 +185,7 @@
                                                     <div class="o_knowledge_icon o_large" attrs="{'invisible': [('icon', '=', False)]}">
                                                         <div class="o_article_emoji_dropdown dropdown">
                                                             <a href="#" class="o_article_emoji dropdown-toggle o-no-caret"
-                                                               type="button" data-toggle="dropdown" aria-expanded="true"
+                                                               type="button" data-bs-toggle="dropdown" aria-expanded="true"
                                                                attrs="{'invisible': ['|', ('is_locked', '=', True), ('user_has_write_access', '=', False)]}"/>
                                                             <p class="o_article_emoji o-no-caret"
                                                                attrs="{'invisible': [('is_locked', '=', False), ('user_has_write_access', '=', True)]}"/>
@@ -223,7 +223,7 @@
                             </div>
                         </div>
                         <div class="o_knowledge_article_form_resizer d-print-none d-none d-sm-block px-3 opacity-75 opacity-100-hover">
-                            <span class="bg-300 pl-1"/>
+                            <span class="bg-300 ps-1"/>
                         </div>
                     </div>
                 </div>
diff --git a/addons/knowledge/views/knowledge_templates_common.xml b/addons/knowledge/views/knowledge_templates_common.xml
index a853f7fa40b..5a73bb26cae 100644
--- a/addons/knowledge/views/knowledge_templates_common.xml
+++ b/addons/knowledge/views/knowledge_templates_common.xml
@@ -25,10 +25,10 @@
                 t-att-data-favorite-article-id="favorite.id if favorite else False"
                 t-att-data-category="article.category">
                 <t t-set="isActive" t-value="article.id == active_article.id if active_article else False"/>
-                <div t-attf-class="#{ '' if readonly else 'o_article_handle' } d-flex align-items-center #{ 'o_article_active font-weight-bold' if isActive else 'text-muted' }">
+                <div t-attf-class="#{ '' if readonly else 'o_article_handle' } d-flex align-items-center #{ 'o_article_active fw-bold' if isActive else 'text-muted' }">
                     <button t-if="not hideChildren and article.child_ids" class="o_article_caret btn btn-link text-muted p-0" type="button">
                         <i t-if="article.child_ids" t-att-class="'align-self-center fa fa-fw fa-caret-' + ('down' if article.id in unfolded_articles else 'right')"/>
-                        <i t-else="" class="pl-3 align-self-center"/>
+                        <i t-else="" class="ps-3 align-self-center"/>
                     </button>
                     <t t-call="knowledge.articles_template_name"/>
                 </div>
@@ -45,7 +45,7 @@
         <t t-if="not portal_readonly_mode">
             <div class="o_article_emoji_dropdown dropdown" t-att-data-article-id="article.id">
                 <a t-attf-class="o_article_emoji p-1 {{'o_article_emoji_active text-900' if isActive else ''}}" type="button"
-                    t-attf-id="o_article_emoji_dropdown_#{article.id}" data-toggle="dropdown" aria-expanded="true"
+                    t-attf-id="o_article_emoji_dropdown_#{article.id}" data-bs-toggle="dropdown" aria-expanded="true"
                     t-if="not readonly and not article.is_locked">
                     <t t-if="article.icon" t-out="article.icon"/>
                     <t t-else="">📄</t>
diff --git a/addons/knowledge/views/knowledge_templates_frontend.xml b/addons/knowledge/views/knowledge_templates_frontend.xml
index 963113a79c5..28aefdb0e76 100644
--- a/addons/knowledge/views/knowledge_templates_frontend.xml
+++ b/addons/knowledge/views/knowledge_templates_frontend.xml
@@ -14,7 +14,7 @@
             <div class="container-fluid h-100 o_knowledge_form_view" t-att-data-article-id="article.id if article else False">
                 <div class="row h-100">
                     <div t-att-class="'p-0 overflow-auto' + (' col-sm-2' if show_sidebar else ' d-none')">
-                        <div t-att-class="'o_knowledge_aside border-bottom border-right flex-column h-100 w-100' + (' d-flex' if show_sidebar else ' d-none')">
+                        <div t-att-class="'o_knowledge_aside border-bottom border-end flex-column h-100 w-100' + (' d-flex' if show_sidebar else ' d-none')">
                             <div class="p-3">
                                 <input type="text" class="form-control knowledge_search_bar" placeholder="Search an Article..."/>
                             </div>
@@ -40,7 +40,7 @@
                                 <div class="d-flex align-items-center p-3" t-else="">
                                     <!-- Title -->
                                     <span t-out="article.name" />
-                                    <a href="#" class="o_favorites_toggle_button pl-1" t-att-data-article-id="article.id">
+                                    <a href="#" class="o_favorites_toggle_button ps-1" t-att-data-article-id="article.id">
                                         <i t-if="article.is_user_favorite" class="fa fa-star" />
                                         <i t-else="" class="fa fa-star-o" />
                                     </a>
@@ -48,12 +48,12 @@
                                 <!-- Log In -->
                                 <t t-call="portal.placeholder_user_sign_in">
                                     <t t-set="_item_class" t-valuef="d-flex align-items-center p-2"/>
-                                    <t t-set="_link_class" t-valuef="nav-link font-weight-bold"/>
+                                    <t t-set="_link_class" t-valuef="nav-link fw-bold"/>
                                 </t>
                                 <t t-call="portal.user_dropdown">
                                     <t t-set="_user_name" t-value="True"/>
                                     <t t-set="_item_class" t-valuef="d-flex align-items-center p-2"/>
-                                    <t t-set="_link_class" t-valuef="nav-link font-weight-bold"/>
+                                    <t t-set="_link_class" t-valuef="nav-link fw-bold"/>
                                 </t>
                             </div>
                             <div class="p-3 text-center" t-if="not article">
diff --git a/addons/l10n_ae/views/report_invoice_templates.xml b/addons/l10n_ae/views/report_invoice_templates.xml
index df0099e7478..6a936f2c287 100644
--- a/addons/l10n_ae/views/report_invoice_templates.xml
+++ b/addons/l10n_ae/views/report_invoice_templates.xml
@@ -16,12 +16,12 @@
 
         <xpath expr="//thead//th[@name='th_taxes']" position="replace">
             <th name="th_taxes"
-                t-attf-class="text-left {{ 'd-none d-md-table-cell' if report_type == 'html' else '' }}">
+                t-attf-class="text-start {{ 'd-none d-md-table-cell' if report_type == 'html' else '' }}">
                 <span t-if="o.company_id.country_id.code == 'AE'">VAT</span>
                 <span t-else="">Taxes</span>
             </th>
             <th t-if="o.company_id.country_id.code == 'AE'" name="tax_amount"
-                t-attf-class="text-left {{ 'd-none d-md-table-cell' if report_type == 'html' else '' }}">
+                t-attf-class="text-start {{ 'd-none d-md-table-cell' if report_type == 'html' else '' }}">
                 <span>VAT Amount</span>
             </th>
         </xpath>
@@ -34,7 +34,7 @@
 
         <xpath expr="//div[hasclass('clearfix')]" position="after">
             <div t-if="o.company_id.country_id.code == 'AE' and o.currency_id != o.company_id.currency_id"
-                 id="aed_amounts" class="row clearfix ml-auto my-3 text-nowrap table">
+                 id="aed_amounts" class="row clearfix ms-auto my-3 text-nowrap table">
                 <t t-set="aed_rate"
                    t-value="o.env['res.currency']._get_conversion_rate(o.currency_id, o.company_id.currency_id, o.company_id, o.invoice_date or datetime.date.today())"/>
                 <div name="exchange_rate" class="col-auto">
diff --git a/addons/l10n_ar/views/report_invoice.xml b/addons/l10n_ar/views/report_invoice.xml
index 739e8737a30..aabed1a59d0 100644
--- a/addons/l10n_ar/views/report_invoice.xml
+++ b/addons/l10n_ar/views/report_invoice.xml
@@ -16,7 +16,7 @@
                         <span style="font-size: x-small;" t-esc="not pre_printed_report and document_legend or '&#160;'"/>
                     </span>
                 </div>
-                <div name="right-upper-side" class="col-5 text-right" style="padding-left: 0px;" t-if="not pre_printed_report">
+                <div name="right-upper-side" class="col-5 text-end" style="padding-left: 0px;" t-if="not pre_printed_report">
 
                     <!-- (6) Titulo de Documento -->
                     <h4 t-att-style="'color: %s;' % o.company_id.primary_color"><strong>
@@ -46,7 +46,7 @@
                         <span t-att-style="'color: %s;' % o.company_id.primary_color" t-esc="' - '.join([item for item in [(header_address.website or '').replace('https://', '').replace('http://', ''), header_address.email] if item])"/>
                     </t>
                 </div>
-                <div class="col-6 text-right" style="padding-left: 0px;">
+                <div class="col-6 text-end" style="padding-left: 0px;">
 
                     <t t-if="not pre_printed_report">
                         <!-- (7) Numero punto venta - (8) numero de documento -->
@@ -87,9 +87,9 @@
 
             <t t-set="custom_footer">
                 <div class="row">
-                    <div name="footer_left_column" class="col-8 text-left">
+                    <div name="footer_left_column" class="col-8 text-start">
                     </div>
-                    <div name="footer_right_column" class="col-4 text-right">
+                    <div name="footer_right_column" class="col-4 text-end">
                         <div name="pager" t-if="report_type == 'pdf'">
                             Page: <span class="page"/> / <span class="topage"/>
                         </div>
@@ -107,7 +107,7 @@
 
         <!-- NCM column for fiscal bond -->
         <th name="th_description" position="after">
-            <th t-if="fiscal_bond" name="th_ncm_code" class="text-left"><span>NCM</span></th>
+            <th t-if="fiscal_bond" name="th_ncm_code" class="text-start"><span>NCM</span></th>
         </th>
         <td name="account_invoice_line_name" position="after">
             <td t-if="fiscal_bond" name="ncm_code"><span t-field="line.product_id.l10n_ar_ncm_code"/></td>
diff --git a/addons/l10n_ar_website_sale/views/templates.xml b/addons/l10n_ar_website_sale/views/templates.xml
index 42aef89d186..8dbd1e80263 100644
--- a/addons/l10n_ar_website_sale/views/templates.xml
+++ b/addons/l10n_ar_website_sale/views/templates.xml
@@ -7,7 +7,7 @@
         <div t-attf-class="form-group #{error.get('l10n_ar_afip_responsibility_type_id') and 'o_has_error' or ''} col-xl-6">
             <label class="col-form-label" for="l10n_ar_afip_responsibility_type_id">AFIP Responsibility</label>
             <t t-if="partner.can_edit_vat()">
-                <select name="l10n_ar_afip_responsibility_type_id" t-attf-class="form-control #{error.get('l10n_ar_afip_responsibility_type_id') and 'is-invalid' or ''}">
+                <select name="l10n_ar_afip_responsibility_type_id" t-attf-class="form-select #{error.get('l10n_ar_afip_responsibility_type_id') and 'is-invalid' or ''}">
                     <option value="">AFIP Responsibility...</option>
                     <t t-foreach="responsibility_types or []" t-as="resp_type">
                         <option t-att-value="resp_type.id" t-att-selected="resp_type.id == int(responsibility) if responsibility else resp_type.id == partner.l10n_ar_afip_responsibility_type_id.id">
@@ -26,7 +26,7 @@
         <div t-attf-class="form-group #{error.get('l10n_latam_identification_type_id') and 'o_has_error' or ''} col-xl-6">
             <label class="col-form-label" for="l10n_latam_identification_type_id">Identification Type</label>
             <t t-if="partner.can_edit_vat()">
-                <select name="l10n_latam_identification_type_id" t-attf-class="form-control #{error.get('l10n_latam_identification_type_id') and 'is-invalid' or ''}">
+                <select name="l10n_latam_identification_type_id" t-attf-class="form-select #{error.get('l10n_latam_identification_type_id') and 'is-invalid' or ''}">
                     <option value="">Identification Type...</option>
                     <t t-foreach="identification_types or []" t-as="id_type">
                         <option t-att-value="id_type.id" t-att-selected="id_type.id == int(identification) if identification else id_type.id == partner.l10n_latam_identification_type_id.id">
diff --git a/addons/l10n_ca/views/report_template.xml b/addons/l10n_ca/views/report_template.xml
index 18083a1ed90..01422ce9d03 100644
--- a/addons/l10n_ca/views/report_template.xml
+++ b/addons/l10n_ca/views/report_template.xml
@@ -25,7 +25,7 @@
     </template>
 
     <template id="l10n_ca_external_layout_striped" inherit_id="web.external_layout_striped">
-        <xpath expr="//div[hasclass('float-left') and hasclass('company_address')]" position="after">
+        <xpath expr="//div[hasclass('float-start') and hasclass('company_address')]" position="after">
             <t t-if="company.account_fiscal_country_id.code == 'CA' and company.l10n_ca_pst" class="mt16">
                 <div>PST: <span t-field="company.l10n_ca_pst"/></div>
             </t>
diff --git a/addons/l10n_cl/views/report_invoice.xml b/addons/l10n_cl/views/report_invoice.xml
index fd6869f388e..566b29d5742 100644
--- a/addons/l10n_cl/views/report_invoice.xml
+++ b/addons/l10n_cl/views/report_invoice.xml
@@ -23,7 +23,7 @@
                         <span t-field="o.company_id.partner_id.name"/>
                     </strong>
                     <br/>
-                    <span name="company_activity" class="font-italic" t-field="o.company_id.report_header"/>
+                    <span name="company_activity" class="fst-italic" t-field="o.company_id.report_header"/>
                     <div/>
                     <t t-esc="' - '.join([item for item in [
                         ', '.join([item for item in [header_address.street, header_address.street2] if item]),
diff --git a/addons/l10n_din5008/report/din5008_report.xml b/addons/l10n_din5008/report/din5008_report.xml
index 32ecd1fc360..32cbf3f8983 100644
--- a/addons/l10n_din5008/report/din5008_report.xml
+++ b/addons/l10n_din5008/report/din5008_report.xml
@@ -111,7 +111,7 @@
                 </div>
 
                 <div t-attf-class="din_page footer o_company_#{company.id}_layout">
-                    <div class="text-right page_number">
+                    <div class="text-end page_number">
                         <div class="text-muted">
                             Page: <span class="page"/> of <span class="topage"/>
                         </div>
diff --git a/addons/l10n_fr/views/report_l10nfrbilan.xml b/addons/l10n_fr/views/report_l10nfrbilan.xml
index 8c9815144c5..12e8c55ae00 100644
--- a/addons/l10n_fr/views/report_l10nfrbilan.xml
+++ b/addons/l10n_fr/views/report_l10nfrbilan.xml
@@ -32,11 +32,11 @@
                     </thead>
                     <tr>
                         <td>Capital souscrit - non appel&#xE9;</td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar1" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
                         <td></td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar1" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
                     </tr>
@@ -58,83 +58,83 @@
                     </tr>
                     <tr>
                         <td>Frais d'&#xE9;tablissement</td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar2" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="-bavar2b" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar2+bavar2b" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
                     </tr>
                     <tr>
                         <td>Frais de recherche et de d&#xE9;veloppement</td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar3" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="-bavar3b" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar3+bavar3b" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
                     </tr>
                     <tr>
                         <td>Concessions, brevets, licences,..., droits et valeurs similaires</td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar4" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="-bavar4b" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar4+bavar4b" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
                     </tr>
                     <tr>
                         <td>Fonds commercial</td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar5" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="-bavar5b" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar5+bavar5b" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
                     </tr>
                     <tr>
                         <td>Autres</td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar6" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="-bavar6b" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar6+bavar6b" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
                     </tr>
                     <tr>
                         <td>Immobilisations incorporelles en cours</td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar7" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="-bavar7b" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar7+bavar7b" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
                     </tr>
                     <tr>
                         <td>Avances et acomptes</td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar8" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
                         <td></td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar8" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
                     </tr>
@@ -148,71 +148,71 @@
                     </tr>
                     <tr>
                         <td>Terrains</td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar9" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="-bavar9b" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar9+bavar9b" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
                     </tr>
                     <tr>
                         <td>Constructions</td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar10" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="-bavar10b" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar10+bavar10b" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
                     </tr>
                     <tr>
                         <td>Installations techniques,mat&#xE9;riel et outillage</td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar11" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="-bavar11b" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar11+bavar11b" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
                     </tr>
                     <tr>
                         <td>Autres</td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar12" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="-bavar12b" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar12+bavar12b" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
                     </tr>
                     <tr>
                         <td>Immobilisations corporelles en cours</td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar13" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="-bavar13b" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar13+bavar13b" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
                     </tr>
                     <tr>
                         <td>Avances et acomptes</td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar14" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
                         <td></td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar14" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
                     </tr>
@@ -226,87 +226,87 @@
                     </tr>
                     <tr>
                         <td>Participations</td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar15" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="-bavar15b" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar15+bavar15b" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
                     </tr>
                     <tr>
                         <td>Cr&#xE9;ances rattach&#xE9;es &#xE0; des participations</td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar16" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="-bavar16b" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar16+bavar16b" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
                     </tr>
                     <tr>
                         <td>Titres immobilis&#xE9;s de l'activit&#xE9; de portefeuille</td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar17" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="-bavar17b" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar17+bavar17b" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
                     </tr>
                     <tr>
                         <td>Autres titres immobilis&#xE9;s</td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar18" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="-bavar18b" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar18+bavar18b" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
                     </tr>
                     <tr>
                         <td>Pr&#xEA;ts</td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar19" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="-bavar19b" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar19+bavar19b" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
                     </tr>
                     <tr>
                         <td>Autres</td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar20" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="-bavar20b" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar20+bavar20b" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
                     </tr>
                     <tr>
-                        <td class="text-right">
+                        <td class="text-end">
                             <strong>TOTAL I</strong>
                         </td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="at1a" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="-at1b" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="at1" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
                     </tr>
@@ -324,59 +324,59 @@
                     </tr>
                     <tr>
                         <td>Mati&#xE8;res premi&#xE8;res et autres approvisionnements</td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar21" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="-bavar21b" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar21+bavar21b" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
                     </tr>
                     <tr>
                         <td>En-cours de production [biens et services]</td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar22" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="-bavar22b" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar22+bavar22b" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
                     </tr>
                     <tr>
                         <td>Produits interm&#xE9;diaires et finis</td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar23" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="-bavar23b" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar23+bavar23b" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
                     </tr>
                     <tr>
                         <td>Marchandises</td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar24" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="-bavar24b" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar24+bavar24b" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
                     </tr>
                     <tr>
                         <td>Avances et acomptes vers&#xE9;s sur commandes</td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar25" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
                         <td></td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar25" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
                     </tr>
@@ -388,35 +388,35 @@
                     </tr>
                     <tr>
                         <td>Cr&#xE9;ances clients et comptes rattach&#xE9;s</td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar26" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="-bavar26b" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar26+bavar26b" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
                     </tr>
                     <tr>
                         <td>Autres</td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar27" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="-bavar27b" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar27+bavar27b" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
                     </tr>
                     <tr>
                         <td>Capital souscrit - appel&#xE9; , non vers&#xE9;</td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar28" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
                         <td></td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar28" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
                     </tr>
@@ -428,113 +428,113 @@
                     </tr>
                     <tr>
                         <td>Actions propres</td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar29" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="-bavar29b" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar29+bavar29b" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
                     </tr>
                     <tr>
                         <td>Autres titres</td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar30" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="-bavar30b" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar30+bavar30b" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
                     </tr>
                     <tr>
                         <td>Instruments de tr&#xE9;sorerie</td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar31" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
                         <td></td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar31" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
                     </tr>
                     <tr>
                         <td>Disponibilit&#xE9;s</td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar32" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
                         <td></td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar32" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
                     </tr>
                     <tr>
                         <td>Charges constat&#xE9;s d'avance</td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar33" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
                         <td></td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar33" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
                     </tr>
                     <tr>
-                        <td class="text-right">
+                        <td class="text-end">
                             <strong>TOTAL II</strong>
                         </td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="at2a" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="-at2b" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="at2" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
                     </tr>
                     <tr>
                         <td>Charges &#xE0; r&#xE9;partir sur plusieurs exercices ( III )</td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar34" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
                         <td></td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar34" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
                     </tr>
                     <tr>
                         <td>Primes de remboursement des emprunts ( IV )</td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar35" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
                         <td></td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar35" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
                     </tr>
                     <tr>
                         <td>&#xC9;carts de conversion actif ( V )</td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar36" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
                         <td></td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="bavar36" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
                     </tr>
                     <tr>
-                        <td class="text-right">
+                        <td class="text-end">
                             <strong>TOTAL ACTIF ( I + II + III + IV + V )</strong>
                         </td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="at1a+at2a" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="-at1b-at2b" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-esc="actif" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                         </td>
                     </tr>
@@ -598,7 +598,7 @@
                             <td><span t-esc="bpvar12" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/></td>
                         </tr>
                         <tr>
-                            <td class="text-right"><strong>TOTAL I</strong></td>
+                            <td class="text-end"><strong>TOTAL I</strong></td>
                             <td><span t-esc="pt1" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/></td>
                         </tr>
                         <tr>
@@ -614,7 +614,7 @@
                             <td><span t-esc="bpvar14" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/></td>
                         </tr>
                         <tr>
-                            <td class="text-right"><strong>TOTAL II</strong></td>
+                            <td class="text-end"><strong>TOTAL II</strong></td>
                             <td><span t-esc="pt2" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/></td>
                         </tr>
                         <tr>
@@ -666,7 +666,7 @@
                             <td><span t-esc="bpvar25" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/></td>
                         </tr>
                         <tr>
-                            <td class="text-right"><strong>TOTAL III</strong></td>
+                            <td class="text-end"><strong>TOTAL III</strong></td>
                             <td><span t-esc="pt3" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/></td>
                         </tr>
                         <tr>
diff --git a/addons/l10n_fr/views/report_l10nfrresultat.xml b/addons/l10n_fr/views/report_l10nfrresultat.xml
index bc6a80a260d..654e0d5ee00 100644
--- a/addons/l10n_fr/views/report_l10nfrresultat.xml
+++ b/addons/l10n_fr/views/report_l10nfrresultat.xml
@@ -35,61 +35,61 @@
                         <tr>
                             <td>Achat de marchandises</td>
                             <td>
-                                <span class="text-right" t-esc="cdrc1" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
+                                <span class="text-end" t-esc="cdrc1" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                             </td>
                         </tr>
                         <tr>
                             <td>Variation des stocks</td>
                             <td>
-                                <span class="text-right" t-esc="cdrc2" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
+                                <span class="text-end" t-esc="cdrc2" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                             </td>
                         </tr>
                         <tr>
                             <td>Achats de mati&#xE8;res premi&#xE8;res et autres approvisionnements</td>
                             <td>
-                                <span class="text-right" t-esc="cdrc3" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
+                                <span class="text-end" t-esc="cdrc3" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                             </td>
                         </tr>
                         <tr>
                             <td>Variation des stocks</td>
                             <td>
-                                <span class="text-right" t-esc="cdrc4" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
+                                <span class="text-end" t-esc="cdrc4" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                             </td>
                         </tr>
                         <tr>
                             <td>Autres achats et charges externes</td>
                             <td>
-                                <span class="text-right" t-esc="cdrc5" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
+                                <span class="text-end" t-esc="cdrc5" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                             </td>
                         </tr>
                         <tr>
                             <td>Redevances de cr&#xE9;dit-bail mobilier</td>
                             <td>
-                                <span class="text-right" t-esc="cdrc6" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
+                                <span class="text-end" t-esc="cdrc6" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                             </td>
                         </tr>
                         <tr>
                             <td>Redevances de cr&#xE9;dit-bail immobilier</td>
                             <td>
-                                <span class="text-right" t-esc="cdrc7" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
+                                <span class="text-end" t-esc="cdrc7" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                             </td>
                         </tr>
                         <tr>
                             <td>Imp&#xF4;ts, taxes et versements assimil&#xE9;s</td>
                             <td>
-                                <span class="text-right" t-esc="cdrc8" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
+                                <span class="text-end" t-esc="cdrc8" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                             </td>
                         </tr>
                         <tr>
                             <td>Salaires et traitements</td>
                             <td>
-                                <span class="text-right" t-esc="cdrc9" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
+                                <span class="text-end" t-esc="cdrc9" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                             </td>
                         </tr>
                         <tr>
                             <td>Charges sociales</td>
                             <td>
-                                <span class="text-right" t-esc="cdrc10" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
+                                <span class="text-end" t-esc="cdrc10" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                             </td>
                         </tr>
                         <tr>
@@ -99,43 +99,43 @@
                         <tr>
                             <td>Sur immobilisations : dotations aux amortissements</td>
                             <td>
-                                <span class="text-right" t-esc="cdrc11" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
+                                <span class="text-end" t-esc="cdrc11" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                             </td>
                         </tr>
                         <tr>
                             <td>Sur immobilisations : dotations aux d&#xE9;pr&#xE9;ciations</td>
                             <td>
-                                <span class="text-right" t-esc="cdrc12" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
+                                <span class="text-end" t-esc="cdrc12" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                             </td>
                         </tr>
                         <tr>
                             <td>Sur actif circulant : dotations aux d&#xE9;pr&#xE9;ciations</td>
                             <td>
-                                <span class="text-right" t-esc="cdrc13" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
+                                <span class="text-end" t-esc="cdrc13" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                             </td>
                         </tr>
                         <tr>
                             <td>Dotations aux provisions</td>
                             <td>
-                                <span class="text-right" t-esc="cdrc14" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
+                                <span class="text-end" t-esc="cdrc14" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                             </td>
                         </tr>
                         <tr>
                             <td>Autres charges</td>
                             <td>
-                                <span class="text-right" t-esc="cdrc15" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
+                                <span class="text-end" t-esc="cdrc15" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                             </td>
                         </tr>
                         <tr>
-                            <td class="text-right"><strong>TOTAL I</strong></td>
+                            <td class="text-end"><strong>TOTAL I</strong></td>
                             <td>
-                                <span class="text-right" t-esc="ct1" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
+                                <span class="text-end" t-esc="ct1" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                             </td>
                         </tr>
                         <tr>
                             <td><strong>Quotes-parts de r&#xE9;sultat sur op&#xE9;rations faites en commun ( II )</strong></td>
                             <td>
-                                <span class="text-right" t-esc="cdrc16" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
+                                <span class="text-end" t-esc="cdrc16" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                             </td>
                         </tr>
                         <tr>                            
@@ -145,31 +145,31 @@
                         <tr>
                             <td>Dotations aux amortissements, aux d&#xE9;pr&#xE9;ciations et aux provisions</td>
                             <td>
-                                <span class="text-right" t-esc="cdrc17" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
+                                <span class="text-end" t-esc="cdrc17" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                             </td>
                         </tr>
                         <tr>
                             <td>Int&#xE9;r&#xEA;ts et charges assimil&#xE9;es</td>
                             <td>
-                                <span class="text-right" t-esc="cdrc18" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
+                                <span class="text-end" t-esc="cdrc18" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                             </td>
                         </tr>
                         <tr>
                             <td>Diff&#xE9;rences n&#xE9;gatives de change</td>
                             <td>
-                                <span class="text-right" t-esc="cdrc19" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
+                                <span class="text-end" t-esc="cdrc19" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                             </td>
                         </tr>
                         <tr>
                             <td>Charges nettes sur cessions de valeurs mobili&#xE8;res de placement</td>
                             <td>
-                                <span class="text-right" t-esc="cdrc20" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
+                                <span class="text-end" t-esc="cdrc20" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                             </td>
                         </tr>
                         <tr>
-                            <td class="text-right"><strong>TOTAL III</strong></td>
+                            <td class="text-end"><strong>TOTAL III</strong></td>
                             <td>
-                                <span class="text-right" t-esc="ct3" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
+                                <span class="text-end" t-esc="ct3" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                             </td>
                         </tr>
                         <tr>
@@ -179,43 +179,43 @@
                         <tr>
                             <td>Sur op&#xE9;rations de gestion</td>
                             <td>
-                                <span class="text-right" t-esc="cdrc21" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
+                                <span class="text-end" t-esc="cdrc21" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                             </td>
                         </tr>
                         <tr>
                             <td>Sur op&#xE9;rations en capital</td>
                             <td>
-                                <span class="text-right" t-esc="cdrc22" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
+                                <span class="text-end" t-esc="cdrc22" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                             </td>
                         </tr>
                         <tr>
                             <td>Dotations aux amortissements, aux d&#xE9;pr&#xE9;ciations et aux provisions</td>
                             <td>
-                                <span class="text-right" t-esc="cdrc23" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
+                                <span class="text-end" t-esc="cdrc23" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                             </td>
                         </tr>
                         <tr>
-                            <td class="text-right"><strong>TOTAL IV</strong></td>
+                            <td class="text-end"><strong>TOTAL IV</strong></td>
                             <td>
-                                <span class="text-right" t-esc="ct4" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
+                                <span class="text-end" t-esc="ct4" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                             </td>
                         </tr>
                         <tr>
                             <td><strong>Participation des salariés aux résultats ( V )</strong></td>
                             <td>
-                                <span class="text-right" t-esc="cdrc24" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
+                                <span class="text-end" t-esc="cdrc24" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                             </td>
                         </tr>
                         <tr>
                             <td><strong>Impôts sur les bénéfices ( VI )</strong></td>
                             <td>
-                                <span class="text-right" t-esc="cdrc25" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
+                                <span class="text-end" t-esc="cdrc25" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                             </td>
                         </tr>
                         <tr>
-                            <td class="text-right"><strong>TOTAL CHARGES ( I + II + III + IV+ V+ VI )</strong></td>
+                            <td class="text-end"><strong>TOTAL CHARGES ( I + II + III + IV+ V+ VI )</strong></td>
                             <td>
-                                <span class="text-right" t-esc="charges" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
+                                <span class="text-end" t-esc="charges" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                             </td>
                         </tr>
 
@@ -236,67 +236,67 @@
                         <tr>
                             <td>Vente de marchandises</td>
                             <td>
-                                <span class="text-right" t-esc="cdrp1" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
+                                <span class="text-end" t-esc="cdrp1" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                             </td>
                         </tr>
                         <tr>
                             <td>Production vendue [biens et services]</td>
                             <td>
-                                <span class="text-right" t-esc="cdrp2" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
+                                <span class="text-end" t-esc="cdrp2" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                             </td>
                         </tr>
                         <tr>
                             <td><strong>Sous-total A - Montant net du chiffre d'affaires</strong></td>
                             <td>
-                                <span class="text-right" t-esc="pta" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
+                                <span class="text-end" t-esc="pta" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                             </td>
                         </tr>
                         <tr>
                             <td>Production stock&#xE9;e</td>
                             <td>
-                                <span class="text-right" t-esc="cdrp3" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
+                                <span class="text-end" t-esc="cdrp3" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                             </td>
                         </tr>
                         <tr>
                             <td>Production immobilis&#xE9;e</td>
                             <td>
-                                <span class="text-right" t-esc="cdrp4" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
+                                <span class="text-end" t-esc="cdrp4" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                             </td>
                         </tr>
                         <tr>
                             <td>Subventions d'exploitation</td>
                             <td>
-                                <span class="text-right" t-esc="cdrp5" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
+                                <span class="text-end" t-esc="cdrp5" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                             </td>
                         </tr>
                         <tr>
                             <td>Reprises sur provisions, d&#xE9;pr&#xE9;ciations (et amortissements) et transferts de charges</td>
                             <td>
-                                <span class="text-right" t-esc="cdrp6" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
+                                <span class="text-end" t-esc="cdrp6" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                             </td>
                         </tr>
                         <tr>
                             <td>Autres produits</td>
                             <td>
-                                <span class="text-right" t-esc="cdrp7" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
+                                <span class="text-end" t-esc="cdrp7" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                             </td>
                         </tr>
                         <tr>
                             <td><strong>Sous-total B</strong></td>
                             <td>
-                                <span class="text-right" t-esc="ptb" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
+                                <span class="text-end" t-esc="ptb" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                             </td>
                         </tr>
                         <tr>
-                            <td class="text-right"><strong>TOTAL I ( A + B )</strong></td>
+                            <td class="text-end"><strong>TOTAL I ( A + B )</strong></td>
                             <td>
-                                <span class="text-right" t-esc="pt1" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
+                                <span class="text-end" t-esc="pt1" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                             </td>
                         </tr>
                         <tr>
                             <td><strong>Quotes-parts de r&#xE9;sultat sur op&#xE9;rations faites en commun (II)</strong></td>
                             <td>
-                                <span class="text-right" t-esc="cdrp8" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
+                                <span class="text-end" t-esc="cdrp8" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                             </td>
                         </tr>
                         <tr>
@@ -306,43 +306,43 @@
                         <tr>
                             <td>De participation</td>
                             <td>
-                                <span class="text-right" t-esc="cdrp9" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
+                                <span class="text-end" t-esc="cdrp9" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                             </td>
                         </tr>
                         <tr>
                             <td>D'autres valeurs mobili&#xE8;res et cr&#xE9;ances de l'actif immobilis&#xE9;</td>
                             <td>
-                                <span class="text-right" t-esc="cdrp10" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
+                                <span class="text-end" t-esc="cdrp10" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                             </td>
                         </tr>
                         <tr>
                             <td>Autres int&#xE9;r&#xEA;ts et produits assimil&#xE9;s</td>
                             <td>
-                                <span class="text-right" t-esc="cdrp11" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
+                                <span class="text-end" t-esc="cdrp11" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                             </td>
                         </tr>
                         <tr>
                             <td>Reprises sur provisions, d&#xE9;pr&#xE9;ciations et transferts de charges</td>
                             <td>
-                                <span class="text-right" t-esc="cdrp12" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
+                                <span class="text-end" t-esc="cdrp12" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                             </td>
                         </tr>
                         <tr>
                             <td>Diff&#xE9;rences positives de change</td>
                             <td>
-                                <span class="text-right" t-esc="cdrp13" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
+                                <span class="text-end" t-esc="cdrp13" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                             </td>
                         </tr>
                         <tr>
                             <td>Produits nets sur cessions de valeurs mobili&#xE8;res de placement</td>
                             <td>
-                                <span class="text-right" t-esc="cdrp14" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
+                                <span class="text-end" t-esc="cdrp14" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                             </td>
                         </tr>
                         <tr>
-                            <td class="text-right"><strong>TOTAL III</strong></td>
+                            <td class="text-end"><strong>TOTAL III</strong></td>
                             <td>
-                                <span class="text-right" t-esc="pt3" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
+                                <span class="text-end" t-esc="pt3" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                             </td>
                         </tr>
                         <tr>
@@ -352,37 +352,37 @@
                         <tr>
                             <td>Sur op&#xE9;rations de gestion</td>
                             <td>
-                                <span class="text-right" t-esc="cdrp15" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
+                                <span class="text-end" t-esc="cdrp15" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                             </td>
                         </tr>
                         <tr>
                             <td>Sur op&#xE9;rations en capital</td>
                             <td>
-                                <span class="text-right" t-esc="cdrp16" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
+                                <span class="text-end" t-esc="cdrp16" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                             </td>
                         </tr>
                         <tr>
                             <td>Reprises sur provisions, d&#xE9;pr&#xE9;ciations et transferts de charges</td>
                             <td>
-                                <span class="text-right" t-esc="cdrp17" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
+                                <span class="text-end" t-esc="cdrp17" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                             </td>
                         </tr>
                         <tr>
-                            <td class="text-right"><strong>TOTAL IV</strong></td>
+                            <td class="text-end"><strong>TOTAL IV</strong></td>
                             <td>
-                                <span class="text-right" t-esc="pt4" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
+                                <span class="text-end" t-esc="pt4" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                             </td>
                         </tr>
                         <tr>
-                            <td class="text-right"><strong>TOTAL DES PRODUITS ( I + II + III + IV )</strong></td>
+                            <td class="text-end"><strong>TOTAL DES PRODUITS ( I + II + III + IV )</strong></td>
                             <td>
-                                <span class="text-right" t-esc="produits" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
+                                <span class="text-end" t-esc="produits" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                             </td>
                         </tr>
                         <tr>
-                            <td class="text-right"><strong>PRODUITS - CHARGES</strong></td>
+                            <td class="text-end"><strong>PRODUITS - CHARGES</strong></td>
                             <td>
-                                <span class="text-right" t-esc="produits-charges" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
+                                <span class="text-end" t-esc="produits-charges" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                             </td>
                         </tr>
                     </tbody>
diff --git a/addons/l10n_gcc_invoice/views/report_invoice.xml b/addons/l10n_gcc_invoice/views/report_invoice.xml
index f159fe8f6b7..06c26905042 100644
--- a/addons/l10n_gcc_invoice/views/report_invoice.xml
+++ b/addons/l10n_gcc_invoice/views/report_invoice.xml
@@ -87,7 +87,7 @@
                         <div class="col-2">
                             <span t-field="o.invoice_date"/>
                         </div>
-                        <div class="col-2 text-right">
+                        <div class="col-2 text-end">
                             <strong style="white-space:nowrap">:
                                 تاريخ الفاتورة
                             </strong>
@@ -103,7 +103,7 @@
                         <div class="col-2">
                             <span t-field="o.invoice_date_due"/>
                         </div>
-                        <div class="col-2 text-right">
+                        <div class="col-2 text-end">
                             <strong style="white-space:nowrap">:
                                 تاريخ الاستحقاق
                             </strong>
@@ -117,7 +117,7 @@
                         <div class="col-2">
                             <span t-field="o.invoice_origin"/>
                         </div>
-                        <div class="col-2 text-right">
+                        <div class="col-2 text-end">
                             <strong style="white-space:nowrap">:
                                 المصدر
                             </strong>
@@ -132,7 +132,7 @@
                         <div class="col-2">
                             <span t-field="o.partner_id.ref"/>
                         </div>
-                        <div class="col-2 text-right">
+                        <div class="col-2 text-end">
                             <strong style="white-space:nowrap">:
                                 كود العميل
                             </strong>
@@ -146,7 +146,7 @@
                         <div class="col-2">
                             <span t-field="o.ref"/>
                         </div>
-                        <div class="col-2 text-right">
+                        <div class="col-2 text-end">
                             <strong style="white-space:nowrap">:
                                 رقم الإشارة
                             </strong>
@@ -159,7 +159,7 @@
                     <thead>
                         <tr>
                             <t t-set="colspan" t-value="6"/>
-                            <th name="th_description" class="text-left">
+                            <th name="th_description" class="text-start">
                                 <span>
                                     Description
                                 </span>
@@ -168,7 +168,7 @@
                                     الوصف
                                 </span>
                             </th>
-                            <th name="th_source" class="d-none text-left" t-if="0">
+                            <th name="th_source" class="d-none text-start" t-if="0">
                                 <span>
                                     Source Document
                                 </span>
@@ -177,7 +177,7 @@
                                     المستند المصدر
                                 </span>
                             </th>
-                            <th name="th_quantity" class="text-right">
+                            <th name="th_quantity" class="text-end">
                                 <span>
                                     Quantity
                                 </span>
@@ -187,7 +187,7 @@
                                 </span>
                             </th>
                             <th name="th_priceunit"
-                                class="text-right">
+                                class="text-end">
                                 <span>
                                     Unit price
                                 </span>
@@ -197,7 +197,7 @@
                                 </span>
                             </th>
                             <th name="th_price_unit" t-if="display_discount"
-                                class="text-right">
+                                class="text-end">
                                 <span>
                                     Disc.%
                                 </span>
@@ -208,7 +208,7 @@
                                 <t t-set="colspan" t-value="colspan+1"/>
                             </th>
                             <th name="th_taxes"
-                                class="text-right">
+                                class="text-end">
                                 <span>
                                     Taxes
                                 </span>
@@ -217,7 +217,7 @@
                                     الضرائب
                                 </span>
                             </th>
-                            <th name="th_subtotal" class="text-right">
+                            <th name="th_subtotal" class="text-end">
                                 <span>
                                     Amount
                                 </span>
@@ -227,7 +227,7 @@
                                 </span>
                             </th>
                             <th name="th_tax_amount"
-                                class="text-right">
+                                class="text-end">
                                 <span>
                                     VAT Amount
                                 </span>
@@ -236,7 +236,7 @@
                                     قيمة الضريبة
                                 </span>
                             </th>
-                            <th name="th_total" class="text-right">
+                            <th name="th_total" class="text-end">
                                 <span>
                                     Total Price
                                 </span>
@@ -259,7 +259,7 @@
                             <t t-set="current_subtotal" t-value="current_subtotal + line.price_total"
                                groups="account.group_show_line_subtotals_tax_included"/>
 
-                            <tr t-att-class="'bg-200 font-weight-bold o_line_section' if line.display_type == 'line_section' else 'font-italic o_line_note' if line.display_type == 'line_note' else ''">
+                            <tr t-att-class="'bg-200 fw-bold o_line_section' if line.display_type == 'line_section' else 'fst-italic o_line_note' if line.display_type == 'line_note' else ''">
                                 <t t-if="not line.display_type" name="account_invoice_line_accountable">
                                     <td name="account_invoice_line_name">
                                         <t t-set="translation_name" t-value="line.with_context(lang='ar_001').product_id.name"/>
@@ -276,28 +276,28 @@
                                             <span t-field="line.name" t-options="{'widget': 'text'}"/>
                                         </t>
                                     </td>
-                                    <td class="text-right">
+                                    <td class="text-end">
                                         <span t-field="line.quantity"/>
                                         <span t-field="line.product_uom_id" groups="uom.group_uom"/>
                                     </td>
-                                    <td class="text-right">
+                                    <td class="text-end">
                                         <span class="text-nowrap" t-field="line.price_unit"/>
                                     </td>
                                     <td t-if="display_discount"
-                                        class="text-right">
+                                        class="text-end">
                                         <span class="text-nowrap" t-field="line.discount"/>
                                     </td>
-                                    <td class="text-right">
+                                    <td class="text-end">
                                         <span t-out="', '.join(map(lambda x: (x.description or x.name), line.tax_ids))"
                                               id="line_tax_ids"/>
                                     </td>
-                                    <td class="text-right o_price_total">
+                                    <td class="text-end o_price_total">
                                         <span class="text-nowrap" t-field="line.price_subtotal"/>
                                     </td>
-                                    <td class="text-right">
+                                    <td class="text-end">
                                         <span class="text-nowrap" t-field="line.l10n_gcc_invoice_tax_amount"/>
                                     </td>
-                                    <td class="text-right o_price_total">
+                                    <td class="text-end o_price_total">
                                         <span class="text-nowrap" t-field="line.price_total"/>
                                     </td>
                                 </t>
@@ -316,7 +316,7 @@
                             </tr>
 
                             <t t-if="current_section and (line_last or lines[line_index+1].display_type == 'line_section')">
-                                <tr class="is-subtotal text-right">
+                                <tr class="is-subtotal text-end">
                                     <td colspan="99">
                                         <strong class="mr16" style="display: inline-block">Subtotal/الإجمالي الفرعي</strong>
                                         <span
@@ -342,7 +342,7 @@
                                             الإجمالي الفرعي
                                         </strong>
                                     </td>
-                                    <td class="text-right">
+                                    <td class="text-end">
                                         <span t-field="o.amount_untaxed"/>
                                     </td>
                                 </tr>
@@ -359,7 +359,7 @@
                                             المجموع
                                         </strong>
                                     </td>
-                                    <td class="text-right">
+                                    <td class="text-end">
                                         <span class="text-nowrap" t-field="o.amount_total"/>
                                     </td>
                                 </tr>
@@ -374,12 +374,12 @@
                                                         <div class="col-7 oe_form_field oe_payment_label">
                                                             Paid on/دفعت في:
                                                         </div>
-                                                        <div class="col-5 pl-0 oe_form_field oe_payment_label">
+                                                        <div class="col-5 ps-0 oe_form_field oe_payment_label">
                                                             <t t-out="payment_vals['date']"/>
                                                         </div>
                                                     </i>
                                                 </td>
-                                                <td class="text-right">
+                                                <td class="text-end">
                                                     <span t-out="payment_vals['amount']"
                                                           t-options='{"widget": "monetary", "display_currency": o.currency_id}'/>
                                                 </td>
@@ -394,7 +394,7 @@
                                                         المبلغ المستحق
                                                     </strong>
                                                 </td>
-                                                <td class="text-right">
+                                                <td class="text-end">
                                                     <span t-field="o.amount_residual"/>
                                                 </td>
                                             </tr>
@@ -408,13 +408,13 @@
 
                 <p t-if="o.move_type in ('out_invoice', 'in_refund') and o.payment_reference" name="payment_communication">
                     <div class="row">
-                        <div class="col-6 text-left">
+                        <div class="col-6 text-start">
                             Payment Reference :
                             <b>
                                 <span t-field="o.payment_reference"/>
                             </b>
                         </div>
-                        <div class="col-6 text-right">
+                        <div class="col-6 text-end">
                             <p>
                                 <b>
                                     <span t-field="o.payment_reference"/> :
@@ -427,10 +427,10 @@
 
                 <p t-if="o.invoice_payment_term_id" name="payment_term">
                     <div class="row">
-                        <div class="col-6 text-left">
+                        <div class="col-6 text-start">
                             <span t-field="o.invoice_payment_term_id.note"/>
                         </div>
-                        <div class="col-6 text-right">
+                        <div class="col-6 text-end">
                             <span dir="rtl" t-field="o_sec.invoice_payment_term_id.note"/>
                         </div>
 
@@ -438,27 +438,27 @@
                 </p>
                 <p t-if="o.narration" name="comment">
                     <div class="row">
-                        <div class="col-6 text-left">
+                        <div class="col-6 text-start">
                             <span t-field="o.narration"/>
                         </div>
-                        <div class="col-6 text-right">
+                        <div class="col-6 text-end">
                             <span t-field="o_sec.narration"/>
                         </div>
                     </div>
                 </p>
                 <p t-if="o.fiscal_position_id.note" name="note">
                     <div class="row">
-                        <div class="col-6 text-left">
+                        <div class="col-6 text-start">
                             <span t-field="o.fiscal_position_id.note"/>
                         </div>
-                        <div class="col-6 text-right">
+                        <div class="col-6 text-end">
                             <span t-field="o_sec.fiscal_position_id.note"/>
                         </div>
                     </div>
                 </p>
                 <p t-if="o.invoice_incoterm_id" name="incoterm">
                     <div class="row">
-                        <div class="col-6 text-left">
+                        <div class="col-6 text-start">
                             <strong>Incoterm:
                             </strong>
                             <span
@@ -467,7 +467,7 @@
                             <span
                                     t-field="o.invoice_incoterm_id.name"/>
                         </div>
-                        <div class="col-6 text-right">
+                        <div class="col-6 text-end">
                             <strong>شرط تجاري:
                             </strong>
                             <span
diff --git a/addons/l10n_sa/views/report_invoice.xml b/addons/l10n_sa/views/report_invoice.xml
index 2f5500f676c..657708df1c0 100644
--- a/addons/l10n_sa/views/report_invoice.xml
+++ b/addons/l10n_sa/views/report_invoice.xml
@@ -11,7 +11,7 @@
                 <div class="col-2">
                     <span t-field="o.l10n_sa_delivery_date"/>
                 </div>
-                <div class="col-2 text-right">
+                <div class="col-2 text-end">
                     <strong style="white-space:nowrap">:
                         تاريخ التوصيل
                     </strong>
diff --git a/addons/link_tracker/views/utm_campaign_views.xml b/addons/link_tracker/views/utm_campaign_views.xml
index f4ae6b464dc..c1d922a0d4c 100644
--- a/addons/link_tracker/views/utm_campaign_views.xml
+++ b/addons/link_tracker/views/utm_campaign_views.xml
@@ -23,9 +23,9 @@
                 <field name="click_count"/>
             </xpath>
             <xpath expr="//div[@id='utm_statistics']" position="inside">
-                <div class="mr-3" title="Clicks">
+                <div class="me-3" title="Clicks">
                     <i class="fa fa-mouse-pointer text-muted"></i>
-                    <small class="font-weight-bold" t-esc="record.click_count.raw_value" />
+                    <small class="fw-bold" t-esc="record.click_count.raw_value" />
                 </div>
             </xpath>
         </field>
diff --git a/addons/loyalty/report/loyalty_report_templates.xml b/addons/loyalty/report/loyalty_report_templates.xml
index 72135889f6a..27fc20dfa9c 100644
--- a/addons/loyalty/report/loyalty_report_templates.xml
+++ b/addons/loyalty/report/loyalty_report_templates.xml
@@ -22,7 +22,7 @@
                                         <br/>
                                     </t>
                                 </t>
-                                <h1 class="font-weight-bold" style="font-size: 34px" t-esc="text"/>
+                                <h1 class="fw-bold" style="font-size: 34px" t-esc="text"/>
                                 <br/>
                                 <h4 t-if="o.expiration_date">
                                     Use this promo code before
diff --git a/addons/loyalty/static/src/xml/loyalty_templates.xml b/addons/loyalty/static/src/xml/loyalty_templates.xml
index baf4fa418bf..2493615fba9 100644
--- a/addons/loyalty/static/src/xml/loyalty_templates.xml
+++ b/addons/loyalty/static/src/xml/loyalty_templates.xml
@@ -15,7 +15,7 @@
                                     </div>
                                 </div>
                                 <div class="col-lg-8 p-0">
-                                    <div class="card-body d-flex flex-column text-center justify-content-center text-lg-left h-100">
+                                    <div class="card-body d-flex flex-column text-center justify-content-center text-lg-start h-100">
                                         <h3 class="card-title" t-out="loyalty_el_title"/>
                                         <p class="card-text" t-out="data[1].description"/>
                                     </div>
@@ -31,7 +31,7 @@
     <t t-name="LoyaltyControlPanelX2Many" owl="1">
         <div t-ref="controlPanel">
             <h4 class="d-inline"><t t-esc="props.label or ''"/></h4>
-            <div class="o_cp_buttons float-right" role="toolbar" aria-label="Control panel buttons" t-ref="buttons">
+            <div class="o_cp_buttons float-end" role="toolbar" aria-label="Control panel buttons" t-ref="buttons">
                 <t t-slot="buttons"/>
             </div>
         </div>
diff --git a/addons/loyalty/views/loyalty_program_views.xml b/addons/loyalty/views/loyalty_program_views.xml
index 3a07867e60f..7650cdebdf6 100644
--- a/addons/loyalty/views/loyalty_program_views.xml
+++ b/addons/loyalty/views/loyalty_program_views.xml
@@ -140,7 +140,7 @@
         <field name="help" type="html">
             <div class="o_loyalty_not_found container">
                 <h1>No loyalty program found.</h1>
-                <p class="lead font-weight-light">Create a new one from scratch, or use one of the templates below.</p>
+                <p class="lead fw-light">Create a new one from scratch, or use one of the templates below.</p>
             </div>
         </field>
     </record>
diff --git a/addons/loyalty/views/loyalty_reward_views.xml b/addons/loyalty/views/loyalty_reward_views.xml
index 66d4f5eb374..883658b5d77 100644
--- a/addons/loyalty/views/loyalty_reward_views.xml
+++ b/addons/loyalty/views/loyalty_reward_views.xml
@@ -13,8 +13,8 @@
                         <group id="discount_group" attrs="{'invisible': [('reward_type', '!=', 'discount')]}">
                             <label for="discount"/>
                             <div class="o_row">
-                                <field name="discount" class="oe_edit_only col-2 oe_inline text-center pr-2"/>
-                                <field name="discount_mode" class="oe_edit_only col-4 oe_inline pr-2"/>
+                                <field name="discount" class="oe_edit_only col-2 oe_inline text-center pe-2"/>
+                                <field name="discount_mode" class="oe_edit_only col-4 oe_inline pe-2"/>
                                 <field name="discount" class="oe_read_only"/>
                                 <field name="discount_mode" class="oe_read_only"/>
                                 <span>on</span>
diff --git a/addons/loyalty/views/loyalty_rule_views.xml b/addons/loyalty/views/loyalty_rule_views.xml
index bafc74b4d91..93844d691b7 100644
--- a/addons/loyalty/views/loyalty_rule_views.xml
+++ b/addons/loyalty/views/loyalty_rule_views.xml
@@ -26,7 +26,7 @@
                             <field name="minimum_qty"/>
                             <label for="minimum_amount"/>
                             <div class="o_row">
-                                <field name="minimum_amount" class="oe_inline pr-2"/>
+                                <field name="minimum_amount" class="oe_inline pe-2"/>
                                 <span>tax</span>
                                 <field name="minimum_amount_tax_mode" class="oe_inline"/>
                             </div>
diff --git a/addons/lunch/report/lunch_cashmove_report_views.xml b/addons/lunch/report/lunch_cashmove_report_views.xml
index 58e8b0855df..a0f312ed1ca 100644
--- a/addons/lunch/report/lunch_cashmove_report_views.xml
+++ b/addons/lunch/report/lunch_cashmove_report_views.xml
@@ -94,8 +94,8 @@
                                         <strong class="o_kanban_record_title"><t t-esc="record.description.value"/></strong>
                                     </span>
                                 </div>
-                                <div class="col-4 text-right">
-                                    <span class="badge badge-pill">
+                                <div class="col-4 text-end">
+                                    <span class="badge rounded-pill">
                                         <strong><i class="fa fa-money" role="img" aria-label="Amount" title="Amount"/> <field name="amount" widget="monetary"/></strong>
                                     </span>
                                 </div>
@@ -106,7 +106,7 @@
                                     <t t-esc="record.date.value"/>
                                 </div>
                                 <div class="col-6">
-                                    <div class="float-right">
+                                    <div class="float-end">
                                         <field name="user_id" widget="many2one_avatar_user"/>
                                     </div>
                                 </div>
diff --git a/addons/lunch/static/src/xml/lunch_templates.xml b/addons/lunch/static/src/xml/lunch_templates.xml
index 096f29c3be2..9140a03d3ae 100644
--- a/addons/lunch/static/src/xml/lunch_templates.xml
+++ b/addons/lunch/static/src/xml/lunch_templates.xml
@@ -9,12 +9,12 @@
         <div class="o_lunch_banner container-fluid">
             <div class="o_lunch_widget row py-3 py-md-0">
                 <div class="o_lunch_widget_info col-12 col-md-4 card border-0">
-                    <div class="card-body row no-gutters align-items-center">
+                    <div class="card-body row g-0 align-items-center">
                         <div class="col-3 col-md-6 col-lg-3">
                             <img class="o_image_64_cover rounded-circle" t-attf-src="{{ widget.userimage }}"/>
                         </div>
                         <div class="col-9 col-md-6 col-lg-9">
-                            <div class="pl-3">
+                            <div class="ps-3">
                                 <div class="o_lunch_user_field py-1"/>
                                 <div class="o_lunch_location_field py-1"/>
                                 <div class="d-flex flex-row py-1">
@@ -45,7 +45,7 @@
                                             <span t-esc="line.quantity"/>
                                             <button class="btn btn-sm btn-icon btn-link fa fa-plus-circle o_add_product" t-if="can_modify" t-attf-data-id="{{ line.id }}"/>
                                         </div>
-                                        <div class="flex-grow-1 pl-2">
+                                        <div class="flex-grow-1 ps-2">
                                             <button t-if="can_modify" t-esc="line.product[1]" t-attf-class="btn btn-link o_lunch_open_wizard" t-attf-data-product-id="{{ line.product[0] }}" t-attf-data-id="{{ line.id }}"/>
                                             <t t-else="" t-esc="line.product[1]" />
                                             <t t-set="state_pill" t-value="states_mapping[line.raw_state]" />
@@ -59,7 +59,7 @@
                                         </div>
                                     </div>
                                     <div t-foreach="line.toppings" t-as="topping" t-key="topping_index" class="d-flex flex-row">
-                                        <div class="flex-grow-1 pl-5">
+                                        <div class="flex-grow-1 ps-5">
                                             <span>+ <t t-esc="topping[0]"/></span>
                                         </div>
                                         <div class="flex-grow-0">
@@ -69,7 +69,7 @@
                                             </t>
                                         </div>
                                     </div>
-                                    <span t-if="line.note" t-esc="line.note" class="text-muted pl-5"/>
+                                    <span t-if="line.note" t-esc="line.note" class="text-muted ps-5"/>
                                 </li>
                             </ul>
                         </div>
diff --git a/addons/lunch/static/tests/tours/order_lunch.js b/addons/lunch/static/tests/tours/order_lunch.js
index 26af8024f8f..0b502001eba 100644
--- a/addons/lunch/static/tests/tours/order_lunch.js
+++ b/addons/lunch/static/tests/tours/order_lunch.js
@@ -12,13 +12,13 @@ tour.register('order_lunch_tour', {
     position: 'bottom',
 },
 {
-    trigger: ".o_search_panel_filter_value .custom-control-input",
+    trigger: ".o_search_panel_filter_value .form-check-input",
     content: _t("Restrict your search using filters"),
     position: 'bottom',
 },
 {
     trigger: "div[role=article]",
-    extra_trigger: '.o_search_panel_filter_value .custom-control-input:checked',
+    extra_trigger: '.o_search_panel_filter_value .form-check-input:checked',
     content: _t("Click on a product you want to order and is available."),
     position: 'bottom',
 },
diff --git a/addons/lunch/views/lunch_cashmove_views.xml b/addons/lunch/views/lunch_cashmove_views.xml
index de3ad7ae11a..fa4f2548957 100644
--- a/addons/lunch/views/lunch_cashmove_views.xml
+++ b/addons/lunch/views/lunch_cashmove_views.xml
@@ -65,8 +65,8 @@
                                         <strong class="o_kanban_record_title"><t t-esc="record.description.value"/></strong>
                                     </span>
                                 </div>
-                                <div class="col-4 text-right">
-                                    <span class="badge badge-pill">
+                                <div class="col-4 text-end">
+                                    <span class="badge rounded-pill">
                                         <strong><i class="fa fa-money" role="img" aria-label="Amount" title="Amount"/> <field name="amount" widget="monetary"/></strong>
                                     </span>
                                 </div>
@@ -77,7 +77,7 @@
                                     <t t-esc="record.date.value"/>
                                 </div>
                                 <div class="col-6">
-                                    <div class="float-right">
+                                    <div class="float-end">
                                         <field name="user_id" widget="many2one_avatar_user"/>
                                     </div>
                                 </div>
diff --git a/addons/lunch/views/lunch_orders_views.xml b/addons/lunch/views/lunch_orders_views.xml
index 5a45e1a98a8..2241bf80433 100644
--- a/addons/lunch/views/lunch_orders_views.xml
+++ b/addons/lunch/views/lunch_orders_views.xml
@@ -91,7 +91,7 @@
                                 <div class="col-6">
                                     <i class="fa fa-money" role="img" aria-label="Money" title="Money"/> <field name="price"/>
                                 </div>
-                                <div class="col-6 text-right">
+                                <div class="col-6 text-end">
                                     <i class="fa fa-clock-o" role="img" aria-label="Date" title="Date"/> <field name="date"/>
                                 </div>
                             </div>
@@ -114,7 +114,7 @@
                                     </a>
                                 </div>
                                 <div class="col-6">
-                                    <span class="float-right">
+                                    <span class="float-end">
                                         <field name="user_id" widget="many2one_avatar_user"/>
                                     </span>
                                 </div>
@@ -215,10 +215,10 @@
                 <field name="order_deadline_passed" invisible="1"/>
                 <field name="available_today" invisible="1"/>
                 <div class="d-flex">
-                    <div class="flex-grow-0 pr-5">
+                    <div class="flex-grow-0 pe-5">
                         <field name="image_1920" widget="image" class="o_lunch_image" options="{'image_preview': 'image_128'}"/>
                     </div>
-                    <div class="flex-grow-1 pr-5">
+                    <div class="flex-grow-1 pe-5">
                         <h2><field name="name"/></h2>
                         <h3 class="pt-3"><field name="price"/></h3>
                     </div>
@@ -226,7 +226,7 @@
                 <div class="o_lunch_wizard">
                     <div class="row">
                         <div class="col-2">
-                            <field name="topping_label_1" nolabel="1" attrs="{'invisible': [('available_toppings_1', '=', False)]}" class="font-weight-bold"/>
+                            <field name="topping_label_1" nolabel="1" attrs="{'invisible': [('available_toppings_1', '=', False)]}" class="fw-bold"/>
                         </div>
                         <div class="col-10">
                             <field name="topping_ids_1" attrs="{'invisible': [('available_toppings_1', '=', False)]}" widget="many2many_checkboxes" nolabel="1" domain="[('topping_category', '=', 1), ('supplier_id', '=', supplier_id)]"/>
@@ -234,7 +234,7 @@
                     </div>
                     <div class="row">
                         <div class="col-2">
-                            <field name="topping_label_2" nolabel="1" attrs="{'invisible': [('available_toppings_2', '=', False)]}" class="font-weight-bold"/>
+                            <field name="topping_label_2" nolabel="1" attrs="{'invisible': [('available_toppings_2', '=', False)]}" class="fw-bold"/>
                         </div>
                         <div class="col-10">
                             <field name="topping_ids_2" attrs="{'invisible': [('available_toppings_2', '=', False)]}" widget="many2many_checkboxes" nolabel="1" domain="[('topping_category', '=', 2), ('supplier_id', '=', supplier_id)]"/>
@@ -242,7 +242,7 @@
                     </div>
                     <div class="row">
                         <div class="col-2">
-                            <field name="topping_label_3" nolabel="1" attrs="{'invisible': [('available_toppings_3', '=', False)]}" class="font-weight-bold"/>
+                            <field name="topping_label_3" nolabel="1" attrs="{'invisible': [('available_toppings_3', '=', False)]}" class="fw-bold"/>
                         </div>
                         <div class="col-10">
                             <field name="topping_ids_3" attrs="{'invisible': [('available_toppings_3', '=', False)]}" widget="many2many_checkboxes" nolabel="1" domain="[('topping_category', '=', 3), ('supplier_id', '=', supplier_id)]"/>
@@ -250,7 +250,7 @@
                     </div>
                     <div class="row">
                         <div class="col-2">
-                            <label for="product_description" class="font-weight-bold"/>
+                            <label for="product_description" class="fw-bold"/>
                         </div>
                         <div class="col-10">
                             <field name="product_description" nolabel="1"/>
@@ -258,7 +258,7 @@
                     </div>
                     <div class="row">
                         <div class="col-2">
-                            <label for="note" class="font-weight-bold" />
+                            <label for="note" class="fw-bold" />
                         </div>
                         <div class="col-10">
                             <field name="note" nolabel="1" placeholder="Information, allergens, ..." />
diff --git a/addons/lunch/views/lunch_product_views.xml b/addons/lunch/views/lunch_product_views.xml
index ab51a3cee40..a721954dad4 100644
--- a/addons/lunch/views/lunch_product_views.xml
+++ b/addons/lunch/views/lunch_product_views.xml
@@ -119,8 +119,8 @@
                                     <div class="o_kanban_record_headings">
                                         <strong class="o_kanban_record_title">
                                             <div>
-                                                <span class="pr-1"><field name="is_favorite" widget="boolean_favorite" nolabel="1"/></span>
-                                                <div class="float-right text-odoo">
+                                                <span class="pe-1"><field name="is_favorite" widget="boolean_favorite" nolabel="1"/></span>
+                                                <div class="float-end text-odoo">
                                                     <field name="price" widget="monetary"/>
                                                 </div>
                                                 <div t-if="record.is_new.raw_value" class="float-end o_lunch_new_product me-1 py-0 border-0 fs-6 badge rounded-pill bg-success">
@@ -167,7 +167,7 @@
                                     <div class="o_kanban_record_headings">
                                         <strong class="o_kanban_record_title">
                                             <div>
-                                                <div class="float-right">
+                                                <div class="float-end">
                                                     <field name="price" widget="monetary"/>
                                                 </div>
                                                 <strong><span t-esc="record.name.value"/></strong>
@@ -256,8 +256,8 @@
                             <div class="oe_kanban_details">
                                 <div class="o_kanban_record_top">
                                     <div class="o_kanban_record_headings">
-                                        <div class="float-right">
-                                            <button class="badge badge-primary" type="action"
+                                        <div class="float-end">
+                                            <button class="badge text-bg-primary" type="action"
                                                 name="%(lunch.lunch_product_action_statbutton)d"
                                                 context="{'search_default_category_id': active_id,'default_category_id': active_id}"
                                                 attrs="{'invisible': [('product_count', '=', 0)]}">
diff --git a/addons/mail/static/src/components/activity/activity.xml b/addons/mail/static/src/components/activity/activity.xml
index 46025908e52..89e667b391c 100644
--- a/addons/mail/static/src/components/activity/activity.xml
+++ b/addons/mail/static/src/components/activity/activity.xml
@@ -4,7 +4,7 @@
     <t t-name="mail.Activity" owl="1">
         <t t-if="activityView">
             <div class="o_Activity d-flex p-2" t-attf-class="{{ className }}" t-on-click="activityView.onClickActivity" t-ref="root">
-                <div class="o_Activity_sidebar mr-3">
+                <div class="o_Activity_sidebar me-3">
                     <div class="o_Activity_user position-relative h-100 w-100">
                         <t t-if="activityView.activity.assignee">
                             <img class="o_Activity_userAvatar rounded-circle h-100 w-100 o_object_fit_cover" t-attf-src="/web/image/res.users/{{ activityView.activity.assignee.id }}/avatar_128" t-att-alt="activityView.activity.assignee.nameOrDisplayName"/>
@@ -62,14 +62,14 @@
                         <div class="o_Activity_details">
                             <div class="d-md-table table table-sm mt-2 mb-3">
                                 <div t-if="activityView.activity.type" class="d-md-table-row mb-3">
-                                    <div class="d-md-table-cell font-weight-bold text-md-right m-0 py-md-1 px-md-4">Activity type</div>
-                                    <div class="o_Activity_type d-md-table-cell py-md-1 pr-4">
+                                    <div class="d-md-table-cell fw-bold text-md-end m-0 py-md-1 px-md-4">Activity type</div>
+                                    <div class="o_Activity_type d-md-table-cell py-md-1 pe-4">
                                         <t t-esc="activityView.activity.type.displayName"/>
                                     </div>
                                 </div>
                                 <div t-if="activityView.activity.creator" class="d-md-table-row mb-3">
-                                    <div class="d-md-table-cell font-weight-bold text-md-right m-0 py-md-1 px-md-4">Created</div>
-                                    <div class="o_Activity_detailsCreation d-md-table-cell py-md-1 pr-4">
+                                    <div class="d-md-table-cell fw-bold text-md-end m-0 py-md-1 px-md-4">Created</div>
+                                    <div class="o_Activity_detailsCreation d-md-table-cell py-md-1 pe-4">
                                         <t t-esc="activityView.formattedCreateDatetime"/>, <br t-if="messaging.device.isSmall"/>by
                                         <img class="o_Activity_detailsUserAvatar o_Activity_detailsCreatorAvatar ms-1 me-1 rounded-circle align-text-bottom" t-attf-src="/web/image/res.users/{{ activityView.activity.creator.id }}/avatar_128" t-att-title="activityView.activity.creator.nameOrDisplayName" t-att-alt="activityView.activity.creator.nameOrDisplayName"/>
                                         <b class="o_Activity_detailsCreator">
@@ -78,15 +78,15 @@
                                     </div>
                                 </div>
                                 <div t-if="activityView.activity.assignee" class="d-md-table-row mb-3">
-                                    <div class="d-md-table-cell font-weight-bold text-md-right m-0 py-md-1 px-md-4">Assigned to</div>
-                                    <div class="o_Activity_detailsAssignation d-md-table-cell py-md-1 pr-4">
+                                    <div class="d-md-table-cell fw-bold text-md-end m-0 py-md-1 px-md-4">Assigned to</div>
+                                    <div class="o_Activity_detailsAssignation d-md-table-cell py-md-1 pe-4">
                                         <img class="o_Activity_detailsUserAvatar o_Activity_detailsAssignationUserAvatar me-1 rounded-circle align-text-bottom" t-attf-src="/web/image/res.users/{{ activityView.activity.assignee.id }}/avatar_128" t-att-title="activityView.activity.assignee.nameOrDisplayName" t-att-alt="activityView.activity.assignee.nameOrDisplayName"/>
                                         <b t-esc="activityView.activity.assignee.nameOrDisplayName"/>
                                     </div>
                                 </div>
                                 <div class="d-md-table-row">
-                                    <div class="d-md-table-cell font-weight-bold text-md-right m-0 py-md-1 px-md-4">Due on</div>
-                                    <div class="o_Activity_detailsDueDate d-md-table-cell py-md-1 pr-4">
+                                    <div class="d-md-table-cell fw-bold text-md-end m-0 py-md-1 px-md-4">Due on</div>
+                                    <div class="o_Activity_detailsDueDate d-md-table-cell py-md-1 pe-4">
                                         <span class="o_Activity_deadlineDateText"
                                             t-att-class="{
                                                 'text-danger': activityView.activity.state === 'overdue',
@@ -121,11 +121,11 @@
 
                     <t t-if="activityView.activity.canWrite">
                         <div name="tools" class="o_Activity_tools d-flex">
-                            <button class="o_Activity_toolButton o_Activity_markDoneButton btn btn-link btn-primary pt-0 pl-0" t-att-title="activityView.markDoneText" t-ref="markDoneButton" t-on-click="activityView.onClickMarkDoneButton">
+                            <button class="o_Activity_toolButton o_Activity_markDoneButton btn btn-link btn-primary pt-0 ps-0" t-att-title="activityView.markDoneText" t-ref="markDoneButton" t-on-click="activityView.onClickMarkDoneButton">
                                 <i class="fa fa-check"/> Mark Done
                             </button>
                             <t t-if="activityView.fileUploader">
-                                <button class="o_Activity_toolButton o_Activity_uploadButton btn btn-link btn-primary pt-0 pl-0" t-on-click="activityView.onClickUploadDocument">
+                                <button class="o_Activity_toolButton o_Activity_uploadButton btn btn-link btn-primary pt-0 ps-0" t-on-click="activityView.onClickUploadDocument">
                                     <i class="fa fa-upload"/> Upload Document
                                 </button>
                             </t>
diff --git a/addons/mail/static/src/components/activity_box/activity_box.xml b/addons/mail/static/src/components/activity_box/activity_box.xml
index fdde05c034d..ade3fb81f0a 100644
--- a/addons/mail/static/src/components/activity_box/activity_box.xml
+++ b/addons/mail/static/src/components/activity_box/activity_box.xml
@@ -4,7 +4,7 @@
     <t t-name="mail.ActivityBox" owl="1">
         <t t-if="activityBoxView">
             <div class="o_ActivityBox" t-attf-class="{{ className }}" t-ref="root">
-                <a href="#" role="button" class="o_ActivityBox_title btn d-flex align-items-center mt-4 p-0 w-100 font-weight-bold" t-att-aria-expanded="activityBoxView.isActivityListVisible ? 'true' : 'false'" t-on-click="activityBoxView.onClickActivityBoxTitle">
+                <a href="#" role="button" class="o_ActivityBox_title btn d-flex align-items-center mt-4 p-0 w-100 fw-bold" t-att-aria-expanded="activityBoxView.isActivityListVisible ? 'true' : 'false'" t-on-click="activityBoxView.onClickActivityBoxTitle">
                     <hr class="o_ActivityBox_titleLine w-auto flex-grow-1 me-3" />
                     <span class="o_ActivityBox_titleText">
                         <i class="fa fa-fw" t-att-class="activityBoxView.isActivityListVisible ? 'fa-caret-down' : 'fa-caret-right'"/>
@@ -13,17 +13,17 @@
                     <t t-if="!activityBoxView.isActivityListVisible">
                         <span class="o_ActivityBox_titleBadges ms-2">
                             <t t-if="activityBoxView.chatter.thread.overdueActivities.length > 0">
-                                <span class="o_ActivityBox_titleBadge me-1 badge border-0 badge-danger">
+                                <span class="o_ActivityBox_titleBadge me-1 badge border-0 text-bg-danger">
                                     <t t-esc="activityBoxView.chatter.thread.overdueActivities.length"/>
                                 </span>
                             </t>
                             <t t-if="activityBoxView.chatter.thread.todayActivities.length > 0">
-                                <span class="o_ActivityBox_titleBadge me-1 badge border-0 badge-warning">
+                                <span class="o_ActivityBox_titleBadge me-1 badge border-0 text-bg-warning">
                                     <t t-esc="activityBoxView.chatter.thread.todayActivities.length"/>
                                 </span>
                             </t>
                             <t t-if="activityBoxView.chatter.thread.futureActivities.length > 0">
-                                <span class="o_ActivityBox_titleBadge me-1 badge border-0 badge-success">
+                                <span class="o_ActivityBox_titleBadge me-1 badge border-0 text-bg-success">
                                     <t t-esc="activityBoxView.chatter.thread.futureActivities.length"/>
                                 </span>
                             </t>
diff --git a/addons/mail/static/src/components/activity_mark_done_popover_content/activity_mark_done_popover_content.xml b/addons/mail/static/src/components/activity_mark_done_popover_content/activity_mark_done_popover_content.xml
index cb41e1a2c74..e87c49c3a97 100644
--- a/addons/mail/static/src/components/activity_mark_done_popover_content/activity_mark_done_popover_content.xml
+++ b/addons/mail/static/src/components/activity_mark_done_popover_content/activity_mark_done_popover_content.xml
@@ -4,7 +4,7 @@
     <t t-name="mail.ActivityMarkDonePopoverContent" owl="1">
         <t t-if="activityMarkDonePopoverContentView">
             <div class="o_ActivityMarkDonePopoverContent" t-attf-class="{{ className }}" t-on-keydown="activityMarkDonePopoverContentView.onKeydown" t-ref="root">
-                <h6 class="o_ActivityMarkDonePopoverContent_header p-2 font-weight-bolder bg-200 border-bottom" t-esc="activityMarkDonePopoverContentView.headerText"/>
+                <h6 class="o_ActivityMarkDonePopoverContent_header p-2 fw-bolder bg-200 border-bottom" t-esc="activityMarkDonePopoverContentView.headerText"/>
                 <div class="o_ActivityMarkDonePopoverContent_content py-2 px-3">
                     <textarea class="form-control o_ActivityMarkDonePopoverContent_feedback" rows="3" placeholder="Write Feedback" t-on-blur="activityMarkDonePopoverContentView.onBlur" t-ref="feedbackTextarea"/>
                     <div class="o_ActivityMarkDonePopoverContent_buttons">
diff --git a/addons/mail/static/src/components/attachment_box/attachment_box.xml b/addons/mail/static/src/components/attachment_box/attachment_box.xml
index 3fbe6188ec0..02343f29498 100644
--- a/addons/mail/static/src/components/attachment_box/attachment_box.xml
+++ b/addons/mail/static/src/components/attachment_box/attachment_box.xml
@@ -6,7 +6,7 @@
             <div class="o_AttachmentBox position-relative" t-attf-class="{{ className }}" t-ref="root">
                 <div class="o_AttachmentBox_title d-flex align-items-center">
                     <hr class="o_AttachmentBox_dashedLine flex-grow-1"/>
-                    <span class="o_AttachmentBox_titleText p-3 font-weight-bold">
+                    <span class="o_AttachmentBox_titleText p-3 fw-bold">
                         Files
                     </span>
                     <hr class="o_AttachmentBox_dashedLine flex-grow-1"/>
diff --git a/addons/mail/static/src/components/attachment_card/attachment_card.xml b/addons/mail/static/src/components/attachment_card/attachment_card.xml
index ffad4be6547..6d11d32eee7 100644
--- a/addons/mail/static/src/components/attachment_card/attachment_card.xml
+++ b/addons/mail/static/src/components/attachment_card/attachment_card.xml
@@ -27,7 +27,7 @@
                         </t>
                     </div>
                     <!-- Attachment aside -->
-                    <div class="o_AttachmentCard_aside position-relative rounded-right overflow-hidden" t-att-class="{ 'o-hasMultipleActions d-flex flex-column': attachmentCard.hasMultipleActions }">
+                    <div class="o_AttachmentCard_aside position-relative rounded-end overflow-hidden" t-att-class="{ 'o-hasMultipleActions d-flex flex-column': attachmentCard.hasMultipleActions }">
                         <!-- Uploading icon -->
                         <t t-if="attachmentCard.attachment.isUploading and attachmentCard.attachmentList.composerViewOwner">
                             <div class="o_AttachmentCard_asideItem o_AttachmentCard_asideItemUploading d-flex justify-content-center align-items-center w-100 h-100" title="Uploading">
diff --git a/addons/mail/static/src/components/call_invite_request_popup/call_invite_request_popup.xml b/addons/mail/static/src/components/call_invite_request_popup/call_invite_request_popup.xml
index 77c7171dfd8..b1a6db2d41f 100644
--- a/addons/mail/static/src/components/call_invite_request_popup/call_invite_request_popup.xml
+++ b/addons/mail/static/src/components/call_invite_request_popup/call_invite_request_popup.xml
@@ -3,15 +3,15 @@
 
     <t t-name="mail.CallInviteRequestPopup" owl="1">
         <t t-if="callInviteRequestPopup">
-            <div class="o_CallInviteRequestPopup d-flex flex-column m-2 p-5 border border-dark rounded-sm bg-900" t-attf-class="{{ className }}" t-ref="root">
+            <div class="o_CallInviteRequestPopup d-flex flex-column m-2 p-5 border border-dark rounded-1 bg-900" t-attf-class="{{ className }}" t-ref="root">
                 <t t-if="callInviteRequestPopup.thread.rtcInvitingSession">
                     <div class="o_CallInviteRequestPopup_partnerInfo d-flex flex-column justify-content-around align-items-center text-nowrap">
                         <img class="o_CallInviteRequestPopup_partnerInfoImage mb-2 rounded-circle o_cursor_pointer"
                             t-att-src="callInviteRequestPopup.thread.rtcInvitingSession.avatarUrl"
                             t-on-click="callInviteRequestPopup.onClickAvatar"
                             alt="Avatar"/>
-                        <span class="o_CallInviteRequestPopup_partnerInfoName w-100 font-weight-bolder text-truncate text-center overflow-hidden" t-esc="callInviteRequestPopup.thread.rtcInvitingSession.name"/>
-                        <span class="o_CallInviteRequestPopup_partnerInfoText font-italic opacity-75">Incoming Call...</span>
+                        <span class="o_CallInviteRequestPopup_partnerInfoName w-100 fw-bolder text-truncate text-center overflow-hidden" t-esc="callInviteRequestPopup.thread.rtcInvitingSession.name"/>
+                        <span class="o_CallInviteRequestPopup_partnerInfoText fst-italic opacity-75">Incoming Call...</span>
                     </div>
                 </t>
                 <div class="o_CallInviteRequestPopup_buttonList d-flex justify-content-around align-items-center w-100 mt-4">
diff --git a/addons/mail/static/src/components/call_option_menu/call_option_menu.xml b/addons/mail/static/src/components/call_option_menu/call_option_menu.xml
index 7331197c3bf..c9ceb2671df 100644
--- a/addons/mail/static/src/components/call_option_menu/call_option_menu.xml
+++ b/addons/mail/static/src/components/call_option_menu/call_option_menu.xml
@@ -6,31 +6,31 @@
             <div class="o_CallOptionMenu d-flex flex-column" t-attf-class="{{ className }}" t-ref="root">
                 <t t-if="callOptionMenu.callActionListView.channel.videoCount > 0">
                     <div class="o_CallOptionMenu_button btn d-flex align-items-center border-0 rounded">
-                        <label class="o_CallOptionMenu_checkBoxLabel o_cursor_pointer d-flex align-items-center mb-0 text-800 font-weight-normal">
+                        <label class="o_CallOptionMenu_checkBoxLabel o_cursor_pointer d-flex align-items-center mb-0 text-800 fw-normal">
                             <input class="o_CallOptionMenu_checkBox mx-2 p-1" type="checkbox" t-on-change="callOptionMenu.onChangeVideoFilterCheckbox" t-att-checked="callOptionMenu.callView.filterVideoGrid"/>
-                            <span class="o_CallOptionMenu_buttonText py-1 pl-1 text-truncate">Video only</span>
+                            <span class="o_CallOptionMenu_buttonText py-1 ps-1 text-truncate">Video only</span>
                         </label>
                     </div>
                     <hr class="o_CallOptionMenu_separator w-100 my-1 bg-300"/>
                 </t>
                 <t t-if="callOptionMenu.callView.isFullScreen">
-                    <button class="o_CallOptionMenu_button btn d-flex align-items-center border-0 rounded text-800 font-weight-normal" t-on-click="callOptionMenu.onClickDeactivateFullScreen">
+                    <button class="o_CallOptionMenu_button btn d-flex align-items-center border-0 rounded text-800 fw-normal" t-on-click="callOptionMenu.onClickDeactivateFullScreen">
                         <i class="o_CallOptionMenu_buttonIcon fa fa-lg fa-compress m-1 p-1"/>
                         <span class="o_CallOptionMenu_buttonText text-truncate">Exit full screen</span>
                     </button>
                 </t>
                 <t t-else="">
-                    <button class="o_CallOptionMenu_button btn d-flex align-items-center border-0 rounded text-800 font-weight-normal" t-on-click="callOptionMenu.onClickActivateFullScreen">
+                    <button class="o_CallOptionMenu_button btn d-flex align-items-center border-0 rounded text-800 fw-normal" t-on-click="callOptionMenu.onClickActivateFullScreen">
                         <i class="o_CallOptionMenu_buttonIcon fa fa-lg fa-arrows-alt m-1 p-1"/>
                         <span class="o_CallOptionMenu_buttonText text-truncate">Full screen</span>
                     </button>
                 </t>
-                <button class="o_CallOptionMenu_button btn d-flex align-items-center border-0 rounded text-800 font-weight-normal" t-on-click="callOptionMenu.onClickOptions">
+                <button class="o_CallOptionMenu_button btn d-flex align-items-center border-0 rounded text-800 fw-normal" t-on-click="callOptionMenu.onClickOptions">
                     <i class="o_CallOptionMenu_buttonIcon fa fa-lg fa-cog m-1 p-1"/>
                     <span class="o_CallOptionMenu_buttonText text-truncate">Settings</span>
                 </button>
                 <t t-if="messaging.modelManager.isDebug">
-                    <button class="o_CallOptionMenu_button btn d-flex align-items-center border-0 rounded text-800 font-weight-normal" t-on-click="callOptionMenu.onClickDownloadLogs">
+                    <button class="o_CallOptionMenu_button btn d-flex align-items-center border-0 rounded text-800 fw-normal" t-on-click="callOptionMenu.onClickDownloadLogs">
                         <i class="o_CallOptionMenu_buttonIcon fa fa-lg fa-file-text-o m-1 p-1"/>
                         <span class="o_CallOptionMenu_buttonText text-truncate">Download logs</span>
                     </button>
diff --git a/addons/mail/static/src/components/call_participant_card/call_participant_card.scss b/addons/mail/static/src/components/call_participant_card/call_participant_card.scss
index 4f9756d7ca3..1be2983d3ba 100644
--- a/addons/mail/static/src/components/call_participant_card/call_participant_card.scss
+++ b/addons/mail/static/src/components/call_participant_card/call_participant_card.scss
@@ -21,7 +21,7 @@
     }
 
     &.o-isInvitation:hover {
-        border: solid theme-color('danger');
+        border: solid map-get($theme-colors, 'danger');
     }
 }
 
diff --git a/addons/mail/static/src/components/call_participant_card/call_participant_card.xml b/addons/mail/static/src/components/call_participant_card/call_participant_card.xml
index fe57c8d75c9..a60c9336090 100644
--- a/addons/mail/static/src/components/call_participant_card/call_participant_card.xml
+++ b/addons/mail/static/src/components/call_participant_card/call_participant_card.xml
@@ -3,7 +3,7 @@
 
     <t t-name="mail.CallParticipantCard" owl="1">
         <t t-if="callParticipantCard">
-            <div class="o_CallParticipantCard position-relative o_cursor_pointer d-flex flex-column align-items-center justify-content-center mh-100 mw-100 p-1 rounded-sm"
+            <div class="o_CallParticipantCard position-relative o_cursor_pointer d-flex flex-column align-items-center justify-content-center mh-100 mw-100 p-1 rounded-1"
                 t-att-class="{
                     'o-isTalking': !callParticipantCard.isMinimized and callParticipantCard.isTalking,
                     'o-isInvitation opacity-50': callParticipantCard.isInvitation,
@@ -20,7 +20,7 @@
                     <CallParticipantVideo record="callParticipantCard.callParticipantVideoView"/>
                 </t>
                 <t t-else="">
-                    <div class="o_CallParticipantCard_avatarFrame d-flex align-items-center justify-content-center h-100 w-100 rounded-sm" t-att-class="{ 'o-isMinimized': callParticipantCard.isMinimized, 'bg-secondary': !callParticipantCard.isMinimized}" draggable="false">
+                    <div class="o_CallParticipantCard_avatarFrame d-flex align-items-center justify-content-center h-100 w-100 rounded-1" t-att-class="{ 'o-isMinimized': callParticipantCard.isMinimized, 'bg-secondary': !callParticipantCard.isMinimized}" draggable="false">
                         <img alt="Avatar"
                              t-att-class="{
                                 'o-isTalking': callParticipantCard.isTalking,
@@ -37,10 +37,10 @@
                     <!-- overlay -->
                     <span class="o_CallParticipantCard_overlay o_CallParticipantCard_overlayBottom position-absolute bottom-0 start-0 d-flex overflow-hidden">
                         <t t-if="!callParticipantCard.isMinimized">
-                            <span class="o_CallParticipantCard_name p-1 rounded-sm bg-black-75 text-white text-truncate" t-esc="callParticipantCard.name"/>
+                            <span class="o_CallParticipantCard_name p-1 rounded-1 bg-black-75 text-white text-truncate" t-esc="callParticipantCard.name"/>
                         </t>
                         <t t-if="callParticipantCard.rtcSession.isScreenSharingOn and callParticipantCard.isMinimized and !callParticipantCard.rtcSession.channel.rtc">
-                            <small class="o_CallParticipantCard_liveIndicator o-isMinimized badge-pill badge-danger d-flex align-items-center font-weight-bolder" title="live" aria-label="live">
+                            <small class="o_CallParticipantCard_liveIndicator o-isMinimized rounded-pill text-bg-danger d-flex align-items-center fw-bolder" title="live" aria-label="live">
                                 LIVE
                             </small>
                         </t>
@@ -67,7 +67,7 @@
                             </span>
                         </t>
                         <t t-if="callParticipantCard.rtcSession.isScreenSharingOn and !callParticipantCard.isMinimized and !callParticipantCard.rtcSession.channel.rtc">
-                            <span class="o_CallParticipantCard_liveIndicator badge-pill badge-danger d-flex align-items-center me-1 font-weight-bolder" title="live" aria-label="live">
+                            <span class="o_CallParticipantCard_liveIndicator rounded-pill text-bg-danger d-flex align-items-center me-1 fw-bolder" title="live" aria-label="live">
                                 LIVE
                             </span>
                         </t>
diff --git a/addons/mail/static/src/components/call_participant_video/call_participant_video.xml b/addons/mail/static/src/components/call_participant_video/call_participant_video.xml
index 86be94b7172..a68a218fe1e 100644
--- a/addons/mail/static/src/components/call_participant_video/call_participant_video.xml
+++ b/addons/mail/static/src/components/call_participant_video/call_participant_video.xml
@@ -3,7 +3,7 @@
 
     <t t-name="mail.CallParticipantVideo" owl="1">
         <t t-if="callParticipantVideoView">
-            <video class="o_CallParticipantVideo w-100 h-100 rounded-sm bg-black o_cursor_pointer"
+            <video class="o_CallParticipantVideo w-100 h-100 rounded-1 bg-black o_cursor_pointer"
                 t-attf-class="{{ className }}"
                 playsinline="true"
                 autoplay="true"
diff --git a/addons/mail/static/src/components/call_settings_menu/call_settings_menu.xml b/addons/mail/static/src/components/call_settings_menu/call_settings_menu.xml
index be68208473d..a3697491a7f 100644
--- a/addons/mail/static/src/components/call_settings_menu/call_settings_menu.xml
+++ b/addons/mail/static/src/components/call_settings_menu/call_settings_menu.xml
@@ -5,9 +5,9 @@
         <div class="o_CallSettingsMenu d-flex flex-column ms-2 overflow-auto" t-attf-class="{{ className }}" t-ref="root">
             <div class="o_CallSettingsMenu_option d-flex align-items-center flex-wrap m-2 p-1">
                 <label class="o_CallSettingsMenu_optionLabel d-flex align-items-center flex-wrap mw-100 o_cursor_pointer" title="Input device" aria-label="Input device">
-                    <span class="o_CallSettingsMenuoptionName me-2 text-truncate font-weight-bolder">Input device</span>
+                    <span class="o_CallSettingsMenuoptionName me-2 text-truncate fw-bolder">Input device</span>
                     <div>
-                        <select name="inputDevice" class="o_CallSettingsMenu_optionDeviceSelect custom-select" t-att-value="messaging.userSetting.audioInputDeviceId" t-on-change="callSettingsMenu.onChangeSelectAudioInput">
+                        <select name="inputDevice" class="o_CallSettingsMenu_optionDeviceSelect form-select" t-att-value="messaging.userSetting.audioInputDeviceId" t-on-change="callSettingsMenu.onChangeSelectAudioInput">
                             <option value="">Browser default</option>
                             <t t-if="state.userDevices" t-foreach="state.userDevices" t-as="device" t-key="device_index">
                                 <CallSettingsMenuDevice device="device"/>
@@ -18,17 +18,17 @@
             </div>
             <div class="o_CallSettingsMenu_option d-flex align-items-center flex-wrap m-2 p-1">
                 <label class="o_CallSettingsMenu_optionLabel d-flex align-items-center flex-wrap mw-100 o_cursor_pointer" title="Use Push-to-talk" aria-label="Use Push-to-talk">
-                    <span class="o_CallSettingsMenu_optionName me-2 text-truncate font-weight-bolder">Use Push-to-talk</span>
+                    <span class="o_CallSettingsMenu_optionName me-2 text-truncate fw-bolder">Use Push-to-talk</span>
                     <input type="checkbox" aria-label="toggle push-to-talk" title="toggle push-to-talk" t-on-change="callSettingsMenu.onChangePushToTalk" t-att-checked="messaging.userSetting.usePushToTalk ? 'checked' : ''"/>
                 </label>
             </div>
             <t t-if="messaging.userSetting.usePushToTalk">
                 <div class="o_CallSettingsMenu_option d-flex align-items-center flex-wrap m-2 p-1">
                     <label class="o_CallSettingsMenu_optionLabel d-flex align-items-center flex-wrap mw-100 o_cursor_pointer" title="Push-to-talk key" aria-label="Push-to-talk key">
-                        <span class="o_CallSettingsMenu_optionName me-2 text-truncate font-weight-bolder">Push-to-talk key</span>
+                        <span class="o_CallSettingsMenu_optionName me-2 text-truncate fw-bolder">Push-to-talk key</span>
                         <span class="o_CallSettingsMenu_optionPushToTalkGroup d-flex">
                             <t t-if="messaging.userSetting.pushToTalkKey">
-                                <span class="o_CallSettingsMenu_optionPushToTalkGroupKey ms-1 px-3 border border-2 rounded fs-3 font-weight-bolder" t-attf-class="{{ callSettingsMenu.isRegisteringKey ? 'o-isRegistering border-danger' : 'border-primary' }}" t-esc="messaging.userSetting.pushToTalkKeyToString()"/>
+                                <span class="o_CallSettingsMenu_optionPushToTalkGroupKey ms-1 px-3 border border-2 rounded fs-3 fw-bolder" t-attf-class="{{ callSettingsMenu.isRegisteringKey ? 'o-isRegistering border-danger' : 'border-primary' }}" t-esc="messaging.userSetting.pushToTalkKeyToString()"/>
                             </t>
                             <button class="o_CallSettingsMenu_button btn btn-link px-2 py-0 text-black" t-on-click="callSettingsMenu.onClickRegisterKeyButton">
                                 <t t-if="callSettingsMenu.isRegisteringKey">
@@ -45,7 +45,7 @@
                 <div t-if="callSettingsMenu.isRegisteringKey">Press a key to register it as the push-to-talk shortcut</div>
                 <div class="o_CallSettingsMenu_option d-flex align-items-center flex-wrap m-2 p-1">
                     <label class="o_CallSettingsMenu_optionLabel d-flex align-items-center flex-wrap mw-100 o_cursor_pointer" title="Delay after releasing push-to-talk" aria-label="Delay after releasing push-to-talk">
-                        <span class="o_CallSettingsMenu_optionName me-2 text-truncate font-weight-bolder">Delay after releasing push-to-talk</span>
+                        <span class="o_CallSettingsMenu_optionName me-2 text-truncate fw-bolder">Delay after releasing push-to-talk</span>
                         <div class="o_CallSettingsMenu_optionInputGroup d-flex w-100">
                         <input class="o_CallSettingsMenu_optionInputGroupInput" type="range" min="1" max="2000" step="1" t-att-value="messaging.userSetting.voiceActiveDuration" t-on-change="callSettingsMenu.onChangeDelay"/>
                         <span class="o_CallSettingsMenu_optionInputGroupValue p-1"><t t-esc="messaging.userSetting.voiceActiveDuration"/>ms</span>
@@ -56,7 +56,7 @@
             <t t-else="">
                 <div class="o_CallSettingsMenu_option d-flex align-items-center flex-wrap m-2 p-1">
                     <label class="o_CallSettingsMenu_optionLabel d-flex align-items-center flex-wrap mw-100 o_cursor_pointer" title="Minimum activity for voice detection" aria-label="Minimum activity for voice detection">
-                        <span class="o_CallSettingsMenu_optionName me-2 text-truncate font-weight-bolder">Minimum activity for voice detection</span>
+                        <span class="o_CallSettingsMenu_optionName me-2 text-truncate fw-bolder">Minimum activity for voice detection</span>
                         <div class="o_CallSettingsMenu_optionInputGroup d-flex w-100">
                             <input class="o_CallSettingsMenu_optionInputGroupInput" type="range" min="0.001" max="1" step="0.001" t-att-value="messaging.userSetting.voiceActivationThreshold" t-on-change="callSettingsMenu.onChangeThreshold"/>
                             <span class="o_CallSettingsMenu_optionInputGroupValue p-1"><t t-esc="messaging.userSetting.voiceActivationThreshold"/></span>
diff --git a/addons/mail/static/src/components/call_sidebar_view/call_sidebar_view.scss b/addons/mail/static/src/components/call_sidebar_view/call_sidebar_view.scss
index af1ba2065a0..8dd93af20de 100644
--- a/addons/mail/static/src/components/call_sidebar_view/call_sidebar_view.scss
+++ b/addons/mail/static/src/components/call_sidebar_view/call_sidebar_view.scss
@@ -24,9 +24,9 @@
 .o_CallSidebarView {
 
     &::-webkit-scrollbar {
-        background: gray('900');
+        background: map-get($grays, '900');
     }
     &::-webkit-scrollbar-thumb {
-        background: gray('700');
+        background: map-get($grays, '700');
     }
 }
diff --git a/addons/mail/static/src/components/channel_member/channel_member.xml b/addons/mail/static/src/components/channel_member/channel_member.xml
index e1246370990..9d9dd068874 100644
--- a/addons/mail/static/src/components/channel_member/channel_member.xml
+++ b/addons/mail/static/src/components/channel_member/channel_member.xml
@@ -17,7 +17,7 @@
                     />
                 </t>
             </div>
-            <span class="o_ChannelMember_name ml-2 flex-column-1 text-truncate o_cursor_pointer" t-on-click="channelMemberView.onClickMemberName">
+            <span class="o_ChannelMember_name ms-2 flex-column-1 text-truncate o_cursor_pointer" t-on-click="channelMemberView.onClickMemberName">
                 <t t-esc="channelMemberView.channelMember.partner.nameOrDisplayName"/>
             </span>
         </div>
diff --git a/addons/mail/static/src/components/chat_window/chat_window.xml b/addons/mail/static/src/components/chat_window/chat_window.xml
index b69494bb2a6..a65301e6eed 100644
--- a/addons/mail/static/src/components/chat_window/chat_window.xml
+++ b/addons/mail/static/src/components/chat_window/chat_window.xml
@@ -3,7 +3,7 @@
 
     <t t-name="mail.ChatWindow" owl="1">
         <t t-if="chatWindow">
-            <div class="o_ChatWindow position-absolute bottom-0 d-flex flex-column rounded-lg-top bg-white" t-attf-class="{{ className }}" tabindex="0" t-att-data-visible-index="chatWindow.visibleIndex"
+            <div class="o_ChatWindow position-absolute bottom-0 d-flex flex-column rounded-top-3 bg-white" t-attf-class="{{ className }}" tabindex="0" t-att-data-visible-index="chatWindow.visibleIndex"
                 t-att-class="{
                     'o-focused': chatWindow.isFocused,
                     'o-folded': chatWindow.isFolded,
@@ -32,7 +32,7 @@
                 </t>
                 <t t-if="chatWindow.newMessageAutocompleteInputView">
                     <div class="o_ChatWindow_newMessageForm d-flex align-items-center m-3">
-                        <span class="o_ChatWindow_newMessageFormLabel flex-grow-0 flex-shrink-0 mr-2">
+                        <span class="o_ChatWindow_newMessageFormLabel flex-grow-0 flex-shrink-0 me-2">
                             To:
                         </span>
                         <AutocompleteInput
diff --git a/addons/mail/static/src/components/chat_window_header/chat_window_header.xml b/addons/mail/static/src/components/chat_window_header/chat_window_header.xml
index 44e6ec2d00b..1ba25cf261e 100644
--- a/addons/mail/static/src/components/chat_window_header/chat_window_header.xml
+++ b/addons/mail/static/src/components/chat_window_header/chat_window_header.xml
@@ -5,7 +5,7 @@
         <t t-if="chatWindowHeaderView and chatWindow">
             <div class="o_ChatWindowHeader d-flex align-items-center text-white" t-att-class="{ 'o-isDeviceSmall': messaging.device.isSmall, 'o_cursor_pointer': !messaging.device.isSmall }" t-attf-class="{{ className }}" t-on-click="chatWindowHeaderView.onClick" t-ref="root">
                 <t t-if="chatWindow.hasCloseAsBackButton">
-                    <div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandBack o_ChatWindowHeader_commandClose o_cursor_pointer d-flex align-items-center h-100 px-3 py-0 mr-2" t-att-class="{ 'o-isDeviceSmall': messaging.device.isSmall }" t-on-click="chatWindow.onClickClose" title="Close conversation">
+                    <div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandBack o_ChatWindowHeader_commandClose o_cursor_pointer d-flex align-items-center h-100 px-3 py-0 me-2" t-att-class="{ 'o-isDeviceSmall': messaging.device.isSmall }" t-on-click="chatWindow.onClickClose" title="Close conversation">
                         <i class="fa fa-arrow-left"/>
                     </div>
                 </t>
diff --git a/addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.xml b/addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.xml
index fef963a5d55..53dd5c024b6 100644
--- a/addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.xml
+++ b/addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.xml
@@ -2,20 +2,20 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.ChatWindowHiddenMenu" owl="1">
-        <div class="o_ChatWindowHiddenMenu dropup position-fixed bottom-0 align-items-stretch d-flex px-2 py-1 rounded-lg-top bg-900 o_cursor_pointer" t-attf-class="{{ className }}" t-ref="root">
+        <div class="o_ChatWindowHiddenMenu dropup position-fixed bottom-0 align-items-stretch d-flex px-2 py-1 rounded-top-3 bg-900 o_cursor_pointer" t-attf-class="{{ className }}" t-ref="root">
             <div class="o_ChatWindowHiddenMenu_dropdownToggle dropdown-toggle justify-content-center align-items-center flex-grow-1 d-flex mw-100" t-att-class="{ 'show opacity-50': messaging.chatWindowManager.isHiddenMenuOpen }" t-on-click="messaging.chatWindowManager.onClickHiddenMenuToggler">
                 <div class="o_ChatWindowHiddenMenu_dropdownToggleIcon o_ChatWindowHiddenMenu_dropdownToggleItem me-1 fa fa-comments-o"/>
                 <div class="o_ChatWindowHiddenMenu_dropdownToggleItem o_ChatWindowHiddenMenu_windowCounter mx-1 text-truncate">
                     <t t-esc="messaging.chatWindowManager.allOrderedHidden.length"/>
                 </div>
             </div>
-            <ul class="o_ChatWindowHiddenMenu_list dropdown-menu dropdown-menu-right m-0 p-0 overflow-auto" t-att-class="{ show: messaging.chatWindowManager.isHiddenMenuOpen }" role="menu" t-ref="list">
+            <ul class="o_ChatWindowHiddenMenu_list dropdown-menu dropdown-menu-end m-0 p-0 overflow-auto" t-att-class="{ show: messaging.chatWindowManager.isHiddenMenuOpen }" role="menu" t-ref="list">
                 <t t-foreach="messaging.chatWindowManager.hiddenChatWindowHeaderViews" t-as="chatWindowHeaderView" t-key="chatWindowHeaderView.localId">
                     <ChatWindowHiddenMenuItem chatWindowHeaderView="chatWindowHeaderView" isLast="chatWindowHeaderView_last"/>
                 </t>
             </ul>
             <t t-if="messaging.chatWindowManager.unreadHiddenConversationAmount > 0">
-                <div class="o_ChatWindowHiddenMenu_unreadCounter position-absolute end-0 top-0 badge badge-pill badge-primary">
+                <div class="o_ChatWindowHiddenMenu_unreadCounter position-absolute end-0 top-0 badge rounded-pill text-bg-primary">
                     <t t-esc="messaging.chatWindowManager.unreadHiddenConversationAmount"/>
                 </div>
             </t>
diff --git a/addons/mail/static/src/components/chatter/chatter.xml b/addons/mail/static/src/components/chatter/chatter.xml
index 4f87bc78b66..bf8a1a8b851 100644
--- a/addons/mail/static/src/components/chatter/chatter.xml
+++ b/addons/mail/static/src/components/chatter/chatter.xml
@@ -18,7 +18,7 @@
                     <t t-if="chatter.composerView">
                         <Composer
                             className="'o_Chatter_composer border-bottom'"
-                            classNameObj="{ 'o-bordered border-left border-right': chatter.hasExternalBorder }"
+                            classNameObj="{ 'o-bordered border-start border-end': chatter.hasExternalBorder }"
                             record="chatter.composerView"
                         />
                     </t>
diff --git a/addons/mail/static/src/components/chatter_topbar/chatter_topbar.xml b/addons/mail/static/src/components/chatter_topbar/chatter_topbar.xml
index 3c299c8f336..1edbfc2e341 100644
--- a/addons/mail/static/src/components/chatter_topbar/chatter_topbar.xml
+++ b/addons/mail/static/src/components/chatter_topbar/chatter_topbar.xml
@@ -9,9 +9,9 @@
                         <button class="o_ChatterTopbar_button o_ChatterTopbar_buttonSendMessage btn btn-link"
                             type="button"
                             t-att-class="{
-                                'o-active border-right': chatterTopbar.chatter.composerView and !chatterTopbar.chatter.composerView.composer.isLog,
+                                'o-active border-end': chatterTopbar.chatter.composerView and !chatterTopbar.chatter.composerView.composer.isLog,
                                 'o-bordered': chatterTopbar.chatter.hasExternalBorder,
-                                'border-top border-left': chatterTopbar.chatter.composerView and !chatterTopbar.chatter.composerView.composer.isLog and chatterTopbar.chatter.hasExternalBorder,
+                                'border-top border-start': chatterTopbar.chatter.composerView and !chatterTopbar.chatter.composerView.composer.isLog and chatterTopbar.chatter.hasExternalBorder,
                             }"
                             t-att-disabled="chatterTopbar.chatter.isDisabled"
                             title="Send a message"
@@ -23,7 +23,7 @@
                         <button class="o_ChatterTopbar_button o_ChatterTopbar_buttonLogNote btn btn-link"
                             type="button"
                             t-att-class="{
-                                'o-active border-right border-left': chatterTopbar.chatter.composerView and chatterTopbar.chatter.composerView.composer.isLog,
+                                'o-active border-end border-start': chatterTopbar.chatter.composerView and chatterTopbar.chatter.composerView.composer.isLog,
                                 'o-bordered': chatterTopbar.chatter.hasExternalBorder,
                                 'border-top': chatterTopbar.chatter.composerView and chatterTopbar.chatter.composerView.composer.isLog and chatterTopbar.chatter.hasExternalBorder,
                             }"
@@ -46,7 +46,7 @@
                             <button class="o_ChatterTopbar_button o_ChatterTopbar_buttonAttachments btn btn-link" type="button" t-att-disabled="chatterTopbar.chatter.isDisabled" t-att-aria-expanded="chatterTopbar.chatter.attachmentBoxView ? 'true' : 'false'" t-on-click="chatterTopbar.chatter.onClickButtonAttachments" title="Show Attachments">
                                 <i class="fa fa-paperclip" role="img" aria-label="Attachments"/>
                                 <t t-if="!chatterTopbar.chatter.isShowingAttachmentsLoading">
-                                    <span class="o_ChatterTopbar_buttonCount o_ChatterTopbar_buttonAttachmentsCount pl-1" t-esc="chatterTopbar.attachmentButtonText"/>
+                                    <span class="o_ChatterTopbar_buttonCount o_ChatterTopbar_buttonAttachmentsCount ps-1" t-esc="chatterTopbar.attachmentButtonText"/>
                                 </t>
                                 <t t-if="chatterTopbar.chatter.isShowingAttachmentsLoading">
                                     <i class="o_ChatterTopbar_buttonAttachmentsCountLoader fa fa-circle-o-notch fa-spin ms-1" aria-label="Attachment counter loading..."/>
@@ -67,7 +67,7 @@
                         </div>
                 </div>
                 <t t-if="chatterTopbar.chatter.hasTopbarCloseButton">
-                    <button class="o_ChatterTopbar_buttonClose btn btn-dark flex-shrink-0 rounded-lg-bottom" title="Close" t-on-click="chatterTopbar.chatter.onClickChatterTopbarClose">
+                    <button class="o_ChatterTopbar_buttonClose btn btn-dark flex-shrink-0 rounded-bottom-3" title="Close" t-on-click="chatterTopbar.chatter.onClickChatterTopbarClose">
                         <i class="oi oi-large oi-close"/>
                     </button>
                 </t>
diff --git a/addons/mail/static/src/components/composer/composer.xml b/addons/mail/static/src/components/composer/composer.xml
index 7f3ff5c612b..dedd36bd49c 100644
--- a/addons/mail/static/src/components/composer/composer.xml
+++ b/addons/mail/static/src/components/composer/composer.xml
@@ -6,7 +6,7 @@
             <div class="o_Composer"
                 t-att-class="{
                     'o-focused': composerView.isFocused,
-                    'o-has-current-partner-avatar pr-3 pl-1': composerView.hasCurrentPartnerAvatar,
+                    'o-has-current-partner-avatar pe-3 ps-1': composerView.hasCurrentPartnerAvatar,
                     'o-has-footer': composerView.hasFooter,
                     'o-has-header': composerView.hasHeader,
                     'o-is-in-thread-view bg-white': composerView.threadView,
@@ -33,7 +33,7 @@
                             <span class="o_cursor_pointer" t-on-click="composerView.onClickReplyingToMessage">
                                 Replying to <b t-esc="composerView.threadView.replyingToMessageView.message.authorName"/>
                             </span>
-                            <i t-if="composerView.threadView.thread !== messaging.inbox" class="o_Composer_cancelReply fa fa-lg fa-times-circle rounded-circle p-0 ml-1 o_cursor_pointer" title="Stop replying" t-on-click="composerView.onClickStopReplying"/>
+                            <i t-if="composerView.threadView.thread !== messaging.inbox" class="o_Composer_cancelReply fa fa-lg fa-times-circle rounded-circle p-0 ms-1 o_cursor_pointer" title="Stop replying" t-on-click="composerView.onClickStopReplying"/>
                         </t>
                         <t t-if="composerView.hasThreadName">
                             <span class="o_Composer_threadName">
@@ -72,22 +72,22 @@
                     class="o_Composer_coreMain d-flex flex-nowrap align-items-start flex-grow-1"
                     t-att-class="{
                         'o-composer-is-compact': composerView.isCompact,
-                        'flex-column border rounded-lg bg-white': !composerView.isCompact,
+                        'flex-column border rounded-3 bg-white': !composerView.isCompact,
                     }"
                 >
                     <ComposerTextInput
                         className="'o_Composer_textInput flex-grow-1 align-self-stretch'"
                         classNameObj="{
                             'o-composer-is-compact': composerView.isCompact,
-                            'rounded-lg': !composerView.isCompact,
+                            'rounded-3': !composerView.isCompact,
                             'o_Composer_textInput-mobile': messaging.device.isSmall,
                             'o-has-current-partner-avatar': composerView.hasCurrentPartnerAvatar,
-                            'rounded-lg-left': composerView.isCompact and composerView.hasCurrentPartnerAvatar,
+                            'rounded-start-3': composerView.isCompact and composerView.hasCurrentPartnerAvatar,
                         }"
                         record="composerView"
                         t-key="composerView.localId"
                     />
-                    <div class="o_Composer_buttons d-flex align-items-stretch align-self-stretch flex-shrink-0" t-att-class="{ 'o-composer-is-compact': composerView.isCompact, 'h-auto w-100 px-3': !composerView.isCompact, 'o-isDeviceSmall': messaging.device.isSmall, 'o-messaging-in-editing border-right': composerView and composerView.messageViewInEditing }">
+                    <div class="o_Composer_buttons d-flex align-items-stretch align-self-stretch flex-shrink-0" t-att-class="{ 'o-composer-is-compact': composerView.isCompact, 'h-auto w-100 px-3': !composerView.isCompact, 'o-isDeviceSmall': messaging.device.isSmall, 'o-messaging-in-editing border-end': composerView and composerView.messageViewInEditing }">
                         <div class="o_Composer_toolButtons d-flex py-1 border-top bg-white"
                             t-att-class="{
                                 'o-composer-has-current-partner-avatar': composerView.hasCurrentPartnerAvatar,
@@ -95,7 +95,7 @@
                                 'flex-row flex-grow-1 justify-content-between': !composerView.isCompact,
                             }">
                             <t t-if="composerView.isCompact">
-                                <div class="o_Composer_toolButtonSeparator flex-shrink-0 my-2 border-left"/>
+                                <div class="o_Composer_toolButtonSeparator flex-shrink-0 my-2 border-start"/>
                             </t>
                             <div class="o_Composer_primaryToolButtons d-flex align-items-center" t-att-class="{ 'o-composer-is-compact px-2': composerView.isCompact }">
                                 <button class="o_Composer_button o_Composer_buttonEmojis o_Composer_toolButton btn btn-light mx-1 border-0 rounded-pill bg-white"
@@ -152,9 +152,9 @@
                 <button class="o_Composer_actionButton o_Composer_button o_Composer_buttonSend btn btn-primary"
                     t-att-class="{
                         'o-last': !composerView.hasDiscardButton,
-                        'o-composer-is-compact border-left-0': composerView.isCompact,
+                        'o-composer-is-compact border-start-0': composerView.isCompact,
                         'o-has-current-partner-avatar': composerView.hasCurrentPartnerAvatar,
-                        'rounded-0 rounded-lg-right': !composerView.hasDiscardButton and composerView.hasCurrentPartnerAvatar and composerView.isCompact,
+                        'rounded-0 rounded-end-3': !composerView.hasDiscardButton and composerView.hasCurrentPartnerAvatar and composerView.isCompact,
                     }"
                     t-att-disabled="!composerView.composer.canPostMessage ? 'disabled' : ''"
                     type="button"
@@ -165,7 +165,7 @@
                 </button>
             </t>
             <t t-if="composerView.hasDiscardButton">
-                <button class="o_Composer_actionButton o-last o_Composer_button o_Composer_buttonDiscard btn btn-secondary" t-att-class="{ 'o-composer-is-compact border-left-0': composerView.isCompact, 'o-has-current-partner-avatar': composerView.hasCurrentPartnerAvatar, 'rounded-0 rounded-lg-right': composerView.hasCurrentPartnerAvatar and composerView.isCompact }" type="button" t-on-click="composerView.onClickDiscard">
+                <button class="o_Composer_actionButton o-last o_Composer_button o_Composer_buttonDiscard btn btn-secondary" t-att-class="{ 'o-composer-is-compact border-start-0': composerView.isCompact, 'o-has-current-partner-avatar': composerView.hasCurrentPartnerAvatar, 'rounded-0 rounded-end-3': composerView.hasCurrentPartnerAvatar and composerView.isCompact }" type="button" t-on-click="composerView.onClickDiscard">
                     Discard
                 </button>
             </t>
diff --git a/addons/mail/static/src/components/composer_suggested_recipient/composer_suggested_recipient.xml b/addons/mail/static/src/components/composer_suggested_recipient/composer_suggested_recipient.xml
index 05a90bc950f..4d7d1805f2c 100644
--- a/addons/mail/static/src/components/composer_suggested_recipient/composer_suggested_recipient.xml
+++ b/addons/mail/static/src/components/composer_suggested_recipient/composer_suggested_recipient.xml
@@ -3,9 +3,9 @@
     <t t-name="mail.ComposerSuggestedRecipient" owl="1">
         <t t-if="composerSuggestedRecipientView">
             <div class="o_ComposerSuggestedRecipient" t-attf-class="{{ className }}" t-att-data-partner-id="composerSuggestedRecipientView.suggestedRecipientInfo.partner and composerSuggestedRecipientView.suggestedRecipientInfo.partner.id ? composerSuggestedRecipientView.suggestedRecipientInfo.partner.id : false" t-att-title="composerSuggestedRecipientView.suggestedRecipientInfo.titleText" t-ref="root">
-                <div class="custom-control custom-checkbox">
-                    <input t-attf-id="{{ id }}_checkbox" class="custom-control-input" type="checkbox" t-att-checked="composerSuggestedRecipientView.suggestedRecipientInfo.isSelected ? 'checked' : undefined" t-on-change="_onChangeCheckbox" t-ref="checkbox" />
-                    <label class="custom-control-label" t-attf-for="{{ id }}_checkbox">
+                <div class="custom-control form-check">
+                    <input t-attf-id="{{ id }}_checkbox" class="form-check-input" type="checkbox" t-att-checked="composerSuggestedRecipientView.suggestedRecipientInfo.isSelected ? 'checked' : undefined" t-on-change="_onChangeCheckbox" t-ref="checkbox" />
+                    <label class="form-check-label" t-attf-for="{{ id }}_checkbox">
                         <t t-if="composerSuggestedRecipientView.suggestedRecipientInfo.name">
                             <t t-esc="composerSuggestedRecipientView.suggestedRecipientInfo.name"/>
                         </t>
diff --git a/addons/mail/static/src/components/composer_suggestion/composer_suggestion.xml b/addons/mail/static/src/components/composer_suggestion/composer_suggestion.xml
index 8ae506869c4..f677a247f08 100644
--- a/addons/mail/static/src/components/composer_suggestion/composer_suggestion.xml
+++ b/addons/mail/static/src/components/composer_suggestion/composer_suggestion.xml
@@ -5,24 +5,24 @@
         <t t-if="composerSuggestion">
             <a class="o_ComposerSuggestion dropdown-item d-flex w-100 py-2 px-4" t-att-class="{ 'active bg-300': composerSuggestion.isActive }" t-attf-class="{{ className }}" href="#" t-att-title="composerSuggestion.title" role="menuitem" t-on-click="composerSuggestion.onClick" t-ref="root">
                 <t t-if="composerSuggestion.suggestable.cannedResponse">
-                    <strong class="o_ComposerSuggestion_part1 flex-shrink-0 mw-100 pr-2 text-truncate"><t t-esc="composerSuggestion.suggestable.cannedResponse.source"/></strong>
+                    <strong class="o_ComposerSuggestion_part1 flex-shrink-0 mw-100 pe-2 text-truncate"><t t-esc="composerSuggestion.suggestable.cannedResponse.source"/></strong>
                     <em class="o_ComposerSuggestion_part2 text-600 text-truncate"><t t-esc="composerSuggestion.suggestable.cannedResponse.substitution"/></em>
                 </t>
                 <t t-if="composerSuggestion.suggestable.thread">
-                    <strong class="o_ComposerSuggestion_part1 flex-shrink-0 mw-100 pr-2 text-truncate"><t t-esc="composerSuggestion.suggestable.thread.name"/></strong>
+                    <strong class="o_ComposerSuggestion_part1 flex-shrink-0 mw-100 pe-2 text-truncate"><t t-esc="composerSuggestion.suggestable.thread.name"/></strong>
                 </t>
                 <t t-if="composerSuggestion.suggestable.channelCommand">
-                    <strong class="o_ComposerSuggestion_part1 flex-shrink-0 mw-100 pr-2 text-truncate"><t t-esc="composerSuggestion.suggestable.channelCommand.name"/></strong>
+                    <strong class="o_ComposerSuggestion_part1 flex-shrink-0 mw-100 pe-2 text-truncate"><t t-esc="composerSuggestion.suggestable.channelCommand.name"/></strong>
                     <em class="o_ComposerSuggestion_part2 text-600 text-truncate"><t t-esc="composerSuggestion.suggestable.channelCommand.help"/></em>
                 </t>
                 <t t-if="composerSuggestion.suggestable.partner">
                     <PersonaImStatusIcon
                         t-if="composerSuggestion.personaImStatusIconView"
-                        className="'o_ComposerSuggestion_personaImStatusIcon flex-shrink-0 mr-1'"
+                        className="'o_ComposerSuggestion_personaImStatusIcon flex-shrink-0 me-1'"
                         hasBackground="false"
                         record="composerSuggestion.personaImStatusIconView"
                     />
-                    <strong class="o_ComposerSuggestion_part1 flex-shrink-0 mw-100 pr-2 text-truncate"><t t-esc="composerSuggestion.suggestable.partner.nameOrDisplayName"/></strong>
+                    <strong class="o_ComposerSuggestion_part1 flex-shrink-0 mw-100 pe-2 text-truncate"><t t-esc="composerSuggestion.suggestable.partner.nameOrDisplayName"/></strong>
                     <t t-if="composerSuggestion.suggestable.partner.email">
                         <em class="o_ComposerSuggestion_part2 text-600 text-truncate">(<t t-esc="composerSuggestion.suggestable.partner.email"/>)</em>
                     </t>
diff --git a/addons/mail/static/src/components/composer_text_input/composer_text_input.xml b/addons/mail/static/src/components/composer_text_input/composer_text_input.xml
index ac594431ef1..db9669f2a5a 100644
--- a/addons/mail/static/src/components/composer_text_input/composer_text_input.xml
+++ b/addons/mail/static/src/components/composer_text_input/composer_text_input.xml
@@ -3,17 +3,17 @@
 
     <t t-name="mail.ComposerTextInput" owl="1">
         <t t-if="composerView">
-            <div class="o_ComposerTextInput position-relative bg-white" t-attf-class="{{ className }} {{ composerView.isCompact ? 'border border-right-0' : 'border-0' }}" t-on-paste="composerView.onPasteTextInput" t-ref="root">
+            <div class="o_ComposerTextInput position-relative bg-white" t-attf-class="{{ className }} {{ composerView.isCompact ? 'border border-end-0' : 'border-0' }}" t-on-paste="composerView.onPasteTextInput" t-ref="root">
                 <t t-if="composerView.composerSuggestionListView">
                     <ComposerSuggestionList record="composerView.composerSuggestionListView"/>
                 </t>
-                <textarea class="o_ComposerTextInput_textarea o_ComposerTextInput_textareaStyle form-control px-3 border-0 shadow-none overflow-auto" t-att-class="{ 'o-composer-is-compact rounded-0 rounded-lg-left': composerView.isCompact, 'rounded-lg': !composerView.isCompact }" t-esc="composerView.composer.textInputContent" t-att-placeholder="composerView.composer.placeholder" t-on-click="composerView.onClickTextarea" t-on-focusin="composerView.onFocusinTextarea" t-on-focusout="composerView.onFocusoutTextarea" t-on-keydown="composerView.onKeydownTextarea" t-on-keyup="composerView.onKeyupTextarea" t-on-input="composerView.onInputTextarea" t-ref="textarea"/>
+                <textarea class="o_ComposerTextInput_textarea o_ComposerTextInput_textareaStyle form-control px-3 border-0 shadow-none overflow-auto" t-att-class="{ 'o-composer-is-compact rounded-0 rounded-start-3': composerView.isCompact, 'rounded-3': !composerView.isCompact }" t-esc="composerView.composer.textInputContent" t-att-placeholder="composerView.composer.placeholder" t-on-click="composerView.onClickTextarea" t-on-focusin="composerView.onFocusinTextarea" t-on-focusout="composerView.onFocusoutTextarea" t-on-keydown="composerView.onKeydownTextarea" t-on-keyup="composerView.onKeyupTextarea" t-on-input="composerView.onInputTextarea" t-ref="textarea"/>
                 <!--
                      This is an invisible textarea used to compute the composer
                      height based on the text content. We need it to downsize
                      the textarea properly without flicker.
                 -->
-                <textarea class="o_ComposerTextInput_mirroredTextarea o_ComposerTextInput_textareaStyle position-absolute px-3 border-0 overflow-hidden opacity-0" t-att-class="{ 'o-composer-is-compact rounded-0 rounded-lg-left': composerView.isCompact, 'rounded-lg': !composerView.isCompact }" t-esc="composerView.composer.textInputContent" t-ref="mirroredTextarea" disabled="1"/>
+                <textarea class="o_ComposerTextInput_mirroredTextarea o_ComposerTextInput_textareaStyle position-absolute px-3 border-0 overflow-hidden opacity-0" t-att-class="{ 'o-composer-is-compact rounded-0 rounded-start-3': composerView.isCompact, 'rounded-3': !composerView.isCompact }" t-esc="composerView.composer.textInputContent" t-ref="mirroredTextarea" disabled="1"/>
             </div>
         </t>
     </t>
diff --git a/addons/mail/static/src/components/discuss/discuss.xml b/addons/mail/static/src/components/discuss/discuss.xml
index fe2aeb9f4ec..31736330085 100644
--- a/addons/mail/static/src/components/discuss/discuss.xml
+++ b/addons/mail/static/src/components/discuss/discuss.xml
@@ -8,7 +8,7 @@
                 t-ref="root"
             >
                 <t t-if="!messaging.device.isSmall">
-                    <DiscussSidebar className="'o_Discuss_sidebar flex-shrink-0 h-100 pt-3 border-right bg-light'" record="discussView"/>
+                    <DiscussSidebar className="'o_Discuss_sidebar flex-shrink-0 h-100 pt-3 border-end bg-light'" record="discussView"/>
                 </t>
                 <t t-if="messaging.device.isSmall" t-call="mail.Discuss.content"/>
                 <t t-else="">
diff --git a/addons/mail/static/src/components/discuss_sidebar/discuss_sidebar.xml b/addons/mail/static/src/components/discuss_sidebar/discuss_sidebar.xml
index e0e787c0b1b..cfdbff544b1 100644
--- a/addons/mail/static/src/components/discuss_sidebar/discuss_sidebar.xml
+++ b/addons/mail/static/src/components/discuss_sidebar/discuss_sidebar.xml
@@ -17,7 +17,7 @@
                 </div>
                 <hr class="o_DiscussSidebar_separator w-100 border-top"/>
                 <t t-if="messaging.models['Thread'].all(thread => thread.isPinned and thread.model === 'mail.channel').length > 19">
-                    <input class="o_DiscussSidebar_quickSearch form-control mx-4 mb-2 rounded-lg w-auto" t-on-input="discussView.onInputQuickSearch" placeholder="Quick search..." t-ref="quickSearchInput" t-esc="discussView.discuss.sidebarQuickSearchValue"/>
+                    <input class="o_DiscussSidebar_quickSearch form-control mx-4 mb-2 rounded-3 w-auto" t-on-input="discussView.onInputQuickSearch" placeholder="Quick search..." t-ref="quickSearchInput" t-esc="discussView.discuss.sidebarQuickSearchValue"/>
                 </t>
                 <DiscussSidebarCategory
                     t-if="discussView.discuss.categoryChannel"
diff --git a/addons/mail/static/src/components/discuss_sidebar_category/discuss_sidebar_category.xml b/addons/mail/static/src/components/discuss_sidebar_category/discuss_sidebar_category.xml
index 295e9231b3b..668e13717aa 100644
--- a/addons/mail/static/src/components/discuss_sidebar_category/discuss_sidebar_category.xml
+++ b/addons/mail/static/src/components/discuss_sidebar_category/discuss_sidebar_category.xml
@@ -3,24 +3,24 @@
 <templates xml:space="preserve">
     <t t-name="mail.DiscussSidebarCategory" owl="1">
         <t t-if="category">
-            <t t-set="o_DiscussSidebarCategory_hoverItem" t-value="'btn p-0 text-left text-700 opacity-100-hover opacity-75'"/>
+            <t t-set="o_DiscussSidebarCategory_hoverItem" t-value="'btn p-0 text-start text-700 opacity-100-hover opacity-75'"/>
             <div class="o_DiscussSidebarCategory" t-attf-class="{{ className }}" t-att-data-category-local-id="category.localId" t-ref="root">
                 <div class="o_DiscussSidebarCategory_header d-flex align-items-center my-1">
                     <div t-attf-class="o_DiscussSidebarCategory_title o_DiscussSidebarCategory_headerItem d-flex align-items-baseline mx-1 {{ o_DiscussSidebarCategory_hoverItem }}" t-on-click="category.onClick">
                         <i class="o_DiscussSidebarCategory_titleIcon small" t-att-class="category.isOpen ? 'fa fa-chevron-down' : 'fa fa-chevron-right'"/>
-                        <span class="o_DiscussSidebarCategory_titleText btn-sm p-0 text-uppercase font-weight-bolder"><t t-esc="category.name"/></span>
+                        <span class="o_DiscussSidebarCategory_titleText btn-sm p-0 text-uppercase fw-bolder"><t t-esc="category.name"/></span>
                     </div>
                     <div class="o_DiscussSidebarCategory_headerItem flex-grow-1"/>
-                    <div class="o_DiscussSidebarCategory_commands o_DiscussSidebarCategory_headerItem d-flex mr-3">
+                    <div class="o_DiscussSidebarCategory_commands o_DiscussSidebarCategory_headerItem d-flex me-3">
                         <t t-if="category.hasViewCommand">
                             <i t-attf-class="o_DiscussSidebarCategory_command o_DiscussSidebarCategory_commandView fa fa-cog {{ o_DiscussSidebarCategory_hoverItem }}" title="View or join channels" t-on-click="category.onClickCommandView" role="img"/>
                         </t>
                         <t t-if="category.hasAddCommand and category.isOpen">
-                            <i t-attf-class="o_DiscussSidebarCategory_command o_DiscussSidebarCategory_commandAdd fa fa-plus {{ o_DiscussSidebarCategory_hoverItem }} ml-1" t-on-click="category.onClickCommandAdd" t-att-title="category.commandAddTitleText" role="img"/>
+                            <i t-attf-class="o_DiscussSidebarCategory_command o_DiscussSidebarCategory_commandAdd fa fa-plus {{ o_DiscussSidebarCategory_hoverItem }} ms-1" t-on-click="category.onClickCommandAdd" t-att-title="category.commandAddTitleText" role="img"/>
                         </t>
                     </div>
                     <t t-if="!category.isOpen and category.counter > 0">
-                        <div class="o_DiscussSidebarCategory_counter o_DiscussSidebarCategory_headerItem badge badge-pill badge-primary me-3">
+                        <div class="o_DiscussSidebarCategory_counter o_DiscussSidebarCategory_headerItem badge rounded-pill text-bg-primary me-3">
                             <t t-esc="category.counter"/>
                         </div>
                     </t>
diff --git a/addons/mail/static/src/components/discuss_sidebar_category_item/discuss_sidebar_category_item.xml b/addons/mail/static/src/components/discuss_sidebar_category_item/discuss_sidebar_category_item.xml
index 8f955494d3d..a7119429354 100644
--- a/addons/mail/static/src/components/discuss_sidebar_category_item/discuss_sidebar_category_item.xml
+++ b/addons/mail/static/src/components/discuss_sidebar_category_item/discuss_sidebar_category_item.xml
@@ -2,8 +2,8 @@
 <templates xml:space="preserve">
     <t t-name="mail.DiscussSidebarCategoryItem" owl="1">
         <t t-if="categoryItem">
-            <t t-set="o_DiscussSidebarCategoryItem_hoverItem" t-value="'btn p-0 text-left text-700 opacity-100-hover opacity-75'"/>
-            <button class="o_DiscussSidebarCategoryItem btn d-flex align-items-center w-100 px-0 py-2 border-0 rounded-0 font-weight-normal text-reset"
+            <t t-set="o_DiscussSidebarCategoryItem_hoverItem" t-value="'btn p-0 text-start text-700 opacity-100-hover opacity-75'"/>
+            <button class="o_DiscussSidebarCategoryItem btn d-flex align-items-center w-100 px-0 py-2 border-0 rounded-0 fw-normal text-reset"
                 t-att-class="{
                     'bg-100': !categoryItem.isActive,
                     'o-active bg-200': categoryItem.isActive,
@@ -19,7 +19,7 @@
                         </t>
                     </div>
                 </div>
-                <span class="o_DiscussSidebarCategoryItem_item o_DiscussSidebarCategoryItem_name ms-3 me-2 text-truncate" t-att-class="{ 'o-item-unread font-weight-bolder': categoryItem.isUnread }">
+                <span class="o_DiscussSidebarCategoryItem_item o_DiscussSidebarCategoryItem_name ms-3 me-2 text-truncate" t-att-class="{ 'o-item-unread fw-bolder': categoryItem.isUnread }">
                     <t t-esc="categoryItem.channel.displayName"/>
                 </span>
                 <div class="o_DiscussSidebarCategoryItem_item flex-grow-1"/>
@@ -38,7 +38,7 @@
                     <div class="o_DiscussSidebarCategoryItem_item o_DiscussSidebarCategoryItem_callIndicator fa fa-volume-up ms-1 me-3" t-att-class="{ 'o-isCalling text-danger': categoryItem.channel.rtc }"/>
                 </t>
                 <t t-if="categoryItem.counter > 0">
-                    <div class="o_DiscussSidebarCategoryItem_counter o_DiscussSidebarCategoryItem_item badge badge-pill badge-primary ms-1 me-3">
+                    <div class="o_DiscussSidebarCategoryItem_counter o_DiscussSidebarCategoryItem_item badge rounded-pill text-bg-primary ms-1 me-3">
                         <t t-esc="categoryItem.counter"/>
                     </div>
                 </t>
diff --git a/addons/mail/static/src/components/discuss_sidebar_mailbox/discuss_sidebar_mailbox.xml b/addons/mail/static/src/components/discuss_sidebar_mailbox/discuss_sidebar_mailbox.xml
index 69867a25087..d6e1c81f852 100644
--- a/addons/mail/static/src/components/discuss_sidebar_mailbox/discuss_sidebar_mailbox.xml
+++ b/addons/mail/static/src/components/discuss_sidebar_mailbox/discuss_sidebar_mailbox.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
     <t t-name="mail.DiscussSidebarMailbox" owl="1">
-        <button class="o_DiscussSidebarMailbox btn d-flex align-items-center py-1 px-0 border-0 rounded-0 font-weight-normal text-dark"
+        <button class="o_DiscussSidebarMailbox btn d-flex align-items-center py-1 px-0 border-0 rounded-0 fw-normal text-dark"
             t-att-class="{
                 'bg-100': discussSidebarMailboxView.mailbox !== messaging.discuss.thread,
                 'o-active bg-200': discussSidebarMailboxView.mailbox === messaging.discuss.thread,
@@ -15,7 +15,7 @@
             </div>
             <div t-attf-class="o_DiscussSidebarMailbox_item flex-grow-1 {{ discussSidebarMailboxView.mailbox.counter === 0 ? 'me-3': '' }}"/>
             <t t-if="discussSidebarMailboxView.mailbox.counter > 0">
-                <div t-attf-class="o_DiscussSidebarMailbox_counter o_DiscussSidebarMailbox_item badge badge-pill {{ discussSidebarMailboxView.mailbox === messaging.starred ? 'bg-400 text-light' : 'badge-primary' }} ms-1 me-3 border-0">
+                <div t-attf-class="o_DiscussSidebarMailbox_counter o_DiscussSidebarMailbox_item badge rounded-pill {{ discussSidebarMailboxView.mailbox === messaging.starred ? 'bg-400 text-light' : 'text-bg-primary' }} ms-1 me-3 border-0">
                     <t t-esc="discussSidebarMailboxView.mailbox.counter"/>
                 </div>
             </t>
diff --git a/addons/mail/static/src/components/emoji_grid_view/emoji_grid_view.xml b/addons/mail/static/src/components/emoji_grid_view/emoji_grid_view.xml
index 823ebe8634e..7aeca90b5bf 100644
--- a/addons/mail/static/src/components/emoji_grid_view/emoji_grid_view.xml
+++ b/addons/mail/static/src/components/emoji_grid_view/emoji_grid_view.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.EmojiGridView" owl="1">
-        <div class="o_EmojiGridView overflow-auto py-2 pl-3 pr-4" t-attf-class="{{ className }}" t-ref="root">
+        <div class="o_EmojiGridView overflow-auto py-2 ps-3 pe-4" t-attf-class="{{ className }}" t-ref="root">
             <t t-foreach="emojiGridView.emojiViews" t-as="emojiView" t-key="emojiView.localId">
                 <Emoji className="'o_EmojiGid_emoji'" record="emojiView"/>
             </t>
diff --git a/addons/mail/static/src/components/follower/follower.xml b/addons/mail/static/src/components/follower/follower.xml
index 683a41c0ca6..f27b8cd82e8 100644
--- a/addons/mail/static/src/components/follower/follower.xml
+++ b/addons/mail/static/src/components/follower/follower.xml
@@ -4,7 +4,7 @@
     <t t-name="mail.Follower" owl="1">
         <t t-if="followerView">
             <div class="o_Follower d-flex justify-content-between p-0" t-attf-class="{{ className }}" t-ref="root">
-                <a class="o_Follower_details d-flex align-items-center flex-grow-1 px-3 text-700" t-att-class="{ 'o-inactive font-italic opacity-25': !followerView.follower.isActive }" href="#" role="menuitem" t-on-click="followerView.onClickDetails">
+                <a class="o_Follower_details d-flex align-items-center flex-grow-1 px-3 text-700" t-att-class="{ 'o-inactive fst-italic opacity-25': !followerView.follower.isActive }" href="#" role="menuitem" t-on-click="followerView.onClickDetails">
                     <img class="o_Follower_avatar me-2 rounded-circle" t-att-src="followerView.follower.partner.avatarUrl" alt=""/>
                     <span class="o_Follower_name flex-shrink text-truncate" t-esc="followerView.follower.partner.nameOrDisplayName"/>
                 </a>
diff --git a/addons/mail/static/src/components/follower_list_menu/follower_list_menu.xml b/addons/mail/static/src/components/follower_list_menu/follower_list_menu.xml
index 0f77809ead5..dc2a8497043 100644
--- a/addons/mail/static/src/components/follower_list_menu/follower_list_menu.xml
+++ b/addons/mail/static/src/components/follower_list_menu/follower_list_menu.xml
@@ -7,11 +7,11 @@
                 <div class="o_FollowerListMenu_followers d-flex" t-ref="dropdown">
                     <button class="o_FollowerListMenu_buttonFollowers o_ChatterTopbar_button btn btn-link" t-att-disabled="followerListMenuView.isDisabled" t-att-aria-expanded="followerListMenuView.isDropdownOpen ? 'true' : 'false'" t-on-click="followerListMenuView.onClickFollowersButton" title="Show Followers">
                         <i class="fa fa-user" role="img" aria-label="Followers"/>
-                        <span class="o_FollowerListMenu_buttonFollowersCount pl-1" t-esc="followerListMenuView.followerViews.length"/>
+                        <span class="o_FollowerListMenu_buttonFollowersCount ps-1" t-esc="followerListMenuView.followerViews.length"/>
                     </button>
 
                     <t t-if="followerListMenuView.isDropdownOpen">
-                        <div class="o_FollowerListMenu_dropdown dropdown-menu dropdown-menu-right flex-column d-flex" role="menu">
+                        <div class="o_FollowerListMenu_dropdown dropdown-menu dropdown-menu-end flex-column d-flex" role="menu">
                             <t t-if="followerListMenuView.chatterOwner.thread.model !== 'channel' and followerListMenuView.chatterOwner.thread.hasWriteAccess">
                                 <a class="o_FollowerListMenu_addFollowersButton dropdown-item" href="#" role="menuitem" t-on-click="_onClickAddFollowers">
                                     Add Followers
diff --git a/addons/mail/static/src/components/message/message.scss b/addons/mail/static/src/components/message/message.scss
index 7c729c9a504..77fa479967b 100644
--- a/addons/mail/static/src/components/message/message.scss
+++ b/addons/mail/static/src/components/message/message.scss
@@ -33,12 +33,12 @@
         // It's acceptable not to manage overflow of these tags for the moment.
         // It also excludes all div in li because 1st leaf and div child of list overflow
         // may impact the bullet point (at least it does on Safari).
-        max-width: map-get($sizes, 100);
+        max-width: 100%;
         overflow-x: auto;
     }
 
     img {
-        max-width: map-get($sizes, 100);
+        max-width: 100%;
         height: auto;
     }
 }
@@ -99,7 +99,7 @@
     transition: background-color .5s ease-out;
 
     &.o-not-discussion.o-selected {
-        border-bottom: 1px solid darken(gray('400'), 5%);
+        border-bottom: 1px solid darken(map-get($grays, '400'), 5%);
     }
 
     &.o-highlighted {
diff --git a/addons/mail/static/src/components/message/message.xml b/addons/mail/static/src/components/message/message.xml
index 541decab88a..f1fa37fdb9d 100644
--- a/addons/mail/static/src/components/message/message.xml
+++ b/addons/mail/static/src/components/message/message.xml
@@ -64,7 +64,7 @@
                     </div>
                     <div class="o_Message_core flex-grow-1 me-4">
                         <t t-if="!messageView.isSquashed">
-                            <div class="o_Message_header d-flex flex-wrap align-items-baseline ml-2">
+                            <div class="o_Message_header d-flex flex-wrap align-items-baseline ms-2">
                                 <t t-if="messageView.message.author">
                                     <strong class="o_Message_authorName o_Message_authorRedirect o_redirect o_cursor_pointer text-truncate" role="link" tabindex="0" t-on-click="messageView.onClickAuthorName" title="Open profile">
                                         <t t-if="messageView.message.originThread">
@@ -156,9 +156,9 @@
                             </t>
                         </div>
                         <AttachmentList t-if="messageView.attachmentList" record="messageView.attachmentList"/>
-                        <div t-if="messageView.message.messageReactionGroups.length > 0" class="d-flex flex-wrap ml-2">
+                        <div t-if="messageView.message.messageReactionGroups.length > 0" class="d-flex flex-wrap ms-2">
                             <t t-foreach="messageView.message.messageReactionGroups" t-as="messageReactionGroup" t-key="messageReactionGroup.localId">
-                                <MessageReactionGroup className="'mr-1 mb-1'" record="messageReactionGroup"/>
+                                <MessageReactionGroup className="'me-1 mb-1'" record="messageReactionGroup"/>
                             </t>
                         </div>
                     </div>
diff --git a/addons/mail/static/src/components/message_action_list/message_action_list.xml b/addons/mail/static/src/components/message_action_list/message_action_list.xml
index 6216054fc95..158d0ab2cc5 100644
--- a/addons/mail/static/src/components/message_action_list/message_action_list.xml
+++ b/addons/mail/static/src/components/message_action_list/message_action_list.xml
@@ -2,8 +2,8 @@
 <templates>
     <t t-name="mail.MessageActionList" owl="1">
         <t t-if="messageActionList">
-            <div class="o_MessageActionList d-flex border rounded-sm bg-white" t-att-class="{ 'o-isDeviceSmall': messaging.device.isSmall }" t-attf-class="{{ className }}" t-on-click="messageActionList.onClick" t-ref="root">
-                <i t-if="messageActionList.message.hasReactionIcon" class="o_MessageActionList_action o_MessageActionList_actionReaction fa fa-lg fa-smile-o o_cursor_pointer" t-attf-class="{{ messaging.device.isSmall ? 'pl-3 py-3 pr-2' : 'pl-2 py-2 pr-1' }}"  t-att-title="messageActionList.addReactionText" t-on-click="messageActionList.onClickActionReaction" t-ref="actionReaction"/>
+            <div class="o_MessageActionList d-flex border rounded-1 bg-white" t-att-class="{ 'o-isDeviceSmall': messaging.device.isSmall }" t-attf-class="{{ className }}" t-on-click="messageActionList.onClick" t-ref="root">
+                <i t-if="messageActionList.message.hasReactionIcon" class="o_MessageActionList_action o_MessageActionList_actionReaction fa fa-lg fa-smile-o o_cursor_pointer" t-attf-class="{{ messaging.device.isSmall ? 'ps-3 py-3 pe-2' : 'ps-2 py-2 pe-1' }}"  t-att-title="messageActionList.addReactionText" t-on-click="messageActionList.onClickActionReaction" t-ref="actionReaction"/>
                 <span t-if="messageActionList.message.canStarBeToggled" class="o_MessageActionList_action o_MessageActionList_actionStar o_cursor_pointer"  t-attf-class="{{ messaging.device.isSmall ? 'px-2 py-3' : 'px-1 py-2' }}" t-att-class="{
                         'o_MessageActionList_actionStar_active': messageActionList.message.isStarred,
                         'fa fa-lg fa-star': messageActionList.message.isStarred,
@@ -12,7 +12,7 @@
                 <span t-if="messageActionList.hasReplyIcon" class="o_MessageActionList_action o_MessageActionList_actionReply fa fa-lg fa-reply o_cursor_pointer" t-attf-class="{{ messaging.device.isSmall ? 'px-2 py-3' : 'px-1 py-2' }}" title="Reply" role="button" tabindex="0" aria-label="Reply" t-on-click="messageActionList.onClickReplyTo"/>
                 <span t-if="messageActionList.hasMarkAsReadIcon" class="o_MessageActionList_action o_MessageActionList_actionMarkRead fa fa-lg fa-check o_cursor_pointer" t-attf-class="{{ messaging.device.isSmall ? 'px-2 py-3' : 'px-1 py-2' }}" title="Mark as Read" role="button" tabindex="0" aria-label="Mark as Read" t-on-click="messageActionList.onClickMarkAsRead"/>
                 <span t-if="messageActionList.message.canBeDeleted" class="o_MessageActionList_action o_MessageActionList_actionEdit fa fa-lg fa-pencil o_cursor_pointer" t-attf-class="{{ messaging.device.isSmall ? 'px-2 py-3' : 'px-1 py-2' }}" title="Edit" role="button" tabindex="0" aria-label="Edit" t-on-click="messageActionList.onClickEdit"/>
-                <span t-if="messageActionList.message.canBeDeleted" class="o_MessageActionList_action o_MessageActionList_actionDelete fa fa-lg fa-trash o_cursor_pointer" t-attf-class="{{ messaging.device.isSmall ? 'pl-2 py-3 pr-3' : 'pl-1 py-2 pr-2' }}" title="Delete" role="button" tabindex="0" aria-label="Delete" t-on-click="messageActionList.onClickDelete"/>
+                <span t-if="messageActionList.message.canBeDeleted" class="o_MessageActionList_action o_MessageActionList_actionDelete fa fa-lg fa-trash o_cursor_pointer" t-attf-class="{{ messaging.device.isSmall ? 'ps-2 py-3 pe-3' : 'ps-1 py-2 pe-2' }}" title="Delete" role="button" tabindex="0" aria-label="Delete" t-on-click="messageActionList.onClickDelete"/>
             </div>
         </t>
     </t>
diff --git a/addons/mail/static/src/components/message_in_reply_to_view/message_in_reply_to_view.xml b/addons/mail/static/src/components/message_in_reply_to_view/message_in_reply_to_view.xml
index 4323060bc81..613efb843be 100644
--- a/addons/mail/static/src/components/message_in_reply_to_view/message_in_reply_to_view.xml
+++ b/addons/mail/static/src/components/message_in_reply_to_view/message_in_reply_to_view.xml
@@ -2,22 +2,22 @@
 <templates xml:space="preserve">
     <t t-name="mail.MessageInReplyToView" owl="1">
         <t t-if="messageInReplyToView">
-            <small class="o_MessageInReplyToView position-relative d-block pt-1 pr-2 text-small text-truncate" t-attf-class="{{ className }}" t-ref="root">
-                <span class="o_MessageInReplyToView_corner position-absolute bottom-0 mb-1 pr-4 pb-2 opacity-50"/>
+            <small class="o_MessageInReplyToView position-relative d-block pt-1 pe-2 text-small text-truncate" t-attf-class="{{ className }}" t-ref="root">
+                <span class="o_MessageInReplyToView_corner position-absolute bottom-0 mb-1 pe-4 pb-2 opacity-50"/>
                 <t t-if="!messageInReplyToView.messageView.message.parentMessage.isEmpty">
-                    <b class="o_MessageInReplyToView_author text-muted ml-2">@<t t-esc="messageInReplyToView.messageView.message.parentMessage.authorName"/></b>
-                    <span class="o_MessageInReplyToView_body ml-1 o_cursor_pointer" t-on-click="messageInReplyToView.onClickReply">
+                    <b class="o_MessageInReplyToView_author text-muted ms-2">@<t t-esc="messageInReplyToView.messageView.message.parentMessage.authorName"/></b>
+                    <span class="o_MessageInReplyToView_body ms-1 o_cursor_pointer" t-on-click="messageInReplyToView.onClickReply">
                         <t t-if="messageInReplyToView.hasBodyBackLink">
                             <t t-out="messageInReplyToView.messageView.message.parentMessage.prettyBodyAsMarkup"/>
                         </t>
                         <t t-if="messageInReplyToView.hasAttachmentBackLink">
-                            <span class="font-italic mr-2">Click to see the attachments</span>
+                            <span class="fst-italic me-2">Click to see the attachments</span>
                             <i class="fa fa-image"/>
                         </t>
                     </span>
                 </t>
                 <t t-if="messageInReplyToView.messageView.message.parentMessage.isEmpty">
-                    <i class="o_MessageInReplyToView_deletedMessage text-muted ml-2">Original message was deleted</i>
+                    <i class="o_MessageInReplyToView_deletedMessage text-muted ms-2">Original message was deleted</i>
                 </t>
             </small>
         </t>
diff --git a/addons/mail/static/src/components/message_list/message_list.xml b/addons/mail/static/src/components/message_list/message_list.xml
index 25bfec79f10..790c5c40909 100644
--- a/addons/mail/static/src/components/message_list/message_list.xml
+++ b/addons/mail/static/src/components/message_list/message_list.xml
@@ -6,22 +6,22 @@
             <div class="o_MessageList d-flex flex-column bg-white overflow-auto" t-att-class="{ 'o-empty align-items-center justify-content-center': messageListView.threadViewOwner.messages.length === 0, 'pb-4': messageListView.threadViewOwner.messages.length !== 0 }" t-attf-class="{{ className }}" t-on-scroll="onScroll" t-ref="root">
                 <!-- No result messages -->
                 <t t-if="messageListView.threadViewOwner.threadCache.orderedNonEmptyMessages.length === 0">
-                    <div class="o_MessageList_empty o_MessageList_item d-flex flex-grow-1 flex-column align-items-center justify-content-center align-self-center w-100 h-100 p-4 text-center text-muted font-italic">
+                    <div class="o_MessageList_empty o_MessageList_item d-flex flex-grow-1 flex-column align-items-center justify-content-center align-self-center w-100 h-100 p-4 text-center text-muted fst-italic">
                         <t t-if="messageListView.threadViewOwner.thread === messaging.inbox">
-                            <h4 class="o_MessageList_emptyTitle mb-3 font-weight-bolder">
+                            <h4 class="o_MessageList_emptyTitle mb-3 fw-bolder">
                                 Congratulations, your inbox is empty
                             </h4>
                             New messages appear here.
                         </t>
                         <t t-elif="messageListView.threadViewOwner.thread === messaging.starred">
-                            <h4 class="o_MessageList_emptyTitle mb-3 font-weight-bolder">
+                            <h4 class="o_MessageList_emptyTitle mb-3 fw-bolder">
                                 No starred messages
                             </h4>
                             You can mark any message as 'starred', and it shows up in this mailbox.
                         </t>
                         <t t-elif="messageListView.threadViewOwner.thread === messaging.history">
                             <img src="/web/static/img/neutral_face.svg" alt="History"/>
-                            <h4 class="o_MessageList_emptyTitle mb-3 font-weight-bolder">
+                            <h4 class="o_MessageList_emptyTitle mb-3 fw-bolder">
                                 No history messages
                             </h4>
                             Messages marked as read will appear in the history.
@@ -50,14 +50,14 @@
                 <t t-set="current_day" t-value="0"/>
                 <t t-foreach="messageListView.messageListViewMessageViewItems" t-as="messageListViewMessageViewItem" t-key="messageListViewMessageViewItem.localId">
                     <Transition visible="messageListViewMessageViewItem.message === messageListView.threadViewOwner.thread.messageAfterNewMessageSeparator" name="'o-fade'" t-slot-scope="transition">
-                        <div class="o_MessageList_separator o_MessageList_separatorNewMessages o_MessageList_item d-flex flex-shrink-0 align-items-center mr-4 p-0 font-weight-bolder" t-att-class="{ 'o-disable-animation': messaging.disableAnimation, 'opacity-0': transition.className.includes('o-fade-leave') }" t-attf-class="{{transition.className}}">
+                        <div class="o_MessageList_separator o_MessageList_separatorNewMessages o_MessageList_item d-flex flex-shrink-0 align-items-center me-4 p-0 fw-bolder" t-att-class="{ 'o-disable-animation': messaging.disableAnimation, 'opacity-0': transition.className.includes('o-fade-leave') }" t-attf-class="{{transition.className}}">
                             <hr class="o_MessageList_separatorLine o_MessageList_separatorLineNewMessages flex-grow-1 w-auto"/><span class="o_MessageList_separatorLabel o_MessageList_separatorLabelNewMessages px-3">New messages</span>
                         </div>
                     </Transition>
                     <t t-if="!messageListViewMessageViewItem.message.isEmpty">
                         <t t-set="message_day" t-value="messageListViewMessageViewItem.message.dateDay"/>
                         <t t-if="current_day !== message_day">
-                            <div class="o_MessageList_separator o_MessageList_separatorDate o_MessageList_item d-flex flex-shrink-0 align-items-center pt-4 pb-0 px-0 font-weight-bolder">
+                            <div class="o_MessageList_separator o_MessageList_separatorDate o_MessageList_item d-flex flex-shrink-0 align-items-center pt-4 pb-0 px-0 fw-bolder">
                                 <hr class="o_MessageList_separatorLine flex-grow-1 w-auto border-top"/><span class="o_MessageList_separatorLabel o_MessageList_separatorLabelDate px-3"><t t-esc="message_day"/></span><hr class="o_MessageList_separatorLine flex-grow-1 w-auto border-top"/>
                                 <t t-set="current_day" t-value="message_day"/>
                             </div>
diff --git a/addons/mail/static/src/components/message_reaction_group/message_reaction_group.xml b/addons/mail/static/src/components/message_reaction_group/message_reaction_group.xml
index dc44c3f1bcd..538ef48e999 100644
--- a/addons/mail/static/src/components/message_reaction_group/message_reaction_group.xml
+++ b/addons/mail/static/src/components/message_reaction_group/message_reaction_group.xml
@@ -3,11 +3,11 @@
 
     <t t-name="mail.MessageReactionGroup" owl="1">
         <t t-if="messageReactionGroup">
-            <button class="o_MessageReactionGroup btn d-flex p-0 border rounded-sm" t-att-class="{'o-hasUserReacted border-primary': messageReactionGroup.hasUserReacted, 'bg-white': !messageReactionGroup.hasUserReacted}" t-attf-class="{{ className }}" t-att-title="messageReactionGroup.summary" t-on-click="messageReactionGroup.onClick" t-ref="root">
+            <button class="o_MessageReactionGroup btn d-flex p-0 border rounded-1" t-att-class="{'o-hasUserReacted border-primary': messageReactionGroup.hasUserReacted, 'bg-white': !messageReactionGroup.hasUserReacted}" t-attf-class="{{ className }}" t-att-title="messageReactionGroup.summary" t-on-click="messageReactionGroup.onClick" t-ref="root">
                 <span class="o_MessageReactionGroup_content mx-1">
                     <t t-esc="messageReactionGroup.content"/>
                 </span>
-                <span class="o_MessageReactionGroup_count mx-1" t-att-class="{'o-hasUserReacted text-primary font-weight-bolder': messageReactionGroup.hasUserReacted}">
+                <span class="o_MessageReactionGroup_count mx-1" t-att-class="{'o-hasUserReacted text-primary fw-bolder': messageReactionGroup.hasUserReacted}">
                     <t t-esc="messageReactionGroup.count"/>
                 </span>
             </button>
diff --git a/addons/mail/static/src/components/message_seen_indicator/message_seen_indicator.xml b/addons/mail/static/src/components/message_seen_indicator/message_seen_indicator.xml
index 2483ff22052..fc1ad9db311 100644
--- a/addons/mail/static/src/components/message_seen_indicator/message_seen_indicator.xml
+++ b/addons/mail/static/src/components/message_seen_indicator/message_seen_indicator.xml
@@ -6,7 +6,7 @@
             <span class="o_MessageSeenIndicator position-relative d-flex opacity-75-hover opacity-50" t-att-class="{ 'o-all-seen text-odoo': messageSeenIndicatorView.messageSeenIndicator.hasEveryoneSeen }" t-attf-class="{{ className }}" t-att-title="messageSeenIndicatorView.messageSeenIndicator.text" t-ref="root">
                 <t t-if="!messageSeenIndicatorView.messageSeenIndicator.isMessagePreviousToLastCurrentPartnerMessageSeenByEveryone">
                     <t t-if="messageSeenIndicatorView.messageSeenIndicator.hasSomeoneFetched or messageSeenIndicatorView.messageSeenIndicator.hasSomeoneSeen">
-                        <i class="o_MessageSeenIndicator_icon o-first fa fa-check pl-1"/>
+                        <i class="o_MessageSeenIndicator_icon o-first fa fa-check ps-1"/>
                     </t>
                     <t t-if="messageSeenIndicatorView.messageSeenIndicator.hasSomeoneSeen">
                         <i class="o_MessageSeenIndicator_icon o-second fa fa-check position-absolute"/>
diff --git a/addons/mail/static/src/components/messaging_menu/messaging_menu.xml b/addons/mail/static/src/components/messaging_menu/messaging_menu.xml
index 8ed19a12525..6299b901d83 100644
--- a/addons/mail/static/src/components/messaging_menu/messaging_menu.xml
+++ b/addons/mail/static/src/components/messaging_menu/messaging_menu.xml
@@ -36,7 +36,7 @@
                                 </t>
                                 <t t-if="messagingMenu.mobileNewMessageAutocompleteInputView">
                                     <AutocompleteInput
-                                        className="'o_MessagingMenu_mobileNewMessageInput mt-2 p-2 rounded-lg'"
+                                        className="'o_MessagingMenu_mobileNewMessageInput mt-2 p-2 rounded-3'"
                                         record="messagingMenu.mobileNewMessageAutocompleteInputView"
                                         select="messagingMenu.onMobileNewMessageInputSelect"
                                         source="messagingMenu.onMobileNewMessageInputSource"
diff --git a/addons/mail/static/src/components/messaging_menu_tab/messaging_menu_tab.xml b/addons/mail/static/src/components/messaging_menu_tab/messaging_menu_tab.xml
index 43867d8cd33..a4fd1ba7645 100644
--- a/addons/mail/static/src/components/messaging_menu_tab/messaging_menu_tab.xml
+++ b/addons/mail/static/src/components/messaging_menu_tab/messaging_menu_tab.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.MessagingMenuTab" owl="1">
-        <button class="o_MessagingMenuTab o-desktop btn btn-link" t-att-class="{ 'o-active font-weight-bolder': messagingMenu.activeTabId === props.tabId, 'text-500': messagingMenu.activeTabId !== props.tabId }" t-on-click="messagingMenu.onClickDesktopTabButton" type="button" role="tab" t-att-data-tab-id="props.tabId" t-attf-class="{{ className }}" t-ref="root">
+        <button class="o_MessagingMenuTab o-desktop btn btn-link" t-att-class="{ 'o-active fw-bolder': messagingMenu.activeTabId === props.tabId, 'text-500': messagingMenu.activeTabId !== props.tabId }" t-on-click="messagingMenu.onClickDesktopTabButton" type="button" role="tab" t-att-data-tab-id="props.tabId" t-attf-class="{{ className }}" t-ref="root">
             <t t-if="props.tabId === 'all'">All</t>
             <t t-elif="props.tabId === 'chat'">Chat</t>
             <t t-elif="props.tabId === 'channel'">Channels</t>
diff --git a/addons/mail/static/src/components/mobile_messaging_navbar/mobile_messaging_navbar.xml b/addons/mail/static/src/components/mobile_messaging_navbar/mobile_messaging_navbar.xml
index cbc9398a129..14642dc46cf 100644
--- a/addons/mail/static/src/components/mobile_messaging_navbar/mobile_messaging_navbar.xml
+++ b/addons/mail/static/src/components/mobile_messaging_navbar/mobile_messaging_navbar.xml
@@ -5,7 +5,7 @@
         <t t-if="mobileMessagingNavbarView">
             <div class="o_MobileMessagingNavbar d-flex flex-shrink-0 border-top bg-white shadow-lg" t-attf-class="{{ className }}" t-ref="root">
                 <t t-foreach="mobileMessagingNavbarView.tabs" t-as="tab" t-key="tab.id">
-                    <div class="o_MobileMessagingNavbar_tab d-flex flex-column align-items-center flex-grow-1 p-2" t-att-class="{ 'o-active text-primary': mobileMessagingNavbarView.activeTabId === tab.id, 'border-left': tab_index !== 0 }" t-on-click="ev => mobileMessagingNavbarView.onClick(tab.id, ev)" t-att-data-tab-id="tab.id">
+                    <div class="o_MobileMessagingNavbar_tab d-flex flex-column align-items-center flex-grow-1 p-2" t-att-class="{ 'o-active text-primary': mobileMessagingNavbarView.activeTabId === tab.id, 'border-start': tab_index !== 0 }" t-on-click="ev => mobileMessagingNavbarView.onClick(tab.id, ev)" t-att-data-tab-id="tab.id">
                         <t t-if="tab.icon">
                             <span class="o_MobileMessagingNavbar_tabIcon fs-4" t-att-class="tab.icon"/>
                         </t>
diff --git a/addons/mail/static/src/components/notification_group/notification_group.xml b/addons/mail/static/src/components/notification_group/notification_group.xml
index d212920b454..6934b00f8fb 100644
--- a/addons/mail/static/src/components/notification_group/notification_group.xml
+++ b/addons/mail/static/src/components/notification_group/notification_group.xml
@@ -11,11 +11,11 @@
                 </div>
                 <div class="o_NotificationListItem_content o_NotificationGroup_content d-flex flex-column flex-grow-1 align-self-start m-2">
                     <div class="o_NotificationGroup_header o_NotificationListItem_header d-flex">
-                        <span class="o_NotificationListItem_name o_NotificationGroup_name text-truncate font-weight-bold" t-att-class="{ 'o-mobile fs-5': messaging.device.isSmall }">
+                        <span class="o_NotificationListItem_name o_NotificationGroup_name text-truncate fw-bold" t-att-class="{ 'o-mobile fs-5': messaging.device.isSmall }">
                             <t t-esc="notificationGroupView.notificationGroup.res_model_name"/>
                         </span>
                         <t t-if="notificationGroupView.notificationGroup.notifications.length > 1">
-                            <span class="o_NotificationListItem_counter o_NotificationGroup_counter mx-1 font-weight-bold">
+                            <span class="o_NotificationListItem_counter o_NotificationGroup_counter mx-1 fw-bold">
                                 (<t t-esc="notificationGroupView.notificationGroup.notifications.length"/>)
                             </span>
                         </t>
diff --git a/addons/mail/static/src/components/notification_request/notification_request.xml b/addons/mail/static/src/components/notification_request/notification_request.xml
index b5c90504480..f46cff1de53 100644
--- a/addons/mail/static/src/components/notification_request/notification_request.xml
+++ b/addons/mail/static/src/components/notification_request/notification_request.xml
@@ -17,7 +17,7 @@
                 </div>
                 <div class="o_NotificationListItem_content o_NotificationRequest_content d-flex flex-column flex-grow-1 align-self-start m-2">
                     <div class="o_NotificationListItem_header o_NotificationRequest_header d-flex">
-                        <span class="o_NotificationListItem_name o_NotificationRequest_name text-truncate font-weight-bold" t-att-class="{ 'o-isDeviceSmall fs-5': messaging.device.isSmall }">
+                        <span class="o_NotificationListItem_name o_NotificationRequest_name text-truncate fw-bold" t-att-class="{ 'o-isDeviceSmall fs-5': messaging.device.isSmall }">
                             <t t-esc="notificationRequestView.headerText"/>
                         </span>
                     </div>
diff --git a/addons/mail/static/src/components/thread_needaction_preview/thread_needaction_preview.xml b/addons/mail/static/src/components/thread_needaction_preview/thread_needaction_preview.xml
index 086cbe58953..586d3824537 100644
--- a/addons/mail/static/src/components/thread_needaction_preview/thread_needaction_preview.xml
+++ b/addons/mail/static/src/components/thread_needaction_preview/thread_needaction_preview.xml
@@ -25,11 +25,11 @@
                 </div>
                 <div class="o_NotificationListItem_content o_ThreadNeedactionPreview_content d-flex flex-column flex-grow-1 align-self-start m-2">
                     <div class="o_NotificationListItem_header o_ThreadNeedactionPreview_header d-flex">
-                        <span class="o_NotificationListItem_name o_ThreadNeedactionPreview_name text-truncate font-weight-bold" t-att-class="{ 'o-isDeviceSmall fs-5': messaging.device.isSmall }">
+                        <span class="o_NotificationListItem_name o_ThreadNeedactionPreview_name text-truncate fw-bold" t-att-class="{ 'o-isDeviceSmall fs-5': messaging.device.isSmall }">
                             <t t-esc="threadNeedactionPreviewView.thread.displayName"/>
                         </span>
                         <t t-if="threadNeedactionPreviewView.thread.needactionMessagesAsOriginThread.length > 1">
-                            <span class="o_NotificationListItem_counter o_ThreadNeedactionPreview_counter mx-1 font-weight-bold">
+                            <span class="o_NotificationListItem_counter o_ThreadNeedactionPreview_counter mx-1 fw-bold">
                                 (<t t-esc="threadNeedactionPreviewView.thread.needactionMessagesAsOriginThread.length"/>)
                             </span>
                         </t>
diff --git a/addons/mail/static/src/components/thread_preview/thread_preview.xml b/addons/mail/static/src/components/thread_preview/thread_preview.xml
index cb74030bc57..bf2a813afc1 100644
--- a/addons/mail/static/src/components/thread_preview/thread_preview.xml
+++ b/addons/mail/static/src/components/thread_preview/thread_preview.xml
@@ -26,11 +26,11 @@
                 </div>
                 <div class="o_NotificationListItem_content o_ThreadPreview_content d-flex flex-column flex-grow-1 align-self-start m-2">
                     <div class="o_NotificationListItem_header o_ThreadPreview_header d-flex align-items-baseline">
-                        <span class="o_NotificationListItem_name o_ThreadPreview_name text-truncate font-weight-bold" t-att-class="{ 'o-isDeviceSmall fs-5': messaging.device.isSmall, 'o-muted text-600': threadPreviewView.thread.localMessageUnreadCounter === 0 }">
+                        <span class="o_NotificationListItem_name o_ThreadPreview_name text-truncate fw-bold" t-att-class="{ 'o-isDeviceSmall fs-5': messaging.device.isSmall, 'o-muted text-600': threadPreviewView.thread.localMessageUnreadCounter === 0 }">
                             <t t-esc="threadPreviewView.thread.displayName"/>
                         </span>
                         <t t-if="threadPreviewView.thread.localMessageUnreadCounter > 1">
-                            <span class="o_NotificationListItem_counter o_ThreadPreview_counter mx-1 font-weight-bold">
+                            <span class="o_NotificationListItem_counter o_ThreadPreview_counter mx-1 fw-bold">
                                 (<t t-esc="threadPreviewView.thread.localMessageUnreadCounter"/>)
                             </span>
                         </t>
diff --git a/addons/mail/static/src/components/thread_view/thread_view.xml b/addons/mail/static/src/components/thread_view/thread_view.xml
index 7da9a2c85ea..7264f5c3620 100644
--- a/addons/mail/static/src/components/thread_view/thread_view.xml
+++ b/addons/mail/static/src/components/thread_view/thread_view.xml
@@ -44,7 +44,7 @@
                         </t>
                     </div>
                     <t t-if="threadView.channelMemberListView">
-                        <ChannelMemberList className="'o_ThreadView_channelMemberList flex-shrink-0 border-left'" record="threadView.channelMemberListView"/>
+                        <ChannelMemberList className="'o_ThreadView_channelMemberList flex-shrink-0 border-start'" record="threadView.channelMemberListView"/>
                     </t>
                 </div>
             </div>
diff --git a/addons/mail/static/src/components/thread_view_topbar/thread_view_topbar.scss b/addons/mail/static/src/components/thread_view_topbar/thread_view_topbar.scss
index f227a20fe3d..3f9ea9a6248 100644
--- a/addons/mail/static/src/components/thread_view_topbar/thread_view_topbar.scss
+++ b/addons/mail/static/src/components/thread_view_topbar/thread_view_topbar.scss
@@ -29,5 +29,5 @@ input.o_ThreadViewTopbar_guestNameInput {
 }
 
 .o_ThreadViewTopbar_threadName {
-    max-width: map-get($sizes, 75);
+    max-width: 75%;
 }
diff --git a/addons/mail/static/src/components/thread_view_topbar/thread_view_topbar.xml b/addons/mail/static/src/components/thread_view_topbar/thread_view_topbar.xml
index 0b93efdc795..cf44e45e6cb 100644
--- a/addons/mail/static/src/components/thread_view_topbar/thread_view_topbar.xml
+++ b/addons/mail/static/src/components/thread_view_topbar/thread_view_topbar.xml
@@ -5,26 +5,26 @@
         <t t-if="threadViewTopbar">
             <div class="o_ThreadViewTopbar d-flex flex-shrink-0 w-100 px-3 bg-100" t-attf-class="{{ className }}" t-ref="root">
                 <t t-if="threadViewTopbar.thread">
-                    <ThreadIcon className="'o_ThreadViewTopbar_threadIcon mr-2 align-self-center'" thread="threadViewTopbar.thread"/>
+                    <ThreadIcon className="'o_ThreadViewTopbar_threadIcon me-2 align-self-center'" thread="threadViewTopbar.thread"/>
                 </t>
                 <div class="o_ThreadViewTopbar_title d-flex flex-grow-1 align-self-center align-items-center">
                     <t t-if="threadViewTopbar.thread">
                         <t t-if="!threadViewTopbar.isEditingThreadName">
-                            <div class="o_ThreadViewTopbar_threadName o_ThreadViewTopbar_editableItem lead flex-shrink-0 px-1 border text-truncate font-weight-bold" t-att-title="threadViewTopbar.thread.displayName" t-on-click="threadViewTopbar.onClickTopbarThreadName" t-on-mouseenter="threadViewTopbar.onMouseEnterTopbarThreadName" t-on-mouseleave="threadViewTopbar.onMouseLeaveTopbarThreadName" t-attf-class="{{ threadViewTopbar.isMouseOverThreadName and !messaging.isCurrentUserGuest ? 'o-threadNameEditable bg-white' : 'border-light' }}">
+                            <div class="o_ThreadViewTopbar_threadName o_ThreadViewTopbar_editableItem lead flex-shrink-0 px-1 border text-truncate fw-bold" t-att-title="threadViewTopbar.thread.displayName" t-on-click="threadViewTopbar.onClickTopbarThreadName" t-on-mouseenter="threadViewTopbar.onMouseEnterTopbarThreadName" t-on-mouseleave="threadViewTopbar.onMouseLeaveTopbarThreadName" t-attf-class="{{ threadViewTopbar.isMouseOverThreadName and !messaging.isCurrentUserGuest ? 'o-threadNameEditable bg-white' : 'border-light' }}">
                                 <t t-esc="threadViewTopbar.thread.displayName"/>
                             </div>
                         </t>
                         <t t-if="threadViewTopbar.isEditingThreadName">
-                            <input class="o_ThreadViewTopbar_threadNameInput lead font-weight-bold" type="text" t-att-value="threadViewTopbar.pendingThreadName" t-on-input="threadViewTopbar.onInputThreadNameInput" t-on-keydown="threadViewTopbar.onKeyDownThreadNameInput" t-ref="threadNameInput"/>
+                            <input class="o_ThreadViewTopbar_threadNameInput lead fw-bold" type="text" t-att-value="threadViewTopbar.pendingThreadName" t-on-input="threadViewTopbar.onInputThreadNameInput" t-on-keydown="threadViewTopbar.onKeyDownThreadNameInput" t-ref="threadNameInput"/>
                         </t>
                     </t>
                     <t t-if="!threadViewTopbar.thread">
-                        <div class="o_ThreadViewTopbar_threadName lead flex-shrink-0 px-1 text-truncate font-weight-bold">
+                        <div class="o_ThreadViewTopbar_threadName lead flex-shrink-0 px-1 text-truncate fw-bold">
                             Discuss
                         </div>
                     </t>
                     <t t-if="threadViewTopbar.hasDescriptionArea">
-                        <div class="o_ThreadViewTopbar_threadDescriptionSeparator flex-shrink-0 mx-2 py-2 border-left"/>
+                        <div class="o_ThreadViewTopbar_threadDescriptionSeparator flex-shrink-0 mx-2 py-2 border-start"/>
                         <t t-if="!threadViewTopbar.isEditingThreadDescription">
                             <t t-if="threadViewTopbar.thread.description">
                                 <div class="o_ThreadViewTopbar_threadDescription o_ThreadViewTopbar_editableItem px-1 border text-truncate" t-att-title="threadViewTopbar.thread.description" t-on-click="threadViewTopbar.onClickTopbarThreadDescription" t-on-mouseenter="threadViewTopbar.onMouseEnterTopbarThreadDescription" t-on-mouseleave="threadViewTopbar.onMouseLeaveTopbarThreadDescription" t-attf-class="{{ threadViewTopbar.isDescriptionHighlighted ? 'o-threadDescriptionEditable bg-white' : 'border-light' }}">
@@ -42,7 +42,7 @@
                         </t>
                     </t>
                 </div>
-                <div class="o_ThreadViewTopbar_actions d-flex align-items-center ml-1">
+                <div class="o_ThreadViewTopbar_actions d-flex align-items-center ms-1">
                     <t t-if="threadViewTopbar.thread and threadViewTopbar.thread === messaging.inbox">
                         <button class="o_ThreadViewTopbar_markAllReadButton btn btn-secondary" t-att-disabled="threadViewTopbar.threadView.messages.length === 0" t-on-click="threadViewTopbar.onClickInboxMarkAllAsRead">Mark all read</button>
                     </t>
@@ -79,7 +79,7 @@
                     <div class="o_ThreadViewTopbar_userInfo d-flex align-items-center">
                         <img class="o_ThreadViewTopbar_avatar mx-1 rounded-circle o_object_fit_cover" t-att-src="threadViewTopbar.avatarUrl" alt="Avatar"/>
                         <t t-if="!threadViewTopbar.isEditingGuestName">
-                            <span class="o_ThreadViewTopbar_userName o_ThreadViewTopbar_editableItem px-1 border font-weight-bold text-truncate" t-attf-class="{{ threadViewTopbar.isMouseOverUserName and messaging.isCurrentUserGuest ? 'o-userNameEditable bg-white' : 'border-light' }}" t-on-click="threadViewTopbar.onClickUserName" t-on-mouseenter="threadViewTopbar.onMouseEnterUserName" t-on-mouseleave="threadViewTopbar.onMouseLeaveUserName">
+                            <span class="o_ThreadViewTopbar_userName o_ThreadViewTopbar_editableItem px-1 border fw-bold text-truncate" t-attf-class="{{ threadViewTopbar.isMouseOverUserName and messaging.isCurrentUserGuest ? 'o-userNameEditable bg-white' : 'border-light' }}" t-on-click="threadViewTopbar.onClickUserName" t-on-mouseenter="threadViewTopbar.onMouseEnterUserName" t-on-mouseleave="threadViewTopbar.onMouseLeaveUserName">
                                 <t t-esc="messaging.isCurrentUserGuest ? messaging.currentGuest.name : messaging.currentUser.nameOrDisplayName"/>
                             </span>
                         </t>
diff --git a/addons/mail/static/src/components/tracking_value/tracking_value.xml b/addons/mail/static/src/components/tracking_value/tracking_value.xml
index 9d15e7fb80b..9c3777bd409 100644
--- a/addons/mail/static/src/components/tracking_value/tracking_value.xml
+++ b/addons/mail/static/src/components/tracking_value/tracking_value.xml
@@ -2,10 +2,10 @@
 <templates>
     <t t-name="mail.TrackingValue" owl="1">
         <div class="o_TrackingValue d-inline-block d-flex align-items-center flex-wrap" t-attf-class="{{ className }}" role="group" t-ref="root">
-            <span class="o_TrackingValue_fieldName mr-1" t-esc="trackingValue.formattedChangedField"/>
-            <span class="o_TrackingValue_oldValue mr-1" t-esc="trackingValue.oldValue.formattedValueOrNone" t-att-class="{ 'font-italic': !trackingValue.oldValue.formattedValue }"/>
+            <span class="o_TrackingValue_fieldName me-1" t-esc="trackingValue.formattedChangedField"/>
+            <span class="o_TrackingValue_oldValue me-1" t-esc="trackingValue.oldValue.formattedValueOrNone" t-att-class="{ 'fst-italic': !trackingValue.oldValue.formattedValue }"/>
             <i class="o_TrackingValue_separator fa fa-long-arrow-right mx-1" title="Changed" role="img" aria-label="Changed"/>
-            <span class="o_TrackingValue_newValue mr-1" t-esc="trackingValue.newValue.formattedValueOrNone" t-att-class="{ 'font-italic': !trackingValue.newValue.formattedValue }"/>
+            <span class="o_TrackingValue_newValue me-1" t-esc="trackingValue.newValue.formattedValueOrNone" t-att-class="{ 'fst-italic': !trackingValue.newValue.formattedValue }"/>
         </div>
     </t>
 </templates>
diff --git a/addons/mail/static/src/components/welcome_view/welcome_view.xml b/addons/mail/static/src/components/welcome_view/welcome_view.xml
index 1ed58b9e23b..0a0e8327b81 100644
--- a/addons/mail/static/src/components/welcome_view/welcome_view.xml
+++ b/addons/mail/static/src/components/welcome_view/welcome_view.xml
@@ -4,13 +4,13 @@
     <t t-name="mail.WelcomeView" owl="1">
         <t t-if="welcomeView">
             <div class="o_WelcomeView h-100 d-flex flex-column justify-content-center align-items-center bg-light" t-attf-class="{{ className }}" t-ref="root">
-                <h1 class="font-weight-light">
+                <h1 class="fw-light">
                     <span t-if="welcomeView.callDemoView">You've been invited to a meeting!</span>
                     <span t-if="!welcomeView.callDemoView">You've been invited to a chat!</span>
                 </h1>
                 <h2 class="m-5" t-esc="messaging.companyName"/>
                 <div class="d-flex justify-content-center">
-                    <CallDemoView t-if="welcomeView.callDemoView" className="'mr-5'" record="welcomeView.callDemoView"/>
+                    <CallDemoView t-if="welcomeView.callDemoView" className="'me-5'" record="welcomeView.callDemoView"/>
                     <div class="d-flex flex-column justify-content-center">
                         <t t-if="messaging.currentGuest">
                             <label class="o_WelcomeView_guestNameInputLabel text-center fs-4" t-att-for="welcomeView.guestNameInputUniqueId">What's your name?</label>
diff --git a/addons/mail/static/src/js/activity.js b/addons/mail/static/src/js/activity.js
index fd3b13391ac..d46a929e4ac 100644
--- a/addons/mail/static/src/js/activity.js
+++ b/addons/mail/static/src/js/activity.js
@@ -638,7 +638,7 @@ var KanbanActivity = BasicActivity.extend({
     _renderDropdown: function () {
         var self = this;
         this.$('.o_activity')
-            .toggleClass('dropdown-menu-right', config.device.isMobile)
+            .toggleClass('dropdown-menu-end', config.device.isMobile)
             .html(QWeb.render('mail.KanbanActivityLoading'));
         return _readActivities(this, this.value.res_ids).then(function (activities) {
             activities = setFileUploadID(activities);
diff --git a/addons/mail/static/src/js/document_viewer.js b/addons/mail/static/src/js/document_viewer.js
index 3659c01bb12..caa8ce76838 100644
--- a/addons/mail/static/src/js/document_viewer.js
+++ b/addons/mail/static/src/js/document_viewer.js
@@ -92,7 +92,7 @@ var DocumentViewer = Widget.extend({
         this.$el.modal('show');
         this.$el.on('hidden.bs.modal', _.bind(this._onDestroy, this));
         this.$('.o_viewer_img').on("load", _.bind(this._onImageLoaded, this));
-        this.$('[data-toggle="tooltip"]').tooltip({delay: 0});
+        this.$('[data-bs-toggle="tooltip"]').tooltip({delay: 0});
         return this._super.apply(this, arguments);
     },
     /**
@@ -157,7 +157,7 @@ var DocumentViewer = Widget.extend({
         }));
         this.$('.o_viewer_img').on("load", _.bind(this._onImageLoaded, this));
         this._hidePdfButtonsIfPresent();
-        this.$('[data-toggle="tooltip"]').tooltip({delay: 0});
+        this.$('[data-bs-toggle="tooltip"]').tooltip({delay: 0});
         this._reset();
     },
     /**
diff --git a/addons/mail/static/src/scss/activity_view.scss b/addons/mail/static/src/scss/activity_view.scss
index 817227f1202..644fb1a1b1d 100644
--- a/addons/mail/static/src/scss/activity_view.scss
+++ b/addons/mail/static/src/scss/activity_view.scss
@@ -12,13 +12,13 @@
     .o_activity_summary_cell {
         background-color: #FFF;
         &.planned {
-            background-color: theme-color('success');
+            background-color: map-get($theme-colors, 'success');
         }
         &.overdue {
-            background-color: theme-color('danger');
+            background-color: map-get($theme-colors, 'danger');
         }
         &.today {
-            background-color: theme-color('warning');
+            background-color: map-get($theme-colors, 'warning');
         }
         .o_kanban_inline_block {
             min-height: 42px;
@@ -94,13 +94,13 @@
         }
     }
     .o_activity_filter_planned {
-        background-color: mix(theme-color('success'), $o-webclient-background-color, 5%);
+        background-color: mix(map-get($theme-colors, 'success'), $o-webclient-background-color, 5%);
     }
     .o_activity_filter_today {
-        background-color: mix(theme-color('warning'), $o-webclient-background-color, 5%);
+        background-color: mix(map-get($theme-colors, 'warning'), $o-webclient-background-color, 5%);
     }
     .o_activity_filter_overdue {
-        background-color: mix(theme-color('danger'), $o-webclient-background-color, 5%);
+        background-color: mix(map-get($theme-colors, 'danger'), $o-webclient-background-color, 5%);
     }
     .o_record_selector {
         color: $o-enterprise-primary-color;
diff --git a/addons/mail/static/src/scss/composer.scss b/addons/mail/static/src/scss/composer.scss
index 5a27f6cd124..aca5a63d672 100644
--- a/addons/mail/static/src/scss/composer.scss
+++ b/addons/mail/static/src/scss/composer.scss
@@ -25,7 +25,7 @@
 
 @mixin o-viewer-black-btn {
     background-color: rgba(black, 0.4);
-    color: rgba(theme-color('light'), 0.7);
+    color: rgba(map-get($theme-colors, 'light'), 0.7);
 
     &:hover {
         background-color: rgba(black, 0.6);
@@ -33,7 +33,7 @@
     }
 
     &.disabled {
-        color: gray('600');
+        color: map-get($grays, '600');
         background: none;
     }
 }
@@ -63,7 +63,7 @@
             color: #FFFFFF;
 
             a {
-                @include o-hover-text-color(rgba(theme-color('light'), 0.6), white);
+                @include o-hover-text-color(rgba(map-get($theme-colors, 'light'), 0.6), white);
             }
 
             .o_image_caption {
@@ -130,7 +130,7 @@
 
                 @include media-breakpoint-down(md) {
                     .o_viewer_pdf, .o_viewer_text {
-                        width: map-get($sizes, 100);
+                        width: 100%;
                     }
                 }
             }
diff --git a/addons/mail/static/src/scss/discuss.scss b/addons/mail/static/src/scss/discuss.scss
index deccabb39ee..9b334b34511 100644
--- a/addons/mail/static/src/scss/discuss.scss
+++ b/addons/mail/static/src/scss/discuss.scss
@@ -25,13 +25,13 @@
 
 .o_mail_preview {
     display: flex;
-    background-color: theme-color('light');
+    background-color: map-get($theme-colors, 'light');
     color: $o-main-text-color;
     cursor: pointer;
     overflow: hidden;
     position: relative;
     &:hover {
-        background-color: gray('300');
+        background-color: map-get($grays, '300');
         .o_preview_name {
             color: $headings-color;
         }
@@ -40,7 +40,7 @@
         }
     }
     &:not(:last-child) {
-        border-bottom: 1px solid gray('400');
+        border-bottom: 1px solid map-get($grays, '400');
     }
     .o_mail_preview_image {
         display: flex;
@@ -108,7 +108,7 @@
     &.o_preview_unread {
         background-color: transparent;
         &:hover {
-            background-color: theme-color('light');
+            background-color: map-get($theme-colors, 'light');
         }
         .o_preview_info {
             .o_preview_title {
@@ -124,7 +124,7 @@
     &.o_systray_activity {
         background-color: transparent;
         &:hover {
-            background-color: theme-color('light');
+            background-color: map-get($theme-colors, 'light');
         }
     }
 }
@@ -157,7 +157,7 @@
 
     .o_mail_mobile_tabs {
         display: flex;
-        box-shadow: 0 0 8px gray('400');
+        box-shadow: 0 0 8px map-get($grays, '400');
 
         .o_mail_mobile_tab {
             display: flex;
@@ -166,7 +166,7 @@
             flex-flow: column nowrap;
             justify-content: space-between;
             padding: $o-mail-chatter-mobile-gap $o-mail-chatter-mobile-gap*2;
-            box-shadow: 1px 0 0 gray('400');
+            box-shadow: 1px 0 0 map-get($grays, '400');
             text-align: center;
 
             > span {
diff --git a/addons/mail/static/src/scss/kanban_view.scss b/addons/mail/static/src/scss/kanban_view.scss
index 3406c1af9db..44e95d41cb6 100644
--- a/addons/mail/static/src/scss/kanban_view.scss
+++ b/addons/mail/static/src/scss/kanban_view.scss
@@ -24,11 +24,13 @@ $o-kanban-attachement-image-size: 80px;
             }
 
             .o_attachment_image {
-                @include size($o-kanban-attachement-image-size);
+                width: $o-kanban-attachement-image-size;
+                height: $o-kanban-attachement-image-size;
             }
 
             .o_image {
-                @include size($o-kanban-attachement-image-size*0.7);
+                width: $o-kanban-attachement-image-size*0.7;
+                height: $o-kanban-attachement-image-size*0.7;
             }
         }
 
diff --git a/addons/mail/static/src/scss/mail_activity.scss b/addons/mail/static/src/scss/mail_activity.scss
index 3d63360a3a5..c2dc1a62c5d 100644
--- a/addons/mail/static/src/scss/mail_activity.scss
+++ b/addons/mail/static/src/scss/mail_activity.scss
@@ -7,7 +7,7 @@
     .o_thread_date_separator.o_border_dashed {
         border-bottom-style: dashed;
 
-        &[data-toggle="collapse"] {
+        &[data-bs-toggle="collapse"] {
             cursor: pointer;
 
             .o_chatter_planned_activities_summary {
@@ -73,7 +73,7 @@
                 .o_activity_info {
                     vertical-align: baseline;
                     padding: 4px 6px;
-                    background: theme-color('light');
+                    background: map-get($theme-colors, 'light');
                     border-radius: 2px 2px 0 0;
                     @include o-hover-opacity(1, 1);
 
@@ -218,7 +218,7 @@
 
                     .o_activity_link_kanban {
                         font-size: 1.5em;
-                        @include o-hover-text-color($text-muted, theme-color('success'));
+                        @include o-hover-text-color($text-muted, map-get($theme-colors, 'success'));
                         @include o-hover-opacity(0.5, 1);
                     }
 
diff --git a/addons/mail/static/src/scss/systray.scss b/addons/mail/static/src/scss/systray.scss
index 0930800a452..fc481b823d2 100644
--- a/addons/mail/static/src/scss/systray.scss
+++ b/addons/mail/static/src/scss/systray.scss
@@ -24,8 +24,8 @@
             display: flex;
             flex: 0 0 auto;
             justify-content: space-between;
-            border-bottom: 1px solid gray('400');
-            box-shadow: 0 0 2px gray('400');
+            border-bottom: 1px solid map-get($grays, '400');
+            box-shadow: 0 0 2px map-get($grays, '400');
             .o_filter_button, .o_new_message {
                 padding: 5px;
             }
@@ -95,7 +95,7 @@
             bottom: 0;
             left: 0;
             right: 0;
-            width: map-get($sizes, 100);
+            width: 100%;
             margin: 0;
             max-height: none;
 
@@ -106,7 +106,7 @@
                 padding: 5px;
                 height: 44px;
                 border-bottom: 1px solid #ebebeb;
-                box-shadow: 0 0 2px gray('400');
+                box-shadow: 0 0 2px map-get($grays, '400');
             }
             .o_mail_systray_dropdown_items {
                 max-height: none;
diff --git a/addons/mail/static/src/scss/thread.scss b/addons/mail/static/src/scss/thread.scss
index f70d50875ed..6973d93c275 100644
--- a/addons/mail/static/src/scss/thread.scss
+++ b/addons/mail/static/src/scss/thread.scss
@@ -7,7 +7,7 @@
             margin-top: 0px;
             margin-bottom: 15px;
         }
-        border-bottom: 1px solid gray('400');
+        border-bottom: 1px solid map-get($grays, '400');
         text-align: center;
 
         .o_thread_date {
@@ -146,7 +146,8 @@
 
         &.o_neutral_face_icon:before {
             @extend %o-nocontent-init-image;
-            @include size(120px, 140px);
+            width: 120px;
+            height: 140px;
             background: transparent url(/web/static/img/neutral_face.svg) no-repeat center;
         }
     }
diff --git a/addons/mail/static/src/widgets/attachment_viewer/attachment_viewer.scss b/addons/mail/static/src/widgets/attachment_viewer/attachment_viewer.scss
index bd4e9308a90..8f1e7ad64aa 100644
--- a/addons/mail/static/src/widgets/attachment_viewer/attachment_viewer.scss
+++ b/addons/mail/static/src/widgets/attachment_viewer/attachment_viewer.scss
@@ -12,7 +12,7 @@
         flex: 1 0 auto;
         overflow: hidden;
         width: $o-chatter-min-width;
-        border-left: 1px solid gray('400');
+        border-left: 1px solid map-get($grays, '400');
 
         > .o_attachment_preview_container {
             position: relative;
diff --git a/addons/mail/static/src/widgets/attachment_viewer/attachment_viewer.xml b/addons/mail/static/src/widgets/attachment_viewer/attachment_viewer.xml
index f93377cd54f..fd017ca00a8 100644
--- a/addons/mail/static/src/widgets/attachment_viewer/attachment_viewer.xml
+++ b/addons/mail/static/src/widgets/attachment_viewer/attachment_viewer.xml
@@ -4,7 +4,7 @@
     <t t-name="mail.widgets.AttachmentViewer">
         <t t-if="thread.mainAttachment">
             <t t-if="!thread.mainAttachment.isPdf">
-                <h3 class="mt0 mb8 pl-2 text-muted float-end"><t t-esc="thread.mainAttachment.filename"/></h3>
+                <h3 class="mt0 mb8 ps-2 text-muted float-end"><t t-esc="thread.mainAttachment.filename"/></h3>
             </t>
             <div t-if="thread.mainAttachment.isImage" class="o_attachment_preview_img">
                 <img id="attachment_img" class="img img-fluid d-block" t-attf-src="/web/image/#{thread.mainAttachment.id}?unique=1"/>
diff --git a/addons/mail/static/src/xml/activity_view.xml b/addons/mail/static/src/xml/activity_view.xml
index 54b59bd3a68..c3622fb6408 100644
--- a/addons/mail/static/src/xml/activity_view.xml
+++ b/addons/mail/static/src/xml/activity_view.xml
@@ -11,7 +11,7 @@
                 <div>
                     <span t-esc="type[1]"/>
                     <span t-if="type[2].length > 0" class="dropdown float-end">
-                        <i class="fa fa-ellipsis-v fa-fw" data-toggle="dropdown"/>
+                        <i class="fa fa-ellipsis-v fa-fw" data-bs-toggle="dropdown"/>
                         <div class="dropdown-menu">
                             <t t-foreach="type[2]" t-as="template" t-key="template.id">
                                 <div title="This action will send an email."
@@ -76,7 +76,7 @@
     <tfoot>
         <tr class="o_data_row">
             <td class="o_record_selector p-3" t-on-click.prevent.stop="() => this.trigger('schedule_activity')">
-                <span class="fa fa-plus pr-2"/><span>Schedule activity</span>
+                <span class="fa fa-plus pe-2"/><span>Schedule activity</span>
             </td>
         </tr>
     </tfoot>
diff --git a/addons/mail/static/src/xml/composer.xml b/addons/mail/static/src/xml/composer.xml
index 3fd0b28bd5f..80111a742ab 100644
--- a/addons/mail/static/src/xml/composer.xml
+++ b/addons/mail/static/src/xml/composer.xml
@@ -11,7 +11,7 @@
 
     <t t-name="FieldMany2ManyTagsEmail" t-extend="FieldMany2ManyTag">
         <t t-jquery="[t-attf-class*=badge]" t-operation="replace">
-            <div t-attf-class="badge badge-pill dropdown o_tag_color_0 #{el.email.indexOf('@') &lt; 0 ? 'o_tag_error' : ''}" t-att-data-color="color" t-att-data-index="el_index" t-att-data-id="el.id" t-attf-title="Tag color: #{colornames[color]}">
+            <div t-attf-class="badge rounded-pill dropdown o_tag_color_0 #{el.email.indexOf('@') &lt; 0 ? 'o_tag_error' : ''}" t-att-data-color="color" t-att-data-index="el_index" t-att-data-id="el.id" t-attf-title="Tag color: #{colornames[color]}">
                 <span class="o_badge_text" t-att-title="el.email"><t t-esc="el.display_name"/></span>
                 <a t-if="!readonly" href="#" class="fa fa-times o_delete" title="Delete" aria-label="Delete"/>
             </div>
diff --git a/addons/mail/static/src/xml/systray.xml b/addons/mail/static/src/xml/systray.xml
index b5abdb0f092..c1b8188095d 100644
--- a/addons/mail/static/src/xml/systray.xml
+++ b/addons/mail/static/src/xml/systray.xml
@@ -40,8 +40,8 @@
                         <span t-if="!activity.overdue_count" class="o_no_activity mr16">0 Late </span>
                         <button t-if="activity.today_count" type="button" class="btn btn-link o_activity_filter_button mr16" t-att-data-res_model="activity.model" t-att-data-model_name="activity.name" data-filter='today'> <t t-esc="activity.today_count"/> Today </button>
                         <span t-if="!activity.today_count" class="o_no_activity mr16">0 Today </span>
-                        <button t-if="activity.planned_count" type="button" class="btn btn-link o_activity_filter_button float-right" t-att-data-res_model="activity.model" t-att-data-model_name="activity.name" data-filter='upcoming_all'> <t t-esc="activity.planned_count"/> Future </button>
-                        <span t-if="!activity.planned_count" class="o_no_activity float-right">0 Future</span>
+                        <button t-if="activity.planned_count" type="button" class="btn btn-link o_activity_filter_button float-end" t-att-data-res_model="activity.model" t-att-data-model_name="activity.name" data-filter='upcoming_all'> <t t-esc="activity.planned_count"/> Future </button>
+                        <span t-if="!activity.planned_count" class="o_no_activity float-end">0 Future</span>
                     </div>
                 </div>
             </div>
diff --git a/addons/mail/static/src/xml/text_emojis.xml b/addons/mail/static/src/xml/text_emojis.xml
index 4f333ba941f..882aca9fbb8 100644
--- a/addons/mail/static/src/xml/text_emojis.xml
+++ b/addons/mail/static/src/xml/text_emojis.xml
@@ -3,13 +3,13 @@
     <div t-name="mail.EmojisDropdown" class="o_mail_emojis_dropdown o_mail_add_emoji dropdown position-relative">
         <button class="btn btn-block dropdown-toggle px-3 py-1"
             type="button"
-            data-toggle="dropdown"
+            data-bs-toggle="dropdown"
             aria-haspopup="true"
             aria-expanded="false"
             title="Add an emoji">
             <i class="fa fa-smile-o"/>
         </button>
-        <div class="dropdown-menu dropdown-menu-right border-0 p-2" style="width: 406px">
+        <div class="dropdown-menu dropdown-menu-end border-0 p-2" style="width: 406px">
             <t t-call="mail.legacy.Composer.emojis">
                 <t t-set="emojis" t-value="widget.emojis"></t>
             </t>
diff --git a/addons/mail/static/src/xml/thread.xml b/addons/mail/static/src/xml/thread.xml
index fc0a8ddeeab..b7c06a12dc9 100644
--- a/addons/mail/static/src/xml/thread.xml
+++ b/addons/mail/static/src/xml/thread.xml
@@ -17,7 +17,7 @@
                 <div class="flex-grow-1"/>
                 <a class="o_download_btn o_document_viewer_topbar_button btn" href="#" title="Download">
                     <i class="fa fa-fw fa-download" role="img" aria-label="Download"/>
-                    <span class="d-none d-md-inline ml-2">Download</span>
+                    <span class="d-none d-md-inline ms-2">Download</span>
                 </a>
                 <a role="button" href="#" class="o_close_btn o_document_viewer_topbar_button btn" title="Close">
                     <i class="fa fa-fw fa-close" role="img" aria-label="Close"/>
@@ -42,16 +42,16 @@
             </div>
             <div t-if="widget.activeAttachment.fileType == 'image'" class="o_viewer_toolbar btn-toolbar" role="toolbar">
                 <div class="btn-group" role="group">
-                    <a role="button" href="#" class="o_viewer_toolbar_btn btn o_zoom_in" data-toggle="tooltip" title="Zoom In"><i class="fa fa-fw fa-plus" role="img" aria-label="Zoom In"/></a>
-                    <a role="button" href="#" class="o_viewer_toolbar_btn btn o_zoom_reset disabled" data-toggle="tooltip" title="Reset Zoom"><i class="fa fa-fw fa-search" role="img" aria-label="Reset Zoom"/></a>
-                    <a role="button" href="#" class="o_viewer_toolbar_btn btn o_zoom_out disabled" data-toggle="tooltip" title="Zoom Out"><i class="fa fa-fw fa-minus" role="img" aria-label="Zoom Out"/></a>
+                    <a role="button" href="#" class="o_viewer_toolbar_btn btn o_zoom_in" data-bs-toggle="tooltip" title="Zoom In"><i class="fa fa-fw fa-plus" role="img" aria-label="Zoom In"/></a>
+                    <a role="button" href="#" class="o_viewer_toolbar_btn btn o_zoom_reset disabled" data-bs-toggle="tooltip" title="Reset Zoom"><i class="fa fa-fw fa-search" role="img" aria-label="Reset Zoom"/></a>
+                    <a role="button" href="#" class="o_viewer_toolbar_btn btn o_zoom_out disabled" data-bs-toggle="tooltip" title="Zoom Out"><i class="fa fa-fw fa-minus" role="img" aria-label="Zoom Out"/></a>
                 </div>
                 <div class="btn-group" role="group">
-                    <a role="button" href="#" class="o_viewer_toolbar_btn btn o_rotate" data-toggle="tooltip" title="Rotate"><i class="fa fa-fw fa-repeat" role="img" aria-label="Rotate"/></a>
+                    <a role="button" href="#" class="o_viewer_toolbar_btn btn o_rotate" data-bs-toggle="tooltip" title="Rotate"><i class="fa fa-fw fa-repeat" role="img" aria-label="Rotate"/></a>
                 </div>
                 <div class="btn-group" role="group">
-                    <a role="button" href="#" class="o_viewer_toolbar_btn btn o_print_btn" data-toggle="tooltip" title="Print"><i class="fa fa-fw fa-print" role="img" aria-label="Print"/></a>
-                    <a role="button" href="#" class="o_viewer_toolbar_btn btn o_download_btn" data-toggle="tooltip" title="Download"><i class="fa fa-fw fa-download" role="img" aria-label="Download"/></a>
+                    <a role="button" href="#" class="o_viewer_toolbar_btn btn o_print_btn" data-bs-toggle="tooltip" title="Print"><i class="fa fa-fw fa-print" role="img" aria-label="Print"/></a>
+                    <a role="button" href="#" class="o_viewer_toolbar_btn btn o_download_btn" data-bs-toggle="tooltip" title="Download"><i class="fa fa-fw fa-download" role="img" aria-label="Download"/></a>
                 </div>
             </div>
         </div>
diff --git a/addons/mail/static/src/xml/web_kanban_activity.xml b/addons/mail/static/src/xml/web_kanban_activity.xml
index cdfeee8323c..4919149c4f0 100644
--- a/addons/mail/static/src/xml/web_kanban_activity.xml
+++ b/addons/mail/static/src/xml/web_kanban_activity.xml
@@ -4,7 +4,7 @@
 <t t-name="mail.KanbanActivity">
     <div class="o_kanban_inline_block dropdown o_mail_activity">
         <!-- Dropdowns are created in JS to avoid some bugs, that's why the <a/> contains no args for the dropdown creation -->
-        <a class="dropdown-toggle o-no-caret o_activity_btn" data-boundary="viewport" data-flip="false" data-toggle="dropdown" role="button">
+        <a class="dropdown-toggle o-no-caret o_activity_btn" data-boundary="viewport" data-flip="false" data-bs-toggle="dropdown" role="button">
             <!-- span classes are generated dynamically (see _render) -->
             <span t-att-title="widget.selection[widget.activityState]" role="img" t-att-aria-label="widget.selection[widget.activity_state]"/>
        </a>
@@ -63,18 +63,18 @@
     <li t-attf-class="list-group-item o_log_activity d-flex #{log_last ? 'border-bottom' : ''}" role="menuitem">
         <div t-attf-class="o_activity_title o_log_activity #{edit_class}" t-att-data-activity-id="log.id">
             <div t-attf-class="o_activity_title_entry o_mail_activity {{ log.chaining_type === 'suggest' ? 'align-items-center' : 'mb-1'}}">
-                <span t-attf-class="fa #{log.icon ? log.icon : 'fa-bell' } fa-fw mr-2 text-center text-muted" role="img" aria-label="Log" title="Log"/>
+                <span t-attf-class="fa #{log.icon ? log.icon : 'fa-bell' } fa-fw me-2 text-center text-muted" role="img" aria-label="Log" title="Log"/>
                 <strong class="text-dark o_activity_summary"><t t-esc="log.title_action or log.summary or log.activity_type_id[1]"/></strong>
                 <button t-if="log.chaining_type === 'suggest' and log.can_write" class="btn btn-sm btn-link py-0 o_edit_button"><i class="fa fa-pencil"/></button>
             </div>
             <div class="o_activity_title_entry mt-1" t-if="log.state != 'today'">
-                <span class="fa fa-clock-o fa-fw mr-2 text-center text-muted" role="img" aria-label="Deadline" title="Deadline"/>
-                <small t-if="log.user_id[0] !== session.uid and log.mail_template_ids" class="mr-1"><t t-esc="log.user_id[1]"/> -</small>
+                <span class="fa fa-clock-o fa-fw me-2 text-center text-muted" role="img" aria-label="Deadline" title="Deadline"/>
+                <small t-if="log.user_id[0] !== session.uid and log.mail_template_ids" class="me-1"><t t-esc="log.user_id[1]"/> -</small>
                 <small t-att-title="log.date_deadline"><t t-esc="log.label_delay" /></small>
             </div>
             <t t-if="log.mail_template_ids">
                 <div t-foreach="log.mail_template_ids" t-as="mail_template" class="o_activity_title_entry mt-2" t-att-data-activity-id="log.id" t-att-data-chaining-type-activity="log.chaining_type" t-att-data-previous-activity-type-id="log.activity_type_id[0]">
-                    <i class="fa fa-envelope-o fa-fw mr-2 text-center text-muted" aria-label="Mail" title="Mail" role="img"></i>
+                    <i class="fa fa-envelope-o fa-fw me-2 text-center text-muted" aria-label="Mail" title="Mail" role="img"></i>
                     <small>
                         <div class="mb-1" t-esc="mail_template.name + ':'"/>
                         <a class="o_activity_template_preview" t-att-data-template-id="mail_template.id" href="#"><b>Preview</b></a>
@@ -84,7 +84,7 @@
                 </div>
             </t>
         </div>
-        <div t-if="log.can_write" class="flex-grow-1 text-right">
+        <div t-if="log.can_write" class="flex-grow-1 text-end">
             <t t-if="log.activity_category === 'upload_file'">
                 <a  t-att-data-chaining-type-activity="log.chaining_type"
                     t-att-data-previous-activity-type-id="log.activity_type_id[0]"
@@ -106,7 +106,7 @@
                     t-att-data-activity-id="log.id"
                     t-attf-href="#o_mark_done_form{{log.id}}"
                     class="o_mark_as_done o_activity_link o_activity_link_kanban fa fa-check-circle"
-                    data-toggle="collapse" title="Mark as done" role="img" aria-label="Mark as done"/>
+                    data-bs-toggle="collapse" title="Mark as done" role="img" aria-label="Mark as done"/>
             </t>
         </div>
     </li>
diff --git a/addons/mail/views/mail_activity_views.xml b/addons/mail/views/mail_activity_views.xml
index 6ed716a45d5..260222265fa 100644
--- a/addons/mail/views/mail_activity_views.xml
+++ b/addons/mail/views/mail_activity_views.xml
@@ -37,14 +37,14 @@
                             <label for="delay_count"/>
                             <div>
                                 <div class="o_row">
-                                    <field class="col-1 pl-0 pr-0" name="delay_count"/>
-                                    <field class="col-3 pl-1 pr-1" name="delay_unit"/>
+                                    <field class="col-1 ps-0 pe-0" name="delay_count"/>
+                                    <field class="col-3 ps-1 pe-1" name="delay_unit"/>
                                     <field name="delay_from"/>
                                 </div>
                             </div>
                         </group>
                     </group>
-                    <label for="default_note" class="font-weight-bold"/>
+                    <label for="default_note" class="fw-bold"/>
                     <field nolabel="1" name="default_note" placeholder="e.g. &quot;Go over the offer and discuss details&quot;" class="oe-bordered-editor"/>
                     <p class="alert alert-info" role="alert" attrs="{'invisible': [('res_model_change', '=', False)]}">Modifying the model can have an impact on existing activities using this activity type, be careful.</p>
                 </sheet>
@@ -71,7 +71,7 @@
                 <field name="sequence" widget="handle"/>
                 <field name="name"/>
                 <field name="summary"/>
-                <field name="delay_label" string="Planned in" class="text-right"/>
+                <field name="delay_label" string="Planned in" class="text-end"/>
                 <field name="delay_from" string="Type"/>
                 <field name="res_model" groups="base.group_no_one"/>
                 <field name="icon" groups="base.group_no_one"/>
diff --git a/addons/mail/views/mail_channel_views.xml b/addons/mail/views/mail_channel_views.xml
index 3d6adcd7239..4c7e0fe4a98 100644
--- a/addons/mail/views/mail_channel_views.xml
+++ b/addons/mail/views/mail_channel_views.xml
@@ -27,8 +27,8 @@
                                     <p class="oe_module_name">
                                         <field name="description"/>
                                     </p>
-                                    <button type="object" attrs="{'invisible':['|', ('is_member','=',True), ('group_ids', '!=', [])]}" class="btn btn-primary float-right" name="channel_join">Join</button>
-                                    <button type="object" attrs="{'invisible':['|', ('is_member','=',False), ('group_ids', '!=', [])]}" class="btn btn-secondary float-right" name="action_unfollow">Leave</button>
+                                    <button type="object" attrs="{'invisible':['|', ('is_member','=',True), ('group_ids', '!=', [])]}" class="btn btn-primary float-end" name="channel_join">Join</button>
+                                    <button type="object" attrs="{'invisible':['|', ('is_member','=',False), ('group_ids', '!=', [])]}" class="btn btn-secondary float-end" name="action_unfollow">Leave</button>
                                 </div>
                             </div>
                         </t>
diff --git a/addons/mail/views/mail_message_views.xml b/addons/mail/views/mail_message_views.xml
index 1ffcf4ae716..a16bb20838e 100644
--- a/addons/mail/views/mail_message_views.xml
+++ b/addons/mail/views/mail_message_views.xml
@@ -145,7 +145,7 @@
                                 <div class="row">
                                     <div class="offset-10">
                                         <div class="o_dropdown_kanban dropdown" groups="base.group_user">
-                                            <a role="button" class="dropdown-toggle o-no-caret btn" data-toggle="dropdown" href="#" aria-label="Dropdown menu" title="Dropdown menu">
+                                            <a role="button" class="dropdown-toggle o-no-caret btn" data-bs-toggle="dropdown" href="#" aria-label="Dropdown menu" title="Dropdown menu">
                                                 <span class="fa fa-ellipsis-v"/>
                                             </a>
                                             <div class="dropdown-menu" role="menu">
diff --git a/addons/mail/wizard/mail_compose_message_views.xml b/addons/mail/wizard/mail_compose_message_views.xml
index df4bfeb69ce..78101c84546 100644
--- a/addons/mail/wizard/mail_compose_message_views.xml
+++ b/addons/mail/wizard/mail_compose_message_views.xml
@@ -69,7 +69,7 @@
                         <button icon="fa-lg fa-save" type="object"
                                 name="action_save_as_template" string="Save as new template"
                                 attrs="{'invisible': [('can_edit_body', '=', False)]}"
-                                class="float-right btn-secondary" help="Save as a new template" data-hotkey="w"/>
+                                class="float-end btn-secondary" help="Save as a new template" data-hotkey="w"/>
                     </footer>
                 </form>
             </field>
diff --git a/addons/mail/wizard/mail_template_preview_views.xml b/addons/mail/wizard/mail_template_preview_views.xml
index 8f9d9b1cae9..581583e792f 100644
--- a/addons/mail/wizard/mail_template_preview_views.xml
+++ b/addons/mail/wizard/mail_template_preview_views.xml
@@ -13,8 +13,8 @@
                     <field name="no_record" invisible="1"/>
                     <div class="container">
                         <div class="row">
-                            <span class="col-md-5 col-lg-4 col-sm-12 pl-0">Choose an example <field name="model_id" readonly="1"/> record:</span>
-                            <div class="col-md-7 col-lg-6 col-sm-12 pl-0">
+                            <span class="col-md-5 col-lg-4 col-sm-12 ps-0">Choose an example <field name="model_id" readonly="1"/> record:</span>
+                            <div class="col-md-7 col-lg-6 col-sm-12 ps-0">
                                 <field name="resource_ref" readonly="False"
                                     options="{'hide_model': True, 'no_create': True, 'no_open': True}"
                                     attrs="{'invisible': [('no_record', '=', True)]}"/>
@@ -22,8 +22,8 @@
                             </div>
                         </div>
                         <div class="row">
-                            <span class="col-md-5 col-lg-4 col-sm-12 pl-0">Force a language: </span>
-                            <div class="col-md-7 col-lg-6 col-sm-12 pl-0">
+                            <span class="col-md-5 col-lg-4 col-sm-12 ps-0">Force a language: </span>
+                            <div class="col-md-7 col-lg-6 col-sm-12 ps-0">
                                 <field name="lang"/>
                             </div>
                         </div>
diff --git a/addons/mail_group/static/src/js/mail_group.js b/addons/mail_group/static/src/js/mail_group.js
index 5a6a589aa35..e1774c0ea34 100644
--- a/addons/mail_group/static/src/js/mail_group.js
+++ b/addons/mail_group/static/src/js/mail_group.js
@@ -36,11 +36,11 @@ publicWidget.registry.MailGroup = publicWidget.Widget.extend({
         const email = $email.val();
 
         if (!email.match(/.+@.+/)) {
-            this.$target.addClass('o_has_error').find('.form-control, .custom-select').addClass('is-invalid');
+            this.$target.addClass('o_has_error').find('.form-control, .form-select').addClass('is-invalid');
             return false;
         }
 
-        this.$target.removeClass('o_has_error').find('.form-control, .custom-select').removeClass('is-invalid');
+        this.$target.removeClass('o_has_error').find('.form-control, .form-select').removeClass('is-invalid');
 
         const action = (this.isMember || this.forceUnsubscribe) ? 'unsubscribe' : 'subscribe';
 
diff --git a/addons/mail_group/static/src/js/mail_group_message.js b/addons/mail_group/static/src/js/mail_group_message.js
index cd774db915b..47d2e90df4e 100644
--- a/addons/mail_group/static/src/js/mail_group_message.js
+++ b/addons/mail_group/static/src/js/mail_group_message.js
@@ -19,7 +19,7 @@ publicWidget.registry.MailGroupMessage = publicWidget.Widget.extend({
         // And add a button "Read more" to show the mention of the parent email
         const body = this.$el.find('.card-body').first();
         const quoted = body.find('*[data-o-mail-quote]');
-        const readMore = $('<button class="btn btn-light btn-sm ml-1"/>').text('. . .');
+        const readMore = $('<button class="btn btn-light btn-sm ms-1"/>').text('. . .');
         quoted.first().before(readMore);
         readMore.on('click', () => {
             quoted.toggleClass('visible');
diff --git a/addons/mail_group/views/mail_group_message_views.xml b/addons/mail_group/views/mail_group_message_views.xml
index 65b5dda2dbe..bb58a8530f2 100644
--- a/addons/mail_group/views/mail_group_message_views.xml
+++ b/addons/mail_group/views/mail_group_message_views.xml
@@ -76,8 +76,8 @@
                         <label for="email_from" string="From"/>
                         <div>
                             <field name="email_from" nolabel="1"/>
-                            <span class="oe_read_only ml-2 badge badge-success" attrs="{'invisible': [('author_moderation', '!=', 'allow')]}">Whitelisted</span>
-                            <span class="oe_read_only ml-2 badge badge-danger" attrs="{'invisible': [('author_moderation', '!=', 'ban')]}">Banned</span>
+                            <span class="oe_read_only ms-2 badge text-bg-success" attrs="{'invisible': [('author_moderation', '!=', 'allow')]}">Whitelisted</span>
+                            <span class="oe_read_only ms-2 badge text-bg-danger" attrs="{'invisible': [('author_moderation', '!=', 'ban')]}">Banned</span>
                             <field name="author_moderation" invisible="1"/>
                         </div>
                         <field name="mail_group_id"/>
diff --git a/addons/mail_group/views/mail_group_views.xml b/addons/mail_group/views/mail_group_views.xml
index 5458e8402e9..e0eb8486f4a 100644
--- a/addons/mail_group/views/mail_group_views.xml
+++ b/addons/mail_group/views/mail_group_views.xml
@@ -39,8 +39,8 @@
                                     <t t-else="">Member</t>
                                 </span>
                                 <field name="is_member" invisible="1"/>
-                                <button type="object" attrs="{'invisible':[('is_member', '=', True)]}" class="btn btn-primary float-right" name="action_join">Join</button>
-                                <button type="object" attrs="{'invisible':[('is_member', '=', False)]}" class="btn btn-secondary float-right" name="action_leave">Leave</button>
+                                <button type="object" attrs="{'invisible':[('is_member', '=', True)]}" class="btn btn-primary float-end" name="action_join">Join</button>
+                                <button type="object" attrs="{'invisible':[('is_member', '=', False)]}" class="btn btn-secondary float-end" name="action_leave">Leave</button>
                             </div>
                         </div>
                     </t>
diff --git a/addons/mail_group/views/portal_templates.xml b/addons/mail_group/views/portal_templates.xml
index 2a77dbd3a8f..93fdea262f8 100644
--- a/addons/mail_group/views/portal_templates.xml
+++ b/addons/mail_group/views/portal_templates.xml
@@ -20,19 +20,19 @@
             </div>
             <div t-if="mail_groups" class="container mt32">
                 <div t-if="'unsubscribe' in request.params" class="offset-lg-9 col-lg-3 alert alert-info" role="status">
-                    <h5>Need to unsubscribe? <br/>It's right here! <span class="fa fa-2x fa-arrow-down float-right" role="img" aria-label="" title="Read this !"/></h5>
+                    <h5>Need to unsubscribe? <br/>It's right here! <span class="fa fa-2x fa-arrow-down float-end" role="img" aria-label="" title="Read this !"/></h5>
                 </div>
                 <div class="row mb-4" t-foreach="mail_groups" t-as="group_data">
                     <t t-set="group" t-value="group_data['group']"/>
                     <t t-set="is_member" t-value="group_data['is_member']"/>
                     <div class="col-lg-5">
-                        <img t-if="group.image_128" t-attf-src="/web/image/mail.group/#{group.id}/image_128" class="o_image_64_cover float-left mr-3" alt="Group"/>
-                        <div t-else="" class="o_image_64_cover float-left mr-3 d-lg-block d-md-none"/>
+                        <img t-if="group.image_128" t-attf-src="/web/image/mail.group/#{group.id}/image_128" class="o_image_64_cover float-start me-3" alt="Group"/>
+                        <div t-else="" class="o_image_64_cover float-start me-3 d-lg-block d-md-none"/>
                         <div class="d-flex flex-row">
                             <strong><a t-attf-href="/groups/#{ slug(group) }" t-esc="group.name"/></strong>
                             <div t-if="group.alias_id and group.alias_id.alias_name and group.alias_id.alias_domain"
-                                class="d-flex align-items-center ml-3">
-                                <i class="fa fa-envelope-o mr-1" role="img" aria-label="Alias" title="Alias"/>
+                                class="d-flex align-items-center ms-3">
+                                <i class="fa fa-envelope-o me-1" role="img" aria-label="Alias" title="Alias"/>
                                 <a class="text-break" t-attf-href="mailto:#{group.alias_id.alias_name}@#{group.alias_id.alias_domain}" t-field="group.alias_id"/>
                             </div>
                         </div>
@@ -113,7 +113,7 @@
                                     <i class="fa fa-arrow-left" role="img" aria-label="Previous message" title="Previous message"/> <t t-esc="prev_message.subject"/>
                                 </a>
                             </h4>
-                            <h4 t-if="next_message" t-attf-class="{{'col-lg-6' if prev_message else ''}} text-right">
+                            <h4 t-if="next_message" t-attf-class="{{'col-lg-6' if prev_message else ''}} text-end">
                                 <a t-attf-href="/groups/#{slug(group)}/#{slug(next_message)}?#{mode and 'mode=%s' % mode or ''}">
                                     <t t-esc="next_message.subject"/> <i class="fa fa-arrow-right" role="img" aria-label="Next message" title="Next message"/>
                                 </a>
@@ -124,7 +124,7 @@
                                 <div class="card">
                                     <div class="card-body">
                                         <h4 class="card-title d-flex flex-row justify-content-start align-items-center">
-                                            <img t-if="message.author_id.active and message.author_id.image_128" t-att-src="image_data_uri(message.author_id.image_128)" class="rounded o_image_40_cover mr-2"/>
+                                            <img t-if="message.author_id.active and message.author_id.image_128" t-att-src="image_data_uri(message.author_id.image_128)" class="rounded o_image_40_cover me-2"/>
                                             <span t-esc="message.subject"/>
                                         </h4>
                                         <div class="card-text overflow-hidden" t-field="message.body"/>
@@ -164,7 +164,7 @@
                             <div class="o_mg_ribbon" t-if="message.moderation_status == 'pending_moderation'"><span class="bg-warning">Pending</span></div>
                             <div class="card-body">
                                 <h5 class="card-title d-flex flex-row justify-content-start align-items-center">
-                                    <img t-if="message.author_id.active and message.author_id.image_128" t-att-src="image_data_uri(message.author_id.image_128)" class="rounded o_image_40_cover mr-2"/>
+                                    <img t-if="message.author_id.active and message.author_id.image_128" t-att-src="image_data_uri(message.author_id.image_128)" class="rounded o_image_40_cover me-2"/>
                                     <a t-attf-href="/groups/#{slug(group)}/#{slug(message)}?mode=#{mode}&amp;date_begin=#{date_begin}&amp;date_end=#{date_end}" t-esc="message.subject"/>
                                 </h5>
                                 <div class="card-text overflow-hidden" t-field="message.body"/>
@@ -182,7 +182,7 @@
                                     <i class="fa fa-chevron-down" role="img" aria-label="Show replies" title="Show replies"/> <t t-esc="len(group_message_child_ids)"/> replies
                                 </a>
                             </p>
-                            <div class="o_mg_link_content o_mg_replies ml-5 d-none">
+                            <div class="o_mg_link_content o_mg_replies ms-5 d-none">
                                 <t t-call="mail_group.messages_short">
                                     <t t-set="messages" t-value="group_message_child_ids[:replies_per_page]"/>
                                     <t t-set="msg_more_count" t-value="len(group_message_child_ids) - replies_per_page"/>
@@ -255,7 +255,7 @@
             <li class="nav-item">
                 <a t-attf-href="/groups/#{ slug(group) }?mode=thread" t-attf-class="d-flex align-items-center justify-content-between nav-link#{mode=='thread' and ' active' or ''}">
                     <span>By thread</span>
-                    <span class="float-right badge badge-pill" t-if="archives['threads_count']" t-esc="archives['threads_count']"/>
+                    <span class="float-end badge rounded-pill" t-if="archives['threads_count']" t-esc="archives['threads_count']"/>
                 </a>
             </li>
             <li class="nav-item">
@@ -266,7 +266,7 @@
                         <a t-ignore="True" t-attf-href="/groups/#{ slug(group) }?mode=date&amp;date_begin=#{ month_archive['date_begin'] }&amp;date_end=#{month_archive['date_end']}"
                             t-attf-class="d-flex align-items-center justify-content-between nav-link#{month_archive['date_begin'] == date_begin and ' active' or ''}">
                             <t t-esc="month_archive['date']"/>
-                            <span class="float-right badge badge-pill" t-esc="month_archive['messages_count']"/>
+                            <span class="float-end badge rounded-pill" t-esc="month_archive['messages_count']"/>
                         </a>
                     </li>
                     </t>
diff --git a/addons/maintenance/views/maintenance_views.xml b/addons/maintenance/views/maintenance_views.xml
index 629ebfbabc9..2dfd66df824 100644
--- a/addons/maintenance/views/maintenance_views.xml
+++ b/addons/maintenance/views/maintenance_views.xml
@@ -62,7 +62,7 @@
                 </header>
                 <sheet>
                     <div attrs="{'invisible': [('archive', '=', False)]}">
-                        <span class="badge badge-warning float-right">Canceled</span>
+                        <span class="badge text-bg-warning float-end">Canceled</span>
                     </div>
                     <div class="oe_right">
                         <field name="kanban_state" class="oe_inline" widget="state_selection"/>
@@ -139,7 +139,7 @@
                         <div t-attf-class="{{!selection_mode ? 'oe_kanban_color_' + kanban_getcolor(record.color.raw_value) : ''}} oe_kanban_card oe_kanban_global_click oe_semantic_html_override">
                             <div class="o_dropdown_kanban dropdown">
 
-                                <a role="button" class="dropdown-toggle o-no-caret btn" data-toggle="dropdown" data-display="static" href="#" aria-label="Dropdown menu" title="Dropdown menu">
+                                <a role="button" class="dropdown-toggle o-no-caret btn" data-bs-toggle="dropdown" data-bs-display="static" href="#" aria-label="Dropdown menu" title="Dropdown menu">
                                     <span class="fa fa-ellipsis-v"/>
                                 </a>
                                 <div class="dropdown-menu" role="menu">
@@ -438,7 +438,7 @@
                         <div t-attf-class="{{!selection_mode ? 'oe_kanban_color_' + kanban_getcolor(record.color.raw_value) : ''}} oe_kanban_card oe_kanban_global_click">
                             <div class="o_dropdown_kanban dropdown" t-if="!selection_mode">
 
-                                <a role="button" class="dropdown-toggle o-no-caret btn" data-toggle="dropdown" data-display="static" href="#" aria-label="Dropdown menu" title="Dropdown menu">
+                                <a role="button" class="dropdown-toggle o-no-caret btn" data-bs-toggle="dropdown" data-bs-display="static" href="#" aria-label="Dropdown menu" title="Dropdown menu">
                                     <span class="fa fa-ellipsis-v"/>
                                 </a>
                                 <div class="dropdown-menu" role="menu">
@@ -458,10 +458,10 @@
                                 </div>
                                 <div class="o_kanban_record_bottom">
                                     <div class="oe_kanban_bottom_left">
-                                        <div class="badge badge-danger" t-if="!selection_mode and record.maintenance_open_count.raw_value" >
+                                        <div class="badge text-bg-danger" t-if="!selection_mode and record.maintenance_open_count.raw_value" >
                                             <t t-out="record.maintenance_open_count.raw_value"/> Request
                                         </div>
-                                        <div class="badge badge-secondary" t-if="!selection_mode and record.next_action_date.raw_value" >
+                                        <div class="badge text-bg-secondary" t-if="!selection_mode and record.next_action_date.raw_value" >
                                             <t t-esc="luxon.DateTime.fromJSDate(record.next_action_date.raw_value).toFormat('d MMMM')"/>
                                         </div>
                                     </div>
@@ -666,12 +666,12 @@
                             </div>
                             <div class="row mt4">
                                 <div class="col-6">
-                                    <span class="badge badge-pill">
+                                    <span class="badge rounded-pill">
                                         <strong>Equipments:</strong> <field name="equipment_count"/>
                                     </span>
                                 </div>
-                                <div class="col-6 text-right">
-                                    <span class="badge badge-pill">
+                                <div class="col-6 text-end">
+                                    <span class="badge rounded-pill">
                                         <strong>Maintenance:</strong> <field name="maintenance_count"/>
                                     </span>
                                     <field name="technician_user_id" widget="many2one_avatar_user"/>
diff --git a/addons/mass_mailing/data/mass_mailing_demo.xml b/addons/mass_mailing/data/mass_mailing_demo.xml
index 0cfbc58ab37..3cd4458008c 100644
--- a/addons/mass_mailing/data/mass_mailing_demo.xml
+++ b/addons/mass_mailing/data/mass_mailing_demo.xml
@@ -133,9 +133,9 @@
                         <div align="center" class="o_mail_table_styles container o_mail_full_width_padding" style="border-style:solid none none none;padding:20px 0 20px 0;border-top-color:rgb(245, 245, 245);border-top-width:2px;width:100%;border-collapse:separate;">
                             <div class="row">
                                 <div class="col o_mail_footer_links o_default_snippet_text" style="padding:10px 0 10px 0;text-align:center;vertical-align:middle;">
-                                    <a href="/unsubscribe_from_list" class="btn btn-link o_default_snippet_text" style="text-decoration:none;border-radius:0.25rem;border-style:solid;padding:0px;cursor:pointer;line-height:1.5;font-size:12px;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;border-top-color:transparent;border-left-width:1px;border-bottom-width:1px;border-right-width:1px;border-top-width:1px;user-select:none;vertical-align:middle;white-space:nowrap;text-align:center;font-weight:bold;display:inline-block;background-color:transparent;color:rgb(100, 89, 116);">Unsubscribe</a> |
+                                    <a href="/unsubscribe_from_list" class="btn btn-link o_default_snippet_text" style="text-decoration:none;border-radius:0.25rem;border-style:solid;padding:0px;cursor:pointer;line-height:1.5;font-size:12px;border-start-color:transparent;border-bottom-color:transparent;border-end-color:transparent;border-top-color:transparent;border-start-width:1px;border-bottom-width:1px;border-end-width:1px;border-top-width:1px;user-select:none;vertical-align:middle;white-space:nowrap;text-align:center;font-weight:bold;display:inline-block;background-color:transparent;color:rgb(100, 89, 116);">Unsubscribe</a> |
 
-                                    <a href="/contactus" class="btn btn-link o_default_snippet_text" style="text-decoration:none;border-radius:0.25rem;border-style:solid;padding:0px;cursor:pointer;line-height:1.5;font-size:12px;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;border-top-color:transparent;border-left-width:1px;border-bottom-width:1px;border-right-width:1px;border-top-width:1px;user-select:none;vertical-align:middle;white-space:nowrap;text-align:center;font-weight:bold;display:inline-block;background-color:transparent;color:rgb(100, 89, 116);">Contact</a>
+                                    <a href="/contactus" class="btn btn-link o_default_snippet_text" style="text-decoration:none;border-radius:0.25rem;border-style:solid;padding:0px;cursor:pointer;line-height:1.5;font-size:12px;border-start-color:transparent;border-bottom-color:transparent;border-end-color:transparent;border-top-color:transparent;border-start-width:1px;border-bottom-width:1px;border-end-width:1px;border-top-width:1px;user-select:none;vertical-align:middle;white-space:nowrap;text-align:center;font-weight:bold;display:inline-block;background-color:transparent;color:rgb(100, 89, 116);">Contact</a>
                                 </div>
                             </div>
                             <div class="row">
diff --git a/addons/mass_mailing/static/src/scss/themes/theme_default.scss b/addons/mass_mailing/static/src/scss/themes/theme_default.scss
index 34700e20d7a..d73b9a832bc 100644
--- a/addons/mass_mailing/static/src/scss/themes/theme_default.scss
+++ b/addons/mass_mailing/static/src/scss/themes/theme_default.scss
@@ -116,11 +116,13 @@ div.col:not([align]) {
             vertical-align: middle;
             text-align: center;
             // fa-1x is not ouput
-            @include size($size);
+            width: $size;
+            height: $size;
             line-height: $size;
             @for $i from 2 through 5 {
                 &.fa-#{$i}x {
-                    @include size($size + $i);
+                    width: $size + $i;
+                    height: $size + $i;
                     line-height: $size + $i;
                 }
             }
diff --git a/addons/mass_mailing/static/src/snippets/s_rating/000.scss b/addons/mass_mailing/static/src/snippets/s_rating/000.scss
index 968ee7d3f15..a3ae05d7983 100644
--- a/addons/mass_mailing/static/src/snippets/s_rating/000.scss
+++ b/addons/mass_mailing/static/src/snippets/s_rating/000.scss
@@ -37,7 +37,7 @@
                 @include transition($progress-bar-transition);
                 @include gradient-striped();
                 background-size: $progress-height $progress-height;
-                background-color: theme-color('primary');
+                background-color: map-get($theme-colors, 'primary');
                 animation: progress-bar-stripes $progress-bar-animation-timing;
             }
         }
diff --git a/addons/mass_mailing/static/src/snippets/s_showcase/options.js b/addons/mass_mailing/static/src/snippets/s_showcase/options.js
index 24fe62da8bf..fb0b50af762 100644
--- a/addons/mass_mailing/static/src/snippets/s_showcase/options.js
+++ b/addons/mass_mailing/static/src/snippets/s_showcase/options.js
@@ -12,8 +12,8 @@ options.registry.Showcase = options.Class.extend({
         const isLeftCol = $showcaseCol.index() <= 0;
         const $title = this.$target.children('.s_showcase_title');
         $title.toggleClass('flex-lg-row-reverse', isLeftCol);
-        $showcaseCol.find('.s_showcase_icon.ml-3').removeClass('ml-3').addClass('ml-lg-3'); // For compatibility with old version
-        $title.find('.s_showcase_icon').toggleClass('mr-lg-0 ml-lg-3', isLeftCol);
+        $showcaseCol.find('.s_showcase_icon.ms-3').removeClass('ms-3').addClass('ms-lg-3'); // For compatibility with old version
+        $title.find('.s_showcase_icon').toggleClass('me-lg-0 ms-lg-3', isLeftCol);
     },
 });
 });
diff --git a/addons/mass_mailing/static/src/xml/mailing_filter_widget.xml b/addons/mass_mailing/static/src/xml/mailing_filter_widget.xml
index 916843a8920..4ab39783774 100644
--- a/addons/mass_mailing/static/src/xml/mailing_filter_widget.xml
+++ b/addons/mass_mailing/static/src/xml/mailing_filter_widget.xml
@@ -5,14 +5,14 @@
         <t t-jquery="div.o_field_many2one_selection" t-operation="append">
             <div class="o_mass_mailing_filter_container">
                 <div class="o_mass_mailing_save_filter_container pt-1">
-                    <span class="o_mass_mailing_add_filter" data-toggle="dropdown" title="Add to favorite filters">
+                    <span class="o_mass_mailing_add_filter" data-bs-toggle="dropdown" title="Add to favorite filters">
                         <span class="o_mass_mailing_no_filter">Save as Favorite Filter</span>
                         <i class="fa fa-floppy-o px-3 py-1"/>
                     </span>
-                    <div class="dropdown-menu dropdown-menu-right">
-                        <span class="ml-2 text-muted">Create Favorite Filter</span><br/>
+                    <div class="dropdown-menu dropdown-menu-end">
+                        <span class="ms-2 text-muted">Create Favorite Filter</span><br/>
                         <div class="d-inline-flex">
-                            <input type="text" class="o_mass_mailing_filter_name w-auto ml-2" placeholder='e.g. "VIP Customers"'/>
+                            <input type="text" class="o_mass_mailing_filter_name w-auto ms-2" placeholder='e.g. "VIP Customers"'/>
                             <button class="btn btn-sm btn-primary o_mass_mailing_btn_save_filter mx-2">
                                 Add
                             </button>
diff --git a/addons/mass_mailing/static/src/xml/mass_mailing.xml b/addons/mass_mailing/static/src/xml/mass_mailing.xml
index 95f08235936..b22a35c1e9e 100644
--- a/addons/mass_mailing/static/src/xml/mass_mailing.xml
+++ b/addons/mass_mailing/static/src/xml/mass_mailing.xml
@@ -8,7 +8,7 @@
         </t>
     </div>
     <div t-name="mass_mailing.theme_selector_new" class="o_mail_theme_selector_new">
-        <div t-attf-class="o_mailing_template_message text-white text-left mx-4 pt-3 px-1 #{templates.length ? 'd-none': ''}">
+        <div t-attf-class="o_mailing_template_message text-white text-start mx-4 pt-3 px-1 #{templates.length ? 'd-none': ''}">
             Click on the ⭐ next to the subject to save this mailing as a <span t-esc="modelName"/> template
         </div>
         <div class="d-inline-block w-100">
@@ -16,10 +16,10 @@
                 class="o_mail_template_preview d-inline-block dropdown-item"
                 t-att-id="template.name" t-att-model-id="template.modelId">
                 <div class="d-inline-flex flex-row align-items-center text-white border px-2 py-2 w-100">
-                    <i class="fa fa-star text-warning mr-2"/>
+                    <i class="fa fa-star text-warning me-2"/>
                     <span class="text-truncate" t-esc="template.subject"/>
-                    <div class="ml-auto">
-                        <i class="o_mail_template_remove_favorite fa fa-trash pl-2 mr-1" t-att-data-id="template.id" title="Remove from Templates"/>
+                    <div class="ms-auto">
+                        <i class="o_mail_template_remove_favorite fa fa-trash ps-2 me-1" t-att-data-id="template.id" title="Remove from Templates"/>
                         <img t-if="template.userId" t-attf-src="/web/image/res.users/#{template.userId}/avatar_128" t-att-title="template.userName"/>
                     </div>
                 </div>
diff --git a/addons/mass_mailing/views/mailing_contact_views.xml b/addons/mass_mailing/views/mailing_contact_views.xml
index a8ce9c32af7..79c590940bf 100644
--- a/addons/mass_mailing/views/mailing_contact_views.xml
+++ b/addons/mass_mailing/views/mailing_contact_views.xml
@@ -77,7 +77,7 @@
                                         <t t-esc="record.name.value"/>
                                     </strong>
                                 </div>
-                                <span class="badge badge-pill" title="Number of bounced email.">
+                                <span class="badge rounded-pill" title="Number of bounced email.">
                                     <i class="fa fa-exclamation-triangle" role="img" aria-label="Warning" title="Warning"/> <t t-esc="record.message_bounce.value" title=""/>
                                 </span>
                             </div>
diff --git a/addons/mass_mailing/views/mailing_list_views.xml b/addons/mass_mailing/views/mailing_list_views.xml
index 4fa092a37d7..6438f3a2c07 100644
--- a/addons/mass_mailing/views/mailing_list_views.xml
+++ b/addons/mass_mailing/views/mailing_list_views.xml
@@ -148,7 +148,7 @@
                                     <field name="name"/>
                                 </h2>
                                 <div class="d-flex align-items-center">
-                                    <div class="mr-3">
+                                    <div class="me-3">
                                         <button class="btn btn-primary" name="action_view_contacts" type="object">
                                             <t t-esc="record.contact_count.value"/> <span>Contacts</span>
                                         </button>
@@ -156,26 +156,26 @@
                                     <div class="flex-grow-1 d-flex flex-column align-items-end o_mass_mailing_kanban_contact_links">
                                         <a name="action_view_contacts_email" type="object">
                                             <span>Valid Email Recipients</span>
-                                            <span t-esc="record.contact_count_email.value" class="ml-3"/>
+                                            <span t-esc="record.contact_count_email.value" class="ms-3"/>
                                         </a>
                                     </div>
                                 </div>
                                 <div class="flex-grow-1 d-flex align-items-end mt-4">
                                     <div class="col-12">
                                         <div class="row mt3">
-                                            <div class="col-3 border-right">
+                                            <div class="col-3 border-end">
                                                 <a name="action_view_mailings" type="object" class="d-flex flex-column align-items-center">
                                                     <span><field name="mailing_count"/></span>
                                                     <span class="text-muted">Mailings</span>
                                                 </a>
                                             </div>
-                                            <div class="col-3 border-right">
+                                            <div class="col-3 border-end">
                                                 <a name="action_view_contacts_bouncing" type="object" class="d-flex flex-column align-items-center">
                                                     <span><field name="contact_pct_bounce"/>%</span>
                                                     <span class="text-muted">Bounce</span>
                                                 </a>
                                             </div>
-                                            <div class="col-3 border-right">
+                                            <div class="col-3 border-end">
                                                 <a name="action_view_contacts_opt_out" type="object" class="d-flex flex-column align-items-center">
                                                     <span><field name="contact_pct_opt_out"/>%</span>
                                                     <span class="text-muted">Opt-out</span>
@@ -196,7 +196,7 @@
                         <div class="oe_kanban_global_click o_mailing_list_kanban_ungrouped d-flex flex-row justify-content-between align-items-center flex-wrap">
                             <div class="col-lg-3 col-sm-6 col-12 py-0 my-auto">
                                 <div class="d-flex text-large">
-                                    <span class="d-inline-block text-truncate font-weight-normal text-large"
+                                    <span class="d-inline-block text-truncate fw-normal text-large"
                                           t-att-title="record.name.value">
                                         <field name="name"/>
                                     </span>
@@ -206,22 +206,22 @@
                                 <div class="d-flex flex-row justify-content-start justify-content-md-end">
                                     <div class="my-auto p-0">
                                         <button name="action_view_contacts" type="object"
-                                            class="o_mailing_list_kanban_button o_mailing_list_kanban_big_nb text-primary font-weight-bold">
+                                            class="o_mailing_list_kanban_button o_mailing_list_kanban_big_nb text-primary fw-bold">
                                             <field name="contact_count"/>
                                         </button>
                                    </div>
                                     <div class="my-auto px-0">
                                         <button name="action_view_contacts" type="object"
-                                            class="o_mailing_list_kanban_button text-large text-left ml-2">
+                                            class="o_mailing_list_kanban_button text-large text-start ms-2">
                                             Total <br/>Contacts
                                         </button>
                                     </div>
                                 </div>
                             </div>
                             <div class="o_mailing_list_kanban_stats col-lg-5 col-sm-12 col-12 py-0 my-3 my-sm-auto d-flex justify-content-sm-between justify-content-start flex-wrap">
-                                <a class="mr-sm-0 mr-3 text-large" tabindex="-1"
+                                <a class="me-sm-0 me-3 text-large" tabindex="-1"
                                     name="action_view_contacts_email" type="object">
-                                    <span class="font-weight-normal">
+                                    <span class="fw-normal">
                                         <field name="contact_count_email"/>
                                     </span>
                                     <br/>
@@ -229,47 +229,47 @@
                                         <i class="fa fa-envelope-o"/> Contacts
                                     </span>
                                 </a>
-                                <a class="mr-sm-0 mr-3 text-large" tabindex="-1"
+                                <a class="me-sm-0 me-3 text-large" tabindex="-1"
                                     name="action_view_mailings" type="object">
-                                    <span class="font-weight-normal">
+                                    <span class="fw-normal">
                                         <field name="mailing_count"/>
                                     </span>
                                     <br/>
                                     <span class="text-secondary">Mailings</span>
                                 </a>
                                 <hr class="w-100 d-block d-sm-none opacity-0 m-0 p-0"/>
-                                <a class="mr-sm-0 mr-3 text-large" tabindex="-1"
+                                <a class="me-sm-0 me-3 text-large" tabindex="-1"
                                     name="action_view_contacts_bouncing" type="object">
-                                    <span class="font-weight-normal">
+                                    <span class="fw-normal">
                                         <field name="contact_pct_bounce"/> %
                                     </span>
                                     <br/>
                                     <span class="text-secondary">Bounce</span>
                                 </a>
-                                <a class="mr-sm-0 mr-3 text-large" tabindex="-1"
+                                <a class="me-sm-0 me-3 text-large" tabindex="-1"
                                     name="action_view_contacts_opt_out" type="object">
-                                    <span class="font-weight-normal">
+                                    <span class="fw-normal">
                                         <field name="contact_pct_opt_out"/> %
                                     </span>
                                     <br/>
                                     <span class="text-secondary">Opt-Out</span>
                                 </a>
-                                <a class="mr-sm-0 mr-3 text-large" tabindex="-1"
+                                <a class="me-sm-0 me-3 text-large" tabindex="-1"
                                     name="action_view_contacts_blacklisted" type="object">
-                                    <span class="font-weight-normal">
+                                    <span class="fw-normal">
                                         <field name="contact_pct_blacklisted"/> %
                                     </span>
                                     <br/>
                                     <span class="text-secondary">Blacklist</span>
                                 </a>
                             </div>
-                            <div class="o_kanban_ungrouped_action_buttons col-12 col-lg-2 py-0 pr-2 pl-md-2 my-md-auto my-2 d-none d-md-flex flex-wrap justify-content-lg-end">
+                            <div class="o_kanban_ungrouped_action_buttons col-12 col-lg-2 py-0 pe-2 ps-md-2 my-md-auto my-2 d-none d-md-flex flex-wrap justify-content-lg-end">
                                 <button name="action_open_import" string="Import Contacts"
-                                    type="object" class="btn btn-secondary border mr-2 text-nowrap">
+                                    type="object" class="btn btn-secondary border me-2 text-nowrap">
                                     Import Contacts
                                 </button>
                                 <button name="action_send_mailing" string="Send Mailing"
-                                    type="object" class="btn btn-secondary border mr-2 text-nowrap">
+                                    type="object" class="btn btn-secondary border me-2 text-nowrap">
                                     Send Mailing
                                 </button>
                             </div>
diff --git a/addons/mass_mailing/views/mailing_mailing_views.xml b/addons/mass_mailing/views/mailing_mailing_views.xml
index 8a755956fc3..e91c034781b 100644
--- a/addons/mass_mailing/views/mailing_mailing_views.xml
+++ b/addons/mass_mailing/views/mailing_mailing_views.xml
@@ -42,8 +42,8 @@
                     <field name="ab_testing_enabled" string="A/B Test" groups="mass_mailing.group_mass_mailing_campaign"/>
                     <field name="campaign_id" string="Campaign" groups="mass_mailing.group_mass_mailing_campaign" optional="hide"/>
                     <field name="sent" sum="Total" />
-                    <field name="received_ratio" class="d-flex align-items-center pl-0 pl-lg-5" widget="progressbar" string="Delivered (%)" avg="Average"/>
-                    <field name="opened_ratio" class="d-flex align-items-center pl-0 pl-lg-5" widget="progressbar" string="Opened (%)" avg="Average"/>
+                    <field name="received_ratio" class="d-flex align-items-center ps-0 ps-lg-5" widget="progressbar" string="Delivered (%)" avg="Average"/>
+                    <field name="opened_ratio" class="d-flex align-items-center ps-0 ps-lg-5" widget="progressbar" string="Opened (%)" avg="Average"/>
                     <field name="bounced_ratio" string="Bounced (%)" optional="hide" avg="Average"/>
                     <field name="clicks_ratio" string="Clicked (%)" avg="Average"/>
                     <field name="replied_ratio" string="Replied (%)" avg="Average"/>
@@ -79,7 +79,7 @@
                                     name="action_view_traces_canceled"
                                     type="object">
                                 <strong>
-                                    <field name="canceled" class="oe_inline mr-2"/>
+                                    <field name="canceled" class="oe_inline me-2"/>
                                     <span name="canceled_text">emails have been canceled and will not be sent.</span>
                                 </strong>
                             </button>
@@ -89,7 +89,7 @@
                                     name="action_view_traces_scheduled"
                                     type="object">
                                 <strong>
-                                    <field name="scheduled" class="oe_inline mr-2"/>
+                                    <field name="scheduled" class="oe_inline me-2"/>
                                     <span name="scheduled_text">emails are in queue and will be sent soon.</span>
                                 </strong>
                             </button>
@@ -99,7 +99,7 @@
                                     name="action_view_traces_sent"
                                     type="object">
                                 <strong>
-                                    <field name="sent" class="oe_inline mr-2"/>
+                                    <field name="sent" class="oe_inline me-2"/>
                                     <span name="sent">emails have been sent.</span>
                                 </strong>
                             </button>
@@ -109,7 +109,7 @@
                                     name="action_view_traces_failed"
                                     type="object">
                                 <strong>
-                                    <field name="failed" class="oe_inline mr-2"/>
+                                    <field name="failed" class="oe_inline me-2"/>
                                     <span name="failed_text">emails could not be sent.</span>
                                 </strong>
                             </button>
@@ -189,7 +189,7 @@
                             <label for="mailing_model_id" string="Recipients"/>
                             <div name="mailing_model_id_container">
                                 <div class="d-flex flex-row align-items-baseline flex-wrap">
-                                    <div class="mr-5">
+                                    <div class="me-5">
                                         <field name="mailing_model_id" options="{'no_open': True, 'no_create': True}"
                                             attrs="{'readonly': [('state', 'in', ('sending', 'done'))]}"/>
                                     </div>
@@ -203,16 +203,16 @@
                                                     'required':[('mailing_model_name','=','mailing.list')],
                                                     'readonly': [('state', 'in', ('sending', 'done'))]
                                             }"/>
-                                            <button icon="fa-user-plus" type="object" class="btn btn-secondary py-0 px-1 ml-1"
+                                            <button icon="fa-user-plus" type="object" class="btn btn-secondary py-0 px-1 ms-1"
                                                 attrs="{'invisible': ['|', '|', ('contact_list_ids', '=', False), ('contact_list_ids', '=', []), ('state', 'in', ('sending', 'done'))]}"
                                                 name="action_view_mailing_contacts" title="Add Mailing Contacts"/>
                                         </div>
                                     </div>
                                     <div attrs="{'invisible': [('mailing_model_name', '=', 'mailing.list')]}" class="o_td_label">
                                         <!-- We don't want to display label in edit mode, unless mailing is in sending or done state (where filter will be readonly) -->
-                                        <label for="mailing_filter_id" string="Filter" class="oe_read_only mr-4"
+                                        <label for="mailing_filter_id" string="Filter" class="oe_read_only me-4"
                                                attrs="{'invisible': ['|', ('state', 'in', ('sending', 'done')), ('mailing_filter_id', '=', False)]}"/>
-                                        <label for="mailing_filter_id" string="Filter" class="mr-4"
+                                        <label for="mailing_filter_id" string="Filter" class="me-4"
                                                attrs="{'invisible': ['|', ('state', 'not in', ('sending', 'done')), ('mailing_filter_id', '=', False)]}"/>
                                         <field name="mailing_filter_id" placeholder="Reload a favorite filter"
                                                class="w-auto" widget="mailing_filter"
@@ -506,7 +506,7 @@
                         <t t-name="kanban-box">
                             <div t-attf-class="{{!selection_mode ? 'oe_kanban_color_' + kanban_getcolor(record.color.raw_value) : ''}} oe_kanban_card oe_kanban_global_click oe_kanban_mass_mailing">
                                 <div class="o_dropdown_kanban dropdown" t-if="!selection_mode">
-                                    <a role="button" class="dropdown-toggle o-no-caret btn" data-toggle="dropdown" href="#" data-display="static" aria-label="Dropdown menu" title="Dropdown menu">
+                                    <a role="button" class="dropdown-toggle o-no-caret btn" data-bs-toggle="dropdown" href="#" data-bs-display="static" aria-label="Dropdown menu" title="Dropdown menu">
                                         <span class="fa fa-ellipsis-v"/>
                                     </a>
                                     <div class="dropdown-menu" role="menu">
@@ -570,12 +570,12 @@
                                     <div class="oe_kanban_bottom_left">
                                         <span attrs="{'invisible': [('sent_date', '=', False)]}"
                                             t-attf-title="Sent on #{record.sent_date.value}" class="d-inline-flex">
-                                            <span class="fa fa-calendar-check-o mr-2 small my-auto" aria-label="Sent date"/>
+                                            <span class="fa fa-calendar-check-o me-2 small my-auto" aria-label="Sent date"/>
                                             <span class="align-self-baseline"><field name="sent_date" widget="date"/></span>
                                         </span>
                                         <span attrs="{'invisible': [('schedule_date', '=', False)]}"
                                             t-attf-title="Scheduled on #{record.schedule_date.value}" class="d-inline-flex">
-                                            <span class="fa fa-hourglass-half mr-2 small my-auto" aria-label="Scheduled date"/>
+                                            <span class="fa fa-hourglass-half me-2 small my-auto" aria-label="Scheduled date"/>
                                             <span class="align-self-baseline"><field name="schedule_date" widget="date"/></span>
                                         </span>
                                         <span attrs="{'invisible': ['|', '|', ('sent_date', '!=', False), ('schedule_date', '!=', False), ('state', '=', 'in_queue')]}"
@@ -586,7 +586,7 @@
                                         </span>
                                         <span attrs="{'invisible': ['|', '|', ('schedule_date', '!=', False), ('state', '!=', 'in_queue'), ('next_departure', '=', False)]}"
                                             t-attf-title="Scheduled on #{record.next_departure.value}" class="d-inline-flex">
-                                            <span class="fa fa-hourglass-o mr-2 small my-auto" aria-label="Scheduled date"/>
+                                            <span class="fa fa-hourglass-o me-2 small my-auto" aria-label="Scheduled date"/>
                                             <span class="align-self-baseline">Next Batch</span>
                                         </span>
                                     </div>
diff --git a/addons/mass_mailing/views/mailing_templates_portal_unsubscribe.xml b/addons/mass_mailing/views/mailing_templates_portal_unsubscribe.xml
index bc46f2914d6..32d26518283 100644
--- a/addons/mass_mailing/views/mailing_templates_portal_unsubscribe.xml
+++ b/addons/mass_mailing/views/mailing_templates_portal_unsubscribe.xml
@@ -18,7 +18,7 @@
                                     <p>We would appreciate if you provide feedback about why you updated<br/>your subscriptions</p>
                                     <textarea class="form-control"  name="opt_out_feedback" cols="60" rows="3"></textarea>
                                     <br/>
-                                    <div class="btn btn-primary text-left" id="button_feedback">Send</div>
+                                    <div class="btn btn-primary text-start" id="button_feedback">Send</div>
                                 </div>
                             </div>
 
diff --git a/addons/mass_mailing/views/snippets/s_blockquote.xml b/addons/mass_mailing/views/snippets/s_blockquote.xml
index c5f8b113cbe..a81d5afa58c 100644
--- a/addons/mass_mailing/views/snippets/s_blockquote.xml
+++ b/addons/mass_mailing/views/snippets/s_blockquote.xml
@@ -12,7 +12,7 @@
                     <div class="s_blockquote_content">
                         <p><i>Write a quote here from one of your customers. Quotes are a great way to build confidence in your products or services.</i></p>
                         <div>
-                            <img src="/web/image/mass_mailing.s_blockquote_default_image" class="s_blockquote_avatar img rounded-circle mr-2" style="width: 40px" alt=""/>
+                            <img src="/web/image/mass_mailing.s_blockquote_default_image" class="s_blockquote_avatar img rounded-circle me-2" style="width: 40px" alt=""/>
                             <span class="s_blockquote_author"><b>John DOE</b> &#8226; CEO of MyCompany</span>
                         </div>
                     </div>
diff --git a/addons/mass_mailing/views/snippets/s_features_grid.xml b/addons/mass_mailing/views/snippets/s_features_grid.xml
index e3473ebd043..ce9d796bbd6 100644
--- a/addons/mass_mailing/views/snippets/s_features_grid.xml
+++ b/addons/mass_mailing/views/snippets/s_features_grid.xml
@@ -7,14 +7,14 @@
             <div class="row">
                 <div class="col-lg-6 s_col_no_bgcolor pb24">
                     <div class="container">
-                        <div class="row no-gutters">
+                        <div class="row g-0">
                             <div class="col-lg-12 pb24">
                                 <h2>First list of Features</h2>
                                 <h5>Add a great slogan.</h5>
                             </div>
                         </div>
                         <div class="row">
-                            <div class="col-lg-2 px-0 text-right s_mail_features_grid_icon">
+                            <div class="col-lg-2 px-0 text-end s_mail_features_grid_icon">
                                 <i class="fa fa-2x fa-font-awesome rounded-circle bg-primary"></i>
                             </div>
                             <div class="col-lg-10 s_mail_features_grid_content pb16">
@@ -23,7 +23,7 @@
                             </div>
                         </div>
                         <div class="row">
-                            <div class="col-lg-2 px-0 text-right s_mail_features_grid_icon">
+                            <div class="col-lg-2 px-0 text-end s_mail_features_grid_icon">
                                 <i class="fa fa-2x fa-files-o rounded-circle bg-primary"></i>
                             </div>
                             <div class="col-lg-10 s_mail_features_grid_content pb16">
@@ -32,7 +32,7 @@
                             </div>
                         </div>
                         <div class="row">
-                            <div class="col-lg-2 px-0 text-right s_mail_features_grid_icon">
+                            <div class="col-lg-2 px-0 text-end s_mail_features_grid_icon">
                                 <i class="fa fa-2x fa-trash rounded-circle bg-primary"></i>
                             </div>
                             <div class="col-lg-10 s_mail_features_grid_content pb16">
@@ -44,14 +44,14 @@
                 </div>
                 <div class="col-lg-6 s_col_no_bgcolor pb24">
                     <div class="container">
-                        <div class="row no-gutters">
+                        <div class="row g-0">
                             <div class="col-lg-12 pb24">
                                 <h2>Second list of Features</h2>
                                 <h5>Add a great slogan.</h5>
                             </div>
                         </div>
                         <div class="row">
-                            <div class="col-lg-2 px-0 text-right s_mail_features_grid_icon">
+                            <div class="col-lg-2 px-0 text-end s_mail_features_grid_icon">
                                 <i class="fa fa-2x fa-magic rounded bg-secondary"></i>
                             </div>
                             <div class="col-lg-10 s_mail_features_grid_content pb16">
@@ -60,7 +60,7 @@
                             </div>
                         </div>
                         <div class="row">
-                            <div class="col-lg-2 px-0 text-right s_mail_features_grid_icon">
+                            <div class="col-lg-2 px-0 text-end s_mail_features_grid_icon">
                                 <i class="fa fa-2x fa-eyedropper rounded bg-secondary"></i>
                             </div>
                             <div class="col-lg-10 s_mail_features_grid_content pb16">
@@ -69,7 +69,7 @@
                             </div>
                         </div>
                         <div class="row">
-                            <div class="col-lg-2 px-0 text-right s_mail_features_grid_icon">
+                            <div class="col-lg-2 px-0 text-end s_mail_features_grid_icon">
                                 <i class="fa fa-2x fa-picture-o rounded bg-secondary"></i>
                             </div>
                             <div class="col-lg-10 s_mail_features_grid_content pb16">
diff --git a/addons/mass_mailing/views/snippets/s_hr.xml b/addons/mass_mailing/views/snippets/s_hr.xml
index ab937496081..1b144441118 100644
--- a/addons/mass_mailing/views/snippets/s_hr.xml
+++ b/addons/mass_mailing/views/snippets/s_hr.xml
@@ -24,9 +24,9 @@
                 <we-button data-select-class="w-100" data-name="so_width_100">100%</we-button>
             </we-select>
             <we-button-group string="Alignment" data-dependencies="!so_width_100">
-                <we-button class="fa fa-fw fa-align-left" title="Left" data-select-class="mr-auto"/>
+                <we-button class="fa fa-fw fa-align-left" title="Left" data-select-class="me-auto"/>
                 <we-button class="fa fa-fw fa-align-center" title="Center" data-select-class="mx-auto"/>
-                <we-button class="fa fa-fw fa-align-right" title="Right" data-select-class="ml-auto"/>
+                <we-button class="fa fa-fw fa-align-right" title="Right" data-select-class="ms-auto"/>
             </we-button-group>
         </div>
     </xpath>
diff --git a/addons/mass_mailing/views/snippets/s_image_text.xml b/addons/mass_mailing/views/snippets/s_image_text.xml
index 6bc552212f1..d43f14b8c90 100644
--- a/addons/mass_mailing/views/snippets/s_image_text.xml
+++ b/addons/mass_mailing/views/snippets/s_image_text.xml
@@ -11,7 +11,7 @@
                 <div class="col-lg-6 pt16 pb16">
                     <h3>Omnichannel sales</h3>
                     <p class="text-justify">Get your inside sales (CRM) fully integrated with online sales (eCommerce), in-store sales (Point of Sale) and marketplaces like eBay and Amazon.</p>
-                    <div class="text-left">
+                    <div class="text-start">
                         <a href="#" class="btn btn-link">Read More</a>
                     </div>
                 </div>
diff --git a/addons/mass_mailing/views/snippets/s_media_list.xml b/addons/mass_mailing/views/snippets/s_media_list.xml
index d7afc1263ce..0403d088129 100644
--- a/addons/mass_mailing/views/snippets/s_media_list.xml
+++ b/addons/mass_mailing/views/snippets/s_media_list.xml
@@ -5,8 +5,8 @@
     <div class="s_media_list pt32 pb32 o_cc o_cc2 o_mail_snippet_general" data-vcss="001" data-snippet="s_media_list">
         <div class="container">
             <div class="row s_nb_column_fixed s_col_no_bgcolor">
-                <div class="col-lg-12 s_media_list_item pt16 pb16 pl-0 pr-0" data-name="Media item">
-                    <div class="row s_col_no_resize s_col_no_bgcolor no-gutters align-items-center o_cc o_cc1">
+                <div class="col-lg-12 s_media_list_item pt16 pb16 ps-0 pe-0" data-name="Media item">
+                    <div class="row s_col_no_resize s_col_no_bgcolor g-0 align-items-center o_cc o_cc1">
                         <div class="col-lg-4 align-self-stretch s_media_list_img_wrapper">
                             <img src="/web/image/mass_mailing.s_media_list_default_image_1" class="s_media_list_img h-100 w-100" alt=""/>
                         </div>
@@ -17,8 +17,8 @@
                         </div>
                     </div>
                 </div>
-                <div class="col-lg-12 s_media_list_item pt16 pb16 pl-0 pr-0" data-name="Media item">
-                    <div class="row s_col_no_resize s_col_no_bgcolor no-gutters align-items-center o_cc o_cc1">
+                <div class="col-lg-12 s_media_list_item pt16 pb16 ps-0 pe-0" data-name="Media item">
+                    <div class="row s_col_no_resize s_col_no_bgcolor g-0 align-items-center o_cc o_cc1">
                         <div class="col-lg-4 align-self-stretch s_media_list_img_wrapper">
                             <img src="/web/image/mass_mailing.s_media_list_default_image_2" class="s_media_list_img h-100 w-100" alt=""/>
                         </div>
@@ -28,15 +28,15 @@
                         </div>
                     </div>
                 </div>
-                <div class="col-lg-12 s_media_list_item pt16 pb16 pl-0 pr-0" data-name="Media item">
-                    <div class="row s_col_no_resize s_col_no_bgcolor no-gutters align-items-center o_cc o_cc1">
+                <div class="col-lg-12 s_media_list_item pt16 pb16 ps-0 pe-0" data-name="Media item">
+                    <div class="row s_col_no_resize s_col_no_bgcolor g-0 align-items-center o_cc o_cc1">
                         <div class="col-lg-4 align-self-stretch s_media_list_img_wrapper">
                             <img src="/web/image/mass_mailing.s_media_list_default_image_3" class="s_media_list_img h-100 w-100" alt=""/>
                         </div>
                         <div class="col-lg-8 s_media_list_body">
                             <h3>Post heading</h3>
                             <p>Use this component for creating a list of featured elements to which you want to bring attention.</p>
-                            <a href="#">Continue reading <i class="fa fa-long-arrow-right align-middle ml-1"/></a>
+                            <a href="#">Continue reading <i class="fa fa-long-arrow-right align-middle ms-1"/></a>
                         </div>
                     </div>
                 </div>
diff --git a/addons/mass_mailing/views/snippets/s_product_list.xml b/addons/mass_mailing/views/snippets/s_product_list.xml
index 0a2a93b5632..54ae4e06aee 100644
--- a/addons/mass_mailing/views/snippets/s_product_list.xml
+++ b/addons/mass_mailing/views/snippets/s_product_list.xml
@@ -27,7 +27,7 @@
                     <a href="">
                         <img src="/web/image/mass_mailing.s_product_list_default_image_3" alt="" class="img img-fluid"/>
                     </a>
-                    <div class="pt16 text-center" data-original-title="" title="" aria-describedby="tooltip540733">
+                    <div class="pt16 text-center" data-bs-original-title="" title="" aria-describedby="tooltip540733">
                         <p>Check out all our books</p>
                         <a class="btn btn-primary o_default_snippet_text" href="">Books</a>
                     </div>
diff --git a/addons/mass_mailing/views/snippets/s_rating.xml b/addons/mass_mailing/views/snippets/s_rating.xml
index 32020fa2a4b..4a460716d41 100644
--- a/addons/mass_mailing/views/snippets/s_rating.xml
+++ b/addons/mass_mailing/views/snippets/s_rating.xml
@@ -32,13 +32,13 @@
             <we-row string="&#8985; Active">
                 <we-colorpicker data-select-style="" data-apply-to=".s_rating_active_icons" data-css-property="color" data-color-prefix="text-"/>
                 <we-button data-custom-icon="true" data-custom-active-icon="true" data-no-preview="true">
-                    <i class="fa fa-fw fa-refresh mr-1"/> Replace Icon
+                    <i class="fa fa-fw fa-refresh me-1"/> Replace Icon
                 </we-button>
             </we-row>
             <we-row string="&#8985; Inactive">
                 <we-colorpicker data-select-style="" data-apply-to=".s_rating_inactive_icons" data-css-property="color" data-color-prefix="text-"/>
                 <we-button data-custom-icon="true" data-custom-active-icon="false" data-no-preview="true">
-                    <i class="fa fa-fw fa-refresh mr-1"/> Replace Icon
+                    <i class="fa fa-fw fa-refresh me-1"/> Replace Icon
                 </we-button>
             </we-row>
             <we-row string="Score">
diff --git a/addons/mass_mailing/views/snippets/s_showcase.xml b/addons/mass_mailing/views/snippets/s_showcase.xml
index b26888f1c7a..07af3e5b621 100644
--- a/addons/mass_mailing/views/snippets/s_showcase.xml
+++ b/addons/mass_mailing/views/snippets/s_showcase.xml
@@ -4,41 +4,41 @@
 <template id="s_showcase" name="Showcase">
     <div class="s_showcase pt48 pb48 o_mail_snippet_general" data-snippet="s_showcase">
         <!-- TODO: (below) issue with height: `fit-content` is not supported, can we calculate it in px in translation ? 
-        empty div height is 0 unless table has defined height (div.col-1 > div.w-50.h100.border-right)-->
+        empty div height is 0 unless table has defined height (div.col-1 > div.w-50.h100.border-end)-->
         <div class="container" style="height: fit-content;">
-            <div class="row no-gutters s_col_no_resize s_col_no_bgcolor s_nb_column_fixed">
-                <div class="col-lg-5 text-right pb24" align="right">
+            <div class="row g-0 s_col_no_resize s_col_no_bgcolor s_nb_column_fixed">
+                <div class="col-lg-5 text-end pb24" align="right">
                     <div class="mb-2">
                         <h3 class="d-inline-block">First feature</h3>
-                        <i class="fa fa-2x fa-desktop text-secondary ml-3"/>
+                        <i class="fa fa-2x fa-desktop text-secondary ms-3"/>
                     </div>
                     <p>A short description of this great feature.</p>
                 </div>
                 <div class="col-lg-2 o_mail_no_resize" align="left">
-                    <div class="w-50 h-100 border-right"/>
+                    <div class="w-50 h-100 border-end"/>
                 </div>
                 <div class="col-lg-5 pb24" align="left">
                     <div class="mb-2">
-                        <i class="fa fa-2x fa-heart text-secondary mr-3"/>
+                        <i class="fa fa-2x fa-heart text-secondary me-3"/>
                         <h3 class="d-inline-block">Another feature</h3>
                     </div>
                     <p>A short description of this great feature.</p>
                 </div>
             </div>
-            <div class="row no-gutters s_col_no_resize s_col_no_bgcolor s_nb_column_fixed">
-                <div class="col-lg-5 text-right" align="right">
+            <div class="row g-0 s_col_no_resize s_col_no_bgcolor s_nb_column_fixed">
+                <div class="col-lg-5 text-end" align="right">
                     <div class="mb-2">
                         <h3 class="d-inline-block">Second feature</h3>
-                        <i class="fa fa-2x fa-paint-brush text-secondary ml-3"/>
+                        <i class="fa fa-2x fa-paint-brush text-secondary ms-3"/>
                     </div>
                     <p>A short description of this great feature.</p>
                 </div>
                 <div class="col-lg-2 o_mail_no_resize" align="left">
-                    <div class="w-50 h-100 border-right"/>
+                    <div class="w-50 h-100 border-end"/>
                 </div>
                 <div class="col-lg-5" align="left">
                     <div class="mb-2">
-                        <i class="fa fa-2x fa-gift text-secondary mr-3"/>
+                        <i class="fa fa-2x fa-gift text-secondary me-3"/>
                         <h3 class="d-inline-block">Last Feature</h3>
                     </div>
                     <p>A short description of this great feature.</p>
diff --git a/addons/mass_mailing/views/snippets/s_text_image.xml b/addons/mass_mailing/views/snippets/s_text_image.xml
index 723e9073f57..1d0c8237fb6 100644
--- a/addons/mass_mailing/views/snippets/s_text_image.xml
+++ b/addons/mass_mailing/views/snippets/s_text_image.xml
@@ -8,7 +8,7 @@
                 <div class="col-lg-6 pt16 pb16">
                     <h3>A unique value</h3>
                     <p>The open source model of Odoo has allowed us to leverage thousands of developers and business experts to build hundreds of apps in just a few years.</p>
-                    <div class="text-left">
+                    <div class="text-start">
                         <a href="#" class="btn btn-link">Read More</a>
                     </div>
                 </div>
diff --git a/addons/mass_mailing/views/snippets_themes.xml b/addons/mass_mailing/views/snippets_themes.xml
index d5a7acbbda5..278704c56db 100644
--- a/addons/mass_mailing/views/snippets_themes.xml
+++ b/addons/mass_mailing/views/snippets_themes.xml
@@ -116,7 +116,7 @@
                          <img border="0" t-att-src="image_data_uri(company_id.logo)" style="height:auto;max-width:200px;max-height:48px;" />
                     </a>
                 </div>
-                <div class="col-lg-4 text-right o_mail_no_resize">
+                <div class="col-lg-4 text-end o_mail_no_resize">
                     <div class="o_mail_header_social">
                         <t t-call="mass_mailing.social_links"/>
                     </div>
@@ -137,7 +137,7 @@
                         </a>
                     </h3>
                 </div>
-                <div class="col-lg-4 text-right o_mail_no_resize">
+                <div class="col-lg-4 text-end o_mail_no_resize">
                     <div class="o_mail_header_social">
                         <t t-call="mass_mailing.social_links"/>
                     </div>
@@ -157,7 +157,7 @@
                         <img border="0" t-att-src="image_data_uri(company_id.logo)" style="height:auto;max-width:200px;max-height:48px;width:auto"/>
                     </a>
                 </div>
-                <div class="col-lg-4 text-right"/>
+                <div class="col-lg-4 text-end"/>
             </div>
         </div>
     </div>
@@ -233,7 +233,7 @@
                     <p>Cyber-threats continue to increase.
                         <br/>The discussion will examine how to develop new norms and integrate them into EU
                     </p>
-                    <div class="text-left">
+                    <div class="text-start">
                         <a href="#" class="btn btn-primary">Register</a>
                     </div>
                 </div>
@@ -322,7 +322,7 @@
             <we-button title="Solid" data-select-style="solid"><div class="o_we_fake_img_item o_we_border_preview" style="border-style: solid;"/></we-button>
             <we-button title="Dashed" data-select-style="dashed"><div class="o_we_fake_img_item o_we_border_preview" style="border-style: dashed;"/></we-button>
             <we-button title="Dotted" data-select-style="dotted"><div class="o_we_fake_img_item o_we_border_preview" style="border-style: dotted;"/></we-button>
-            <we-button title="Double" data-select-style="double"><div class="o_we_fake_img_item o_we_border_preview" style="border-style: double; border-left: none; border-right: none;"/></we-button>
+            <we-button title="Double" data-select-style="double"><div class="o_we_fake_img_item o_we_border_preview" style="border-style: double; border-start: none; border-end: none;"/></we-button>
         </we-select>
         <we-colorpicker data-dependencies="border_width_opt"
                         t-att-data-apply-to="apply_to"
@@ -388,9 +388,9 @@
     <!-- H-ALIGN -->
     <div id="so_text_align" data-selector=".s_mail_text_highlight">
         <we-button-group string="Alignment">
-            <we-button class="fa fa-fw fa-align-left" title="Left" data-select-class="text-left"/>
+            <we-button class="fa fa-fw fa-align-left" title="Left" data-select-class="text-start"/>
             <we-button class="fa fa-fw fa-align-center" title="Center" data-select-class="text-center"/>
-            <we-button class="fa fa-fw fa-align-right" title="Right" data-select-class="text-right"/>
+            <we-button class="fa fa-fw fa-align-right" title="Right" data-select-class="text-end"/>
         </we-button-group>
     </div>
 
@@ -405,9 +405,9 @@
 
     <div id="so_block_align" data-selector=".s_mail_alert, .s_mail_blockquote, .s_mail_text_highlight">
         <we-button-group string="Alignment" data-dependencies="!so_width_100">
-            <we-button class="fa fa-fw fa-align-left" title="Left" data-select-class="mr-auto"/>
+            <we-button class="fa fa-fw fa-align-left" title="Left" data-select-class="me-auto"/>
             <we-button class="fa fa-fw fa-align-center" title="Center" data-select-class="mx-auto"/>
-            <we-button class="fa fa-fw fa-align-right" title="Right" data-select-class="ml-auto"/>
+            <we-button class="fa fa-fw fa-align-right" title="Right" data-select-class="ms-auto"/>
         </we-button-group>
     </div>
 
@@ -718,7 +718,7 @@
                     <div class="o_we_fake_img_item o_we_border_preview" style="border-style: dotted;"/>
                 </we-button>
                 <we-button title="Double" data-customize-css-property="double">
-                    <div class="o_we_fake_img_item o_we_border_preview" style="border-style: double; border-left: none; border-right: none;"/>
+                    <div class="o_we_fake_img_item o_we_border_preview" style="border-style: double; border-start: none; border-end: none;"/>
                 </we-button>
             </we-select>
             <we-colorpicker data-customize-css-property=""
@@ -765,7 +765,7 @@
                     <div class="o_we_fake_img_item o_we_border_preview" style="border-style: dotted;"/>
                 </we-button>
                 <we-button title="Double" data-customize-css-property="double">
-                    <div class="o_we_fake_img_item o_we_border_preview" style="border-style: double; border-left: none; border-right: none;"/>
+                    <div class="o_we_fake_img_item o_we_border_preview" style="border-style: double; border-start: none; border-end: none;"/>
                 </we-button>
             </we-select>
             <we-colorpicker data-customize-css-property=""
@@ -791,7 +791,7 @@
                     <div class="o_we_fake_img_item o_we_border_preview" style="border-style: dotted;"/>
                 </we-button>
                 <we-button title="Double" data-customize-css-property="double">
-                    <div class="o_we_fake_img_item o_we_border_preview" style="border-style: double; border-left: none; border-right: none;"/>
+                    <div class="o_we_fake_img_item o_we_border_preview" style="border-style: double; border-start: none; border-end: none;"/>
                 </we-button>
             </we-select>
             <we-colorpicker data-customize-css-property=""
diff --git a/addons/mass_mailing/views/utm_campaign_views.xml b/addons/mass_mailing/views/utm_campaign_views.xml
index b93eb906b05..48afe6c1b12 100644
--- a/addons/mass_mailing/views/utm_campaign_views.xml
+++ b/addons/mass_mailing/views/utm_campaign_views.xml
@@ -39,7 +39,7 @@
                         <div class="d-flex justify-content-end align-items-center flex-column">
                             <label for="received_ratio" string="Delivered" class="m-0"/>
                             <div class="m-0">
-                                <span class="text-right">
+                                <span class="text-end">
                                     <field name="received_ratio"/>
                                     <span>%</span>
                                 </span>
@@ -48,7 +48,7 @@
                         <div class="d-flex justify-content-end align-items-center flex-column">
                             <label for="opened_ratio" string="Opened" class="m-0"/>
                             <div class="m-0">
-                                <span class="text-right">
+                                <span class="text-end">
                                     <field name="opened_ratio"/>
                                     <span>%</span>
                                 </span>
@@ -57,7 +57,7 @@
                         <div class="d-flex justify-content-end align-items-center flex-column">
                             <label for="replied_ratio" string="Replied" class="m-0"/>
                             <div class="m-0">
-                                <span class="text-right">
+                                <span class="text-end">
                                     <field name="replied_ratio"/>
                                     <span>%</span>
                                 </span>
@@ -66,7 +66,7 @@
                         <div class="d-flex justify-content-end align-items-center flex-column">
                             <label for="bounced_ratio" string="Bounced" class="m-0"/>
                             <div class="m-0">
-                                <span class="text-right">
+                                <span class="text-end">
                                     <field name="bounced_ratio"/>
                                     <span>%</span>
                                 </span>
diff --git a/addons/mass_mailing/wizard/mailing_contact_import_views.xml b/addons/mass_mailing/wizard/mailing_contact_import_views.xml
index a37809c672d..e8cc87eee7c 100644
--- a/addons/mass_mailing/wizard/mailing_contact_import_views.xml
+++ b/addons/mass_mailing/wizard/mailing_contact_import_views.xml
@@ -21,7 +21,7 @@
                 <p class="text-muted mb-0">
                     Want to import country, company name and more?
                     <button type="object" name="action_open_base_import"
-                        class="font-weight-normal px-0 btn btn-link">
+                        class="fw-normal px-0 btn btn-link">
                         Upload a file
                     </button>
                 </p>
diff --git a/addons/mass_mailing_slides/views/slide_channel_views.xml b/addons/mass_mailing_slides/views/slide_channel_views.xml
index ed6e975fefc..dd346bcd006 100644
--- a/addons/mass_mailing_slides/views/slide_channel_views.xml
+++ b/addons/mass_mailing_slides/views/slide_channel_views.xml
@@ -21,7 +21,7 @@
             <xpath expr="//div[@name='action_channel_invite']" position="after">
                 <div role="menuitem">
                     <a name="action_mass_mailing_attendees" type="object"
-                       groups="mass_mailing.group_mass_mailing_user" class="float-left pr-1">
+                       groups="mass_mailing.group_mass_mailing_user" class="float-start pe-1">
                         Contact Attendees
                     </a>
                 </div>
diff --git a/addons/mass_mailing_sms/views/mailing_list_views.xml b/addons/mass_mailing_sms/views/mailing_list_views.xml
index a469d9a899f..6058b8afaff 100644
--- a/addons/mass_mailing_sms/views/mailing_list_views.xml
+++ b/addons/mass_mailing_sms/views/mailing_list_views.xml
@@ -11,13 +11,13 @@
             <xpath expr="//div[hasclass('o_mass_mailing_kanban_contact_links')]" position="inside">
               <a name="action_view_contacts_sms" type="object">
                   <span >Valid SMS Recipients</span>
-                  <span t-esc="record.contact_count_sms.value" class="ml-3"/>
+                  <span t-esc="record.contact_count_sms.value" class="ms-3"/>
               </a>
             </xpath>
             <xpath expr="//div[hasclass('o_mailing_list_kanban_stats')]//a" position="after">
-                <a class="mr-sm-0 mr-3 text-large" tabindex="-1"
+                <a class="me-sm-0 me-3 text-large" tabindex="-1"
                     name="action_view_contacts_sms" type="object">
-                    <span class="font-weight-normal">
+                    <span class="fw-normal">
                         <field name="contact_count_sms"/>
                     </span>
                     <br/>
diff --git a/addons/mass_mailing_themes/views/mass_mailing_themes_templates.xml b/addons/mass_mailing_themes/views/mass_mailing_themes_templates.xml
index f1c6ddb738e..c032b7c28fe 100644
--- a/addons/mass_mailing_themes/views/mass_mailing_themes_templates.xml
+++ b/addons/mass_mailing_themes/views/mass_mailing_themes_templates.xml
@@ -70,7 +70,7 @@
             <div class="container">
                 <div class="row s_nb_column_fixed s_col_no_bgcolor">
                     <div class="col-lg-12 s_media_list_item pt0 pb0" data-name="Media item">
-                        <div class="row s_col_no_resize s_col_no_bgcolor no-gutters align-items-center o_cc o_cc1">
+                        <div class="row s_col_no_resize s_col_no_bgcolor g-0 align-items-center o_cc o_cc1">
                             <div class="col-lg-5 s_media_list_img_wrapper align-self-stretch">
                                 <img src="/mass_mailing_themes/static/src/img/theme_newsletter/s_media_list_1.jpg" class="s_media_list_img h-100 w-100"/>
                             </div>
@@ -83,7 +83,7 @@
                         </div>
                     </div>
                     <div class="col-lg-12 s_media_list_item pt16 pb0" data-name="Media item">
-                        <div class="row s_col_no_resize s_col_no_bgcolor no-gutters align-items-center o_cc o_cc1">
+                        <div class="row s_col_no_resize s_col_no_bgcolor g-0 align-items-center o_cc o_cc1">
                             <div class="col-lg-5 s_media_list_img_wrapper align-self-stretch">
                                 <img src="/mass_mailing_themes/static/src/img/theme_newsletter/s_media_list_2.jpg" class="s_media_list_img h-100 w-100"/>
                             </div>
@@ -96,7 +96,7 @@
                         </div>
                     </div>
                     <div class="col-lg-12 s_media_list_item pt16 pb0" data-name="Media item">
-                        <div class="row s_col_no_resize s_col_no_bgcolor no-gutters align-items-center o_cc o_cc1">
+                        <div class="row s_col_no_resize s_col_no_bgcolor g-0 align-items-center o_cc o_cc1">
                             <div class="col-lg-5 s_media_list_img_wrapper align-self-stretch">
                                 <img src="/mass_mailing_themes/static/src/img/theme_newsletter/s_media_list_3.jpg" class="s_media_list_img h-100 w-100"/>
                             </div>
@@ -229,7 +229,7 @@
             <div class="container">
                 <div class="row s_nb_column_fixed s_col_no_bgcolor">
                     <div class="col-lg-12 s_media_list_item pb0 pt0" data-name="Media item">
-                        <div class="row s_col_no_resize s_col_no_bgcolor no-gutters align-items-center o_cc o_cc1">
+                        <div class="row s_col_no_resize s_col_no_bgcolor g-0 align-items-center o_cc o_cc1">
                             <div class="col-lg-4 s_media_list_img_wrapper align-self-stretch">
                                 <img src="/mass_mailing_themes/static/src/img/theme_tech/tech_media_list_image_1.jpg" class="s_media_list_img h-100 w-100"/>
                             </div>
@@ -243,7 +243,7 @@
                         </div>
                     </div>
                     <div class="col-lg-12 s_media_list_item pt0 pb0" data-name="Media item">
-                        <div class="row s_col_no_resize s_col_no_bgcolor no-gutters align-items-center o_cc o_cc1">
+                        <div class="row s_col_no_resize s_col_no_bgcolor g-0 align-items-center o_cc o_cc1">
                             <div class="align-self-stretch s_media_list_img_wrapper col-lg-12">
                                 <div class="s_hr o_mail_snippet_general pt16 pb16" data-snippet="s_hr" data-name="Separator">
                                     <hr class="s_hr_1px s_hr_solid"/>
@@ -252,7 +252,7 @@
                         </div>
                     </div>
                     <div class="col-lg-12 s_media_list_item pb0 pt0" data-name="Media item">
-                        <div class="row s_col_no_resize s_col_no_bgcolor no-gutters align-items-center o_cc o_cc1">
+                        <div class="row s_col_no_resize s_col_no_bgcolor g-0 align-items-center o_cc o_cc1">
                             <div class="col-lg-4 s_media_list_img_wrapper align-self-stretch">
                                 <img src="/mass_mailing_themes/static/src/img/theme_tech/tech_media_list_image_2.jpg" class="s_media_list_img h-100 w-100"/>
                             </div>
@@ -264,7 +264,7 @@
                         </div>
                     </div>
                     <div class="col-lg-12 s_media_list_item pt0 pb0" data-name="Media item">
-                        <div class="row s_col_no_resize s_col_no_bgcolor no-gutters align-items-center o_cc o_cc1">
+                        <div class="row s_col_no_resize s_col_no_bgcolor g-0 align-items-center o_cc o_cc1">
                             <div class="col-lg-12 s_media_list_img_wrapper align-self-stretch">
                                 <div class="s_hr o_mail_snippet_general pt16 pb16" data-snippet="s_hr" data-name="Separator">
                                     <hr class="s_hr_1px s_hr_solid"/>
@@ -273,7 +273,7 @@
                         </div>
                     </div>
                     <div class="col-lg-12 s_media_list_item pt0 pb0" data-name="Media item">
-                        <div class="row s_col_no_resize s_col_no_bgcolor no-gutters align-items-center o_cc o_cc1">
+                        <div class="row s_col_no_resize s_col_no_bgcolor g-0 align-items-center o_cc o_cc1">
                             <div class="col-lg-4 s_media_list_img_wrapper align-self-stretch">
                                 <img src="/mass_mailing_themes/static/src/img/theme_tech/tech_media_list_image_3.jpg" class="s_media_list_img h-100 w-100"/>
                             </div>
diff --git a/addons/membership/views/product_views.xml b/addons/membership/views/product_views.xml
index f981b10c5ce..f0ef49e70a9 100644
--- a/addons/membership/views/product_views.xml
+++ b/addons/membership/views/product_views.xml
@@ -55,7 +55,7 @@
                                     <div class="o_kanban_record_headings">
                                         <strong class="o_kanban_record_title"><span class="mt4"><field name="name"/></span></strong>
                                     </div>
-                                    <span class="badge badge-pill"><i class="fa fa-money" role="img" aria-label="Price" title="Price"/> <field name="list_price"/></span>
+                                    <span class="badge rounded-pill"><i class="fa fa-money" role="img" aria-label="Price" title="Price"/> <field name="list_price"/></span>
                                 </div>
                                 <div class="o_kanban_record_body">
                                     <i class="fa fa-clock-o" role="img" aria-label="Period" title="Period"></i><strong> From: </strong><field name="membership_date_from"/><strong> To:</strong> <field name="membership_date_to"/>
diff --git a/addons/microsoft_calendar/static/src/xml/base_calendar.xml b/addons/microsoft_calendar/static/src/xml/base_calendar.xml
index 03bc9d3f75b..812e2b4d4d7 100644
--- a/addons/microsoft_calendar/static/src/xml/base_calendar.xml
+++ b/addons/microsoft_calendar/static/src/xml/base_calendar.xml
@@ -5,7 +5,7 @@
             <button type="button" id="microsoft_sync_pending" class="o_microsoft_sync_button o_microsoft_sync_pending btn btn-secondary btn">
                 <b><i class='fa fa-refresh'/> Outlook</b>
             </button>
-            <button type="button" id="microsoft_sync_configured" class="mr-1 o_microsoft_sync_button o_microsoft_sync_button_configured btn badge-primary">
+            <button type="button" id="microsoft_sync_configured" class="me-1 o_microsoft_sync_button o_microsoft_sync_button_configured btn text-bg-primary">
                 <b>
                     <i id="microsoft_check" class='fa fa-check'/>
                     <i id="microsoft_stop" class='fa fa-times' style="display: none"/>&amp;nbsp;Outlook
diff --git a/addons/microsoft_outlook/views/ir_mail_server_views.xml b/addons/microsoft_outlook/views/ir_mail_server_views.xml
index c8759a620e5..8870b9419e1 100644
--- a/addons/microsoft_outlook/views/ir_mail_server_views.xml
+++ b/addons/microsoft_outlook/views/ir_mail_server_views.xml
@@ -16,7 +16,7 @@
                 <div></div>
                 <div attrs="{'invisible': [('use_microsoft_outlook_service', '=', False)]}">
                     <span attrs="{'invisible': ['|', ('use_microsoft_outlook_service', '=', False), ('microsoft_outlook_refresh_token', '=', False)]}"
-                        class="badge badge-success">
+                        class="badge text-bg-success">
                         Outlook Token Valid
                     </span>
                     <button type="object"
diff --git a/addons/microsoft_outlook/views/res_config_settings_views.xml b/addons/microsoft_outlook/views/res_config_settings_views.xml
index 94cdb4b6705..e1adf2dc6d8 100644
--- a/addons/microsoft_outlook/views/res_config_settings_views.xml
+++ b/addons/microsoft_outlook/views/res_config_settings_views.xml
@@ -18,12 +18,12 @@
                                 <div class="row mt16" id="outlook_client_identifier">
                                     <label string="Client ID" for="microsoft_outlook_client_identifier"
                                         class="col-lg-3 o_light_label"/>
-                                    <field name="microsoft_outlook_client_identifier" class="ml-2"/>
+                                    <field name="microsoft_outlook_client_identifier" class="ms-2"/>
                                 </div>
                                 <div class="row mt16" id="outlook_client_secret">
                                     <label string="Client Secret" for="microsoft_outlook_client_secret"
                                         class="col-lg-3 o_light_label"/>
-                                    <field name="microsoft_outlook_client_secret" class="ml-2"/>
+                                    <field name="microsoft_outlook_client_secret" class="ms-2"/>
                                 </div>
                             </div>
                         </div>
diff --git a/addons/mrp/report/mrp_production_templates.xml b/addons/mrp/report/mrp_production_templates.xml
index de56d6e03f0..407adc5aeed 100644
--- a/addons/mrp/report/mrp_production_templates.xml
+++ b/addons/mrp/report/mrp_production_templates.xml
@@ -11,7 +11,7 @@
                             <h2><span t-field="o.name"/></h2>
                         </div>
                         <div class="col-5">
-                            <span class="text-right">
+                            <span class="text-end">
                                 <div t-field="o.name" t-options="{'widget': 'barcode', 'width': 600, 'height': 100, 'img_style': 'width:350px;height:60px'}"/>
                             </span>
                         </div>
@@ -99,8 +99,8 @@
         <thead>
             <tr>
                 <th>Product</th>
-                <th t-if="o.state in ('progress', 'to_close','done')" t-attf-class="{{ 'text-right' if not has_product_barcode else '' }}">Consumed</th>
-                <th t-attf-class="{{ 'text-right' if not has_product_barcode else '' }}">To Consume</th>
+                <th t-if="o.state in ('progress', 'to_close','done')" t-attf-class="{{ 'text-end' if not has_product_barcode else '' }}">Consumed</th>
+                <th t-attf-class="{{ 'text-end' if not has_product_barcode else '' }}">To Consume</th>
                 <th t-if="has_product_barcode" width="15%" class="text-center">Barcode</th>
             </tr>
         </thead>
@@ -109,12 +109,12 @@
                 <td>
                     <span t-field="raw_line.product_id"/>
                 </td>
-                <td t-attf-class="{{ 'text-right' if not has_product_barcode else '' }}" t-if="o.state in ('progress', 'to_close','done')">
+                <td t-attf-class="{{ 'text-end' if not has_product_barcode else '' }}" t-if="o.state in ('progress', 'to_close','done')">
                     <div>
                         <span t-field="raw_line.quantity_done"/>
                     </div>
                 </td>
-                <td t-attf-class="{{ 'text-right' if not has_product_barcode else '' }}">
+                <td t-attf-class="{{ 'text-end' if not has_product_barcode else '' }}">
                     <span t-field="raw_line.product_uom_qty"/>
                     <span t-field="raw_line.product_uom" groups="uom.group_uom"/>
                 </td>
@@ -165,7 +165,7 @@
                             </t>
                             <td t-att-style="make_invisible and 'visibility:hidden'">
                                 <div t-if="move_line" t-translation="off" t-att-style="'position:relative; width:43mm; height:19mm; border: 1px solid %s;' % (move_line.env.user.company_id.primary_color or 'black')">
-                                    <div class="o_label_name o_label_4x12 font-weight-bold">
+                                    <div class="o_label_name o_label_4x12 fw-bold">
                                         <div t-out="move_line.product_id.display_name"/>
                                         <div><span>Quantity: </span>
                                             <span t-if="move_line.product_uom_id.category_id == uom_categ_unit">1.0</span>
diff --git a/addons/mrp/report/mrp_report_bom_structure.xml b/addons/mrp/report/mrp_report_bom_structure.xml
index 6d28f59ee3a..6b12cfc2b78 100644
--- a/addons/mrp/report/mrp_report_bom_structure.xml
+++ b/addons/mrp/report/mrp_report_bom_structure.xml
@@ -25,10 +25,10 @@
                                     <tr>
                                         <th>Product</th>
                                         <th name="th_mrp_bom_h">BoM</th>
-                                        <th class="text-right">Quantity</th>
-                                        <th class="text-left" groups="uom.group_uom">Unit of Measure</th>
-                                        <th t-if="data['report_structure'] != 'bom_structure'" class="o_mrp_prod_cost text-right" title="This is the cost defined on the product.">Product Cost</th>
-                                        <th t-if="data['report_structure'] != 'bom_structure'" class="o_mrp_bom_cost text-right" title="This is the cost based on the BoM of the product. It is computed by summing the costs of the components and operations needed to build the product.">BoM Cost</th>
+                                        <th class="text-end">Quantity</th>
+                                        <th class="text-start" groups="uom.group_uom">Unit of Measure</th>
+                                        <th t-if="data['report_structure'] != 'bom_structure'" class="o_mrp_prod_cost text-end" title="This is the cost defined on the product.">Product Cost</th>
+                                        <th t-if="data['report_structure'] != 'bom_structure'" class="o_mrp_bom_cost text-end" title="This is the cost based on the BoM of the product. It is computed by summing the costs of the components and operations needed to build the product.">BoM Cost</th>
                                         <th t-if="data['report_type'] == 'html' and data['has_attachments']" class="o_mrp_has_attachments" title="Files attached to the product">Attachments</th>
                                     </tr>
                                 </thead>
@@ -40,12 +40,12 @@
                                         <td name="td_mrp_bom">
                                             <div><a href="#" t-if="data['report_type'] == 'html'" t-att-data-res-id="data['bom'].id" t-att-data-model="'mrp.bom'" class="o_mrp_bom_action"><t t-esc="data['code']"/></a><t t-else="" t-esc="data['code']"/></div>
                                         </td>
-                                        <td class="text-right"><span><t t-esc="data['bom_qty']" t-options='{"widget": "float", "decimal_precision": "Product Unit of Measure"}'/></span></td>
+                                        <td class="text-end"><span><t t-esc="data['bom_qty']" t-options='{"widget": "float", "decimal_precision": "Product Unit of Measure"}'/></span></td>
                                         <td groups="uom.group_uom"><span><t t-esc="data['bom'].product_uom_id.name"/></span></td>
-                                        <td t-if="data['report_structure'] != 'bom_structure'" class="o_mrp_prod_cost text-right">
+                                        <td t-if="data['report_structure'] != 'bom_structure'" class="o_mrp_prod_cost text-end">
                                             <span><t t-esc="data['price']" t-options='{"widget": "monetary", "display_currency": currency}'/></span>
                                         </td>
-                                        <td t-if="data['report_structure'] != 'bom_structure'" class="o_mrp_bom_cost text-right">
+                                        <td t-if="data['report_structure'] != 'bom_structure'" class="o_mrp_bom_cost text-end">
                                             <span><t t-esc="data['bom_cost']" t-options='{"widget": "monetary", "display_currency": currency}'/></span>
                                         </td>
                                         <td t-if="data['report_type'] == 'html'">
@@ -65,15 +65,15 @@
                                         <t t-foreach="range(data.get('extra_column_count', 0))" t-as="index">
                                             <td/>
                                         </t>
-                                        <td name="td_mrp_bom_f" class="text-right">
+                                        <td name="td_mrp_bom_f" class="text-end">
                                             <span><t t-if="data['byproducts']" t-esc="data['bom_prod_name']"/></span>
                                         </td>
-                                        <td class="text-right"><span><strong>Unit Cost</strong></span></td>
+                                        <td class="text-end"><span><strong>Unit Cost</strong></span></td>
                                         <td groups="uom.group_uom"><span><t t-esc="data['bom'].product_uom_id.name"/></span></td>
-                                        <td class="text-right">
+                                        <td class="text-end">
                                             <span><t t-esc="data['price']/data['bom_qty']" t-options='{"widget": "monetary", "display_currency": currency}'/></span>
                                         </td>
-                                        <td class="text-right">
+                                        <td class="text-end">
                                             <span><t t-esc="data['cost_share'] * data['total'] / data['bom_qty']" t-options='{"widget": "monetary", "display_currency": currency}'/></span>
                                         </td>
                                     </tr>
@@ -83,15 +83,15 @@
                                             <t t-foreach="range(data.get('extra_column_count', 0))" t-as="index">
                                                 <td/>
                                             </t>
-                                            <td name="td_mrp_bom_byproducts_f" class="text-right">
+                                            <td name="td_mrp_bom_byproducts_f" class="text-end">
                                                 <span><t t-esc="byproduct['product_name']"/></span>
                                             </td>
-                                            <td class="text-right"><span><strong>Unit Cost</strong></span></td>
+                                            <td class="text-end"><span><strong>Unit Cost</strong></span></td>
                                             <td groups="uom.group_uom"><span><t t-esc="byproduct['product_uom']"/></span></td>
-                                            <td class="text-right">
+                                            <td class="text-end">
                                                 <span><t t-esc="byproduct['product_cost'] / byproduct['product_qty']" t-options='{"widget": "monetary", "display_currency": currency}'/></span>
                                             </td>
-                                            <td class="text-right">
+                                            <td class="text-end">
                                                 <span><t t-esc="byproduct['cost_share'] * data['total'] / byproduct['product_qty']" t-options='{"widget": "monetary", "display_currency": currency}'/></span>
                                             </td>
                                         </tr>
@@ -131,12 +131,12 @@
                         <a href="#" t-att-data-res-id="l['child_bom']" t-att-data-model="'mrp.bom'" class="o_mrp_bom_action"><t t-esc="l['code']"/></a>
                   </div>
                 </td>
-                <td class="text-right"><span><t t-esc="l['prod_qty']" t-options='{"widget": "float", "decimal_precision": "Product Unit of Measure"}'/></span></td>
+                <td class="text-end"><span><t t-esc="l['prod_qty']" t-options='{"widget": "float", "decimal_precision": "Product Unit of Measure"}'/></span></td>
                 <td groups="uom.group_uom"><span><t t-esc="l['prod_uom']"/></span></td>
-                <td class="o_mrp_prod_cost text-right">
+                <td class="o_mrp_prod_cost text-end">
                     <span t-esc="l['prod_cost']" t-options='{"widget": "monetary", "display_currency": currency}'/>
                 </td>
-                <td class="o_mrp_bom_cost text-right">
+                <td class="o_mrp_bom_cost text-end">
                     <span t-esc="l['total']" t-options='{"widget": "monetary", "display_currency": currency}'/>
                 </td>
                 <td>
@@ -160,12 +160,12 @@
                     <td/>
                 </t>
                 <td/>
-                <td class="text-right">
+                <td class="text-end">
                     <span t-esc="data['operations_time']" t-options='{"widget": "float_time"}'/>
                 </td>
                 <td groups="uom.group_uom"><span>Minutes</span></td>
                 <td/>
-                <td class="o_mrp_bom_cost text-right">
+                <td class="o_mrp_bom_cost text-end">
                     <span t-esc="data['operations_cost']" t-options='{"widget": "monetary", "display_currency": currency}'/>
                 </td>
                 <td/>
@@ -183,12 +183,12 @@
                     <td/>
                 </t>
                 <td/>
-                <td class="text-right">
+                <td class="text-end">
                     <span t-esc="data['byproducts_total']"/>
                 </td>
                 <td groups="uom.group_uom"/>
                 <td/>
-                <td class="text-right">
+                <td class="text-end">
                     <span t-esc="data['byproducts_cost']" t-options='{"widget": "monetary", "display_currency": currency}'/>
                 </td>
             </tr>
@@ -208,12 +208,12 @@
                   <td/>
               </t>
               <td/>
-              <td class="text-right">
+              <td class="text-end">
                   <span t-esc="op['duration_expected']" t-options='{"widget": "float_time"}'/>
               </td>
               <td groups="uom.group_uom"><span>Minutes</span></td>
               <td/>
-              <td class="o_mrp_bom_cost text-right">
+              <td class="o_mrp_bom_cost text-end">
                   <span t-esc="op['total']" t-options='{"widget": "monetary", "display_currency": currency}'/>
               </td>
               <td/>
@@ -234,14 +234,14 @@
                     <td/>
                 </t>
                 <td/>
-                <td class="text-right">
+                <td class="text-end">
                     <span t-esc="byproduct['product_qty']"/>
                 </td>
                 <td groups="uom.group_uom"><span t-esc="byproduct['product_uom']"/></td>
-                <td class="text-right">
+                <td class="text-end">
                     <span t-esc="byproduct['product_cost']" t-options='{"widget": "monetary", "display_currency": currency}'/>
                 </td>
-                <td class="text-right">
+                <td class="text-end">
                     <span t-esc="byproduct['bom_cost']" t-options='{"widget": "monetary", "display_currency": currency}'/>
                 </td>
                 <td/>
@@ -268,17 +268,17 @@
               <td name="td_mrp_code">
                   <div t-if="l.get('code')" t-esc="l['code']" />
               </td>
-              <td class="text-right">
+              <td class="text-end">
                   <span>
                       <t t-if="l['type'] == 'operation'" t-esc="l['quantity']" t-options='{"widget": "float_time"}'/>
                       <t t-if="l['type'] in ['bom', 'byproduct']" t-esc="l['quantity']" t-options='{"widget": "float", "decimal_precision": "Product Unit of Measure"}'/>
                   </span>
               </td>
               <td groups="uom.group_uom"><span><t t-esc="l['uom']"/></span></td>
-              <td t-if="data['report_structure'] != 'bom_structure'" class="o_mrp_prod_cost text-right">
+              <td t-if="data['report_structure'] != 'bom_structure'" class="o_mrp_prod_cost text-end">
                   <span t-if="'prod_cost' in l" t-esc="l['prod_cost']" t-options='{"widget": "monetary", "display_currency": currency}'/>
               </td>
-              <td t-if="data['report_structure'] != 'bom_structure'" class="o_mrp_bom_cost text-right">
+              <td t-if="data['report_structure'] != 'bom_structure'" class="o_mrp_bom_cost text-end">
                   <span t-esc="l['bom_cost']" t-options='{"widget": "monetary", "display_currency": currency}'/>
               </td>
           </tr>
diff --git a/addons/mrp/report/mrp_workorder_templates.xml b/addons/mrp/report/mrp_workorder_templates.xml
index 5e8ecf8b729..d6dcfb4297e 100644
--- a/addons/mrp/report/mrp_workorder_templates.xml
+++ b/addons/mrp/report/mrp_workorder_templates.xml
@@ -11,7 +11,7 @@
                             <h2><span t-field="o.name"/></h2>
                         </div>
                         <div class="col-5">
-                            <span class="text-right">
+                            <span class="text-end">
                                 <div t-field="o.name" t-options="{'widget': 'barcode', 'width': 600, 'height': 100, 'img_style': 'width:350px;height:60px'}"/>
                             </span>
                         </div>
diff --git a/addons/mrp/report/report_deliveryslip.xml b/addons/mrp/report/report_deliveryslip.xml
index afea6e674da..f6d71f473e7 100644
--- a/addons/mrp/report/report_deliveryslip.xml
+++ b/addons/mrp/report/report_deliveryslip.xml
@@ -32,7 +32,7 @@
         <!-- do another map to get unique top level kits -->
         <t t-set="kits" t-value="has_kits.mapped('move_id.bom_line_id.bom_id.product_tmpl_id')"/>
         <t t-foreach="kits" t-as="kit">
-            <tr t-att-class="'bg-200 font-weight-bold o_line_section'">
+            <tr t-att-class="'bg-200 fw-bold o_line_section'">
                 <td colspan="99">
                     <span t-esc="kit.display_name"/>
                 </td>
@@ -62,7 +62,7 @@
         <!-- Do another section for kit-less products if they exist -->
         <t t-set="no_kit_move_lines" t-value="o.move_line_ids.filtered(lambda l: not l.move_id.bom_line_id)"/>
         <t t-if="no_kit_move_lines">
-            <tr t-att-class="'bg-200 font-weight-bold o_line_section'">
+            <tr t-att-class="'bg-200 fw-bold o_line_section'">
                 <td colspan="99">
                     <span>Products not associated with a kit</span>
                 </td>
diff --git a/addons/mrp/report/report_stock_forecasted.xml b/addons/mrp/report/report_stock_forecasted.xml
index 01a60762706..702abd016c9 100644
--- a/addons/mrp/report/report_stock_forecasted.xml
+++ b/addons/mrp/report/report_stock_forecasted.xml
@@ -4,13 +4,13 @@
         <xpath expr="//tr[@name='draft_picking_in']" position="after">
             <tr t-if="docs['draft_production_qty']['in']" name="draft_mo_in">
                 <td colspan="2">Production of Draft MO</td>
-                <td t-esc="docs['draft_production_qty']['in']" t-options="{'widget': 'float', 'precision': precision}" class="text-right"/>
+                <td t-esc="docs['draft_production_qty']['in']" t-options="{'widget': 'float', 'precision': precision}" class="text-end"/>
             </tr>
         </xpath>
         <xpath expr="//tr[@name='draft_picking_out']" position="after">
             <tr t-if="docs['draft_production_qty']['out']" name="draft_mo_out">
                 <td colspan="2">Component of Draft MO</td>
-                <td t-esc="-docs['draft_production_qty']['out']" t-options="{'widget': 'float', 'precision': precision}" class="text-right"/>
+                <td t-esc="-docs['draft_production_qty']['out']" t-options="{'widget': 'float', 'precision': precision}" class="text-end"/>
             </tr>
         </xpath>
          <xpath expr="//button[@name='unreserve_link']" position="after">
diff --git a/addons/mrp/static/src/scss/mrp_fields.scss b/addons/mrp/static/src/scss/mrp_fields.scss
index e952f35588d..972d73b38db 100644
--- a/addons/mrp/static/src/scss/mrp_fields.scss
+++ b/addons/mrp/static/src/scss/mrp_fields.scss
@@ -18,6 +18,6 @@
     }
 }
 
-.o_manual_consumption.font-weight-bold {
+.o_manual_consumption.fw-bold {
     background-color: #D3D3D370;
 }
diff --git a/addons/mrp/static/src/scss/mrp_gantt.scss b/addons/mrp/static/src/scss/mrp_gantt.scss
index 5d6ed467b73..b9d88d3a9ea 100644
--- a/addons/mrp/static/src/scss/mrp_gantt.scss
+++ b/addons/mrp/static/src/scss/mrp_gantt.scss
@@ -11,7 +11,7 @@
         @include gantt-decoration-color($success);
     }
     div.o_gantt_pill.decoration-warning {
-        @include gantt-decoration-color(gray('500'));
+        @include gantt-decoration-color(map-get($grays, '500'));
     }
     div.o_gantt_pill.decoration-danger {
         @include gantt-decoration-color($danger);
diff --git a/addons/mrp/static/src/xml/mrp.xml b/addons/mrp/static/src/xml/mrp.xml
index ea30cef110f..a5842de1177 100644
--- a/addons/mrp/static/src/xml/mrp.xml
+++ b/addons/mrp/static/src/xml/mrp.xml
@@ -41,7 +41,7 @@
 
     <div t-name="mrp.workorderPopover">
         <t t-foreach="infos" t-as="info">
-            <i t-attf-class="fa fa-arrow-right mr-2 #{ info.color }"></i><t t-esc="info.msg"/><br/>
+            <i t-attf-class="fa fa-arrow-right me-2 #{ info.color }"></i><t t-esc="info.msg"/><br/>
         </t>
         <button t-if="replan" class="btn btn-primary action_replan_button">Replan</button>
     </div>
diff --git a/addons/mrp/views/ir_attachment_view.xml b/addons/mrp/views/ir_attachment_view.xml
index 2f4adcd019c..63b3aa1592e 100644
--- a/addons/mrp/views/ir_attachment_view.xml
+++ b/addons/mrp/views/ir_attachment_view.xml
@@ -42,7 +42,7 @@
                                         </div>
                                     </div>
                                     <div class="o_dropdown_kanban dropdown" tabindex="-1">
-                                        <a class="dropdown-toggle o-no-caret btn" data-toggle="dropdown" href="#" role="button" aria-label="Dropdown menu" title="Dropdown menu">
+                                        <a class="dropdown-toggle o-no-caret btn" data-bs-toggle="dropdown" href="#" role="button" aria-label="Dropdown menu" title="Dropdown menu">
                                             <span class="fa fa-ellipsis-v"/>
                                         </a>
                                         <div class="dropdown-menu" role="menu" aria-labelledby="dLabel">
diff --git a/addons/mrp/views/mrp_bom_views.xml b/addons/mrp/views/mrp_bom_views.xml
index 78454dea763..13994326b4f 100644
--- a/addons/mrp/views/mrp_bom_views.xml
+++ b/addons/mrp/views/mrp_bom_views.xml
@@ -85,8 +85,8 @@
                                     <field name="sequence" widget="handle"/>
                                     <field name="product_id" context="{'default_detailed_type': 'product'}"/>
                                     <field name="product_tmpl_id" invisible="1"/>
-                                    <button name="action_see_attachments" type="object" icon="fa-files-o" aria-label="Product Attachments" title="Product Attachments" class="float-right oe_read_only"/>
-                                    <field name="attachments_count" class="text-left oe_read_only"
+                                    <button name="action_see_attachments" type="object" icon="fa-files-o" aria-label="Product Attachments" title="Product Attachments" class="float-end oe_read_only"/>
+                                    <field name="attachments_count" class="text-start oe_read_only"
                                     string=" "/>
                                     <field name="product_qty"/>
                                     <field name="product_uom_category_id" invisible="1"/>
@@ -185,7 +185,7 @@
                                     <div class="o_kanban_record_headings mt4">
                                         <strong class="o_kanban_record_title"><span clatt="mt4"><field name="product_tmpl_id"/></span></strong>
                                     </div>
-                                    <span class="float-right badge badge-pill"><t t-esc="record.product_qty.value"/> <small><t t-esc="record.product_uom_id.value"/></small></span>
+                                    <span class="float-end badge rounded-pill"><t t-esc="record.product_qty.value"/> <small><t t-esc="record.product_uom_id.value"/></small></span>
                                 </div>
                             </div>
                         </t>
diff --git a/addons/mrp/views/mrp_production_views.xml b/addons/mrp/views/mrp_production_views.xml
index 53dab5bc41a..8e7b99c9b9b 100644
--- a/addons/mrp/views/mrp_production_views.xml
+++ b/addons/mrp/views/mrp_production_views.xml
@@ -181,7 +181,7 @@
                     </div>
                     <div class="oe_title">
                         <h1>
-                            <field name="priority" widget="priority" class="mr-3"/>
+                            <field name="priority" widget="priority" class="me-3"/>
                             <field name="name" placeholder="Manufacturing Reference" nolabel="1"/>
                         </h1>
                     </div>
@@ -201,12 +201,12 @@
                                     context="{'default_product_tmpl_id': product_tmpl_id}" attrs="{'readonly': [('state', '!=', 'draft')]}"/>
                             </div>
                             <label for="product_qty" string="Quantity"/>
-                            <div class="o_row no-gutters d-flex">
+                            <div class="o_row g-0 d-flex">
                                 <div attrs="{'invisible': [('state', '=', 'draft')]}" class="o_row">
-                                    <field name="qty_producing" class="text-left" attrs="{'readonly': ['|', ('state', '=', 'cancel'), '&amp;', ('state', '=', 'done'), ('is_locked', '=', True)]}"/>
+                                    <field name="qty_producing" class="text-start" attrs="{'readonly': ['|', ('state', '=', 'cancel'), '&amp;', ('state', '=', 'done'), ('is_locked', '=', True)]}"/>
                                     /
                                 </div>
-                                <field name="product_qty" class="oe_inline text-left" attrs="{'readonly': [('state', '!=', 'draft')], 'invisible': [('state', 'not in', ('draft', 'done'))]}"/>
+                                <field name="product_qty" class="oe_inline text-start" attrs="{'readonly': [('state', '!=', 'draft')], 'invisible': [('state', 'not in', ('draft', 'done'))]}"/>
                                 <button type="action" name="%(mrp.action_change_production_qty)d"
                                     context="{'default_mo_id': id}" class="oe_link oe_inline" style="margin: 0px; padding: 0px;" attrs="{'invisible': ['|', ('state', 'in', ('draft', 'done','cancel')), ('id', '=', False)]}">
                                     <field name="product_qty" class="oe_inline" attrs="{'readonly': [('state', '!=', 'draft')]}"/>
@@ -214,7 +214,7 @@
                                 <label for="product_uom_id" string="" class="oe_inline"/>
                                 <field name="product_uom_category_id" invisible="1"/>
                                 <field name="product_uom_id" options="{'no_open': True, 'no_create': True}" groups="uom.group_uom" attrs="{'readonly': [('state', '!=', 'draft')]}"/>
-                                <span class='font-weight-bold'>To Produce</span>
+                                <span class='fw-bold'>To Produce</span>
                                 <button type="object" name="action_product_forecast_report" title="Forecast Report" icon="fa-area-chart" attrs="{'invisible': [('forecasted_issue', '=', True)]}"/>
                                 <button type="object" name="action_product_forecast_report" title="Forecast Report" icon="fa-area-chart" attrs="{'invisible': [('forecasted_issue', '=', False)]}" class="text-danger"/>
                             </div>
@@ -427,10 +427,10 @@
                             <div t-attf-class="oe_kanban_card oe_kanban_global_click">
                                 <div class="o_kanban_record_top">
                                     <field name="priority" widget="priority"/>
-                                    <div class="o_kanban_record_headings mt4 ml-1">
+                                    <div class="o_kanban_record_headings mt4 ms-1">
                                         <strong class="o_kanban_record_title"><span><t t-esc="record.product_id.value"/></span></strong>
                                     </div>
-                                    <span class="float-right text-right"><t t-esc="record.product_qty.value"/> <small><t t-esc="record.product_uom_id.value"/></small></span>
+                                    <span class="float-end text-end"><t t-esc="record.product_qty.value"/> <small><t t-esc="record.product_uom_id.value"/></small></span>
                                 </div>
                                 <div class="o_kanban_record_bottom">
                                     <div class="oe_kanban_bottom_left text-muted">
diff --git a/addons/mrp/views/mrp_unbuild_views.xml b/addons/mrp/views/mrp_unbuild_views.xml
index a14d0d201df..3d36734cc68 100644
--- a/addons/mrp/views/mrp_unbuild_views.xml
+++ b/addons/mrp/views/mrp_unbuild_views.xml
@@ -71,7 +71,7 @@
                                         <span><t t-esc="record.product_id.value"/></span>
                                     </div>
                                     <div class="col-4">
-                                        <span class="float-right text-right">
+                                        <span class="float-end text-end">
                                             <field name="state" widget="label_selection" options="{'classes': {'draft': 'default', 'done': 'success'}}" readonly="1"/>
                                         </span>
                                     </div>
diff --git a/addons/mrp/views/mrp_workcenter_views.xml b/addons/mrp/views/mrp_workcenter_views.xml
index 21ff75d7e90..6abec9e6ae7 100644
--- a/addons/mrp/views/mrp_workcenter_views.xml
+++ b/addons/mrp/views/mrp_workcenter_views.xml
@@ -195,7 +195,7 @@
                                                         To Launch
                                                     </a>
                                                 </div>
-                                                <div class="col-4 text-right">
+                                                <div class="col-4 text-end">
                                                     <field name="workorder_ready_count"/>
                                                 </div>
                                             </div>
@@ -205,7 +205,7 @@
                                                         In Progress
                                                     </a>
                                                 </div>
-                                                <div class="col-4 text-right">
+                                                <div class="col-4 text-end">
                                                     <field name="workorder_progress_count"/>
                                                 </div>
                                             </div>
@@ -215,7 +215,7 @@
                                                         Late
                                                     </a>
                                                 </div>
-                                                <div class="col-4 text-right">
+                                                <div class="col-4 text-end">
                                                     <field name="workorder_late_count"/>
                                                 </div>
                                             </div>
@@ -225,7 +225,7 @@
                                                         OEE
                                                     </a>
                                                 </div>
-                                                <div class="col-6 text-right">
+                                                <div class="col-6 text-end">
                                                     <span t-att-class="record.oee_target.raw_value and (record.oee.raw_value &lt; record.oee_target.raw_value) and 'text-danger' or (record.oee.raw_value &gt; record.oee_target.raw_value) and 'text-success' or 'text-warning'">
                                                         <strong>
                                                             <field name="oee" widget="integer"/>%
@@ -237,15 +237,15 @@
                                     </div>
                                     <div class="row">
                                         <div class="col-12 o_kanban_primary_left" style="position:absolute; bottom:10px;" name="wc_stages">
-                                            <a name="%(act_mrp_block_workcenter)d" type="action" class="o_status float-right"
+                                            <a name="%(act_mrp_block_workcenter)d" type="action" class="o_status float-end"
                                                 title="No workorder currently in progress. Click to mark work center as blocked."
                                                 aria-label="No workorder currently in progress. Click to mark work center as blocked."
                                                 attrs="{'invisible': [('working_state','in',('blocked','done'))]}"/>
-                                            <a name="unblock" type="object" class=" o_status o_status_red float-right"
+                                            <a name="unblock" type="object" class=" o_status o_status_red float-end"
                                                 title="Workcenter blocked, click to unblock."
                                                 aria-label="Workcenter blocked, click to unblock."
                                                 attrs="{'invisible': [('working_state','in',('normal','done'))]}"/>
-                                            <a name="%(act_mrp_block_workcenter)d" type="action" class="o_status o_status_green float-right"
+                                            <a name="%(act_mrp_block_workcenter)d" type="action" class="o_status o_status_green float-end"
                                                 title="Work orders in progress. Click to block work center."
                                                 aria-label="Work orders in progress. Click to block work center."
                                                 attrs="{'invisible': [('working_state','in',('normal','blocked'))]}"/>
@@ -283,7 +283,7 @@
                                         <div role="menuitem" aria-haspopup="true" class="col-8">
                                             <ul role="menu" class="oe_kanban_colorpicker" data-field="color"/>
                                         </div>
-                                        <div role="menuitem" class="text-right">
+                                        <div role="menuitem" class="text-end">
                                             <a type="edit">Settings</a>
                                         </div>
                                     </div>
@@ -506,7 +506,7 @@
                             </div>
                             <div>
                                 <strong>Is a Blocking Reason? </strong>
-                                <span class="float-right" title="Is a Blocking Reason?">
+                                <span class="float-end" title="Is a Blocking Reason?">
                                     <field name="manual" widget="boolean"/>
                                 </span>
                             </div>
diff --git a/addons/mrp/views/mrp_workorder_views.xml b/addons/mrp/views/mrp_workorder_views.xml
index 419b5f4765a..628587e3cc3 100644
--- a/addons/mrp/views/mrp_workorder_views.xml
+++ b/addons/mrp/views/mrp_workorder_views.xml
@@ -239,7 +239,7 @@
                             <field name="production_state" invisible="1"/>
                             <field name="state" widget="badge" decoration-warning="state == 'progress'" decoration-success="state == 'done'" decoration-info="state not in ('progress', 'done', 'cancel')"
                                 attrs="{'invisible': [('production_state', '=', 'draft')], 'column_invisible': [('parent.state', '=', 'draft')]}"/>
-                            <button class="oe_link float-right" string="View WorkOrder" name="action_open_wizard" type="object"/>
+                            <button class="oe_link float-end" string="View WorkOrder" name="action_open_wizard" type="object"/>
                         </tree>
                     </field>
                 </page>
@@ -337,9 +337,9 @@
 
                 <templates>
                     <div t-name="gantt-popover" class="container-fluid">
-                        <div class="row no-gutters">
+                        <div class="row g-0">
                             <div class="col">
-                                <ul class="pl-1 mb-0 list-unstyled">
+                                <ul class="ps-1 mb-0 list-unstyled">
                                     <li><strong>Start Date: </strong> <t t-esc="userTimezoneStartDate.format('L LTS')"/></li>
                                     <li><strong>Stop Date: </strong> <t t-esc="userTimezoneStopDate.format('L LTS')"/></li>
                                     <li><strong>Workcenter: </strong> <t t-esc="workcenter_id[1]"/></li>
@@ -374,9 +374,9 @@
 
                 <templates>
                     <div t-name="gantt-popover" class="container-fluid">
-                        <div class="row no-gutters">
+                        <div class="row g-0">
                             <div class="col">
-                                <ul class="pl-1 mb-0 list-unstyled">
+                                <ul class="ps-1 mb-0 list-unstyled">
                                     <li><strong>Start Date: </strong> <t t-esc="userTimezoneStartDate.format('L LTS')"/></li>
                                     <li><strong>Stop Date: </strong> <t t-esc="userTimezoneStopDate.format('L LTS')"/></li>
                                     <li><strong>Workcenter: </strong> <t t-esc="workcenter_id[1]"/></li>
@@ -416,7 +416,7 @@
                                 </div>
                                 <div class="o_kanban_manage_button_section">
                                     <h2 class="ml8">
-                                        <span t-attf-class="badge #{['progress'].indexOf(record.state.raw_value) > -1 ? 'badge-warning' : ['ready', 'waiting', 'pending'].indexOf(record.state.raw_value) > -1 ? 'badge-primary' : ['done'].indexOf(record.state.raw_value) > -1 ? 'badge-success' : 'badge-danger'}">
+                                        <span t-attf-class="badge #{['progress'].indexOf(record.state.raw_value) > -1 ? 'text-bg-warning' : ['ready', 'waiting', 'pending'].indexOf(record.state.raw_value) > -1 ? 'text-bg-primary' : ['done'].indexOf(record.state.raw_value) > -1 ? 'text-bg-success' : 'text-bg-danger'}">
                                             <t t-esc="record.state.value"/>
                                         </span>
                                     </h2>
diff --git a/addons/mrp/views/res_config_settings_views.xml b/addons/mrp/views/res_config_settings_views.xml
index 41b2da5937d..4c4d6593307 100644
--- a/addons/mrp/views/res_config_settings_views.xml
+++ b/addons/mrp/views/res_config_settings_views.xml
@@ -32,7 +32,7 @@
                                     </div>
                                     <div class="row mt-2" attrs="{'invisible': [('group_mrp_routings','=',False)]}">
                                         <field name="group_mrp_workorder_dependencies" class="col-lg-1 ml16 mr0"/>
-                                        <div class="col pl-0">
+                                        <div class="col ps-0">
                                             <label for="group_mrp_workorder_dependencies"/>
                                             <div class="text-muted">
                                                 Set the order that work orders should be processed in. Activate the feature within each BoM's Miscellaneous tab
@@ -64,7 +64,7 @@
                                     </div>
                                     <div class="row mt-2" attrs="{'invisible': [('module_quality_control','=',False)]}">
                                         <field name="module_quality_control_worksheet" widget="upgrade_boolean" class="col-lg-1 ml16 mr0"/>
-                                        <div class="col pl-0">
+                                        <div class="col ps-0">
                                             <label for="module_quality_control_worksheet"/>
                                             <div class="text-muted">
                                                 Create customizable worksheets for your quality checks
@@ -128,7 +128,7 @@
                                 </div>
                                 <div class="o_setting_right_pane">
                                     <label string="Security Lead Time" for="use_manufacturing_lead"/>
-                                    <a href="https://www.odoo.com/documentation/master/applications/inventory_and_mrp/inventory/management/planning/scheduled_dates.html" title="Documentation" class="mr-2 o_doc_link" target="_blank"></a>
+                                    <a href="https://www.odoo.com/documentation/master/applications/inventory_and_mrp/inventory/management/planning/scheduled_dates.html" title="Documentation" class="me-2 o_doc_link" target="_blank"></a>
                                     <span class="fa fa-lg fa-building-o" title="Values set here are company-specific." role="img" aria-label="Values set here are company-specific." groups="base.group_multi_company"/>
                                     <div class="text-muted">
                                         Schedule manufacturing orders earlier to avoid delays
diff --git a/addons/mrp_subcontracting/report/mrp_report_bom_structure.xml b/addons/mrp_subcontracting/report/mrp_report_bom_structure.xml
index 4582f69cad8..fc9fb7f978a 100644
--- a/addons/mrp_subcontracting/report/mrp_report_bom_structure.xml
+++ b/addons/mrp_subcontracting/report/mrp_report_bom_structure.xml
@@ -15,14 +15,14 @@
                     <t t-foreach="range(data.get('extra_column_count', 0))" t-as="index">
                         <td/>
                     </t>
-                    <td class="text-right">
+                    <td class="text-end">
                         <span t-esc="data['subcontracting']['quantity']" t-options='{"widget": "float", "decimal_precision": "Product Unit of Measure"}'/>
                     </td>
                     <td groups="uom.group_uom"><span t-esc="data['subcontracting']['uom']"/></td>
-                    <td class="o_mrp_prod_cost text-right">
+                    <td class="o_mrp_prod_cost text-end">
                         <span t-esc="data['subcontracting']['prod_cost']" t-options='{"widget": "monetary", "display_currency": currency}'/>
                     </td>
-                    <td class="o_mrp_bom_cost text-right">
+                    <td class="o_mrp_bom_cost text-end">
                         <span t-esc="data['subcontracting']['bom_cost']" t-options='{"widget": "monetary", "display_currency": currency}'/>
                     </td>
                     <td/>
diff --git a/addons/mrp_subcontracting/views/subcontracting_portal_templates.xml b/addons/mrp_subcontracting/views/subcontracting_portal_templates.xml
index 8987e3f2d46..81ace10e909 100644
--- a/addons/mrp_subcontracting/views/subcontracting_portal_templates.xml
+++ b/addons/mrp_subcontracting/views/subcontracting_portal_templates.xml
@@ -35,19 +35,19 @@
                 <thead>
                     <tr class="active">
                         <th>Order</th>
-                        <th class="text-right">Source Document</th>
-                        <th class="text-right">Scheduled Date</th>
-                        <th class="text-right">Deadline Date</th>
-                        <th class="text-right">State</th>
+                        <th class="text-end">Source Document</th>
+                        <th class="text-end">Scheduled Date</th>
+                        <th class="text-end">Deadline Date</th>
+                        <th class="text-end">State</th>
                     </tr>
                 </thead>
                 <t t-foreach="pickings" t-as="picking">
                     <tr>
                         <td><a t-attf-href="/my/productions/#{picking.id}?{{ keep_query() }}"><span t-field="picking.name"/></a></td>
-                        <td class="text-right"><span t-field="picking.origin"/></td>
-                        <td class="text-right"><span t-field="picking.scheduled_date" t-options='{"widget": "date"}'/></td>
-                        <td class="text-right"><span t-field="picking.date_deadline" t-options='{"widget": "date"}'/></td>
-                        <td class="text-right"><span t-field="picking.state"/></td>
+                        <td class="text-end"><span t-field="picking.origin"/></td>
+                        <td class="text-end"><span t-field="picking.scheduled_date" t-options='{"widget": "date"}'/></td>
+                        <td class="text-end"><span t-field="picking.date_deadline" t-options='{"widget": "date"}'/></td>
+                        <td class="text-end"><span t-field="picking.state"/></td>
                     </tr>
                 </t>
             </t>
diff --git a/addons/note/views/note_views.xml b/addons/note/views/note_views.xml
index e12c275b3c4..7409ca273a1 100644
--- a/addons/note/views/note_views.xml
+++ b/addons/note/views/note_views.xml
@@ -98,7 +98,7 @@
                 <field name="tag_ids" widget="many2many_tags" options="{'color_field': 'color'}"/>
 
                 <div class="o_dropdown_kanban dropdown">
-                    <a role="button" class="dropdown-toggle o-no-caret btn" data-toggle="dropdown" data-display="static" href="#" aria-label="Dropdown menu" title="Dropdown menu">
+                    <a role="button" class="dropdown-toggle o-no-caret btn" data-bs-toggle="dropdown" data-bs-display="static" href="#" aria-label="Dropdown menu" title="Dropdown menu">
                         <span class="fa fa-ellipsis-v"/>
                     </a>
                     <div class="dropdown-menu" role="menu">
@@ -108,7 +108,7 @@
                 </div>
                 <div t-attf-class="d-flex #{noteHasFollowers ? 'flex-wrap' : 'flex-nowrap'}">
                   <div class="d-flex flex-grow-1">
-                    <span class="mr-2">
+                    <span class="me-2">
                       <a name="action_close" type="object" t-if="record.open.raw_value">
                         <i class="fa fa-check" role="img" aria-label="Opened" title="Opened"/>
                       </a>
@@ -123,7 +123,7 @@
                     </span>
                   </div>
                   <div t-attf-class="d-flex #{noteHasFollowers ? 'w-100 align-items-center justify-content-end' : 'align-items-end'}">
-                    <div t-if="noteHasFollowers" class="d-flex align-items-center mr-2 mt-2">
+                    <div t-if="noteHasFollowers" class="d-flex align-items-center me-2 mt-2">
                       <t t-foreach="record.message_partner_ids.raw_value" t-as="follower" t-key="follower">
                         <img
                             t-if="follower_index &lt; 5"
@@ -134,7 +134,7 @@
                         <small
                             t-if="follower_index == 5"
                             t-esc="'+' + (follower_size - 5)"
-                            class="text-info font-weight-bold ml-1"/>
+                            class="text-info fw-bold ms-1"/>
                       </t>
                     </div>
                     <field name="activity_ids" widget="kanban_activity" />
diff --git a/addons/payment/static/src/js/payment_form_mixin.js b/addons/payment/static/src/js/payment_form_mixin.js
index 7efc7fe2962..50fdf44de16 100644
--- a/addons/payment/static/src/js/payment_form_mixin.js
+++ b/addons/payment/static/src/js/payment_form_mixin.js
@@ -18,7 +18,7 @@ odoo.define('payment.payment_form_mixin', require => {
                     window.location.reload();
                 }
             });
-            this.$('[data-toggle="tooltip"]').tooltip();
+            this.$('[data-bs-toggle="tooltip"]').tooltip();
             this.txContext = {};
             Object.assign(this.txContext, this.$el.data());
             const $checkedRadios = this.$('input[name="o_payment_radio"]:checked');
diff --git a/addons/payment/views/account_journal_views.xml b/addons/payment/views/account_journal_views.xml
index 6d1c3b5970f..f110be226c4 100644
--- a/addons/payment/views/account_journal_views.xml
+++ b/addons/payment/views/account_journal_views.xml
@@ -12,7 +12,7 @@
                 <button name="action_open_acquirer_form"
                         type="object"
                         string="SETUP"
-                        class="float-right btn-secondary"
+                        class="float-end btn-secondary"
                         attrs="{'invisible': [('payment_acquirer_id', '=', False)]}"
                         groups="base.group_system"/>
             </xpath>
diff --git a/addons/payment/views/payment_acquirer_views.xml b/addons/payment/views/payment_acquirer_views.xml
index ff0e819321b..3158495c4ee 100644
--- a/addons/payment/views/payment_acquirer_views.xml
+++ b/addons/payment/views/payment_acquirer_views.xml
@@ -138,13 +138,13 @@
                                 <t t-if="installed">
                                     <field name="state" widget="label_selection" options="{'classes': {'enabled': 'success', 'test': 'warning', 'disabled' : 'danger'}}"/>
                                 </t>
-                                <button t-if="!installed and !selection_mode and !to_buy" type="object" class="btn btn-secondary float-right" name="button_immediate_install">Install</button>
+                                <button t-if="!installed and !selection_mode and !to_buy" type="object" class="btn btn-secondary float-end" name="button_immediate_install">Install</button>
                                 <t t-if="!installed and to_buy">
                                     <button href="https://odoo.com/pricing?utm_source=db&amp;utm_medium=module" target="_blank" class="btn btn-info btn-sm float_right">Upgrade</button>
-                                    <span class="badge badge-primary oe_inline o_enterprise_label">Enterprise</span>
+                                    <span class="badge text-bg-primary oe_inline o_enterprise_label">Enterprise</span>
                                 </t>
-                                <button t-if="installed and record.state.raw_value == 'disabled' and !selection_mode" type="edit" class="btn btn-primary float-right">Activate</button>
-                                <button t-if="installed and record.state.raw_value in ['enabled', 'test'] and !selection_mode" type="edit" class="btn btn-primary float-right">Configure</button>
+                                <button t-if="installed and record.state.raw_value == 'disabled' and !selection_mode" type="edit" class="btn btn-primary float-end">Activate</button>
+                                <button t-if="installed and record.state.raw_value in ['enabled', 'test'] and !selection_mode" type="edit" class="btn btn-primary float-end">Configure</button>
                             </div>
                         </div>
                     </t>
diff --git a/addons/payment/views/payment_portal_templates.xml b/addons/payment/views/payment_portal_templates.xml
index c2d26536a6f..5e006aaadbe 100644
--- a/addons/payment/views/payment_portal_templates.xml
+++ b/addons/payment/views/payment_portal_templates.xml
@@ -166,9 +166,9 @@
                                     <div class="col-md-5 text-muted">
                                         Processed by <t t-esc="tx.acquirer_id.sudo().name"/>
                                     </div>
-                                    <div class="col-md-4 offset-md-3 mt-2 pl-0">
+                                    <div class="col-md-4 offset-md-3 mt-2 ps-0">
                                         <a role="button"
-                                           t-attf-class="btn btn-#{status} float-right"
+                                           t-attf-class="btn btn-#{status} float-end"
                                            href="/my/home">
                                             <i class="fa fa-arrow-circle-right"/> Back to My Account
                                         </a>
diff --git a/addons/payment/views/payment_templates.xml b/addons/payment/views/payment_templates.xml
index 5267066238e..25c8d379da8 100644
--- a/addons/payment/views/payment_templates.xml
+++ b/addons/payment/views/payment_templates.xml
@@ -63,12 +63,12 @@
                             </span>
                             <!-- === "Test Mode" badge === -->
                             <span t-if="acquirer.state == 'test'"
-                                  class="badge-pill badge-warning ml-1">
+                                  class="rounded-pill text-bg-warning ms-1">
                                 Test Mode
                             </span>
                             <!-- === Extra fees badge === -->
                             <t t-if="fees_by_acquirer.get(acquirer)">
-                                <span class="badge-pill badge-secondary ml-1">
+                                <span class="rounded-pill text-bg-secondary ms-1">
                                     + <t t-esc="fees_by_acquirer.get(acquirer)"
                                          t-options="{'widget': 'monetary', 'display_currency': currency}"/>
                                     Fees
@@ -80,7 +80,7 @@
                         <!-- === Help message === -->
                         <div t-if="not is_html_empty(acquirer.pre_msg)"
                              t-out="acquirer.pre_msg"
-                             class="text-muted ml-3"/>
+                             class="text-muted ms-3"/>
                     </div>
                     <!-- === Acquirer inline form === -->
                     <div t-attf-id="o_payment_acquirer_inline_form_{{acquirer.id}}"
@@ -199,7 +199,7 @@
                             </span>
                             <!-- === "Test Mode" badge === -->
                             <span t-if="acquirer.state == 'test'"
-                                  class="badge-pill badge-warning"
+                                  class="rounded-pill text-bg-warning"
                                   style="margin-left:5px">
                                 Test Mode
                             </span>
@@ -209,7 +209,7 @@
                         <!-- === Help message === -->
                         <div t-if="not is_html_empty(acquirer.pre_msg)"
                              t-out="acquirer.pre_msg"
-                             class="text-muted ml-3"/>
+                             class="text-muted ms-3"/>
                     </div>
                     <!-- === Acquirer inline form === -->
                     <t t-if="acquirer.sudo()._should_build_inline_form(is_validation=True)">
@@ -247,7 +247,7 @@
                         </label>
                         <!-- === "Delete" token button === -->
                         <button name="o_payment_delete_token"
-                                class="btn btn-primary btn-sm float-right">
+                                class="btn btn-primary btn-sm float-end">
                             <i class="fa fa-trash"/> Delete
                         </button>
                     </div>
@@ -276,7 +276,7 @@
 
     <!-- Expandable payment icon list -->
     <template id="icon_list" name="Payment Icon List">
-        <ul class="payment_icon_list float-right list-inline" data-max-icons="3">
+        <ul class="payment_icon_list float-end list-inline" data-max-icons="3">
             <t t-set="icon_index" t-value="0"/>
             <t t-set="MAX_ICONS" t-value="3"/>
             <!-- === Icons === -->
@@ -285,7 +285,7 @@
                 <li t-attf-class="list-inline-item{{'' if (icon_index &lt; MAX_ICONS) else ' d-none'}}">
                     <span t-esc="icon.image_payment_form"
                           t-options="{'widget': 'image', 'alt-field': 'name'}"
-                          data-toggle="tooltip"
+                          data-bs-toggle="tooltip"
                           t-att-title="icon.name"/>
                 </li>
                 <t t-set="icon_index" t-value="icon_index + 1"/>
@@ -294,9 +294,9 @@
                 <!-- === "show more" button === -->
                 <!-- Only displayed if too many payment icons -->
                 <li style="display:block;" class="list-inline-item">
-                    <span class="float-right more_option text-info">
+                    <span class="float-end more_option text-info">
                         <a name="o_payment_icon_more"
-                           data-toggle="tooltip"
+                           data-bs-toggle="tooltip"
                            t-att-title="', '.join([icon.name for icon in acquirer.payment_icon_ids[MAX_ICONS:]])">
                             show more
                         </a>
@@ -305,7 +305,7 @@
                 <!-- === "show less" button === -->
                 <!-- Only displayed when "show more" is clicked -->
                 <li style="display:block;" class="list-inline-item d-none">
-                    <span class="float-right more_option text-info">
+                    <span class="float-end more_option text-info">
                         <a name="o_payment_icon_less">show less</a>
                     </span>
                 </li>
@@ -334,7 +334,7 @@
             - 'label' - The label for the submit button
             - 'icon_class' - The Font Awesome icon class (e.g. 'fa-lock') for the submit button
         -->
-        <div class="float-right mt-2">
+        <div class="float-end mt-2">
             <button name="o_payment_submit_button"
                     type="submit"
                     class="btn btn-primary btn-lg mb8 mt8"
@@ -353,22 +353,22 @@
         <div t-if="tx.state == 'pending' and not is_html_empty(tx.acquirer_id.sudo().pending_msg)"
              class="alert alert-warning alert-dismissible">
             <span t-out="tx.acquirer_id.sudo().pending_msg"/>
-            <button class="close" data-dismiss="alert" title="Dismiss">×</button>
+            <button class="btn-close" data-bs-dismiss="alert" title="Dismiss"></button>
         </div>
         <div t-elif="tx.state == 'authorized' and not is_html_empty(tx.acquirer_id.sudo().auth_msg)"
              class="alert alert-success alert-dismissible">
             <span t-out="tx.acquirer_id.sudo().auth_msg"/>
-            <button class="close" data-dismiss="alert" title="Dismiss">×</button>
+            <button class="btn-close" data-bs-dismiss="alert" title="Dismiss"></button>
         </div>
         <div t-elif="tx.state == 'done' and not is_html_empty(tx.acquirer_id.sudo().done_msg)"
              class="alert alert-success alert-dismissible">
             <span t-out="tx.acquirer_id.sudo().done_msg"/>
-            <button class="close" data-dismiss="alert" title="Dismiss">×</button>
+            <button class="btn-close" data-bs-dismiss="alert" title="Dismiss"></button>
         </div>
         <div t-elif="tx.state == 'cancel' and not is_html_empty(tx.acquirer_id.sudo().cancel_msg)"
              class="alert alert-danger alert-dismissible">
             <span t-out="tx.acquirer_id.sudo().cancel_msg"/>
-            <button class="close" data-dismiss="alert" title="Dismiss">×</button>
+            <button class="btn-close" data-bs-dismiss="alert" title="Dismiss"></button>
         </div>
         <span t-if="tx.state_message" t-esc="tx.state_message"/>
     </template>
diff --git a/addons/payment/views/payment_transaction_views.xml b/addons/payment/views/payment_transaction_views.xml
index 499033c5075..2242960417c 100644
--- a/addons/payment/views/payment_transaction_views.xml
+++ b/addons/payment/views/payment_transaction_views.xml
@@ -104,7 +104,7 @@
                                     <span><field name="partner_name"/></span>
                                 </div>
                                 <div class="col-6">
-                                    <span class="float-right">
+                                    <span class="float-end">
                                         <field name="amount"/>
                                         <field name="currency_id" invisible="1"/>
                                     </span>
diff --git a/addons/payment/wizards/payment_link_wizard_views.xml b/addons/payment/wizards/payment_link_wizard_views.xml
index 5951c9caddb..a50747731c8 100644
--- a/addons/payment/wizards/payment_link_wizard_views.xml
+++ b/addons/payment/wizards/payment_link_wizard_views.xml
@@ -27,7 +27,7 @@
                     <field name="link" readonly="1" widget="CopyClipboardChar"/>
                 </group>
                 <group attrs="{'invisible':[('partner_email', '!=', False)]}">
-                    <p class="alert alert-warning font-weight-bold" role="alert">This partner has no email, which may cause issues with some payment acquirers. Setting an email for this partner is advised.</p>
+                    <p class="alert alert-warning fw-bold" role="alert">This partner has no email, which may cause issues with some payment acquirers. Setting an email for this partner is advised.</p>
                 </group>
                 <footer>
                     <button string="Close" class="btn-primary" special="cancel" data-hotkey="z"/>
diff --git a/addons/payment_authorize/views/payment_authorize_templates.xml b/addons/payment_authorize/views/payment_authorize_templates.xml
index 535a0280809..97e3373d3e2 100644
--- a/addons/payment_authorize/views/payment_authorize_templates.xml
+++ b/addons/payment_authorize/views/payment_authorize_templates.xml
@@ -40,7 +40,7 @@
             </div>
             <div class="form-group">
                 <label t-attf-for="o_authorize_account_type_{{acquirer_id}}" class="col-form-label">Bank Account Type</label>
-                <select t-attf-id="o_authorize_account_type_{{acquirer_id}}" required="" class="form-control">
+                <select t-attf-id="o_authorize_account_type_{{acquirer_id}}" required="" class="form-select">
                     <option value="checking">Personal Checking</option>
                     <option value="savings">Personal Savings</option>
                     <option value="businessChecking">Business Checking</option>
diff --git a/addons/payment_test/views/payment_templates.xml b/addons/payment_test/views/payment_templates.xml
index 5ec72cab6b1..f06c35d52d3 100644
--- a/addons/payment_test/views/payment_templates.xml
+++ b/addons/payment_test/views/payment_templates.xml
@@ -4,7 +4,7 @@
     <template id="verified_token_checkmark" inherit_id="payment.verified_token_checkmark">
         <xpath expr="//t[@name='payment_test_hook']" position="replace">
             <t t-if="token.provider=='test'">
-                <span class="badge badge-warning">Test Token</span>
+                <span class="badge text-bg-warning">Test Token</span>
             </t>
         </xpath>
     </template>
diff --git a/addons/payment_test/views/payment_test_templates.xml b/addons/payment_test/views/payment_test_templates.xml
index e4acfe8e867..f5df9facc75 100644
--- a/addons/payment_test/views/payment_test_templates.xml
+++ b/addons/payment_test/views/payment_test_templates.xml
@@ -3,7 +3,7 @@
 
     <template id="inline_form">
         <div t-attf-id="test-container-{{acquirer_id}}">
-            <div class="form-row">
+            <div class="row">
                 <div class="form-group">
                     <input name="acquirer_id" type="hidden" id="acquirer_id" t-att-value="id"/>
                     <input name="partner_id" type="hidden" t-att-value="partner_id"/>
@@ -22,7 +22,7 @@
                     <label for="simulated_payment_state" class="mt-0">
                         <small><b>Payment Status</b></small>
                     </label>
-                    <select id="simulated_payment_state" class="form-control">
+                    <select id="simulated_payment_state" class="form-select">
                         <option value="done" title="Successful payment">
                             Successful
                         </option>
diff --git a/addons/point_of_sale/static/src/backend/web_overrides/res_config_settings.js b/addons/point_of_sale/static/src/backend/web_overrides/res_config_settings.js
index 360f2435db3..3c7983ebadd 100644
--- a/addons/point_of_sale/static/src/backend/web_overrides/res_config_settings.js
+++ b/addons/point_of_sale/static/src/backend/web_overrides/res_config_settings.js
@@ -34,9 +34,9 @@ odoo.define('point_of_sale.res_config_settings', function (require) {
     ResConfigSettings.Controller.include({
         _startRenderer() {
             return this._super.apply(this, arguments).then(result => {
-                // Force tooltip to elements with `pos-data-toggle="tooltip"` attribute.
-                // We made it specific to ensure we don't interfere with other data-toggle="tooltip" in the form.
-                this.renderer.$('[pos-data-toggle="tooltip"]').tooltip();
+                // Force tooltip to elements with `pos-data-bs-toggle="tooltip"` attribute.
+                // We made it specific to ensure we don't interfere with other data-bs-toggle="tooltip" in the form.
+                this.renderer.$('[pos-data-bs-toggle="tooltip"]').tooltip();
                 return result;
             })
         }
diff --git a/addons/point_of_sale/views/point_of_sale_dashboard.xml b/addons/point_of_sale/views/point_of_sale_dashboard.xml
index e328e43a802..965f1485dae 100644
--- a/addons/point_of_sale/views/point_of_sale_dashboard.xml
+++ b/addons/point_of_sale/views/point_of_sale_dashboard.xml
@@ -70,13 +70,13 @@
                                         <t t-esc="record.name.value"/>
                                     </div>
                                     <t t-if="!record.current_session_id.raw_value &amp;&amp; record.pos_session_username.value">
-                                        <div class="badge badge-info o_kanban_inline_block">Opened by <t t-esc="record.pos_session_username.value"/></div>
+                                        <div class="badge text-bg-info o_kanban_inline_block">Opened by <t t-esc="record.pos_session_username.value"/></div>
                                     </t>
                                     <t t-if="record.pos_session_state.raw_value == 'opening_control'">
-                                        <div class="badge badge-info o_kanban_inline_block">Opening Control</div>
+                                        <div class="badge text-bg-info o_kanban_inline_block">Opening Control</div>
                                     </t>
                                     <t t-if="record.pos_session_state.raw_value == 'closing_control'">
-                                        <div class="badge badge-info o_kanban_inline_block">Closing Control</div>
+                                        <div class="badge text-bg-info o_kanban_inline_block">Closing Control</div>
                                     </t>
                                     <t t-if="record.pos_session_state.raw_value == 'opened' and record.pos_session_duration.raw_value > 1">
                                         <div t-attf-class="badge bg-#{record.pos_session_duration.raw_value > 3 and 'danger' or 'warning'} o_kanban_inline_block"
diff --git a/addons/point_of_sale/views/pos_order_view.xml b/addons/point_of_sale/views/pos_order_view.xml
index 7d95611fec4..af3a3182797 100644
--- a/addons/point_of_sale/views/pos_order_view.xml
+++ b/addons/point_of_sale/views/pos_order_view.xml
@@ -201,7 +201,7 @@
                                     <span><t t-esc="record.date_order.value"/></span>
                                 </div>
                                 <div class="col-4">
-                                    <span class="float-right text-right">
+                                    <span class="float-end text-end">
                                         <field name="state" widget="label_selection" options="{'classes': {'draft': 'default',
                                         'invoiced': 'success', 'cancel': 'danger'}}"/>
                                     </span>
diff --git a/addons/point_of_sale/views/res_config_settings_views.xml b/addons/point_of_sale/views/res_config_settings_views.xml
index 52ba691e1bd..aa5c465da49 100644
--- a/addons/point_of_sale/views/res_config_settings_views.xml
+++ b/addons/point_of_sale/views/res_config_settings_views.xml
@@ -18,15 +18,15 @@
                 <field name="group_cash_rounding" invisible="1"/>
 
                 <div class="app_settings_block" data-string="Point of sale" string="Point of Sale" data-key="point_of_sale" groups="point_of_sale.group_pos_manager">
-                    <div id="pos_header" class="row o_settings_container mb-0 mt-0 ml-0 mw-100"
+                    <div id="pos_header" class="row o_settings_container mb-0 mt-0 ms-0 mw-100"
                         style="background-color: #FEF0D0; margin-bottom: 0px !important; margin-top: 0px !important;">
-                        <div class="col-xs-12 col-md-6 ml-0 o_setting_box">
-                            <div class="o_setting_right_pane border-left-0 ml-0 pl-0">
+                        <div class="col-xs-12 col-md-6 ms-0 o_setting_box">
+                            <div class="o_setting_right_pane border-start-0 ms-0 ps-0">
                                 <div class="content-group">
                                     <div class="row mt8">
-                                        <label class="col-lg-3 pl-0" string="Point of Sale" for="pos_config_id"/>
+                                        <label class="col-lg-3 ps-0" string="Point of Sale" for="pos_config_id"/>
                                         <field name="pos_config_id" options="{'no_open': True, 'no_create': True}" title="Settings on this page will apply to this point of sale."/>
-                                        <button name="action_pos_config_create_new" type="object" string="+ New Shop" class="btn-link ml-2" style="line-height: 0.5;"/>
+                                        <button name="action_pos_config_create_new" type="object" string="+ New Shop" class="btn-link ms-2" style="line-height: 0.5;"/>
                                     </div>
                                 </div>
                             </div>
@@ -139,7 +139,7 @@
                             <div class="o_setting_right_pane">
                                 <div>
                                     <label string="Default Sales Tax" for="sale_tax_id"/>
-                                    <i class="fa fa-info-circle mr-1" title="This setting is common to all PoS." pos-data-toggle="tooltip"/>
+                                    <i class="fa fa-info-circle me-1" title="This setting is common to all PoS." pos-data-toggle="tooltip"/>
                                     <div class="text-muted">
                                         Default sales tax for products
                                     </div>
@@ -157,7 +157,7 @@
                             <div class="o_setting_right_pane">
                                 <div>
                                     <label string="Default Temporary Account" for="account_default_pos_receivable_account_id"/>
-                                    <i class="fa fa-info-circle mr-1" title="This setting is common to all PoS." pos-data-toggle="tooltip"/>
+                                    <i class="fa fa-info-circle me-1" title="This setting is common to all PoS." pos-data-toggle="tooltip"/>
                                     <div class="text-muted">
                                         Intermediary account used for unidentified customers.
                                     </div>
@@ -422,7 +422,7 @@
                                     Set a maximum difference allowed between the expected and counted money during the closing of the session
                                 </div>
                                 <div class="content-group mt16" attrs="{'invisible': [('pos_set_maximum_difference', '=', False)]}">
-                                    <label for="pos_amount_authorized_diff" string="Authorized Difference" class="font-weight-normal"/>
+                                    <label for="pos_amount_authorized_diff" string="Authorized Difference" class="fw-normal"/>
                                     <field name="pos_amount_authorized_diff"/>
                                 </div>
                             </div>
@@ -461,7 +461,7 @@
 
                     <h2>
                         Payment Terminals
-                        <i class="fa fa-info-circle mr-1" title="Those settings are common to all PoS." pos-data-toggle="tooltip"/>
+                        <i class="fa fa-info-circle me-1" title="Those settings are common to all PoS." pos-data-toggle="tooltip"/>
                     </h2>
                     <div class="row mt16 o_settings_container" id="pos_payment_terminals_section">
                         <div class="col-12 col-lg-6 o_setting_box"
@@ -609,15 +609,15 @@
                                 </div>
                                 <div class="mt16" attrs="{'invisible' : [('pos_ship_later', '=', False)]}">
                                     <div>
-                                        <label for="pos_warehouse_id" string="Warehouse" class="font-weight-normal"/>
+                                        <label for="pos_warehouse_id" string="Warehouse" class="fw-normal"/>
                                         <field name="pos_warehouse_id" attrs="{'required': [('pos_ship_later', '=', True)]}"/>
                                     </div>
                                     <div groups="stock.group_adv_location">
-                                        <label for="pos_route_id" string="Specific route" class="font-weight-normal"/>
+                                        <label for="pos_route_id" string="Specific route" class="fw-normal"/>
                                         <field name="pos_route_id"/>
                                     </div>
                                     <div>
-                                        <label for="pos_picking_policy" class="font-weight-normal"/>
+                                        <label for="pos_picking_policy" class="fw-normal"/>
                                         <field name="pos_picking_policy" attrs="{'required': [('pos_ship_later', '=', True)]}"/>
                                     </div>
                                 </div>
@@ -628,7 +628,7 @@
                             </div>
                             <div class="o_setting_right_pane">
                                 <span class="o_form_label">Barcodes</span>
-                                <i class="fa fa-info-circle mr-1" title="This setting is common to all PoS." pos-data-toggle="tooltip"/>
+                                <i class="fa fa-info-circle me-1" title="This setting is common to all PoS." pos-data-toggle="tooltip"/>
                                 <div class="text-muted">
                                     Use barcodes to scan products, customer cards, etc.
                                 </div>
diff --git a/addons/point_of_sale/views/res_partner_view.xml b/addons/point_of_sale/views/res_partner_view.xml
index e77a568ea21..20478642c5e 100644
--- a/addons/point_of_sale/views/res_partner_view.xml
+++ b/addons/point_of_sale/views/res_partner_view.xml
@@ -34,8 +34,8 @@
                 </field>
                 <xpath expr="//div[hasclass('oe_kanban_bottom_left')]" position="inside">
                     <a t-if="record.pos_order_count.value>0" data-type="object" data-name="action_view_pos_order"
-                       href="#" class="oe_kanban_action oe_kanban_action_a mr-1">
-                        <span class="badge badge-pill">
+                       href="#" class="oe_kanban_action oe_kanban_action_a me-1">
+                        <span class="badge rounded-pill">
                             <i class="fa fa-fw fa-shopping-bag" role="img" aria-label="Shopping cart" title="Shopping cart"/>
                             <t t-out="record.pos_order_count.value"/>
                         </span>
diff --git a/addons/portal/static/src/scss/portal.scss b/addons/portal/static/src/scss/portal.scss
index 305a696c0b9..d21616868ff 100644
--- a/addons/portal/static/src/scss/portal.scss
+++ b/addons/portal/static/src/scss/portal.scss
@@ -59,7 +59,7 @@ header {
 }
 .navbar {
     margin-bottom: 0;
-    .nav.navbar-nav.float-right {
+    .nav.navbar-nav.float-end {
         @include media-breakpoint-down(md) {
             float: none!important;
         }
@@ -187,10 +187,10 @@ li > p {
 
 // Images spacing
 img, .media_iframe_video, .o_image {
-    &.float-right {
+    &.float-end {
         margin-left: $grid-gutter-width / 2;
     }
-    &.float-left {
+    &.float-start {
         margin-right: $grid-gutter-width / 2;
     }
 }
diff --git a/addons/portal/static/src/xml/portal_chatter.xml b/addons/portal/static/src/xml/portal_chatter.xml
index 15fc742a355..d7849f70925 100644
--- a/addons/portal/static/src/xml/portal_chatter.xml
+++ b/addons/portal/static/src/xml/portal_chatter.xml
@@ -103,10 +103,10 @@
 
     <!-- Chatter: internal toggle widget -->
     <t t-name="portal.chatter_internal_toggle">
-        <div t-if="message.is_message_subtype_note" class="float-right">
+        <div t-if="message.is_message_subtype_note" class="float-end">
             <button class="btn btn-secondary" title="Internal notes are only displayed to internal users." disabled="true">Internal Note</button>
         </div>
-        <div t-else="" t-attf-class="float-right o_portal_chatter_js_is_internal #{message.is_internal and 'o_portal_message_internal_on' or 'o_portal_message_internal_off'}"
+        <div t-else="" t-attf-class="float-end o_portal_chatter_js_is_internal #{message.is_internal and 'o_portal_message_internal_on' or 'o_portal_message_internal_off'}"
                 t-att-data-message-id="message.id"
                 t-att-data-is-internal="message.is_internal">
             <button class="btn btn-danger"
diff --git a/addons/portal/static/src/xml/portal_signature.xml b/addons/portal/static/src/xml/portal_signature.xml
index 43456d9c18e..ccd33541559 100644
--- a/addons/portal/static/src/xml/portal_signature.xml
+++ b/addons/portal/static/src/xml/portal_signature.xml
@@ -6,7 +6,7 @@
             <input type="hidden" name="csrf_token" t-att-value="widget.csrf_token"/>
             <div class="o_web_sign_name_and_signature"/>
             <div class="o_portal_sign_controls my-3">
-                <div class="text-right my-3">
+                <div class="text-end my-3">
                     <button type="submit" class="o_portal_sign_submit btn btn-primary" disabled="disabled">
                         <i class="fa fa-check"/>
                         <t t-esc="widget.sendLabel"/>
diff --git a/addons/portal/views/portal_templates.xml b/addons/portal/views/portal_templates.xml
index ece75a73f5e..f64030444af 100644
--- a/addons/portal/views/portal_templates.xml
+++ b/addons/portal/views/portal_templates.xml
@@ -12,7 +12,7 @@
                         <a href="/" class="navbar-brand logo">
                             <img t-att-src="'/logo.png?company=%s' % res_company.id" t-att-alt="'Logo of %s' % res_company.name" t-att-title="res_company.name"/>
                         </a>
-                        <ul id="top_menu" class="nav navbar-nav ml-auto">
+                        <ul id="top_menu" class="nav navbar-nav ms-auto">
                             <t t-call="portal.placeholder_user_sign_in">
                                 <t t-set="_item_class" t-value="'nav-item'"/>
                                 <t t-set="_link_class" t-value="'nav-link'"/>
@@ -21,7 +21,7 @@
                                 <t t-set="_user_name" t-value="true"/>
                                 <t t-set="_item_class" t-value="'nav-item dropdown'"/>
                                 <t t-set="_link_class" t-value="'nav-link'"/>
-                                <t t-set="_dropdown_menu_class" t-value="'dropdown-menu-right'"/>
+                                <t t-set="_dropdown_menu_class" t-value="'dropdown-menu-end'"/>
                             </t>
                         </ul>
                     </div>
@@ -55,7 +55,7 @@
             <t t-set="active_lang" t-value="list(filter(lambda lg : lg[0] == lang, languages))[0]"/>
             <t t-set="language_selector_visible" t-value="len(languages) &gt; 1"/>
             <div t-attf-class="js_language_selector #{_div_classes} d-print-none" t-if="language_selector_visible">
-                <button t-attf-class="btn btn-sm btn-outline-secondary border-0 dropdown-toggle #{_btn_class}" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+                <button t-attf-class="btn btn-sm btn-outline-secondary border-0 dropdown-toggle #{_btn_class}" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                     <span t-if="not no_text"
                             class="align-middle"
                             t-esc="active_lang[2].split('/').pop()"/>
@@ -84,7 +84,7 @@
            t-nocache-_dropdown_menu_class="_dropdown_menu_class">
             <t t-set="is_connected" t-value="not user_id._is_public()"/>
             <li t-if="is_connected" t-attf-class="#{_item_class} o_no_autohide_item">
-                <a href="#" role="button" data-toggle="dropdown" t-attf-class="dropdown-toggle #{_link_class}">
+                <a href="#" role="button" data-bs-toggle="dropdown" t-attf-class="dropdown-toggle #{_link_class}">
                     <t t-if="_avatar">
                         <t t-set="avatar_source" t-value="image_data_uri(user_id.avatar_256)"/>
                         <img t-att-src="avatar_source" t-attf-class="rounded-circle o_object_fit_cover #{_avatar_class}" width="24" height="24" alt="" loading="eager"/>
@@ -93,12 +93,12 @@
                     <span t-if="_user_name" t-attf-class="#{_user_name_class}" t-esc="user_id.name[:23] + '...' if user_id.name and len(user_id.name) &gt; 25 else user_id.name"/>
                 </a>
                 <div t-attf-class="dropdown-menu js_usermenu #{_dropdown_menu_class}" role="menu">
-                    <a groups="base.group_user" href="/web" role="menuitem" class="dropdown-item pl-3" id="o_backend_user_dropdown_link">
-                        <i class="fa fa-fw fa-th mr-1 small text-muted"/> Apps
+                    <a groups="base.group_user" href="/web" role="menuitem" class="dropdown-item ps-3" id="o_backend_user_dropdown_link">
+                        <i class="fa fa-fw fa-th me-1 small text-muted"/> Apps
                     </a>
                     <div id="o_logout_divider" class="dropdown-divider"/>
-                    <a t-attf-href="/web/session/logout?redirect=/" role="menuitem" id="o_logout" class="dropdown-item pl-3">
-                        <i class="fa fa-fw fa-sign-out mr-1 small text-muted"/> Logout
+                    <a t-attf-href="/web/session/logout?redirect=/" role="menuitem" id="o_logout" class="dropdown-item ps-3">
+                        <i class="fa fa-fw fa-sign-out me-1 small text-muted"/> Logout
                     </a>
                 </div>
             </li>
@@ -107,7 +107,7 @@
 
     <template id="portal_breadcrumbs" name="Portal Breadcrumbs">
         <ol t-if="page_name != 'home'" class="o_portal_submenu breadcrumb mb-0 py-2 flex-grow-1">
-            <li class="breadcrumb-item ml-1"><a href="/my/home" aria-label="Home" title="Home"><i class="fa fa-home"/></a></li>
+            <li class="breadcrumb-item ms-1"><a href="/my/home" aria-label="Home" title="Home"><i class="fa fa-home"/></a></li>
             <li t-if="page_name == 'my_details'" class="breadcrumb-item">Details</li>
         </ol>
     </template>
@@ -116,9 +116,9 @@
         <div t-ignore="true" class="text-center">
             <t t-if="custom_html" t-out="custom_html"/>
             <t t-else="">This is a preview of the customer portal.</t>
-            <a t-att-href="backend_url"><i class="fa fa-arrow-right mr-1"/>Back to edit mode</a>
+            <a t-att-href="backend_url"><i class="fa fa-arrow-right me-1"/>Back to edit mode</a>
         </div>
-        <button type="button" class="close" data-dismiss="alert" aria-label="Close"> &#215; </button>
+        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
     </template>
 
     <template id="portal_layout" name="Portal Layout">
@@ -126,7 +126,7 @@
             <t t-set="is_portal" t-value="True"/>
 
             <div t-if="not no_breadcrumbs and not my_details and not breadcrumbs_searchbar" class="o_portal container mt-3">
-                <div class="row align-items-center bg-white no-gutters border rounded">
+                <div class="row align-items-center bg-white g-0 border rounded">
                     <div class="col-10">
                         <t t-call="portal.portal_breadcrumbs"></t>
                     </div>
@@ -197,10 +197,10 @@
         <a t-att-href="url" t-att-title="title" class="list-group-item list-group-item-action d-flex align-items-center justify-content-between">
             <t t-esc="title"/>
             <t t-if='count'>
-                <span class="badge badge-secondary badge-pill" t-esc="count"/>
+                <span class="badge text-bg-secondary rounded-pill" t-esc="count"/>
             </t>
             <t t-elif="placeholder_count">
-                <span class="badge badge-secondary badge-pill" t-att-data-placeholder_count="placeholder_count">
+                <span class="badge text-bg-secondary rounded-pill" t-att-data-placeholder_count="placeholder_count">
                     <i class="fa fa-spin fa-circle-o-notch"></i>
                 </span>
             </t>
@@ -259,20 +259,20 @@
             <t t-if="breadcrumbs_searchbar">
                 <t t-call="portal.portal_breadcrumbs"/>
             </t>
-            <span t-else="" class="navbar-brand mb-0 h1 mr-auto" t-esc="title or 'No title'"/>
+            <span t-else="" class="navbar-brand mb-0 h1 me-auto" t-esc="title or 'No title'"/>
 
             <!--  Collapse button -->
-            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#o_portal_navbar_content" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle filters">
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#o_portal_navbar_content" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle filters">
                 <span class="navbar-toggler-icon small"/>
             </button>
 
             <!--  Collapsable content  -->
             <div class="collapse navbar-collapse" id="o_portal_navbar_content">
-                <div class="nav flex-column flex-lg-row ml-auto p-0 mb-3 mb-lg-0 mt-1 mt-lg-0">
+                <div class="nav flex-column flex-lg-row ms-auto p-0 mb-3 mb-lg-0 mt-1 mt-lg-0">
                     <div t-if="searchbar_sortings" class="form-inline">
-                        <span class="small mr-1 navbar-text">Sort By:</span>
+                        <span class="small me-1 navbar-text">Sort By:</span>
                         <div class="btn-group">
-                            <button id="portal_searchbar_sortby" data-toggle="dropdown" class="btn btn-secondary btn-sm dropdown-toggle">
+                            <button id="portal_searchbar_sortby" data-bs-toggle="dropdown" class="btn btn-secondary btn-sm dropdown-toggle">
                                 <t t-esc="searchbar_sortings[sortby].get('label', 'Newest')"/>
                             </button>
                             <div class="dropdown-menu" aria-labelledby="portal_searchbar_sortby">
@@ -285,10 +285,10 @@
                             </div>
                         </div>
                     </div>
-                    <div t-if="searchbar_filters" class="form-inline ml-lg-2">
-                        <span class="small mr-1 navbar-text">Filter By:</span>
+                    <div t-if="searchbar_filters" class="form-inline ms-lg-2">
+                        <span class="small me-1 navbar-text">Filter By:</span>
                         <div class="btn-group">
-                            <button id="portal_searchbar_filters" data-toggle="dropdown" class="btn btn-secondary btn-sm dropdown-toggle">
+                            <button id="portal_searchbar_filters" data-bs-toggle="dropdown" class="btn btn-secondary btn-sm dropdown-toggle">
                                 <t t-esc="searchbar_filters.get(filterby,searchbar_filters.get('all')).get('label', 'All')"/>
                             </button>
                             <div class="dropdown-menu" aria-labelledby="portal_searchbar_filters">
@@ -301,10 +301,10 @@
                             </div>
                         </div>
                     </div>
-                    <div t-if="searchbar_groupby" class="form-inline ml-lg-2">
-                        <span class="small mr-1 navbar-text">Group By:</span>
+                    <div t-if="searchbar_groupby" class="form-inline ms-lg-2">
+                        <span class="small me-1 navbar-text">Group By:</span>
                         <div class="btn-group">
-                            <button id="portal_searchbar_groupby" data-toggle="dropdown" class="btn btn-secondary btn-sm dropdown-toggle">
+                            <button id="portal_searchbar_groupby" data-bs-toggle="dropdown" class="btn btn-secondary btn-sm dropdown-toggle">
                                 <t t-esc="searchbar_groupby[groupby].get('label', 'None')"/>
                             </button>
                             <div class="dropdown-menu" aria-labelledby="portal_searchbar_groupby">
@@ -319,9 +319,9 @@
                     </div>
                     <t t-out="0"/>
                 </div>
-                <form t-if="searchbar_inputs" class="form-inline o_portal_search_panel ml-lg-4 col-xl-4 col-md-5">
+                <form t-if="searchbar_inputs" class="form-inline o_portal_search_panel ms-lg-4 col-xl-4 col-md-5">
                     <div class="input-group input-group-sm w-100">
-                        <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"/>
+                        <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown"/>
                         <div class="dropdown-menu" role="menu">
                             <t t-foreach='searchbar_inputs' t-as='input'>
                                 <a t-att-href="'#' + input_value['input']"
@@ -357,15 +357,15 @@
             <hr class="mt-1 mb0"/>
             <h6 class="mb-1"><b t-esc="sales_user.name"/></h6>
             <div class="d-flex align-items-center mb-1">
-                <div class="fa fa-envelope fa-fw mr-1"></div>
+                <div class="fa fa-envelope fa-fw me-1"></div>
                 <a t-att-href="'mailto:'+sales_user.email" t-esc="sales_user.email"/>
             </div>
             <div class="d-flex flex-nowrap align-items-center mb-1">
-                <div class="fa fa-phone fa-fw mr-1"></div>
+                <div class="fa fa-phone fa-fw me-1"></div>
                 <span t-esc="sales_user.phone"/>
             </div>
             <div class="d-flex flex-nowrap align-items-center mb-1">
-                <div class="fa fa-map-marker fa-fw mr-1"></div>
+                <div class="fa fa-map-marker fa-fw me-1"></div>
                 <span t-esc="sales_user.city"/>
             </div>
         </div>
@@ -436,7 +436,7 @@
                             </div>
                             <div t-attf-class="form-group #{error.get('country_id') and 'o_has_error' or ''} col-xl-6">
                                 <label class="col-form-label" for="country_id">Country</label>
-                                <select name="country_id" t-attf-class="form-control #{error.get('country_id') and 'is-invalid' or ''}">
+                                <select name="country_id" t-attf-class="form-select #{error.get('country_id') and 'is-invalid' or ''}">
                                     <option value="">Country...</option>
                                     <t t-foreach="countries or []" t-as="country">
                                         <option t-att-value="country.id" t-att-selected="country.id == int(country_id) if country_id else country.id == partner.country_id.id">
@@ -447,7 +447,7 @@
                             </div>
                             <div t-attf-class="form-group #{error.get('state_id') and 'o_has_error' or ''} col-xl-6">
                                 <label class="col-form-label label-optional" for="state_id">State / Province</label>
-                                <select name="state_id" t-attf-class="form-control #{error.get('state_id') and 'is-invalid' or ''}">
+                                <select name="state_id" t-attf-class="form-select #{error.get('state_id') and 'is-invalid' or ''}">
                                     <option value="">select...</option>
                                     <t t-foreach="states or []" t-as="state">
                                         <option t-att-value="state.id" style="display:none;" t-att-data-country_id="state.country_id.id" t-att-selected="state.id == partner.state_id.id">
@@ -459,7 +459,7 @@
                             <input type="hidden" name="redirect" t-att-value="redirect"/>
                         </div>
                         <div class="clearfix">
-                            <button type="submit" class="btn btn-primary float-right mb32 ">
+                            <button type="submit" class="btn btn-primary float-end mb32 ">
                                 Confirm
                                 <span class="fa fa-long-arrow-right" />
                             </button>
@@ -557,8 +557,8 @@
             <section name="portal_deactivate_account" groups="base.group_portal">
                 <h3>Delete Account</h3>
                 <t t-set="deactivate_error" t-value="get_error(errors, 'deactivate')"/>
-                <button class="btn btn-secondary" data-toggle="modal"
-                    data-target="#portal_deactivate_account_modal">
+                <button class="btn btn-secondary" data-bs-toggle="modal"
+                    data-bs-target="#portal_deactivate_account_modal">
                     Delete Account
                 </button>
                 <div t-attf-class="modal #{'show d-block' if open_deactivate_modal else ''}"
@@ -567,9 +567,7 @@
                         <div class="modal-content">
                             <div class="modal-header bg-danger">
                                 <h5 class="modal-title">Are you sure you want to do this?</h5>
-                                <button type="button" class="close" data-dismiss="modal">
-                                    ×
-                                </button>
+                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                             </div>
                             <form action="/my/deactivate_account" method="post" class="modal-body"
                                 id="portal_deactivate_account_form">
@@ -603,7 +601,7 @@
                                     </div>
                                     <div class="d-flex flex-row align-items-center">
                                         <input type="checkbox" name="request_blacklist" id="request_blacklist" checked="1"/>
-                                        <label for="request_blacklist" class="ml-2 mw-100 font-weight-normal mt-3">
+                                        <label for="request_blacklist" class="ms-2 mw-100 fw-normal mt-3">
                                             Put my email and phone in a block list to make sure I'm never contacted again
                                         </label>
                                     </div>
@@ -613,7 +611,7 @@
                             <div class="modal-footer justify-content-start">
                                 <input type="submit" class="btn btn-danger" form="portal_deactivate_account_form"
                                     value="Delete Account"/>
-                                <button type="button" class="btn" data-dismiss="modal">
+                                <button type="button" class="btn" data-bs-dismiss="modal">
                                     Cancel
                                 </button>
                             </div>
@@ -649,8 +647,8 @@
 
     <template id="my_account_link" name="Link to frontend portal" inherit_id="portal.user_dropdown">
         <xpath expr="//*[@id='o_logout_divider']" position="before">
-            <a href="/my/home" role="menuitem" class="dropdown-item pl-3">
-                <i class="fa fa-fw fa-id-card-o mr-1 small text-muted"/> My Account
+            <a href="/my/home" role="menuitem" class="dropdown-item ps-3">
+                <i class="fa fa-fw fa-id-card-o me-1 small text-muted"/> My Account
             </a>
         </xpath>
     </template>
@@ -716,7 +714,7 @@
 
     <template id="portal_sidebar" name="Sidebar">
         <t t-call="portal.portal_layout">
-            <body data-spy="scroll" data-target=".navspy" data-offset="50">
+            <body data-bs-spy="scroll" data-target=".navspy" data-offset="50">
                 <div class="container o_portal_sidebar"></div>
                 <div class="oe_structure mb32" id="oe_structure_portal_sidebar_1"/>
             </body>
diff --git a/addons/portal_rating/static/src/scss/portal_rating.scss b/addons/portal_rating/static/src/scss/portal_rating.scss
index ce4ff841d94..a06c8f92d33 100644
--- a/addons/portal_rating/static/src/scss/portal_rating.scss
+++ b/addons/portal_rating/static/src/scss/portal_rating.scss
@@ -7,7 +7,7 @@ $o-w-rating-star-color: #FACC2E;
 .o_website_rating_card_container {
 
     .o_message_counter {
-        color: gray('700');
+        color: map-get($grays, '700');
     }
 
     /* progress bars */
diff --git a/addons/portal_rating/static/src/xml/portal_chatter.xml b/addons/portal_rating/static/src/xml/portal_chatter.xml
index 3628afaab23..81cf29b4222 100644
--- a/addons/portal_rating/static/src/xml/portal_chatter.xml
+++ b/addons/portal_rating/static/src/xml/portal_chatter.xml
@@ -50,7 +50,7 @@
             <div class="o_portal_chatter_messages_loading d-none">
                 <div class="d-flex justify-content-center">
                     <div class="spinner-border text-primary" role="status">
-                        <span class="sr-only">Loading...</span>
+                        <span class="visually-hidden">Loading...</span>
                     </div>
                 </div>
             </div>
@@ -65,7 +65,7 @@
             <button t-if="is_publisher"
                 t-attf-class="btn px-2 mb-2 btn-sm border o_wrating_js_publisher_comment_btn {{ rating.publisher_comment !== '' ? 'd-none' : '' }}"
                 t-att-data-mes_index="rating.mes_index">
-                <i class="fa fa-comment text-muted mr-1"/>Comment
+                <i class="fa fa-comment text-muted me-1"/>Comment
             </button>
             <div class="o_wrating_publisher_comment mt-2 mb-2">
                 <t t-if="rating.publisher_comment" t-call="portal_rating.chatter_rating_publisher_comment"/>
@@ -82,15 +82,15 @@
                         <h5 class="mb-1"><t t-esc="rating.publisher_name"/></h5>
                     </div>
                     <div t-if="is_publisher" class="dropdown d-inline-block">
-                        <button class="btn py-0" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                        <button class="btn py-0" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                             <i class="fa fa-ellipsis-v"/>
                         </button>
                         <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                             <button class="dropdown-item o_wrating_js_publisher_comment_edit" t-att-data-mes_index="rating.mes_index">
-                                <i class="fa fa-fw fa-pencil mr-1"/>Edit
+                                <i class="fa fa-fw fa-pencil me-1"/>Edit
                             </button>
                             <button class="dropdown-item o_wrating_js_publisher_comment_delete" t-att-data-mes_index="rating.mes_index">
-                                <i class="fa fa-fw fa-trash-o mr-1"/>Delete
+                                <i class="fa fa-fw fa-trash-o me-1"/>Delete
                             </button>
                         </div>
                     </div>
diff --git a/addons/portal_rating/static/src/xml/portal_rating_composer.xml b/addons/portal_rating/static/src/xml/portal_rating_composer.xml
index 6878c4399c2..c24ede5af59 100644
--- a/addons/portal_rating/static/src/xml/portal_rating_composer.xml
+++ b/addons/portal_rating/static/src/xml/portal_rating_composer.xml
@@ -17,9 +17,7 @@
                                 Write a review
                             </t>
                         </h5>
-                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                            <span>×</span>
-                        </button>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                     </div>
                     <div class="modal-body">
                         <div class="o_portal_chatter_composer"/>
diff --git a/addons/portal_rating/static/src/xml/portal_tools.xml b/addons/portal_rating/static/src/xml/portal_tools.xml
index 64b28bb5b99..07517459dba 100644
--- a/addons/portal_rating/static/src/xml/portal_tools.xml
+++ b/addons/portal_rating/static/src/xml/portal_tools.xml
@@ -85,7 +85,7 @@
                 </t>
             </div>
             <div class="rate_text">
-                <span class="badge badge-info"></span>
+                <span class="badge text-bg-info"></span>
             </div>
             <input type="hidden" readonly="readonly" name="rating_value" t-att-value="default_rating || ''"/>
         </div>
diff --git a/addons/portal_rating/views/rating_templates.xml b/addons/portal_rating/views/rating_templates.xml
index 7f6bcdfc0df..9cbfe3bdad2 100644
--- a/addons/portal_rating/views/rating_templates.xml
+++ b/addons/portal_rating/views/rating_templates.xml
@@ -19,7 +19,7 @@
                 <t t-else="">
                     <i class="fa fa-star" role="img"></i>
                 </t>
-                <small class="text-muted ml-1">
+                <small class="text-muted ms-1">
                     <t t-esc="rating_avg"/>
                 </small>
             </t>
@@ -33,7 +33,7 @@
                 <t t-foreach="range(0, empty_star)" t-as="num">
                     <i class="fa fa-star-o" role="img"></i>
                 </t>
-                <small class="text-muted ml-1">
+                <small class="text-muted ms-1">
                     (<t t-esc="rating_count"/>)
                 </small>
             </t>
@@ -79,7 +79,7 @@
                 <div class="o_rating_popup_composer_stars text-nowrap"/>
                 <button t-if="display_composer" type="button"
                     t-att-class="'btn ' + _link_btn_classes or 'btn-primary'"
-                    data-toggle="modal" data-target="#ratingpopupcomposer">
+                    data-bs-toggle="modal" data-bs-target="#ratingpopupcomposer">
                     <i t-if="icon" t-att-class="icon"/>
                     <span t-attf-class="#{_text_classes} o_rating_popup_composer_text">
                         <t t-if="default_message_id">Modify your review</t>
diff --git a/addons/pos_adyen/views/res_config_settings_views.xml b/addons/pos_adyen/views/res_config_settings_views.xml
index bfd92bf1567..f941792d2c5 100644
--- a/addons/pos_adyen/views/res_config_settings_views.xml
+++ b/addons/pos_adyen/views/res_config_settings_views.xml
@@ -8,7 +8,7 @@
             <xpath expr="//div[@id='tip_product']" position="after">
                 <div attrs="{'invisible': [('pos_iface_tipproduct', '=', False)]}">
                     <field name="pos_adyen_ask_customer_for_tip" class="oe_inline"/>
-                    <label class="font-weight-normal" for="pos_adyen_ask_customer_for_tip" string="Add tip through payment terminal (Adyen)"/>
+                    <label class="fw-normal" for="pos_adyen_ask_customer_for_tip" string="Add tip through payment terminal (Adyen)"/>
                 </div>
             </xpath>
         </field>
diff --git a/addons/pos_cache/views/pos_cache_views.xml b/addons/pos_cache/views/pos_cache_views.xml
index c677bc92153..3d5cc77f9e9 100644
--- a/addons/pos_cache/views/pos_cache_views.xml
+++ b/addons/pos_cache/views/pos_cache_views.xml
@@ -8,7 +8,7 @@
             <field name="arch" type="xml">
                 <xpath expr="//div[hasclass('o_kanban_card_manage_settings')]" position="inside">
                     <field name='oldest_cache_time' invisible="1" />
-                    <div role="menuitem" class="col-12" style="border-left: none;" attrs="{'invisible': [('oldest_cache_time', '=', False)]}">
+                    <div role="menuitem" class="col-12" style="border-start: none;" attrs="{'invisible': [('oldest_cache_time', '=', False)]}">
                         <a name='delete_cache' type="object" >Invalidate cache</a>
                     </div>
                 </xpath>
diff --git a/addons/pos_restaurant/views/res_config_settings_views.xml b/addons/pos_restaurant/views/res_config_settings_views.xml
index 2b7c0c4bb2b..8bfa110acba 100644
--- a/addons/pos_restaurant/views/res_config_settings_views.xml
+++ b/addons/pos_restaurant/views/res_config_settings_views.xml
@@ -97,7 +97,7 @@
             <div id="tip_product" position="after">
                 <div attrs="{'invisible': ['|', ('pos_module_pos_restaurant', '=', False), ('pos_iface_tipproduct', '=', False)]}">
                     <field name="pos_set_tip_after_payment" class="oe_inline"/>
-                    <label class="font-weight-normal" for="pos_set_tip_after_payment" string="Add tip after payment (North America specific)"/>
+                    <label class="fw-normal" for="pos_set_tip_after_payment" string="Add tip after payment (North America specific)"/>
                 </div>
             </div>
         </field>
diff --git a/addons/pos_sale/views/sales_team_views.xml b/addons/pos_sale/views/sales_team_views.xml
index 9496346b0a0..13f7420efe9 100644
--- a/addons/pos_sale/views/sales_team_views.xml
+++ b/addons/pos_sale/views/sales_team_views.xml
@@ -46,7 +46,7 @@
                             <t t-else="">Sessions Running</t>
                         </a>
                     </div>
-                    <div class="col-4 text-right">
+                    <div class="col-4 text-end">
                         <field name="pos_order_amount_total" widget="monetary"/>
                     </div>
                 </div>
diff --git a/addons/product/report/product_pricelist_report_templates.xml b/addons/product/report/product_pricelist_report_templates.xml
index 761005fb653..9d24a1c6223 100644
--- a/addons/product/report/product_pricelist_report_templates.xml
+++ b/addons/product/report/product_pricelist_report_templates.xml
@@ -29,14 +29,14 @@
                                 <th>Products</th>
                                 <th groups="uom.group_uom">UoM</th>
                                 <t t-foreach="quantities" t-as="qty">
-                                    <th class="text-right"><t t-esc="qty"/></th>
+                                    <th class="text-end"><t t-esc="qty"/></th>
                                 </t>
                             </tr>
                         </thead>
                         <tbody>
                             <t t-foreach="products" t-as="product">
                                 <tr>
-                                    <td t-att-class="is_product_tmpl and 'font-weight-bold' or None">
+                                    <td t-att-class="is_product_tmpl and 'fw-bold' or None">
                                         <a t-if="is_html_type" href="#" class="o_action" t-att-data-model="is_product_tmpl and 'product.template' or 'product.product'" t-att-data-res-id="product['id']">
                                             <t t-esc="product['name']"/>
                                         </a>
@@ -48,7 +48,7 @@
                                         <t t-esc="product['uom']"/>
                                     </td>
                                     <t t-foreach="quantities" t-as="qty">
-                                        <td class="text-right">
+                                        <td class="text-end">
                                             <t t-esc="product['price'][qty]" t-options='{"widget": "monetary", "display_currency": pricelist.currency_id}'/>
                                         </td>
                                     </t>
@@ -56,16 +56,16 @@
                                 <t t-if="is_product_tmpl and 'variants' in product">
                                     <tr t-foreach="product['variants']" t-as="variant">
                                         <td>
-                                            <a t-if="is_html_type" href="#" class="o_action ml-4" data-model="product.product" t-att-data-res-id="variant['id']">
+                                            <a t-if="is_html_type" href="#" class="o_action ms-4" data-model="product.product" t-att-data-res-id="variant['id']">
                                                 <t t-esc="variant['name']"/>
                                             </a>
-                                            <span t-else="" class="ml-4" t-esc="variant['name']"/>
+                                            <span t-else="" class="ms-4" t-esc="variant['name']"/>
                                         </td>
                                         <td groups="uom.group_uom">
                                             <t t-esc="product['uom']"/>
                                         </td>
                                         <t t-foreach="quantities" t-as="qty">
-                                            <td class="text-right">
+                                            <td class="text-end">
                                                 <t t-esc="variant['price'][qty]" t-options='{"widget": "monetary", "display_currency": pricelist.currency_id}'/>
                                             </td>
                                         </t>
diff --git a/addons/product/report/product_product_templates.xml b/addons/product/report/product_product_templates.xml
index cda38d65f86..b03134f383d 100644
--- a/addons/product/report/product_product_templates.xml
+++ b/addons/product/report/product_product_templates.xml
@@ -17,7 +17,7 @@
                                 <span class="text-center" t-out="barcode"/>
                             </t>
                         </div>
-                        <div class="text-right" style="line-height:normal">
+                        <div class="text-end" style="line-height:normal">
                             <div class="o_label_extra_data">
                                 <t t-out="extra_html"/>
                             </div>
@@ -42,7 +42,7 @@
                     <div class="o_label_name">
                         <strong t-field="product.display_name"/>
                     </div>
-                    <div class="text-right" style="padding-top:0;padding-bottom:0">
+                    <div class="text-end" style="padding-top:0;padding-bottom:0">
                         <t t-if="product.is_product_variant">
                             <strong class="o_label_price_medium" t-field="product.lst_price" t-options="{'widget': 'monetary', 'label_price': True}"/>
                         </t>
@@ -73,7 +73,7 @@
                         <div class="o_label_left_column">
                             <span class="text-nowrap" t-field="product.default_code"/>
                         </div>
-                        <div class="o_label_price_medium text-right">
+                        <div class="o_label_price_medium text-end">
                             <t t-if="product.is_product_variant">
                                 <strong t-field="product.lst_price" t-options="{'widget': 'monetary', 'label_price': True}"/>
                             </t>
@@ -100,7 +100,7 @@
         <template id="report_simple_label_dymo">
             <div class="o_label_sheet o_label_dymo" t-att-style="padding_page">
                 <div class="o_label_full" t-att-style="table_style">
-                    <div class= "text-left o_label_small_barcode">
+                    <div class= "text-start o_label_small_barcode">
                         <t t-if="barcode">
                             <!-- `quiet=0` to remove the left and right margins on the barcode -->
                             <div t-out="barcode" style="padding:0" t-options="{'widget': 'barcode', 'quiet': 0, 'symbology': 'auto', 'img_style': barcode_size}"/>
@@ -116,7 +116,7 @@
                     <div class="o_label_left_column">
                         <small class="text-nowrap" t-field="product.default_code"/>
                     </div>
-                    <div class="text-right" style="padding: 0 4px;">
+                    <div class="text-end" style="padding: 0 4px;">
                         <t t-if="product.is_product_variant">
                             <strong class="o_label_price_small" t-field="product.lst_price" t-options="{'widget': 'monetary', 'label_price': True}"/>
                         </t>
diff --git a/addons/product/static/src/xml/pricelist_report.xml b/addons/product/static/src/xml/pricelist_report.xml
index 624cb4033d1..43b584bda1f 100644
--- a/addons/product/static/src/xml/pricelist_report.xml
+++ b/addons/product/static/src/xml/pricelist_report.xml
@@ -4,8 +4,8 @@
     <t t-name="product.report_pricelist_qty">
         <span>
             <div class="input-group">
-                <input type="number" name="qty_to_add" class="o_input o_product_qty form-control text-right" value="1" min="1"/>
-                <button class="btn btn-secondary o_add_qty text-right form-control" type="submit" title="Add a quantity">
+                <input type="number" name="qty_to_add" class="o_input o_product_qty form-control text-end" value="1" min="1"/>
+                <button class="btn btn-secondary o_add_qty text-end form-control" type="submit" title="Add a quantity">
                     <i class="fa fa-plus"/>
                 </button>
             </div>
@@ -17,17 +17,17 @@
     </t>
 
     <t t-name="product.report_pricelist_search">
-        <form class="form-inline ml-4 o_pricelist_report_form">
+        <form class="form-inline ms-4 o_pricelist_report_form">
             <div class="form-group">
-                <label class="font-weight-bold">Pricelist:</label>
+                <label class="fw-bold">Pricelist:</label>
                 <div class="row">
-                    <div class="col mr-4">
+                    <div class="col me-4">
                         <span class="o_pricelist"/>
                     </div>
                 </div>
             </div>
             <div class="form-group">
-                <label class="font-weight-bold mb-4" for="qty_to_add">Quantities:</label>
+                <label class="fw-bold mb-4" for="qty_to_add">Quantities:</label>
                 <div class="row">
                     <div class="col">
                         <span class="o_product_qty"/>
@@ -36,7 +36,7 @@
             </div>
             <div class="form-group">
                 <div class="form-check">
-                    <input class="form-check-input o_is_visible_title ml-2" type="checkbox"/>
+                    <input class="form-check-input o_is_visible_title ms-2" type="checkbox"/>
                     <label class="form-check-label">Display Pricelist</label>
                 </div>
             </div>
@@ -45,7 +45,7 @@
 
     <t t-name="product.report_pricelist_qty_badges">
         <t t-foreach="quantities" t-as="qty">
-            <span class="badge badge-pill border" t-att-data-qty="qty">
+            <span class="badge rounded-pill border" t-att-data-qty="qty">
                 <t t-esc="qty"/>
                 <i class="fa fa-close o_remove_qty" title="Remove quantity"/>
             </span>
diff --git a/addons/product/views/product_supplierinfo_views.xml b/addons/product/views/product_supplierinfo_views.xml
index d5ee3ba59b8..f06d1ee9f34 100644
--- a/addons/product/views/product_supplierinfo_views.xml
+++ b/addons/product/views/product_supplierinfo_views.xml
@@ -76,13 +76,13 @@
                                 <strong class="col-6">
                                     <span t-esc="record.partner_id.value"/>
                                 </strong>
-                                <strong class="col-6 text-right">
+                                <strong class="col-6 text-end">
                                     <strong><field name="price" widget="monetary"/></strong>
                                 </strong>
                                 <div class="col-6">
                                     <span t-esc="record.min_qty.value"/>
                                 </div>
-                                <div class="col-6 text-right">
+                                <div class="col-6 text-end">
                                     <span t-esc="record.delay.value"/> days
                                 </div>
                             </div>
diff --git a/addons/product/views/product_template_views.xml b/addons/product/views/product_template_views.xml
index 02a58022d96..f81102819eb 100644
--- a/addons/product/views/product_template_views.xml
+++ b/addons/product/views/product_template_views.xml
@@ -62,7 +62,7 @@
                             <field name="value_count" invisible="1"/>
                             <field name="attribute_id" attrs="{'readonly': [('id', '!=', False)]}"/>
                             <field name="value_ids" widget="many2many_tags" options="{'no_create_edit': True, 'color_field': 'color'}" context="{'default_attribute_id': attribute_id, 'show_attribute': False}"/>
-                            <button string="Configure" class="float-right btn-secondary"
+                            <button string="Configure" class="float-end btn-secondary"
                                 type="object" name="action_open_attribute_values"
                                 groups="product.group_product_variant"/>
                         </tree>
@@ -90,7 +90,7 @@
                 <templates>
                     <t t-name="kanban-box">
                         <div class="oe_kanban_card oe_kanban_global_click">
-                            <div class="o_kanban_image mr-1">
+                            <div class="o_kanban_image me-1">
                                 <img t-att-src="kanban_image('product.template', 'image_128', record.id.raw_value)" alt="Product" class="o_image_64_contain"/>
                             </div>
                             <div class="oe_kanban_details">
diff --git a/addons/product/views/product_views.xml b/addons/product/views/product_views.xml
index c22739ee4a1..6dc25863c52 100644
--- a/addons/product/views/product_views.xml
+++ b/addons/product/views/product_views.xml
@@ -42,7 +42,7 @@
                         <label for="name" string="Product Name"/>
                         <h1>
                             <div class="d-flex">
-                                <field name="priority" widget="priority" class="mr-3"/>
+                                <field name="priority" widget="priority" class="me-3"/>
                                 <field class="o_text_overflow" name="name" placeholder="e.g. Cheese Burger"/>
                             </div>
                         </h1>
@@ -69,7 +69,7 @@
                                 <group name="group_general">
                                     <field name="active" invisible="1"/>
                                     <field name="detailed_type"/>
-                                    <field name="product_tooltip" string="" class="font-italic text-muted"/>
+                                    <field name="product_tooltip" string="" class="fst-italic text-muted"/>
                                     <field name="uom_id" groups="uom.group_uom" options="{'no_create': True}"/>
                                     <field name="uom_po_id" groups="uom.group_uom" options="{'no_create': True}"/>
                                 </group>
@@ -253,7 +253,7 @@
                             <field name="product_template_attribute_value_ids" widget="many2many_tags" readonly="1"/>
                             <p>
                                 <span>All general settings about this product are managed on</span>
-                                <button name="open_product_template" type="object" string="the product template." class="oe_link oe_link_product pl-0 ml-1 mb-1"/>
+                                <button name="open_product_template" type="object" string="the product template." class="oe_link oe_link_product ps-0 ms-1 mb-1"/>
                             </p>
                         </div>
                         <group>
@@ -265,7 +265,7 @@
                             <group name="pricing" string="Pricing">
                                 <field name="product_variant_count" invisible="1"/>
                                 <label for="lst_price" string="Sales Price"/>
-                                <div class="o_row col-5 pl-0">
+                                <div class="o_row col-5 ps-0">
                                     <field name="lst_price" widget='monetary' options="{'currency_field': 'currency_id', 'field_digits': True}" attrs="{'readonly': [('product_variant_count', '&gt;', 1)]}"/>
                                 </div>
                                 <field name="standard_price" widget='monetary' options="{'currency_field': 'cost_currency_id'}"/>
diff --git a/addons/product_expiry/views/production_lot_views.xml b/addons/product_expiry/views/production_lot_views.xml
index 6b75e89a27f..5cf0df94f84 100644
--- a/addons/product_expiry/views/production_lot_views.xml
+++ b/addons/product_expiry/views/production_lot_views.xml
@@ -22,7 +22,7 @@
         </xpath>
         <xpath expr="//div[hasclass('oe_title')]" position="inside">
             <field name="product_expiry_alert" invisible="1"/>
-            <span class="badge badge-danger" attrs="{'invisible': [('product_expiry_alert', '=', False)]}">Expiration Alert</span>
+            <span class="badge text-bg-danger" attrs="{'invisible': [('product_expiry_alert', '=', False)]}">Expiration Alert</span>
         </xpath>
         </field>
     </record>
diff --git a/addons/product_matrix/static/src/xml/product_matrix.xml b/addons/product_matrix/static/src/xml/product_matrix.xml
index e4e9306013c..77d437bbbf8 100644
--- a/addons/product_matrix/static/src/xml/product_matrix.xml
+++ b/addons/product_matrix/static/src/xml/product_matrix.xml
@@ -4,7 +4,7 @@
             <thead>
                 <tr>
                     <t t-foreach="header" t-as="column_header">
-                        <th t-attf-class="o_matrix_title_header {{column_header_first?'text-left':'text-center'}}">
+                        <th t-attf-class="o_matrix_title_header {{column_header_first?'text-start':'text-center'}}">
                             <span t-esc="column_header.name"/>
                             <t t-call="product_matrix.extra_price">
                                 <t t-set="cell" t-value="column_header"/>
@@ -16,7 +16,7 @@
             <tbody>
                 <tr t-foreach="rows" t-as="row">
                     <t t-foreach="row" t-as="cell">
-                        <th t-if="cell.name" class="text-left">
+                        <th t-if="cell.name" class="text-start">
                             <strong t-esc="cell.name"/>
                             <t t-call="product_matrix.extra_price"/>
                         </th>
@@ -34,7 +34,7 @@
             </tbody>
         </table>
     </div>
-    <span t-name="product_matrix.extra_price" t-if="cell.price" class="badge badge-pill badge-secondary">
+    <span t-name="product_matrix.extra_price" t-if="cell.price" class="badge rounded-pill text-bg-secondary">
             <!--
                 price_extra is displayed as catalog price instead of
                 price after pricelist because it is impossible to
diff --git a/addons/product_matrix/views/matrix_templates.xml b/addons/product_matrix/views/matrix_templates.xml
index b83addad3b8..07b10631b60 100644
--- a/addons/product_matrix/views/matrix_templates.xml
+++ b/addons/product_matrix/views/matrix_templates.xml
@@ -16,13 +16,13 @@
                   <tbody>
                       <tr t-foreach="grid['matrix']" t-as="row">
                           <t t-foreach="row" t-as="cell">
-                              <td t-if="cell.get('name', False)" class="text-left">
+                              <td t-if="cell.get('name', False)" class="text-start">
                                   <strong t-esc="cell['name']"/>
                                   <t t-call="product_matrix.extra_price">
                                       <t t-set="price" t-value="cell.get('price', False)"/>
                                   </t>
                               </td>
-                              <td t-else="" class="text-right">
+                              <td t-else="" class="text-end">
                                   <span t-esc="cell.get('qty', 0)" class="o_grid_cell_container"/>
                               </td>
                           </t>
@@ -33,7 +33,7 @@
     </template>
 
     <template id="extra_price">
-      <span t-if="price" class="badge badge-pill badge-secondary">
+      <span t-if="price" class="badge rounded-pill text-bg-secondary">
               <!--
                   price_extra is displayed as catalog price instead of
                   price after pricelist because it is impossible to
diff --git a/addons/project/static/src/js/widgets/project_name_with_subtask_count_widget.js b/addons/project/static/src/js/widgets/project_name_with_subtask_count_widget.js
index 125ebdf0178..b36751ef56f 100644
--- a/addons/project/static/src/js/widgets/project_name_with_subtask_count_widget.js
+++ b/addons/project/static/src/js/widgets/project_name_with_subtask_count_widget.js
@@ -20,7 +20,7 @@ export const FieldNameWithSubTaskCount = FieldChar.extend({
         let result = this._super.apply(this, arguments);
         if (this.recordData.allow_subtasks && this.recordData.child_text) {
             this.$el.append($('<span>')
-                    .addClass("text-muted ml-2")
+                    .addClass("text-muted ms-2")
                     .text(this.recordData.child_text)
                     .css('font-weight', 'normal'));
         }
diff --git a/addons/project/static/src/js/widgets/project_state_select.js b/addons/project/static/src/js/widgets/project_state_select.js
index da1463f6bb1..4e0a03bbd87 100644
--- a/addons/project/static/src/js/widgets/project_state_select.js
+++ b/addons/project/static/src/js/widgets/project_state_select.js
@@ -74,7 +74,7 @@ export const ProjectStateSelectionWidget = StateSelectionWidget.extend({
         $items.appendTo($dropdown);
 
         const isReadonly = this.record.evalModifiers(this.attrs.modifiers).readonly;
-        this.$('a[data-toggle=dropdown]').toggleClass('disabled', isReadonly || false);
+        this.$('a[data-bs-toggle=dropdown]').toggleClass('disabled', isReadonly || false);
     }
 });
 
diff --git a/addons/project/static/src/project_control_panel/project_control_panel.xml b/addons/project/static/src/project_control_panel/project_control_panel.xml
index e9da0ecb6f9..7fb222cc7b8 100644
--- a/addons/project/static/src/project_control_panel/project_control_panel.xml
+++ b/addons/project/static/src/project_control_panel/project_control_panel.xml
@@ -2,18 +2,18 @@
 <templates xml:space="preserve">
 
     <t t-name="project.ProjectControlPanelContentBadge" owl="1">
-        <t t-tag="isProjectUser ? 'button' : 'span'" class="badge border d-flex p-2 ml-2 bg-white" data-hotkey="y">
+        <t t-tag="isProjectUser ? 'button' : 'span'" class="badge border d-flex p-2 ms-2 bg-white" data-hotkey="y">
             <span t-attf-class="o_status_bubble o_color_bubble_{{data.color}}"/>
-            <span t-att-class="'font-weight-normal ml-1' + (data.color === 0 ? ' text-muted' : '')" t-esc="data.status"/>
+            <span t-att-class="'fw-normal ms-1' + (data.color === 0 ? ' text-muted' : '')" t-esc="data.status"/>
         </t>
     </t>
 
     <t t-name="project.ProjectControlPanelContent" owl="1">
         <t t-if="showProjectUpdate">
-            <li t-if="isProjectUser" class="o_project_updates_breadcrumb pl-3" t-on-click="onStatusClick">
+            <li t-if="isProjectUser" class="o_project_updates_breadcrumb ps-3" t-on-click="onStatusClick">
                 <t t-call="project.ProjectControlPanelContentBadge"></t>
             </li>
-            <li t-else="" class="o_project_updates_breadcrumb pl-3">
+            <li t-else="" class="o_project_updates_breadcrumb ps-3">
                 <t t-call="project.ProjectControlPanelContentBadge"></t>
             </li>
         </t>
diff --git a/addons/project/static/src/scss/portal_rating.scss b/addons/project/static/src/scss/portal_rating.scss
index fa8eb88da3a..c3236502388 100644
--- a/addons/project/static/src/scss/portal_rating.scss
+++ b/addons/project/static/src/scss/portal_rating.scss
@@ -46,7 +46,7 @@
 
 .o_status {
     display: block;
-    background-color: gray('200');
+    background-color: map-get($grays, '200');
     height: 12px;
     width: 12px;
     box-shadow: inset 0 0 0 1px rgba($black, .2);
diff --git a/addons/project/static/src/xml/project_templates.xml b/addons/project/static/src/xml/project_templates.xml
index 132ca14fd1a..c81df4ce855 100644
--- a/addons/project/static/src/xml/project_templates.xml
+++ b/addons/project/static/src/xml/project_templates.xml
@@ -15,7 +15,7 @@
         </table>
     </t>
 
-    <span t-name="project.statusWithColor" t-att-class="'o_status_bubble mr-2 o_color_bubble_' + color"></span>
+    <span t-name="project.statusWithColor" t-att-class="'o_status_bubble me-2 o_color_bubble_' + color"></span>
 
     <div t-name="project.ControlPanel" t-inherit="web.Legacy.ControlPanel" t-inherit-mode="extension" owl="1">
         <xpath expr="//ol[hasclass('breadcrumb')]" position="inside">
@@ -212,7 +212,7 @@
                 <div t-foreach="milestones.data" t-as="milestone" t-key="milestone.id" class="o_rightpanel_data_row">
                     <OpenMilestone context="context" milestone="milestone" onMilestoneUpdate.bind="_loadQwebContext"/>
                 </div>
-                <span t-if="milestones.data.length === 0" class="text-muted font-italic">
+                <span t-if="milestones.data.length === 0" class="text-muted fst-italic">
                     Track major progress points that must be reached to achieve success.
                 </span>
             </div>
@@ -244,7 +244,7 @@
         </div>
     </t>
     <t t-name="project.task.PrivateProjectName">
-        <span class="font-italic text-muted"><i class="fa fa-lock"></i> Private</span>
+        <span class="fst-italic text-muted"><i class="fa fa-lock"></i> Private</span>
     </t>
 
 </templates>
diff --git a/addons/project/views/project_portal_templates.xml b/addons/project/views/project_portal_templates.xml
index 3e0493a23cb..83486eaa70b 100644
--- a/addons/project/views/project_portal_templates.xml
+++ b/addons/project/views/project_portal_templates.xml
@@ -73,7 +73,7 @@
                         <td>
                             <a t-attf-href="/my/projects/#{project.id}?{{ keep_query() }}"><span t-field="project.name"/></a>
                         </td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <t t-out="project.task_count_with_subtasks" />
                             <t t-out="project.label_tasks" />
                         </td>
@@ -119,12 +119,12 @@
                         <th name="project_portal_assignees">Assignees</th>
                         <th t-if="groupby != 'status'"/>
                         <th t-if="groupby != 'project'">Project</th>
-                        <th t-if="groupby != 'stage'" class="text-right">Stage</th>
+                        <th t-if="groupby != 'stage'" class="text-end">Stage</th>
                     </tr>
                 </thead>
                 <t t-foreach="grouped_tasks" t-as="tasks">
                     <tbody>
-                        <tr t-if="not groupby == 'none'" class="thead-light">
+                        <tr t-if="not groupby == 'none'" class="table-light">
                             <th t-if="groupby == 'project'" t-attf-colspan="{{grouped_tasks_colspan}}">
                                 <span t-field="tasks[0].sudo().project_id.name"/></th>
                             <th t-if="groupby == 'stage'" t-attf-colspan="{{grouped_tasks_colspan}}">
@@ -140,10 +140,10 @@
                     <tbody>
                         <t t-foreach="tasks" t-as="task">
                             <tr>
-                                <td class="text-left">
+                                <td class="text-start">
                                     #<span t-esc="task.id"/>
                                 </td>
-                                <td t-if="groupby != 'priority'" class="text-right">
+                                <td t-if="groupby != 'priority'" class="text-end">
                                     <t t-call="project.portal_my_tasks_priority_widget_template"/>
                                 </td>
                                 <td>
@@ -151,8 +151,8 @@
                                 </td>
                                 <td name="project_portal_assignees">
                                     <t t-set="assignees" t-value="task.sudo().user_ids"/>
-                                    <div t-if="assignees" class="row flex-nowrap pl-3">
-                                        <img class="rounded-circle o_portal_contact_img mr-2" t-attf-src="#{image_data_uri(assignees[:1].avatar_1024)}" alt="User" style="width: 20px; height: 20px;"/>
+                                    <div t-if="assignees" class="row flex-nowrap ps-3">
+                                        <img class="rounded-circle o_portal_contact_img me-2" t-attf-src="#{image_data_uri(assignees[:1].avatar_1024)}" alt="User" style="width: 20px; height: 20px;"/>
                                         <span t-out="'%s%s' % (assignees[:1].name, ' + %s others' % len(assignees[1:]) if len(assignees.user_ids) > 1 else '')" t-att-title="'\n'.join(assignees[1:].mapped('name'))"/>
                                     </div>
                                 </td>
@@ -162,10 +162,10 @@
                                     </t>
                                 </td>
                                 <td t-if="groupby != 'project'">
-                                    <span class="badge badge-pill badge-info mw-100 text-truncate" title="Current project of the task" t-esc="task.project_id.name" />
+                                    <span class="badge rounded-pill text-bg-info mw-100 text-truncate" title="Current project of the task" t-esc="task.project_id.name" />
                                 </td>
-                                <td t-if="groupby != 'stage'" class="text-right">
-                                    <span t-attf-class="badge #{'badge-primary' if task.stage_id.fold else 'badge-light'}" title="Current stage of the task" t-esc="task.stage_id.name"/>
+                                <td t-if="groupby != 'stage'" class="text-end">
+                                    <span t-attf-class="badge #{'text-bg-primary' if task.stage_id.fold else 'text-bg-light'}" title="Current stage of the task" t-esc="task.stage_id.name"/>
                                 </td>
                             </tr>
                         </t>
@@ -205,25 +205,25 @@
 
                     <t t-set="entries">
                         <ul class="list-group list-group-flush flex-wrap flex-row flex-lg-column">
-                            <li id="task-nav" class="list-group-item pl-0 flex-grow-1" t-ignore="true" role="complementary">
+                            <li id="task-nav" class="list-group-item ps-0 flex-grow-1" t-ignore="true" role="complementary">
                                 <ul class="nav flex-column">
                                     <li class="nav-item" id="nav-header">
-                                        <a class="nav-link pl-3" href="#card_header" style="max-width: 200px;">
+                                        <a class="nav-link ps-3" href="#card_header" style="max-width: 200px;">
                                             Task
                                         </a>
                                     </li>
                                     <li class="nav-item" id="nav-chat">
-                                        <a class="nav-link pl-3" href="#task_chat">
+                                        <a class="nav-link ps-3" href="#task_chat">
                                             History
                                         </a>
                                     </li>
                                 </ul>
                             </li>
-                            <li id="task-links" t-if="task_link_section" class="list-group-item pl-0 flex-grow-1" t-ignore="true" role="complementary">
+                            <li id="task-links" t-if="task_link_section" class="list-group-item ps-0 flex-grow-1" t-ignore="true" role="complementary">
                                 <ul class="nav flex-column">
                                     <t t-foreach="task_link_section" t-as="task_link">
                                         <li class="nav-item">
-                                            <a class="nav-link pl-3" t-att-href="task_link['access_url']">
+                                            <a class="nav-link ps-3" t-att-href="task_link['access_url']">
                                                 <t t-out="task_link['title']"/>
                                             </a>
                                         </li>
@@ -237,7 +237,7 @@
                                     <t t-foreach="task.user_ids" t-as="user">
                                         <div class="d-flex mb-3 flex-nowrap">
                                             <img class="rounded-circle mt-1 o_portal_contact_img" t-att-src="image_data_uri(user.avatar_1024)" alt="Contact"/>
-                                            <div class="ml-2">
+                                            <div class="ms-2">
                                                 <div t-esc="user" t-options='{"widget": "contact", "fields": ["name"]}'/>
                                                 <a t-attf-href="tel:{{user.phone}}" t-if="user.phone"><div t-esc="user" t-options='{"widget": "contact", "fields": ["phone"]}'/></a>
                                                 <a t-if="user.email" class="text-break" t-attf-href="mailto:{{user.email}}">
@@ -251,7 +251,7 @@
                                     <strong>Customer</strong>
                                     <div class="d-flex flex-nowrap">
                                         <img class="rounded-circle mt-1 o_portal_contact_img" t-att-src="image_data_uri(task.partner_id.avatar_1024)" alt="Contact"/>
-                                        <div class="ml-2">
+                                        <div class="ms-2">
                                             <div t-field="task.partner_id" t-options='{"widget": "contact", "fields": ["name"]}'/>
                                             <a t-attf-href="tel:{{task.partner_id.phone}}" t-if="task.partner_id.phone"><div t-field="task.partner_id" t-options='{"widget": "contact", "fields": ["phone"]}'/></a>
                                             <a t-if="task.partner_id.email" class="text-break" t-attf-href="mailto:{{task.partner_id.email}}">
@@ -267,7 +267,7 @@
                 <div id="task_content" class="col-lg-9 justify-content-end">
                     <div id="card" class="card">
                         <div id="card_header" class="card-header bg-white" data-anchor="true">
-                            <div class="row no-gutters">
+                            <div class="row g-0">
                                 <div class="col-12">
                                     <h5 class="d-flex mb-1 mb-md-0 row">
                                         <div class="col-9">
@@ -275,16 +275,16 @@
                                             <span t-field="task.name" class="text-truncate"/>
                                             <small class="text-muted d-none d-md-inline"> (#<span t-field="task.id"/>)</small>
                                         </div>
-                                        <div class="col-3 text-right">
-                                            <small class="text-right">Stage:</small>
-                                            <span t-field="task.stage_id.name" class=" badge badge-pill badge-info" title="Current stage of this task"/>
+                                        <div class="col-3 text-end">
+                                            <small class="text-end">Stage:</small>
+                                            <span t-field="task.stage_id.name" class=" badge rounded-pill text-bg-info" title="Current stage of this task"/>
                                         </div>
                                     </h5>
                                 </div>
                             </div>
                         </div>
                         <div id="card_body" class="card-body">
-                            <div class="float-right">
+                            <div class="float-end">
                                 <t t-call="project.portal_my_tasks_state_widget_template">
                                     <t t-set="path" t-value="'task'"/>
                                 </t>
@@ -316,7 +316,7 @@
                                         <div t-attf-class="col {{'col-lg-6' if not task.description else 'col-lg-12'}}">
                                             <ul class="list-group">
                                                 <a class="list-group-item list-group-item-action d-flex align-items-center oe_attachments py-1 px-2" t-foreach='task.attachment_ids' t-as='attachment' t-attf-href="/web/content/#{attachment.id}?download=true&amp;access_token=#{attachment.access_token}" target="_blank" data-no-post-process="">
-                                                    <div class='oe_attachment_embedded o_image o_image_small mr-2 mr-lg-3' t-att-title="attachment.name" t-att-data-mimetype="attachment.mimetype" t-attf-data-src="/web/image/#{attachment.id}/50x40?access_token=#{attachment.access_token}"/>
+                                                    <div class='oe_attachment_embedded o_image o_image_small me-2 me-lg-3' t-att-title="attachment.name" t-att-data-mimetype="attachment.mimetype" t-attf-data-src="/web/image/#{attachment.id}/50x40?access_token=#{attachment.access_token}"/>
                                                     <div class='oe_attachment_name text-truncate'><t t-esc='attachment.name'/></div>
                                                 </a>
                                             </ul>
diff --git a/addons/project/views/project_sharing_views.xml b/addons/project/views/project_sharing_views.xml
index 8a9de75963f..f98361193fa 100644
--- a/addons/project/views/project_sharing_views.xml
+++ b/addons/project/views/project_sharing_views.xml
@@ -74,7 +74,7 @@
                                     <t t-else="record.email_from.raw_value"><span><field name="email_from"/></span></t>
                                 </div>
                                 <div class="o_dropdown_kanban dropdown" t-if="!selection_mode">
-                                    <a role="button" class="dropdown-toggle o-no-caret btn" data-toggle="dropdown" data-display="static" href="#" aria-label="Dropdown menu" title="Dropdown menu">
+                                    <a role="button" class="dropdown-toggle o-no-caret btn" data-bs-toggle="dropdown" data-bs-display="static" href="#" aria-label="Dropdown menu" title="Dropdown menu">
                                         <span class="fa fa-ellipsis-v"/>
                                     </a>
                                     <div class="dropdown-menu" role="menu">
@@ -98,7 +98,7 @@
                                     <field name="priority" widget="priority"/>
                                 </div>
                                 <div class="oe_kanban_bottom_right" t-if="!selection_mode">
-                                    <span t-if="record.portal_user_names.raw_value.length > 0" class="pr-2" t-att-title="record.portal_user_names.raw_value">
+                                    <span t-if="record.portal_user_names.raw_value.length > 0" class="pe-2" t-att-title="record.portal_user_names.raw_value">
                                         <t t-set="user_count" t-value="record.portal_user_names.raw_value.split(',').length"/>
                                         <t t-out="user_count"/>
                                         <t t-if="user_count > 1"> assignees</t>
@@ -173,11 +173,11 @@
                         </button>
                     </div>
                     <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
-                    <div class="oe_title pr-0">
+                    <div class="oe_title pe-0">
                         <h1 class="d-flex flex-row justify-content-between">
-                            <field name="priority" widget="priority" class="mr-3"/>
+                            <field name="priority" widget="priority" class="me-3"/>
                             <field name="name" class="o_task_name text-truncate" placeholder="Task Title..."/>
-                            <field name="kanban_state" widget="state_selection" class="ml-auto"/>
+                            <field name="kanban_state" widget="state_selection" class="ms-auto"/>
                             <field name="legend_blocked" invisible="1"/>
                             <field name="legend_normal" invisible="1"/>
                             <field name="legend_done" invisible="1"/>
diff --git a/addons/project/views/project_views.xml b/addons/project/views/project_views.xml
index 6520de53d0e..7e738355e2b 100644
--- a/addons/project/views/project_views.xml
+++ b/addons/project/views/project_views.xml
@@ -252,27 +252,27 @@
                                     At each stage, employees can block tasks or mark them as ready for the next step.
                                     You can customize here the labels for each state.
                                 </p>
-                                <div class="row ml-1" colspan="2">
+                                <div class="row ms-1" colspan="2">
                                     <label for="legend_normal" string=" " class="o_status mt4"
                                         title="Task in progress. Click to block or set as done."
                                         aria-label="Task in progress. Click to block or set as done." role="img"/>
-                                    <div class="col-11 pl-0">
+                                    <div class="col-11 ps-0">
                                         <field name="legend_normal"/>
                                     </div>
                                 </div>
-                                <div class="row ml-1" colspan="2">
+                                <div class="row ms-1" colspan="2">
                                     <label for="legend_blocked" string=" " class="o_status o_status_red mt4"
                                         title="Task is blocked. Click to unblock or set as done."
                                         aria-label="Task is blocked. Click to unblock or set as done." role="img"/>
-                                    <div class="col-11 pl-0">
+                                    <div class="col-11 ps-0">
                                         <field name="legend_blocked"/>
                                     </div>
                                 </div>
-                                <div class="row ml-1" colspan="2">
+                                <div class="row ms-1" colspan="2">
                                     <label for="legend_done" string=" " class="o_status o_status_green mt4"
                                         title="This step is done. Click to block or set in progress."
                                         aria-label="This step is done. Click to block or set in progress." role="img"/>
-                                    <div class="col-11 pl-0">
+                                    <div class="col-11 ps-0">
                                         <field name="legend_done"/>
                                     </div>
                                 </div>
@@ -481,13 +481,13 @@
                             </div>
                         </button>
                         <button class="oe_stat_button" name="%(project.project_update_all_action)d" type="action" groups="project.group_project_manager">
-                            <div class="pl-4">
+                            <div class="ps-4">
                                 <field name="last_update_color" invisible="1"/>
                                 <field name="last_update_status" readonly="1" widget="status_with_color" options="{'color_field': 'last_update_color'}"/>
                             </div>
                         </button>
                         <button class="oe_stat_button o_project_not_clickable" disabled="disabled" groups="!project.group_project_manager">
-                            <div class="pl-4">
+                            <div class="ps-4">
                                 <field name="last_update_color" invisible="1"/>
                                 <field name="last_update_status" readonly="1" widget="status_with_color" options="{'color_field': 'last_update_color', 'no_quick_edit': 1}"/>
                             </div>
@@ -511,7 +511,7 @@
                     <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                     <div class="oe_title">
                         <h1 class="d-flex flex-row">
-                            <field name="is_favorite" nolabel="1" widget="boolean_favorite" class="mr-3"/>
+                            <field name="is_favorite" nolabel="1" widget="boolean_favorite" class="me-3"/>
                             <field name="name" class="o_text_overflow" placeholder="Project Name"/>
                         </h1>
                     </div>
@@ -553,7 +553,7 @@
                                     <div name="alias_def" colspan="2" class="pb-2" attrs="{'invisible': [('alias_domain', '=', False)]}">
                                         <!-- Always display the whole alias in edit mode. It depends in read only -->
                                         <field name="alias_enabled" invisible="1"/>
-                                        <label for="alias_name" class="font-weight-bold o_form_label" string="Create tasks by sending an email to"/>
+                                        <label for="alias_name" class="fw-bold o_form_label" string="Create tasks by sending an email to"/>
                                         <field name="alias_value" class="oe_read_only d-inline" readonly="1" widget="email" attrs="{'invisible':  [('alias_name', '=', False)]}" />
                                         <span class="oe_edit_only">
                                             <field name="alias_name" class="oe_inline"/>@<field name="alias_domain" class="oe_inline" readonly="1"/>
@@ -697,7 +697,7 @@
                     <field name="message_needaction" invisible="1"/>
                     <field name="active" invisible="1"/>
                     <field name="is_favorite" nolabel="1" width="1" widget="boolean_favorite"/>
-                    <field name="display_name" string="Name" class="font-weight-bold"/>
+                    <field name="display_name" string="Name" class="fw-bold"/>
                     <field name="partner_id" optional="show" string="Customer"/>
                     <field name="privacy_visibility" optional="hide"/>
                     <field name="company_id" optional="show"  groups="base.group_multi_company" options="{'no_create': True, 'no_create': True}"/>
@@ -732,7 +732,7 @@
                                         <field name="partner_id" string="Contact"/>
                                     </div>
                                     <div class="col-4">
-                                        <div class="oe_kanban_bottom_right float-right">
+                                        <div class="oe_kanban_bottom_right float-end">
                                             <field name="user_id" widget="many2one_avatar_user"/>
                                         </div>
                                     </div>
@@ -825,18 +825,18 @@
                                             <div class="o_primary">
                                                 <span class="o_text_overflow" t-att-title="record.display_name.value"><t t-esc="record.display_name.value"/></span>
                                                 <span class="o_text_overflow text-muted" t-if="record.partner_id.value">
-                                                    <span class="fa fa-user mr-2" aria-label="Partner" title="Partner"></span><t t-esc="record.partner_id.value"/>
+                                                    <span class="fa fa-user me-2" aria-label="Partner" title="Partner"></span><t t-esc="record.partner_id.value"/>
                                                 </span>
                                                 <div t-if="record.date.raw_value or record.date_start.raw_value" class="text-muted o_row">
-                                                    <span class="fa fa-clock-o mr-2" title="Dates"></span><field name="date_start"/>
+                                                    <span class="fa fa-clock-o me-2" title="Dates"></span><field name="date_start"/>
                                                     <i t-if="record.date.raw_value and record.date_start.raw_value" class="fa fa-long-arrow-right mx-2 oe_read_only" aria-label="Arrow icon" title="Arrow"/>
                                                     <field name="date"/>
                                                 </div>
                                                 <div t-if="record.alias_name.value and record.alias_domain.value" class="text-muted">
-                                                    <span class="fa fa-envelope-o mr-2" aria-label="Domain Alias" title="Domain Alias"></span><t t-esc="record.alias_id.value"/>
+                                                    <span class="fa fa-envelope-o me-2" aria-label="Domain Alias" title="Domain Alias"></span><t t-esc="record.alias_id.value"/>
                                                 </div>
                                                 <div t-if="record.rating_active.raw_value and record.rating_count.raw_value &gt; 0" class="text-muted" groups="project.group_project_rating">
-                                                    <b class="mr-1">
+                                                    <b class="me-1">
                                                         <span style="font-weight:bold;" class="fa mt4 fa-smile-o text-success" t-if="record.rating_avg.raw_value &gt;= 3.66" title="Average Rating: Satisfied" role="img" aria-label="Happy face"/>
                                                         <span style="font-weight:bold;" class="fa mt4 fa-meh-o text-warning" t-elif="record.rating_avg.raw_value &gt;= 2.33" title="Average Rating: Okay" role="img" aria-label="Neutral face"/>
                                                         <span style="font-weight:bold;" class="fa mt4 fa-frown-o text-danger" t-else="" title="Average Rating: Dissatisfied" role="img" aria-label="Sad face"/>
@@ -880,7 +880,7 @@
                                                 <a t-if="record.privacy_visibility.raw_value == 'portal'" class="dropdown-item" role="menuitem" name="%(project.project_share_wizard_action)d" type="action">Share</a>
                                                 <a class="dropdown-item" role="menuitem" type="edit">Edit</a>
                                             </div>
-                                            <div class="o_kanban_card_manage_section o_kanban_manage_view col-12 row pl-0" groups="!project.group_project_manager">
+                                            <div class="o_kanban_card_manage_section o_kanban_manage_view col-12 row ps-0" groups="!project.group_project_manager">
                                                 <div role="menuitem" class="w-100">
                                                     <a class="dropdown-item mx-0" role="menuitem" type="open">View</a>
                                                 </div>
@@ -1126,11 +1126,11 @@
                         <span id="end_button_box" invisible="1"/>
                     </div>
                     <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
-                    <div class="oe_title pr-0">
+                    <div class="oe_title pe-0">
                         <h1 class="d-flex flex-row justify-content-between">
-                            <field name="priority" widget="priority" class="mr-3"/>
+                            <field name="priority" widget="priority" class="me-3"/>
                             <field name="name" class="o_task_name text-truncate" placeholder="Task Title..."/>
-                            <field name="kanban_state" widget="state_selection" class="ml-auto"/>
+                            <field name="kanban_state" widget="state_selection" class="ms-auto"/>
                         </h1>
                     </div>
                     <group>
@@ -1200,7 +1200,7 @@
                                     <field name="rating_last_text" string="Rating" decoration-danger="rating_last_text == 'ko'"
                                         decoration-warning="rating_last_text == 'ok'" decoration-success="rating_last_text == 'top'"
                                         attrs="{'invisible': [('rating_last_text', '=', 'none')]}"
-                                        class="font-weight-bold" widget="badge" optional="hide"/>
+                                        class="fw-bold" widget="badge" optional="hide"/>
                                     <field name="kanban_state" widget="state_selection" optional="show" options="{'hide_label': True}" nolabel="1"/>
                                     <field name="stage_id" optional="show" context="{'default_project_id': project_id}"/>
                                     <button name="action_open_task" type="object" title="View Task" string="View Task" class="btn btn-link float-end"/>
@@ -1235,13 +1235,13 @@
                                     <field name="rating_last_text" string="Rating" decoration-danger="rating_last_text == 'ko'"
                                         decoration-warning="rating_last_text == 'ok'" decoration-success="rating_last_text == 'top'"
                                         attrs="{'invisible': [('rating_last_text', '=', 'none')]}"
-                                        class="font-weight-bold" widget="badge" optional="hide"/>
+                                        class="fw-bold" widget="badge" optional="hide"/>
                                     <field name="legend_normal" invisible="1"/>
                                     <field name="legend_done" invisible="1"/>
                                     <field name="legend_blocked" invisible="1"/>
                                     <field name="kanban_state" widget="state_selection" optional="show" options="{'hide_label': True}" nolabel="1"/>
                                     <field name="stage_id" optional="show" />
-                                    <button class="oe_link float-right" string="View Task" name="action_open_task" type="object"/>
+                                    <button class="oe_link float-end" string="View Task" name="action_open_task" type="object"/>
                                 </tree>
                             </field>
                         </page>
@@ -1414,7 +1414,7 @@
                                         </t>
                                         <t t-else="">
                                             <br/>
-                                            <span class="font-italic text-muted"><i class="fa fa-lock"></i> Private</span>
+                                            <span class="fst-italic text-muted"><i class="fa fa-lock"></i> Private</span>
                                         </t>
                                         <br />
                                         <t t-if="record.partner_id.value">
@@ -1428,7 +1428,7 @@
                                         <t t-else="record.email_from.raw_value"><span><field name="email_from"/></span></t>
                                     </div>
                                     <div class="o_dropdown_kanban dropdown" t-if="!selection_mode" groups="base.group_user">
-                                        <a role="button" class="dropdown-toggle o-no-caret btn" data-toggle="dropdown" data-display="static" href="#" aria-label="Dropdown menu" title="Dropdown menu">
+                                        <a role="button" class="dropdown-toggle o-no-caret btn" data-bs-toggle="dropdown" data-bs-display="static" href="#" aria-label="Dropdown menu" title="Dropdown menu">
                                             <span class="fa fa-ellipsis-v"/>
                                         </a>
                                         <div class="dropdown-menu" role="menu">
@@ -1501,7 +1501,7 @@
                     <field name="rating_last_text" string="Rating" decoration-danger="rating_last_text == 'ko'"
                         decoration-warning="rating_last_text == 'ok'" decoration-success="rating_last_text == 'top'"
                         attrs="{'invisible': ['|', ('rating_active', '=', False), ('rating_last_text', '=', 'none')]}"
-                        class="font-weight-bold" widget="badge" optional="hide" groups="project.group_project_rating"/>
+                        class="fw-bold" widget="badge" optional="hide" groups="project.group_project_rating"/>
                     <field name="legend_normal" invisible="1"/>
                     <field name="legend_done" invisible="1"/>
                     <field name="legend_blocked" invisible="1"/>
@@ -1592,13 +1592,13 @@
                     <templates>
                         <div class="justify-content-between" t-name="activity-box">
                             <field name="user_ids" widget="many2many_avatar_user"/>
-                            <div class="text-right">
+                            <div class="text-end">
                                 <span t-att-title="record.name.value">
                                     <field name="name" display="full"/>
                                 </span>
                                 <span t-att-title="record.project_id.value">
                                     <field t-if="record.project_id.value" name="project_id" muted="1" display="full"/>
-                                    <span t-else="" class="font-italic text-muted"><i class="fa fa-lock"></i> Private</span>
+                                    <span t-else="" class="fst-italic text-muted"><i class="fa fa-lock"></i> Private</span>
                                 </span>
                             </div>
                         </div>
diff --git a/addons/purchase/report/purchase_order_templates.xml b/addons/purchase/report/purchase_order_templates.xml
index a787167cc4f..13932807468 100644
--- a/addons/purchase/report/purchase_order_templates.xml
+++ b/addons/purchase/report/purchase_order_templates.xml
@@ -51,9 +51,9 @@
                         <th name="th_description"><strong>Description</strong></th>
                         <th name="th_taxes"><strong>Taxes</strong></th>
                         <th name="th_date_req" class="text-center"><strong>Date Req.</strong></th>
-                        <th name="th_quantity" class="text-right"><strong>Qty</strong></th>
-                        <th name="th_price_unit" class="text-right"><strong>Unit Price</strong></th>
-                        <th name="th_amount" class="text-right"><strong>Amount</strong></th>
+                        <th name="th_quantity" class="text-end"><strong>Qty</strong></th>
+                        <th name="th_price_unit" class="text-end"><strong>Unit Price</strong></th>
+                        <th name="th_amount" class="text-end"><strong>Amount</strong></th>
                     </tr>
                 </thead>
                 <tbody>
@@ -62,7 +62,7 @@
                         <t t-set="current_subtotal" t-value="current_subtotal + line.price_subtotal" groups="account.group_show_line_subtotals_tax_excluded"/>
                         <t t-set="current_subtotal" t-value="current_subtotal + line.price_total" groups="account.group_show_line_subtotals_tax_included"/>
 
-                        <tr t-att-class="'bg-200 font-weight-bold o_line_section' if line.display_type == 'line_section' else 'font-italic o_line_note' if line.display_type == 'line_note' else ''">
+                        <tr t-att-class="'bg-200 fw-bold o_line_section' if line.display_type == 'line_section' else 'fst-italic o_line_note' if line.display_type == 'line_note' else ''">
                             <t t-if="not line.display_type">
                                 <td id="product">
                                     <span t-field="line.name"/>
@@ -73,14 +73,14 @@
                                 <td class="text-center">
                                     <span t-field="line.date_planned"/>
                                 </td>
-                                <td class="text-right">
+                                <td class="text-end">
                                     <span t-field="line.product_qty"/>
                                     <span t-field="line.product_uom.name" groups="uom.group_uom"/>
                                 </td>
-                                <td class="text-right">
+                                <td class="text-end">
                                     <span t-field="line.price_unit"/>
                                 </td>
-                                <td class="text-right">
+                                <td class="text-end">
                                     <span t-field="line.price_subtotal"
                                         t-options='{"widget": "monetary", "display_currency": o.currency_id}'/>
                                 </td>
@@ -99,7 +99,7 @@
                             </t>
                         </tr>
                         <t t-if="current_section and (line_last or o.order_line[line_index+1].display_type == 'line_section')">
-                            <tr class="is-subtotal text-right">
+                            <tr class="is-subtotal text-end">
                                 <td colspan="99" id="subtotal">
                                     <strong class="mr16">Subtotal</strong>
                                     <span
diff --git a/addons/purchase/report/purchase_quotation_templates.xml b/addons/purchase/report/purchase_quotation_templates.xml
index dd71fcfb52d..cbecae0bf61 100644
--- a/addons/purchase/report/purchase_quotation_templates.xml
+++ b/addons/purchase/report/purchase_quotation_templates.xml
@@ -25,12 +25,12 @@
                     <tr>
                         <th name="th_description"><strong>Description</strong></th>
                         <th name="th_expected_date" class="text-center"><strong>Expected Date</strong></th>
-                        <th name="th_quantity" class="text-right"><strong>Qty</strong></th>
+                        <th name="th_quantity" class="text-end"><strong>Qty</strong></th>
                     </tr>
                 </thead>
                 <tbody>
                     <t t-foreach="o.order_line" t-as="order_line">
-                        <tr t-att-class="'bg-200 font-weight-bold o_line_section' if order_line.display_type == 'line_section' else 'font-italic o_line_note' if order_line.display_type == 'line_note' else ''">
+                        <tr t-att-class="'bg-200 fw-bold o_line_section' if order_line.display_type == 'line_section' else 'fst-italic o_line_note' if order_line.display_type == 'line_note' else ''">
                             <t t-if="not order_line.display_type">
                                 <td id="product">
                                     <span t-field="order_line.name"/>
@@ -38,7 +38,7 @@
                                 <td class="text-center">
                                     <span t-field="order_line.date_planned"/>
                                 </td>
-                                <td class="text-right">
+                                <td class="text-end">
                                     <span t-field="order_line.product_qty"/>
                                     <span t-field="order_line.product_uom" groups="uom.group_uom"/>
                                 </td>
diff --git a/addons/purchase/views/portal_templates.xml b/addons/purchase/views/portal_templates.xml
index dee46aed37d..3b8c51899ce 100644
--- a/addons/purchase/views/portal_templates.xml
+++ b/addons/purchase/views/portal_templates.xml
@@ -49,18 +49,18 @@
                         <span class='d-none d-md-inline'>Request for Quotation #</span>
                         <span class='d-block d-md-none'>Ref.</span>
                     </th>
-                      <th class="text-right">Order Deadline</th>
-                      <th class="text-right">Total</th>
+                      <th class="text-end">Order Deadline</th>
+                      <th class="text-end">Total</th>
                   </tr>
               </thead>
               <t t-foreach="rfqs" t-as="rfq">
                   <tr>
                       <td><a t-att-href="rfq.get_portal_url()"><t t-esc="rfq.name"/></a></td>
-                      <td class="text-right">
+                      <td class="text-end">
                           <span t-field="rfq.date_order" t-options="{'widget': 'date'}"/>&amp;nbsp;
                           <span class='d-none d-md-inline' t-field="rfq.date_order" t-options="{'time_only': True}"/>
                       </td>
-                      <td class="text-right">
+                      <td class="text-end">
                           <span t-field="rfq.amount_total"/>
                       </td>
                   </tr>
@@ -86,33 +86,33 @@
                           <span class='d-none d-md-inline'>Purchase Order #</span>
                           <span class='d-block d-md-none'>Ref.</span>
                       </th>
-                      <th class="text-right">
+                      <th class="text-end">
                           <span class='d-none d-md-inline'>Confirmation Date</span>
                           <span class='d-block d-md-none'>Confirmation</span>
                       </th>
                       <th class="text-center"/>
-                      <th class="text-right">Total</th>
+                      <th class="text-end">Total</th>
                   </tr>
               </thead>
               <t t-foreach="orders" t-as="order">
                   <tr>
                       <td><a t-att-href="order.get_portal_url()"><t t-esc="order.name"/></a></td>
-                      <td class="text-right">
+                      <td class="text-end">
                           <span t-field="order.date_approve" t-options="{'widget': 'date'}"/>&amp;nbsp;
                           <span class='d-none d-md-inline' t-field="order.date_approve" t-options="{'time_only': True}"/>
                       </td>
                       <td class="text-center">
-                          <span t-if="order.invoice_status == 'to invoice'" class="badge badge-pill badge-info">
+                          <span t-if="order.invoice_status == 'to invoice'" class="badge rounded-pill text-bg-info">
                               <i class="fa fa-fw fa-file-text" role="img" aria-label="Waiting for Bill" title="Waiting for Bill"></i><span class="d-none d-md-inline"> Waiting for Bill</span>
                           </span>
-                          <span t-if="order.state == 'cancel'" class="badge badge-pill badge-secondary">
+                          <span t-if="order.state == 'cancel'" class="badge rounded-pill text-bg-secondary">
                               <i class="fa fa-fw fa-remove" role="img" aria-label="Cancelled" title="Cancelled"></i><span class="d-none d-md-inline"> Cancelled</span>
                           </span>
-                          <span t-if="order.state == 'done'" class="badge badge-pill badge-success">
+                          <span t-if="order.state == 'done'" class="badge rounded-pill text-bg-success">
                               <i class="fa fa-fw fa-check" role="img" aria-label="Done" title="Done"></i><span class="d-none d-md-inline"> Done</span>
                           </span>
                       </td>
-                      <td class="text-right"><span t-field="order.amount_total"/></td>
+                      <td class="text-end"><span t-field="order.amount_total"/></td>
                   </tr>
               </t>
           </t>
@@ -139,7 +139,7 @@
                       <ul class="list-group list-group-flush flex-wrap flex-row flex-lg-column">
                           <li class="list-group-item flex-grow-1">
                               <div class="o_download_pdf btn-toolbar flex-sm-nowrap">
-                                  <div class="btn-group flex-grow-1 mr-1 mb-1">
+                                  <div class="btn-group flex-grow-1 me-1 mb-1">
                                       <a class="btn btn-secondary btn-block o_download_btn" t-att-href="order.get_portal_url(report_type='pdf', download=True)" title="Download"><i class="fa fa-download"/> Download</a>
                                   </div>
                                   <div class="btn-group flex-grow-1 mb-1">
@@ -148,17 +148,17 @@
                               </div>
                           </li>
 
-                          <li class="navspy list-group-item pl-0 flex-grow-1" t-ignore="true" role="complementary">
+                          <li class="navspy list-group-item ps-0 flex-grow-1" t-ignore="true" role="complementary">
                               <ul class="nav flex-column bs-sidenav"></ul>
                           </li>
 
                           <li t-if="order.user_id" class="list-group-item flex-grow-1">
                               <div class="small mb-1"><strong class="text-muted">Purchase Representative</strong></div>
                               <div class="row flex-nowrap">
-                                  <div class="col flex-grow-0 pr-2">
-                                      <img class="rounded-circle mr4 float-left o_portal_contact_img" t-att-src="image_data_uri(order.user_id.avatar_1024)" alt="Contact"/>
+                                  <div class="col flex-grow-0 pe-2">
+                                      <img class="rounded-circle mr4 float-start o_portal_contact_img" t-att-src="image_data_uri(order.user_id.avatar_1024)" alt="Contact"/>
                                   </div>
-                                  <div class="col pl-0" style="min-width: 150px">
+                                  <div class="col ps-0" style="min-width: 150px">
                                       <span t-field="order.user_id" t-options='{"widget": "contact", "fields": ["name", "phone"], "no_marker": True}'/>
                                       <a href="#discussion" class="small"><i class="fa fa-comment"></i> Send message</a>
                                   </div>
@@ -173,7 +173,7 @@
 
                   <!-- status messages -->
                   <div t-if="order.state == 'cancel'" class="alert alert-danger alert-dismissable d-print-none" role="alert">
-                      <button type="button" class="close" data-dismiss="alert" aria-label="close">&amp;times;</button>
+                      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="close"></button>
                       <strong>This purchase has been canceled.</strong>
                   </div>
 
@@ -224,7 +224,7 @@
                     <address t-field="order.company_id.partner_id" t-options='{"widget": "contact", "fields": ["address", "name"], "no_marker": True}'/>
                     <strong>Confirmation Date:</strong> <span t-field="order.date_approve" t-options='{"widget": "date"}'/><br/>
                     <div t-att-class="'d-inline' if order.date_planned else 'd-none'">
-                      <strong>Receipt Date:</strong><span class="ml-1" t-field="order.date_planned" t-options='{"widget": "date"}'/>
+                      <strong>Receipt Date:</strong><span class="ms-1" t-field="order.date_planned" t-options='{"widget": "date"}'/>
                     </div>
                   </div>
               </div>
@@ -243,8 +243,8 @@
                                       </a>
                                       <div class="small d-lg-inline-block">Date: <span class="text-muted" t-field="i.invoice_date"/></div>
                                   </div>
-                                  <span t-if="i.payment_state in ('paid', 'in_payment')" class="small badge badge-success orders_label_text_align"><i class="fa fa-fw fa-check"/> <b>Paid</b></span>
-                                  <span t-else="" class="small badge badge-info orders_label_text_align"><i class="fa fa-fw fa-clock-o"/> <b>Waiting Payment</b></span>
+                                  <span t-if="i.payment_state in ('paid', 'in_payment')" class="small badge text-bg-success orders_label_text_align"><i class="fa fa-fw fa-check"/> <b>Paid</b></span>
+                                  <span t-else="" class="small badge text-bg-info orders_label_text_align"><i class="fa fa-fw fa-clock-o"/> <b>Waiting Payment</b></span>
                               </div>
                           </t>
                       </ul>
@@ -258,15 +258,15 @@
               <table t-att-data-order-id="order.id" t-att-data-token="order.access_token" class="table table-sm" id="purchase_order_table">
                   <thead class="bg-100">
                       <tr>
-                          <th class="text-left">Products</th>
-                          <th class="text-right">Quantity</th>
-                          <th t-if="update_dates" class="text-right">Scheduled Date</th>
-                          <th t-if="update_dates" class="text-right"><strong>Update Here</strong></th>
-                          <th t-if="not update_dates and order.state in ['purchase', 'done']" t-attf-class="text-right {{ 'd-none d-sm-table-cell' if report_type == 'html' else '' }}">Unit Price</th>
-                          <th t-if="not update_dates and order.state in ['purchase', 'done']" t-attf-class="text-right {{ 'd-none d-md-table-cell' if report_type == 'html' else '' }}">
+                          <th class="text-start">Products</th>
+                          <th class="text-end">Quantity</th>
+                          <th t-if="update_dates" class="text-end">Scheduled Date</th>
+                          <th t-if="update_dates" class="text-end"><strong>Update Here</strong></th>
+                          <th t-if="not update_dates and order.state in ['purchase', 'done']" t-attf-class="text-end {{ 'd-none d-sm-table-cell' if report_type == 'html' else '' }}">Unit Price</th>
+                          <th t-if="not update_dates and order.state in ['purchase', 'done']" t-attf-class="text-end {{ 'd-none d-md-table-cell' if report_type == 'html' else '' }}">
                               <span>Taxes</span>
                           </th>
-                          <th class="text-right" t-if="order.state in ['purchase', 'done']" >
+                          <th class="text-end" t-if="order.state in ['purchase', 'done']" >
                               <span groups="account.group_show_line_subtotals_tax_excluded">Amount</span>
                               <span groups="account.group_show_line_subtotals_tax_included">Total Price</span>
                           </th>
@@ -281,20 +281,20 @@
                           <t t-set="current_subtotal" t-value="current_subtotal + line.price_subtotal" groups="account.group_show_line_subtotals_tax_excluded"/>
                           <t t-set="current_subtotal" t-value="current_subtotal + line.price_total" groups="account.group_show_line_subtotals_tax_included"/>
 
-                          <tr t-att-class="'bg-200 font-weight-bold o_line_section' if line.display_type == 'line_section' else 'font-italic o_line_note' if line.display_type == 'line_note' else ''">
+                          <tr t-att-class="'bg-200 fw-bold o_line_section' if line.display_type == 'line_section' else 'fst-italic o_line_note' if line.display_type == 'line_note' else ''">
                               <t t-if="not line.display_type">
                                   <td id="product_name">
                                       <img t-att-src="image_data_uri(resize_to_48(line.product_id.image_1024))" alt="Product" class="d-none d-lg-inline"/>
                                       <span t-field="line.name"/>
                                   </td>
-                                  <td class="text-right">
+                                  <td class="text-end">
                                       <div id="quote_qty">
                                           <span t-field="line.product_qty"/>
                                           <span t-field="line.product_uom" groups="uom.group_uom"/>
                                       </div>
                                   </td>
-                                  <td t-if="update_dates" class="text-right"><span t-esc="line.date_planned.date()"/></td>
-                                  <td t-if="update_dates" class="text-right">
+                                  <td t-if="update_dates" class="text-end"><span t-esc="line.date_planned.date()"/></td>
+                                  <td t-if="update_dates" class="text-end">
                                     <form t-attf-action="/my/purchase/#{order.id}/update?access_token=#{order.access_token}" method="post">
                                       <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
                                       <div class="container">
@@ -307,16 +307,16 @@
                                       </div>
                                     </form>
                                   </td>
-                                  <td t-if="not update_dates and order.state in ['purchase', 'done']" t-attf-class="text-right {{ 'd-none d-sm-table-cell' if report_type == 'html' else '' }}">
+                                  <td t-if="not update_dates and order.state in ['purchase', 'done']" t-attf-class="text-end {{ 'd-none d-sm-table-cell' if report_type == 'html' else '' }}">
                                       <div
                                           t-field="line.price_unit"
-                                          class="text-right"
+                                          class="text-end"
                                       />
                                   </td>
-                                  <td t-if="not update_dates and order.state in ['purchase', 'done']" t-attf-class="text-right {{ 'd-none d-md-table-cell' if report_type == 'html' else '' }}">
+                                  <td t-if="not update_dates and order.state in ['purchase', 'done']" t-attf-class="text-end {{ 'd-none d-md-table-cell' if report_type == 'html' else '' }}">
                                       <span t-esc="', '.join(map(lambda x: (x.description or x.name), line.taxes_id))"/>
                                   </td>
-                                  <td class="text-right" t-if="not update_dates and order.state in ['purchase', 'done']">
+                                  <td class="text-end" t-if="not update_dates and order.state in ['purchase', 'done']">
                                       <span class="oe_order_line_price_subtotal" t-field="line.price_subtotal" groups="account.group_show_line_subtotals_tax_excluded"/>
                                       <span class="oe_order_line_price_total" t-field="line.price_total" groups="account.group_show_line_subtotals_tax_included"/>
                                   </td>
@@ -336,7 +336,7 @@
                           </tr>
 
                           <t t-if="current_section and (line_last or order.order_line[line_index+1].display_type == 'line_section') and order.state in ['purchase', 'done']">
-                              <tr class="is-subtotal text-right">
+                              <tr class="is-subtotal text-end">
                                   <td colspan="99">
                                       <strong class="mr16">Subtotal</strong>
                                       <span
@@ -351,7 +351,7 @@
               </table>
 
               <div id="total" t-if="order.state in ['purchase', 'done']" class="row" name="total" style="page-break-inside: avoid;">
-                  <div t-attf-class="#{'col-4' if report_type != 'html' else 'col-sm-7 col-md-5'} ml-auto">
+                  <div t-attf-class="#{'col-4' if report_type != 'html' else 'col-sm-7 col-md-5'} ms-auto">
                       <t t-call="purchase.purchase_order_portal_content_totals_table"/>
                   </div>
               </div>
diff --git a/addons/purchase/views/purchase_views.xml b/addons/purchase/views/purchase_views.xml
index fc92482cec5..12d095c9a78 100644
--- a/addons/purchase/views/purchase_views.xml
+++ b/addons/purchase/views/purchase_views.xml
@@ -164,7 +164,7 @@
                         <span class="o_form_label" attrs="{'invisible': [('state','not in',('draft','sent'))]}">Request for Quotation </span>
                         <span class="o_form_label" attrs="{'invisible': [('state','in',('draft','sent'))]}">Purchase Order </span>
                         <h1>
-                            <field name="priority" widget="priority" class="mr-3"/>
+                            <field name="priority" widget="priority" class="me-3"/>
                             <field name="name" readonly="1"/>
                         </h1>
                     </div>
@@ -320,7 +320,7 @@
                                                          </div>
                                                          <div class="col-4">
                                                              <strong>
-                                                                 <span t-esc="record.price_subtotal.value" class="float-right text-right"/>
+                                                                 <span t-esc="record.price_subtotal.value" class="float-end text-end"/>
                                                              </strong>
                                                          </div>
                                                      </div>
@@ -490,7 +490,7 @@
                             <div t-attf-class="oe_kanban_card oe_kanban_global_click">
                                 <div class="o_kanban_record_top mb16">
                                     <field name="priority" widget="priority"/>
-                                    <div class="o_kanban_record_headings ml-1">
+                                    <div class="o_kanban_record_headings ms-1">
                                         <strong class="o_kanban_record_title"><span><t t-esc="record.partner_id.value"/></span></strong>
                                     </div>
                                     <strong><field name="amount_total" widget="monetary"/></strong>
diff --git a/addons/purchase/views/res_partner_views.xml b/addons/purchase/views/res_partner_views.xml
index 27c41648410..1c9e1be0222 100644
--- a/addons/purchase/views/res_partner_views.xml
+++ b/addons/purchase/views/res_partner_views.xml
@@ -54,8 +54,8 @@
                 </field>
                 <xpath expr="//div[hasclass('oe_kanban_bottom_left')]" position="inside">
                     <a t-if="record.purchase_order_count.value>0" data-type="action" data-name="%(purchase.act_res_partner_2_purchase_order)d"
-                       href="#" class="oe_kanban_action oe_kanban_action_a mr-1">
-                        <span class="badge badge-pill">
+                       href="#" class="oe_kanban_action oe_kanban_action_a me-1">
+                        <span class="badge rounded-pill">
                             <i class="fa fa-fw fa-credit-card" role="img" aria-label="Purchases" title="Purchases"/>
                             <t t-out="record.purchase_order_count.value"/>
                         </span>
diff --git a/addons/purchase_requisition/report/report_purchaserequisition.xml b/addons/purchase_requisition/report/report_purchaserequisition.xml
index d08e8cfd2ef..61f0b1afdcd 100644
--- a/addons/purchase_requisition/report/report_purchaserequisition.xml
+++ b/addons/purchase_requisition/report/report_purchaserequisition.xml
@@ -35,12 +35,12 @@
                             <thead>
                                 <tr>
                                     <th><strong>Description</strong></th>
-                                    <th class="text-right"><strong>Qty</strong></th>
+                                    <th class="text-end"><strong>Qty</strong></th>
                                     <th class="text-center" groups="uom.group_uom">
                                         <strong>Product UoM</strong>
                                     </th>
                                     <th t-if="o.type_id == env.ref('purchase_requisition.type_single')">Price Unit</th>
-                                    <th class="text-right"><strong>Scheduled Date</strong></th>
+                                    <th class="text-end"><strong>Scheduled Date</strong></th>
                                 </tr>
                             </thead>
                             <tbody>
@@ -49,7 +49,7 @@
                                         [ <span t-field="line_ids.product_id.code"/> ]
                                         <span t-field="line_ids.product_id.name"/>
                                     </td>
-                                    <td class="text-right">
+                                    <td class="text-end">
                                         <span t-field="line_ids.product_qty"/>
                                     </td>
                                     <t>
@@ -60,7 +60,7 @@
                                     <td t-if="o.type_id == env.ref('purchase_requisition.type_single')">
                                         <span t-field="line_ids.price_unit" t-options='{"widget": "monetary", "display_currency": o.company_id.currency_id}'/>
                                     </td>
-                                    <td class="text-right">
+                                    <td class="text-end">
                                         <span t-field="line_ids.schedule_date"/>
                                     </td>
                                 </tr>
@@ -75,7 +75,7 @@
                                 <tr>
                                     <th><strong>Vendor </strong></th>
                                     <th><strong>Date</strong></th>
-                                    <th class="text-right"><strong>Reference </strong></th>
+                                    <th class="text-end"><strong>Reference </strong></th>
                                 </tr>
                             </thead>
                             <tbody>
@@ -86,7 +86,7 @@
                                     <td class="text-center">
                                         <span t-field="purchase_ids.date_order"/>
                                     </td>
-                                    <td class="text-right">
+                                    <td class="text-end">
                                         <span t-field="purchase_ids.name"/>
                                     </td>
                                 </tr>
diff --git a/addons/purchase_requisition/static/src/xml/purchase_order_line_compare.xml b/addons/purchase_requisition/static/src/xml/purchase_order_line_compare.xml
index b538760be28..58c2de1d7f1 100644
--- a/addons/purchase_requisition/static/src/xml/purchase_order_line_compare.xml
+++ b/addons/purchase_requisition/static/src/xml/purchase_order_line_compare.xml
@@ -3,7 +3,7 @@
 
 <t t-extend="ListView.buttons" t-name="PurchaseOrderLineCompare.Buttons">
     <t t-jquery="button.o_list_button_discard" t-operation="after">
-        <button class="btn btn-secondary o_clear_qty_buttons mr-2" type="button">
+        <button class="btn btn-secondary o_clear_qty_buttons me-2" type="button">
             Clear Selected
         </button>
     </t>
diff --git a/addons/purchase_requisition/views/purchase_requisition_views.xml b/addons/purchase_requisition/views/purchase_requisition_views.xml
index a309bdcc8c1..00db125136f 100644
--- a/addons/purchase_requisition/views/purchase_requisition_views.xml
+++ b/addons/purchase_requisition/views/purchase_requisition_views.xml
@@ -126,7 +126,7 @@
                         <field name="order_count" widget="statinfo" string="RFQs/Orders"/>
                     </button>
                 </div>
-                <div class="float-left">
+                <div class="float-start">
                     <label for="name" class="oe_inline"/>
                     <h1>
                         <field name="name"/>
diff --git a/addons/purchase_stock/report/report_stock_forecasted.xml b/addons/purchase_stock/report/report_stock_forecasted.xml
index a10a2ef9c06..97d9dccdbda 100644
--- a/addons/purchase_stock/report/report_stock_forecasted.xml
+++ b/addons/purchase_stock/report/report_stock_forecasted.xml
@@ -4,12 +4,12 @@
         <xpath expr="//tr[@name='draft_picking_in']" position="after">
             <tr t-if="docs['draft_purchase_qty']" name="draft_po_in" t-attf-class="#{docs['draft_purchase_orders_matched'] and 'o_grid_match'}">
                 <td colspan="2">Requests for quotation</td>
-                <td t-esc="docs['draft_purchase_qty']" t-options="{'widget': 'float', 'precision': precision}" class="text-right"/>
+                <td t-esc="docs['draft_purchase_qty']" t-options="{'widget': 'float', 'precision': precision}" class="text-end"/>
                 <td>
                     <t t-foreach="docs['draft_purchase_orders']" t-as="purchase_order">
                         <t t-if="purchase_order_index > 0">|</t>
                         <a t-attf-href="#" t-esc="purchase_order.name"
-                            class="font-weight-bold" view-type="form"
+                            class="fw-bold" view-type="form"
                             t-att-res-model="purchase_order._name"
                             t-att-res-id="purchase_order.id"/>
                     </t>
diff --git a/addons/purchase_stock/views/res_config_settings_views.xml b/addons/purchase_stock/views/res_config_settings_views.xml
index 4f9464381cd..ab8490fe469 100644
--- a/addons/purchase_stock/views/res_config_settings_views.xml
+++ b/addons/purchase_stock/views/res_config_settings_views.xml
@@ -45,7 +45,7 @@
 					</div>
 					<div class="o_setting_right_pane">
 						<label for="use_po_lead"/>
-						<a href="https://www.odoo.com/documentation/master/applications/inventory_and_mrp/inventory/management/planning/scheduled_dates.html" title="Documentation" class="mr-2 o_doc_link" target="_blank"></a>
+						<a href="https://www.odoo.com/documentation/master/applications/inventory_and_mrp/inventory/management/planning/scheduled_dates.html" title="Documentation" class="me-2 o_doc_link" target="_blank"></a>
 						<span class="fa fa-lg fa-building-o" title="Values set here are company-specific." groups="base.group_multi_company"/>
 						<div class="text-muted">
 							Schedule automatically generated request for quotations earlier to avoid delays
diff --git a/addons/rating/static/src/components/thread_needaction_preview/thread_needaction_preview.xml b/addons/rating/static/src/components/thread_needaction_preview/thread_needaction_preview.xml
index a7864277cbe..4a6a99c6aa8 100644
--- a/addons/rating/static/src/components/thread_needaction_preview/thread_needaction_preview.xml
+++ b/addons/rating/static/src/components/thread_needaction_preview/thread_needaction_preview.xml
@@ -4,7 +4,7 @@
         <xpath expr="//*[hasclass('o_ThreadNeedactionPreview_messageBody')]" position="replace">
             <t t-if="threadNeedactionPreviewView.isRating">
                 <span class="o_ThreadNeedactionPreview_ratingText">Rating:</span>
-                <img class="o_ThreadNeedactionPreview_ratingImage ml-2" t-att-src="threadNeedactionPreviewView.thread.lastNeedactionMessageAsOriginThread.rating.ratingImageUrl" t-att-alt="threadNeedactionPreviewView.thread.lastNeedactionMessageAsOriginThread.rating.ratingText"/>
+                <img class="o_ThreadNeedactionPreview_ratingImage ms-2" t-att-src="threadNeedactionPreviewView.thread.lastNeedactionMessageAsOriginThread.rating.ratingImageUrl" t-att-alt="threadNeedactionPreviewView.thread.lastNeedactionMessageAsOriginThread.rating.ratingText"/>
             </t>
             <t t-else="">$0</t>
         </xpath>
diff --git a/addons/rating/static/src/components/thread_preview/thread_preview.xml b/addons/rating/static/src/components/thread_preview/thread_preview.xml
index 56ad13aa0f5..8e2d503a66a 100644
--- a/addons/rating/static/src/components/thread_preview/thread_preview.xml
+++ b/addons/rating/static/src/components/thread_preview/thread_preview.xml
@@ -4,7 +4,7 @@
         <xpath expr="//*[hasclass('o_ThreadPreview_messageBody')]" position="replace">
             <t t-if="threadPreviewView.isRating">
                 <span class="o_ThreadPreview_ratingText">Rating:</span>
-                <img class="o_ThreadPreview_ratingImage ml-2" t-att-src="threadPreviewView.thread.lastMessage.rating.ratingImageUrl" t-att-alt="threadPreviewView.thread.lastMessage.rating.ratingText"/>
+                <img class="o_ThreadPreview_ratingImage ms-2" t-att-src="threadPreviewView.thread.lastMessage.rating.ratingImageUrl" t-att-alt="threadPreviewView.thread.lastMessage.rating.ratingText"/>
             </t>
             <t t-else="">$0</t>
         </xpath>
diff --git a/addons/rating/views/rating_rating_views.xml b/addons/rating/views/rating_rating_views.xml
index 76a8f90d0c2..ab55e80e50b 100644
--- a/addons/rating/views/rating_rating_views.xml
+++ b/addons/rating/views/rating_rating_views.xml
@@ -11,7 +11,7 @@
                     <field name="parent_res_name" optional="show"/>
                     <field name="res_name" optional="show"/>
                     <field name="feedback" optional="hide"/>
-                    <field name="rating_text" decoration-danger="rating_text == 'ko'" decoration-warning="rating_text == 'ok'" decoration-success="rating_text == 'top'" class="font-weight-bold" widget="badge"/>
+                    <field name="rating_text" decoration-danger="rating_text == 'ko'" decoration-warning="rating_text == 'ok'" decoration-success="rating_text == 'top'" class="fw-bold" widget="badge"/>
                 </tree>
             </field>
         </record>
@@ -95,7 +95,7 @@
                                     <div class="col-4 my-auto">
                                         <field name="rating_image" widget="image"/>
                                     </div>
-                                    <div class="col-8 pl-1">
+                                    <div class="col-8 ps-1">
                                         <strong>
                                             <field name="rated_partner_name"/>
                                         </strong>
@@ -150,7 +150,7 @@
                             <t t-set="empty_star" t-value="5 - (val_integer + Math.ceil(val_decimal))"/>
                             <div class="oe_kanban_card oe_kanban_global_click">
                                 <div class="d-flex flex-row">
-                                    <div class="o_rating_kanban_left mr-3">
+                                    <div class="o_rating_kanban_left me-3">
                                         <h1 class="o_rating_value text-center text-primary" t-esc="val_stars"/>
                                         <i t-foreach="[...Array(val_integer).keys()]" t-as="num"  t-key="num"
                                            class="fa fa-star"
@@ -168,17 +168,17 @@
                                     <div>
                                         <div class="o_kanban_card_header">
                                             <div class="o_kanban_card_header_title">
-                                                <span class="font-weight-bold"><field name="partner_id"/></span>
+                                                <span class="fw-bold"><field name="partner_id"/></span>
                                             </div>
                                         </div>
                                         <div class="o_kanban_card_content mt0 d-flex flex-column">
                                             <span>
-                                                <i class="fa fa-folder mr-2" aria-label="Open folder"></i>
+                                                <i class="fa fa-folder me-2" aria-label="Open folder"></i>
                                                 <a type="object" name="action_open_rated_object" t-att-title="record.res_name.raw_value">
                                                     <field name="res_name" />
                                                 </a>
                                             </span>
-                                            <span><i class="fa fa-clock-o mr-2" aria-label="Create date"/> <field name="create_date" /></span>
+                                            <span><i class="fa fa-clock-o me-2" aria-label="Create date"/> <field name="create_date" /></span>
                                             <div class="d-flex mt-2">
                                                 <span t-esc="record.feedback.raw_value"/>
                                             </div>
diff --git a/addons/rating/views/rating_templates.xml b/addons/rating/views/rating_templates.xml
index a877b3aa970..52a68d5a181 100644
--- a/addons/rating/views/rating_templates.xml
+++ b/addons/rating/views/rating_templates.xml
@@ -23,7 +23,7 @@
                     <div class="row text-center justify-content-center">
                         <h1 class="col-12 mt-5">Thank you for rating our services!</h1>
                         <form class="col-md-6" t-attf-action="/rate/#{token}/submit_feedback" method="post">
-                            <div class="btn-group btn-group-toggle row flex-nowrap justify-content-center w-100 mt-5" data-toggle="buttons">
+                            <div class="btn-group btn-group-toggle row flex-nowrap justify-content-center w-100 mt-5" data-bs-toggle="buttons">
                                 <t t-foreach="rate_names" t-as="rate_name">
                                     <label t-attf-class="col p-4 btn o_rating_label shadow-none {{rate == rate_name and 'active' or ''}}">
                                         <input type="radio" name="rate" t-attf-id="rate_{{rate_name}}" t-att-value="rate_name" t-att-checked="rate == rate_name"/>
diff --git a/addons/repair/report/repair_templates_repair_order.xml b/addons/repair/report/repair_templates_repair_order.xml
index aa70456cbe1..06638905192 100644
--- a/addons/repair/report/repair_templates_repair_order.xml
+++ b/addons/repair/report/repair_templates_repair_order.xml
@@ -56,11 +56,11 @@
                         <thead>
                             <tr>
                                 <th>Description</th>
-                                <th class="text-right">Quantity</th>
+                                <th class="text-end">Quantity</th>
                                 <t t-if="o.invoice_method != 'none'">
-                                    <th class="text-right">Unit Price</th>
+                                    <th class="text-end">Unit Price</th>
                                     <th class="text-center">Tax</th>
-                                    <th class="text-right">Price</th>
+                                    <th class="text-end">Price</th>
                                 </t>
                             </tr>
                         </thead>
@@ -72,18 +72,18 @@
                                         <p t-if="line.type == 'add'"><i>(Add)</i> <span t-field="line.name" /></p>
                                         <p t-if="line.type == 'remove'">(<i>Remove</i>) <span t-field="line.name"/></p>
                                     </td>
-                                    <td class="text-right">
+                                    <td class="text-end">
                                         <span t-field="line.product_uom_qty"/>
                                         <span groups="uom.group_uom" t-field="line.product_uom.name"/>
                                     </td>
                                     <t t-if="(line.repair_id.invoice_method != 'none')">
-                                        <td class="text-right">
+                                        <td class="text-end">
                                             <span t-field="line.price_unit"/>
                                         </td>
                                         <td class="text-center">
                                             <span t-esc="','.join(map( lambda x: x.name, line.tax_id))"/>
                                         </td>
-                                        <td class="text-right o_price_total">
+                                        <td class="text-end o_price_total">
                                             <span t-field="line.price_subtotal" t-options='{"widget": "monetary", "display_currency": o.pricelist_id.currency_id}'/>
                                        </td>
                                     </t>
@@ -95,18 +95,18 @@
                                     <td>
                                         <span t-field="fees.name"/>
                                     </td>
-                                    <td class="text-right">
+                                    <td class="text-end">
                                         <span t-field="fees.product_uom_qty"/>
                                         <span groups="uom.group_uom" t-field="fees.product_uom.name"/>
                                     </td>
                                     <t t-if="(fees.repair_id.invoice_method != 'none')">
-                                        <td class="text-right">
+                                        <td class="text-end">
                                             <span t-field="fees.price_unit"/>
                                         </td>
                                         <td class="text-center">
                                             <span t-esc="','.join(map( lambda x: x.name, fees.tax_id))"/>
                                         </td>
-                                        <td class="text-right o_price_total">
+                                        <td class="text-end o_price_total">
                                             <span t-field="fees.price_subtotal"
                                                 t-options='{"widget": "monetary", "display_currency": o.pricelist_id.currency_id}'/>
                                        </td>
@@ -122,21 +122,21 @@
                                 <t t-if="o.invoice_method !='none'">
                                     <tr class="border-black o_subtotal">
                                         <td><strong>Total Without Taxes</strong></td>
-                                        <td class="text-right">
+                                        <td class="text-end">
                                             <span t-field="o.amount_untaxed"
                                                 t-options='{"widget": "monetary", "display_currency": o.pricelist_id.currency_id}'/>
                                         </td>
                                     </tr>
                                     <tr>
                                         <td>Taxes</td>
-                                        <td class="text-right o_price_total">
+                                        <td class="text-end o_price_total">
                                             <span t-field="o.amount_tax"
                                                 t-options='{"widget": "monetary", "display_currency": o.pricelist_id.currency_id}'/>
                                         </td>
                                     </tr>
                                     <tr class="border-black o_total">
                                         <td><strong>Total</strong></td>
-                                        <td class="text-right o_price_total">
+                                        <td class="text-end o_price_total">
                                             <span t-field="o.amount_total"
                                                 t-options='{"widget": "monetary", "display_currency": o.pricelist_id.currency_id}'/>
                                         </td>
diff --git a/addons/repair/views/repair_views.xml b/addons/repair/views/repair_views.xml
index f5b2568ec82..0bf2de42632 100644
--- a/addons/repair/views/repair_views.xml
+++ b/addons/repair/views/repair_views.xml
@@ -66,7 +66,7 @@
                     <div class="oe_title">
                         <label class="o_form_label" for="name"/>
                         <h1>
-                            <field name="priority" widget="priority" class="mr-3"/>
+                            <field name="priority" widget="priority" class="me-3"/>
                             <field name="name"/>
                         </h1>
                     </div>
@@ -250,7 +250,7 @@
                                 <div class="col-6">
                                     <strong><span><t t-esc="record.name.value"/></span></strong>
                                 </div>
-                                <div class="col-6 text-right">
+                                <div class="col-6 text-end">
                                     <field name="state" widget="label_selection" options="{'classes': {'draft': 'info', 'cancel': 'danger', 'done': 'success', 'under_repair': 'secondary'}}"/>
                                 </div>
                             </div>
@@ -260,7 +260,7 @@
                                     <field name="tag_ids" widget="many2many_tags" options="{'color_field': 'color'}"/>
                                 </div>
                                 <div class="col-6">
-                                    <span class="float-right">
+                                    <span class="float-end">
                                         <field name="partner_id"/>
                                     </span>
                                 </div>
diff --git a/addons/sale/report/ir_actions_report_templates.xml b/addons/sale/report/ir_actions_report_templates.xml
index fef873112cb..492c8759591 100644
--- a/addons/sale/report/ir_actions_report_templates.xml
+++ b/addons/sale/report/ir_actions_report_templates.xml
@@ -69,14 +69,14 @@
                 <!-- In case we want to repeat the header, remove "display: table-row-group" -->
                 <thead style="display: table-row-group">
                     <tr>
-                        <th name="th_description" class="text-left">Description</th>
-                        <th name="th_quantity" class="text-right">Quantity</th>
-                        <th name="th_priceunit" class="text-right">Unit Price</th>
-                        <th name="th_discount" t-if="display_discount" class="text-right" groups="product.group_discount_per_so_line">
+                        <th name="th_description" class="text-start">Description</th>
+                        <th name="th_quantity" class="text-end">Quantity</th>
+                        <th name="th_priceunit" class="text-end">Unit Price</th>
+                        <th name="th_discount" t-if="display_discount" class="text-end" groups="product.group_discount_per_so_line">
                             <span>Disc.%</span>
                         </th>
-                        <th name="th_taxes" class="text-right">Taxes</th>
-                        <th name="th_subtotal" class="text-right">
+                        <th name="th_taxes" class="text-end">Taxes</th>
+                        <th name="th_subtotal" class="text-end">
                             <span groups="account.group_show_line_subtotals_tax_excluded">Amount</span>
                             <span groups="account.group_show_line_subtotals_tax_included">Total Price</span>
                         </th>
@@ -91,23 +91,23 @@
                         <t t-set="current_subtotal" t-value="current_subtotal + line.price_subtotal" groups="account.group_show_line_subtotals_tax_excluded"/>
                         <t t-set="current_subtotal" t-value="current_subtotal + line.price_total" groups="account.group_show_line_subtotals_tax_included"/>
 
-                        <tr t-att-class="'bg-200 font-weight-bold o_line_section' if line.display_type == 'line_section' else 'font-italic o_line_note' if line.display_type == 'line_note' else ''">
+                        <tr t-att-class="'bg-200 fw-bold o_line_section' if line.display_type == 'line_section' else 'fst-italic o_line_note' if line.display_type == 'line_note' else ''">
                             <t t-if="not line.display_type">
                                 <td name="td_name"><span t-field="line.name"/></td>
-                                <td name="td_quantity" class="text-right">
+                                <td name="td_quantity" class="text-end">
                                     <span t-field="line.product_uom_qty"/>
                                     <span t-field="line.product_uom"/>
                                 </td>
-                                <td name="td_priceunit" class="text-right">
+                                <td name="td_priceunit" class="text-end">
                                     <span t-field="line.price_unit"/>
                                 </td>
-                                <td t-if="display_discount" class="text-right" groups="product.group_discount_per_so_line">
+                                <td t-if="display_discount" class="text-end" groups="product.group_discount_per_so_line">
                                     <span t-field="line.discount"/>
                                 </td>
-                                <td name="td_taxes" class="text-right">
+                                <td name="td_taxes" class="text-end">
                                     <span t-esc="', '.join(map(lambda x: (x.description or x.name), line.tax_id))"/>
                                 </td>
-                                <td name="td_subtotal" class="text-right o_price_total">
+                                <td name="td_subtotal" class="text-end o_price_total">
                                     <span t-field="line.price_subtotal" groups="account.group_show_line_subtotals_tax_excluded"/>
                                     <span t-field="line.price_total" groups="account.group_show_line_subtotals_tax_included"/>
                                 </td>
@@ -127,7 +127,7 @@
                         </tr>
 
                         <t t-if="current_section and (line_last or doc.order_line[line_index+1].display_type == 'line_section')">
-                            <tr class="is-subtotal text-right">
+                            <tr class="is-subtotal text-end">
                                 <td name="td_section_subtotal" colspan="99">
                                     <strong class="mr16">Subtotal</strong>
                                     <span
@@ -143,7 +143,7 @@
 
             <div class="clearfix" name="so_total_summary">
                 <div id="total" class="row" name="total">
-                    <div t-attf-class="#{'col-6' if report_type != 'html' else 'col-sm-7 col-md-6'} ml-auto">
+                    <div t-attf-class="#{'col-6' if report_type != 'html' else 'col-sm-7 col-md-6'} ms-auto">
                         <table class="table table-sm">
                             <!-- Tax totals -->
                             <t t-set="tax_totals" t-value="json.loads(doc.tax_totals_json)"/>
diff --git a/addons/sale/static/src/scss/product_configurator.scss b/addons/sale/static/src/scss/product_configurator.scss
index ad677e59701..6ba6b7b70b0 100644
--- a/addons/sale/static/src/scss/product_configurator.scss
+++ b/addons/sale/static/src/scss/product_configurator.scss
@@ -1,7 +1,7 @@
 .css_attribute_color {
     position: relative;
     display: inline-block;
-    border: 5px solid gray('300');
+    border: 5px solid map-get($grays, '300');
     border-radius: 50%;
     text-align: center;
     transition: border 200ms;
@@ -23,7 +23,7 @@
     }
 
     &.active {
-        border: 5px solid theme-color('primary');
+        border: 5px solid map-get($theme-colors, 'primary');
     }
 
     &.custom_value {
@@ -71,8 +71,8 @@ option.css_not_available {
     color: #ccc;
 }
 
-select.custom-select.css_attribute_select {
-    background: str-replace(url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='175' height='100' fill='#{theme-color('primary')}'><polygon points='0,0 100,0 50,50'/></svg>"), "#", "%23") ;
+select.form-select.css_attribute_select {
+    background: str-replace(url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='175' height='100' fill='#{map-get($theme-colors, 'primary')}'><polygon points='0,0 100,0 50,50'/></svg>"), "#", "%23") ;
     background-size: 25px;
     background-position: 100% 75%;
     background-repeat: no-repeat;
@@ -91,9 +91,9 @@ label.css_attribute_color.css_not_available {
     &:after {
         content: "";
         @include o-position-absolute(-5px, -5px, -5px, -5px);
-        border: 2px solid theme-color('danger');
+        border: 2px solid map-get($theme-colors, 'danger');
         border-radius: 50%;
-        background: str-replace(url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='39' height='39'><line y2='0' x2='39' y1='39' x1='0' style='stroke:#{theme-color('danger')};stroke-width:2'/><line y2='1' x2='40' y1='40' x1='1' style='stroke:rgb(255,255,255);stroke-width:1'/></svg>"), "#", "%23") ;
+        background: str-replace(url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='39' height='39'><line y2='0' x2='39' y1='39' x1='0' style='stroke:#{map-get($theme-colors, 'danger')};stroke-width:2'/><line y2='1' x2='40' y1='40' x1='1' style='stroke:rgb(255,255,255);stroke-width:1'/></svg>"), "#", "%23") ;
         background-position: center;
         background-repeat: no-repeat;
     }
@@ -109,7 +109,7 @@ label.css_attribute_color.css_not_available {
         display: inline-block;
         width: 1rem;
         height: 1rem;
-        color: theme-color('primary');
+        color: map-get($theme-colors, 'primary');
         background: white;
         line-height: 1rem;
         border-radius: 50%;
@@ -130,7 +130,7 @@ label.css_attribute_color.css_not_available {
             content: '';
             margin-left: $spacer;
             flex-grow: 1;
-            border-bottom: 1px solid gray('400');
+            border-bottom: 1px solid map-get($grays, '400');
         }
     }
 
@@ -146,9 +146,9 @@ label.css_attribute_color.css_not_available {
         }
         &.o_variant_pills_input_value {
             .badge {
-                color: gray('600');
+                color: map-get($grays, '600');
                 background: white;
-                border: 1px solid theme-color('primary');
+                border: 1px solid map-get($theme-colors, 'primary');
 
                 &, > span {
                     vertical-align: middle;
@@ -184,11 +184,11 @@ label.css_attribute_color.css_not_available {
         cursor: default !important;
 
         &.btn.active {
-            background-color: theme-color('primary');
+            background-color: map-get($theme-colors, 'primary');
         }
         &:not(.active) {
-            color: gray('600');
-            background-color: gray('200');
+            color: map-get($grays, '600');
+            background-color: map-get($grays, '200');
         }
     }
 }
diff --git a/addons/sale/views/crm_team_views.xml b/addons/sale/views/crm_team_views.xml
index 8542916c613..cd6d5d42f54 100644
--- a/addons/sale/views/crm_team_views.xml
+++ b/addons/sale/views/crm_team_views.xml
@@ -116,7 +116,7 @@
                             <t t-else="">Quotations</t>
                         </a>
                     </div>
-                    <div class="col-4 text-right text-truncate">
+                    <div class="col-4 text-end text-truncate">
                         <field name="quotations_amount" widget="monetary"/>
                     </div>
                 </div>
diff --git a/addons/sale/views/product_views.xml b/addons/sale/views/product_views.xml
index fe533e1b95d..faceb3fe9d5 100644
--- a/addons/sale/views/product_views.xml
+++ b/addons/sale/views/product_views.xml
@@ -21,13 +21,13 @@
                 <label for="product_tooltip" string=""
                     attrs="{'invisible': ['|', ('type', 'not in', ('product', 'consu')), ('invoice_policy', '!=', 'order')]}"/>
                 <div attrs="{'invisible': ['|', ('type', 'not in', ('product', 'consu')), ('invoice_policy', '!=', 'order')]}"
-                    class="font-italic text-muted">
+                    class="fst-italic text-muted">
                     You can invoice them before they are delivered.
                 </div>
                 <label for="product_tooltip" string=""
                     attrs="{'invisible': ['|', ('type', 'not in', ('product', 'consu')), ('invoice_policy', '!=', 'delivery')]}"/>
                 <div attrs="{'invisible': ['|', ('type', 'not in', ('product', 'consu')), ('invoice_policy', '!=', 'delivery')]}"
-                    class="font-italic text-muted">
+                    class="fst-italic text-muted">
                     Invoice after delivery, based on quantities delivered, not ordered.
                 </div>
             </field>
diff --git a/addons/sale/views/res_config_settings_views.xml b/addons/sale/views/res_config_settings_views.xml
index cce4f730b83..a6730e97153 100644
--- a/addons/sale/views/res_config_settings_views.xml
+++ b/addons/sale/views/res_config_settings_views.xml
@@ -173,7 +173,7 @@
                             </div>
                             <div class="o_setting_right_pane">
                                 <label for="portal_confirmation_sign"/>
-                                <a href="https://www.odoo.com/documentation/master/applications/sales/sales/send_quotations/get_signature_to_validate.html" title="Documentation" class="mr-2 o_doc_link" target="_blank"></a>
+                                <a href="https://www.odoo.com/documentation/master/applications/sales/sales/send_quotations/get_signature_to_validate.html" title="Documentation" class="me-2 o_doc_link" target="_blank"></a>
                                 <span class="fa fa-lg fa-building-o" title="Values set here are company-specific." groups="base.group_multi_company"/>
                                 <div class="text-muted">
                                     Request an online signature to confirm orders
@@ -186,7 +186,7 @@
                             </div>
                             <div class="o_setting_right_pane">
                                 <label for="portal_confirmation_pay"/>
-                                <a href="https://www.odoo.com/documentation/master/applications/sales/sales/send_quotations/get_paid_to_validate.html" title="Documentation" class="mr-2 o_doc_link" target="_blank"></a>
+                                <a href="https://www.odoo.com/documentation/master/applications/sales/sales/send_quotations/get_paid_to_validate.html" title="Documentation" class="me-2 o_doc_link" target="_blank"></a>
                                 <span class="fa fa-lg fa-building-o" title="Values set here are company-specific." groups="base.group_multi_company"/>
                                 <div class="text-muted">
                                     Request an online payment to confirm orders
diff --git a/addons/sale/views/res_partner_views.xml b/addons/sale/views/res_partner_views.xml
index 050ab768709..2713b3e46a8 100644
--- a/addons/sale/views/res_partner_views.xml
+++ b/addons/sale/views/res_partner_views.xml
@@ -28,8 +28,8 @@
             </field>
             <xpath expr="//div[hasclass('oe_kanban_bottom_left')]" position="inside">
                 <a t-if="record.sale_order_count.value>0" data-type="object" data-name="action_view_sale_order"
-                   href="#" class="oe_kanban_action oe_kanban_action_a mr-1">
-                    <span class="badge badge-pill">
+                   href="#" class="oe_kanban_action oe_kanban_action_a me-1">
+                    <span class="badge rounded-pill">
                         <i class="fa fa-fw fa-usd" role="img" aria-label="Sale orders" title="Sales orders"/>
                         <t t-out="record.sale_order_count.value"/>
                     </span>
diff --git a/addons/sale/views/sale_order_views.xml b/addons/sale/views/sale_order_views.xml
index fc2e7615099..9309f147b96 100644
--- a/addons/sale/views/sale_order_views.xml
+++ b/addons/sale/views/sale_order_views.xml
@@ -522,10 +522,10 @@
                                 <field name="company_id" invisible="1"/>
                                 <templates>
                                     <t t-name="kanban-box">
-                                        <div t-attf-class="oe_kanban_card oe_kanban_global_click pl-0 pr-0 {{ record.display_type.raw_value ? 'o_is_' + record.display_type.raw_value : '' }}">
+                                        <div t-attf-class="oe_kanban_card oe_kanban_global_click ps-0 pe-0 {{ record.display_type.raw_value ? 'o_is_' + record.display_type.raw_value : '' }}">
                                             <t t-if="!record.display_type.raw_value">
-                                                <div class="row no-gutters">
-                                                    <div class="col-2 pr-3">
+                                                <div class="row g-0">
+                                                    <div class="col-2 pe-3">
                                                         <img t-att-src="kanban_image('product.product', 'image_128', record.product_id.raw_value)" t-att-title="record.product_id.value" t-att-alt="record.product_id.value" style="max-width: 100%;"/>
                                                     </div>
                                                     <div class="col-10">
@@ -536,7 +536,7 @@
                                                             <div class="col-auto">
                                                                 <t t-set="line_price" t-value="record.price_subtotal.value" groups="account.group_show_line_subtotals_tax_excluded"/>
                                                                 <t t-set="line_price" t-value="record.price_total.value" groups="account.group_show_line_subtotals_tax_included"/>
-                                                                <strong class="float-right text-right" t-esc="line_price" />
+                                                                <strong class="float-end text-end" t-esc="line_price" />
                                                             </div>
                                                         </div>
                                                         <div class="row">
diff --git a/addons/sale/views/sale_portal_templates.xml b/addons/sale/views/sale_portal_templates.xml
index c8b49d3547d..2b2e0cedd49 100644
--- a/addons/sale/views/sale_portal_templates.xml
+++ b/addons/sale/views/sale_portal_templates.xml
@@ -44,24 +44,24 @@
                 <thead>
                     <tr class="active">
                         <th>Quotation #</th>
-                        <th class="text-right">Quotation Date</th>
-                        <th class="text-right">Valid Until</th>
+                        <th class="text-end">Quotation Date</th>
+                        <th class="text-end">Valid Until</th>
                         <th class="text-center"/>
-                        <th class="text-right">Total</th>
+                        <th class="text-end">Total</th>
                     </tr>
                 </thead>
                 <t t-foreach="quotations" t-as="quotation">
                     <tr>
                         <td><a t-att-href="quotation.get_portal_url()"><t t-esc="quotation.name"/></a></td>
-                        <td class="text-right"><span t-field="quotation.date_order"/></td>
-                        <td class="text-right"><span t-field="quotation.validity_date"/></td>
+                        <td class="text-end"><span t-field="quotation.date_order"/></td>
+                        <td class="text-end"><span t-field="quotation.validity_date"/></td>
                         <td class="text-center">
-                            <span t-if="quotation.state == 'cancel'" class="badge badge-pill badge-secondary">
+                            <span t-if="quotation.state == 'cancel'" class="badge rounded-pill text-bg-secondary">
                                 <i class="fa fa-fw fa-remove"/> Cancelled</span>
-                            <span t-if="quotation.is_expired" class="badge badge-pill badge-secondary">
+                            <span t-if="quotation.is_expired" class="badge rounded-pill text-bg-secondary">
                                 <i class="fa fa-fw fa-clock-o"/> Expired</span>
                         </td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-field="quotation.amount_total"/>
                         </td>
                     </tr>
@@ -85,24 +85,24 @@
                             <span class='d-none d-md-inline'>Sales Order #</span>
                             <span class='d-block d-md-none'>Ref.</span>
                         </th>
-                        <th class="text-right">Order Date</th>
+                        <th class="text-end">Order Date</th>
                         <th class="text-center"/>
-                        <th class="text-right">Total</th>
+                        <th class="text-end">Total</th>
                     </tr>
                 </thead>
                 <t t-foreach="orders" t-as="order">
                     <tr>
                         <td><a t-att-href="order.get_portal_url()"><t t-esc="order.name"/></a></td>
-                        <td class="text-right">
+                        <td class="text-end">
                             <span t-field="order.date_order" t-options="{'widget': 'date'}"/>&amp;nbsp;
                             <span class='d-none d-md-inline' t-field="order.date_order" t-options="{'time_only': True}"/>
                         </td>
                         <td class="text-center">
-                            <span t-if="order.state == 'done'"  class="badge badge-pill badge-success">
+                            <span t-if="order.state == 'done'"  class="badge rounded-pill text-bg-success">
                                 <i class="fa fa-fw fa-check" role="img" aria-label="Done" title="Done"/>Done
                             </span>
                         </td>
-                        <td class="text-right"><span t-field="order.amount_total"/></td>
+                        <td class="text-end"><span t-field="order.amount_total"/></td>
                     </tr>
                 </t>
             </t>
@@ -129,14 +129,14 @@
                     <t t-set="entries">
                         <ul class="list-group list-group-flush flex-wrap flex-row flex-lg-column">
                             <li class="list-group-item flex-grow-1">
-                                <a t-if="sale_order.has_to_be_signed(True)" role="button" class="btn btn-primary btn-block mb8" data-toggle="modal" data-target="#modalaccept" href="#">
+                                <a t-if="sale_order.has_to_be_signed(True)" role="button" class="btn btn-primary btn-block mb8" data-bs-toggle="modal" data-bs-target="#modalaccept" href="#">
                                     <i class="fa fa-check"/><t t-if="sale_order.has_to_be_paid(True)"> Sign &amp; Pay</t><t t-else=""> Accept &amp; Sign</t>
                                 </a>
-                                <a t-elif="sale_order.has_to_be_paid(True)" role="button" id="o_sale_portal_paynow" data-toggle="modal" data-target="#modalaccept" href="#" t-att-class="'btn-block mb8 %s' % ('btn btn-light' if sale_order.transaction_ids else 'btn btn-primary')" >
+                                <a t-elif="sale_order.has_to_be_paid(True)" role="button" id="o_sale_portal_paynow" data-bs-toggle="modal" data-bs-target="#modalaccept" href="#" t-att-class="'btn-block mb8 %s' % ('btn btn-light' if sale_order.transaction_ids else 'btn btn-primary')" >
                                     <i class="fa fa-check"/> <t t-if="not sale_order.signature">Accept &amp; Pay</t><t t-else="">Pay Now</t>
                                 </a>
                                 <div class="o_download_pdf btn-toolbar flex-sm-nowrap">
-                                    <div class="btn-group flex-grow-1 mr-1 mb-1">
+                                    <div class="btn-group flex-grow-1 me-1 mb-1">
                                         <a class="btn btn-secondary btn-block o_download_btn" t-att-href="sale_order.get_portal_url(report_type='pdf', download=True)" title="Download"><i class="fa fa-download"/> Download</a>
                                     </div>
                                     <div class="btn-group flex-grow-1 mb-1">
@@ -145,7 +145,7 @@
                                 </div>
                             </li>
 
-                            <li class="navspy list-group-item pl-0 flex-grow-1" t-ignore="true" role="complementary">
+                            <li class="navspy list-group-item ps-0 flex-grow-1" t-ignore="true" role="complementary">
                                 <ul class="nav flex-column bs-sidenav"></ul>
                             </li>
 
@@ -178,12 +178,12 @@
                                     <strong class="text-muted">Salesperson</strong>
                                 </div>
                                 <div class="row flex-nowrap">
-                                    <div class="col flex-grow-0 pr-2">
-                                        <img class="rounded-circle mr4 float-left o_portal_contact_img"
+                                    <div class="col flex-grow-0 pe-2">
+                                        <img class="rounded-circle mr4 float-start o_portal_contact_img"
                                             t-att-src="image_data_uri(sale_order.user_id.avatar_1024)"
                                             alt="Contact"/>
                                     </div>
-                                    <div class="col pl-0" style="min-width: 150px">
+                                    <div class="col ps-0" style="min-width: 150px">
                                         <span t-field="sale_order.user_id"
                                             t-options='{"widget": "contact", "fields": ["name", "phone"], "no_marker": True}'/>
                                         <a href="#discussion" class="small">
@@ -206,7 +206,7 @@
                                 <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
                                 <header class="modal-header">
                                     <h4 class="modal-title">Validate Order</h4>
-                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button>
+                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                 </header>
                                 <main class="modal-body" id="sign-dialog">
                                     <p>
@@ -235,7 +235,7 @@
                             <div class="modal-content">
                                 <header class="modal-header">
                                     <h4 class="modal-title">Validate Order</h4>
-                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button>
+                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                 </header>
                                 <main class="modal-body" id="sign-dialog">
                                     <p>
@@ -252,7 +252,7 @@
                                             </li>
                                         </ul>
                                     </p>
-                                    <div t-if="acquirers or tokens" id="payment_method" class="text-left">
+                                    <div t-if="acquirers or tokens" id="payment_method" class="text-start">
                                         <h3 class="mb24">Pay with</h3>
                                         <t t-call="payment.checkout"/>
                                     </div>
@@ -272,7 +272,7 @@
                                 <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
                                 <header class="modal-header">
                                     <h4 class="modal-title">Reject This Quotation</h4>
-                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button>
+                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                 </header>
                                 <main class="modal-body">
                                     <p>
@@ -284,7 +284,7 @@
                                     <button type="submit" t-att-id="sale_order.id" class="btn btn-danger">
                                         <i class="fa fa-times"></i> Reject
                                     </button>
-                                    <button type="button" class="btn btn-primary" data-dismiss="modal">
+                                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal">
                                         Cancel
                                     </button>
                                 </footer>
@@ -294,7 +294,7 @@
 
                     <!-- status messages -->
                     <div t-if="message == 'sign_ok'" class="alert alert-success alert-dismissable d-print-none" role="status">
-                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">×</button>
+                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                         <strong>Thank You!</strong><br/>
                         <t t-if="message == 'sign_ok' and sale_order.state in ['sale', 'done']">
                             Your order has been confirmed.
@@ -306,7 +306,7 @@
                     </div>
 
                     <div t-if="message == 'cant_reject'" class="alert alert-danger alert-dismissable d-print-none" role="alert">
-                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">×</button>
+                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                         Your order is not in a state to be rejected.
                     </div>
 
@@ -317,12 +317,12 @@
                     </t>
 
                     <div t-if="sale_order.state == 'cancel'" class="alert alert-danger alert-dismissable d-print-none" role="alert">
-                        <button type="button" class="close" data-dismiss="alert" aria-label="close">×</button>
+                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="close"></button>
                         <strong>This quotation has been canceled.</strong> <a role="button" href="#discussion"><i class="fa fa-comment"/> Contact us to get a new quotation.</a>
                     </div>
 
                     <div t-if="sale_order.is_expired" class="alert alert-warning alert-dismissable d-print-none" role="alert">
-                        <button type="button" class="close" data-dismiss="alert" aria-label="close">×</button>
+                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="close"></button>
                         <strong>This offer expired!</strong> <a role="button" href="#discussion"><i class="fa fa-comment"/> Contact us to get a new quotation.</a>
                     </div>
 
@@ -336,17 +336,17 @@
 
                         <t t-if="sale_order.has_to_be_signed(True)">
                             <div class="col-sm-auto mt8">
-                                <a role="button" class="btn btn-primary" data-toggle="modal" data-target="#modalaccept" href="#"><i class="fa fa-check"/><t t-if="sale_order.has_to_be_paid(True)"> Sign &amp; Pay</t><t t-else=""> Accept &amp; Sign</t></a>
+                                <a role="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalaccept" href="#"><i class="fa fa-check"/><t t-if="sale_order.has_to_be_paid(True)"> Sign &amp; Pay</t><t t-else=""> Accept &amp; Sign</t></a>
                             </div>
                             <div class="col-sm-auto mt8">
                                 <a role="button" class="btn btn-secondary" href="#discussion"><i class="fa fa-comment"/> Feedback</a>
                             </div>
                             <div class="col-sm-auto mt8">
-                                <a role="button" class="btn btn-danger" data-toggle="modal" data-target="#modaldecline" href="#"> <i class="fa fa-times"/> Reject</a>
+                                <a role="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#modaldecline" href="#"> <i class="fa fa-times"/> Reject</a>
                             </div>
                         </t>
                         <div t-elif="sale_order.has_to_be_paid(True)" class="col-sm-auto mt8">
-                            <a role="button" data-toggle="modal" data-target="#modalaccept" href="#" t-att-class="'%s' % ('btn btn-light' if sale_order.transaction_ids else 'btn btn-primary')">
+                            <a role="button" data-bs-toggle="modal" data-bs-target="#modalaccept" href="#" t-att-class="'%s' % ('btn btn-light' if sale_order.transaction_ids else 'btn btn-primary')">
                                 <i class="fa fa-check"/> <t t-if="not sale_order.signature">Accept &amp; Pay</t><t t-else="">Pay Now</t>
                             </a>
                         </div>
@@ -438,10 +438,10 @@
                                         </a>
                                         <div class="small d-lg-inline-block">Date: <span class="text-muted" t-field="i.invoice_date"/></div>
                                     </div>
-                                    <span t-if="i.payment_state in ('paid', 'in_payment')" class="small badge badge-success orders_label_text_align">
+                                    <span t-if="i.payment_state in ('paid', 'in_payment')" class="small badge text-bg-success orders_label_text_align">
                                         <i class="fa fa-fw fa-check"/> <b>Paid</b>
                                     </span>
-                                    <span t-else="" class="small badge badge-info orders_label_text_align">
+                                    <span t-else="" class="small badge text-bg-info orders_label_text_align">
                                         <i class="fa fa-fw fa-clock-o"/> <b>Waiting Payment</b>
                                     </span>
                                 </div>
@@ -459,18 +459,18 @@
                 <table t-att-data-order-id="sale_order.id" t-att-data-token="sale_order.access_token" class="table table-sm" id="sales_order_table">
                     <thead class="bg-100">
                         <tr>
-                            <th class="text-left" id="product_name_header">Products</th>
-                            <th class="text-right">Quantity</th>
-                            <th t-attf-class="text-right {{ 'd-none d-sm-table-cell' if report_type == 'html' else '' }}">
+                            <th class="text-start" id="product_name_header">Products</th>
+                            <th class="text-end">Quantity</th>
+                            <th t-attf-class="text-end {{ 'd-none d-sm-table-cell' if report_type == 'html' else '' }}">
                                 Unit Price
                             </th>
-                            <th t-if="display_discount" t-attf-class="text-right {{ 'd-none d-sm-table-cell' if report_type == 'html' else '' }}">
+                            <th t-if="display_discount" t-attf-class="text-end {{ 'd-none d-sm-table-cell' if report_type == 'html' else '' }}">
                                 <span>Disc.%</span>
                             </th>
-                            <th t-attf-class="text-right {{ 'd-none d-md-table-cell' if report_type == 'html' else '' }}">
+                            <th t-attf-class="text-end {{ 'd-none d-md-table-cell' if report_type == 'html' else '' }}">
                                 <span>Taxes</span>
                             </th>
-                            <th class="text-right" >
+                            <th class="text-end" >
                                 <span groups="account.group_show_line_subtotals_tax_excluded">Amount</span>
                                 <span groups="account.group_show_line_subtotals_tax_included">Total Price</span>
                             </th>
@@ -485,37 +485,37 @@
                             <t t-set="current_subtotal" t-value="current_subtotal + line.price_subtotal" groups="account.group_show_line_subtotals_tax_excluded"/>
                             <t t-set="current_subtotal" t-value="current_subtotal + line.price_total" groups="account.group_show_line_subtotals_tax_included"/>
 
-                            <tr t-att-class="'bg-200 font-weight-bold o_line_section' if line.display_type == 'line_section' else 'font-italic o_line_note' if line.display_type == 'line_note' else ''">
+                            <tr t-att-class="'bg-200 fw-bold o_line_section' if line.display_type == 'line_section' else 'fst-italic o_line_note' if line.display_type == 'line_note' else ''">
                                 <t t-if="not line.display_type">
                                     <td id="product_name">
                                         <span t-field="line.name"/>
                                     </td>
-                                    <td class="text-right">
+                                    <td class="text-end">
                                         <div id="quote_qty">
                                             <span t-field="line.product_uom_qty"/>
                                             <span t-field="line.product_uom"/>
                                         </div>
                                     </td>
-                                    <td t-attf-class="text-right {{ 'd-none d-sm-table-cell' if report_type == 'html' else '' }}">
+                                    <td t-attf-class="text-end {{ 'd-none d-sm-table-cell' if report_type == 'html' else '' }}">
                                         <div
                                             t-if="line.discount &gt;= 0"
                                             t-field="line.price_unit"
                                             t-att-style="line.discount and 'text-decoration: line-through' or None"
-                                            t-att-class="(line.discount and 'text-danger' or '') + ' text-right'"
+                                            t-att-class="(line.discount and 'text-danger' or '') + ' text-end'"
                                         />
                                         <div t-if="line.discount">
                                             <t t-esc="(1-line.discount / 100.0) * line.price_unit" t-options='{"widget": "float", "decimal_precision": "Product Price"}'/>
                                         </div>
                                     </td>
-                                    <td t-if="display_discount" t-attf-class="text-right {{ 'd-none d-sm-table-cell' if report_type == 'html' else '' }}">
+                                    <td t-if="display_discount" t-attf-class="text-end {{ 'd-none d-sm-table-cell' if report_type == 'html' else '' }}">
                                         <strong t-if="line.discount &gt; 0" class="text-info">
                                             <t t-esc="((line.discount % 1) and '%s' or '%d') % line.discount"/>%
                                         </strong>
                                     </td>
-                                    <td t-attf-class="text-right {{ 'd-none d-md-table-cell' if report_type == 'html' else '' }}">
+                                    <td t-attf-class="text-end {{ 'd-none d-md-table-cell' if report_type == 'html' else '' }}">
                                         <span t-esc="', '.join(map(lambda x: (x.description or x.name), line.tax_id))"/>
                                     </td>
-                                    <td class="text-right">
+                                    <td class="text-end">
                                         <span class="oe_order_line_price_subtotal" t-field="line.price_subtotal" groups="account.group_show_line_subtotals_tax_excluded"/>
                                         <span class="oe_order_line_price_total" t-field="line.price_total" groups="account.group_show_line_subtotals_tax_included"/>
                                     </td>
@@ -535,7 +535,7 @@
                             </tr>
 
                             <tr t-if="current_section and (line_last or sale_order.order_line[line_index+1].display_type == 'line_section')" 
-                                class="is-subtotal text-right">
+                                class="is-subtotal text-end">
                                 <td colspan="99">
                                     <strong class="mr16">Subtotal</strong>
                                     <span t-esc="current_subtotal"
@@ -548,7 +548,7 @@
                 </table>
 
                 <div id="total" class="row" name="total" style="page-break-inside: avoid;">
-                    <div t-attf-class="#{'col-6' if report_type != 'html' else 'col-sm-7 col-md-6'} ml-auto">
+                    <div t-attf-class="#{'col-6' if report_type != 'html' else 'col-sm-7 col-md-6'} ms-auto">
                         <t t-call="sale.sale_order_portal_content_totals_table"/>
                     </div>
                 </div>
@@ -556,7 +556,7 @@
 
             <section t-if="sale_order.signature" id="signature" name="Signature">
                 <div class="row mt-4" name="signature">
-                    <div t-attf-class="#{'col-3' if report_type != 'html' else 'col-sm-7 col-md-4'} ml-auto text-center">
+                    <div t-attf-class="#{'col-3' if report_type != 'html' else 'col-sm-7 col-md-4'} ms-auto text-center">
                         <h5>Signature</h5>
                         <img t-att-src="image_data_uri(sale_order.signature)" style="max-height: 6rem; max-width: 100%;"/>
                         <p t-field="sale_order.signed_by"/>
diff --git a/addons/sale/views/utm_campaign_views.xml b/addons/sale/views/utm_campaign_views.xml
index 854b15e013b..1d48cbda82c 100644
--- a/addons/sale/views/utm_campaign_views.xml
+++ b/addons/sale/views/utm_campaign_views.xml
@@ -7,15 +7,15 @@
         <field name="inherit_id" ref="utm.utm_campaign_view_kanban"/>
         <field name="arch" type="xml">
             <xpath expr="//div[@id='utm_statistics']" position="inside">
-                <div class="mr-3" title="Revenues" groups="sales_team.group_sale_salesman">
+                <div class="me-3" title="Revenues" groups="sales_team.group_sale_salesman">
                     <field name="currency_id" invisible="True"/>
-                    <small class="font-weight-bold">
+                    <small class="fw-bold">
                         <field name="invoiced_amount" widget="monetary" options="{'currency_field': 'currency_id'}"/>
                     </small>
                 </div>
-                <div class="mr-3" title="Quotations" groups="sales_team.group_sale_salesman">
+                <div class="me-3" title="Quotations" groups="sales_team.group_sale_salesman">
                     <i class="fa fa-money text-muted"></i>
-                    <small class="font-weight-bold">
+                    <small class="fw-bold">
                         <field name="quotation_count"/>
                     </small>
                 </div>
diff --git a/addons/sale/views/variant_templates.xml b/addons/sale/views/variant_templates.xml
index 72813de20e1..bfa7b945944 100644
--- a/addons/sale/views/variant_templates.xml
+++ b/addons/sale/views/variant_templates.xml
@@ -18,7 +18,7 @@
                     <t t-if="ptal.attribute_id.display_type == 'select'">
                         <select
                             t-att-data-attribute_id="ptal.attribute_id.id"
-                            t-attf-class="custom-select css_attribute_select o_wsale_product_attribute js_variant_change #{ptal.attribute_id.create_variant} #{'d-none' if single_and_custom else ''}"
+                            t-attf-class="form-select css_attribute_select o_wsale_product_attribute js_variant_change #{ptal.attribute_id.create_variant} #{'d-none' if single_and_custom else ''}"
                             t-att-name="'ptal-%s' % ptal.id">
                             <t t-foreach="ptal.product_template_value_ids._only_active()" t-as="ptav">
                                 <option t-att-value="ptav.id"
@@ -41,9 +41,9 @@
                             <t t-foreach="ptal.product_template_value_ids._only_active()" t-as="ptav">
                                 <li class="list-inline-item form-group js_attribute_value" style="margin: 0;">
                                     <label class="col-form-label">
-                                        <div class="custom-control custom-radio">
+                                        <div class="custom-control form-check">
                                             <input type="radio"
-                                                t-attf-class="custom-control-input js_variant_change #{ptal.attribute_id.create_variant}"
+                                                t-attf-class="form-check-input js_variant_change #{ptal.attribute_id.create_variant}"
                                                 t-att-checked="ptav in combination"
                                                 t-att-name="'ptal-%s' % ptal.id"
                                                 t-att-value="ptav.id"
@@ -53,7 +53,7 @@
                                                 t-att-data-is_custom="ptav.is_custom"
                                                 t-att-data-is_single="single"
                                                 t-att-data-is_single_and_custom="single_and_custom" />
-                                            <div class="radio_input_value custom-control-label">
+                                            <div class="radio_input_value form-check-label">
                                                 <span t-field="ptav.name"/>
                                                 <t t-call="sale.badge_extra_price"/>
                                             </div>
@@ -67,7 +67,7 @@
                     <t t-if="ptal.attribute_id.display_type == 'pills'">
                         <ul t-att-data-attribute_id="ptal.attribute_id.id"
                             t-attf-class="btn-group-toggle list-inline list-unstyled o_wsale_product_attribute #{'d-none' if single_and_custom else ''}"
-                            data-toggle="buttons">
+                            data-bs-toggle="buttons">
                             <t t-foreach="ptal.product_template_value_ids._only_active()" t-as="ptav">
                                 <li t-attf-class="o_variant_pills btn btn-primary mb-1 list-inline-item js_attribute_value #{'active' if ptav in combination else ''}">
                                     <input type="radio"
@@ -93,7 +93,7 @@
 
                     <t t-if="ptal.attribute_id.display_type == 'color'">
                         <ul t-att-data-attribute_id="ptal.attribute_id.id" t-attf-class="list-inline o_wsale_product_attribute #{'d-none' if single_and_custom else ''}">
-                            <li t-foreach="ptal.product_template_value_ids._only_active()" t-as="ptav" class="list-inline-item mr-1">
+                            <li t-foreach="ptal.product_template_value_ids._only_active()" t-as="ptav" class="list-inline-item me-1">
                                 <label t-attf-style="background-color:#{ptav.html_color or ptav.product_attribute_value_id.name if not ptav.is_custom else ''}"
                                     t-attf-class="css_attribute_color #{'active' if ptav in combination else ''} #{'custom_value' if ptav.is_custom else ''}">
                                     <input type="radio"
@@ -118,7 +118,7 @@
     </template>
     <template id="badge_extra_price" name="Badge Extra Price">
         <t t-set="combination_info_variant" t-value="product._get_combination_info(ptav, pricelist=pricelist)"/>
-        <span class="badge badge-pill badge-light border" t-if="combination_info_variant['price_extra']">
+        <span class="badge rounded-pill text-bg-light border" t-if="combination_info_variant['price_extra']">
         <!--
             price_extra is displayed as catalog price instead of
             price after pricelist because it is impossible to
@@ -133,7 +133,7 @@
             (See the override of `_get_combination_info`)
         -->
         <span class="sign_badge_price_extra" t-esc="combination_info_variant['price_extra'] > 0 and '+' or '-'"/>
-        <span t-esc="abs(combination_info_variant['price_extra'])" class="variant_price_extra text-muted font-italic" style="white-space: nowrap;"
+        <span t-esc="abs(combination_info_variant['price_extra'])" class="variant_price_extra text-muted fst-italic" style="white-space: nowrap;"
             t-options='{
                 "widget": "monetary",
                 "display_currency": (pricelist or product).currency_id
diff --git a/addons/sale_crm/data/crm_lead_merge_template.xml b/addons/sale_crm/data/crm_lead_merge_template.xml
index dc21ebb7b4c..06eb026dae0 100644
--- a/addons/sale_crm/data/crm_lead_merge_template.xml
+++ b/addons/sale_crm/data/crm_lead_merge_template.xml
@@ -5,7 +5,7 @@
     <xpath expr="//blockquote/*[last()]" position="after">
         <div t-if="lead.order_ids">
             <br/>
-            <div class="font-weight-bold">
+            <div class="fw-bold">
                 Sale Orders
             </div>
             <ul>
diff --git a/addons/sale_loyalty/views/templates.xml b/addons/sale_loyalty/views/templates.xml
index aea76862fd6..da8e3d3400f 100644
--- a/addons/sale_loyalty/views/templates.xml
+++ b/addons/sale_loyalty/views/templates.xml
@@ -37,7 +37,7 @@
                 <table class="table text-center table-borderless">
                     <thead>
                         <tr>
-                            <th class="font-weight-normal">Gift Card Code</th>
+                            <th class="fw-normal">Gift Card Code</th>
                         </tr>
                     </thead>
                     <tbody>
diff --git a/addons/sale_loyalty/wizard/sale_loyalty_reward_wizard_views.xml b/addons/sale_loyalty/wizard/sale_loyalty_reward_wizard_views.xml
index f3c6e8db959..16844f23fca 100644
--- a/addons/sale_loyalty/wizard/sale_loyalty_reward_wizard_views.xml
+++ b/addons/sale_loyalty/wizard/sale_loyalty_reward_wizard_views.xml
@@ -33,7 +33,7 @@
                     <!-- No rewards -->
                     <button special="cancel" string="Discard" class="btn btn-primary"
                         attrs="{'invisible': [('reward_ids', '!=', [])]}" data-hotkey="z"/>
-                    <button type="action" name="%(loyalty.loyalty_program_action)d" string="Coupons &amp; Loyalty" class="btn btn-secondary float-right"
+                    <button type="action" name="%(loyalty.loyalty_program_action)d" string="Coupons &amp; Loyalty" class="btn btn-secondary float-end"
                         attrs="{'invisible': [('reward_ids', '!=', [])]}" groups="sales_team.group_sale_manager" data-hotkey="q"/>
                 </footer>
             </form>
diff --git a/addons/sale_management/report/sale_report_templates.xml b/addons/sale_management/report/sale_report_templates.xml
index 0816394738c..6493c6dc353 100644
--- a/addons/sale_management/report/sale_report_templates.xml
+++ b/addons/sale_management/report/sale_report_templates.xml
@@ -10,9 +10,9 @@
             <table name="table_optional_products" class="table table-sm">
                 <thead>
                     <tr>
-                        <th name="th_option_name" class="text-left">Description</th>
-                        <th t-if="has_option_discount" name="th_option_discount" groups="product.group_discount_per_so_line" class="text-left">Disc.%</th>
-                        <th name="th_option_price_unit" class="text-right">Unit Price</th>
+                        <th name="th_option_name" class="text-start">Description</th>
+                        <th t-if="has_option_discount" name="th_option_discount" groups="product.group_discount_per_so_line" class="text-start">Disc.%</th>
+                        <th name="th_option_price_unit" class="text-end">Unit Price</th>
                     </tr>
                 </thead>
                 <tbody class="sale_tbody">
@@ -26,7 +26,7 @@
                             </strong>
                         </td>
                         <td name="td_option_price_unit">
-                            <strong class="text-right">
+                            <strong class="text-end">
                                 <div t-field="option.price_unit"
                                     t-options='{"widget": "monetary", "display_currency": doc.pricelist_id.currency_id}'
                                     t-att-style="option.discount and 'text-decoration: line-through' or None"
diff --git a/addons/sale_management/views/sale_portal_templates.xml b/addons/sale_management/views/sale_portal_templates.xml
index 66597c32404..dd40d7d4f95 100644
--- a/addons/sale_management/views/sale_portal_templates.xml
+++ b/addons/sale_management/views/sale_portal_templates.xml
@@ -29,10 +29,10 @@
                     <table class="table table-sm">
                         <thead>
                             <tr>
-                                <th class="text-left">Product</th>
-                                <th t-if="display_discount" class="text-right">Disc.%
+                                <th class="text-start">Product</th>
+                                <th t-if="display_discount" class="text-end">Disc.%
                                 </th>
-                                <th class="text-right">Unit Price</th>
+                                <th class="text-end">Unit Price</th>
                                 <th t-if="sale_order.state in ['draft', 'sent'] and report_type == 'html'"></th>
                             </tr>
                         </thead>
@@ -42,13 +42,13 @@
                                     <td>
                                         <div t-field="option.name"/>
                                     </td>
-                                    <td t-if="display_discount" class="text-right">
+                                    <td t-if="display_discount" class="text-end">
                                         <strong t-if="option.discount" class="text-info">
                                             <t t-esc="((option.discount % 1) and '%s' or '%d') % option.discount"/>%
                                         </strong>
                                     </td>
                                     <td>
-                                        <strong class="text-right">
+                                        <strong class="text-end">
                                             <div t-field="option.price_unit"
                                                 t-options='{"widget": "monetary", "display_currency": sale_order.pricelist_id.currency_id}'
                                                 t-att-style="option.discount and 'text-decoration: line-through' or None"
diff --git a/addons/sale_mrp/views/sale_portal_templates.xml b/addons/sale_mrp/views/sale_portal_templates.xml
index 8a194d3560b..2c4c9dc208a 100644
--- a/addons/sale_mrp/views/sale_portal_templates.xml
+++ b/addons/sale_mrp/views/sale_portal_templates.xml
@@ -15,7 +15,7 @@
                         <div class="d-flex flex-wrap align-items-center justify-content-between">
                             <div>
                                 <span t-out="mo.name"/>
-                                <div class="small d-lg-inline-block ml-3">
+                                <div class="small d-lg-inline-block ms-3">
                                     Date:
                                     <span class="text-muted"
                                         t-field="mo.date_finished"
@@ -27,19 +27,19 @@
                                 </div>
                             </div>
                             <span t-if="mo.state in ['to_close', 'done']"
-                                class="small badge badge-success orders_label_text_align">
+                                class="small badge text-bg-success orders_label_text_align">
                                 <i class="fa fa-fw fa-check"/> <b>Manufactured</b>
                             </span>
                             <span t-elif="mo.state == 'cancel'"
-                                class="small badge badge-danger orders_label_text_align">
+                                class="small badge text-bg-danger orders_label_text_align">
                                 <i class="fa fa-fw fa-times"/> <b>Cancelled</b>
                             </span>
                             <span t-elif="mo.state in ['confirmed']"
-                                class="small badge badge-info orders_label_text_align">
+                                class="small badge text-bg-info orders_label_text_align">
                                 <i class="fa fa-fw fa-clock-o"/> <b>Confirmed</b>
                             </span>
                             <span t-elif="mo.state in ['progress']"
-                                class="small badge badge-warning orders_label_text_align">
+                                class="small badge text-bg-warning orders_label_text_align">
                                 <i class="fa fa-fw fa-clock-o"/> <b>In progress</b>
                             </span>
                         </div>
diff --git a/addons/sale_product_configurator/static/src/js/product_configurator_modal.js b/addons/sale_product_configurator/static/src/js/product_configurator_modal.js
index 26dbd7033fd..f9bdb5e7e0c 100644
--- a/addons/sale_product_configurator/static/src/js/product_configurator_modal.js
+++ b/addons/sale_product_configurator/static/src/js/product_configurator_modal.js
@@ -331,7 +331,7 @@ var OptionalProductsModal = Dialog.extend(ServicesMixin, VariantMixin, {
         var noVariantAttributeValues = self.getNoVariantAttributeValues($parent);
         if (productCustomVariantValues || noVariantAttributeValues) {
             var $productDescription = $parent
-                .find('td.td-product_name div.float-left');
+                .find('td.td-product_name div.float-start');
 
             var $customAttributeValuesDescription = $('<div>', {
                 class: 'custom_attribute_values_description text-muted small'
diff --git a/addons/sale_product_configurator/views/templates.xml b/addons/sale_product_configurator/views/templates.xml
index 0bad040ccd1..4ae24d35d17 100644
--- a/addons/sale_product_configurator/views/templates.xml
+++ b/addons/sale_product_configurator/views/templates.xml
@@ -32,7 +32,7 @@
                    t-att-value="product_variant.optional_product_ids.filtered(lambda p: p._is_add_to_cart_possible(combination))"/>
             <div class="col-lg-12 text-center mt-5">
                 <t t-if="product._is_add_to_cart_possible()">
-                    <div class="col-lg-5 d-inline-block text-left">
+                    <div class="col-lg-5 d-inline-block text-start">
                         <t t-if="combination" t-call="sale.variants">
                             <t t-set="parent_combination" t-value="None"/>
                         </t>
@@ -57,13 +57,13 @@
                         <p class="css_not_available_msg alert alert-warning">This combination does not exist.</p>
                     </div>
                     <div class="col-lg-1 d-inline-block"></div>
-                    <div class="col-lg-5 d-inline-block align-top text-left">
+                    <div class="col-lg-5 d-inline-block align-top text-start">
                         <img t-if="product_variant" t-att-src="'/web/image/product.product/%s/image_1024' % product_variant.id" class="d-block product_detail_img" alt="Product Image"/>
                         <img t-else="" t-att-src="'/web/image/product.template/%s/image_1024' % product.id" class="d-block product_detail_img" alt="Product Image"/>
                     </div>
                 </t>
                 <t t-else="">
-                    <div class="col-lg-5 d-inline-block text-left">
+                    <div class="col-lg-5 d-inline-block text-start">
                         <p class="alert alert-warning">This product has no valid combination.</p>
                     </div>
                 </t>
@@ -136,9 +136,9 @@
                 </td>
             </tr>
             <tr class="o_total_row">
-                <td colspan="4" class="text-right">
+                <td colspan="4" class="text-end">
                     <strong>Total:</strong>
-                    <span class="js_price_total font-weight-bold" style="white-space: nowrap;"
+                    <span class="js_price_total fw-bold" style="white-space: nowrap;"
                         t-att-data-product-id="product.id"
                         t-esc="combination_info['price'] * (add_qty or 1)"
                         t-options='{
diff --git a/addons/sale_project/static/src/xml/project_templates.xml b/addons/sale_project/static/src/xml/project_templates.xml
index f1f138cf851..4919f8332d1 100644
--- a/addons/sale_project/static/src/xml/project_templates.xml
+++ b/addons/sale_project/static/src/xml/project_templates.xml
@@ -4,11 +4,11 @@
         <xpath expr="//t[@t-esc='milestone.name']" position="replace">
             <span>
                 <t t-esc="milestone.name"/>
-                <span t-if="milestone.allow_billable &amp;&amp; milestone.quantity_percentage &amp;&amp; !milestone.sale_line_name" class="font-italic text-muted">
+                <span t-if="milestone.allow_billable &amp;&amp; milestone.quantity_percentage &amp;&amp; !milestone.sale_line_name" class="fst-italic text-muted">
                     (<t t-esc="100 * milestone.quantity_percentage"/>%)
                 </span>
             </span>
-            <span t-if="milestone.allow_billable" class="font-italic text-muted">
+            <span t-if="milestone.allow_billable" class="fst-italic text-muted">
                 <t t-if="milestone.sale_line_name" t-esc="milestone.sale_line_name"/> 
                 <span t-if="milestone.quantity_percentage &amp;&amp; milestone.sale_line_name">
                     (<t t-esc="100 * milestone.quantity_percentage"/>%)
diff --git a/addons/sale_project/views/sale_project_portal_templates.xml b/addons/sale_project/views/sale_project_portal_templates.xml
index 6f30f70ad67..439ced0212f 100644
--- a/addons/sale_project/views/sale_project_portal_templates.xml
+++ b/addons/sale_project/views/sale_project_portal_templates.xml
@@ -2,7 +2,7 @@
 <odoo>
 
     <template id="portal_tasks_list_inherit" inherit_id="project.portal_tasks_list">
-        <xpath expr="//t[@t-foreach='grouped_tasks']/tbody/tr[hasclass('thead-light')]" position="inside">
+        <xpath expr="//t[@t-foreach='grouped_tasks']/tbody/tr[hasclass('table-light')]" position="inside">
             <th t-if="groupby == 'sale_order'" t-attf-colspan="{{grouped_tasks_colspan}}">
                 <span t-if="tasks[0].sudo().sale_order_id" class="text-truncate" t-field="tasks[0].sudo().sale_order_id"/>
                 <span t-else="">No Sales Order</span>
diff --git a/addons/sale_quotation_builder/views/sale_portal_templates.xml b/addons/sale_quotation_builder/views/sale_portal_templates.xml
index bc5c2799889..64a1f912ffe 100644
--- a/addons/sale_quotation_builder/views/sale_portal_templates.xml
+++ b/addons/sale_quotation_builder/views/sale_portal_templates.xml
@@ -10,7 +10,7 @@
                     <t t-set="product_tmpl_ids" t-value="product_tmpl_ids + [line.product_id.product_tmpl_id.id]"/>
                     <a t-att-id="line.id"/>
                     <div class="alert alert-info alert-dismissable mt16 css_non_editable_mode_hidden o_not_editable" t-ignore="True" role="status">
-                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">×</button>
+                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                         Product: <strong t-esc="line.product_id.name"/>:
                         the content below will disappear if this
                         product is removed from the quote.
@@ -33,7 +33,7 @@
                 </t>
                 <div class="container o_sale_order">
                     <div class="row mt16">
-                        <div class="col-lg-9 ml-auto">
+                        <div class="col-lg-9 ms-auto">
                             <div class="alert alert-info" t-ignore="True" role="status">
                                 <p>
                                     <strong>Template Header:</strong> this content
diff --git a/addons/sale_stock/report/report_stock_forecasted.xml b/addons/sale_stock/report/report_stock_forecasted.xml
index 7a738c4a770..eb2e7547f85 100644
--- a/addons/sale_stock/report/report_stock_forecasted.xml
+++ b/addons/sale_stock/report/report_stock_forecasted.xml
@@ -4,12 +4,12 @@
         <xpath expr="//tr[@name='draft_picking_out']" position="after">
             <tr t-if="docs['draft_sale_qty']" name="draft_so_out" t-attf-class="#{docs['draft_sale_orders_matched'] and 'o_grid_match'}">
                 <td colspan="2">Quotations</td>
-                <td t-esc="-docs['draft_sale_qty']" t-options="{'widget': 'float', 'precision': precision}" class="text-right"/>
+                <td t-esc="-docs['draft_sale_qty']" t-options="{'widget': 'float', 'precision': precision}" class="text-end"/>
                 <td>
                     <t t-foreach="docs['draft_sale_orders']" t-as="sale_order">
                         <t t-if="sale_order_index > 0">|</t>
                         <a t-attf-href="#" t-esc="sale_order.name"
-                            class="font-weight-bold" view-type="form"
+                            class="fw-bold" view-type="form"
                             t-att-res-model="sale_order._name"
                             t-att-res-id="sale_order.id"/>
                     </t>
@@ -18,7 +18,7 @@
         </xpath>
         <xpath expr="//td[@name='usedby_cell']" position="inside">
             <span t-if="line['move_out'] and line['move_out'].picking_id and line['move_out'].picking_id.sale_id">
-                | <span t-esc="line['move_out'].picking_id.sale_id.amount_untaxed" t-options="{'widget': 'monetary', 'display_currency': line['move_out'].picking_id.sale_id.currency_id}" class="font-weight-bold"/>
+                | <span t-esc="line['move_out'].picking_id.sale_id.amount_untaxed" t-options="{'widget': 'monetary', 'display_currency': line['move_out'].picking_id.sale_id.currency_id}" class="fw-bold"/>
                 | <span t-esc="line['move_out'].picking_id.sale_id.partner_id.name"/>
             </span>
         </xpath>
diff --git a/addons/sale_stock/static/src/xml/sale_stock.xml b/addons/sale_stock/static/src/xml/sale_stock.xml
index 23b85b3b398..34000cc01bb 100644
--- a/addons/sale_stock/static/src/xml/sale_stock.xml
+++ b/addons/sale_stock/static/src/xml/sale_stock.xml
@@ -57,7 +57,7 @@
                 </t>
             </tbody>
         </table>
-        <button t-if="!data.is_mto" class="text-left btn btn-link action_open_forecast"
+        <button t-if="!data.is_mto" class="text-start btn btn-link action_open_forecast"
             type="button">
             <i class="fa fa-fw o_button_icon fa-arrow-right"></i>
             View Forecast
diff --git a/addons/sale_stock/views/res_config_settings_views.xml b/addons/sale_stock/views/res_config_settings_views.xml
index 00b91c59c4a..db0b0561cf3 100644
--- a/addons/sale_stock/views/res_config_settings_views.xml
+++ b/addons/sale_stock/views/res_config_settings_views.xml
@@ -57,7 +57,7 @@
                     </div>
                     <div class="o_setting_right_pane">
                         <label for="use_security_lead"/>
-                        <a href="https://www.odoo.com/documentation/master/applications/inventory_and_mrp/inventory/management/planning/scheduled_dates.html" title="Documentation" class="mr-2 o_doc_link" target="_blank"></a>
+                        <a href="https://www.odoo.com/documentation/master/applications/inventory_and_mrp/inventory/management/planning/scheduled_dates.html" title="Documentation" class="me-2 o_doc_link" target="_blank"></a>
                         <span class="fa fa-lg fa-building-o" title="Values set here are company-specific." role="img" aria-label="Values set here are company-specific." groups="base.group_multi_company"/>
                         <div class="text-muted">
                             Schedule deliveries earlier to avoid delays
diff --git a/addons/sale_stock/views/sale_stock_portal_template.xml b/addons/sale_stock/views/sale_stock_portal_template.xml
index 994dff870f8..9563581c3b4 100644
--- a/addons/sale_stock/views/sale_stock_portal_template.xml
+++ b/addons/sale_stock/views/sale_stock_portal_template.xml
@@ -6,7 +6,7 @@
         inherit_id="sale.sale_order_portal_content">
         <xpath expr="//div[@id='so_date']" position="after">
             <div t-if="sale_order.incoterm" class="row">
-                <div class="mb-3 col-6 ml-auto">
+                <div class="mb-3 col-6 ms-auto">
                     <strong>Incoterm: </strong> <span t-field="sale_order.incoterm"/>
                 </div>
             </div>
@@ -26,7 +26,7 @@
                                 <a t-att-href="delivery_report_url">
                                     <span t-esc="picking.name"/>
                                 </a>
-                                <div class="small d-lg-inline-block ml-3">
+                                <div class="small d-lg-inline-block ms-3">
                                     Date:
                                     <span class="text-muted"
                                         t-field="picking.date_done"
@@ -38,15 +38,15 @@
                                 </div>
                             </div>
                             <span t-if="picking.state == 'done'"
-                                class="small badge badge-success orders_label_text_align">
+                                class="small badge text-bg-success orders_label_text_align">
                                 <i class="fa fa-fw fa-truck"/> <b>Shipped</b>
                             </span>
                             <span t-elif="picking.state == 'cancel'"
-                                class="small badge badge-danger orders_label_text_align">
+                                class="small badge text-bg-danger orders_label_text_align">
                                 <i class="fa fa-fw fa-times"/> <b>Cancelled</b>
                             </span>
                             <span t-elif="picking.state in ['draft', 'waiting', 'confirmed', 'assigned']"
-                                class="small badge badge-info orders_label_text_align">
+                                class="small badge text-bg-info orders_label_text_align">
                                 <i class="fa fa-fw fa-clock-o"/> <b>Preparation</b>
                             </span>
                         </div>
diff --git a/addons/sale_timesheet/static/tests/tours/sale_timesheet_tour.js b/addons/sale_timesheet/static/tests/tours/sale_timesheet_tour.js
index f58e9d16d58..d3e7aa9731b 100644
--- a/addons/sale_timesheet/static/tests/tours/sale_timesheet_tour.js
+++ b/addons/sale_timesheet/static/tests/tours/sale_timesheet_tour.js
@@ -105,7 +105,7 @@ tour.register('sale_timesheet_tour', {
     content: 'Click on Timesheets page to log a timesheet',
     run: function (actions) {
         const notebookId = $('div[name="timesheet_ids"]').closest("div.tab-pane").attr('id');
-        actions.click(this.$anchor.find(`a[data-toggle="tab"][href="#${notebookId}"]`));
+        actions.click(this.$anchor.find(`a[data-bs-toggle="tab"][href="#${notebookId}"]`));
     },
 }, {
     trigger: 'div[name="timesheet_ids"] td.o_field_x2many_list_row_add a[role="button"]',
@@ -168,7 +168,7 @@ tour.register('sale_timesheet_tour', {
     content: 'Click on Settings page to check the allow_billable checkbox',
     run: function (actions) {
         const notebookId = $('div[name="allow_billable"]').closest("div.tab-pane").attr('id');
-        actions.click(this.$anchor.find(`a[data-toggle="tab"][href="#${notebookId}"]`));
+        actions.click(this.$anchor.find(`a[data-bs-toggle="tab"][href="#${notebookId}"]`));
     },
 }, {
     trigger: 'div[name="allow_billable"] > input',
@@ -193,7 +193,7 @@ tour.register('sale_timesheet_tour', {
     content: 'Click on Invoicing tab to configure the invoicing of this project.',
     run: function (actions) {
         const notebookId = $('div[name="sale_line_id"]').closest("div.tab-pane").attr('id');
-        actions.click(this.$anchor.find(`a[data-toggle="tab"][href="#${notebookId}"]`));
+        actions.click(this.$anchor.find(`a[data-bs-toggle="tab"][href="#${notebookId}"]`));
     },
 }, {
     trigger: 'div[name="sale_line_id"]',
@@ -258,7 +258,7 @@ tour.register('sale_timesheet_tour', {
     content: 'Click on Invoicing tab to configure the invoicing of this project.',
     run: function (actions) {
         const notebookId = $('div[name="sale_line_id"]').closest("div.tab-pane").attr('id');
-        actions.click(this.$anchor.find(`a[data-toggle="tab"][href="#${notebookId}"]`));
+        actions.click(this.$anchor.find(`a[data-bs-toggle="tab"][href="#${notebookId}"]`));
     },
 }, {
     trigger: 'div[name="sale_line_id"]',
diff --git a/addons/sale_timesheet/views/product_views.xml b/addons/sale_timesheet/views/product_views.xml
index e717286c16c..89d8e537f81 100644
--- a/addons/sale_timesheet/views/product_views.xml
+++ b/addons/sale_timesheet/views/product_views.xml
@@ -7,7 +7,7 @@
         <field name="arch" type="xml">
             <field name="product_tooltip" position="after">
                 <label for="product_tooltip" string="" attrs="{'invisible': ['|', ('type', '!=', 'service'), ('service_policy', '!=', 'ordered_prepaid')]}"/>
-                <div attrs="{'invisible': ['|', ('type', '!=', 'service'), ('service_policy', '!=', 'ordered_prepaid')]}" class="font-italic text-muted">
+                <div attrs="{'invisible': ['|', ('type', '!=', 'service'), ('service_policy', '!=', 'ordered_prepaid')]}" class="fst-italic text-muted">
                     Warn the salesperson for an upsell when work done exceeds
                     <field name="service_upsell_threshold" widget="percentage" class="oe_inline"/>
                     of hours sold. <field name="service_upsell_threshold_ratio" class="oe_inline" attrs="{'invisible': [('service_upsell_threshold_ratio', '=', False)]}"/>
diff --git a/addons/sale_timesheet/views/project_sharing_views.xml b/addons/sale_timesheet/views/project_sharing_views.xml
index 33e6002d194..778b8287ef9 100644
--- a/addons/sale_timesheet/views/project_sharing_views.xml
+++ b/addons/sale_timesheet/views/project_sharing_views.xml
@@ -21,13 +21,13 @@
                 <field name="remaining_hours_available" invisible="1"/>
                 <field name="sale_order_id" invisible="1"/>
                 <span id="remaining_hours_so_label" attrs="{'invisible': ['|', '|', '|', '|', ('allow_billable', '=', False), ('sale_order_id', '=', False), ('partner_id', '=', False), ('sale_line_id', '=', False), ('remaining_hours_available', '=', False)]}">
-                    <label class="font-weight-bold" for="remaining_hours_so" string="Remaining Hours on SO"
+                    <label class="fw-bold" for="remaining_hours_so" string="Remaining Hours on SO"
                             attrs="{'invisible': ['|', ('encode_uom_in_days', '=', True), ('remaining_hours_so', '&lt;', 0)]}"/>
-                    <label class="font-weight-bold" for="remaining_hours_so" string="Remaining Days on SO"
+                    <label class="fw-bold" for="remaining_hours_so" string="Remaining Days on SO"
                             attrs="{'invisible': ['|', ('encode_uom_in_days', '=', False), ('remaining_hours_so', '&lt;', 0)]}"/>
-                    <label class="font-weight-bold text-danger" for="remaining_hours_so" string="Remaining Hours on SO"
+                    <label class="fw-bold text-danger" for="remaining_hours_so" string="Remaining Hours on SO"
                             attrs="{'invisible': ['|', ('encode_uom_in_days', '=', True), ('remaining_hours_so', '&gt;=', 0)]}"/>
-                    <label class="font-weight-bold text-danger" for="remaining_hours_so" string="Remaining Days on SO"
+                    <label class="fw-bold text-danger" for="remaining_hours_so" string="Remaining Days on SO"
                             attrs="{'invisible': ['|', ('encode_uom_in_days', '=', False), ('remaining_hours_so', '&gt;=', 0)]}"/>
                 </span>
                 <field name="remaining_hours_so" nolabel="1" widget="timesheet_uom" attrs="{'invisible': ['|', '|', '|', '|', ('allow_billable', '=', False), ('sale_order_id', '=', False), ('partner_id', '=', False), ('sale_line_id', '=', False), ('remaining_hours_available', '=', False)]}"></field>
diff --git a/addons/sale_timesheet/views/project_task_views.xml b/addons/sale_timesheet/views/project_task_views.xml
index b2470e97eda..739b8cbef34 100644
--- a/addons/sale_timesheet/views/project_task_views.xml
+++ b/addons/sale_timesheet/views/project_task_views.xml
@@ -13,7 +13,7 @@
                 <button name="action_billable_time_button" type="object" class="oe_stat_button" icon="fa-clock-o" attrs="{'invisible': ['|', ('allow_timesheets', '=', False), ('analytic_account_id', '=', False)]}" groups="hr_timesheet.group_hr_timesheet_approver">
                     <div class="o_field_widget o_stat_info">
                         <div class="oe_inline">
-                            <span class="o_stat_value mr-1">
+                            <span class="o_stat_value me-1">
                                 <field name="billable_percentage" widget="statinfo" nolabel="1"/>%
                             </span>
                         </div>
@@ -177,13 +177,13 @@
                 <xpath expr="//field[@name='remaining_hours']" position="after">
                     <field name="remaining_hours_available" invisible="1"/>
                     <span id="remaining_hours_so_label" attrs="{'invisible': ['|', '|', '|', '|', ('allow_billable', '=', False), ('sale_order_id', '=', False), ('partner_id', '=', False), ('sale_line_id', '=', False), ('remaining_hours_available', '=', False)]}">
-                        <label class="font-weight-bold" for="remaining_hours_so" string="Remaining Hours on SO"
+                        <label class="fw-bold" for="remaining_hours_so" string="Remaining Hours on SO"
                                attrs="{'invisible': ['|', ('encode_uom_in_days', '=', True), ('remaining_hours_so', '&lt;', 0)]}"/>
-                        <label class="font-weight-bold" for="remaining_hours_so" string="Remaining Days on SO"
+                        <label class="fw-bold" for="remaining_hours_so" string="Remaining Days on SO"
                                attrs="{'invisible': ['|', ('encode_uom_in_days', '=', False), ('remaining_hours_so', '&lt;', 0)]}"/>
-                        <label class="font-weight-bold text-danger" for="remaining_hours_so" string="Remaining Hours on SO"
+                        <label class="fw-bold text-danger" for="remaining_hours_so" string="Remaining Hours on SO"
                                attrs="{'invisible': ['|', ('encode_uom_in_days', '=', True), ('remaining_hours_so', '&gt;=', 0)]}"/>
-                        <label class="font-weight-bold text-danger" for="remaining_hours_so" string="Remaining Days on SO"
+                        <label class="fw-bold text-danger" for="remaining_hours_so" string="Remaining Days on SO"
                                attrs="{'invisible': ['|', ('encode_uom_in_days', '=', False), ('remaining_hours_so', '&gt;=', 0)]}"/>
                     </span>
                     <field name="remaining_hours_so" nolabel="1" widget="timesheet_uom" attrs="{'invisible': ['|', '|', '|', '|', ('allow_billable', '=', False), ('sale_order_id', '=', False), ('partner_id', '=', False), ('sale_line_id', '=', False), ('remaining_hours_available', '=', False)]}"></field>
diff --git a/addons/sale_timesheet/views/project_update_templates.xml b/addons/sale_timesheet/views/project_update_templates.xml
index b528e7766ae..96f1228fe77 100644
--- a/addons/sale_timesheet/views/project_update_templates.xml
+++ b/addons/sale_timesheet/views/project_update_templates.xml
@@ -16,10 +16,10 @@
 </thead>
 <tr t-foreach="services['data']" t-as="service">
 <t t-set="is_unit" t-value="service['is_unit']"/>
-<td t-attf-class="#{ 'font-italic' if is_unit else ''}"><t t-esc="service['name']"/></td>
-<td t-attf-class="#{ 'font-italic' if is_unit else ''}" style="text-align: right; vertical-align: middle;"><t t-esc="format_value(service['sold_value'], service['is_hour'])"/> <t t-esc="service['unit']"/></td>
-<td t-attf-class="#{ 'font-italic' if is_unit else ''}" style="text-align: right; vertical-align: middle;"><t t-esc="format_value(service['effective_value'], service['is_hour'])"/> <t t-esc="service['unit']"/></td>
-<td t-attf-class="#{ 'font-italic' if is_unit else ''}" style="text-align: right; vertical-align: middle;"><t t-esc="format_value(service['remaining_value'], service['is_hour'])"/> <t t-esc="service['unit']"/></td>
+<td t-attf-class="#{ 'fst-italic' if is_unit else ''}"><t t-esc="service['name']"/></td>
+<td t-attf-class="#{ 'fst-italic' if is_unit else ''}" style="text-align: right; vertical-align: middle;"><t t-esc="format_value(service['sold_value'], service['is_hour'])"/> <t t-esc="service['unit']"/></td>
+<td t-attf-class="#{ 'fst-italic' if is_unit else ''}" style="text-align: right; vertical-align: middle;"><t t-esc="format_value(service['effective_value'], service['is_hour'])"/> <t t-esc="service['unit']"/></td>
+<td t-attf-class="#{ 'fst-italic' if is_unit else ''}" style="text-align: right; vertical-align: middle;"><t t-esc="format_value(service['remaining_value'], service['is_hour'])"/> <t t-esc="service['unit']"/></td>
 </tr>
 <tfoot>
 <td style="font-weight: bolder; text-align: right">Total</td>
diff --git a/addons/sale_timesheet/views/sale_timesheet_portal_templates.xml b/addons/sale_timesheet/views/sale_timesheet_portal_templates.xml
index 3c1c4335d92..70c089b6322 100644
--- a/addons/sale_timesheet/views/sale_timesheet_portal_templates.xml
+++ b/addons/sale_timesheet/views/sale_timesheet_portal_templates.xml
@@ -14,14 +14,14 @@
     </template>
 
     <template id="portal_my_timesheets_inherit" inherit_id="hr_timesheet.portal_my_timesheets">
-        <xpath expr="//t[@t-foreach='grouped_timesheets']/tbody/tr[hasclass('thead-light')]" position="inside">
+        <xpath expr="//t[@t-foreach='grouped_timesheets']/tbody/tr[hasclass('table-light')]" position="inside">
             <t t-elif="groupby == 'sol'">
                 <t t-set="sol" t-value="timesheets[0].so_line"/>
                 <th colspan="5">
                     <t t-if="sol">
                         <span t-field="sol.display_name"/>
                         <t t-if="sol.remaining_hours_available">
-                            <span class="text-muted font-weight-normal">
+                            <span class="text-muted fw-normal">
                                 <t t-if="is_uom_day">
                                     (<span t-esc="timesheets._convert_hours_to_days(sol.product_uom_qty)" t-options='{"widget": "timesheet_uom"}'></span> Days Ordered, <span t-esc="timesheets._convert_hours_to_days(sol.remaining_hours)" t-options='{"widget": "timesheet_uom"}'></span> Days Remaining)
                                 </t>
@@ -35,7 +35,7 @@
                         No Sales Order Item
                     </t>
                 </th>
-                <th colspan="1" class="text-right text-muted font-weight-normal">
+                <th colspan="1" class="text-end text-muted fw-normal">
                     <t t-if="is_uom_day">
                         Total: <span t-esc="timesheets._convert_hours_to_days(hours_spent)" t-options='{"widget": "timesheet_uom"}'/>
                     </t>
@@ -54,7 +54,7 @@
                         No Sales Order
                     </t>
                 </th>
-                <th colspan="1" class="text-right text-muted">
+                <th colspan="1" class="text-end text-muted">
                     <t t-if="is_uom_day">
                         Total: <span t-esc="timesheets._convert_hours_to_days(hours_spent)" t-options='{"widget": "timesheet_uom"}'/>
                     </t>
@@ -73,7 +73,7 @@
                         No Invoice
                     </t>
                 </th>
-                <th colspan="1" class="text-right text-muted">
+                <th colspan="1" class="text-end text-muted">
                     <t t-if="is_uom_day">
                         Total: <span t-esc="timesheets._convert_hours_to_days(hours_spent)" t-options='{"widget": "timesheet_uom"}'/>
                     </t>
@@ -86,7 +86,7 @@
         <xpath expr="//thead/tr/th[@t-if='is_uom_day']" position="before">
             <th t-if="not groupby == 'sol'">Sales Order Item</th>
         </xpath>
-        <xpath expr="//tbody//td[hasclass('text-right')]" position="before">
+        <xpath expr="//tbody//td[hasclass('text-end')]" position="before">
             <td t-if="not groupby == 'sol'"><span t-field="timesheet.so_line" t-att-title="timesheet.so_line.display_name"></span></td>
         </xpath>
     </template>
diff --git a/addons/sales_team/views/crm_team_member_views.xml b/addons/sales_team/views/crm_team_member_views.xml
index 7351847714f..fe3087b3ab4 100644
--- a/addons/sales_team/views/crm_team_member_views.xml
+++ b/addons/sales_team/views/crm_team_member_views.xml
@@ -62,11 +62,11 @@
                                 <div>
                                     <img t-att-src="kanban_image('res.users', 'avatar_128', record.user_id.raw_value)" class="o_kanban_image o_image_64_cover" alt="Avatar"/>
                                 </div>
-                                <div class="oe_kanban_details d-flex flex-column ml-3">
+                                <div class="oe_kanban_details d-flex flex-column ms-3">
                                     <strong class="o_kanban_record_title oe_partner_heading"><field name="user_id"/></strong>
                                     <a type="open" class="nav-link p-0"><field name="crm_team_id"/></a>
                                     <div class="d-flex align-items-baseline text-break">
-                                        <i class="fa fa-envelope mr-1" role="img" aria-label="Email" title="Email"/><field name="email"/>
+                                        <i class="fa fa-envelope me-1" role="img" aria-label="Email" title="Email"/><field name="email"/>
                                     </div>
                                 </div>
                             </div>
diff --git a/addons/sales_team/views/crm_team_views.xml b/addons/sales_team/views/crm_team_views.xml
index 8a9d2099d47..4f887f68bd2 100644
--- a/addons/sales_team/views/crm_team_views.xml
+++ b/addons/sales_team/views/crm_team_views.xml
@@ -66,10 +66,10 @@
                                                         <img t-att-src="kanban_image('res.users', 'avatar_128', record.id.raw_value)"
                                                             class="o_kanban_image o_image_64_cover" alt="Avatar"/>
                                                     </div>
-                                                    <div class="oe_kanban_details d-flex flex-column ml-3">
+                                                    <div class="oe_kanban_details d-flex flex-column ms-3">
                                                         <strong class="o_kanban_record_title oe_partner_heading"><field name="name"/></strong>
                                                         <div class="d-flex align-items-baseline text-break">
-                                                            <i class="fa fa-envelope mr-1" role="img" aria-label="Email" title="Email"/><field name="email"/>
+                                                            <i class="fa fa-envelope me-1" role="img" aria-label="Email" title="Email"/><field name="email"/>
                                                         </div>
                                                     </div>
                                                 </div>
@@ -127,7 +127,7 @@
                                     <strong><field name="name"/></strong>
                                 </div>
                                 <div class="col-6">
-                                    <span class="float-right"><field name="user_id"/></span>
+                                    <span class="float-end"><field name="user_id"/></span>
                                 </div>
                             </div>
                         </div>
diff --git a/addons/sms/static/src/components/sms_button/sms_button.xml b/addons/sms/static/src/components/sms_button/sms_button.xml
index bb1aab2381e..9a95c863990 100644
--- a/addons/sms/static/src/components/sms_button/sms_button.xml
+++ b/addons/sms/static/src/components/sms_button/sms_button.xml
@@ -6,8 +6,8 @@
             t-att-title="title"
             t-att-href="'sms:'+props.value"
             t-on-click.prevent="onClick"
-            class="ml-3 d-inline-flex align-items-center o_field_phone_sms"
-        ><i class="fa fa-mobile"></i><small class="font-weight-bold ml-1">SMS</small></a>
+            class="ms-3 d-inline-flex align-items-center o_field_phone_sms"
+        ><i class="fa fa-mobile"></i><small class="fw-bold ms-1">SMS</small></a>
     </t>
 
 </templates>
diff --git a/addons/sms/static/src/js/fields_phone_widget.js b/addons/sms/static/src/js/fields_phone_widget.js
index 76250a832d1..3b828a4b1b8 100644
--- a/addons/sms/static/src/js/fields_phone_widget.js
+++ b/addons/sms/static/src/js/fields_phone_widget.js
@@ -83,8 +83,8 @@ Phone.include({
             var $composerButton = $('<a>', {
                 title: _t('Send SMS Text Message'),
                 href: '',
-                class: 'ml-3 d-inline-flex align-items-center o_field_phone_sms',
-                html: $('<small>', {class: 'font-weight-bold ml-1', html: 'SMS'}),
+                class: 'ms-3 d-inline-flex align-items-center o_field_phone_sms',
+                html: $('<small>', {class: 'fw-bold ms-1', html: 'SMS'}),
             });
             $composerButton.prepend($('<i>', {class: 'fa fa-mobile'}));
             $composerButton.on('click', this._onClickSMS.bind(this));
diff --git a/addons/sms/wizard/sms_composer_views.xml b/addons/sms/wizard/sms_composer_views.xml
index 34bdfce181a..520ce39fe0b 100644
--- a/addons/sms/wizard/sms_composer_views.xml
+++ b/addons/sms/wizard/sms_composer_views.xml
@@ -20,8 +20,8 @@
                 <div colspan="2" class="alert alert-info text-center mb-0" role="alert"
                         attrs="{'invisible': ['|', ('comment_single_recipient', '=', True), ('recipient_invalid_count', '=', 0)]}">
                     <p class="my-0">
-                        <field class="oe_inline font-weight-bold" name="recipient_invalid_count"/> out of
-                        <field class="oe_inline font-weight-bold" name="res_ids_count"/> recipients have an invalid phone number and will not receive this text message.
+                        <field class="oe_inline fw-bold" name="recipient_invalid_count"/> out of
+                        <field class="oe_inline fw-bold" name="res_ids_count"/> recipients have an invalid phone number and will not receive this text message.
                     </p>
                 </div>
                 <sheet>
@@ -39,7 +39,7 @@
                         <field name="sanitized_numbers" invisible="1"/>
 
                         <label for="recipient_single_description" string="Recipient"
-                            class="font-weight-bold"
+                            class="fw-bold"
                             attrs="{'invisible': [('comment_single_recipient', '=', False)]}"/>
                         <div attrs="{'invisible': [('comment_single_recipient', '=', False)]}">
                             <field name="recipient_single_description" class="oe_inline"/>
diff --git a/addons/snailmail/static/src/components/snailmail_error/snailmail_error.xml b/addons/snailmail/static/src/components/snailmail_error/snailmail_error.xml
index 225e5ec4c16..ac78675cb1e 100644
--- a/addons/snailmail/static/src/components/snailmail_error/snailmail_error.xml
+++ b/addons/snailmail/static/src/components/snailmail_error/snailmail_error.xml
@@ -11,7 +11,7 @@
                         The letter could not be sent due to insufficient credits on your IAP account.
                     </p>
                     <t t-if="messaging.snailmail_credits_url">
-                        <div class="text-right mx-3 mb-3">
+                        <div class="text-end mx-3 mb-3">
                             <a class="btn btn-link" t-att-href="messaging.snailmail_credits_url" target="_blank">
                                 <i class="fa fa-arrow-right"/> Buy credits
                             </a>
@@ -23,7 +23,7 @@
                         You need credits on your IAP account to send a letter.
                     </p>
                     <t t-if="messaging.snailmail_credits_url_trial">
-                        <div class="text-right mx-3 mb-3">
+                        <div class="text-end mx-3 mb-3">
                             <a class="btn btn-link" t-att-href="messaging.snailmail_credits_url_trial">
                                 <i class="fa fa-arrow-right"/> Buy credits
                             </a>
diff --git a/addons/snailmail_account/wizard/account_invoice_send_views.xml b/addons/snailmail_account/wizard/account_invoice_send_views.xml
index a7d482314de..4f4c9de3b26 100644
--- a/addons/snailmail_account/wizard/account_invoice_send_views.xml
+++ b/addons/snailmail_account/wizard/account_invoice_send_views.xml
@@ -9,7 +9,7 @@
                 <xpath expr="//div[@name='option_email']" position='before'>
                     <div name="option_letter">
                         <field name="invalid_addresses" invisible="1"/>
-                        <div name="option" class="text-left d-inline-block">
+                        <div name="option" class="text-start d-inline-block">
                             <field name="snailmail_is_letter" />
                             <b><label for="snailmail_is_letter"/></b>
                         </div>
@@ -23,7 +23,7 @@
                                     <i class="fa fa-info-circle" role="img" aria-label="Warning" title="Make sure you have enough Stamps on your account."/>
                                 )</b>
                             </span>
-                            <span class="text-right d-inline-block " attrs="{'invisible': ['|', ('composition_mode', '=', 'mass_mail'), ('partner_id', '=', False)]}" name="address">
+                            <span class="text-end d-inline-block " attrs="{'invisible': ['|', ('composition_mode', '=', 'mass_mail'), ('partner_id', '=', False)]}" name="address">
                                 <span class="text-muted" attrs="{'invisible': [('invalid_addresses', '!=', 0)]}"> to: </span>
                                 <span class="text-danger" attrs="{'invisible': [('invalid_addresses', '=', 0)]}"> The customer's address is incomplete: </span>
                                 <field name="partner_id" readonly="1" force_save="1" context="{'show_address': 1, 'address_inline': 1}" options="{'always_reload': True, 'no_quick_create': True}"/>
diff --git a/addons/stock/report/picking_templates.xml b/addons/stock/report/picking_templates.xml
index 4a27ca20443..e14c67b2dce 100644
--- a/addons/stock/report/picking_templates.xml
+++ b/addons/stock/report/picking_templates.xml
@@ -67,7 +67,7 @@
                                         <div style="display: inline-table; height: 10rem; width: 32%;">
                                             <table class="table table-bordered" style="border: 2px solid black;" t-if="picking.move_ids">
                                                 <tr>
-                                                    <th class="table-active text-left" style="height:4rem;">
+                                                    <th class="table-active text-start" style="height:4rem;">
                                                         <span t-esc="move.product_id.display_name"/>
                                                     </th>
                                                 </tr>
diff --git a/addons/stock/report/report_deliveryslip.xml b/addons/stock/report/report_deliveryslip.xml
index f8f50c14213..c1c7a7338cf 100644
--- a/addons/stock/report/report_deliveryslip.xml
+++ b/addons/stock/report/report_deliveryslip.xml
@@ -255,14 +255,14 @@
 
     <!-- package related "section lines" -->
     <template id="stock_report_delivery_package_section_line">
-        <tr t-att-class="'bg-200 font-weight-bold o_line_section'">
+        <tr t-att-class="'bg-200 fw-bold o_line_section'">
             <td colspan="99" name="package_info">
                 <span t-field="package.name"/>
             </td>
         </tr>
     </template>
     <template id="stock_report_delivery_no_package_section_line">
-        <tr t-att-class="'bg-200 font-weight-bold o_line_section'">
+        <tr t-att-class="'bg-200 fw-bold o_line_section'">
             <td colspan="99" name="no_package_info">
                 <span>Products with no package assigned</span>
             </td>
diff --git a/addons/stock/report/report_package_barcode.xml b/addons/stock/report/report_package_barcode.xml
index f76a4a60168..2807d5a180b 100644
--- a/addons/stock/report/report_package_barcode.xml
+++ b/addons/stock/report/report_package_barcode.xml
@@ -13,11 +13,11 @@
                     <table class="table table-condensed" style="border-bottom: 0px solid white !important;">
                         <tr>
                             <th>
-                              <h1 t-field="o.name" class="mt0 float-left"/>
+                              <h1 t-field="o.name" class="mt0 float-start"/>
                             </th>
                             <th name="td_pk_barcode" style="text-align: center">
                                 <t t-if="o.valid_sscc and env['ir.actions.report'].datamatrix_available()">
-                                    <div class="row text-left">
+                                    <div class="row text-start">
                                         <t t-set="barcode" t-value="'00' + o.name"/>
                                         <t t-if="o.pack_date" t-set="barcode" t-value="barcode + '13' + o.pack_date.strftime('%y%m%d')"/>
                                         <div class="col-3" name="datamatrix_barcode" style="margin: 0px 20px 40px 60px" t-out="barcode" t-options="{'widget': 'barcode', 'symbology': 'DataMatrix', 'width': 100, 'height': 100}"/>
@@ -46,10 +46,10 @@
                         <thead>
                             <tr>
                                 <th>Product</th>
-                                <th name="th_quantity" class="text-right">Quantity</th>
+                                <th name="th_quantity" class="text-end">Quantity</th>
                                 <th name="th_uom" groups="uom.group_uom"/>
-                                <th name="th_serial" class="text-right" t-if="has_serial_number">Lot/Serial Number</th>
-                                <th name="th_barcode" class="text-right" t-if="has_ean_barcode"/>
+                                <th name="th_serial" class="text-end" t-if="has_serial_number">Lot/Serial Number</th>
+                                <th name="th_barcode" class="text-end" t-if="has_ean_barcode"/>
                             </tr>
                         </thead>
                         <tbody>
@@ -57,16 +57,16 @@
                                 <td>
                                    <span  t-field="l.product_id.name"/>
                                 </td>
-                                <td class="text-right">
+                                <td class="text-end">
                                     <span t-field="l.quantity"/>
                                 </td>
                                 <td groups="uom.group_uom">
                                     <span t-field="l.product_id.uom_id.name"/>
                                 </td>
-                                <td class="text-right" t-if="has_serial_number">
+                                <td class="text-end" t-if="has_serial_number">
                                     <t t-if="l.lot_id"><span t-field="l.lot_id.name"/></t>
                                 </td>
-                                <td class="text-right" t-if="has_ean_barcode">
+                                <td class="text-end" t-if="has_ean_barcode">
                                     <t t-if="l.product_id.valid_ean">
                                         <t t-set="product_barcode" t-value="'01' + '0' * (14 - len(l.product_id.barcode)) + l.product_id.barcode"/>
                                         <t t-set="gs1_pattern" t-value="gs1_uom_patterns.get(l.product_uom_id.id, False)"/>
@@ -106,8 +106,8 @@
                         <div class="row">
                             <t t-set="barcode" t-value="'00' + o.name"/>
                             <t t-if="o.pack_date" t-set="barcode" t-value="barcode + '13' + o.pack_date.strftime('%y%m%d')"/>
-                            <div class="col-5 text-right" name="datamatrix_barcode" style="margin: 0px 20px 40px 60px" t-out="barcode" t-options="{'widget': 'barcode', 'symbology': 'DataMatrix', 'width': 200, 'height': 200}"/>
-                            <div class="col-7 text-left" style="font-size:20px;">
+                            <div class="col-5 text-end" name="datamatrix_barcode" style="margin: 0px 20px 40px 60px" t-out="barcode" t-options="{'widget': 'barcode', 'symbology': 'DataMatrix', 'width': 200, 'height': 200}"/>
+                            <div class="col-7 text-start" style="font-size:20px;">
                                 <div class="row">SSCC: <span t-field="o.name"/></div>
                                 <div t-if="o.pack_date" class="row">Pack Date: <span t-field="o.pack_date"/></div>
                                 <div t-if="o.package_type_id" class="row" name="datamatrix_pack_type">Package Type: <span t-field="o.package_type_id.name"/></div>
diff --git a/addons/stock/report/report_stock_forecasted.xml b/addons/stock/report/report_stock_forecasted.xml
index 7fbb198167e..17a990223d1 100644
--- a/addons/stock/report/report_stock_forecasted.xml
+++ b/addons/stock/report/report_stock_forecasted.xml
@@ -86,7 +86,7 @@
                             <td>Replenishment</td>
                             <td>Receipt</td>
                             <td t-if="docs['multiple_product']">Product</td>
-                            <td class="text-right"><t t-esc="docs['uom']"/></td>
+                            <td class="text-end"><t t-esc="docs['uom']"/></td>
                             <td>Used by</td>
                             <td>Delivery</td>
                         </tr>
@@ -96,7 +96,7 @@
                             <td>Inventory On Hand</td>
                             <td/>
                             <td t-if="docs['multiple_product']"/>
-                            <td class="text-right">0</td>
+                            <td class="text-end">0</td>
                             <td/>
                             <td/>
                             <td/>
@@ -106,7 +106,7 @@
                             <td t-attf-class="#{line['is_late'] and 'o_grid_warning'}">
                                 <a t-if="line['document_in']"
                                     t-attf-href="#" t-esc="line['document_in'].name"
-                                    class="font-weight-bold" view-type="form"
+                                    class="fw-bold" view-type="form"
                                     t-att-res-model="line['document_in']._name"
                                     t-att-res-id="line['document_in'].id"/>
                                 <t t-elif="line['reservation']">
@@ -136,7 +136,7 @@
                             <td t-esc="line['receipt_date'] or ''"
                                 t-attf-class="#{line['is_late'] and 'o_grid_warning'}"/>
                             <td t-if="docs['multiple_product']" t-esc="line['product']['display_name']"/>
-                            <td class="text-right"><t t-if="not line['replenishment_filled']">- </t><t t-esc="line['quantity']" t-options="{'widget': 'float', 'precision': precision}"/></td>
+                            <td class="text-end"><t t-if="not line['replenishment_filled']">- </t><t t-esc="line['quantity']" t-options="{'widget': 'float', 'precision': precision}"/></td>
                             <td t-attf-class="#{not line['replenishment_filled'] and 'o_grid_warning'}" name="usedby_cell">
                                 <button t-if="line['move_out'] and line['move_out'].picking_id"
                                     t-attf-class="o_priority o_priority_star o_report_replenish_change_priority fa fa-star#{' one' if line['move_out'].picking_id.priority=='1' else '-o zero'}"
@@ -146,7 +146,7 @@
                                 />
                                 <a t-if="line['document_out']"
                                     t-attf-href="#" t-esc="line['document_out'].name"
-                                    class="font-weight-bold" view-type="form"
+                                    class="fw-bold" view-type="form"
                                     t-att-res-model="line['document_out']._name"
                                     t-att-res-id="line['document_out'].id"/>
                             </td>
@@ -157,23 +157,23 @@
                     <thead>
                         <tr class="o_forecasted_row">
                             <td colspan="2">Forecasted Inventory</td>
-                            <td t-esc="docs['virtual_available']" t-options="{'widget': 'float', 'precision': precision}" class="text-right"/>
+                            <td t-esc="docs['virtual_available']" t-options="{'widget': 'float', 'precision': precision}" class="text-end"/>
                         </tr>
                     </thead>
                     <tbody t-if="docs['qty']['in'] or docs['qty']['out']">
                         <tr t-if="docs['draft_picking_qty']['in']" name="draft_picking_in">
                             <td colspan="2">Incoming Draft Transfer</td>
-                            <td t-esc="docs['draft_picking_qty']['in']" t-options="{'widget': 'float', 'precision': precision}" class="text-right"/>
+                            <td t-esc="docs['draft_picking_qty']['in']" t-options="{'widget': 'float', 'precision': precision}" class="text-end"/>
                         </tr>
                         <tr t-if="docs['draft_picking_qty']['out']" name="draft_picking_out">
                             <td colspan="2">Outgoing Draft Transfer</td>
-                            <td t-esc="-docs['draft_picking_qty']['out']" t-options="{'widget': 'float', 'precision': precision}" class="text-right"/>
+                            <td t-esc="-docs['draft_picking_qty']['out']" t-options="{'widget': 'float', 'precision': precision}" class="text-end"/>
                         </tr>
                     </tbody>
                     <thead>
                         <tr class="o_forecasted_row">
                             <td colspan="2">Forecasted with Pending</td>
-                            <td t-esc="future_virtual_available" t-options="{'widget': 'float', 'precision': precision}" class="text-right"/>
+                            <td t-esc="future_virtual_available" t-options="{'widget': 'float', 'precision': precision}" class="text-end"/>
                         </tr>
                     </thead>
                 </table>
diff --git a/addons/stock/report/report_stock_reception.xml b/addons/stock/report/report_stock_reception.xml
index e9d62a5761e..d1413a30dc0 100644
--- a/addons/stock/report/report_stock_reception.xml
+++ b/addons/stock/report/report_stock_reception.xml
@@ -50,7 +50,7 @@
                                 <a href="#" t-att-res-model="doc_model" view-type="form" t-att-res-id="doc.id">
                                     <t t-esc="doc.display_name"/>
                                 </a>
-                                <span t-field="doc.state" t-attf-class="badge badge-pill #{'bg-success-light' if doc.state == 'done' else 'bg-info-light'}"/>
+                                <span t-field="doc.state" t-attf-class="badge rounded-pill #{'bg-success-light' if doc.state == 'done' else 'bg-info-light'}"/>
                             </div>
                         </t>
                     </t>
diff --git a/addons/stock/report/report_stockinventory.xml b/addons/stock/report/report_stockinventory.xml
index 9a1b7a4d929..0cb3f3a6bcd 100644
--- a/addons/stock/report/report_stockinventory.xml
+++ b/addons/stock/report/report_stockinventory.xml
@@ -15,9 +15,9 @@
                                     <th><strong>Product</strong></th>
                                     <th groups="stock.group_production_lot"><strong>Lot/Serial Number</strong></th>
                                     <th groups="stock.group_tracking_lot"><strong>Package</strong></th>
-                                    <th class="text-right"><strong>Available Quantity</strong></th>
-                                    <th class="text-right"><strong>On hand Quantity</strong></th>
-                                    <th class="text-right"><strong>Counted Quantity</strong></th>
+                                    <th class="text-end"><strong>Available Quantity</strong></th>
+                                    <th class="text-end"><strong>On hand Quantity</strong></th>
+                                    <th class="text-end"><strong>Counted Quantity</strong></th>
                                 </tr>
                             </thead>
                             <tbody>
@@ -33,9 +33,9 @@
                                         <td><span t-field="line.product_id"/></td>
                                         <td groups="stock.group_production_lot"><span t-field="line.lot_id"/></td>
                                         <td groups="stock.group_tracking_lot"><span t-field="line.package_id"/></td>
-                                        <td class="text-right"><span t-field="line.available_quantity"/> <span t-field="line.product_uom_id" groups="uom.group_uom"/></td>
-                                        <td class="text-right"><span t-field="line.quantity"/> <span t-field="line.product_uom_id" groups="uom.group_uom"/></td>
-                                        <td class="text-right">
+                                        <td class="text-end"><span t-field="line.available_quantity"/> <span t-field="line.product_uom_id" groups="uom.group_uom"/></td>
+                                        <td class="text-end"><span t-field="line.quantity"/> <span t-field="line.product_uom_id" groups="uom.group_uom"/></td>
+                                        <td class="text-end">
                                             <!-- If 0, then leave blank so users have space to write a number -->
                                             <t t-if="line.inventory_quantity == 0"><span></span></t>
                                             <t t-else=""><span t-field="line.inventory_quantity"/></t>
diff --git a/addons/stock/report/report_stockpicking_operations.xml b/addons/stock/report/report_stockpicking_operations.xml
index a90e89099f5..29a8a4acfc5 100644
--- a/addons/stock/report/report_stockpicking_operations.xml
+++ b/addons/stock/report/report_stockpicking_operations.xml
@@ -42,7 +42,7 @@
                                 </div>
                             </div>
                             <br/>
-                            <h1 t-field="o.name" class="mt0 float-left"/>
+                            <h1 t-field="o.name" class="mt0 float-start"/>
                             <div class="row mt48 mb32">
                                 <div t-if="o.origin" class="col-auto" name="div_origin">
                                     <strong>Order:</strong>
diff --git a/addons/stock/static/src/scss/report_stock_reception.scss b/addons/stock/static/src/scss/report_stock_reception.scss
index c767d1c07b9..7db853892c0 100644
--- a/addons/stock/static/src/scss/report_stock_reception.scss
+++ b/addons/stock/static/src/scss/report_stock_reception.scss
@@ -24,7 +24,7 @@
 
     @each $-name, $-bg-color in $theme-colors {
         $-safe-text-color: color-contrast(mix($-bg-color, $o-view-background-color));
-        @include bg-variant(".bg-#{$-name}-light", rgba(theme-color($-name), 0.5), $-safe-text-color);
+        @include bg-variant(".bg-#{$-name}-light", rgba(map-get($theme-colors, $-name), 0.5), $-safe-text-color);
     }
 }
 
diff --git a/addons/stock/static/src/scss/stock_empty_screen.scss b/addons/stock/static/src/scss/stock_empty_screen.scss
index 23bca59082d..13f7daa2ff2 100644
--- a/addons/stock/static/src/scss/stock_empty_screen.scss
+++ b/addons/stock/static/src/scss/stock_empty_screen.scss
@@ -1,7 +1,8 @@
 .o_view_nocontent {
     &_barcode_scanner:before {
         @extend %o-nocontent-init-image;
-        @include size(250px, 250px);
+        width: 250px;
+        height: 250px;
         background: transparent url(/stock/static/img/barcode_scanner.png) no-repeat center;
         background-size: 250px 250px;
     }
diff --git a/addons/stock/static/src/xml/forecast_widget.xml b/addons/stock/static/src/xml/forecast_widget.xml
index 463e14d6cb7..84b8eb140ae 100644
--- a/addons/stock/static/src/xml/forecast_widget.xml
+++ b/addons/stock/static/src/xml/forecast_widget.xml
@@ -5,7 +5,7 @@
         <span t-elif="!forecast_expected_date_str and will_be_fulfilled" class="text-success">Available</span>
         <span t-elif="forecast_expected_date_str and will_be_fulfilled" t-att-class="forecast_is_late ? 'text-danger' : 'text-warning'">Exp <t t-esc="forecast_expected_date_str"/></span>
         <span t-else="" class="text-danger">Not Available</span>
-        <button t-if="product_type == 'product'" t-att="id ? {} : {'disabled': ''}" class="o_forecast_report_button btn btn-link o_icon_button ml-2" title="Forecasted Report">
+        <button t-if="product_type == 'product'" t-att="id ? {} : {'disabled': ''}" class="o_forecast_report_button btn btn-link o_icon_button ms-2" title="Forecasted Report">
             <i t-attf-class="fa fa-fw fa-area-chart {{ state != 'draft' and (!will_be_fulfilled or forecast_is_late) ? 'text-danger' : '' }}"/>
         </button>
     </t>
diff --git a/addons/stock/static/src/xml/inventory_report.xml b/addons/stock/static/src/xml/inventory_report.xml
index 14d70ada497..26a3d0c4adb 100644
--- a/addons/stock/static/src/xml/inventory_report.xml
+++ b/addons/stock/static/src/xml/inventory_report.xml
@@ -3,7 +3,7 @@
 
 <t t-extend="ListView.buttons" t-name="StockInventoryReport.Buttons">
     <t t-jquery="button.o_list_button_discard" t-operation="after">
-        <button class="btn btn-primary o_button_at_date mr-2" type="button">
+        <button class="btn btn-primary o_button_at_date me-2" type="button">
             Inventory at Date
         </button>
     </t>
diff --git a/addons/stock/static/src/xml/report_stock_forecasted.xml b/addons/stock/static/src/xml/report_stock_forecasted.xml
index 20edf8c3ad2..40897f9e704 100644
--- a/addons/stock/static/src/xml/report_stock_forecasted.xml
+++ b/addons/stock/static/src/xml/report_stock_forecasted.xml
@@ -11,7 +11,7 @@
     <div id="warehouse_filter" class="btn-group dropdown o_stock_report_warehouse_filter"
         t-if="displayWarehouseFilter">
         <button type="button" class="dropdown-toggle btn btn-secondary dropdown-toggle"
-            data-toggle="dropdown">
+            data-bs-toggle="dropdown">
             <span class="fa fa-home"/> Warehouse: <t t-esc="active_warehouse['name']"/>
         </button>
         <div class="dropdown-menu o_filter_menu" role="menu">
diff --git a/addons/stock/static/src/xml/stock_orderpoint.xml b/addons/stock/static/src/xml/stock_orderpoint.xml
index 6c1b9f60b65..e44c2fe72bb 100644
--- a/addons/stock/static/src/xml/stock_orderpoint.xml
+++ b/addons/stock/static/src/xml/stock_orderpoint.xml
@@ -16,19 +16,19 @@
                     <td>
                         Today
                     </td>
-                    <td class="text-right">
+                    <td class="text-end">
                         <t t-out="today"/>
                     </td>
                 </tr>
                 <tr t-foreach="lead_days_description" t-as="descr">
                     <td><t t-out="descr[0]"/></td>
-                    <td class="text-right"><t t-out="descr[1]"/></td>
+                    <td class="text-end"><t t-out="descr[1]"/></td>
                 </tr>
                 <tr class="table-info">
                     <td>
                         Forecasted Date
                     </td>
-                    <td class="text-right text-nowrap">
+                    <td class="text-end text-nowrap">
                         = <t t-out="lead_days_date"/>
                     </td>
                 </tr>
@@ -55,7 +55,7 @@
                 <t t-foreach="replenishment_history" t-as="line">
                     <tr>
                         <td><t t-esc="line.name"/></td>
-                        <td class="text-right text-nowrap" t-esc="line.quantity + ' ' + line.uom_name"/>
+                        <td class="text-end text-nowrap" t-esc="line.quantity + ' ' + line.uom_name"/>
                     </tr>
                 </t>
             </tbody>
diff --git a/addons/stock/static/src/xml/stock_traceability_report_backend.xml b/addons/stock/static/src/xml/stock_traceability_report_backend.xml
index e2aa016b5e6..e0a5c606bbe 100644
--- a/addons/stock/static/src/xml/stock_traceability_report_backend.xml
+++ b/addons/stock/static/src/xml/stock_traceability_report_backend.xml
@@ -6,12 +6,12 @@
         <button type="button" class='btn btn-primary o_stock-widget-pdf'>PRINT</button>
     </t>
 
-    <div role="dialog" t-name='stockReports.errorModal' class="modal" id="editable_error" tabindex="-1" data-backdrop="static" style="z-index:9999;">
+    <div role="dialog" t-name='stockReports.errorModal' class="modal" id="editable_error" tabindex="-1" data-bs-backdrop="static" style="z-index:9999;">
         <div class="modal-dialog modal-sm">
             <div class="modal-content">
                 <header class="modal-header">
                     <h3 class="modal-title">Error</h3>
-                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </header>
                 <main class="modal-body">
                     <p id='insert_error' class='text-center'></p>
diff --git a/addons/stock/views/report_stock_traceability.xml b/addons/stock/views/report_stock_traceability.xml
index 41c1bcde74d..d60047d5f37 100644
--- a/addons/stock/views/report_stock_traceability.xml
+++ b/addons/stock/views/report_stock_traceability.xml
@@ -47,7 +47,7 @@
 
     <template id="report_stock_inventory">
         <div class="container-fluid o_stock_reports_page o_stock_reports_no_print">
-            <span t-if="lines" class="o_report_heading text-left"><h1>Traceability Report</h1></span>
+            <span t-if="lines" class="o_report_heading text-start"><h1>Traceability Report</h1></span>
             <span><t t-esc="context"/></span>
             <div class="o_stock_reports_table table-responsive">
                 <t t-if="not lines">
@@ -89,7 +89,7 @@
 
     <template id="report_stock_body_print">
         <div class="container o_stock_reports_page o_stock_reports_no_print">
-            <span class="text-left">
+            <span class="text-start">
                 <h3>
                     Traceability Report
                     <span t-if="reference" style="margin-left:28%">
diff --git a/addons/stock/views/res_config_settings_views.xml b/addons/stock/views/res_config_settings_views.xml
index bcd17195086..6f24ccf7bc0 100644
--- a/addons/stock/views/res_config_settings_views.xml
+++ b/addons/stock/views/res_config_settings_views.xml
@@ -37,7 +37,7 @@
                                     </div>
                                     <div class="row mt-2" attrs="{'invisible': [('module_stock_picking_batch','=',False)]}">
                                         <field name="group_stock_picking_wave" class="col-lg-1 ml16 mr0"/>
-                                        <div class="col pl-0">
+                                        <div class="col ps-0">
                                             <label for="group_stock_picking_wave"/>
                                             <div class="text-muted">Process operations in wave transfers</div>
                                         </div>
@@ -66,7 +66,7 @@
                                     </div>
                                     <div class="row mt-2" attrs="{'invisible': [('module_quality_control','=',False)]}">
                                         <field name="module_quality_control_worksheet" widget="upgrade_boolean" class="col-lg-1 ml16 mr0"/>
-                                        <div class="col pl-0">
+                                        <div class="col ps-0">
                                             <label for="module_quality_control_worksheet"/>
                                             <div class="text-muted">
                                                 Create customizable worksheets for your quality checks
@@ -107,7 +107,7 @@
                                 </div>
                                 <div class="o_setting_right_pane" id="barcode_settings">
                                     <label for="module_stock_barcode"/>
-                                    <a href="https://www.odoo.com/documentation/master/applications/inventory_and_mrp/inventory/barcode/setup/software.html" title="Documentation" class="mr-2 o_doc_link" target="_blank"></a>
+                                    <a href="https://www.odoo.com/documentation/master/applications/inventory_and_mrp/inventory/barcode/setup/software.html" title="Documentation" class="me-2 o_doc_link" target="_blank"></a>
                                     <span class="fa fa-lg fa-building-o" title="Values set here are company-specific." groups="base.group_multi_company"/>
                                     <div class="text-muted" name="stock_barcode">
                                         Process operations faster with barcodes
@@ -338,7 +338,7 @@
                                     </div>
                                     <div class="row mt-2" attrs="{'invisible': [('group_stock_production_lot','=',False)]}">
                                         <field name="group_stock_lot_print_gs1" class="col-lg-1 ml16 mr0"/>
-                                        <div class="col pl-0">
+                                        <div class="col ps-0">
                                             <label for="group_stock_lot_print_gs1"/>
                                             <div class="text-muted">Use GS1 nomenclature datamatrix whenever barcodes are printed for lots and serial numbers. Printing datamatrix requires extra software. If software can't be found then 1D barcodes will be printed.</div>
                                         </div>
diff --git a/addons/stock/views/stock_move_line_views.xml b/addons/stock/views/stock_move_line_views.xml
index c93f85d796a..5b829a6b3cc 100644
--- a/addons/stock/views/stock_move_line_views.xml
+++ b/addons/stock/views/stock_move_line_views.xml
@@ -157,7 +157,7 @@
                                     <field name="qty_done" string="Quantity Done"/>
                                     <field name="product_uom_id" string="Unit of Measure" groups="uom.group_uom"/>
                                 </div>
-                                <div class="col-6 text-right">
+                                <div class="col-6 text-end">
                                     <field name="date"/>
                                 </div>
                             </div>
diff --git a/addons/stock/views/stock_orderpoint_views.xml b/addons/stock/views/stock_orderpoint_views.xml
index dea52f2e31f..fada53a1b91 100644
--- a/addons/stock/views/stock_orderpoint_views.xml
+++ b/addons/stock/views/stock_orderpoint_views.xml
@@ -17,14 +17,14 @@
                                 <div class="o_kanban_record_headings">
                                     <strong class="o_kanban_record_title"><t t-esc="record.name.value"/></strong>
                                 </div>
-                                <span class="badge badge-pill"><strong>Min qty :</strong><t t-esc="record.product_min_qty.value"/></span>
+                                <span class="badge rounded-pill"><strong>Min qty :</strong><t t-esc="record.product_min_qty.value"/></span>
                             </div>
                             <div class="o_kanban_record_bottom">
                                 <div class="oe_kanban_bottom_left">
                                     <span><t t-esc="record.product_id.value"/></span>
                                 </div>
                                 <div class="oe_kanban_bottom_right">
-                                    <span class="badge badge-pill"><strong>Max qty :</strong><t t-esc="record.product_max_qty.value"/></span>
+                                    <span class="badge rounded-pill"><strong>Max qty :</strong><t t-esc="record.product_max_qty.value"/></span>
                                 </div>
                             </div>
                         </div>
diff --git a/addons/stock/views/stock_picking_views.xml b/addons/stock/views/stock_picking_views.xml
index b30b30a56ec..0cede109590 100644
--- a/addons/stock/views/stock_picking_views.xml
+++ b/addons/stock/views/stock_picking_views.xml
@@ -153,7 +153,7 @@
                             <div t-attf-class="oe_kanban_card oe_kanban_global_click">
                                 <div class="o_kanban_record_top mb8">
                                     <field name="priority" widget="priority"/>
-                                    <div class="o_kanban_record_headings ml-1">
+                                    <div class="o_kanban_record_headings ms-1">
                                         <strong class="o_kanban_record_title"><span><t t-esc="record.name.value"/></span></strong>
                                     </div>
                                     <strong>
@@ -301,7 +301,7 @@
                     </div>
                     <div class="oe_title">
                         <h1>
-                            <field name="priority" widget="priority" class="mr-3" attrs="{'invisible': [('name','=','/')]}"/>
+                            <field name="priority" widget="priority" class="me-3" attrs="{'invisible': [('name','=','/')]}"/>
                             <field name="name" attrs="{'invisible': [('name','=','/')]}"/>
                         </h1>
                     </div>
diff --git a/addons/stock/views/stock_scrap_views.xml b/addons/stock/views/stock_scrap_views.xml
index 544749a5074..4e7a0f38e4d 100644
--- a/addons/stock/views/stock_scrap_views.xml
+++ b/addons/stock/views/stock_scrap_views.xml
@@ -93,7 +93,7 @@
                                     <strong class="col-6">
                                         <span t-esc="record.name.value"/>
                                     </strong>
-                                    <strong t-if="record.date_done.value" class="col-6 text-right">
+                                    <strong t-if="record.date_done.value" class="col-6 text-end">
                                         <i class="fa fa-clock-o" role="img" aria-label="Date" title="Date"/><span t-esc="record.date_done.value"/>
                                     </strong>
                                     <div class="col-12">
@@ -103,7 +103,7 @@
                                         <span t-esc="record.scrap_qty.value"/>
                                     </div>
                                     <div class="col-6">
-                                        <span class="float-right badge badge-secondary">
+                                        <span class="float-end badge text-bg-secondary">
                                             <field name="state"/>
                                         </span>
                                     </div>
diff --git a/addons/stock_account/views/report_invoice.xml b/addons/stock_account/views/report_invoice.xml
index 6cb65813f00..42221dac67f 100644
--- a/addons/stock_account/views/report_invoice.xml
+++ b/addons/stock_account/views/report_invoice.xml
@@ -9,19 +9,19 @@
                     <thead>
                         <tr>
                             <th><span>Product</span></th>
-                            <th class="text-right"><span>Quantity</span></th>
-                            <th class="text-right"><span>SN/LN</span></th>
+                            <th class="text-end"><span>Quantity</span></th>
+                            <th class="text-end"><span>SN/LN</span></th>
                         </tr>
                     </thead>
                     <tbody>
                         <t t-foreach="lot_values" t-as="snln_line">
                             <tr>
                                 <td><t t-esc="snln_line['product_name']"/></td>
-                                <td class="text-right">
+                                <td class="text-end">
                                     <t t-esc="snln_line['quantity']"/>
                                     <t t-esc="snln_line['uom_name']" groups="uom.group_uom"/>
                                 </td>
-                                <td class="text-right"><t t-esc="snln_line['lot_name']"/></td>
+                                <td class="text-end"><t t-esc="snln_line['lot_name']"/></td>
                             </tr>
                         </t>
                     </tbody>
diff --git a/addons/stock_account/wizard/stock_valuation_layer_revaluation_views.xml b/addons/stock_account/wizard/stock_valuation_layer_revaluation_views.xml
index 50863e9319e..5a1607de6c0 100644
--- a/addons/stock_account/wizard/stock_valuation_layer_revaluation_views.xml
+++ b/addons/stock_account/wizard/stock_valuation_layer_revaluation_views.xml
@@ -15,7 +15,7 @@
                         <label for="added_value" string="Added Value"/>
                         <div class="o_row">
                             <span><field name="added_value" class="oe_inline"/> = <field name="new_value"/> (<field name="new_value_by_qty"/> by <field name="product_uom_name" class="mx-1"/>)
-                            <small class="mx-2 font-italic">Use a negative added value to record a decrease in the product value</small></span>
+                            <small class="mx-2 fst-italic">Use a negative added value to record a decrease in the product value</small></span>
                         </div>
                         <field name="company_id" invisible="1"/>
                         <field name="currency_id" invisible="1"/>
diff --git a/addons/stock_landed_costs/views/stock_landed_cost_views.xml b/addons/stock_landed_costs/views/stock_landed_cost_views.xml
index 612dbd4a6ad..0ddb9a16acf 100644
--- a/addons/stock_landed_costs/views/stock_landed_cost_views.xml
+++ b/addons/stock_landed_costs/views/stock_landed_cost_views.xml
@@ -165,14 +165,14 @@
                                         <span t-esc="record.name.value"/>
                                     </strong>
                                     <div class="col-6">
-                                        <span class="float-right badge badge-secondary">
+                                        <span class="float-end badge text-bg-secondary">
                                             <field name="state"/>
                                         </span>
                                     </div>
                                     <div class="col-6">
                                         <i class="fa fa-clock-o" title="Date" role="img" aria-label="Date"/><span t-esc="record.date.value"/>
                                     </div>
-                                    <div class="col-6 text-right">
+                                    <div class="col-6 text-end">
                                         <field name="account_journal_id"/>
                                     </div>
                                 </div>
diff --git a/addons/stock_picking_batch/report/report_picking_batch.xml b/addons/stock_picking_batch/report/report_picking_batch.xml
index ca0a51d9fe1..eda1f443d06 100644
--- a/addons/stock_picking_batch/report/report_picking_batch.xml
+++ b/addons/stock_picking_batch/report/report_picking_batch.xml
@@ -13,7 +13,7 @@
                         <div class="page">
                             <div class="d-flex">
                                 <div><h3>Summary: <span t-field="o.name"/></h3></div>
-                                <div class="mr-auto">
+                                <div class="me-auto">
                                     <div t-field="o.name" t-options="{'widget': 'barcode', 'width': 600, 'height': 150, 'img_style': 'width:300px;height:50px;'}"/>
                                 </div>
                             </div>
diff --git a/addons/stock_picking_batch/views/stock_picking_type_views.xml b/addons/stock_picking_batch/views/stock_picking_type_views.xml
index 4d069ec47df..338a55053d8 100644
--- a/addons/stock_picking_batch/views/stock_picking_type_views.xml
+++ b/addons/stock_picking_batch/views/stock_picking_type_views.xml
@@ -9,7 +9,7 @@
                 <group attrs="{'invisible': [('code', 'not in', ('incoming', 'outgoing', 'internal'))]}">
                     <group string="Batch Transfers">
                         <field name="auto_batch"/>
-                        <span class="o_form_label font-weight-bold" attrs="{'invisible':[('auto_batch', '=', False)]}">Group by</span>
+                        <span class="o_form_label fw-bold" attrs="{'invisible':[('auto_batch', '=', False)]}">Group by</span>
                         <div name="batch_contact" class="o_row" attrs="{'invisible':[('auto_batch', '=', False)]}">
                             <field name="batch_group_by_partner"/>
                             <label for="batch_group_by_partner" string="Contact"/>
diff --git a/addons/survey/static/src/scss/survey_templates_results.scss b/addons/survey/static/src/scss/survey_templates_results.scss
index b7bdf515d70..d43f05df5ab 100644
--- a/addons/survey/static/src/scss/survey_templates_results.scss
+++ b/addons/survey/static/src/scss/survey_templates_results.scss
@@ -39,8 +39,8 @@
         }
         .dropdown-item {
             &.active .badge { // Invert badge display when the item is active
-                background-color: color-contrast(theme-color('primary'));
-                color: theme-color('primary');
+                background-color: color-contrast(map-get($theme-colors, 'primary'));
+                color: map-get($theme-colors, 'primary');
             }
         }
     }
diff --git a/addons/survey/static/src/xml/survey_breadcrumb_templates.xml b/addons/survey/static/src/xml/survey_breadcrumb_templates.xml
index 1df7f54a88a..a50ca04a52d 100644
--- a/addons/survey/static/src/xml/survey_breadcrumb_templates.xml
+++ b/addons/survey/static/src/xml/survey_breadcrumb_templates.xml
@@ -6,7 +6,7 @@
         <t t-set="canGoBack" t-value="widget.canGoBack"/>
         <t t-foreach="widget.pages" t-as="page">
             <t t-set="isActivePage" t-value="page.id === widget.currentPageId"/>
-            <li t-att-class="'breadcrumb-item' + (isActivePage ? ' active font-weight-bold' : '')"
+            <li t-att-class="'breadcrumb-item' + (isActivePage ? ' active fw-bold' : '')"
                 t-att-data-page-id="page.id"
                 t-att-data-page-title="page.title">
                 <t t-if="widget.currentPageId === page.id">
diff --git a/addons/survey/static/src/xml/survey_session_text_answer_template.xml b/addons/survey/static/src/xml/survey_session_text_answer_template.xml
index d37e0864f73..e2f0d6b89fa 100644
--- a/addons/survey/static/src/xml/survey_session_text_answer_template.xml
+++ b/addons/survey/static/src/xml/survey_session_text_answer_template.xml
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
 
 <div t-name="survey.survey_session_text_answer" class="o_survey_session_text_answer d-inline-block m-1">
-    <div class="o_survey_session_text_answer_container d-inline-block p-2 font-weight-bold"
+    <div class="o_survey_session_text_answer_container d-inline-block p-2 fw-bold"
         t-attf-style="border-color: #{borderColor}">
         <span class="d-inline-block" t-esc="value" />
     </div>
diff --git a/addons/survey/views/survey_question_views.xml b/addons/survey/views/survey_question_views.xml
index f18bbe48a94..3b67805f217 100644
--- a/addons/survey/views/survey_question_views.xml
+++ b/addons/survey/views/survey_question_views.xml
@@ -13,7 +13,7 @@
                 <field name="sequence" invisible="1"/>
                 <field name="scoring_type" invisible="1"/>
                 <sheet>
-                    <div class="float-right d-flex flex-column text-center" attrs="{'invisible': [('is_page', '=', False)]}">
+                    <div class="float-end d-flex flex-column text-center" attrs="{'invisible': [('is_page', '=', False)]}">
                         <label for="background_image"/>
                         <field name="background_image" widget="image" class="oe_avatar"/>
                     </div>
@@ -36,17 +36,17 @@
                                 <div attrs="{'invisible': [('question_type', '!=', 'simple_choice')]}" role="img" aria-label="Multiple choice with one answer"
                                     title="Multiple choice with one answer">
                                     <span>Which is yellow?</span><br/>
-                                    <div class="row o_preview_questions_choice mb-2"><i class="fa fa-circle-o  fa-lg mr-2"/>answer</div>
-                                    <div class="row o_preview_questions_choice mb-2"><i class="fa fa-dot-circle-o fa-lg mr-2"/>answer</div>
-                                    <div class="row o_preview_questions_choice"><i class="fa fa-circle-o  fa-lg mr-2"/>answer</div>
+                                    <div class="row o_preview_questions_choice mb-2"><i class="fa fa-circle-o  fa-lg me-2"/>answer</div>
+                                    <div class="row o_preview_questions_choice mb-2"><i class="fa fa-dot-circle-o fa-lg me-2"/>answer</div>
+                                    <div class="row o_preview_questions_choice"><i class="fa fa-circle-o  fa-lg me-2"/>answer</div>
                                 </div>
                                 <!-- Multiple choice: multiple answers allowed -->
                                 <div attrs="{'invisible': [('question_type', '!=', 'multiple_choice')]}" role="img" aria-label="Multiple choice with multiple answers"
                                     title="Multiple choice with multiple answers">
                                     <span>Which are yellow?</span><br/>
-                                    <div class="row o_preview_questions_choice mb-2"><i class="fa fa-square-o fa-lg mr-2"/>answer</div>
-                                    <div class="row o_preview_questions_choice mb-2"><i class="fa fa-check-square-o fa-lg mr-2"/>answer</div>
-                                    <div class="row o_preview_questions_choice"><i class="fa fa-square-o fa-lg mr-2"/>answer</div>
+                                    <div class="row o_preview_questions_choice mb-2"><i class="fa fa-square-o fa-lg me-2"/>answer</div>
+                                    <div class="row o_preview_questions_choice mb-2"><i class="fa fa-check-square-o fa-lg me-2"/>answer</div>
+                                    <div class="row o_preview_questions_choice"><i class="fa fa-square-o fa-lg me-2"/>answer</div>
                                 </div>
                                 <!-- Multiple Lines Text Zone -->
                                 <div attrs="{'invisible': [('question_type', '!=', 'text_box')]}">
diff --git a/addons/survey/views/survey_survey_views.xml b/addons/survey/views/survey_survey_views.xml
index d5eb11a6b94..efbacfe5e97 100644
--- a/addons/survey/views/survey_survey_views.xml
+++ b/addons/survey/views/survey_survey_views.xml
@@ -128,7 +128,7 @@
                                         </div>
                                     </div> 
                                     <field name="certification_mail_template_id" attrs="{'invisible': [('certification', '=', False)]}"/>
-                                    <div colspan="2" class="float-left o_checkbox_optional_field"
+                                    <div colspan="2" class="float-start o_checkbox_optional_field"
                                         attrs="{'invisible': ['|', ('certification', '=', False), ('users_login_required', '=', False)]}">
                                         <label for="certification_give_badge"/>
                                         <field name="certification_give_badge"/>
@@ -153,7 +153,7 @@
                                         <label for="session_link" string="Session Link" class="oe_read_only o_form_label" />
                                     </div>
                                     <div class="d-flex">
-                                        <field name="session_code" nolabel="1" class="mr-2 oe_edit_only" />
+                                        <field name="session_code" nolabel="1" class="me-2 oe_edit_only" />
                                         <field name="session_link" nolabel="1" widget="CopyClipboardChar" class="oe_read_only" />
                                     </div>
                                     <field name="session_speed_rating" />
@@ -219,7 +219,7 @@
                         <div class="o_survey_kanban_card_ungrouped row mx-0">
                             <div class="col-lg-2 col-sm-8 py-0 my-2 my-lg-0 col-12">
                                 <div class="d-flex flex-grow-1 flex-column my-0 my-lg-2">
-                                    <span class="font-weight-bold"><field name="title"/></span>
+                                    <span class="fw-bold"><field name="title"/></span>
                                     <span t-if="!selection_mode">
                                         <field name="user_id" widget="many2one_avatar_user"
                                             options="{'display_avatar_name': True}"/>
@@ -229,14 +229,14 @@
                                 </div>
                             </div>
                             <div t-attf-class="col-lg-1 col-sm-4 d-none d-sm-block py-0 my-2 col-#{selection_mode ? '12' : '6'}">
-                                <span class="font-weight-bold"><field name="question_count"/></span><br t-if="!selection_mode"/>
+                                <span class="fw-bold"><field name="question_count"/></span><br t-if="!selection_mode"/>
                                 <span class="text-muted">Questions</span>
                             </div>
                             <div t-if="selection_mode" class="col-12 d-flex justify-content-end">
                                 <field name="user_id" widget="many2one_avatar_user"/>
                             </div>
                             <div t-if="!selection_mode" class="col-lg-1 col-sm-4 col-6 py-0 my-2">
-                                <span class="font-weight-bold">
+                                <span class="fw-bold">
                                     <field name="answer_duration_avg" widget="float_time"/>
                                 </span><br />
                                 <span class="text-muted">Average Duration</span>
@@ -244,7 +244,7 @@
                             <div t-if="!selection_mode" class="col-lg-1 col-sm-4 col-6 py-0 my-2">
                                 <a type="object"
                                    name="action_survey_user_input"
-                                   class="font-weight-bold">
+                                   class="fw-bold">
                                     <field name="answer_count"/><br />
                                     <span class="text-muted">Registered</span>
                                 </a>
@@ -252,7 +252,7 @@
                             <div t-if="!selection_mode" class="col-lg-1 col-sm-4 col-6 d-none d-sm-block py-0 my-2">
                                 <a type="object"
                                    name="action_survey_user_input_completed"
-                                   class="font-weight-bold">
+                                   class="fw-bold">
                                     <field name="answer_done_count"/><br />
                                     <span class="text-muted">Completed</span>
                                 </a>
@@ -262,7 +262,7 @@
                                  <a t-if="record.scoring_type.raw_value != 'no_scoring'"
                                    type="object"
                                    name="action_survey_user_input_certified"
-                                   class="font-weight-bold">
+                                   class="fw-bold">
                                     <field name="success_ratio" widget="progressbar"
                                            options="{'current_value': 'success_ratio',
                                                      'max_value': 100,
@@ -271,7 +271,7 @@
                                     <span class="text-muted" t-else="">Certified</span>
                                 </a>
                             </div>
-                            <div t-if="!selection_mode" class="col-lg-3 col-sm-12 d-none d-sm-block py-0 my-2 pb-lg-3 ml-auto text-lg-right">
+                            <div t-if="!selection_mode" class="col-lg-3 col-sm-12 d-none d-sm-block py-0 my-2 pb-lg-3 ms-auto text-lg-end">
                                 <button name="action_send_survey"
                                         string="Share" type="object"
                                         class="btn btn-secondary border"
@@ -315,7 +315,7 @@
                             <div class="o_dropdown_kanban dropdown" t-if="widget.editable">
                                 <a href="#" role="button"
                                     class="dropdown-toggle o-no-caret btn"
-                                    data-toggle="dropdown" data-display="static"
+                                    data-bs-toggle="dropdown" data-bs-display="static"
                                     aria-label="Dropdown menu" title="Dropdown menu">
                                     <span class="fa fa-ellipsis-v"/>
                                 </a>
@@ -334,22 +334,22 @@
                             <div class="row">
                                 <div class="col-10 p-0 pb-1">
                                     <div class="container o_kanban_card_content" t-if="record.answer_count.raw_value != 0">
-                                        <div class="row mt-4 ml-5">
+                                        <div class="row mt-4 ms-5">
                                             <div class="col-4 p-0">
                                                 <a name="action_survey_user_input" type="object" class="d-flex flex-column align-items-center">
-                                                    <span class="font-weight-bold"><field name="answer_count"/></span>
+                                                    <span class="fw-bold"><field name="answer_count"/></span>
                                                     <span class="text-muted">Registered</span>
                                                 </a>
                                             </div>
-                                            <div class="col-4 p-0 border-left">
+                                            <div class="col-4 p-0 border-start">
                                                 <a name="action_survey_user_input_completed" type="object" class="d-flex flex-column align-items-center">
-                                                    <span class="font-weight-bold"><field name="answer_done_count"/></span>
+                                                    <span class="fw-bold"><field name="answer_done_count"/></span>
                                                     <span class="text-muted">Completed</span>
                                                 </a>
                                             </div>
-                                            <div class="col-4 p-0 border-left" t-if="record.scoring_type.raw_value != 'no_scoring'" >
+                                            <div class="col-4 p-0 border-start" t-if="record.scoring_type.raw_value != 'no_scoring'" >
                                                 <a name="action_survey_user_input_certified" type="object" class="d-flex flex-column align-items-center">
-                                                    <span class="font-weight-bold"> <t t-esc="Math.round(record.success_ratio.raw_value)"></t> %</span>
+                                                    <span class="fw-bold"> <t t-esc="Math.round(record.success_ratio.raw_value)"></t> %</span>
                                                     <span class="text-muted" >Success</span>
                                                 </a> 
                                             </div>
@@ -404,7 +404,7 @@
           </p><p>
             Surveys can serve many purposes: collect customer feedback, gather market insights, structure employee evaluations, test and certify resellers, support a live presentation, ...
           </p><p>
-            Let's create one and share it! Not sure where to start? <a href="#" class="o_survey_open_sample_modal font-weight-bold">Load a survey</a>
+            Let's create one and share it! Not sure where to start? <a href="#" class="o_survey_open_sample_modal fw-bold">Load a survey</a>
           </p>
         </field>
     </record>
diff --git a/addons/survey/views/survey_templates.xml b/addons/survey/views/survey_templates.xml
index 2e82f5ad469..c235564d94f 100644
--- a/addons/survey/views/survey_templates.xml
+++ b/addons/survey/views/survey_templates.xml
@@ -29,8 +29,8 @@
             <div id="wrap" class="oe_structure oe_empty"/>
         </xpath>
         <xpath expr="//footer" position="after">
-            <div class="py-3 m-0 p-0 text-right">
-                <div class="o_survey_progress_wrapper d-inline-block pr-1 text-left">
+            <div class="py-3 m-0 p-0 text-end">
+                <div class="o_survey_progress_wrapper d-inline-block pe-1 text-start">
                     <t t-call="survey.survey_progression"
                         t-if="survey and survey.questions_layout != 'one_page' and answer and answer.state == 'in_progress' and (not question or not question.is_page) and not survey_form_readonly">
                         <t t-if="survey.questions_layout == 'page_per_section'">
@@ -43,7 +43,7 @@
                         </t>
                     </t>
                 </div>
-                <div class="o_survey_brand_message float-right rounded mr-3 border">
+                <div class="o_survey_brand_message float-end rounded me-3 border">
                     <div class="px-2 py-2 d-inline-block" t-call="web.brand_promotion_message">
                         <t t-set="_message"></t>
                         <t t-set="_utm_medium" t-valuef="survey"/>
@@ -78,7 +78,7 @@
                             t-esc="survey.title" class="o_survey_main_title pt-4"></h1>
                     </div>
                     <div class="o_survey_timer col-lg-2 pt-4">
-                        <h1 class="o_survey_timer_container timer text-right">
+                        <h1 class="o_survey_timer_container timer text-end">
                         </h1>
                     </div>
                 </div>
@@ -130,10 +130,10 @@
                 <div class="modal-content">
                     <header class="modal-header">
                         <h4 class="modal-title">A problem has occurred</h4>
-                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                     </header>
                     <main class="modal-body"><p>To take this survey, please close all other tabs on <strong class="text-danger"></strong>.</p></main>
-                    <footer class="modal-footer"><button type="button" class="btn btn-primary" data-dismiss="modal">Continue here</button></footer>
+                    <footer class="modal-footer"><button type="button" class="btn btn-primary" data-bs-dismiss="modal">Continue here</button></footer>
                 </div>
             </div>
         </div>
@@ -144,7 +144,7 @@
             <div class='mb32'>
                 <div t-field='survey.description' class="oe_no_empty pb-5"/>
                 <t t-if="answer.is_session_answer">
-                    <div class="font-weight-bold">
+                    <div class="fw-bold">
                         The session will begin automatically when the host starts.
                     </div>
                 </t>
@@ -153,7 +153,7 @@
                         <p>
                             <span t-if="not survey.certification">Time limit for this survey: </span>
                             <span t-else="">Time limit for this certification: </span>
-                            <span class="font-weight-bold text-danger" t-field="survey.time_limit" t-options="{'widget': 'duration', 'unit': 'minute'}"></span>
+                            <span class="fw-bold text-danger" t-field="survey.time_limit" t-options="{'widget': 'duration', 'unit': 'minute'}"></span>
                         </p>
                     </div>
                     <button type="submit" value="start" class="btn btn-primary btn-lg">
@@ -164,7 +164,7 @@
                             Start Survey
                         </t>
                     </button>
-                    <span class="o_survey_enter font-weight-bold text-muted ml-2 d-none d-md-inline">or press Enter</span>
+                    <span class="o_survey_enter fw-bold text-muted ms-2 d-none d-md-inline">or press Enter</span>
                 </t>
             </div>
         </div>
@@ -187,7 +187,7 @@
 
             <div class="text-center mt16 mb256">
                 <button type="submit" value="finish" class="btn btn-primary">Submit</button>
-                    <span class="font-weight-bold text-muted ml-2 d-none d-md-inline">
+                    <span class="fw-bold text-muted ms-2 d-none d-md-inline">
                         <span id="enter-tooltip">or press Enter</span>
                     </span>
             </div>
@@ -208,7 +208,7 @@
                         <t t-if="not survey_last">Continue</t>
                         <t t-else="">Submit</t>
                     </button>
-                    <span class="font-weight-bold text-muted ml-2 d-none d-md-inline" id="enter-tooltip"> or press Enter</span>
+                    <span class="fw-bold text-muted ms-2 d-none d-md-inline" id="enter-tooltip"> or press Enter</span>
                 </div>
             </div>
         </t>
@@ -229,11 +229,11 @@
                         <t t-call="survey.question_container" />
                     </div>
                 </fieldset>
-                <div t-if="answer.question_time_limit_reached and not has_answered" class="font-weight-bold">Sorry, you have not been fast enough.</div>
-                <div t-else="" class="font-weight-bold">We have registered your answer! Please wait for the host to go to the next question.</div>
+                <div t-if="answer.question_time_limit_reached and not has_answered" class="fw-bold">Sorry, you have not been fast enough.</div>
+                <div t-else="" class="fw-bold">We have registered your answer! Please wait for the host to go to the next question.</div>
             </t>
             <t t-elif="answer.is_session_answer and question.is_page and not is_html_empty(question.description)">
-                <div class="font-weight-bold mt-5">Pay attention to the host screen until the next question.</div>
+                <div class="fw-bold mt-5">Pay attention to the host screen until the next question.</div>
             </t>
             <t t-else="">
                 <div class="mt-5">
@@ -246,7 +246,7 @@
                             <t t-if="answer.is_session_answer or survey_last">Submit</t>
                             <t t-else="">Continue</t>
                         </button>
-                        <span class="font-weight-bold text-muted ml-2 d-none d-md-inline">
+                        <span class="fw-bold text-muted ms-2 d-none d-md-inline">
                             <span id="enter-tooltip">or press Enter</span>
                         </span>
                     </div>
@@ -288,7 +288,7 @@
                     </div>
                     <div class="col-6 text-center" t-if="survey.certification_give_badge and answer.scoring_success">
                         <img t-att-src="'/web/image/gamification.badge/%s/image_128' % survey.certification_badge_id.id"/>
-                        <div>You received the badge <span class="font-weight-bold" t-esc="survey.certification_badge_id.name"/>!</div>
+                        <div>You received the badge <span class="fw-bold" t-esc="survey.certification_badge_id.name"/>!</div>
                     </div>
                 </div>
             </div>
@@ -318,9 +318,9 @@
         <!--Use Key selection if number of choices is < 26 to keep Z for other choice if any-->
         <t t-set="letters" t-value="'ABCDEFGHIJKLMNOPQRSTUVWXYZ'"/>
         <t t-set="useKeySelection" t-value="len(question.suggested_answer_ids) &lt; len(letters) and survey.questions_layout == 'page_per_question'"/>
-        <!-- Extra 'right' margin is added on layouts that are not "page_per_question" to align with choices questions, since all choices have a mr-2 class (pixel perfect yay...) -->
+        <!-- Extra 'right' margin is added on layouts that are not "page_per_question" to align with choices questions, since all choices have a me-2 class (pixel perfect yay...) -->
         <t t-set="extra_right_margin" t-value="survey.questions_layout != 'page_per_question' and question.question_type not in ['simple_choice', 'multiple_choice']"/>
-        <div t-att-class="'js_question-wrapper pb-4 %s %s' % ('d-none' if not display_question else '', 'mr-2' if extra_right_margin else '')"
+        <div t-att-class="'js_question-wrapper pb-4 %s %s' % ('d-none' if not display_question else '', 'me-2' if extra_right_margin else '')"
              t-att-id="question.id" t-att-data-required="question.constr_mandatory"
              t-att-data-constr-error-msg="question.constr_error_msg"
              t-att-data-validation-error-msg="question.validation_error_msg">
@@ -431,11 +431,11 @@
                     <t t-set="answer_class" t-elif="not is_correct" t-value="'bg-danger'" />
 
                     <label t-att-for="str(question.id) + '_' + str(label.id)"
-                           t-att-class="'o_survey_choice_btn mr-2 mb-2 py-1 px-3 rounded %s %s' % (answer_class, 'o_survey_selected' if answer_selected else '')">
+                           t-att-class="'o_survey_choice_btn me-2 mb-2 py-1 px-3 rounded %s %s' % (answer_class, 'o_survey_selected' if answer_selected else '')">
                         <t t-call="survey.survey_selection_key">
-                            <t t-set="selection_key_class" t-value="'position-relative o_survey_radio_btn float-left d-flex'"/>
+                            <t t-set="selection_key_class" t-value="'position-relative o_survey_radio_btn float-start d-flex'"/>
                         </t>
-                        <span class="ml-2" t-field='label.value'/>
+                        <span class="ms-2" t-field='label.value'/>
                         <input t-att-id="str(question.id) + '_' + str(label.id)" type="radio" t-att-value='label.id'
                                t-attf-class="o_survey_form_choice_item invisible position-absolute #{'o_survey_form_choice_item_selected' if answer_selected else ''}"
                                t-att-name='question.id'
@@ -443,12 +443,12 @@
                                t-att-data-selection-key="letters[item_idx] if useKeySelection else ''"/>
                         <t t-if="has_correct_answer and answer_selected">
                             <!-- While displaying results: change icons to have a check mark for a right answer and a cross for a wrong one -->
-                            <i t-if="is_correct" class="float-right mt-1 position-relative d-inline fa fa-check-circle"/>
-                            <i t-else="" class="float-right mt-1 position-relative d-inline fa fa-times-circle"/>
+                            <i t-if="is_correct" class="float-end mt-1 position-relative d-inline fa fa-check-circle"/>
+                            <i t-else="" class="float-end mt-1 position-relative d-inline fa fa-times-circle"/>
                         </t>
                         <t t-else="">
-                            <i class="fa fa-check-circle float-right mt-1 position-relative"></i>
-                            <i class="fa fa-circle-thin float-right mt-1 position-relative"></i>
+                            <i class="fa fa-check-circle float-end mt-1 position-relative"></i>
+                            <i class="fa fa-circle-thin float-end mt-1 position-relative"></i>
                         </t>
                         <t t-call="survey.question_suggested_value_image"/>
                     </label>
@@ -456,18 +456,18 @@
             </div>
             <div t-if='question.comments_allowed and question.comment_count_as_answer' class="js_comments col-lg-12" >
                 <div class="d-flex flex-wrap">
-                    <label t-att-class="'o_survey_choice_btn form-label mr-2 py-1 px-3 rounded %s' % ('o_survey_selected' if comment_line else '')">
+                    <label t-att-class="'o_survey_choice_btn form-label me-2 py-1 px-3 rounded %s' % ('o_survey_selected' if comment_line else '')">
                         <t t-set="item_idx" t-value="item_idx + 1"/>
                         <t t-call="survey.survey_selection_key">
-                            <t t-set="selection_key_class" t-value="'position-relative o_survey_radio_btn float-left d-flex'"/>
+                            <t t-set="selection_key_class" t-value="'position-relative o_survey_radio_btn float-start d-flex'"/>
                         </t>
                         <input type="radio" class="o_survey_form_choice_item o_survey_js_form_other_comment invisible position-absolute" value="-1"
                                t-att-name='question.id'
                                t-att-checked="comment_line and 'checked' or None"
                                t-att-data-selection-key="letters[item_idx] if useKeySelection else ''"/>
-                        <span class="ml-2" t-field="question.comments_message" />
-                        <i class="fa fa-check-circle float-right mt-1 position-relative"></i>
-                        <i class="fa fa-circle-thin float-right mt-1 position-relative"></i>
+                        <span class="ms-2" t-field="question.comments_message" />
+                        <i class="fa fa-check-circle float-end mt-1 position-relative"></i>
+                        <i class="fa fa-circle-thin float-end mt-1 position-relative"></i>
                     </label>
                 </div>
                 <div t-attf-class="o_survey_comment_container mt-3 py-0 px-1  #{'d-none' if not comment_line else ''}">
@@ -475,7 +475,7 @@
                               t-att-disabled="None if comment_line else 'disabled'"><t t-esc="comment_line.value_char_box if comment_line else ''"/></textarea>
                 </div>
             </div>
-            <div t-if='question.comments_allowed and not question.comment_count_as_answer' class="col-lg-12 o_survey_comment_container mx-1 mt-3 pl-3 pr-4">
+            <div t-if='question.comments_allowed and not question.comment_count_as_answer' class="col-lg-12 o_survey_comment_container mx-1 mt-3 ps-3 pe-4">
                 <textarea type="text" class="form-control o_survey_comment o_survey_question_text_box bg-transparent text-dark rounded-0 p-0"
                           t-att-placeholder="question.comments_message if not survey_form_readonly else ''"><t t-esc="comment_line.value_char_box if comment_line else ''"/></textarea>
             </div>
@@ -501,23 +501,23 @@
                     <t t-set="answer_class" t-elif="is_correct" t-value="'bg-success'" />
                     <t t-set="answer_class" t-elif="not is_correct" t-value="'bg-danger'" />
 
-                    <label t-att-class="'o_survey_choice_btn form-label mr-2 py-1 px-3 rounded %s %s' % (answer_class, 'o_survey_selected' if answer_line else '')">
+                    <label t-att-class="'o_survey_choice_btn form-label me-2 py-1 px-3 rounded %s %s' % (answer_class, 'o_survey_selected' if answer_line else '')">
                         <t t-call="survey.survey_selection_key">
-                            <t t-set="selection_key_class" t-value="'position-relative float-left d-flex'"/>
+                            <t t-set="selection_key_class" t-value="'position-relative float-start d-flex'"/>
                         </t>
                         <input type="checkbox" t-att-value='label.id' class="o_survey_form_choice_item invisible position-absolute"
                                t-att-name="question.id"
                                t-att-checked="'checked' if answer_line else None"
                                t-att-data-selection-key="letters[item_idx] if useKeySelection else ''"/>
-                        <span class="ml-2" t-field='label.value'/>
+                        <span class="ms-2" t-field='label.value'/>
                         <t t-if="has_correct_answer and answer_selected">
                             <!-- While displaying results: change icons to have a check mark for a right answer and a cross for a wrong one -->
-                            <i t-if="is_correct" class="float-right mt-1 position-relative d-inline fa fa-check-circle"/>
-                            <i t-else="" class="float-right mt-1 position-relative d-inline fa fa-times-circle"/>
+                            <i t-if="is_correct" class="float-end mt-1 position-relative d-inline fa fa-check-circle"/>
+                            <i t-else="" class="float-end mt-1 position-relative d-inline fa fa-times-circle"/>
                         </t>
                         <t t-else="">
-                            <i class="fa fa-check-circle float-right mt-1 position-relative"></i>
-                            <i class="fa fa-circle-thin float-right mt-1 position-relative"></i>
+                            <i class="fa fa-check-circle float-end mt-1 position-relative"></i>
+                            <i class="fa fa-circle-thin float-end mt-1 position-relative"></i>
                         </t>
                         <t t-call="survey.question_suggested_value_image"/>
                     </label>
@@ -525,18 +525,18 @@
             </div>
             <div t-if='question.comments_allowed and question.comment_count_as_answer' class="js_ck_comments col-lg-12" >
                 <div class="d-flex flex-wrap">
-                    <label t-att-class="'o_survey_choice_btn form-label mr-2 py-1 px-3 rounded %s' % ('o_survey_selected' if comment_line else '')">
+                    <label t-att-class="'o_survey_choice_btn form-label me-2 py-1 px-3 rounded %s' % ('o_survey_selected' if comment_line else '')">
                         <t t-set="item_idx" t-value="item_idx + 1"/>
                         <t t-call="survey.survey_selection_key">
-                            <t t-set="selection_key_class" t-value="'position-relative float-left d-flex'"/>
+                            <t t-set="selection_key_class" t-value="'position-relative float-start d-flex'"/>
                         </t>
                         <input type="checkbox" class="o_survey_form_choice_item o_survey_js_form_other_comment invisible position-absolute" value="-1"
                                t-att-name="question.id"
                                t-att-checked="comment_line and 'checked' or None"
                                t-att-data-selection-key="letters[item_idx] if useKeySelection else ''"/>
-                        <span class="ml-2" t-field="question.comments_message" />
-                        <i class="fa fa-check-circle float-right mt-1 position-relative"></i>
-                        <i class="fa fa-circle-thin float-right mt-1 position-relative"></i>
+                        <span class="ms-2" t-field="question.comments_message" />
+                        <i class="fa fa-check-circle float-end mt-1 position-relative"></i>
+                        <i class="fa fa-circle-thin float-end mt-1 position-relative"></i>
                     </label>
                 </div>
                 <div t-attf-class="o_survey_comment_container mt-3 py-0 px-1 #{'d-none' if not comment_line else ''}">
@@ -544,7 +544,7 @@
                               t-att-disabled="None if comment_line else 'disabled'"><t t-esc="comment_line.value_char_box if comment_line else ''"/></textarea>
                 </div>
             </div>
-            <div t-if='question.comments_allowed and not question.comment_count_as_answer' class="col-lg-12 o_survey_comment_container mx-1 mt-3 py-0 pl-3 pr-4">
+            <div t-if='question.comments_allowed and not question.comment_count_as_answer' class="col-lg-12 o_survey_comment_container mx-1 mt-3 py-0 ps-3 pe-4">
                 <textarea type="text" class="form-control o_survey_comment o_survey_question_text_box bg-transparent text-dark rounded-0 p-0"
                           t-att-placeholder="question.comments_message if not survey_form_readonly else ''"><t t-esc="comment_line.value_char_box if comment_line else ''"/></textarea>
             </div>
@@ -560,7 +560,7 @@
             <thead>
                 <tr>
                     <th> </th>
-                    <th class="font-weight-normal" t-foreach="question.suggested_answer_ids" t-as="col_label"><span t-field="col_label.value" /></th>
+                    <th class="fw-normal" t-foreach="question.suggested_answer_ids" t-as="col_label"><span t-field="col_label.value" /></th>
                 </tr>
             </thead>
             <tbody>
@@ -568,7 +568,7 @@
                 <!-- For matrix, we have an extra check because we have rows * columns total options -->
                 <t t-set="useKeySelection" t-value="useKeySelection and (len(question.suggested_answer_ids) * len(question.matrix_row_ids)) &lt; len(letters)" />
                 <tr class="bg-white text-white" t-foreach="question.matrix_row_ids" t-as="row_label" t-att-id="row_label.id">
-                    <th class="font-weight-normal text-left"><span t-field="row_label.value" /></th>
+                    <th class="fw-normal text-start"><span t-field="row_label.value" /></th>
                     <t t-foreach="question.suggested_answer_ids" t-as="col_label">
                         <t t-set="answer" t-value="answer_lines.filtered(lambda line: line.suggested_answer_id == col_label and line.matrix_row_id == row_label)"/>
                         <td t-att-class="'o_survey_matrix_btn text-primary position-relative %s'
@@ -585,7 +585,7 @@
                             % ('check-square' if question.matrix_subtype == 'multiple' else 'check-circle')"></i>
                             <t t-call="survey.survey_selection_key">
                                 <t t-set="selection_key_class"
-                                   t-value="'position-absolute float-right font-weight-bold %s' % ('o_survey_radio_btn' if question.matrix_subtype != 'multiple' else '')"/>
+                                   t-value="'position-absolute float-end fw-bold %s' % ('o_survey_radio_btn' if question.matrix_subtype != 'multiple' else '')"/>
                             </t>
                             <t t-set="item_idx" t-value="item_idx + 1"/>
                         </td>
@@ -602,7 +602,7 @@
 
     <template id="survey_selection_key">
         <div t-if="useKeySelection" t-att-class="'o_survey_choice_key bg-white rounded %s' % selection_key_class">
-             <span class="o_survey_key text-center position-absolute bg-white rounded-left py-0 pl-2"><span class="text-primary text-center text-center w-100 position-relative">Key</span></span>
+             <span class="o_survey_key text-center position-absolute bg-white rounded-start py-0 ps-2"><span class="text-primary text-center text-center w-100 position-relative">Key</span></span>
              <span class="text-primary text-center w-100 position-relative" t-esc="letters[item_idx]"/>
         </div>
     </template>
diff --git a/addons/survey/views/survey_templates_management.xml b/addons/survey/views/survey_templates_management.xml
index fb335e038e9..7888eeb3a85 100644
--- a/addons/survey/views/survey_templates_management.xml
+++ b/addons/survey/views/survey_templates_management.xml
@@ -82,7 +82,7 @@
             <div t-ignore="true" class="text-center">
                 <a t-attf-href="/web#view_type=form&amp;model=survey.survey&amp;id=#{survey.id}&amp;action=survey.action_survey_form"><span t-if="answer and answer.test_entry">This is a Test Survey. </span><i class="fa fa-fw fa-arrow-right"/>Back to edit mode</a>
             </div>
-            <button type="button" class="close" data-dismiss="alert" aria-label="Close"> &#215; </button>
+            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
         </div>
     </template>
 
@@ -122,7 +122,7 @@
                                         type="text" placeholder="e.g. 4812"
                                         autocomplete="off"
                                         t-attf-value="{{session_code if session_code else ''}}"
-                                        class="form-control o_survey_question_text_box font-weight-bold bg-transparent text-primary text-center rounded-0 p-2 w-100"/>
+                                        class="form-control o_survey_question_text_box fw-bold bg-transparent text-primary text-center rounded-0 p-2 w-100"/>
                                 </div>
                                 <div class="col-12 col-md-4 offset-md-4 text-center o_survey_error text-danger h4 pt-2 px-0" role="alert">
                                     <span t-attf-class="o_survey_session_error_invalid_code {{'d-none' if error != 'survey_wrong' else ''}}">Oops! No survey matches this code.</span>
@@ -145,14 +145,14 @@
             <button
                 t-if="survey and survey.users_can_go_back"
                 t-att-disabled="not can_go_back"
-                type="submit" class="btn border-left p-0 shadow-none o_survey_navigation_submit" name="button_submit" value="previous" t-att-data-previous-page-id="previous_page_id">
+                type="submit" class="btn border-start p-0 shadow-none o_survey_navigation_submit" name="button_submit" value="previous" t-att-data-previous-page-id="previous_page_id">
                 <i class="fa fa-chevron-left p-2" />
             </button>
             <t t-set="can_go_forward"
                 t-value="survey and survey.questions_layout in ['page_per_question', 'page_per_section'] and answer and answer.state != 'done' and not answer.is_session_answer"/>
             <button
                 t-att-disabled="not can_go_forward"
-                type="submit" class="btn border-left p-0 shadow-none o_survey_navigation_submit" t-att-value="'next' if not survey_last else 'finish'">
+                type="submit" class="btn border-start p-0 shadow-none o_survey_navigation_submit" t-att-value="'next' if not survey_last else 'finish'">
                 <i class="fa fa-chevron-right p-2" />
             </button>
         </div>
diff --git a/addons/survey/views/survey_templates_print.xml b/addons/survey/views/survey_templates_print.xml
index 8611e088c28..850beccfd3f 100644
--- a/addons/survey/views/survey_templates_print.xml
+++ b/addons/survey/views/survey_templates_print.xml
@@ -32,7 +32,7 @@
                                         <h2>
                                             <span t-field='question.title'/>
                                             <span t-if="question.constr_mandatory" class="text-danger">*</span>
-                                            <span t-if="scoring_display_correction" class="badge badge-pill" t-att-data-score-question="question.id"></span>
+                                            <span t-if="scoring_display_correction" class="badge rounded-pill" t-att-data-score-question="question.id"></span>
                                         </h2>
                                         <div class="text-muted oe_no_empty mt-1" t-if="not is_html_empty(question.description)" t-field='question.description'/>
                                         <t t-if="question.question_type in ['numerical_box', 'date', 'datetime', 'text_box', 'char_box']">
@@ -40,16 +40,16 @@
                                                 <t t-set="answer_line" t-value="answer_lines[0]"/>
                                                 <t t-if="answer_line.skipped">
                                                     <!-- question was skipped, display an orange block with the text "Skipped" in place of the answer -->
-                                                    <div class="row no-gutters">
-                                                        <div class="col-12 col-md-6 col-lg-4 rounded pl-4 o_survey_question_skipped">
+                                                    <div class="row g-0">
+                                                        <div class="col-12 col-md-6 col-lg-4 rounded ps-4 o_survey_question_skipped">
                                                             <input type="text"
-                                                                t-attf-class="form-control font-italic o_survey_question_{{question.question_type}} bg-transparent rounded-0 p-0" value="Skipped"/>
+                                                                t-attf-class="form-control fst-italic o_survey_question_{{question.question_type}} bg-transparent rounded-0 p-0" value="Skipped"/>
                                                         </div>
                                                     </div>
                                                 </t>
                                                 <t t-elif="answer_line.survey_id.scoring_type != 'no_scoring' and question.question_type in ['numerical_box', 'date', 'datetime'] and question['answer_%s' % question.question_type]">
-                                                    <div class="row no-gutters">
-                                                        <div t-attf-class="col-12 col-md-6 col-lg-4 rounded pl-4 #{'bg-success' if answer_line.answer_is_correct else 'bg-danger'}">
+                                                    <div class="row g-0">
+                                                        <div t-attf-class="col-12 col-md-6 col-lg-4 rounded ps-4 #{'bg-success' if answer_line.answer_is_correct else 'bg-danger'}">
                                                             <t t-if="question.question_type == 'numerical_box'" t-call="survey.question_numerical_box"/>
                                                             <t t-if="question.question_type == 'date'" t-call="survey.question_date"/>
                                                             <t t-if="question.question_type == 'datetime'" t-call="survey.question_datetime"/>
@@ -67,7 +67,7 @@
                                                     and question.question_type in ['numerical_box', 'date', 'datetime']
                                                     and question['answer_%s' % question.question_type]
                                                     and not answer_line.answer_is_correct">
-                                                    <div class="row no-gutters">
+                                                    <div class="row g-0">
                                                         <t t-set="correct_answer" t-value="question['answer_%s' % question.question_type ]"/>
                                                         <div class="col-12 text-success mt-1">
                                                             The correct answer was:
@@ -92,7 +92,7 @@
                                         <t t-if="question.question_type in ['simple_choice', 'multiple_choice','matrix']">
                                             <t t-if="answer_lines">
                                                 <t t-if="answer_lines[0].skipped">
-                                                    <div class="row no-gutters">
+                                                    <div class="row g-0">
                                                         <div class="col-12 o_survey_choice_question_skipped mt-1">
                                                             This question was skipped
                                                         </div>
diff --git a/addons/survey/views/survey_templates_statistics.xml b/addons/survey/views/survey_templates_statistics.xml
index b12e227449b..240d6265aeb 100644
--- a/addons/survey/views/survey_templates_statistics.xml
+++ b/addons/survey/views/survey_templates_statistics.xml
@@ -17,7 +17,7 @@
             <h1>
                 <span t-field="survey.title"/>
                 <span style="font-size:1.5em;"
-                    t-attf-class="fa fa-bar-chart-o #{'fa-bar-chart-o' if survey.scoring_type == 'no_scoring' else 'fa-trophy' if survey.certification else 'fa-question-circle-o'} float-right " role="img" aria-label="Chart" title="Chart"/>
+                    t-attf-class="fa fa-bar-chart-o #{'fa-bar-chart-o' if survey.scoring_type == 'no_scoring' else 'fa-trophy' if survey.certification else 'fa-question-circle-o'} float-end " role="img" aria-label="Chart" title="Chart"/>
             </h1>
             <div t-field="survey.description" class="oe_no_empty"/>
             <h2 t-if="not question_and_page_data">
@@ -36,7 +36,7 @@
         </div>
         <div t-if="survey.scoring_type in ['scoring_with_answers', 'scoring_without_answers']">
             <h2 class="mt16 text-uppercase text-muted">Results Overview</h2>
-            <div>Success rate: <span class="font-weight-bold"><t t-call="survey.survey_remove_unnecessary_decimals">
+            <div>Success rate: <span class="fw-bold"><t t-call="survey.survey_remove_unnecessary_decimals">
                 <t t-set="value_to_format" t-value="survey_data['global_success_rate']"/></t>%</span></div>
             <div class="survey_graph" data-graph-type="pie" t-att-data-graph-data="survey_data['global_success_graph']">
                 <!-- canvas element for drawing pie chart -->
@@ -52,7 +52,7 @@
                 <div t-field="question.description" class="oe_no_empty" />
                 <hr class="mt-2 mb-2"/>
             </t>
-            <div t-else="" class="ml-4 mt-5">
+            <div t-else="" class="ms-4 mt-5">
                 <t t-call="survey.survey_page_statistics_question" />
             </div>
         </div>
@@ -66,35 +66,35 @@
         <div class="o_survey_results_question pb-5 border-bottom">
         <div class="row mb-3">
             <div class="col-sm-6">
-                <h5 t-field="question.title" class="mr-3"/>
+                <h5 t-field="question.title" class="me-3"/>
             </div>
             <!-- Question info -->
             <div class="col-sm-6">
-                <span class="badge badge-info mr-1" t-field='question.question_type'/>
+                <span class="badge text-bg-info me-1" t-field='question.question_type'/>
                 <t t-if="question.question_type == 'matrix'">
-                    <span class="badge badge-info ml-1" t-field='question.matrix_subtype'/>
+                    <span class="badge text-bg-info ms-1" t-field='question.matrix_subtype'/>
                 </t>
                 <!-- Scoring info -->
                 <t t-if="question.question_type in ['numerical_box', 'date', 'datetime']">
-                    <span class="badge badge-success mr-1"><span t-esc="question_data['right_inputs_count']" class="mr-1"/>Correct</span>
+                    <span class="badge text-bg-success me-1"><span t-esc="question_data['right_inputs_count']" class="me-1"/>Correct</span>
                     <t t-if="question.question_type in ['simple_choice', 'multiple_choice']">
-                        <span class="badge badge-warning mr-1" t-if="question.question_type == 'multiple_choice'">
-                            <span t-esc="question_data['partial_inputs_count']" class="mr-1"/>Partial
+                        <span class="badge text-bg-warning me-1" t-if="question.question_type == 'multiple_choice'">
+                            <span t-esc="question_data['partial_inputs_count']" class="me-1"/>Partial
                         </span>
                     </t>
                 </t>
                 <!-- Inputs info -->
-                <span class="badge badge-info mr-1">
-                    <span t-esc="len(question_data['answer_input_done_ids'])" class="mr-1"/>Answered
+                <span class="badge text-bg-info me-1">
+                    <span t-esc="len(question_data['answer_input_done_ids'])" class="me-1"/>Answered
                 </span>
-                <span class="badge badge-info mr-1">
-                    <span t-esc="len(question_data['answer_input_skipped_ids'])" class="mr-1"/>Skipped
+                <span class="badge text-bg-info me-1">
+                    <span t-esc="len(question_data['answer_input_skipped_ids'])" class="me-1"/>Skipped
                 </span>
             </div>
         </div>
 
         <!-- Question Description -->
-        <div class="ml-3 text-muted" t-field="question.description"/>
+        <div class="ms-3 text-muted" t-field="question.description"/>
 
         <!-- Answers -->
         <t t-set="question_answered" t-value="question_data['answer_input_done_ids']"/>
@@ -116,10 +116,10 @@
     <template id="survey_results_filters" name="Survey: Filter results">
         <t t-set="search_passed_or_failed" t-value="search_failed or search_passed"/>
         <div class="card-header">
-            <span class="fa fa-filter mr-1"/>Filters
+            <span class="fa fa-filter me-1"/>Filters
             <span t-if="search_filters or search_finished or search_passed_or_failed"
-                  class="o_survey_results_topbar_clear_filters text-primary ml-4">
-                <i class="fa fa-trash mr-1"/>Remove all filters
+                  class="o_survey_results_topbar_clear_filters text-primary ms-4">
+                <i class="fa fa-trash me-1"/>Remove all filters
             </span>
         </div>
         <div class="question_and_page_data o_survey_result p-0">
@@ -127,8 +127,8 @@
                 <div t-if="question_and_page_data" class="justify-content-between w-100">
                     <ul class="nav o_survey_results_topbar_dropdown_filters">
                         <t t-set="dropdown_item_classes">dropdown-item d-flex align-items-center justify-content-between</t>
-                        <li class="nav-item dropdown mr-2 my-1">
-                            <a href="#" role="button" data-toggle="dropdown"
+                        <li class="nav-item dropdown me-2 my-1">
+                            <a href="#" role="button" data-bs-toggle="dropdown"
                                t-attf-class="btn btn-outline-primary dropdown-toggle #{'active' if search_finished else ''}">
                                 <span t-if="search_finished">Completed surveys</span>
                                 <span t-else="">All surveys</span>
@@ -136,16 +136,16 @@
                             <div class="dropdown-menu">
                                 <a t-attf-class="#{dropdown_item_classes} filter-finished-or-not #{'active' if not search_finished else ''}">
                                     <span>All surveys</span>
-                                    <span t-if="not search_finished" t-esc="survey_data['count_all']" class="badge badge-pill badge-primary ml-3"/>
+                                    <span t-if="not search_finished" t-esc="survey_data['count_all']" class="badge rounded-pill text-bg-primary ms-3"/>
                                 </a>
                                 <a t-attf-class="#{dropdown_item_classes} filter-finished #{'active' if search_finished else ''}">
                                     <span>Completed surveys</span>
-                                    <span t-if="not search_finished" t-esc="survey_data['count_finished']" class="badge badge-pill badge-primary ml-3"/>
+                                    <span t-if="not search_finished" t-esc="survey_data['count_finished']" class="badge rounded-pill text-bg-primary ms-3"/>
                                 </a>
                             </div>
                         </li>
-                        <li t-if="survey.scoring_type != 'no_scoring'" class="nav-item dropdown mr-2 my-1">
-                            <a href="#" role="button" data-toggle="dropdown"
+                        <li t-if="survey.scoring_type != 'no_scoring'" class="nav-item dropdown me-2 my-1">
+                            <a href="#" role="button" data-bs-toggle="dropdown"
                                t-attf-class="btn btn-outline-primary dropdown-toggle #{'active' if search_passed_or_failed else ''}">
                                 <span t-if="search_failed">Failed only</span>
                                 <span t-elif="search_passed">Passed only</span>
@@ -154,22 +154,22 @@
                             <div class="dropdown-menu">
                                 <a t-attf-class="#{dropdown_item_classes} filter-passed-and-failed #{'active' if not search_passed_or_failed else ''}">
                                     <span>Passed and Failed</span>
-                                    <span t-if="not search_passed_or_failed" t-esc="survey_data['count_all']" class="badge badge-pill badge-primary ml-3"/>
+                                    <span t-if="not search_passed_or_failed" t-esc="survey_data['count_all']" class="badge rounded-pill text-bg-primary ms-3"/>
                                 </a>
                                 <a t-attf-class="#{dropdown_item_classes} filter-passed #{'active' if search_passed else ''}">
                                     <span>Passed only</span>
-                                    <span t-if="not search_passed_or_failed" t-esc="survey_data['count_passed']" class="badge badge-pill badge-primary ml-3"/>
+                                    <span t-if="not search_passed_or_failed" t-esc="survey_data['count_passed']" class="badge rounded-pill text-bg-primary ms-3"/>
                                 </a>
                                 <a t-attf-class="#{dropdown_item_classes} filter-failed #{'active' if search_failed else ''}">
                                     <span>Failed only</span>
-                                    <span t-if="not search_passed_or_failed" t-esc="survey_data['count_failed']" class="badge badge-pill badge-primary ml-3"/>
+                                    <span t-if="not search_passed_or_failed" t-esc="survey_data['count_failed']" class="badge rounded-pill text-bg-primary ms-3"/>
                                 </a>
                             </div>
                         </li>
                     </ul>
                     <ul class="nav o_survey_results_topbar_answer_filters mt-2">
                         <t t-if="search_filters">
-                            <li t-foreach="search_filters" t-as="filter_data" class="nav-item mr-2 my-1">
+                            <li t-foreach="search_filters" t-as="filter_data" class="nav-item me-2 my-1">
                                 <span t-attf-class="btn btn-light filter-remove-answer o_cursor_default">
                                     <span t-esc="filter_data['question']"/> | <span t-esc="filter_data['answers']"></span>
                                     <i class="fa fa-times filter-remove-answer text-primary"
@@ -178,7 +178,7 @@
                             </li>
                         </t>
                         <t t-else="">
-                            <p class="my-auto text-muted font-italic">
+                            <p class="my-auto text-muted fst-italic">
                                 <span>Click on the filter icon (<span class="fa fa-filter text-primary"/>)
                                     next to an answer to filter surveys on similar answers only.</span>
                             </p>
@@ -227,18 +227,18 @@
 
     <template id="question_result_number_or_date_or_datetime" name="Question: number or date (and time) result (numerical_box or date or datetime)">
         <t t-if="question.question_type == 'numerical_box'">
-            <span class="float-right mt8">
+            <span class="float-end mt8">
                 <div class="btn-group o_survey_results_question_pill" role="group" aria-label="Maximum">
-                    <span class="badge badge-secondary only_left_radius px-2 pt-1">Maximum </span>
-                    <span class="badge badge-success only_right_radius px-2 pt-1" t-esc="question_data['numerical_max']"></span>
+                    <span class="badge text-bg-secondary only_left_radius px-2 pt-1">Maximum </span>
+                    <span class="badge text-bg-success only_right_radius px-2 pt-1" t-esc="question_data['numerical_max']"></span>
                 </div>
                 <div class="btn-group o_survey_results_question_pill" role="group" aria-label="Minimum">
-                    <span class="badge badge-secondary only_left_radius px-2 pt-1">Minimum </span>
-                    <span class="badge badge-danger only_right_radius px-2 pt-1" t-esc="question_data['numerical_min']"></span>
+                    <span class="badge text-bg-secondary only_left_radius px-2 pt-1">Minimum </span>
+                    <span class="badge text-bg-danger only_right_radius px-2 pt-1" t-esc="question_data['numerical_min']"></span>
                 </div>
                 <div class="btn-group o_survey_results_question_pill" role="group" aria-label="Average">
-                    <span class="badge badge-secondary only_left_radius px-2 pt-1">Average </span>
-                    <span class="badge badge-warning only_right_radius px-2 pt-1" t-esc="question_data['numerical_average']"></span>
+                    <span class="badge text-bg-secondary only_left_radius px-2 pt-1">Average </span>
+                    <span class="badge text-bg-warning only_right_radius px-2 pt-1" t-esc="question_data['numerical_average']"></span>
                 </div>
             </span>
         </t>
@@ -247,15 +247,15 @@
             <li class="nav-item">
                 <a t-att-href="'#survey_stats_question_%d' % question.id"
                     t-att-aria-controls="'survey_stats_question_%d' % question.id"
-                    class="nav-link active" data-toggle="tab" role="tab">
-                    <i class="fa fa-list-ol mr-1"/>Most Common
+                    class="nav-link active" data-bs-toggle="tab" role="tab">
+                    <i class="fa fa-list-ol me-1"/>Most Common
                 </a>
             </li>
             <li class="nav-item">
                 <a t-att-href="'#survey_data_question_%d' % question.id"
                     t-att-aria-controls="'survey_data_question_%d' % question.id"
-                    class="nav-link" data-toggle="tab" role="tab">
-                    <i class="fa fa-list-alt mr-1"/>All Data
+                    class="nav-link" data-bs-toggle="tab" role="tab">
+                    <i class="fa fa-list-alt me-1"/>All Data
                 </a>
             </li>
         </ul>
@@ -340,7 +340,7 @@
             <li t-if="question_answered" class="nav-item">
                 <a t-att-href="'#survey_graph_question_%d' % question.id"
                     t-att-aria-controls="'survey_graph_question_%d' % question.id"
-                    class="nav-link active" data-toggle="tab" role="tab">
+                    class="nav-link active" data-bs-toggle="tab" role="tab">
                     <i class="fa fa-bar-chart-o"></i>
                     <span t-if="question.question_type == 'simple_choice'">Pie Graph</span>
                     <span t-else="">Graph</span>
@@ -350,8 +350,8 @@
                 <a t-att-href="'#survey_data_question_%d' % question.id"
                    t-att-aria-controls="'survey_data_question_%d' % question.id"
                    t-attf-class="nav-link #{'active' if not question_answered else ''}"
-                   data-toggle="tab" role="tab">
-                    <i class="fa fa-list-alt mr-1"/>Data
+                   data-bs-toggle="tab" role="tab">
+                    <i class="fa fa-list-alt me-1"/>Data
                 </a>
             </li>
         </ul>
@@ -388,7 +388,7 @@
                             </td>
                             <td class="o_survey_answer">
                                 <span t-esc="round(choice_data['count'] * 100.0/ (len(question_data['answer_line_done_ids']) or 1), 2)"></span> %
-                                <span t-esc="'%s Votes' % choice_data['count']" class="badge badge-primary"/>
+                                <span t-esc="'%s Votes' % choice_data['count']" class="badge text-bg-primary"/>
                                 <i t-if="choice_data['suggested_answer'].id and choice_data['count']"
                                     class="fa fa-filter text-primary filter-add-answer"
                                     t-att-data-question-id="question.id"
@@ -413,15 +413,15 @@
             <li t-if="question_answered" class="nav-item active" >
                 <a t-att-href="'#survey_graph_question_%d' % question.id"
                     t-att-aria-controls="'survey_graph_question_%d' % question.id"
-                    class="nav-link active" data-toggle="tab" role="tab">
-                    <i class="fa fa-bar-chart mr-1"/>Graph
+                    class="nav-link active" data-bs-toggle="tab" role="tab">
+                    <i class="fa fa-bar-chart me-1"/>Graph
                 </a>
             </li>
             <li class="nav-item">
                 <a t-att-href="'#survey_data_question_%d' % question.id"
                     t-att-aria-controls="'survey_data_question_%d' % question.id"
-                    t-attf-class="nav-link #{'active' if not question_answered else ''}" data-toggle="tab" role="tab">
-                    <i class="fa fa-list-alt mr-1"/>Data
+                    t-attf-class="nav-link #{'active' if not question_answered else ''}" data-bs-toggle="tab" role="tab">
+                    <i class="fa fa-list-alt me-1"/>Data
                 </a>
             </li>
         </ul>
@@ -435,11 +435,11 @@
                 <canvas/>
             </div>
             <div role="tabpanel" t-attf-class="tab-pane #{'active' if not question_answered else ''}" t-att-id="'survey_data_question_%d' % question.id">
-                <table class="table table-hover table-sm text-right">
+                <table class="table table-hover table-sm text-end">
                     <thead t-if="table_data">
                         <tr>
                             <th></th>
-                            <th class="text-right" t-foreach="table_data[0]['columns']" t-as="column_data">
+                            <th class="text-end" t-foreach="table_data[0]['columns']" t-as="column_data">
                                 <span t-esc="column_data['suggested_answer'].value"></span>
                             </th>
                         </tr>
@@ -451,7 +451,7 @@
                             </td>
                             <td class="o_survey_answer" t-foreach="choice_data['columns']" t-as="column_data">
                                 <span t-esc="round(column_data['count'] * 100.0/ (len(question_data['answer_input_done_ids']) or 1), 2)"></span> %
-                                <span class="badge badge-primary" t-esc="column_data['count']"></span>
+                                <span class="badge text-bg-primary" t-esc="column_data['count']"></span>
                                 <i t-if="column_data['count']" class="fa fa-filter text-primary filter-add-answer"
                                    t-att-data-question-id="question.id"
                                    t-att-data-row-id="choice_data['row'].id"
diff --git a/addons/survey/views/survey_templates_user_input_session.xml b/addons/survey/views/survey_templates_user_input_session.xml
index 30a4ce51ca0..1a9334eeb91 100644
--- a/addons/survey/views/survey_templates_user_input_session.xml
+++ b/addons/survey/views/survey_templates_user_input_session.xml
@@ -37,16 +37,16 @@
                 <div class="w-75 p-4">
                     <div class="text-center">
                         <h1 class="mb-4" t-field="survey.title" />
-                        <h2 class="mb-5 font-weight-normal">
+                        <h2 class="mb-5 fw-normal">
                             <span class="text-break">To join: <span class="text-info o_survey_session_copy" t-esc="survey.session_link"/></span>
                             <input class="o_survey_session_copy_url d-none" type="text" t-att-value="survey.session_link" />
                         </h2>
-                        <h2 class="font-weight-normal"><span>Waiting for attendees...</span>
-                            <span class="ml-1 font-weight-bold o_survey_session_attendees_count" t-esc="survey.session_answer_count" />
+                        <h2 class="fw-normal"><span>Waiting for attendees...</span>
+                            <span class="ms-1 fw-bold o_survey_session_attendees_count" t-esc="survey.session_answer_count" />
                         </h2>
                     </div>
                     <a role="button"
-                        class="font-weight-bold fa fa-chevron-right o_survey_session_navigation o_survey_session_navigation_next p-3" />
+                        class="fw-bold fa fa-chevron-right o_survey_session_navigation o_survey_session_navigation_next p-3" />
                 </div>
             </div>
         </t>
@@ -92,10 +92,10 @@
                 <h1 t-if="question.is_time_limited" class="o_survey_timer_container">
                     <span class="o_survey_timer d-inline-block"/>
                 </h1>
-                <div class="text-right d-flex flex-column justify-content-center">
+                <div class="text-end d-flex flex-column justify-content-center">
                     <div t-if="show_bar_chart or show_text_answers">
                         <div class="progress" title="Attendees are answering the question...">
-                            <div class="progress-bar o_survey_session_progress_small font-weight-bold"
+                            <div class="progress-bar o_survey_session_progress_small fw-bold"
                                  style="overflow: visible" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
                                 <span class="px-2">0 / <t t-esc="survey.session_answer_count" /></span>
                             </div>
@@ -109,9 +109,9 @@
                     <div t-field="survey.description_done"/>
                 </div>
                 <a role="button"
-                    class="font-weight-bold fa fa-chevron-right o_survey_session_navigation o_survey_session_navigation_next p-3" />
+                    class="fw-bold fa fa-chevron-right o_survey_session_navigation o_survey_session_navigation_next p-3" />
                 <a role="button"
-                    class="font-weight-bold fa fa-chevron-left o_survey_session_navigation o_survey_session_navigation_previous p-3" />
+                    class="fw-bold fa fa-chevron-left o_survey_session_navigation o_survey_session_navigation_previous p-3" />
                 <div class="o_survey_session_results flex-column flex-grow-1 mx-5">
                     <div class="row">
                         <div class="col-lg-12"><h1 t-esc="question.title"></h1></div>
@@ -127,7 +127,7 @@
                         </div>
                         <div t-elif="question.is_page and not is_html_empty(question.description)" class="mb-6 o_survey_manage_fontsize_14" t-field="question.description" />
                         <div t-else="" class="mb-6">
-                            <h2 class="font-weight-normal mb-3">
+                            <h2 class="fw-normal mb-3">
                                 <span>Waiting for attendees...</span>
                                 <span>
                                     <span class="o_survey_session_answer_count">0</span>
@@ -136,7 +136,7 @@
                                 </span>
                             </h2>
                             <div class="progress">
-                                <div class="progress-bar font-weight-bold" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
+                                <div class="progress-bar fw-bold" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                             </div>
                             <fieldset disabled="disabled" class="mt-5" t-if="question.question_type == 'matrix'" t-call="survey.question_container">
                                 <t t-set="hide_question_title" t-value="true" />
@@ -154,8 +154,8 @@
                             <span t-if="is_last_question">Final Leaderboard</span>
                             <span t-else="">Leaderboard</span>
                         </h1>
-                        <div t-att-class="'o_survey_leaderboard_buttons font-weight-bold %s' % 'd-none' if not is_last_question else ''">
-                            <a href="#" role="button" class="o_survey_session_close btn btn-primary mr-4"><i class="fa fa-close"/> Close</a>
+                        <div t-att-class="'o_survey_leaderboard_buttons fw-bold %s' % 'd-none' if not is_last_question else ''">
+                            <a href="#" role="button" class="o_survey_session_close btn btn-primary me-4"><i class="fa fa-close"/> Close</a>
                             <a href="#" role="button" class="o_survey_session_close btn btn-primary" t-att-data-show-results="True"><i class="fa fa-bar-chart"/> Results</a>
                         </div>
                     </div>
@@ -170,7 +170,7 @@
             <t t-set="max_score" t-value="max(score.get('scoring_total', 1) for score in leaderboard) or 1" />
             <t t-set="max_updated_score" t-value="max(score.get('updated_score', 1) for score in leaderboard)" />
             <t t-foreach="leaderboard" t-as="score">
-                <div class="o_survey_session_leaderboard_item ml-2 d-flex position-absolute"
+                <div class="o_survey_session_leaderboard_item ms-2 d-flex position-absolute"
                     t-attf-style="top: calc(#{score_index} * 3.8rem);"
                     t-att-data-current-position="str(score_index)"
                     t-att-data-new-position="str(score.get('leaderboard_position', score_index))"
@@ -179,18 +179,18 @@
                     t-att-data-updated-score="str(round(score.get('updated_score', 0)))"
                     t-att-data-max-question-score="round(score.get('max_question_score', 1))"
                     t-att-data-max-updated-score="round(max_updated_score)">
-                    <div class="d-inline-block font-weight-bold align-top">
-                        <div class="d-inline-block mr-2 o_survey_session_leaderboard_score" t-esc="'%.0f p' % score['scoring_total']" />
+                    <div class="d-inline-block fw-bold align-top">
+                        <div class="d-inline-block me-2 o_survey_session_leaderboard_score" t-esc="'%.0f p' % score['scoring_total']" />
                     </div>
                     <!-- We keep "18rem" of space to display the points / nickname.
                     Then, the length of the bar is a percentage of the attendee's score compared to the max_score. -->
                     <t t-set="width_ratio" t-value="round(round(score['scoring_total']) / round(max_score), 3)"/>
                     <t t-set="width_ratio_question" t-value="str(round(round(score.get('question_score', 0)) / round(score.get('max_question_score', 1)), 3))"/>
-                    <div class="o_survey_session_leaderboard_bar ml-2 align-top d-inline-block text-right font-weight-bold"
+                    <div class="o_survey_session_leaderboard_bar ms-2 align-top d-inline-block text-end fw-bold"
                         t-att-style="'width: calc(calc(%s - 18rem) * %s)' % ('100%', width_ratio)"
                         t-att-data-width-ratio="width_ratio">
                     </div>
-                    <div class="o_survey_session_leaderboard_bar_question mr-2 align-top d-inline-block text-right font-weight-bold position-relative"
+                    <div class="o_survey_session_leaderboard_bar_question me-2 align-top d-inline-block text-end fw-bold position-relative"
                         style="width: 0px;"
                         t-att-data-width-ratio="width_ratio_question"
                         t-att-data-max-question-score="str(score.get('max_question_score', 1))"
diff --git a/addons/test_mail/static/tests/activity_tests.js b/addons/test_mail/static/tests/activity_tests.js
index b6c07b1b96f..8e37788b5d9 100644
--- a/addons/test_mail/static/tests/activity_tests.js
+++ b/addons/test_mail/static/tests/activity_tests.js
@@ -118,13 +118,13 @@ QUnit.test('activity view: simple activity rendering', async function (assert) {
     var $th1 = $activity.find('table thead tr:first th:nth-child(2)');
     assert.containsOnce($th1, 'span:first:contains(Email)', 'should contain "Email" in header of first column');
     assert.containsOnce($th1, '.o_legacy_kanban_counter', 'should contain a progressbar in header of first column');
-    assert.hasAttrValue($th1.find('.o_kanban_counter_progress .progress-bar:first'), 'data-original-title', '1 Planned',
+    assert.hasAttrValue($th1.find('.o_kanban_counter_progress .progress-bar:first'), 'data-bs-original-title', '1 Planned',
         'the counter progressbars should be correctly displayed');
-    assert.hasAttrValue($th1.find('.o_kanban_counter_progress .progress-bar:nth-child(2)'), 'data-original-title', '1 Today',
+    assert.hasAttrValue($th1.find('.o_kanban_counter_progress .progress-bar:nth-child(2)'), 'data-bs-original-title', '1 Today',
         'the counter progressbars should be correctly displayed');
     var $th2 = $activity.find('table thead tr:first th:nth-child(3)');
     assert.containsOnce($th2, 'span:first:contains(Call)', 'should contain "Call" in header of second column');
-    assert.hasAttrValue($th2.find('.o_kanban_counter_progress .progress-bar:nth-child(3)'), 'data-original-title', '1 Overdue',
+    assert.hasAttrValue($th2.find('.o_kanban_counter_progress .progress-bar:nth-child(3)'), 'data-bs-original-title', '1 Overdue',
         'the counter progressbars should be correctly displayed');
     assert.containsNone($activity, 'table thead tr:first th:nth-child(4) .o_kanban_counter',
         'should not contain a progressbar in header of 3rd column');
diff --git a/addons/test_mail/static/tests/tracking_value_tests.js b/addons/test_mail/static/tests/tracking_value_tests.js
index 68b9ab5ac35..a69bcc30ee9 100644
--- a/addons/test_mail/static/tests/tracking_value_tests.js
+++ b/addons/test_mail/static/tests/tracking_value_tests.js
@@ -210,7 +210,7 @@ QUnit.test('rendering of tracked field of type boolean: from true to false', asy
     const mailTestTrackAllId1 = pyEnv['mail.test.track.all'].create({ boolean_field: true });
     const { click } = await this.start({ res_id: mailTestTrackAllId1 });
 
-    document.querySelector('.custom-checkbox input').click();
+    document.querySelector('.form-check input').click();
     await click('.o_form_button_save');
     assert.strictEqual(
         document.querySelector('.o_TrackingValue').textContent,
@@ -226,7 +226,7 @@ QUnit.test('rendering of tracked field of type boolean: from false to true', asy
     const mailTestTrackAllId1 = pyEnv['mail.test.track.all'].create({});
     const { click } = await this.start({ res_id: mailTestTrackAllId1 });
 
-    document.querySelector('.custom-checkbox input').click();
+    document.querySelector('.form-check input').click();
     await click('.o_form_button_save');
     assert.strictEqual(
         document.querySelector('.o_TrackingValue').textContent,
diff --git a/addons/test_website_slides_full/tests/tours/slides_certification_member.js b/addons/test_website_slides_full/tests/tours/slides_certification_member.js
index 65f19c0f066..db1a1ac645f 100644
--- a/addons/test_website_slides_full/tests/tours/slides_certification_member.js
+++ b/addons/test_website_slides_full/tests/tours/slides_certification_member.js
@@ -129,7 +129,7 @@ var certificationCompletionSteps = [{
     trigger: '.nav-link:contains("Courses")'
 }, {
     content: 'eLearning: course should be completed',
-    trigger: '.o_wslides_course_card:contains("DIY Furniture") .badge-pill:contains("Completed")',
+    trigger: '.o_wslides_course_card:contains("DIY Furniture") .rounded-pill:contains("Completed")',
     run: function () {}
 }];
 
diff --git a/addons/utm/views/utm_campaign_views.xml b/addons/utm/views/utm_campaign_views.xml
index 33a2b6e4a5b..2f7c9bb4983 100644
--- a/addons/utm/views/utm_campaign_views.xml
+++ b/addons/utm/views/utm_campaign_views.xml
@@ -85,7 +85,7 @@
                     <t t-name="kanban-box">
                         <div t-attf-class="oe_kanban_color_#{kanban_getcolor(record.color.raw_value)} oe_kanban_card oe_kanban_global_click">
                             <div class="o_dropdown_kanban dropdown">
-                                <a role="button" class="dropdown-toggle o-no-caret btn" data-toggle="dropdown" href="#" aria-label="Dropdown menu" title="Dropdown menu">
+                                <a role="button" class="dropdown-toggle o-no-caret btn" data-bs-toggle="dropdown" href="#" aria-label="Dropdown menu" title="Dropdown menu">
                                     <span class="fa fa-ellipsis-v"/>
                                 </a>
                                 <div class="dropdown-menu" role="menu">
diff --git a/addons/web/static/src/core/checkbox/checkbox.scss b/addons/web/static/src/core/checkbox/checkbox.scss
index a58855ec3ee..57880fdf50f 100644
--- a/addons/web/static/src/core/checkbox/checkbox.scss
+++ b/addons/web/static/src/core/checkbox/checkbox.scss
@@ -1,13 +1,13 @@
 // = Checkbox
 // ============================================================================
 
-.custom-control.custom-checkbox .custom-control-input {
+.custom-control.form-check .form-check-input {
   &:disabled {
-    ~ .custom-control-label {
+    ~ .form-check-label {
       cursor: not-allowed;
     }
 
-    &:checked ~ .custom-control-label:after {
+    &:checked ~ .form-check-label:after {
       // Use odoo custom muted icon
       background-image: $o-custom-checkbox-indicator-icon-checked-disabled;
     }
diff --git a/addons/web/static/src/core/checkbox/checkbox.xml b/addons/web/static/src/core/checkbox/checkbox.xml
index 0e8f51034e6..b60d55f6c3e 100644
--- a/addons/web/static/src/core/checkbox/checkbox.xml
+++ b/addons/web/static/src/core/checkbox/checkbox.xml
@@ -2,17 +2,17 @@
 <templates xml:space="preserve">
 
 <t t-name="web.CheckBox" owl="1">
-    <div class="custom-control custom-checkbox" t-att-class="props.className" t-on-click.stop="onClick" t-ref="root">
+    <div class="custom-control form-check" t-att-class="props.className" t-on-click.stop="onClick" t-ref="root">
         <input
             t-att-id="props.id or id"
             type="checkbox"
-            class="custom-control-input"
+            class="form-check-input"
             t-att-disabled="props.disabled"
             t-att-checked="props.value"
             t-att-name="props.name"
             t-on-change="onChange"
         />
-        <label t-att-for="props.id or id" class="custom-control-label">
+        <label t-att-for="props.id or id" class="form-check-label">
             <t t-slot="default"/>
         </label>
     </div>
diff --git a/addons/web/static/src/core/commands/command_palette.xml b/addons/web/static/src/core/commands/command_palette.xml
index a0ad5584102..c7c898a39fd 100644
--- a/addons/web/static/src/core/commands/command_palette.xml
+++ b/addons/web/static/src/core/commands/command_palette.xml
@@ -5,7 +5,7 @@
     <Dialog header="false" footer="false" size="'md'" contentClass="'o_command_palette mt-5'">
       <div t-ref="root">
         <div class="o_command_palette_search input-group mb-2 px-4 py-3 border-bottom">
-          <span t-if="state.namespace !== 'default'" class="o_namespace d-flex align-items-center mr-1" t-out="state.namespace"/>
+          <span t-if="state.namespace !== 'default'" class="o_namespace d-flex align-items-center me-1" t-out="state.namespace"/>
           <input class="form-control border-0 p-0" type="text" data-allow-hotkeys="true" t-att-value="state.searchValue" t-ref="autofocus" t-att-placeholder="state.placeholder" t-on-input="onSearchInput" t-on-keydown="onKeyDown"/>
           <div class="input-group-text border-0 bg-transparent">
               <i t-att-title="state.placeholder" role="img"  t-att-aria-label="state.placeholder" class="oi oi-search"/>
@@ -13,7 +13,7 @@
         </div>
 
         <div t-ref="listbox" class="o_command_palette_listbox position-relative overflow-auto">
-          <div t-if="!state.commands.length" class="o_command_palette_listbox_empty px-4 py-3 font-italic" t-out="state.emptyMessage"/>
+          <div t-if="!state.commands.length" class="o_command_palette_listbox_empty px-4 py-3 fst-italic" t-out="state.emptyMessage"/>
           <t t-if="!isFuzzySearch" t-foreach="commandsByCategory" t-as="category" t-key="category.keyId">
             <div class="o_command_category px-0">
               <t t-foreach="category.commands" t-as="command" t-key="command.keyId">
diff --git a/addons/web/static/src/core/commands/command_service.js b/addons/web/static/src/core/commands/command_service.js
index c2c15b272b0..4cdd831e309 100644
--- a/addons/web/static/src/core/commands/command_service.js
+++ b/addons/web/static/src/core/commands/command_service.js
@@ -47,12 +47,12 @@ class DefaultFooter extends Component {
 }
 DefaultFooter.template = xml`
 <span>
-    <span class="font-weight-bolder text-primary">TIP</span> — search for
+    <span class="fw-bolder text-primary">TIP</span> — search for
     <t t-foreach="elements" t-as="element" t-key="element.namespace">
         <t t-if="!(element_first || element_last)">, </t>
         <t t-if="element_last and !element_first"> and </t>
         <span class="o_namespace btn-link text-primary o_cursor_pointer" t-on-click="() => this.onClick(element.namespace)">
-            <span t-out="element.namespace" class="font-weight-bolder text-primary"/><t t-out="element.name"/>
+            <span t-out="element.namespace" class="fw-bolder text-primary"/><t t-out="element.name"/>
         </span>
     </t>
 </span>
diff --git a/addons/web/static/src/core/commands/default_providers.js b/addons/web/static/src/core/commands/default_providers.js
index 6a7e60b418d..cc980046bd8 100644
--- a/addons/web/static/src/core/commands/default_providers.js
+++ b/addons/web/static/src/core/commands/default_providers.js
@@ -72,7 +72,7 @@ commandProviderRegistry.add("data-hotkeys", {
 
             const description =
                 el.title ||
-                el.dataset.originalTitle || // LEGACY: bootstrap moves title to data-original-title
+                el.dataset.bsOriginalTitle || // LEGACY: bootstrap moves title to data-bs-original-title
                 el.dataset.tooltip ||
                 el.placeholder ||
                 (el.innerText &&
diff --git a/addons/web/static/src/core/debug/profiling/profiling_item.scss b/addons/web/static/src/core/debug/profiling/profiling_item.scss
index b0a28c5ef2d..082afad9ecd 100644
--- a/addons/web/static/src/core/debug/profiling/profiling_item.scss
+++ b/addons/web/static/src/core/debug/profiling/profiling_item.scss
@@ -7,7 +7,7 @@
         cursor: auto;
     }
 
-    .custom-switch {
+    .form-switch {
         cursor: pointer;
     }
 
diff --git a/addons/web/static/src/core/debug/profiling/profiling_item.xml b/addons/web/static/src/core/debug/profiling/profiling_item.xml
index 076a5d74b3b..797d694487a 100644
--- a/addons/web/static/src/core/debug/profiling/profiling_item.xml
+++ b/addons/web/static/src/core/debug/profiling/profiling_item.xml
@@ -5,27 +5,27 @@
         <DropdownItem class="o_debug_profiling_item_wrapper">
             <div class="o_debug_profiling_item d-flex justify-content-between">
                 <div class="align-self-center">
-                    <div t-if="profiling.state.isEnabled" class="alert alert-info py-2 mr-3">Recording...</div>
+                    <div t-if="profiling.state.isEnabled" class="alert alert-info py-2 me-3">Recording...</div>
                     <span class="o_profiling_switch">
-                        <span class="custom-control custom-switch" t-on-click.stop.prevent="() => this.profiling.toggleProfiling()">
-                            <input type="checkbox" class="custom-control-input" id="enable_profiling" t-att-checked="profiling.state.isEnabled"/>
-                            <label class="custom-control-label">Enable profiling</label>
+                        <span class="custom-control form-switch" t-on-click.stop.prevent="() => this.profiling.toggleProfiling()">
+                            <input type="checkbox" class="form-check-input" id="enable_profiling" t-att-checked="profiling.state.isEnabled"/>
+                            <label class="form-check-label">Enable profiling</label>
                         </span>
                     </span>
                     <t t-if="profiling.state.isEnabled">
-                        <span class="o_profiling_switch custom-control custom-switch mt-2" t-on-click.stop.prevent="() => this.profiling.toggleCollector('sql')">
-                            <input type="checkbox" class="custom-control-input" id="profile_sql"
+                        <span class="o_profiling_switch custom-control form-switch mt-2" t-on-click.stop.prevent="() => this.profiling.toggleCollector('sql')">
+                            <input type="checkbox" class="form-check-input" id="profile_sql"
                                 t-att-checked="profiling.isCollectorEnabled('sql')"/>
-                            <label class="custom-control-label" for="profile_sql">Record sql</label>
+                            <label class="form-check-label" for="profile_sql">Record sql</label>
                         </span>
-                        <span class="o_profiling_switch custom-control custom-switch mt-2" t-on-click.stop.prevent="() => this.profiling.toggleCollector('traces_async')">
-                            <input type="checkbox" class="custom-control-input" id="profile_traces_async"
+                        <span class="o_profiling_switch custom-control form-switch mt-2" t-on-click.stop.prevent="() => this.profiling.toggleCollector('traces_async')">
+                            <input type="checkbox" class="form-check-input" id="profile_traces_async"
                                 t-att-checked="profiling.isCollectorEnabled('traces_async')"/>
-                            <label class="custom-control-label" for="profile_traces_async">Record traces</label>
+                            <label class="form-check-label" for="profile_traces_async">Record traces</label>
                         </span>
                         <div t-if="profiling.isCollectorEnabled('traces_async')" class="input-group input-group-sm mt-2" t-on-click.stop.prevent="">
                             <div class="input-group-text">Interval</div>
-                            <select class="profile_param form-control" t-on-change="(ev) => this.changeParam('traces_async_interval', ev)">
+                            <select class="profile_param form-select" t-on-change="(ev) => this.changeParam('traces_async_interval', ev)">
                                 <t t-set="interval" t-value="profiling.state.params.traces_async_interval"/>
                                 <option value="">Default</option>
                                 <option value="0.001" t-att-selected="interval === '0.001'">0.001</option>
@@ -34,15 +34,15 @@
                                 <option value="1" t-att-selected="interval === '1'">1</option>
                             </select>
                         </div>
-                        <span t-if="profiling.isCollectorEnabled('sql') || profiling.isCollectorEnabled('traces_async')" class="o_profiling_switch custom-control custom-switch mt-2" t-on-click.stop.prevent="(ev) => this.toggleParam('execution_context_qweb', ev)">
-                            <input type="checkbox" class="custom-control-input" id="profile_execution_context_qweb"
+                        <span t-if="profiling.isCollectorEnabled('sql') || profiling.isCollectorEnabled('traces_async')" class="o_profiling_switch custom-control form-switch mt-2" t-on-click.stop.prevent="(ev) => this.toggleParam('execution_context_qweb', ev)">
+                            <input type="checkbox" class="form-check-input" id="profile_execution_context_qweb"
                                 t-att-checked="!!profiling.state.params.execution_context_qweb"/>
-                            <label class="custom-control-label" for="profile_execution_context_qweb">Add qweb directive context</label>
+                            <label class="form-check-label" for="profile_execution_context_qweb">Add qweb directive context</label>
                         </span>
-                        <span class="o_profiling_switch custom-control custom-switch mt-2" t-on-click.stop.prevent="() => this.profiling.toggleCollector('qweb')">
-                            <input type="checkbox" class="custom-control-input" id="profile_qweb"
+                        <span class="o_profiling_switch custom-control form-switch mt-2" t-on-click.stop.prevent="() => this.profiling.toggleCollector('qweb')">
+                            <input type="checkbox" class="form-check-input" id="profile_qweb"
                                 t-att-checked="profiling.isCollectorEnabled('qweb')"/>
-                            <label class="custom-control-label" for="profile_qweb">Record qweb</label>
+                            <label class="form-check-label" for="profile_qweb">Record qweb</label>
                         </span>
                     </t>
                 </div>
diff --git a/addons/web/static/src/core/debug/profiling/profiling_qweb.xml b/addons/web/static/src/core/debug/profiling/profiling_qweb.xml
index 918535bbddb..a2cb9b841cd 100644
--- a/addons/web/static/src/core/debug/profiling/profiling_qweb.xml
+++ b/addons/web/static/src/core/debug/profiling/profiling_qweb.xml
@@ -4,7 +4,7 @@
 <t t-name="web.ProfilingQwebView">
     <div class="oe_form_field o_ace_view_editor oe_ace_open o_profiling_qweb_view">
         <div class="o_select_view_profiling">
-            <a role="button" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false" href="#"></a>
+            <a role="button" class="dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" href="#"></a>
             <div class="dropdown-menu" role="menu">
                 <t t-foreach="widget.views" t-as="view">
                     <a role="menuitem" href="#" t-att-data-id="view.id">
diff --git a/addons/web/static/src/core/debug/profiling/profiling_service.js b/addons/web/static/src/core/debug/profiling/profiling_service.js
index ab4a5c7c8c5..76dc3e86793 100644
--- a/addons/web/static/src/core/debug/profiling/profiling_service.js
+++ b/addons/web/static/src/core/debug/profiling/profiling_service.js
@@ -27,7 +27,7 @@ const profilingService = {
                 recordingIcon.classList.add(
                     "o_recording",
                     "badge",
-                    "badge-pill",
+                    "rounded-pill",
                     "d-inline",
                     "p-2",
                     "bg-danger",
diff --git a/addons/web/static/src/core/dialog/dialog.xml b/addons/web/static/src/core/dialog/dialog.xml
index 1dc23ecbe2b..cf6524d12d9 100644
--- a/addons/web/static/src/core/dialog/dialog.xml
+++ b/addons/web/static/src/core/dialog/dialog.xml
@@ -12,7 +12,7 @@
                     <div class="modal-content" t-att-class="props.contentClass">
                         <header t-if="props.header" class="modal-header">
                             <t t-if="isFullscreen">
-                                <button class="btn fa fa-arrow-left" data-dismiss="modal" aria-label="Close" t-on-click="data.close" />
+                                <button class="btn fa fa-arrow-left" data-bs-dismiss="modal" aria-label="Close" t-on-click="data.close" />
                             </t>
                             <h4 class="modal-title text-break">
                                 <t t-esc="props.title"/>
diff --git a/addons/web/static/src/core/domain_selector/fields/domain_selector_field_input_with_tags.xml b/addons/web/static/src/core/domain_selector/fields/domain_selector_field_input_with_tags.xml
index be682f47125..5d4f6c3d706 100644
--- a/addons/web/static/src/core/domain_selector/fields/domain_selector_field_input_with_tags.xml
+++ b/addons/web/static/src/core/domain_selector/fields/domain_selector_field_input_with_tags.xml
@@ -5,7 +5,7 @@
         <div class="o_ds_value_cell">
             <div class="o_domain_leaf_value_input">
                 <t t-foreach="props.value" t-as="tag" t-key="tag_index">
-                    <span class="badge badge-pill">
+                    <span class="badge rounded-pill">
                         <t t-esc="tag" /> <i
                             class="o_domain_leaf_value_remove_tag_button fa fa-times"
                             role="img"
diff --git a/addons/web/static/src/core/dropdown/dropdown.js b/addons/web/static/src/core/dropdown/dropdown.js
index 89ca0425cf6..19c212ba8a3 100644
--- a/addons/web/static/src/core/dropdown/dropdown.js
+++ b/addons/web/static/src/core/dropdown/dropdown.js
@@ -19,8 +19,8 @@ const {
 const DIRECTION_CARET_CLASS = {
     bottom: "dropdown",
     top: "dropup",
-    left: "dropleft",
-    right: "dropright",
+    left: "dropstart",
+    right: "dropend",
 };
 
 export const DROPDOWN = Symbol("Dropdown");
diff --git a/addons/web/static/src/core/dropdown/dropdown.scss b/addons/web/static/src/core/dropdown/dropdown.scss
index 328aff055ac..19f68b203c9 100644
--- a/addons/web/static/src/core/dropdown/dropdown.scss
+++ b/addons/web/static/src/core/dropdown/dropdown.scss
@@ -42,8 +42,8 @@ button.dropdown-toggle {
   /*!rtl:begin:ignore*/
   &.dropup > .o-dropdown--menu,
   &.dropdown > .o-dropdown--menu,
-  &.dropleft > .o-dropdown--menu,
-  &.dropright > .o-dropdown--menu {
+  &.dropstart > .o-dropdown--menu,
+  &.dropend > .o-dropdown--menu {
     // Also makes sure that left/right stuffs are not polluted
     // by bootstrap rules processed by rtlcss
     left: auto;
diff --git a/addons/web/static/src/core/errors/error_dialogs.xml b/addons/web/static/src/core/errors/error_dialogs.xml
index 10f56e06a84..94cac028eb4 100644
--- a/addons/web/static/src/core/errors/error_dialogs.xml
+++ b/addons/web/static/src/core/errors/error_dialogs.xml
@@ -47,7 +47,7 @@
     <t t-name="web.ErrorDialog" owl="1">
       <Dialog contentClass="'o_dialog_error'" title="this.constructor.title">
         <div class="alert alert-warning clearfix" role="alert">
-            <div class="float-right ml8 btn-group-vertical">
+            <div class="float-end ml8 btn-group-vertical">
                 <button class="btn btn-primary" t-on-click="onClickClipboard">
                     <i class="fa fa-clipboard mr8"/><t>Copy the full error to clipboard</t>
                 </button>
diff --git a/addons/web/static/src/core/model_field_selector/model_field_selector_popover.scss b/addons/web/static/src/core/model_field_selector/model_field_selector_popover.scss
index 25fd6916b69..83d0972e3a2 100644
--- a/addons/web/static/src/core/model_field_selector/model_field_selector_popover.scss
+++ b/addons/web/static/src/core/model_field_selector/model_field_selector_popover.scss
@@ -9,7 +9,7 @@
 
     .o_field_selector_popover_header {
         color: white;
-        background: theme-color('primary');
+        background: map-get($theme-colors, 'primary');
         font-weight: bold;
         padding: 5px 0 5px 0.4em;
 
@@ -36,7 +36,7 @@
                 right: 0;
             }
             &:hover {
-                background: darken(theme-color('primary'), 10%);
+                background: darken(map-get($theme-colors, 'primary'), 10%);
             }
         }
     }
@@ -73,7 +73,7 @@
         }
     }
     .o_field_selector_popover_footer {
-        background: theme-color('primary');
+        background: map-get($theme-colors, 'primary');
         padding: 5px 0.4em;
 
         > input {
diff --git a/addons/web/static/src/core/notifications/notification.xml b/addons/web/static/src/core/notifications/notification.xml
index 59ece7b3147..da665ed775c 100644
--- a/addons/web/static/src/core/notifications/notification.xml
+++ b/addons/web/static/src/core/notifications/notification.xml
@@ -4,12 +4,12 @@
     <t t-name="web.NotificationWowl" owl="1">
         <div t-attf-class="o_notification {{props.className}} border border-{{props.type}} bg-white mb-2 position-relative"
          role="alert" aria-live="assertive" aria-atomic="true">
-            <strong t-if="props.title" t-attf-class="o_notification_title d-block text-{{props.type}} py-2 pl-3 pr-5" t-out="props.title"/>
+            <strong t-if="props.title" t-attf-class="o_notification_title d-block text-{{props.type}} py-2 ps-3 pe-5" t-out="props.title"/>
             <button type="button" class="o_notification_close btn" aria-label="Close" t-on-click="props.close">
                 <i class="oi oi-close"/>
             </button>
-            <div t-attf-class="o_notification_body pl-3 pr-5 py-2">
-                <div t-if="props.message" class="mr-auto o_notification_content" t-out="props.message"/>
+            <div t-attf-class="o_notification_body ps-3 pe-5 py-2">
+                <div t-if="props.message" class="me-auto o_notification_content" t-out="props.message"/>
                 <div t-if="props.buttons.length" class="mt-2 o_notification_buttons">
                     <button t-foreach="props.buttons" t-as="button" type="button" t-key="button_index"
                     t-attf-class="btn {{button.primary ? 'btn-primary' : 'btn-link'}}" t-on-click="button.onClick">
diff --git a/addons/web/static/src/core/pager/pager.xml b/addons/web/static/src/core/pager/pager.xml
index 04ce3bd8db6..ae2aa022597 100644
--- a/addons/web/static/src/core/pager/pager.xml
+++ b/addons/web/static/src/core/pager/pager.xml
@@ -5,7 +5,7 @@
         <nav class="o_pager align-items-center d-flex gap-2" aria-label="Pager">
             <span class="o_pager_counter" t-on-click.stop="">
                 <t t-if="state.isEditing">
-                    <input type="text" class="o_pager_value o_input d-inline-block w-auto text-right" size="7" t-ref="autofocus" t-att-value="value" t-on-blur="onInputBlur" t-on-change="onInputChange" t-on-keydown.stop="onInputKeydown" />
+                    <input type="text" class="o_pager_value o_input d-inline-block w-auto text-end" size="7" t-ref="autofocus" t-att-value="value" t-on-blur="onInputBlur" t-on-change="onInputChange" t-on-keydown.stop="onInputKeydown" />
                 </t>
                 <t t-else="">
                     <span class="o_pager_value d-inline-block border-bottom border-white" t-esc="value" t-on-click="onValueClick" />
@@ -15,8 +15,8 @@
             </span>
             <span class="btn-group" aria-atomic="true">
                 <!-- accesskeys not wanted in X2Many widgets -->
-                <button type="button" class="fa fa-chevron-left btn btn-secondary o_pager_previous px-2 rounded-left" aria-label="Previous" data-tooltip="Previous" tabindex="-1" t-att-data-hotkey="props.withAccessKey ? 'p' : false" t-att-disabled="state.isDisabled or isSinglePage" t-on-click.stop="() => this.navigate(-1)" />
-                <button type="button" class="fa fa-chevron-right btn btn-secondary o_pager_next px-2 rounded-right" aria-label="Next" data-tooltip="Next" tabindex="-1" t-att-data-hotkey="props.withAccessKey ? 'n' : false" t-att-disabled="state.isDisabled or isSinglePage" t-on-click.stop="() => this.navigate(1)" />
+                <button type="button" class="fa fa-chevron-left btn btn-secondary o_pager_previous px-2 rounded-start" aria-label="Previous" data-tooltip="Previous" tabindex="-1" t-att-data-hotkey="props.withAccessKey ? 'p' : false" t-att-disabled="state.isDisabled or isSinglePage" t-on-click.stop="() => this.navigate(-1)" />
+                <button type="button" class="fa fa-chevron-right btn btn-secondary o_pager_next px-2 rounded-end" aria-label="Next" data-tooltip="Next" tabindex="-1" t-att-data-hotkey="props.withAccessKey ? 'n' : false" t-att-disabled="state.isDisabled or isSinglePage" t-on-click.stop="() => this.navigate(1)" />
             </span>
         </nav>
     </t>
diff --git a/addons/web/static/src/legacy/js/_deprecated/basic_fields.js b/addons/web/static/src/legacy/js/_deprecated/basic_fields.js
index e55dac67943..eae71a11295 100644
--- a/addons/web/static/src/legacy/js/_deprecated/basic_fields.js
+++ b/addons/web/static/src/legacy/js/_deprecated/basic_fields.js
@@ -43,7 +43,7 @@ var FieldBoolean = AbstractField.extend({
         // the one rendered by the widget itself. Even though the event might
         // have been fired on the non-widget version of this field, we can still
         // test the presence of its custom class.
-        if (activated && options && options.event && $(options.event.target).closest('.custom-checkbox').length) {
+        if (activated && options && options.event && $(options.event.target).closest('.form-check').length) {
             this._setValue(!this.value);  // Toggle the checkbox
         }
         return activated;
@@ -85,7 +85,7 @@ var FieldBoolean = AbstractField.extend({
      */
     setIDForLabel: function (id) {
         this._super.apply(this, arguments);
-        this.$('.custom-control-label').attr('for', id);
+        this.$('.form-check-label').attr('for', id);
     },
 
     //--------------------------------------------------------------------------
diff --git a/addons/web/static/src/legacy/js/core/dom.js b/addons/web/static/src/legacy/js/core/dom.js
index 6ec18ead930..b736f6c1bb8 100644
--- a/addons/web/static/src/legacy/js/core/dom.js
+++ b/addons/web/static/src/legacy/js/core/dom.js
@@ -379,7 +379,7 @@ var dom = {
         $btn.addClass('o_website_btn_loading disabled');
         $btn.prop('disabled', true);
         const $loader = $('<span/>', {
-            class: 'fa fa-refresh fa-spin mr-2',
+            class: 'fa fa-refresh fa-spin me-2',
         });
         $btn.prepend($loader);
         return () => {
diff --git a/addons/web/static/src/legacy/js/core/menu.js b/addons/web/static/src/legacy/js/core/menu.js
index 2cd13365799..3ae0bf757dd 100644
--- a/addons/web/static/src/legacy/js/core/menu.js
+++ b/addons/web/static/src/legacy/js/core/menu.js
@@ -181,7 +181,7 @@ export async function initAutoMoreMenu(el, options) {
             role: 'button',
             href: '#',
             class: 'nav-link dropdown-toggle o-no-caret',
-            'data-toggle': 'dropdown',
+            'data-bs-toggle': 'dropdown',
             'aria-expanded': false,
         }).forEach(([key, value]) => {
             extraItemsToggleLink.setAttribute(key, value);
diff --git a/addons/web/static/src/legacy/js/fields/basic_fields.js b/addons/web/static/src/legacy/js/fields/basic_fields.js
index 4568744346b..62f720fa1c0 100644
--- a/addons/web/static/src/legacy/js/fields/basic_fields.js
+++ b/addons/web/static/src/legacy/js/fields/basic_fields.js
@@ -1162,7 +1162,7 @@ const RemainingDays = AbstractField.extend({
      */
     _renderReadonly() {
         if (this.value === false) {
-            this.$el.removeClass('font-weight-bold text-danger text-warning');
+            this.$el.removeClass('fw-bold text-danger text-warning');
             return;
         }
         // compare the value (in the user timezone) with now (also in the user
@@ -1182,7 +1182,7 @@ const RemainingDays = AbstractField.extend({
             text = diffDays === 1 ? _t("Tomorrow") : _.str.sprintf(_t('In %s days'), diffDays);
         }
         this.$el.text(text).attr('title', this._formatValue(this.value, 'date'));
-        this.$el.toggleClass('font-weight-bold', diffDays <= 0);
+        this.$el.toggleClass('fw-bold', diffDays <= 0);
         this.$el.toggleClass('text-danger', diffDays < 0);
         this.$el.toggleClass('text-warning', diffDays === 0);
     },
@@ -2762,7 +2762,7 @@ var StateSelectionWidget = AbstractField.extend({
      * @override
      */
     getFocusableElement: function () {
-        return this.$("a[data-toggle='dropdown']");
+        return this.$("a[data-bs-toggle='dropdown']");
     },
 
     on_attach_callback() {
@@ -2863,7 +2863,7 @@ var StateSelectionWidget = AbstractField.extend({
 
         // Disable edition if the field is readonly
         var isReadonly = this.record.evalModifiers(this.attrs.modifiers).readonly;
-        this.$('a[data-toggle=dropdown]').toggleClass('disabled', isReadonly || false);
+        this.$('a[data-bs-toggle=dropdown]').toggleClass('disabled', isReadonly || false);
     },
 
     //--------------------------------------------------------------------------
diff --git a/addons/web/static/src/legacy/js/fields/basic_fields_owl.js b/addons/web/static/src/legacy/js/fields/basic_fields_owl.js
index 0249917241c..5122972e5e5 100644
--- a/addons/web/static/src/legacy/js/fields/basic_fields_owl.js
+++ b/addons/web/static/src/legacy/js/fields/basic_fields_owl.js
@@ -70,7 +70,7 @@ odoo.define('web.basic_fields_owl', function (require) {
             // The event might have been fired on the non field version of
             // this field, we can still test the presence of its custom class.
             if (activated && options && options.event && options.event.target
-                .closest('.custom-checkbox')) {
+                .closest('.form-check')) {
                 this._setValue(!this.value);  // Toggle the checkbox
             }
             return activated;
diff --git a/addons/web/static/src/legacy/js/fields/relational_fields.js b/addons/web/static/src/legacy/js/fields/relational_fields.js
index 764f81f066f..ad14a2d237b 100644
--- a/addons/web/static/src/legacy/js/fields/relational_fields.js
+++ b/addons/web/static/src/legacy/js/fields/relational_fields.js
@@ -2950,7 +2950,7 @@ var FormFieldMany2ManyTags = FieldMany2ManyTags.extend({
             }
             this.$color_picker.attr("tabindex", 1).focus();
             if (!tagColor) {
-                this.$('.custom-checkbox input').prop('checked', true);
+                this.$('.form-check input').prop('checked', true);
             }
         }
     },
@@ -2972,7 +2972,7 @@ var FormFieldMany2ManyTags = FieldMany2ManyTags.extend({
         var changes = {};
 
         if ($target.is('.o_hide_in_kanban')) {
-            var $checkbox = $('.o_hide_in_kanban .custom-checkbox input');
+            var $checkbox = $('.o_hide_in_kanban .form-check input');
             $checkbox.prop('checked', !$checkbox.prop('checked')); // toggle checkbox
             this.prevColors = this.prevColors ? this.prevColors : {};
             if ($checkbox.is(':checked')) {
diff --git a/addons/web/static/src/legacy/js/public/public_widget.js b/addons/web/static/src/legacy/js/public/public_widget.js
index 0bc15140570..2d606d73e10 100644
--- a/addons/web/static/src/legacy/js/public/public_widget.js
+++ b/addons/web/static/src/legacy/js/public/public_widget.js
@@ -265,12 +265,12 @@ var registry = {};
 
 /**
  * This is a fix for apple device (<= IPhone 4, IPad 2)
- * Standard bootstrap requires data-toggle='collapse' element to be <a/> tags.
+ * Standard bootstrap requires data-bs-toggle='collapse' element to be <a/> tags.
  * Unfortunatly some layouts use a <div/> tag instead. The fix forces an empty
  * click handler on these div, which allows standard bootstrap to work.
  */
 registry._fixAppleCollapse = PublicWidget.extend({
-    selector: 'div[data-toggle="collapse"]',
+    selector: 'div[data-bs-toggle="collapse"]',
     events: {
         'click': function () {},
     },
diff --git a/addons/web/static/src/legacy/js/views/basic/basic_renderer.js b/addons/web/static/src/legacy/js/views/basic/basic_renderer.js
index ffd0c015455..4ef85615a72 100644
--- a/addons/web/static/src/legacy/js/views/basic/basic_renderer.js
+++ b/addons/web/static/src/legacy/js/views/basic/basic_renderer.js
@@ -448,7 +448,7 @@ var BasicRenderer = AbstractRenderer.extend(WidgetAdapterMixin, {
      */
     _getTooltipOptions: function (widget) {
         return {
-            template: '<div class="tooltip tooltip-field-info" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>',
+            template: '<div class="tooltip tooltip-field-info" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',
             title: function () {
                 let help = widget.attrs.help || widget.field.help || '';
                 if (session.display_switch_company_menu && widget.field.company_dependent) {
diff --git a/addons/web/static/src/legacy/js/views/calendar/calendar_popover.js b/addons/web/static/src/legacy/js/views/calendar/calendar_popover.js
index ac68c2bb746..12dcb016cfe 100644
--- a/addons/web/static/src/legacy/js/views/calendar/calendar_popover.js
+++ b/addons/web/static/src/legacy/js/views/calendar/calendar_popover.js
@@ -217,9 +217,9 @@ var CalendarPopover = Widget.extend(WidgetAdapterMixin, StandaloneFieldManagerMi
                 var $field = $('<li>', {class: fieldClass});
                 let $fieldLabel;
                 if (field.icon) {
-                    $fieldLabel = $('<strong>', {class: 'mr-2', html: _.str.sprintf("<b><i class='%s'/></b>", field.icon)});
+                    $fieldLabel = $('<strong>', {class: 'me-2', html: _.str.sprintf("<b><i class='%s'/></b>", field.icon)});
                 } else {
-                    $fieldLabel = $('<strong>', {class: 'mr-2', text: _.str.sprintf('%s : ', field.string)});
+                    $fieldLabel = $('<strong>', {class: 'me-2', text: _.str.sprintf('%s : ', field.string)});
                 }
                 $fieldLabel.appendTo($field);
                 var $fieldContainer = $('<div>', {class: 'flex-grow-1'});
diff --git a/addons/web/static/src/legacy/js/views/form/form_renderer.js b/addons/web/static/src/legacy/js/views/form/form_renderer.js
index c370e219950..3643d314a11 100644
--- a/addons/web/static/src/legacy/js/views/form/form_renderer.js
+++ b/addons/web/static/src/legacy/js/views/form/form_renderer.js
@@ -19,7 +19,7 @@ var FormRenderer = BasicRenderer.extend({
     events: _.extend({}, BasicRenderer.prototype.events, {
         'click .o_notification_box .oe_field_translate': '_onTranslate',
         'click .o_notification_box .btn-close': '_onTranslateNotificationClose',
-        'shown.bs.tab a[data-toggle="tab"]': '_onNotebookTabChanged',
+        'shown.bs.tab a[data-bs-toggle="tab"]': '_onNotebookTabChanged',
         'click .o_form_label': '_onFieldLabelClicked',
     }),
     custom_events: _.extend({}, BasicRenderer.prototype.custom_events, {
@@ -568,7 +568,7 @@ var FormRenderer = BasicRenderer.extend({
                 $result.append(dom.renderButton({
                     attrs: {
                         'class': 'oe_stat_button o_button_more dropdown-toggle',
-                        'data-toggle': 'dropdown',
+                        'data-bs-toggle': 'dropdown',
                     },
                     text: _t("More"),
                 }));
@@ -875,7 +875,7 @@ var FormRenderer = BasicRenderer.extend({
      */
     _renderTabHeader: function (page, page_id) {
         var $a = $('<a>', {
-            'data-toggle': 'tab',
+            'data-bs-toggle': 'tab',
             disable_anchor: 'true',
             href: '#' + page_id,
             class: 'nav-link',
diff --git a/addons/web/static/src/legacy/js/views/kanban/kanban_column.js b/addons/web/static/src/legacy/js/views/kanban/kanban_column.js
index 140aa2d02e9..aea41348ee9 100644
--- a/addons/web/static/src/legacy/js/views/kanban/kanban_column.js
+++ b/addons/web/static/src/legacy/js/views/kanban/kanban_column.js
@@ -166,7 +166,7 @@ var KanbanColumn = Widget.extend({
 
         this.$el.toggleClass('o_column_folded', !config.device.isMobile && this.folded);
         if (this.tooltipInfo) {
-            this.$header.find('.o_kanban_header_title').tooltip({}).attr('data-original-title', this.tooltipInfo);
+            this.$header.find('.o_kanban_header_title').tooltip({}).attr('data-bs-original-title', this.tooltipInfo);
         }
         if (!this.loadMoreCount) {
             this.$('.o_kanban_load_more').remove();
diff --git a/addons/web/static/src/legacy/js/views/kanban/kanban_column_progressbar.js b/addons/web/static/src/legacy/js/views/kanban/kanban_column_progressbar.js
index 1edcbb94c6e..08d6e087d69 100644
--- a/addons/web/static/src/legacy/js/views/kanban/kanban_column_progressbar.js
+++ b/addons/web/static/src/legacy/js/views/kanban/kanban_column_progressbar.js
@@ -162,7 +162,7 @@ var KanbanColumnProgressBar = Widget.extend({
             } else {
                 value = key;
             }
-            $bar.attr('data-original-title', count + ' ' + value);
+            $bar.attr('data-bs-original-title', count + ' ' + value);
             $bar.tooltip({
                 delay: 0,
                 trigger: 'hover',
diff --git a/addons/web/static/src/legacy/js/views/kanban/kanban_column_quick_create.js b/addons/web/static/src/legacy/js/views/kanban/kanban_column_quick_create.js
index c4795f8fa44..688d4b14b24 100644
--- a/addons/web/static/src/legacy/js/views/kanban/kanban_column_quick_create.js
+++ b/addons/web/static/src/legacy/js/views/kanban/kanban_column_quick_create.js
@@ -190,7 +190,7 @@ var ColumnQuickCreate = Widget.extend({
                 examples: this.examples,
             })),
             buttons: [{
-                classes: 'btn-primary float-right',
+                classes: 'btn-primary float-end',
                 text: this.applyExamplesText,
                 close: true,
                 click: function () {
@@ -200,7 +200,7 @@ var ColumnQuickCreate = Widget.extend({
                     });
                 }
             }, {
-                classes: 'btn-secondary float-right',
+                classes: 'btn-secondary float-end',
                 close: true,
                 text: _t('Close'),
             }],
diff --git a/addons/web/static/src/legacy/js/views/kanban/kanban_record.js b/addons/web/static/src/legacy/js/views/kanban/kanban_record.js
index ec81379104d..2b9c154c0e1 100644
--- a/addons/web/static/src/legacy/js/views/kanban/kanban_record.js
+++ b/addons/web/static/src/legacy/js/views/kanban/kanban_record.js
@@ -564,7 +564,7 @@ var KanbanRecord = Widget.extend(WidgetAdapterMixin, {
     _setFieldDisplay: function ($el, fieldName) {
         // attribute display
         if (this.fieldsInfo[fieldName].display === 'right') {
-            $el.addClass('float-right');
+            $el.addClass('float-end');
         } else if (this.fieldsInfo[fieldName].display === 'full') {
             $el.addClass('o_text_block');
         }
diff --git a/addons/web/static/src/legacy/js/views/list/list_renderer.js b/addons/web/static/src/legacy/js/views/list/list_renderer.js
index cf32bf777f2..e241ce4f42b 100644
--- a/addons/web/static/src/legacy/js/views/list/list_renderer.js
+++ b/addons/web/static/src/legacy/js/views/list/list_renderer.js
@@ -218,9 +218,9 @@ var ListRenderer = BasicRenderer.extend({
             if (DECORATIONS.includes(key)) {
                 let cssClass;
                 if (key === 'decoration-bf') {
-                    cssClass = 'font-weight-bold';
+                    cssClass = 'fw-bold';
                 } else if (key === 'decoration-it') {
-                    cssClass = 'font-italic';
+                    cssClass = 'fst-italic';
                 } else {
                     cssClass = key.replace('decoration', 'text');
                 }
@@ -1013,7 +1013,7 @@ var ListRenderer = BasicRenderer.extend({
             'class': "dropdown-toggle text-dark o-no-caret",
             'href': "#",
             'role': "button",
-            'data-toggle': "dropdown",
+            'data-bs-toggle': "dropdown",
             'data-bs-offset': "0,30",
             'aria-expanded': false,
             'aria-label': _t('Optional columns'),
@@ -1025,7 +1025,7 @@ var ListRenderer = BasicRenderer.extend({
         // We want the dropdown to expand towards the list rather than away from it
         // https://getbootstrap.com/docs/4.0/components/dropdowns/#menu-alignment
         var direction = _t.database.parameters.direction;
-        var dropdownMenuClass = direction === 'rtl' ? 'dropdown-menu-left' : 'dropdown-menu-right';
+        var dropdownMenuClass = direction === 'rtl' ? 'dropdown-menu-start' : 'dropdown-menu-end';
         var $dropdown = $("<div>", {
             class: 'dropdown-menu o_optional_columns_dropdown ' + dropdownMenuClass,
             role: 'menu',
@@ -1164,7 +1164,7 @@ var ListRenderer = BasicRenderer.extend({
      * @param {jQueryElement} $el the element to which to add the classes (a tr
      *   or td)
      * @param {Object} decorations keys are the decoration classes (e.g.
-     *   'font-weight-bold') and values are the python expressions to evaluate
+     *   'fw-bold') and values are the python expressions to evaluate
      * @param {Object} record a basic model record
      */
     _setDecorationClasses: function ($el, decorations, record) {
diff --git a/addons/web/static/src/legacy/js/widgets/data_export.js b/addons/web/static/src/legacy/js/widgets/data_export.js
index 43be144ae65..552c90a133b 100644
--- a/addons/web/static/src/legacy/js/widgets/data_export.js
+++ b/addons/web/static/src/legacy/js/widgets/data_export.js
@@ -105,7 +105,7 @@ var DataExport = Dialog.extend({
                     $label.html(_.str.sprintf("%s — %s", format.label, format.error));
                 }
 
-                $fmts.append($("<div class='radio form-check form-check-inline pl-4'></div>").append($radio, $label));
+                $fmts.append($("<div class='radio form-check form-check-inline ps-4'></div>").append($radio, $label));
             });
 
             self.$exportFormatInputs = $fmts.find('input');
@@ -265,7 +265,7 @@ var DataExport = Dialog.extend({
         this.$records = this.$('.o_export_tree_item');
         this.$records.each(function (i, el) {
             var $el = $(el);
-            $el.find('.o_tree_column').first().toggleClass('o_required font-weight-bolder', !!self.records[$el.data('id')].required);
+            $el.find('.o_tree_column').first().toggleClass('o_required fw-bolder', !!self.records[$el.data('id')].required);
         });
     },
     /**
diff --git a/addons/web/static/src/legacy/js/widgets/name_and_signature.js b/addons/web/static/src/legacy/js/widgets/name_and_signature.js
index 84e4c74085e..ac773b66e57 100644
--- a/addons/web/static/src/legacy/js/widgets/name_and_signature.js
+++ b/addons/web/static/src/legacy/js/widgets/name_and_signature.js
@@ -328,7 +328,7 @@ var NameAndSignature = Widget.extend({
         var name = this.getName();
         var isSignatureEmpty = this.isSignatureEmpty();
         this.$nameInput.parent().toggleClass('o_has_error', !name)
-            .find('.form-control, .custom-select').toggleClass('is-invalid', !name);
+            .find('.form-control, .form-select').toggleClass('is-invalid', !name);
         this.$signatureGroup.toggleClass('border-danger', isSignatureEmpty);
         return name && !isSignatureEmpty;
     },
diff --git a/addons/web/static/src/legacy/scss/attachment_preview.scss b/addons/web/static/src/legacy/scss/attachment_preview.scss
index eca2527f523..1cab191d09c 100644
--- a/addons/web/static/src/legacy/scss/attachment_preview.scss
+++ b/addons/web/static/src/legacy/scss/attachment_preview.scss
@@ -76,7 +76,7 @@ $o-attachment-margin: 5px;
     }
 
     .o_attachment_delete {
-        background: desaturate(theme-color('primary'), 50%);
+        background: desaturate(map-get($theme-colors, 'primary'), 50%);
         color: white;
         cursor: pointer;
         font-size: 20px;
@@ -84,7 +84,7 @@ $o-attachment-margin: 5px;
         transition: all 0.3s ease 0s;
 
         &:hover {
-            background: theme-color('primary');
+            background: map-get($theme-colors, 'primary');
         }
     }
 
diff --git a/addons/web/static/src/legacy/scss/base_settings.scss b/addons/web/static/src/legacy/scss/base_settings.scss
index 711bc770e75..5ac9ca54bba 100644
--- a/addons/web/static/src/legacy/scss/base_settings.scss
+++ b/addons/web/static/src/legacy/scss/base_settings.scss
@@ -43,7 +43,7 @@
 
                 .searchIcon {
                     @include o-position-absolute($right: 0);
-                    color: gray('700');
+                    color: map-get($grays, '700');
                 }
 
                 &:focus-within {
@@ -71,11 +71,11 @@
             display: flex;
             flex: 0 0 auto;
             flex-flow: column nowrap;
-            background: gray('900');
+            background: map-get($grays, '900');
             overflow: auto;
 
             .selected {
-                background-color: gray('800');
+                background-color: map-get($grays, '800');
                 box-shadow: inset 2px 0 0 $o-brand-primary;
             }
 
@@ -83,7 +83,7 @@
                 display: flex;
                 padding: 0 $o-horizontal-padding*2 0 $o-horizontal-padding;
                 height: 40px;
-                color: gray('400');
+                color: map-get($grays, '400');
                 font-size: 13px;
                 line-height: 40px;
                 cursor: pointer;
@@ -111,7 +111,7 @@
                 h2 {
                     margin: 0 0 !important;
                     @include o-base-settings-horizontal-padding(.4rem);
-                    background-color: gray('200');
+                    background-color: map-get($grays, '200');
                     font-size: 15px;
 
                     &.o_invisible_modifier + .o_settings_container {
@@ -138,7 +138,7 @@
                 align-items: center;
                 margin-bottom: 10px;
                 @include o-base-settings-horizontal-padding(.8rem);
-                background-color: gray('200');
+                background-color: map-get($grays, '200');
 
                 .icon {
                     width: 1.4em;
diff --git a/addons/web/static/src/legacy/scss/bootstrap_review.scss b/addons/web/static/src/legacy/scss/bootstrap_review.scss
index 7171da04e5a..e6f5f1f43df 100644
--- a/addons/web/static/src/legacy/scss/bootstrap_review.scss
+++ b/addons/web/static/src/legacy/scss/bootstrap_review.scss
@@ -94,7 +94,7 @@
 .modal-backdrop {
     display: none;
 }
-.modal:not([data-backdrop="false"]) {
+.modal:not([data-bs-backdrop="false"]) {
     background-color: rgba($modal-backdrop-bg, $modal-backdrop-opacity);
 }
 
@@ -178,6 +178,6 @@ $o-navbar-nav-pills-link-border-radius: $nav-pills-border-radius !default;
     }
 }
 
-.carousel-control-next .sr-only {
+.carousel-control-next .visually-hidden {
     left: 50%; // Avoid horizontal scrollbar in Chrome
 }
diff --git a/addons/web/static/src/legacy/scss/color_picker.scss b/addons/web/static/src/legacy/scss/color_picker.scss
index 2ff27c59c7e..b59dfe98b3c 100644
--- a/addons/web/static/src/legacy/scss/color_picker.scss
+++ b/addons/web/static/src/legacy/scss/color_picker.scss
@@ -15,7 +15,7 @@
         padding: 0;
         > li {
             border: 2px solid white;
-            box-shadow: 0 0 0 1px gray('300');
+            box-shadow: 0 0 0 1px map-get($grays, '300');
             margin: $o-kanban-inner-hmargin 4px 0 0;
             > a:focus {
                 outline: none;
@@ -31,7 +31,7 @@
         display: inline-block;
         margin: $o-kanban-inner-hmargin $o-kanban-inner-hmargin 0 0;
         border: 1px solid white;
-        box-shadow: 0 0 0 1px gray('300');
+        box-shadow: 0 0 0 1px map-get($grays, '300');
 
         > a {
             display: block;
diff --git a/addons/web/static/src/legacy/scss/datepicker.scss b/addons/web/static/src/legacy/scss/datepicker.scss
index fdbd409779f..7c48ca0f14d 100644
--- a/addons/web/static/src/legacy/scss/datepicker.scss
+++ b/addons/web/static/src/legacy/scss/datepicker.scss
@@ -1,5 +1,5 @@
 
-.sr-only {
+.visually-hidden {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -55,7 +55,7 @@ div.dropdown-menu.bootstrap-datetimepicker-widget {
         width: percentage(1/8);
         height: 30px;
         line-height: 30px;
-        color: gray('900');
+        color: map-get($grays, '900');
 
         &.prev, &.next, &.old, &.new {
             @include o-hover-opacity(.5);
@@ -72,7 +72,7 @@ div.dropdown-menu.bootstrap-datetimepicker-widget {
     }
 
     thead tr:nth-child(2) th, td.cw {
-        background-color: gray('100');
+        background-color: map-get($grays, '100');
         font-size: $font-size-sm;
         font-weight: $font-weight-bold;
         color: $o-main-text-color;
diff --git a/addons/web/static/src/legacy/scss/daterangepicker.scss b/addons/web/static/src/legacy/scss/daterangepicker.scss
index 131f3a02f98..8fa081bbd7d 100644
--- a/addons/web/static/src/legacy/scss/daterangepicker.scss
+++ b/addons/web/static/src/legacy/scss/daterangepicker.scss
@@ -12,7 +12,7 @@
             }
 
             &:not(.active) {
-                color: gray('900');
+                color: map-get($grays, '900');
             }
 
             &.prev, &.next, &.off.ends {
@@ -63,7 +63,7 @@
                 }
             }
             &:nth-child(2) th {
-                background-color: gray('100');
+                background-color: map-get($grays, '100');
                 font-size: $font-size-sm;
                 font-weight: $font-weight-bold;
                 color: $o-main-text-color;
diff --git a/addons/web/static/src/legacy/scss/domain_selector.scss b/addons/web/static/src/legacy/scss/domain_selector.scss
index 6d26fdf8db3..0b43c605de5 100644
--- a/addons/web/static/src/legacy/scss/domain_selector.scss
+++ b/addons/web/static/src/legacy/scss/domain_selector.scss
@@ -70,7 +70,7 @@
                 display: block;
                 margin-top: 16px;
                 padding: 8px 10px 12px;
-                background: gray('900');
+                background: map-get($grays, '900');
                 color: rgba(white, 0.5);
                 font-family: monospace;
                 font-weight: normal;
diff --git a/addons/web/static/src/legacy/scss/fields.scss b/addons/web/static/src/legacy/scss/fields.scss
index 39e80021799..4fdb2bdb5c0 100644
--- a/addons/web/static/src/legacy/scss/fields.scss
+++ b/addons/web/static/src/legacy/scss/fields.scss
@@ -20,7 +20,7 @@
 }
 
 .o_field_invalid {
-    @include print-variable(o-input-border-color, theme-color('danger'));
+    @include print-variable(o-input-border-color, map-get($theme-colors, 'danger'));
 }
 
 //------------------------------------------------------------------------------
@@ -217,7 +217,7 @@
                 display: inline-block;
                 margin: 5px 5px 0 0; // FIXME was $o-kanban-inner-hmargin before scss convertion
                 border: 1px solid white;
-                box-shadow: 0 0 0 1px gray('300');
+                box-shadow: 0 0 0 1px map-get($grays, '300');
 
                 > a {
                     display: block;
@@ -383,15 +383,15 @@
             margin: 0px 0px 4px 4px;
             padding: 1px 6px;
             color: $o-main-color-muted;
-            border: 1px solid gray('300');
+            border: 1px solid map-get($grays, '300');
             cursor: pointer;
             &.active {
                 color: $o-brand-primary;
                 border-color: $o-brand-primary;
             }
             &:hover:not(.active) {
-                color: darken(gray('300'), 30%);
-                border-color: darken(gray('300'), 30%);
+                color: darken(map-get($grays, '300'), 30%);
+                border-color: darken(map-get($grays, '300'), 30%);
             }
         }
     }
@@ -514,7 +514,7 @@
                         background: $o-brand-primary;
                     }
                     &.o_clear_file_button{
-                        background: theme-color('danger');
+                        background: map-get($theme-colors, 'danger');
                     }
                 }
             }
@@ -525,7 +525,7 @@
         }
 
         &.o_field_invalid > img {
-            border: 1px solid theme-color('danger');
+            border: 1px solid map-get($theme-colors, 'danger');
         }
     }
 
diff --git a/addons/web/static/src/legacy/scss/form_view.scss b/addons/web/static/src/legacy/scss/form_view.scss
index 2219b8ce165..45a0bb97d42 100644
--- a/addons/web/static/src/legacy/scss/form_view.scss
+++ b/addons/web/static/src/legacy/scss/form_view.scss
@@ -266,7 +266,7 @@ $o-form-label-margin-right: 0px;
 
                 &:not(:first-child):before {
                     right: -$o-statusbar-arrow-width;
-                    border-left-color: gray('300');
+                    border-left-color: map-get($grays, '300');
                 }
 
                 &.disabled {
@@ -530,7 +530,7 @@ $o-form-label-margin-right: 0px;
     }
 
     // Status dropdown
-    a[data-toggle="dropdown"] > .o_status {
+    a[data-bs-toggle="dropdown"] > .o_status {
         height: $h3-font-size;
         width: $h3-font-size;
     }
@@ -771,7 +771,7 @@ $o-form-label-margin-right: 0px;
         .oe_subtotal_footer_separator {
             width: 100%;
             text-align: right;
-            border-top: 1px solid gray('300');
+            border-top: 1px solid map-get($grays, '300');
             font-weight: $font-weight-bold;
             font-size: 1.3em;
         }
@@ -878,7 +878,7 @@ $o-form-label-margin-right: 0px;
             .o_recurrent_weekday_label {
                 @include o-text-overflow;
             }
-            .custom-control-label {
+            .form-check-label {
                 left: 25%;
             }
         }
diff --git a/addons/web/static/src/legacy/scss/kanban_column_progressbar.scss b/addons/web/static/src/legacy/scss/kanban_column_progressbar.scss
index e8cd3b2377a..12000fbb990 100644
--- a/addons/web/static/src/legacy/scss/kanban_column_progressbar.scss
+++ b/addons/web/static/src/legacy/scss/kanban_column_progressbar.scss
@@ -65,7 +65,7 @@
         width: 76%;
         height: $font-size-sm;
         margin-bottom: 0;
-        background-color: gray('300');
+        background-color: map-get($grays, '300');
         box-shadow: none;
 
         .progress-bar {
@@ -102,11 +102,11 @@
 }
 
 .o_legacy_kanban_view .o_kanban_group {
-    @include o-kanban-css-filter(success, theme-color('success'));
-    @include o-kanban-css-filter(warning, theme-color('warning'));
-    @include o-kanban-css-filter(danger, theme-color('danger'));
-    @include o-kanban-css-filter(info, theme-color('info'));
-    @include o-kanban-css-filter(muted, theme-color('dark'));
+    @include o-kanban-css-filter(success, map-get($theme-colors, 'success'));
+    @include o-kanban-css-filter(warning, map-get($theme-colors, 'warning'));
+    @include o-kanban-css-filter(danger, map-get($theme-colors, 'danger'));
+    @include o-kanban-css-filter(info, map-get($theme-colors, 'info'));
+    @include o-kanban-css-filter(muted, map-get($theme-colors, 'dark'));
 
     &.o_kanban_group_show {
         display: flex;
diff --git a/addons/web/static/src/legacy/scss/kanban_dashboard.scss b/addons/web/static/src/legacy/scss/kanban_dashboard.scss
index d4cd77fa06e..db7a6665a0d 100644
--- a/addons/web/static/src/legacy/scss/kanban_dashboard.scss
+++ b/addons/web/static/src/legacy/scss/kanban_dashboard.scss
@@ -45,7 +45,7 @@
                 margin-bottom: 10px;
 
                 + .o_kanban_card_manage_section {
-                    border-top: 1px solid gray('200');
+                    border-top: 1px solid map-get($grays, '200');
                 }
 
                 > div {
@@ -87,7 +87,7 @@
                     padding-top: $o-kanban-dashboard-dropdown-complex-gap*3;
 
                     &:not(:first-child) {
-                        border-top: 1px solid gray('300');
+                        border-top: 1px solid map-get($grays, '300');
                     }
 
                     .oe_kanban_colorpicker {
@@ -96,11 +96,11 @@
                     }
 
                     div[class*="col-"] + div[class*="col-"] {
-                        border-left: 1px solid gray('300');
+                        border-left: 1px solid map-get($grays, '300');
                     }
 
                     // Default options box
-                    div.text-right {
+                    div.text-end {
                         text-align: left; // :/
                         @include o-kanban-dashboard-dropdown-link(0);
                     }
@@ -184,8 +184,8 @@
                 margin-bottom: -$o-kanban-dashboard-vpadding;
 
                 &.bottom_block {
-                    border-top: 1px solid gray('300');
-                    background-color: gray('200');
+                    border-top: 1px solid map-get($grays, '300');
+                    background-color: map-get($grays, '200');
                     padding-top: $o-kanban-dashboard-vpadding;
                     padding-bottom: $o-kanban-dashboard-vpadding;
                 }
diff --git a/addons/web/static/src/legacy/scss/kanban_examples_dialog.scss b/addons/web/static/src/legacy/scss/kanban_examples_dialog.scss
index 5c17f6c7a5d..a5a37166975 100644
--- a/addons/web/static/src/legacy/scss/kanban_examples_dialog.scss
+++ b/addons/web/static/src/legacy/scss/kanban_examples_dialog.scss
@@ -2,18 +2,18 @@
 .o_legacy_kanban_examples_dialog{
     display: flex;
     padding: 0px;
-    background: theme-color('light');
+    background: map-get($theme-colors, 'light');
 
     // sidebar
     .o_kanban_examples_dialog_nav {
         flex: 0 0 auto;
-        border-right: 1px solid gray('300');
+        border-right: 1px solid map-get($grays, '300');
         background: white;
         height: fit-content;
 
         > ul > li {
             margin: 0;
-            border-bottom: 1px solid gray('300');
+            border-bottom: 1px solid map-get($grays, '300');
 
             > a {
                 padding: 12px 15px;
@@ -77,11 +77,11 @@
         .o_kanban_examples_ghost {
             padding: 5px;
             margin-top: -1px;
-            border: thin solid gray('300');
+            border: thin solid map-get($grays, '300');
             background-color: white;
             .o_ghost_content {
                 height: 12px;
-                background: gray('300');
+                background: map-get($grays, '300');
                 &.o_ghost_tag {
                     display: inline-block;
                     width: 40%;
diff --git a/addons/web/static/src/legacy/scss/kanban_view.scss b/addons/web/static/src/legacy/scss/kanban_view.scss
index 11ebfde2a89..6d010e2b7ee 100644
--- a/addons/web/static/src/legacy/scss/kanban_view.scss
+++ b/addons/web/static/src/legacy/scss/kanban_view.scss
@@ -33,7 +33,7 @@
         }
 
         .o_kanban_cancel {
-            color: gray('600'); // to make color uniform in community and enterprise
+            color: map-get($grays, '600'); // to make color uniform in community and enterprise
         }
 
         &.o_disabled {
@@ -138,7 +138,7 @@
             .o_link_muted {
                 color: $body-color;
                 &:hover {
-                    color: theme-color('primary');
+                    color: map-get($theme-colors, 'primary');
                     text-decoration: underline;
                 }
             }
@@ -328,7 +328,7 @@
         &.oe_kanban_global_click, &.oe_kanban_global_click_edit {
             cursor: pointer;
             &:focus, &:focus-within {
-                outline: thin solid mix(theme-color('primary'), gray('400'));
+                outline: thin solid mix(map-get($theme-colors, 'primary'), map-get($grays, '400'));
                 outline-offset: -1px;
             }
         }
@@ -571,7 +571,7 @@
             }
 
             .o_kanban_muted_record {
-                background: gray('300');
+                background: map-get($grays, '300');
                 height: 70px;
                 margin: 10px 0px;
             }
diff --git a/addons/web/static/src/legacy/scss/layout_background.scss b/addons/web/static/src/legacy/scss/layout_background.scss
index d5be7430261..1afcc26882b 100644
--- a/addons/web/static/src/legacy/scss/layout_background.scss
+++ b/addons/web/static/src/legacy/scss/layout_background.scss
@@ -1,10 +1,10 @@
 
 .o_background_footer, .o_background_header, .o_report_layout_striped {
-    color: gray('700');
+    color: map-get($grays, '700');
 }
 .o_background_header {
     min-width: 900px;
-    border-bottom: 1px solid gray('200');
+    border-bottom: 1px solid map-get($grays, '200');
     img {
         max-height: 96px;
         max-width: 200px;
@@ -42,7 +42,7 @@
         color: $o-default-report-secondary-color;
     }
     .table {
-        border-top: 1px solid gray('300');
+        border-top: 1px solid map-get($grays, '300');
     }
 
     .table td, .table th {
@@ -55,7 +55,7 @@
         color: $o-default-report-secondary-color
     }
     tbody {
-        color: gray('700');
+        color: map-get($grays, '700');
         tr {
             &:nth-child(odd) {
                 background-color: rgba(220, 205, 216, 0.2);
@@ -81,7 +81,7 @@
             &.o_total {
                 border-top: none !important;
                 td {
-                    border-top: 1px solid gray('400') !important;
+                    border-top: 1px solid map-get($grays, '400') !important;
                 }
                 strong {
                     color: $o-default-report-primary-color;
diff --git a/addons/web/static/src/legacy/scss/layout_boxed.scss b/addons/web/static/src/legacy/scss/layout_boxed.scss
index 1744297949d..568f6c5e243 100644
--- a/addons/web/static/src/legacy/scss/layout_boxed.scss
+++ b/addons/web/static/src/legacy/scss/layout_boxed.scss
@@ -1,9 +1,9 @@
 .o_boxed_footer, .o_boxed_header, .o_report_layout_boxed {
-    color: gray('700');
+    color: map-get($grays, '700');
     font-size: 15px;
 }
 .o_boxed_header {
-    border-bottom: 1px solid gray('200');
+    border-bottom: 1px solid map-get($grays, '200');
     img {
         max-height: 100px;
     }
@@ -35,28 +35,28 @@
         color: $o-default-report-primary-color;
     }
     table {
-        border: 1px solid gray('700');
+        border: 1px solid map-get($grays, '700');
         thead {
-            border-bottom: 2px solid gray('700');
+            border-bottom: 2px solid map-get($grays, '700');
             tr th {
                 text-transform: uppercase;
-                border: 1px solid gray('700');
+                border: 1px solid map-get($grays, '700');
                 color: $o-default-report-secondary-color;
             }
         }
         tbody {
-            color: gray('700');
+            color: map-get($grays, '700');
             tr {
                 td {
                     // remove border-top from standard layout
                     border-top: none;
-                    border-right: 1px solid gray('700');
+                    border-right: 1px solid map-get($grays, '700');
                 }
                 &.o_line_section td,
                 &.o_line_note td,
                 &.is-subtotal td {
-                    border-top: 1px solid gray('700');
-                    border-bottom: 1px solid gray('700');
+                    border-top: 1px solid map-get($grays, '700');
+                    border-bottom: 1px solid map-get($grays, '700');
                 }
                 &.o_line_section td {
                     background-color: rgba($o-default-report-primary-color, 0.7);
@@ -71,12 +71,12 @@
     }
     /* compat 12.0 */
     .page > table:not(.o_main_table) tr td:last-child {
-        background-color: gray('200');
+        background-color: map-get($grays, '200');
         color: $o-default-report-primary-color;
     }
     /* compat 12.0 */
     .row:not(#total) > div > table tbody tr:not(:last-child) td:last-child {
-        background-color: gray('200');
+        background-color: map-get($grays, '200');
         color: $o-default-report-primary-color;
     }
     /*Total table*/
@@ -85,7 +85,7 @@
     div#total table {
         thead tr:first-child,
         tr.o_subtotal {
-            border-bottom: 1px solid gray('700');
+            border-bottom: 1px solid map-get($grays, '700');
         }
         tr {
             &.o_subtotal{
diff --git a/addons/web/static/src/legacy/scss/layout_clean.scss b/addons/web/static/src/legacy/scss/layout_clean.scss
index 999b8d2c21d..228bd5c0bb2 100644
--- a/addons/web/static/src/legacy/scss/layout_clean.scss
+++ b/addons/web/static/src/legacy/scss/layout_clean.scss
@@ -81,7 +81,7 @@
             }
             &:last-child td,
             &.o_total {
-                border-top: 1px solid gray('200') !important;
+                border-top: 1px solid map-get($grays, '200') !important;
             }
         }
     }
diff --git a/addons/web/static/src/legacy/scss/list_view.scss b/addons/web/static/src/legacy/scss/list_view.scss
index 41651f7e547..6bb12ebe1c8 100644
--- a/addons/web/static/src/legacy/scss/list_view.scss
+++ b/addons/web/static/src/legacy/scss/list_view.scss
@@ -14,7 +14,7 @@
         border-spacing: 0;
 
         thead {
-            color: $table-head-color;
+            color: color-contrast(opaque($body-bg, $light));
             border-bottom: 1px solid #cacaca;
             > tr > th:not(.o_list_record_selector) {
                 border-left: 1px solid #dfdfdf;
@@ -118,7 +118,7 @@
         .o_list_record_selector {
             width: 40px;
             padding-left: $o-horizontal-padding;
-            .custom-control-label {
+            .form-check-label {
                 cursor: pointer;
             }
         }
@@ -234,7 +234,7 @@
         .o_data_row:not(.o_selected_row) .o_data_cell {
 
             // Boolean fields in non-selected rows completely disabled.
-            .custom-checkbox {
+            .form-check {
                 pointer-events: none;
             }
 
@@ -244,7 +244,7 @@
             &.o_boolean_toggle_cell,
             &.o_toggle_button_cell {
 
-                &:not(.o_readonly_modifier) .custom-checkbox {
+                &:not(.o_readonly_modifier) .form-check {
                     pointer-events: auto;
                 }
             }
diff --git a/addons/web/static/src/legacy/scss/list_view_extra.scss b/addons/web/static/src/legacy/scss/list_view_extra.scss
index 2806940c8a5..5ff2542dbad 100644
--- a/addons/web/static/src/legacy/scss/list_view_extra.scss
+++ b/addons/web/static/src/legacy/scss/list_view_extra.scss
@@ -30,7 +30,7 @@
             padding-bottom: .15rem;
         }
         &.o_invalid_cell .o_input {
-            box-shadow: 0 0 0 1px theme-color('danger');
+            box-shadow: 0 0 0 1px map-get($theme-colors, 'danger');
         }
         &.o_list_button {
             padding: .25rem;
diff --git a/addons/web/static/src/legacy/scss/model_field_selector.scss b/addons/web/static/src/legacy/scss/model_field_selector.scss
index 46d7d0b27b8..e6f2f183dd3 100644
--- a/addons/web/static/src/legacy/scss/model_field_selector.scss
+++ b/addons/web/static/src/legacy/scss/model_field_selector.scss
@@ -51,7 +51,7 @@
 
             .o_field_selector_popover_header {
                 color: white;
-                background: theme-color('primary');
+                background: map-get($theme-colors, 'primary');
                 font-weight: bold;
                 padding: 5px 0 5px 0.4em;
 
@@ -78,7 +78,7 @@
                         right: 0;
                     }
                     &:hover {
-                        background: darken(theme-color('primary'), 10%);
+                        background: darken(map-get($theme-colors, 'primary'), 10%);
                     }
                 }
                 &:before {
@@ -86,7 +86,7 @@
                     content: "";
                     border-left: $o-field-selector-arrow-height solid rgba(0, 0, 0, 0);
                     border-right: $o-field-selector-arrow-height solid rgba(0, 0, 0, 0);
-                    border-bottom: $o-field-selector-arrow-height solid theme-color('primary');
+                    border-bottom: $o-field-selector-arrow-height solid map-get($theme-colors, 'primary');
                 }
             }
             .o_field_selector_popover_body {
@@ -122,7 +122,7 @@
                 }
             }
             .o_field_selector_popover_footer {
-                background: theme-color('primary');
+                background: map-get($theme-colors, 'primary');
                 padding: 5px 0.4em;
 
                 > input {
diff --git a/addons/web/static/src/legacy/scss/name_and_signature.scss b/addons/web/static/src/legacy/scss/name_and_signature.scss
index 48ee85c2d91..b2b723e187c 100644
--- a/addons/web/static/src/legacy/scss/name_and_signature.scss
+++ b/addons/web/static/src/legacy/scss/name_and_signature.scss
@@ -24,7 +24,7 @@
 
 .o_field_widget {
     .o_signature {
-        outline: 1px solid rgba(theme-color('secondary'), 0.3);
+        outline: 1px solid rgba(map-get($theme-colors, 'secondary'), 0.3);
         position: relative;
         &.o_signature_empty {
             display: flex;
@@ -40,7 +40,7 @@
 
 .o_field_invalid {
     .o_signature {
-        outline: 3px solid theme-color('danger');
+        outline: 3px solid map-get($theme-colors, 'danger');
         cursor: pointer;
     }
 }
diff --git a/addons/web/static/src/legacy/scss/popover.scss b/addons/web/static/src/legacy/scss/popover.scss
index 5914fe51d28..f115f8c5ad2 100644
--- a/addons/web/static/src/legacy/scss/popover.scss
+++ b/addons/web/static/src/legacy/scss/popover.scss
@@ -47,8 +47,8 @@
 }
 
 .o_popover {
-    $border-color: gray('300');
-    $bg-color: gray('200');
+    $border-color: map-get($grays, '300');
+    $bg-color: map-get($grays, '200');
     $arrow-pad: 8px;
     $arrow-size: 8px;
     $animation-time: 0.2s;
@@ -61,7 +61,7 @@
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
 
     .o_popover_header {
-        background-color: gray('200');
+        background-color: map-get($grays, '200');
         font-size: 1.1rem;
         padding: 0.5rem 0.75rem;
         border-bottom: 1px solid $border-color;
diff --git a/addons/web/static/src/legacy/scss/ui.scss b/addons/web/static/src/legacy/scss/ui.scss
index ab242616fa3..a4e6d3cf82f 100644
--- a/addons/web/static/src/legacy/scss/ui.scss
+++ b/addons/web/static/src/legacy/scss/ui.scss
@@ -38,7 +38,7 @@
     }
 }
 
-// Allow to change data-toggle="collapse" text according to status
+// Allow to change data-bs-toggle="collapse" text according to status
 :not(.collapsed) > .o-collapsed-label,
 .collapsed > .o-not-collapsed-label {
     display: none;
diff --git a/addons/web/static/src/legacy/scss/utils.scss b/addons/web/static/src/legacy/scss/utils.scss
index ba314b269ef..e910cdb70aa 100644
--- a/addons/web/static/src/legacy/scss/utils.scss
+++ b/addons/web/static/src/legacy/scss/utils.scss
@@ -356,7 +356,7 @@
         display: inline-block;
         margin: $o-kanban-inner-hmargin $o-kanban-inner-hmargin 0 0;
         border: 1px solid white;
-        box-shadow: 0 0 0 1px gray('300');
+        box-shadow: 0 0 0 1px map-get($grays, '300');
 
         > a {
             display: block;
@@ -441,7 +441,8 @@
 
 %o-nocontent-empty-document {
     @extend %o-nocontent-init-image;
-    @include size(120px, 80px);
+    width: 120px;
+    height: 80px;
     margin-top: 30px;
     margin-bottom: 30px;
     background: transparent url(/web/static/img/empty_folder.svg) no-repeat center;
diff --git a/addons/web/static/src/legacy/scss/views.scss b/addons/web/static/src/legacy/scss/views.scss
index 0f3bfa1b1a8..fd776d12a1d 100644
--- a/addons/web/static/src/legacy/scss/views.scss
+++ b/addons/web/static/src/legacy/scss/views.scss
@@ -17,7 +17,7 @@
 // of `.o_field_widget` so it needs to be placed at an upper level.
 .o_status {
     @extend .rounded-circle;
-    background-color: gray('200');
+    background-color: map-get($grays, '200');
     height: 12px;
     width: 12px;
     box-shadow: inset 0 0 0 1px rgba($black, .2);
@@ -57,13 +57,15 @@
 
         .o_view_nocontent_smiling_face:before {
             @extend %o-nocontent-init-image;
-            @include size(120px, 140px);
+            width: 120px;
+            height: 140px;
             background: transparent url(/web/static/img/smiling_face.svg) no-repeat center;
         }
 
         .o_view_nocontent_neutral_face:before {
             @extend %o-nocontent-init-image;
-            @include size(120px, 140px);
+            width: 120px;
+            height: 140px;
             background: transparent url(/web/static/img/neutral_face.svg) no-repeat center;
         }
 
@@ -90,7 +92,7 @@
         }
     }
 
-    .custom-checkbox {
+    .form-check {
         pointer-events: none !important;
     }
 
diff --git a/addons/web/static/src/legacy/scss/web_calendar.scss b/addons/web/static/src/legacy/scss/web_calendar.scss
index eba8bc645fd..d36518113b0 100644
--- a/addons/web/static/src/legacy/scss/web_calendar.scss
+++ b/addons/web/static/src/legacy/scss/web_calendar.scss
@@ -18,8 +18,8 @@ $o-cw-filter-avatar-size: 20px;
     flex: 1 1 auto;
     min-width: 0;
     height: 100%;
-    background-color: gray('100');
-    background: linear-gradient(-45deg, gray('100'), white);
+    background-color: map-get($grays, '100');
+    background: linear-gradient(-45deg, map-get($grays, '100'), white);
 
     .fc-event {
         margin: 0 1px;
@@ -41,8 +41,9 @@ $o-cw-filter-avatar-size: 20px;
         }
 
         .fc-bg {
-            background-color: mix(theme-color('primary'), white); // Used for placeholder events only (on creation)
-            @include size(101%); // Compensate border
+            background-color: mix(map-get($theme-colors, 'primary'), white); // Used for placeholder events only (on creation)
+            width: 101%;
+            height: 101%; // Compensate border
             opacity: 0.7;
             transition: opacity 0.2s;
         }
@@ -83,7 +84,7 @@ $o-cw-filter-avatar-size: 20px;
         }
 
         .fc-time-grid .fc-slats .fc-minor td {
-            border-top-color: gray('400');
+            border-top-color: map-get($grays, '400');
         }
 
         .fc-widget-content {
@@ -99,7 +100,7 @@ $o-cw-filter-avatar-size: 20px;
         hr.fc-widget-header {
             padding: 1px;
             border: 0;
-            background: gray('400');
+            background: map-get($grays, '400');
         }
 
         .fc-timeGrid-view .fc-day-grid .fc-row .fc-content-skeleton {
@@ -145,7 +146,7 @@ $o-cw-filter-avatar-size: 20px;
 
             // Reinfornce default border color
             tbody td {
-                border-top-color: gray('400');
+                border-top-color: map-get($grays, '400');
             }
 
             // Remove dotted borders (half-hours)
@@ -180,7 +181,7 @@ $o-cw-filter-avatar-size: 20px;
 
                 + hr.fc-widget-header {
                     padding: 1px 0 0;
-                    background: gray('300');
+                    background: map-get($grays, '300');
                 }
 
                 .fc-content-skeleton tr:not(:first-child) .fc-h-event{
@@ -191,7 +192,7 @@ $o-cw-filter-avatar-size: 20px;
             // Create a 'preudo-border' for the first row. The actual border
             // it's hidden because of border-collapse settings.
             .fc-slats tr:first-child td.fc-widget-content:last-child {
-                box-shadow: inset 0 1px 0 gray('400');
+                box-shadow: inset 0 1px 0 map-get($grays, '400');
             }
 
             .fc-day.fc-widget-content.fc-today:not(.o_calendar_disabled) {
@@ -285,7 +286,7 @@ $o-cw-filter-avatar-size: 20px;
                 margin: 5px;
                 padding: 0.1rem 0.3rem 0.1rem 0;
                 font-size: 1.2rem;
-                color: gray('900');
+                color: map-get($grays, '900');
                 font-weight: 400;
                 line-height: 1;
                 float: none !important;
@@ -295,7 +296,7 @@ $o-cw-filter-avatar-size: 20px;
                 opacity: 0.8;
 
                 .fc-day-number {
-                    color: gray('500');
+                    color: map-get($grays, '500');
                 }
             }
 
@@ -304,7 +305,7 @@ $o-cw-filter-avatar-size: 20px;
             }
 
             .fc-bg .fc-today {
-                border-color: gray('300');
+                border-color: map-get($grays, '300');
             }
             .fc-bg .fc-today:not(.o_calendar_disabled) {
                 background: $o-view-background-color;
@@ -449,7 +450,7 @@ $o-cw-filter-avatar-size: 20px;
                     border-radius: 100%;
                     text-align: center;
                     background-color: rgba(#87c0d1, 0.5);
-                    color: gray('900');
+                    color: map-get($grays, '900');
                 }
             }
 
@@ -478,7 +479,7 @@ $o-cw-filter-avatar-size: 20px;
 
                         h2 {
                             font-size: 1.2rem;
-                            color: gray('600');
+                            color: map-get($grays, '600');
                         }
                     }
 
@@ -604,7 +605,7 @@ $o-cw-filter-avatar-size: 20px;
                 text-align: center;
                 vertical-align: middle;
                 font-size: 1.2rem;
-                color: gray('900');
+                color: map-get($grays, '900');
                 font-weight: 400;
             }
 
@@ -636,7 +637,7 @@ $o-cw-filter-avatar-size: 20px;
             border-radius: 0;
 
             .ui-datepicker-title {
-                color: gray('600');
+                color: map-get($grays, '600');
                 font-size: 1.2rem;
                 font-weight: normal;
             }
@@ -649,7 +650,7 @@ $o-cw-filter-avatar-size: 20px;
                 &:before {
                     font: normal normal normal 13px/1 FontAwesome;
                     content: "\f053";
-                    color: gray('400');
+                    color: map-get($grays, '400');
                 }
                 &.ui-icon-circle-triangle-e:before {
                     content: "\f054"
@@ -662,7 +663,7 @@ $o-cw-filter-avatar-size: 20px;
                 cursor: pointer;
 
                 span:before {
-                    color: gray('800');
+                    color: map-get($grays, '800');
                 }
             }
         }
@@ -698,14 +699,16 @@ $o-cw-filter-avatar-size: 20px;
             }
 
             .o_cw_filter_input_bg {
-                @include size(1.3em);
+                width: 1.3em;
+                height: 1.3em;
                 border-width: 2px;
                 border-style: solid;
                 border-radius: 1px;
                 overflow: hidden;
 
                 &.o_beside_avatar {
-                    @include size($o-cw-filter-avatar-size);
+                    width: $o-cw-filter-avatar-size;
+                    height: $o-cw-filter-avatar-size;
                     border-radius: 2px;
                     object-fit: cover;
                 }
@@ -721,7 +724,8 @@ $o-cw-filter-avatar-size: 20px;
 
 
             .o_cw_filter_avatar {
-                @include size($o-cw-filter-avatar-size);
+                width: $o-cw-filter-avatar-size;
+                height: $o-cw-filter-avatar-size;
                 border-radius: 2px;
 
                 &.fa {
@@ -783,7 +787,8 @@ $o-cw-filter-avatar-size: 20px;
 
     .o_calendar_avatars img {
         margin-right: 0.4rem;
-        @include size($o-cw-popup-avatar-size);
+        width: $o-cw-popup-avatar-size;
+        height: $o-cw-popup-avatar-size;
         border-radius: 100%;
     }
 
@@ -799,11 +804,11 @@ $o-cw-filter-avatar-size: 20px;
         padding-bottom: 1px; // prevents the scrollbar to show when not needed
 
         &::-webkit-scrollbar {
-            background: gray('200');
+            background: map-get($grays, '200');
             width: 6px;
         }
         &::-webkit-scrollbar-thumb {
-            background: gray('500');
+            background: map-get($grays, '500');
         }
     }
 
diff --git a/addons/web/static/src/legacy/xml/base.xml b/addons/web/static/src/legacy/xml/base.xml
index b5d26717041..4eadc50e243 100644
--- a/addons/web/static/src/legacy/xml/base.xml
+++ b/addons/web/static/src/legacy/xml/base.xml
@@ -96,12 +96,12 @@
         <input
             t-att-id="props.id or _id"
             type="checkbox"
-            class="custom-control-input"
+            class="form-check-input"
             t-att-disabled="props.disabled"
             t-att-checked="props.value"
             t-on-change="(ev) => props.onChange(ev.target.checked)"
             />
-        <label t-att-for="props.id or _id" class="custom-control-label">
+        <label t-att-for="props.id or _id" class="form-check-label">
             <t t-esc="props.text or '&#8203;'"/>
         </label>
     </div>
@@ -152,7 +152,7 @@
     <div class="btn-group dropdown" t-att-class="{ show: state.open }">
         <button type="button"
             class="dropdown-toggle btn btn-secondary o-no-caret"
-            t-attf-class="{{ icon || displayCaret || displayChevron ? 'd-flex align-items-center ' : ''}} {{ displayCaret || displayChevron ? 'pr-1 ' : ''}}"
+            t-attf-class="{{ icon || displayCaret || displayChevron ? 'd-flex align-items-center ' : ''}} {{ displayCaret || displayChevron ? 'pe-1 ' : ''}}"
             t-att-aria-expanded="state.open ? 'true' : 'false'"
             tabindex="-1"
             t-on-click="() => { state.open = !state.open }"
@@ -160,10 +160,10 @@
             t-att-title="props.hotkeyTitle"
             t-att-data-hotkey="props.hotkey"
             >
-            <i t-if="icon" t-att-class="icon + ' small mr-1'"/>
+            <i t-if="icon" t-att-class="icon + ' small me-1'"/>
             <span class="o_dropdown_title" t-esc="title"/>
             <i t-if="displayCaret" t-attf-class="o_dropdown_caret fa fa-fw fa-caret-{{ state.open ? 'down' : 'right' }}"/>
-            <i t-elif="displayChevron" t-attf-class="o_dropdown_chevron fa fa-fw ml-auto fa-chevron-{{ state.open ? 'down' : 'right' }}"/>
+            <i t-elif="displayChevron" t-attf-class="o_dropdown_chevron fa fa-fw ms-auto fa-chevron-{{ state.open ? 'down' : 'right' }}"/>
         </button>
         <ul t-if="state.open" t-attf-class="o-dropdown-menu {{ dropdownMenuAlignClass }} show" role="menu"
             t-on-item-selected="_onItemSelected"
@@ -201,7 +201,7 @@
                         role="separator"
                     />
                     <li class="o_item_option" role="menuitem">
-                        <a class="dropdown-item pl-5"
+                        <a class="dropdown-item ps-5"
                             t-att-class="{ selected: option.isActive }"
                             t-att-aria-checked="option.isActive ? 'true' : 'false'"
                             role="menuitemcheckbox"
@@ -243,7 +243,7 @@
             <div role="dialog" class="modal"
                 tabindex="-1"
                 t-att-class="{ o_technical_modal: props.technical, o_modal_full: props.fullscreen }"
-                t-att-data-backdrop="'' + props.backdrop"
+                t-att-data-bs-backdrop="'' + props.backdrop"
                 t-ref="modal"
                 t-on-close_dialog.stop="_close"
                 t-on-click="_onBackdropClick"
@@ -293,7 +293,7 @@
     <nav class="o_pager align-items-center d-flex gap-2" aria-label="Pager">
         <span class="o_pager_counter" t-on-click.stop="">
             <input t-if="state.editing" type="text"
-                class="o_pager_value o_input d-inline-block w-auto text-right"
+                class="o_pager_value o_input d-inline-block w-auto text-end"
                 size="7"
                 t-ref="autofocus"
                 t-att-value="value"
@@ -312,7 +312,7 @@
         <span class="btn-group" aria-atomic="true">
             <!-- accesskeys not wanted in X2Many widgets -->
             <button type="button"
-                class="fa fa-chevron-left px-2 btn btn-secondary o_pager_previous rounded-left"
+                class="fa fa-chevron-left px-2 btn btn-secondary o_pager_previous rounded-start"
                 t-att-disabled="state.disabled || singlePage"
                 t-att-accesskey="props.withAccessKey ? 'p' : false"
                 aria-label="Previous page"
@@ -321,7 +321,7 @@
                 t-on-click="ev => this._changeSelection(-1, ev)"
             />
             <button type="button"
-                class="fa fa-chevron-right px-2 btn btn-secondary o_pager_next rounded-right"
+                class="fa fa-chevron-right px-2 btn btn-secondary o_pager_next rounded-end"
                 t-att-disabled="state.disabled || singlePage"
                 t-att-accesskey="props.withAccessKey ? 'n' : false"
                 aria-label="Next page"
@@ -384,12 +384,12 @@
                 </a>
                 <a href="#" t-on-click.prevent="">
                     <t t-if="src.parent.selection">
-                        Search <b t-esc="src.parent.description"/>: <b class="font-italic text-primary" t-esc="src.label"/></t>
+                        Search <b t-esc="src.parent.description"/>: <b class="fst-italic text-primary" t-esc="src.label"/></t>
                     <t t-elif="src.label" t-esc="src.label"/>
                     <t t-elif="['date', 'datetime'].includes(src.type)">
-                        <t>Search <b t-esc="src.description"/> at: <b class="font-italic text-primary" t-esc="state.inputValue"/></t>
+                        <t>Search <b t-esc="src.description"/> at: <b class="fst-italic text-primary" t-esc="state.inputValue"/></t>
                     </t>
-                    <t t-else="">Search <b t-esc="src.description"/> for: <b class="font-italic text-primary" t-esc="state.inputValue"/></t>
+                    <t t-else="">Search <b t-esc="src.description"/> for: <b class="fst-italic text-primary" t-esc="state.inputValue"/></t>
                 </a>
             </li>
         </ul>
@@ -593,12 +593,12 @@
 </t>
 
 <t t-name="ListView.selection">
-    <div class="o_list_selection_box alert alert-info d-inline-flex align-items-center pl-0 px-lg-2 py-0 mb-0 ml-2" role="alert">
-        <span t-if="isDomainSelected">All <span class="text-monospace" t-esc="nbTotal"/> selected</span>
+    <div class="o_list_selection_box alert alert-info d-inline-flex align-items-center ps-0 px-lg-2 py-0 mb-0 ms-2" role="alert">
+        <span t-if="isDomainSelected">All <span class="font-monospace" t-esc="nbTotal"/> selected</span>
         <t t-else="">
-            <span class="text-monospace mr-1" t-esc="nbSelected"/> selected
-            <a t-if="isPageSelected and nbTotal > nbSelected" href="#" class="o_list_select_domain ml-2 btn btn-sm btn-info px-2 py-1 border-0 font-weight-normal">
-                <i class="fa fa-arrow-right"/> Select all <span class="text-monospace" t-esc="nbTotal"/>
+            <span class="font-monospace me-1" t-esc="nbSelected"/> selected
+            <a t-if="isPageSelected and nbTotal > nbSelected" href="#" class="o_list_select_domain ms-2 btn btn-sm btn-info px-2 py-1 border-0 fw-normal">
+                <i class="fa fa-arrow-right"/> Select all <span class="font-monospace" t-esc="nbTotal"/>
             </a>
         </t>
     </div>
@@ -755,8 +755,8 @@
 
 <t t-name="PivotView.buttons">
     <div class="btn-group" role="toolbar" aria-label="Main actions">
-        <button class="btn btn-primary dropdown-toggle o-no-caret" data-toggle="dropdown" aria-expanded="false">
-            Measures <i class="fa fa-caret-down ml-1"/>
+        <button class="btn btn-primary dropdown-toggle o-no-caret" data-bs-toggle="dropdown" aria-expanded="false">
+            Measures <i class="fa fa-caret-down ms-1"/>
         </button>
         <div class="dropdown-menu o_pivot_measures_list" role="menu">
             <t t-foreach="measures" t-as="measure" t-key="measure_index">
@@ -775,7 +775,7 @@
 
 <t t-name="FormSelection">
     <div class="btn-group o_selection" aria-atomic="true">
-        <a href="#" data-toggle="dropdown" aria-expanded="false" role="button" title="Dropdown menu">
+        <a href="#" data-bs-toggle="dropdown" aria-expanded="false" role="button" title="Dropdown menu">
             <span class="o_status d-inline-block align-middle"/>
         </a>
         <div class="dropdown-menu state" role="menu"/>
@@ -783,7 +783,7 @@
 </t>
 <t t-name="FormSelection.items">
     <t t-foreach="states" t-as="rec" t-key="rec_index">
-        <a role="menuitem" href="#" class="dropdown-item pl-4" t-att-data-value="rec.name">
+        <a role="menuitem" href="#" class="dropdown-item ps-4" t-att-data-value="rec.name">
             <span t-att-class="'o_status rounded-circle d-inline-block align-middle ' + (rec.state_class &amp;&amp; rec.state_class || '')"/>
             <t t-out="rec.state_name"/>
         </a>
@@ -817,7 +817,7 @@
 </t>
 <t t-name="DomainTree.OperatorSelector">
     <div t-if="!widget.readonly" class="btn-group o_domain_tree_operator_selector" aria-atomic="true">
-        <button class="btn btn-sm btn-primary o_domain_tree_operator_caret" data-toggle="dropdown">
+        <button class="btn btn-sm btn-primary o_domain_tree_operator_caret" data-bs-toggle="dropdown">
             <t t-if="widget.operator === '&amp;'">All</t>
             <t t-if="widget.operator === '|'">Any</t>
             <t t-if="widget.operator === '!'">None</t>
@@ -891,7 +891,7 @@
             <t t-else="">
                 <t t-if="_.contains(['in', 'not in'], widget.operator)">
                     <div class="o_domain_leaf_value_input">
-                        <span class="badge badge-pill" t-foreach="widget.displayValue" t-as="val" t-key="val_index">
+                        <span class="badge rounded-pill" t-foreach="widget.displayValue" t-as="val" t-key="val_index">
                             <t t-esc="val"/> <i class="o_domain_leaf_value_remove_tag_button fa fa-times" t-att-data-value="val" role="img" aria-label="Remove tag" title="Remove tag"/>
                         </span>
                     </div>
@@ -1007,10 +1007,10 @@
         t-att-id="widget.idForLabel"/>
 </t>
 <t t-name="FieldRadio.button">
-    <div class="custom-control custom-radio o_radio_item" aria-atomic="true">
-        <input type="radio" class="custom-control-input o_radio_input" t-att-checked="checked ? true : undefined" t-att-disabled="disabled ? true : undefined"
+    <div class="custom-control form-check o_radio_item" aria-atomic="true">
+        <input type="radio" class="form-check-input o_radio_input" t-att-checked="checked ? true : undefined" t-att-disabled="disabled ? true : undefined"
             t-att-name="name" t-att-data-value="value[0]" t-att-data-index="index" t-att-id="id"/>
-        <label class="custom-control-label o_form_label" t-att-for="id"><t t-esc="value[1]"/></label>
+        <label class="form-check-label o_form_label" t-att-for="id"><t t-esc="value[1]"/></label>
     </div>
 </t>
 
@@ -1064,7 +1064,7 @@
     <t t-foreach="elements" t-as="el" t-key="el_index">
         <t t-set="color" t-value="el[colorField] || 0"/>
         <t t-set="colornames" t-value="['No color', 'Red', 'Orange', 'Yellow', 'Light blue', 'Dark purple', 'Salmon pink', 'Medium blue', 'Dark blue', 'Fushia', 'Green', 'Purple']"/>
-        <div t-attf-class="badge badge-pill #{hasDropdown ? 'dropdown' : ''} o_tag_color_#{color}" t-att-data-color="color" t-att-data-index="el_index" t-att-data-id="el.id" t-attf-title="Tag color: #{colornames[color]}">
+        <div t-attf-class="badge rounded-pill #{hasDropdown ? 'dropdown' : ''} o_tag_color_#{color}" t-att-data-color="color" t-att-data-index="el_index" t-att-data-id="el.id" t-attf-title="Tag color: #{colornames[color]}">
             <t t-set="_badge_text">
                 <span class="o_badge_text" t-att-title="el.display_name"><span role="img" t-attf-aria-label="Tag color: #{colornames[color]}"/><span class="o_tag_badge_text" t-esc="el.display_name"/></span>
             </t>
@@ -1091,7 +1091,7 @@
         <span><img t-attf-src="/web/image/#{avatarModel}/#{el.id}/#{avatarField}" t-att-title="el.display_name" t-att-data-id="el.id" class="rounded-circle o_m2m_avatar"/></span>
     </t>
     <t t-if="elements.length > widget.visibleAvatarCount">
-        <span class="o_m2m_avatar_empty rounded-circle text-center font-weight-bold">
+        <span class="o_m2m_avatar_empty rounded-circle text-center fw-bold">
             <span t-if="elements.length - widget.visibleAvatarCount + 1 > 9">9+</span>
             <span t-else="">+<t t-esc="elements.length - widget.visibleAvatarCount + 1"/></span>
         </span>
@@ -1114,7 +1114,7 @@
                 <span><img t-attf-src="/web/image/#{avatarModel}/#{el.id}/#{avatarField}" t-att-title="el.display_name" t-att-data-id="el.id" class="rounded-circle o_m2m_avatar"/></span>
             </t>
             <t t-if="elements.length > widget.visibleAvatarCount">
-                <span class="o_m2m_avatar_empty rounded-circle text-center font-weight-bold">
+                <span class="o_m2m_avatar_empty rounded-circle text-center fw-bold">
                     <span t-if="elements.length - widget.visibleAvatarCount + 1 > 9">9+</span>
                     <span t-else="">+<t t-esc="elements.length - widget.visibleAvatarCount + 1"/></span>
                 </span>
@@ -1145,9 +1145,9 @@
                 <div role="menuitem" class="o_hide_in_kanban"
                      t-att-data-id="tag_id"
                      t-att-data-color="0">
-                    <div class="custom-control custom-checkbox">
-                        <input type="checkbox" id="o_hide_in_kanban_checkbox" class="custom-control-input"/>
-                        <label for="o_hide_in_kanban_checkbox" class="custom-control-label">Hide in Kanban</label>
+                    <div class="custom-control form-check">
+                        <input type="checkbox" id="o_hide_in_kanban_checkbox" class="form-check-input"/>
+                        <label for="o_hide_in_kanban_checkbox" class="form-check-label">Hide in Kanban</label>
                     </div>
                 </div>
             </li>
@@ -1173,7 +1173,7 @@
 </t>
 <t t-name="FieldStatus.content">
     <t t-if="selection_folded.length">
-        <button type="button" class="btn o_arrow_button btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">More</button>
+        <button type="button" class="btn o_arrow_button btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">More</button>
         <div class="dropdown-menu" role="menu">
             <t t-foreach="selection_folded" t-as="i" t-key="i_index">
                 <t t-call="FieldStatus.content.button">
@@ -1208,8 +1208,8 @@
     <div class="o_field_image" aria-atomic="true">
         <t t-if="widget.mode !== 'readonly'">
             <div class="o_form_image_controls">
-                <button class="fa fa-pencil fa-lg float-left o_select_file_button" title="Edit" aria-label="Edit"/>
-                <button class="fa fa-trash-o fa-lg float-right o_clear_file_button" title="Clear" aria-label="Clear"/>
+                <button class="fa fa-pencil fa-lg float-start o_select_file_button" title="Edit" aria-label="Edit"/>
+                <button class="fa fa-trash-o fa-lg float-end o_clear_file_button" title="Clear" aria-label="Clear"/>
 
                 <span class="o_form_binary_progress">Uploading...</span>
                 <t t-call="HiddenInputFile">
@@ -1284,8 +1284,8 @@
 <div t-name="FieldBinarySignature">
     <div class="o_sign_signature_draw panel panel-default mt16 mb0">
         <div class="card-header">
-            <a role="button" class="o_sign_select_style float-right btn btn-link">Select Signature Style</a>
-            <a role="button" class="o_sign_clean float-right btn btn-link">Clear Signature</a>
+            <a role="button" class="o_sign_select_style float-end btn btn-link">Select Signature Style</a>
+            <a role="button" class="o_sign_clean float-end btn btn-link">Clear Signature</a>
             <a data-mode="draw" class="o_sign_mode o_sign_mode_draw btn btn-primary" role="button">Draw</a>
             <a data-mode="auto" class="o_sign_mode o_sign_mode_auto btn" role="button">Auto</a>
             <a data-mode="load" class="o_sign_mode o_sign_mode_load btn" role="button">Load</a>
@@ -1355,7 +1355,7 @@
     <div t-attf-class="o_attachment o_attachment_many2many #{ editable ? 'o_attachment_editable' : '' } #{upload ? 'o_attachment_uploading' : ''}" t-att-title="file.name">
         <div class="o_attachment_wrap">
             <t t-set="ext" t-value="file.name.replace(/^.*\./, '')"/>
-            <div class="o_image_box float-left" t-att-data-id="file.id">
+            <div class="o_image_box float-start" t-att-data-id="file.id">
                 <a t-att-href="url" t-att-title="'Download ' + file.name" aria-label="Download">
                     <span class="o_image o_hover" t-att-data-mimetype="mimetype" t-att-data-ext="ext" role="img"/>
                 </a>
@@ -1426,8 +1426,8 @@
 <t t-name="Export.TreeItems">
     <t t-foreach="fields" t-as="field" t-key="field_index">
         <t t-set="has_child" t-value="field.children &amp;&amp; (field.id).split('/').length != 3" />
-        <div t-att-data-id="field.id" t-attf-class="o_export_tree_item #{has_child ? 'haschild o_expand' : ''} o_cursor_pointer position-relative pl-3 " tabindex="-1" role="treeitem"> <!-- tabindex make the div focusable -->
-            <span t-if="has_child" class="o_expand_parent d-inline-block position-absolute top-0 left-0 mt-1 ml-n3 small fa fa-chevron-right" role="img" aria-label="Show sub-fields" title="Show sub-fields"/>
+        <div t-att-data-id="field.id" t-attf-class="o_export_tree_item #{has_child ? 'haschild o_expand' : ''} o_cursor_pointer position-relative ps-3 " tabindex="-1" role="treeitem"> <!-- tabindex make the div focusable -->
+            <span t-if="has_child" class="o_expand_parent d-inline-block position-absolute top-0 start-0 mt-1 ml-n3 small fa fa-chevron-right" role="img" aria-label="Show sub-fields" title="Show sub-fields"/>
             <div t-attf-class="o_tree_column text-wrap">
                 <t t-esc="field.string"/>
                 <t t-if="debug and field.id">
@@ -1440,26 +1440,26 @@
 </t>
 <t t-name="Export.SaveList">
     <div class="input-group mb-3">
-        <label class="pt-2 font-weight-bold">Save as : </label>
-        <input class="form-control ml-4 o_save_list_name"
+        <label class="pt-2 fw-bold">Save as : </label>
+        <input class="form-control ms-4 o_save_list_name"
                placeholder="New template"/>
-        <button type="button" class="btn btn-secondary ml-1 o_save_list_btn"><i class="fa fa-floppy-o"/></button>
-        <button type="button" class="btn btn-secondary ml-1 o_cancel_list_btn"><i class="fa fa-times"/></button>
+        <button type="button" class="btn btn-secondary ms-1 o_save_list_btn"><i class="fa fa-floppy-o"/></button>
+        <button type="button" class="btn btn-secondary ms-1 o_cancel_list_btn"><i class="fa fa-times"/></button>
     </div>
 </t>
 <t t-name="Export.SavedList">
     <div class="input-group mb-3">
-        <label class="pt-2 mb-0 font-weight-bold">Template: </label>
-        <select class="form-control ml-4 o_exported_lists_select">
+        <label class="pt-2 mb-0 fw-bold">Template: </label>
+        <select class="form-select ms-4 o_exported_lists_select">
             <option></option>
-            <option class="font-italic" value="new_template">New template</option>
+            <option class="fst-italic" value="new_template">New template</option>
             <t t-foreach="existing_exports" t-as="export" t-key="export_index">
                 <option t-att-value="export.id">
                     <t t-esc="export.name"/>
                 </option>
             </t>
         </select>
-        <button type="button" class="btn btn-secondary d-none ml-1 o_delete_exported_list">
+        <button type="button" class="btn btn-secondary d-none ms-1 o_delete_exported_list">
             <i class="fa fa-trash"/>
         </button>
     </div>
@@ -1486,9 +1486,9 @@
     <div aria-atomic="true">
         <div t-foreach="widget.m2mValues" t-as="m2m_value" t-key="m2m_value_index">
             <t t-set="id_for_label" t-value="'o_many2many_checkbox_' + _.uniqueId()"/>
-            <div class="custom-control custom-checkbox">
-                <input type="checkbox" t-att-id="id_for_label" class="custom-control-input" t-att-data-record-id="JSON.stringify(m2m_value[0])"/>
-                <label t-att-for="id_for_label" class="custom-control-label o_form_label"><t t-esc="m2m_value[1]"/></label>
+            <div class="custom-control form-check">
+                <input type="checkbox" t-att-id="id_for_label" class="form-check-input" t-att-data-record-id="JSON.stringify(m2m_value[0])"/>
+                <label t-att-for="id_for_label" class="form-check-label o_form_label"><t t-esc="m2m_value[1]"/></label>
             </div>
         </div>
     </div>
diff --git a/addons/web/static/src/legacy/xml/colorpicker.xml b/addons/web/static/src/legacy/xml/colorpicker.xml
index d908cee8306..9b819160238 100644
--- a/addons/web/static/src/legacy/xml/colorpicker.xml
+++ b/addons/web/static/src/legacy/xml/colorpicker.xml
@@ -16,23 +16,23 @@
         </div>
         <div t-if="widget.options.colorPreview" class="o_color_preview mb-1 w-100 p-2"/>
         <div class="o_color_picker_inputs d-flex justify-content-between mb-2">
-            <t t-set="input_classes" t-value="'p-0 border-0 text-center text-monospace bg-transparent'" />
+            <t t-set="input_classes" t-value="'p-0 border-0 text-center font-monospace bg-transparent'" />
 
             <div class="o_hex_div px-1 d-flex align-items-baseline">
                 <input type="text" t-attf-class="o_hex_input {{input_classes}}" data-color-method="hex" size="1"/>
-                <label class="flex-grow-0 ml-1 mb-0">hex</label>
+                <label class="flex-grow-0 ms-1 mb-0">hex</label>
             </div>
             <div class="o_rgba_div px-1 d-flex align-items-baseline">
                 <input type="text" t-attf-class="o_red_input {{input_classes}}" data-color-method="rgb" size="1"/>
                 <input type="text" t-attf-class="o_green_input {{input_classes}}" data-color-method="rgb" size="1"/>
-                <input type="text" t-attf-class="o_blue_input mr-0 {{input_classes}}" data-color-method="rgb" size="1"/>
+                <input type="text" t-attf-class="o_blue_input me-0 {{input_classes}}" data-color-method="rgb" size="1"/>
                 <t t-if="!widget.options.noTransparency">
                     <input type="text" t-attf-class="o_opacity_input {{input_classes}}" data-color-method="opacity" size="1"/>
-                    <label class="flex-grow-0 ml-1 mb-0">
+                    <label class="flex-grow-0 ms-1 mb-0">
                         RGBA
                     </label>
                 </t>
-                <label t-else="" class="flex-grow-0 ml-1 mb-0">
+                <label t-else="" class="flex-grow-0 ms-1 mb-0">
                     RGB
                 </label>
             </div>
diff --git a/addons/web/static/src/legacy/xml/dialog.xml b/addons/web/static/src/legacy/xml/dialog.xml
index c46e0256274..d79ec05ca9e 100644
--- a/addons/web/static/src/legacy/xml/dialog.xml
+++ b/addons/web/static/src/legacy/xml/dialog.xml
@@ -7,7 +7,7 @@
     <div role="dialog"
         t-attf-class="modal o_legacy_dialog #{ technical ? ' o_technical_modal' : '' } #{ fullscreen ? ' o_modal_full': '' }"
         tabindex="-1"
-        data-backdrop="static"
+        data-bs-backdrop="static"
         t-att-id="_.uniqueId('modal_')"
         aria-hidden="true"
         >
diff --git a/addons/web/static/src/legacy/xml/fields.xml b/addons/web/static/src/legacy/xml/fields.xml
index f3cd6d232ae..da4ba247467 100644
--- a/addons/web/static/src/legacy/xml/fields.xml
+++ b/addons/web/static/src/legacy/xml/fields.xml
@@ -7,7 +7,7 @@
     </t>
 
     <t t-name="web.FieldBadge" owl="1">
-        <span class="badge badge-pill o_field_badge" t-esc="_formatValue(value)"/>
+        <span class="badge rounded-pill o_field_badge" t-esc="_formatValue(value)"/>
     </t>
 
 </templates>
diff --git a/addons/web/static/src/legacy/xml/kanban.xml b/addons/web/static/src/legacy/xml/kanban.xml
index f625d571a31..5f40605719d 100644
--- a/addons/web/static/src/legacy/xml/kanban.xml
+++ b/addons/web/static/src/legacy/xml/kanban.xml
@@ -16,7 +16,7 @@
                 <span t-attf-id="#kanban_header_#{widget.id or widget.db_id}" class="o_column_title"><t t-esc="widget.title"/></span>
                 <span class="o_column_unfold"><i class="fa fa-arrows-h" role="img" aria-label="Unfold" title="Unfold"/></span>
                 <span class="o_kanban_config dropdown">
-                    <a class="dropdown-toggle o-no-caret" data-toggle="dropdown" href="#"><i class="fa fa-gear" role="img" aria-label="Settings" title="Settings"/></a>
+                    <a class="dropdown-toggle o-no-caret" data-bs-toggle="dropdown" href="#"><i class="fa fa-gear" role="img" aria-label="Settings" title="Settings"/></a>
                     <div class="dropdown-menu o_cursor_default" role="menu">
                         <a t-if="!widget.isMobile" role="menuitem" class="dropdown-item o_kanban_toggle_fold" href="#">Fold</a>
                         <t t-if="widget.grouped_by_m2o">
@@ -56,7 +56,7 @@
                     <input type="text" class="form-control o_input" placeholder="Column title"/>
                     <button class="btn btn-primary o_kanban_add" type="button">Add</button>
                 </div>
-                <span t-if="!widget.isMobile" class="o_discard_msg text-muted float-right">Esc to discard</span>
+                <span t-if="!widget.isMobile" class="o_discard_msg text-muted float-end">Esc to discard</span>
                 <t t-if="widget.examples &amp;&amp; !widget.isMobile">
                     <button type="button" class="btn btn-link o_kanban_examples">See examples</button>
                 </t>
@@ -70,9 +70,9 @@
 
 <t t-name="KanbanView.RecordQuickCreate.buttons">
     <div class="d-flex">
-        <button class="btn btn-primary o_kanban_add mr-1 text-truncate" data-hotkey="r">Add</button>
-        <button class="btn btn-primary o_kanban_edit mr-1 text-truncate" data-hotkey="a">Edit</button>
-        <button class="btn btn-secondary o_kanban_cancel ml-auto" data-hotkey="d">
+        <button class="btn btn-primary o_kanban_add me-1 text-truncate" data-hotkey="r">Add</button>
+        <button class="btn btn-primary o_kanban_edit me-1 text-truncate" data-hotkey="a">Edit</button>
+        <button class="btn btn-secondary o_kanban_cancel ms-auto" data-hotkey="d">
             <i class="fa fa-trash"/>
         </button>
     </div>
@@ -112,7 +112,7 @@
                 <t t-set="count" t-value="widget.subgroupCounts and widget.subgroupCounts[color] or 0"/>
                 <div t-attf-class="progress-bar transition-off bg-#{color_value}#{count ? ' o_bar_has_records' : ''}#{widget.activeFilter ? ' progress-bar-animated progress-bar-striped' : ''}"
                     t-att-data-filter="color"
-                    t-attf-data-original-title="#{count} #{color}"
+                    t-attf-data-bs-original-title="#{count} #{color}"
                     aria-valuemin="0" aria-valuemax="100" t-att-aria-valuenow="count*100" role="progressbar"
                     t-attf-style="width: #{count ? (count * 100 / widget.groupCount) : 0}%;"/>
             </t>
@@ -146,7 +146,7 @@
         <ul class="nav nav-pills flex-column">
             <t t-foreach="examples" t-as="example">
                 <li class="nav-item">
-                    <a t-attf-aria-controls="example_#{example_index}" data-toggle="tab" role="tab" t-att-data-example-index="example_index" t-attf-href="#example_#{example_index}" t-attf-class="nav-link#{example_index == 0 and ' active' or ''}"> <t t-esc="example.name"/> </a>
+                    <a t-attf-aria-controls="example_#{example_index}" data-bs-toggle="tab" role="tab" t-att-data-example-index="example_index" t-attf-href="#example_#{example_index}" t-attf-class="nav-link#{example_index == 0 and ' active' or ''}"> <t t-esc="example.name"/> </a>
                 </li>
             </t>
         </ul>
@@ -180,7 +180,7 @@
             <t t-if="example.bullets and _.random(0, 5) > 3">
                 <t t-out="_.sample(example.bullets)"/>
             </t>
-        <img class="float-right o_ghost_avatar" src="/base/static/img/avatar.png" alt="Avatar"/>
+        <img class="float-end o_ghost_avatar" src="/base/static/img/avatar.png" alt="Avatar"/>
     </div>
 </t>
 
@@ -205,7 +205,7 @@
     <div class="o_kanban_examples_ghost">
         <div class="o_ghost_content"/>
         <div class="o_ghost_content o_ghost_tag"/>
-        <img class="float-right o_ghost_avatar" src="/base/static/img/avatar.png" alt="Avatar"/>
+        <img class="float-end o_ghost_avatar" src="/base/static/img/avatar.png" alt="Avatar"/>
     </div>
 </t>
 
diff --git a/addons/web/static/src/legacy/xml/name_and_signature.xml b/addons/web/static/src/legacy/xml/name_and_signature.xml
index 05148f251e4..762b52c4168 100644
--- a/addons/web/static/src/legacy/xml/name_and_signature.xml
+++ b/addons/web/static/src/legacy/xml/name_and_signature.xml
@@ -51,28 +51,28 @@
             -->
             <div class="o_web_sign_signature_group bg-white card mt-3" style="overflow: hidden;">
                 <div class="card-header">
-                    <div class="row no-gutters">
+                    <div class="row g-0">
                         <div class="col-auto">
-                            <a role="button" href="#" t-attf-class="o_web_sign_auto_button mr-2 btn btn-light {{ widget.signMode === 'auto' ? 'active': '' }}">
+                            <a role="button" href="#" t-attf-class="o_web_sign_auto_button me-2 btn btn-light {{ widget.signMode === 'auto' ? 'active': '' }}">
                                 Auto
                             </a>
                         </div>
                         <div class="col-auto">
-                            <a role="button" href="#" t-attf-class="o_web_sign_draw_button mr-2 btn btn-light {{ widget.signMode === 'draw' ? 'active': '' }}">
+                            <a role="button" href="#" t-attf-class="o_web_sign_draw_button me-2 btn btn-light {{ widget.signMode === 'draw' ? 'active': '' }}">
                                 Draw
                             </a>
                         </div>
                         <div class="col-auto">
-                            <a role="button" href="#" t-attf-class="o_web_sign_load_button mr-2 btn btn-light {{ widget.signMode === 'load' ? 'active': '' }}">
+                            <a role="button" href="#" t-attf-class="o_web_sign_load_button me-2 btn btn-light {{ widget.signMode === 'load' ? 'active': '' }}">
                                 Load
                             </a>
                         </div>
-                        <div t-attf-class="o_web_sign_draw_clear col-auto ml-auto {{ widget.signMode !== 'draw' ? 'd-none' : '' }}">
+                        <div t-attf-class="o_web_sign_draw_clear col-auto ms-auto {{ widget.signMode !== 'draw' ? 'd-none' : '' }}">
                             <a role="button" href="#" class="btn btn-link">
                                 Clear
                             </a>
                         </div>
-                        <div t-attf-class="o_web_sign_auto_select_style col-auto ml-auto {{ widget.signMode !== 'auto' ? 'd-none' : '' }}">
+                        <div t-attf-class="o_web_sign_auto_select_style col-auto ms-auto {{ widget.signMode !== 'auto' ? 'd-none' : '' }}">
                             <a role="button" href="#" class="btn btn-link">
                                 Style
                             </a>
diff --git a/addons/web/static/src/legacy/xml/pivot.xml b/addons/web/static/src/legacy/xml/pivot.xml
index f409549d82a..a6a178ae580 100644
--- a/addons/web/static/src/legacy/xml/pivot.xml
+++ b/addons/web/static/src/legacy/xml/pivot.xml
@@ -28,9 +28,9 @@
                         <t t-set="cell" t-value="row"/>
                     </t>
                     <t t-foreach="row.subGroupMeasurements" t-as="cell" t-key="'row_cell_' + cell_index">
-                        <td class="o_pivot_cell_value text-right" t-att-class="{
+                        <td class="o_pivot_cell_value text-end" t-att-class="{
                                 o_empty: cell.value === undefined,
-                                'font-weight-bold': cell.isBold,
+                                'fw-bold': cell.isBold,
                             }" t-on-click="() => this.trigger('open_view', cell)"
                                t-on-mouseover="_onMouseEnter" t-on-mouseout="_onMouseLeave">
                             <t t-if="cell.value !== undefined">
@@ -40,9 +40,9 @@
                                          o_null: cell.value === 0,
                                     }" t-esc="_getFormattedVariation(cell)"/>
                                 <div t-elif="props.fields and props.fields[cell.measure].type === 'boolean'" class="o_value">
-                                    <div class="custom-control custom-checkbox">
-                                        <input type="checkbox" t-attf-id="checkbox_{{cell_index}}_{{row_index}}" disabled="disabled" t-att-checked="cell.value" class="custom-control-input"/>
-                                        <label t-attf-for="checkbox_{{cell_index}}_{{row_index}}" class="custom-control-label"/>
+                                    <div class="custom-control form-check">
+                                        <input type="checkbox" t-attf-id="checkbox_{{cell_index}}_{{row_index}}" disabled="disabled" t-att-checked="cell.value" class="form-check-input"/>
+                                        <label t-attf-for="checkbox_{{cell_index}}_{{row_index}}" class="form-check-label"/>
                                     </div>
                                 </div>
                                 <div t-else="1" class="o_value" t-esc="_getFormattedValue(cell)"/>
diff --git a/addons/web/static/src/legacy/xml/search_panel.xml b/addons/web/static/src/legacy/xml/search_panel.xml
index ca38ac17334..29927f9c1a9 100644
--- a/addons/web/static/src/legacy/xml/search_panel.xml
+++ b/addons/web/static/src/legacy/xml/search_panel.xml
@@ -7,7 +7,7 @@
             t-attf-class="o_search_panel_section o_search_panel_{{ section.type }}"
             >
             <header class="o_search_panel_section_header text-uppercase o_cursor_default">
-                <i t-attf-class="fa {{ section.icon }} o_search_panel_section_icon {{section.type === 'category' &amp;&amp; !section.color ? 'text-odoo' : ''}} mr-2"
+                <i t-attf-class="fa {{ section.icon }} o_search_panel_section_icon {{section.type === 'category' &amp;&amp; !section.color ? 'text-odoo' : ''}} me-2"
                     t-att-style="section.color and ('color: ' + section.color)"
                 />
                 <b t-esc="section.description"/>
@@ -27,22 +27,22 @@
                         <t t-set="_section" t-value="section"/>
                         <t t-set="group" t-value="section.groups.get(groupId)"/>
                         <header class="o_search_panel_group_header">
-                            <div class="custom-control custom-checkbox">
+                            <div class="custom-control form-check">
                                 <!-- TODO: "indeterminate" could not be set in the template and had to be set in
                                      JS manually. See https://github.com/odoo/owl/issues/713 (adapt when solved)
                                 -->
                                 <input type="checkbox"
-                                    class="custom-control-input"
+                                    class="form-check-input"
                                     t-attf-id="{{ section.id }}_input_{{ groupId }})"
                                     t-on-click="() => this._toggleFilterGroup(section.id, group)"
                                 />
                                 <label t-attf-for="{{ section.id }}_input_{{ groupId }})"
-                                    class="o_search_panel_label custom-control-label"
+                                    class="o_search_panel_label form-check-label"
                                     t-att-class="{ o_with_counters: group.enableCounters }"
                                     t-att-title="group.tooltip or false"
                                     >
                                     <span class="o_search_panel_label_title">
-                                        <span t-if="group.hex_color" class="mr-1" t-attf-style="color: {{ group.hex_color }};">●</span>
+                                        <span t-if="group.hex_color" class="me-1" t-attf-style="color: {{ group.hex_color }};">●</span>
                                         <t t-esc="group.name"/>
                                     </span>
                                 </label>
@@ -91,7 +91,7 @@
                     <span t-else="" class="o_search_panel_label_title" t-esc="value.display_name"/>
                 </label>
                 <span t-if="section.enableCounters and value.__count gt 0"
-                    class="o_search_panel_counter text-muted ml-2 small"
+                    class="o_search_panel_counter text-muted ms-2 small"
                     t-esc="value.__count"
                 />
             </header>
@@ -109,19 +109,19 @@
         class="o_search_panel_filter_value list-group-item border-0"
         >
         <t t-set="value" t-value="values.get(valueId)"/>
-        <div class="custom-control custom-checkbox w-100">
+        <div class="custom-control form-check w-100">
             <input type="checkbox"
                 t-attf-id="{{ section.id }}_input_{{ valueId }}"
                 t-att-checked="state.active[section.id][valueId]"
-                class="custom-control-input"
+                class="form-check-input"
                 t-on-click="ev => this._toggleFilterValue(section.id, valueId, ev)"
             />
-            <label class="o_search_panel_label custom-control-label"
+            <label class="o_search_panel_label form-check-label"
                 t-attf-for="{{ section.id }}_input_{{ valueId }}"
                 t-att-title="(group and group.tooltip) or false">
                 <span class="o_search_panel_label_title" t-esc="value.display_name"/>
                 <span t-if="section.enableCounters and value.__count gt 0"
-                    class="o_search_panel_counter text-muted ml-2 small"
+                    class="o_search_panel_counter text-muted ms-2 small"
                     t-esc="value.__count"
                 />
             </label>
diff --git a/addons/web/static/src/legacy/xml/web_calendar.xml b/addons/web/static/src/legacy/xml/web_calendar.xml
index e30a82609ff..7d3120d9273 100644
--- a/addons/web/static/src/legacy/xml/web_calendar.xml
+++ b/addons/web/static/src/legacy/xml/web_calendar.xml
@@ -22,11 +22,11 @@
     <t t-name="CalendarView.event.popover.placeholder">
         <div t-attf-class="o_cw_popover popover card shadow #{typeof color === 'number' ? _.str.sprintf('o_calendar_color_%s', color) : ''}" role="tooltip">
             <div class="popover-arrow"/>
-            <div class="card-header d-flex justify-content-between py-2 pr-2">
+            <div class="card-header d-flex justify-content-between py-2 pe-2">
                 <h4 class="p-0 pt-1">
-                    <span class="popover-header border-0"/><span t-if="displayLock" class="ml-1"><i class="fa fa-lock"/></span>
+                    <span class="popover-header border-0"/><span t-if="displayLock" class="ms-1"><i class="fa fa-lock"/></span>
                 </h4>
-                <span class="o_cw_popover_close ml-4 mt-2 mr-2"><i class="fa fa-close"/></span>
+                <span class="o_cw_popover_close ms-4 mt-2 me-2"><i class="fa fa-close"/></span>
             </div>
             <div class="o_cw_body">
             </div>
@@ -48,7 +48,7 @@
             <ul t-if="widget.isEventDetailsVisible()" class="list-group list-group-flush o_cw_popover_fields_secondary"/>
             <div t-attf-class="card-footer border-top #{ !widget.isEventEditable() &amp;&amp;!widget.isEventDeletable() ? 'o_footer_shrink' : '' }">
                 <a t-if="widget.isEventEditable()" href="#" class="btn btn-primary o_cw_popover_edit">Edit</a>
-                <a t-if="widget.isEventDeletable()" href="#" class="btn btn-secondary o_cw_popover_delete ml-2">Delete</a>
+                <a t-if="widget.isEventDeletable()" href="#" class="btn btn-secondary o_cw_popover_delete ms-2">Delete</a>
             </div>
         </div>
     </t>
@@ -58,7 +58,7 @@
         <t t-set="titleWithoutSpace" t-value="widget.title.split(' ').join('')"></t>
         <div class="o_calendar_filter">
             <div class="d-flex">
-                <div class="o_calendar_filter_items_checkall mr-2" data-value="check_all">
+                <div class="o_calendar_filter_items_checkall me-2" data-value="check_all">
                     <input t-att-id="widget.title + '_id'" type="checkbox" name="selection" class="position-absolute"
                            t-att-checked="widget.filter_check_all[widget.fieldName] ? true : undefined"
                     />
@@ -68,8 +68,8 @@
                         </span>
                     </label>
                 </div>
-                <div t-if="needCollapse" type="button" data-toggle="collapse"
-                     t-attf-data-target="#o_cw_filter_collapse_#{titleWithoutSpace}"
+                <div t-if="needCollapse" type="button" data-bs-toggle="collapse"
+                     t-attf-data-bs-target="#o_cw_filter_collapse_#{titleWithoutSpace}"
                      class="justify-content-between align-items-center h5">
                     <span t-esc="widget.title"/>
                     <i class="o_cw_filter_collapse_icon fa fa-chevron-down"/>
@@ -88,12 +88,12 @@
                         <input type="checkbox" t-att-id="idForLabel" name="selection" class="position-absolute" t-att-checked="filter.active ? true : undefined"/>
 
                         <label t-att-for="idForLabel" class="d-flex align-items-start m-0">
-                            <span t-attf-class="o_cw_filter_input_bg align-items-start d-flex flex-shrink-0 justify-content-center position-relative mr-1 #{widget.avatar_field ? 'o_beside_avatar' : ''}"
+                            <span t-attf-class="o_cw_filter_input_bg align-items-start d-flex flex-shrink-0 justify-content-center position-relative me-1 #{widget.avatar_field ? 'o_beside_avatar' : ''}"
                                 t-att-style="color and !isColorNumber ? _.str.sprintf('border-color:%s;background-color:%s', color, color) : ''">
                                 <i class="fa fa-check position-relative"/>
                             </span>
-                            <i t-if="filter.value == 'all'" class="o_cw_filter_avatar fa fa-users fa-fw  flex-shrink-0 mr-1" role="img" aria-label="Avatar" title="Avatar"/>
-                            <img t-elif="widget.avatar_field and filter.value" t-attf-src="/web/image/#{widget.avatar_model}/#{filter.value}/#{widget.avatar_field}" class="o_cw_filter_avatar flex-shrink-0 mr-1" alt="Avatar"/>
+                            <i t-if="filter.value == 'all'" class="o_cw_filter_avatar fa fa-users fa-fw  flex-shrink-0 me-1" role="img" aria-label="Avatar" title="Avatar"/>
+                            <img t-elif="widget.avatar_field and filter.value" t-attf-src="/web/image/#{widget.avatar_model}/#{filter.value}/#{widget.avatar_field}" class="o_cw_filter_avatar flex-shrink-0 me-1" alt="Avatar"/>
                             <span class="o_cw_filter_title text-truncate flex-grow" t-esc="filter.label" t-attf-title="#{ ['all', false].includes(filter.value) or !widget.avatar_field ? filter.label : '' }"/>
                         </label>
 
@@ -127,7 +127,7 @@
 
     <t t-name="CalendarView.scale_buttons">
         <div class="btn-group dropdown">
-            <button class="btn btn-secondary dropdown-toggle scale_button_selection text-uppercase" data-hotkey="v" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <button class="btn btn-secondary dropdown-toggle scale_button_selection text-uppercase" data-hotkey="v" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             </button>
             <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                 <button type="button" t-if="scales.includes('day')" class="dropdown-item o_calendar_button_day btn btn-secondary text-uppercase" data-hotkey="d">Day</button>
@@ -148,7 +148,7 @@
     <t t-name="CalendarView.yearEvent.popover">
         <div class="o_cw_body">
             <t t-foreach="groupKeys" t-as="groupKey">
-                <div class="font-weight-bold mt-2" t-esc="groupKey"/>
+                <div class="fw-bold mt-2" t-esc="groupKey"/>
                 <t t-foreach="groupedEvents[groupKey]" t-as="event">
                     <t t-set="record" t-value="event.extendedProps.record"/>
                     <t t-set="color" t-value="event.extendedProps.color_index"/>
diff --git a/addons/web/static/src/legacy/xml/week_days.xml b/addons/web/static/src/legacy/xml/week_days.xml
index 39f846f8d3b..b782014f874 100644
--- a/addons/web/static/src/legacy/xml/week_days.xml
+++ b/addons/web/static/src/legacy/xml/week_days.xml
@@ -4,7 +4,7 @@
         <div class="o_recurrent_weekdays border mt-2 mb-2">
             <table class="table table-responsive mb-0">
                 <tr>
-                    <th t-foreach="weekdaysShort" t-as="day" t-key="day" class="text-center border font-weight-bold">
+                    <th t-foreach="weekdaysShort" t-as="day" t-key="day" class="text-center border fw-bold">
                         <div class="o_recurrent_weekday_label" t-att-title="props.record.fields[day].string">
                             <t t-esc="props.record.fields[day].string"/>
                         </div>
diff --git a/addons/web/static/src/libs/fontawesome/css/font-awesome.css b/addons/web/static/src/libs/fontawesome/css/font-awesome.css
index 50bf1eba58e..2512d56226c 100644
--- a/addons/web/static/src/libs/fontawesome/css/font-awesome.css
+++ b/addons/web/static/src/libs/fontawesome/css/font-awesome.css
@@ -2273,7 +2273,7 @@
 .fa-meetup:before {
   content: "\f2e0";
 }
-.sr-only {
+.visually-hidden {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -2283,8 +2283,8 @@
   clip: rect(0, 0, 0, 0);
   border: 0;
 }
-.sr-only-focusable:active,
-.sr-only-focusable:focus {
+.visually-hidden-focusable:active,
+.visually-hidden-focusable:focus {
   position: static;
   width: auto;
   height: auto;
diff --git a/addons/web/static/src/public/database_manager.create_form.qweb.html b/addons/web/static/src/public/database_manager.create_form.qweb.html
index d5e63bda863..deecb468656 100644
--- a/addons/web/static/src/public/database_manager.create_form.qweb.html
+++ b/addons/web/static/src/public/database_manager.create_form.qweb.html
@@ -28,7 +28,7 @@
     <div class="form-group row">
         <label for="lang" class="col-md-4 col-form-label">Language</label>
         <div class="col-md-8">
-            <select id="lang" name="lang" class="form-control" required="required" autocomplete="off">
+            <select id="lang" name="lang" class="form-select" required="required" autocomplete="off">
                 <t t-foreach="langs" t-as="lang">
                     <t t-if="lang[0] == 'en_US'">
                         <option t-att-value="lang[0]" t-out="lang[1]" selected="selected"/>
@@ -43,7 +43,7 @@
     <div class="form-group row">
         <label for="country" class="col-md-4 col-form-label ">Country</label>
         <div class="col-md-8">
-            <select id="country" name="country_code" class="form-control" autocomplete="off">
+            <select id="country" name="country_code" class="form-select" autocomplete="off">
                 <option value=""></option>
                 <t t-foreach="countries" t-as="country">
                     <option t-att-value="country[0]" t-out="country[1]"/>
diff --git a/addons/web/static/src/public/database_manager.qweb.html b/addons/web/static/src/public/database_manager.qweb.html
index 8b9fa1acf42..e9a28780ba6 100644
--- a/addons/web/static/src/public/database_manager.qweb.html
+++ b/addons/web/static/src/public/database_manager.qweb.html
@@ -26,7 +26,7 @@
                 <t t-elif="insecure and databases">
                     <div class="alert alert-warning">
                         Warning, your Odoo database manager is not protected.<br/>
-                        Please <a href="#" data-toggle="modal" data-target=".o_database_master">set a master password</a> to secure it.
+                        Please <a href="#" data-bs-toggle="modal" data-bs-target=".o_database_master">set a master password</a> to secure it.
                     </div>
                 </t>
                 <t t-if="error">
@@ -39,12 +39,12 @@
                             <div class="list-group-item d-flex align-items-center">
                                 <a t-attf-href="/web?db={{ db }}" class="d-block flex-grow-1">
                                     <t t-if="db in incompatible_databases">
-                                        <i class="icon fa fa-warning float-right text-warning" title="This database may not be compatible"></i>
+                                        <i class="icon fa fa-warning float-end text-warning" title="This database may not be compatible"></i>
                                     </t>
                                     <t t-out="db" />
                                 </a>
                                 <t t-if="manage">
-                                    <div class="btn-group btn-group-sm float-right">
+                                    <div class="btn-group btn-group-sm float-end">
                                         <button type="button" t-att-data-db="db" data-bs-target=".o_database_backup" class="o_database_action btn btn-primary">
                                             <i class="fa fa-floppy-o fa-fw"></i> Backup
                                         </button>
@@ -61,9 +61,9 @@
                     </div>
                     <t t-if="manage">
                         <div class="d-flex mt-2">
-                            <button type="button" data-toggle="modal" data-target=".o_database_create" class="btn btn-primary flex-grow-1">Create Database</button>
-                            <button type="button" data-toggle="modal" data-target=".o_database_restore" class="btn btn-primary flex-grow-1 ml-2">Restore Database</button>
-                            <button type="button" data-toggle="modal" data-target=".o_database_master" class="btn btn-primary flex-grow-1 ml-2">Set Master Password</button>
+                            <button type="button" data-bs-toggle="modal" data-bs-target=".o_database_create" class="btn btn-primary flex-grow-1">Create Database</button>
+                            <button type="button" data-bs-toggle="modal" data-bs-target=".o_database_restore" class="btn btn-primary flex-grow-1 ms-2">Restore Database</button>
+                            <button type="button" data-bs-toggle="modal" data-bs-target=".o_database_master" class="btn btn-primary flex-grow-1 ms-2">Set Master Password</button>
                         </div>
                     </t>
                     <t t-else="">
@@ -75,9 +75,9 @@
                 <t t-elif="list_db">
                     <form role="form" action="/web/database/create" method="post">
                         <t t-call="create_form" />
-                        <input type="submit" value="Create database" class="btn btn-primary float-left"/>
+                        <input type="submit" value="Create database" class="btn btn-primary float-start"/>
                     </form>
-                    <a role="button" data-toggle="modal" data-target=".o_database_restore" class="btn btn-link">or restore a database</a>
+                    <a role="button" data-bs-toggle="modal" data-bs-target=".o_database_restore" class="btn btn-link">or restore a database</a>
                 </t>
             </div>
         </div>
@@ -89,7 +89,7 @@
                     <form role="form" action="/web/database/create" method="post">
                         <div class="modal-header">
                             <h4 class="modal-title">Create Database</h4>
-                            <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
+                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                         </div>
                         <div class="modal-body">
                             <t t-call="create_form" />
@@ -98,7 +98,7 @@
                             </small>
                         </div>
                         <div class="modal-footer">
-                            <input type="submit" value="Continue" class="btn btn-primary float-right"/>
+                            <input type="submit" value="Continue" class="btn btn-primary float-end"/>
                         </div>
                     </form>
                 </div>
@@ -111,7 +111,7 @@
                 <div class="modal-content">
                     <div class="modal-header">
                         <h4 class="modal-title">Restore Database</h4>
-                        <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                     </div>
                     <form id="form_restore_db" role="form" action="/web/database/restore" method="post" enctype="multipart/form-data">
                         <div class="modal-body">
@@ -134,18 +134,18 @@
                                     In order to avoid conflicts between databases, Odoo needs to know if this database was moved or copied.<br/>
                                     If you don't know, answer "This database is a copy".
                                 </p>
-                                <div class="custom-control custom-radio">
-                                    <input id="radio_copy_true" name="copy" type="radio" class="custom-control-input" value="true" checked="1" />
-                                    <label for="radio_copy_true" class="custom-control-label">This database is a copy</label>
+                                <div class="custom-control form-check">
+                                    <input id="radio_copy_true" name="copy" type="radio" class="form-check-input" value="true" checked="1" />
+                                    <label for="radio_copy_true" class="form-check-label">This database is a copy</label>
                                 </div>
-                                <div class="custom-control custom-radio">
-                                    <input id="radio_copy_false" name="copy" type="radio" class="custom-control-input" value="false" />
-                                    <label for="radio_copy_false" class="custom-control-label">This database was moved</label>
+                                <div class="custom-control form-check">
+                                    <input id="radio_copy_false" name="copy" type="radio" class="form-check-input" value="false" />
+                                    <label for="radio_copy_false" class="form-check-label">This database was moved</label>
                                 </div>
                             </div>
                         </div>
                         <div class="modal-footer">
-                            <input type="submit" value="Continue" class="btn btn-primary float-right"/>
+                            <input type="submit" value="Continue" class="btn btn-primary float-end"/>
                         </div>
                     </form>
                 </div>
@@ -158,7 +158,7 @@
                 <div class="modal-content">
                     <div class="modal-header">
                         <h4 class="modal-title">Set Master Password</h4>
-                        <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                     </div>
                     <form id="form_change_pwd" role="form" action="/web/database/change_password" method="post">
                         <div class="modal-body">
@@ -174,7 +174,7 @@
                             </div>
                         </div>
                         <div class="modal-footer">
-                            <input type="submit" value="Continue" class="btn btn-primary float-right"/>
+                            <input type="submit" value="Continue" class="btn btn-primary float-end"/>
                         </div>
                     </form>
                 </div>
@@ -187,7 +187,7 @@
                 <div class="modal-content">
                     <div class="modal-header">
                         <h4 class="modal-title">Duplicate Database</h4>
-                        <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                     </div>
                     <form id="form-duplicate-db" role="form" action="/web/database/duplicate" method="post">
                         <div class="modal-body">
@@ -203,7 +203,7 @@
                             </div>
                         </div>
                         <div class="modal-footer">
-                            <input type="submit" value="Continue" class="btn btn-primary float-right"/>
+                            <input type="submit" value="Continue" class="btn btn-primary float-end"/>
                         </div>
                     </form>
                 </div>
@@ -216,7 +216,7 @@
                 <div class="modal-content">
                     <div class="modal-header">
                         <h4 class="modal-title">Delete Database</h4>
-                        <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                     </div>
                     <form id="form_drop_db" role="form" action="/web/database/drop" method="post">
                         <div class="modal-body">
@@ -227,7 +227,7 @@
                             </div>
                         </div>
                         <div class="modal-footer">
-                            <input type="submit" value="Delete" class="btn btn-primary float-right"/>
+                            <input type="submit" value="Delete" class="btn btn-primary float-end"/>
                         </div>
                     </form>
                 </div>
@@ -240,7 +240,7 @@
                 <div class="modal-content">
                     <div class="modal-header">
                         <h4 class="modal-title">Backup Database</h4>
-                        <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                     </div>
                     <form id="form_backup_db" role="form" action="/web/database/backup" method="post">
                         <div class="modal-body">
@@ -251,14 +251,14 @@
                             </div>
                             <div class="form-group">
                                 <label for="backup_format" class="col-form-label">Backup Format</label>
-                                <select id="backup_format" name="backup_format" class="form-control" required="required">
+                                <select id="backup_format" name="backup_format" class="form-select" required="required">
                                     <option value="zip">zip (includes filestore)</option>
                                     <option value="dump">pg_dump custom format (without filestore)</option>
                                 </select>
                             </div>
                         </div>
                         <div class="modal-footer">
-                            <input type="submit" value="Backup" class="btn btn-primary float-right"/>
+                            <input type="submit" value="Backup" class="btn btn-primary float-end"/>
                         </div>
                     </form>
                 </div>
diff --git a/addons/web/static/src/search/action_menus/action_menus.xml b/addons/web/static/src/search/action_menus/action_menus.xml
index 56ca0a56f9e..af85b444758 100644
--- a/addons/web/static/src/search/action_menus/action_menus.xml
+++ b/addons/web/static/src/search/action_menus/action_menus.xml
@@ -5,7 +5,7 @@
         <div class="o_cp_action_menus">
             <Dropdown t-if="printItems.length" togglerClass="'btn btn-secondary'" tooltip="'Printing options'" hotkey="'shift+u'">
                 <t t-set-slot="toggler">
-                    <i class="small mr-1 fa fa-print"/>
+                    <i class="small me-1 fa fa-print"/>
                     <span class="o_dropdown_title">Print</span>
                 </t>
                 <t t-foreach="printItems" t-as="item" t-key="item.key">
@@ -17,7 +17,7 @@
 
             <Dropdown t-if="actionItems.length" togglerClass="'btn btn-secondary'" tooltip="'Additional actions'" hotkey="'u'">
                 <t t-set-slot="toggler">
-                    <i class="small mr-1 fa fa-cog"/>
+                    <i class="small me-1 fa fa-cog"/>
                     <span class="o_dropdown_title">Action</span>
                 </t>
                 <t t-foreach="actionItems" t-as="item" t-key="item.key">
diff --git a/addons/web/static/src/search/comparison_menu/comparison_menu.xml b/addons/web/static/src/search/comparison_menu/comparison_menu.xml
index b3b8bf29b64..9d77955c4e6 100644
--- a/addons/web/static/src/search/comparison_menu/comparison_menu.xml
+++ b/addons/web/static/src/search/comparison_menu/comparison_menu.xml
@@ -4,7 +4,7 @@
     <t t-name="web.ComparisonMenu" owl="1">
         <Dropdown class="'o_comparison_menu btn-group'" togglerClass="'btn btn-light'">
             <t t-set-slot="toggler">
-                <i class="mr-1" t-att-class="icon"/>
+                <i class="me-1" t-att-class="icon"/>
                 <span class="o_dropdown_title">Comparison</span>
             </t>
             <t t-foreach="items" t-as="item" t-key="item.id">
diff --git a/addons/web/static/src/search/favorite_menu/favorite_menu.xml b/addons/web/static/src/search/favorite_menu/favorite_menu.xml
index 046fe5ea892..4952b4b6588 100644
--- a/addons/web/static/src/search/favorite_menu/favorite_menu.xml
+++ b/addons/web/static/src/search/favorite_menu/favorite_menu.xml
@@ -4,7 +4,7 @@
     <t t-name="web.FavoriteMenu" owl="1">
         <Dropdown class="'o_favorite_menu btn-group'" togglerClass="'btn btn-light'">
             <t t-set-slot="toggler">
-                <i class="mr-1" t-att-class="icon"/>
+                <i class="me-1" t-att-class="icon"/>
                 <span class="o_dropdown_title">Favorites</span>
             </t>
             <t t-set="currentGroup" t-value="null"/>
@@ -19,7 +19,7 @@
                         >
                         <span class="d-flex p-0 align-items-center justify-content-between">
                             <t t-esc="item.description"/>
-                            <i class="ml-1 o_icon_right fa fa-trash-o"
+                            <i class="ms-1 o_icon_right fa fa-trash-o"
                                 title="Delete item"
                                 t-on-click.stop="() => this.openConfirmationDialog(item.id)"
                             />
diff --git a/addons/web/static/src/search/filter_menu/custom_filter_item.xml b/addons/web/static/src/search/filter_menu/custom_filter_item.xml
index fa2fb2df9e5..dbfc1b118bb 100644
--- a/addons/web/static/src/search/filter_menu/custom_filter_item.xml
+++ b/addons/web/static/src/search/filter_menu/custom_filter_item.xml
@@ -93,7 +93,7 @@
             </t>
             <div class="px-3 py-2">
                 <button type="button"
-                    class="btn btn-primary o_apply_filter mr-2"
+                    class="btn btn-primary o_apply_filter me-2"
                     t-on-click="onApply"
                 >
                     Apply
diff --git a/addons/web/static/src/search/filter_menu/filter_menu.xml b/addons/web/static/src/search/filter_menu/filter_menu.xml
index 0dbec7e1018..473fe92face 100644
--- a/addons/web/static/src/search/filter_menu/filter_menu.xml
+++ b/addons/web/static/src/search/filter_menu/filter_menu.xml
@@ -4,7 +4,7 @@
     <t t-name="web.FilterMenu" owl="1">
         <Dropdown class="'o_filter_menu btn-group ' + props.class" togglerClass="'btn btn-light'">
             <t t-set-slot="toggler">
-                <i class="mr-1" t-att-class="icon"/>
+                <i class="me-1" t-att-class="icon"/>
                 <span class="o_dropdown_title">Filters</span>
             </t>
             <t t-set="currentGroup" t-value="null"/>
diff --git a/addons/web/static/src/search/group_by_menu/group_by_menu.xml b/addons/web/static/src/search/group_by_menu/group_by_menu.xml
index 70c2776df67..b2911a39b41 100644
--- a/addons/web/static/src/search/group_by_menu/group_by_menu.xml
+++ b/addons/web/static/src/search/group_by_menu/group_by_menu.xml
@@ -7,8 +7,8 @@
             t-props="dropdownProps"
         >
             <t t-set-slot="toggler">
-                <i class="mr-1" t-att-class="icon"/>
-                <span class="o_dropdown_title">Group By<t t-if="props.showCaretDown"> <i class="fa fa-caret-down ml-1"/></t></span>
+                <i class="me-1" t-att-class="icon"/>
+                <span class="o_dropdown_title">Group By<t t-if="props.showCaretDown"> <i class="fa fa-caret-down ms-1"/></t></span>
             </t>
             <t t-set="currentGroup" t-value="null"/>
             <t t-foreach="items" t-as="item" t-key="item.id">
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 59034b833a0..6e96ce6b818 100644
--- a/addons/web/static/src/search/search_bar/search_bar.xml
+++ b/addons/web/static/src/search/search_bar/search_bar.xml
@@ -15,7 +15,7 @@
                 <t t-else="">
                     <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">
+                <div class="o_facet_values border border-odoo border-start-0">
                     <t t-foreach="facet.values" t-as="facetValue" t-key="facetValue_index">
                         <t t-if="!facetValue_first">
                             <span class="o_facet_values_sep" t-esc="facet.separator"/>
@@ -67,7 +67,7 @@
                             <t t-esc="item.label"/>
                         </t>
                         <t t-else="">
-                            Search <b t-esc="item.searchItemDescription"/> <t t-esc="item.preposition"/>: <b class="font-italic text-primary" t-esc="item.label"/>
+                            Search <b t-esc="item.searchItemDescription"/> <t t-esc="item.preposition"/>: <b class="fst-italic text-primary" t-esc="item.label"/>
                         </t>
                     </a>
                 </li>
diff --git a/addons/web/static/src/search/search_panel/search_panel.scss b/addons/web/static/src/search/search_panel/search_panel.scss
index 83bb47148bf..cc91f8f949d 100644
--- a/addons/web/static/src/search/search_panel/search_panel.scss
+++ b/addons/web/static/src/search/search_panel/search_panel.scss
@@ -103,12 +103,14 @@ $o-searchpanel-filter-default-color: #D59244;
                 background: $gray-500;
                 margin-left: 4px;
                 @include o-position-absolute(0, $left: $o-searchpanel-p-tiny);
-                @include size(1px, 100%);
+                width: 1px;
+                height: 100%;
             }
 
             &:after {
                 top: 12px;
-                @include size(8px, 1px);
+                width: 8px;
+                height: 1px;
             }
 
             &:last-child:before {
diff --git a/addons/web/static/src/search/search_panel/search_panel.xml b/addons/web/static/src/search/search_panel/search_panel.xml
index b850fe03662..4ce1ea3891d 100644
--- a/addons/web/static/src/search/search_panel/search_panel.xml
+++ b/addons/web/static/src/search/search_panel/search_panel.xml
@@ -7,7 +7,7 @@
             t-attf-class="o_search_panel_section o_search_panel_{{ section.type }}"
             >
             <header class="o_search_panel_section_header text-uppercase o_cursor_default">
-                <i t-attf-class="fa {{ section.icon }} o_search_panel_section_icon {{section.type === 'category' &amp;&amp; !section.color ? 'text-odoo' : ''}} mr-2"
+                <i t-attf-class="fa {{ section.icon }} o_search_panel_section_icon {{section.type === 'category' &amp;&amp; !section.color ? 'text-odoo' : ''}} me-2"
                     t-att-style="section.color and ('color: ' + section.color)"
                 />
                 <b t-esc="section.description"/>
@@ -27,22 +27,22 @@
                         <t t-set="_section" t-value="section"/>
                         <t t-set="group" t-value="section.groups.get(groupId)"/>
                         <header class="o_search_panel_group_header">
-                            <div class="custom-control custom-checkbox">
+                            <div class="custom-control form-check">
                                 <!-- TODO: "indeterminate" could not be set in the template and had to be set in
                                      JS manually. See https://github.com/odoo/owl/issues/713 (adapt when solved)
                                 -->
                                 <input type="checkbox"
-                                    class="custom-control-input"
+                                    class="form-check-input"
                                     t-attf-id="{{ section.id }}_input_{{ groupId }})"
                                     t-on-click="() => this.toggleFilterGroup(section.id, group)"
                                 />
                                 <label t-attf-for="{{ section.id }}_input_{{ groupId }})"
-                                    class="o_search_panel_label custom-control-label"
+                                    class="o_search_panel_label form-check-label"
                                     t-att-class="{ o_with_counters: group.enableCounters }"
                                     t-att-title="group.tooltip or false"
                                     >
                                     <span class="o_search_panel_label_title">
-                                        <span t-if="group.hex_color" class="mr-1" t-attf-style="color: {{ group.hex_color }};">●</span>
+                                        <span t-if="group.hex_color" class="me-1" t-attf-style="color: {{ group.hex_color }};">●</span>
                                         <t t-esc="group.name"/>
                                     </span>
                                 </label>
@@ -91,7 +91,7 @@
                     <span t-else="" class="o_search_panel_label_title" t-esc="value.display_name"/>
                 </label>
                 <span t-if="section.enableCounters and value.__count gt 0"
-                    class="o_search_panel_counter text-muted ml-2 small"
+                    class="o_search_panel_counter text-muted ms-2 small"
                     t-esc="value.__count"
                 />
             </header>
@@ -109,19 +109,19 @@
         class="o_search_panel_filter_value list-group-item border-0"
         >
         <t t-set="value" t-value="values.get(valueId)"/>
-        <div class="custom-control custom-checkbox w-100">
+        <div class="custom-control form-check w-100">
             <input type="checkbox"
                 t-attf-id="{{ section.id }}_input_{{ valueId }}"
                 t-att-checked="state.active[section.id][valueId]"
-                class="custom-control-input"
+                class="form-check-input"
                 t-on-click="ev => this.toggleFilterValue(section.id, valueId, ev)"
             />
-            <label class="o_search_panel_label custom-control-label"
+            <label class="o_search_panel_label form-check-label"
                 t-attf-for="{{ section.id }}_input_{{ valueId }}"
                 t-att-title="(group and group.tooltip) or false">
                 <span class="o_search_panel_label_title" t-esc="value.display_name"/>
                 <span t-if="section.enableCounters and value.__count gt 0"
-                    class="o_search_panel_counter text-muted ml-2 small"
+                    class="o_search_panel_counter text-muted ms-2 small"
                     t-esc="value.__count"
                 />
             </label>
diff --git a/addons/web/static/src/search/search_panel/search_view.scss b/addons/web/static/src/search/search_panel/search_view.scss
index a6d12dbad32..2ae6ec39b99 100644
--- a/addons/web/static/src/search/search_panel/search_view.scss
+++ b/addons/web/static/src/search/search_panel/search_view.scss
@@ -103,7 +103,7 @@
             @include o-position-absolute($dropdown-item-padding-x*.3, $dropdown-item-padding-x*.2, auto, auto);
             
             &:hover {
-                background-color: gray('100');
+                background-color: map-get($grays, '100');
             }
         }
     }
diff --git a/addons/web/static/src/search/search_panel/search_view_extra.scss b/addons/web/static/src/search/search_panel/search_view_extra.scss
index 48095046922..dfb99632951 100644
--- a/addons/web/static/src/search/search_panel/search_view_extra.scss
+++ b/addons/web/static/src/search/search_panel/search_view_extra.scss
@@ -8,9 +8,9 @@
         background: $o-brand-lightsecondary;
 
         .o_facet_remove {
-            color: gray('600');
+            color: map-get($grays, '600');
             &:hover {
-                color: gray('700');
+                color: map-get($grays, '700');
             }
         }
     }
diff --git a/addons/web/static/src/views/fields/badge/badge_field.xml b/addons/web/static/src/views/fields/badge/badge_field.xml
index 85e3ce33246..bfd48b173c5 100644
--- a/addons/web/static/src/views/fields/badge/badge_field.xml
+++ b/addons/web/static/src/views/fields/badge/badge_field.xml
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="web.BadgeField" owl="1">
-        <span t-if="props.value" class="badge badge-pill" t-att-class="classFromDecoration" t-esc="formattedValue" />
+        <span t-if="props.value" class="badge rounded-pill" t-att-class="classFromDecoration" t-esc="formattedValue" />
     </t>
 
 </templates>
diff --git a/addons/web/static/src/views/fields/color_picker/color_picker_field.scss b/addons/web/static/src/views/fields/color_picker/color_picker_field.scss
index 608b70e946c..1f158c86494 100644
--- a/addons/web/static/src/views/fields/color_picker/color_picker_field.scss
+++ b/addons/web/static/src/views/fields/color_picker/color_picker_field.scss
@@ -13,7 +13,7 @@
     > div {
         display: inline-block;
         border: 1px solid white;
-        box-shadow: 0 0 0 1px gray('300');
+        box-shadow: 0 0 0 1px map-get($grays, '300');
         margin: 2px;
 
         > a {
diff --git a/addons/web/static/src/views/fields/image/image_field.scss b/addons/web/static/src/views/fields/image/image_field.scss
index ec4a1ea2678..89e3e0ff956 100644
--- a/addons/web/static/src/views/fields/image/image_field.scss
+++ b/addons/web/static/src/views/fields/image/image_field.scss
@@ -35,7 +35,7 @@
                     background: $o-brand-primary;
                 }
                 &.o_clear_file_button{
-                    background: theme-color('danger');
+                    background: map-get($theme-colors, 'danger');
                 }
             }
         }
@@ -46,7 +46,7 @@
     }
 
     &.o_field_invalid img {
-        border: 1px solid theme-color('danger');
+        border: 1px solid map-get($theme-colors, 'danger');
     }
 }
 
diff --git a/addons/web/static/src/views/fields/image/image_field.xml b/addons/web/static/src/views/fields/image/image_field.xml
index 86deac2dd42..c2ae4542f5f 100644
--- a/addons/web/static/src/views/fields/image/image_field.xml
+++ b/addons/web/static/src/views/fields/image/image_field.xml
@@ -12,14 +12,14 @@
                     >
                         <t t-set-slot="toggler">
                             <button
-                                class="fa fa-pencil fa-lg float-left o_select_file_button"
+                                class="fa fa-pencil fa-lg float-start o_select_file_button"
                                 data-tooltip="Edit"
                                 aria-label="Edit"
                             />
                         </t>
                         <button
                             t-if="props.value and state.isValid"
-                            class="fa fa-trash-o fa-lg float-right o_clear_file_button"
+                            class="fa fa-trash-o fa-lg float-end o_clear_file_button"
                             data-tooltip="Clear"
                             aria-label="Clear"
                             t-on-click="onFileRemove"
diff --git a/addons/web/static/src/views/fields/many2many_binary/many2many_binary_field.xml b/addons/web/static/src/views/fields/many2many_binary/many2many_binary_field.xml
index e1226b139b6..88dff26cab7 100644
--- a/addons/web/static/src/views/fields/many2many_binary/many2many_binary_field.xml
+++ b/addons/web/static/src/views/fields/many2many_binary/many2many_binary_field.xml
@@ -29,7 +29,7 @@
     <div t-attf-class="o_attachment o_attachment_many2many #{ editable ? 'o_attachment_editable' : '' } #{upload ? 'o_attachment_uploading' : ''}" t-att-title="file.name">
         <div class="o_attachment_wrap">
             <t t-set="ext" t-value="getExtension(file)"/>
-            <div class="o_image_box float-left" t-att-data-id="file.id">
+            <div class="o_image_box float-start" t-att-data-id="file.id">
                 <a t-att-href="getUrl(file.id)" t-att-title="'Download ' + file.name" aria-label="Download">
                     <span class="o_image o_hover" t-att-data-mimetype="file.type" t-att-data-ext="ext" role="img"/>
                 </a>
diff --git a/addons/web/static/src/views/fields/many2many_tags/tags_list.xml b/addons/web/static/src/views/fields/many2many_tags/tags_list.xml
index 3a55fe148c2..3a90e907858 100644
--- a/addons/web/static/src/views/fields/many2many_tags/tags_list.xml
+++ b/addons/web/static/src/views/fields/many2many_tags/tags_list.xml
@@ -4,17 +4,17 @@
     <t t-name="web.TagsList" owl="1">
         <span t-if="visibleTags.length" t-attf-class="o_tags_list {{props.className}} d-inline-flex flex-wrap" t-att-name="props.name">
             <t t-if="props.tags" t-foreach="visibleTags" t-as="tag" t-key="tag.id or tag_index">
-                <span t-attf-class="{{`o_tag_color_${ tag.colorIndex or 0 } ${props.displayBadge ? 'badge badge-pill' : ''}`}} o_tag d-inline-flex align-items-center h-100" tabindex="-1" t-att-data-color="tag.colorIndex" t-att-title="tag.text" t-on-click="(ev) => tag.onClick and tag.onClick(ev)">
+                <span t-attf-class="{{`o_tag_color_${ tag.colorIndex or 0 } ${props.displayBadge ? 'badge rounded-pill' : ''}`}} o_tag d-inline-flex align-items-center h-100" tabindex="-1" t-att-data-color="tag.colorIndex" t-att-title="tag.text" t-on-click="(ev) => tag.onClick and tag.onClick(ev)">
                     <img t-if="tag.img" t-att-src="tag.img" class="o_m2m_avatar rounded-circle"/>
                     <div t-if="props.displayBadge" class="o_tag_badge_text" t-esc="tag.text" />
                     <t t-else="">
                         <span />
                         <div t-esc="tag.text" />
                     </t>
-                    <a tabIndex="-1" t-if="tag.onDelete" t-on-click.stop.prevent="(ev) => tag.onDelete and tag.onDelete(ev)" href="#" class="fa fa-times o_delete ml-2" title="Delete" aria-label="Delete"></a>
+                    <a tabIndex="-1" t-if="tag.onDelete" t-on-click.stop.prevent="(ev) => tag.onDelete and tag.onDelete(ev)" href="#" class="fa fa-times o_delete ms-2" title="Delete" aria-label="Delete"></a>
                 </span>
             </t>
-            <span t-if="props.tags and otherTags.length" class="o_m2m_avatar_empty rounded-circle text-center font-weight-bold" t-att-data-tooltip="tooltip">
+            <span t-if="props.tags and otherTags.length" class="o_m2m_avatar_empty rounded-circle text-center fw-bold" t-att-data-tooltip="tooltip">
                 <span t-if="otherTags.length > 9" t-esc="'9+'" />
                 <span t-else="" t-esc="'+' + otherTags.length" />
             </span>
diff --git a/addons/web/static/src/views/fields/radio/radio_field.xml b/addons/web/static/src/views/fields/radio/radio_field.xml
index d016301ce5d..d67925c0ec9 100644
--- a/addons/web/static/src/views/fields/radio/radio_field.xml
+++ b/addons/web/static/src/views/fields/radio/radio_field.xml
@@ -8,10 +8,10 @@
             t-att-aria-label="props.string"
         >
             <t t-foreach="props.radioItems" t-as="item" t-key="item[0]">
-                <div class="custom-control custom-radio o_radio_item" aria-atomic="true">
+                <div class="custom-control form-check o_radio_item" aria-atomic="true">
                     <input
                         type="radio"
-                        class="custom-control-input o_radio_input"
+                        class="form-check-input o_radio_input"
                         t-att-checked="item[0] === value"
                         t-att-disabled="props.readonly"
                         t-att-name="id"
@@ -20,7 +20,7 @@
                         t-att-id="`${id}_${item[0]}`"
                         t-on-change="() => this.onChange(item)"
                     />
-                    <label class="custom-control-label o_form_label" t-att-for="`${id}_${item[0]}`" t-esc="item[1]" />
+                    <label class="form-check-label o_form_label" t-att-for="`${id}_${item[0]}`" t-esc="item[1]" />
                 </div>
             </t>
         </div>
diff --git a/addons/web/static/src/views/fields/remaining_days/remaining_days_field.xml b/addons/web/static/src/views/fields/remaining_days/remaining_days_field.xml
index 337771bd860..08a14c65928 100644
--- a/addons/web/static/src/views/fields/remaining_days/remaining_days_field.xml
+++ b/addons/web/static/src/views/fields/remaining_days/remaining_days_field.xml
@@ -7,7 +7,7 @@
             <t t-set="formatted" t-value="formattedValue" />
             <div
                 t-att-class="{
-                    'font-weight-bold': days !== null and days lte 0,
+                    'fw-bold': days !== null and days lte 0,
                     'text-danger': days !== null and days lt 0,
                     'text-warning': days !== null and days === 0,
                 }"
diff --git a/addons/web/static/src/views/fields/statusbar/statusbar_field.scss b/addons/web/static/src/views/fields/statusbar/statusbar_field.scss
index 82271aa88a2..300fe81fae8 100644
--- a/addons/web/static/src/views/fields/statusbar/statusbar_field.scss
+++ b/addons/web/static/src/views/fields/statusbar/statusbar_field.scss
@@ -40,7 +40,7 @@
 
             &:not(:first-child):before {
                 right: -$o-statusbar-arrow-width;
-                border-left-color: gray('300');
+                border-left-color: map-get($grays, '300');
             }
 
             &.disabled {
@@ -48,7 +48,7 @@
                 pointer-events: none;
 
                 &:not(.btn-primary) {
-                    @include plain-hover-focus() {
+                    &, &:hover, &:focus {
                         color: $text-muted;
                     }
                 }
diff --git a/addons/web/static/src/views/form/button_box/button_box.scss b/addons/web/static/src/views/form/button_box/button_box.scss
index 105afd19547..b180d850148 100644
--- a/addons/web/static/src/views/form/button_box/button_box.scss
+++ b/addons/web/static/src/views/form/button_box/button_box.scss
@@ -35,7 +35,7 @@
         opacity: 0.8;
         border-radius: 0px;
         margin-bottom: 0; // If the button comes from a field
-        border: 0 solid gray('300');
+        border: 0 solid map-get($grays, '300');
         text-transform: capitalize !important;
 
         &:hover, &:focus {
@@ -111,7 +111,7 @@
                 width: 100%;
                 height: 100%;
                 border: none;
-                border-bottom: 1px solid gray('300');
+                border-bottom: 1px solid map-get($grays, '300');
                 margin: 0;
                 padding: 0;
                 background-color: transparent;
@@ -139,7 +139,7 @@
     //     @include o-position-absolute(100%, 0);
     //     min-width: 0;
     //     border: none;
-    //     border: 1px solid gray('300');
+    //     border: 1px solid map-get($grays, '300');
     //     margin: 0;
     //     padding: 0;
     //     @include media-breakpoint-down(md) {
@@ -154,7 +154,7 @@
     //     > .btn.oe_stat_button {
     //         width: 100%;
     //         border: none;
-    //         border-bottom: 1px solid gray('300');
+    //         border-bottom: 1px solid map-get($grays, '300');
 
     //         @include media-breakpoint-down(md) {
     //             display: inline-block;
diff --git a/addons/web/static/src/views/form/form_controller.scss b/addons/web/static/src/views/form/form_controller.scss
index 6d4c664e11f..b09aa34742b 100644
--- a/addons/web/static/src/views/form/form_controller.scss
+++ b/addons/web/static/src/views/form/form_controller.scss
@@ -266,7 +266,7 @@ $o-form-label-margin-right: 0px;
 
                 &:not(:first-child):before {
                     right: -$o-statusbar-arrow-width;
-                    border-left-color: gray('300');
+                    border-left-color: map-get($grays, '300');
                 }
 
                 &.disabled {
@@ -275,7 +275,7 @@ $o-form-label-margin-right: 0px;
                     cursor: default;
 
                     &:not(.btn-primary) {
-                        @include plain-hover-focus() {
+                        &, &:hover, &:focus {
                             color: $text-muted;
                         }
                     }
@@ -510,7 +510,7 @@ $o-form-label-margin-right: 0px;
     }
 
     // Status dropdown
-    a[data-toggle="dropdown"] > .o_status {
+    a[data-bs-toggle="dropdown"] > .o_status {
         height: $h3-font-size;
         width: $h3-font-size;
     }
@@ -736,7 +736,7 @@ $o-form-label-margin-right: 0px;
         .oe_subtotal_footer_separator {
             width: 100%;
             text-align: right;
-            border-top: 1px solid gray('300');
+            border-top: 1px solid map-get($grays, '300');
             font-weight: $font-weight-bold;
             font-size: 1.3em;
         }
@@ -841,7 +841,7 @@ $o-form-label-margin-right: 0px;
             .o_recurrent_weekday_label {
                 @include o-text-overflow;
             }
-            .custom-control-label {
+            .form-check-label {
                 left: 25%;
             }
         }
diff --git a/addons/web/static/src/views/graph/graph_renderer.js b/addons/web/static/src/views/graph/graph_renderer.js
index 6bc7cdfff11..1c73a0c86fd 100644
--- a/addons/web/static/src/views/graph/graph_renderer.js
+++ b/addons/web/static/src/views/graph/graph_renderer.js
@@ -84,7 +84,7 @@ export class GraphRenderer extends Component {
             }
             const tr = document.createElement("tr");
             const td = document.createElement("td");
-            tr.classList.add("o_show_more", "text-center", "font-weight-bold");
+            tr.classList.add("o_show_more", "text-center", "fw-bold");
             td.setAttribute("colspan", "2");
             td.innerText = this.env._t("...");
             tr.appendChild(td);
diff --git a/addons/web/static/src/views/graph/graph_renderer.xml b/addons/web/static/src/views/graph/graph_renderer.xml
index 24d5cad1928..ac128be6eea 100644
--- a/addons/web/static/src/views/graph/graph_renderer.xml
+++ b/addons/web/static/src/views/graph/graph_renderer.xml
@@ -15,7 +15,7 @@
                             <span class="o_square badge p-2 rounded-0 align-middle me-2 border-0" t-attf-style="background-color: {{ tooltipItem.boxColor }}"> </span>
                             <span class="o_label text-truncate d-inline-block align-middle" t-attf-style="max-width: {{ maxWidth }}" t-esc="tooltipItem.label" />
                         </td>
-                        <td class="o_value pl-2 text-right font-weight-bolder">
+                        <td class="o_value ps-2 text-end fw-bolder">
                             <t t-esc="tooltipItem.value"/>
                             <t t-if="mode === 'pie' and tooltipItem.percentage">
                                 (<t t-esc="tooltipItem.percentage" />%)
diff --git a/addons/web/static/src/views/kanban/kanban_column_examples_dialog.xml b/addons/web/static/src/views/kanban/kanban_column_examples_dialog.xml
index ddfde0349a4..0b7aea8b3af 100644
--- a/addons/web/static/src/views/kanban/kanban_column_examples_dialog.xml
+++ b/addons/web/static/src/views/kanban/kanban_column_examples_dialog.xml
@@ -10,7 +10,7 @@
                     <div t-foreach="column.records" t-as="record" t-key="record.id" class="o_kanban_examples_ghost">
                         <div class="o_ghost_content"/>
                         <div class="o_ghost_content o_ghost_tag"/>
-                        <span class="ml-2" t-if="record.bullet" t-out="record.bullet"/>
+                        <span class="ms-2" t-if="record.bullet" t-out="record.bullet"/>
                     </div>
                 </div>
             </t>
diff --git a/addons/web/static/src/views/kanban/kanban_column_progressbar.scss b/addons/web/static/src/views/kanban/kanban_column_progressbar.scss
index 184f7315612..8ccf768669b 100644
--- a/addons/web/static/src/views/kanban/kanban_column_progressbar.scss
+++ b/addons/web/static/src/views/kanban/kanban_column_progressbar.scss
@@ -65,7 +65,7 @@
         width: 76%;
         height: $font-size-sm;
         margin-bottom: 0;
-        background-color: gray('300');
+        background-color: map-get($grays, '300');
         box-shadow: none;
 
         .progress-bar {
@@ -102,10 +102,10 @@
 }
 
 .o_kanban_view .o_kanban_group {
-    @include o-kanban-css-filter(success, theme-color('success'));
-    @include o-kanban-css-filter(warning, theme-color('warning'));
-    @include o-kanban-css-filter(danger, theme-color('danger'));
-    @include o-kanban-css-filter(muted, theme-color('dark'));
+    @include o-kanban-css-filter(success, map-get($theme-colors, 'success'));
+    @include o-kanban-css-filter(warning, map-get($theme-colors, 'warning'));
+    @include o-kanban-css-filter(danger, map-get($theme-colors, 'danger'));
+    @include o-kanban-css-filter(muted, map-get($theme-colors, 'dark'));
 
     &.o_kanban_group_show {
         display: flex;
diff --git a/addons/web/static/src/views/kanban/kanban_column_quick_create.xml b/addons/web/static/src/views/kanban/kanban_column_quick_create.xml
index b297b12da1b..285d95016e7 100644
--- a/addons/web/static/src/views/kanban/kanban_column_quick_create.xml
+++ b/addons/web/static/src/views/kanban/kanban_column_quick_create.xml
@@ -26,7 +26,7 @@
                             </button>
                         </span>
                     </div>
-                    <span t-if="!env.isSmall and state.hasInputFocused" class="o_discard_msg text-muted float-right">
+                    <span t-if="!env.isSmall and state.hasInputFocused" class="o_discard_msg text-muted float-end">
                         Esc to discard
                     </span>
                     <t t-if="props.exampleData and !env.isSmall">
diff --git a/addons/web/static/src/views/kanban/kanban_compiler.js b/addons/web/static/src/views/kanban/kanban_compiler.js
index 7524d4ac4f2..d60809399dc 100644
--- a/addons/web/static/src/views/kanban/kanban_compiler.js
+++ b/addons/web/static/src/views/kanban/kanban_compiler.js
@@ -241,7 +241,7 @@ export class KanbanCompiler extends ViewCompiler {
         const { bold, display } = extractAttributes(el, ["bold", "display"]);
         const classNames = [];
         if (display === "right") {
-            classNames.push("float-right");
+            classNames.push("float-end");
         } else if (display === "full") {
             classNames.push("o_text_block");
         }
diff --git a/addons/web/static/src/views/kanban/kanban_controller.scss b/addons/web/static/src/views/kanban/kanban_controller.scss
index 3977f17e319..1272aee6abb 100644
--- a/addons/web/static/src/views/kanban/kanban_controller.scss
+++ b/addons/web/static/src/views/kanban/kanban_controller.scss
@@ -37,7 +37,7 @@
         }
 
         .o_kanban_cancel {
-            color: gray('600'); // to make color uniform in community and enterprise
+            color: map-get($grays, '600'); // to make color uniform in community and enterprise
         }
 
         &.o_disabled {
@@ -150,7 +150,7 @@
             .o_link_muted {
                 color: $body-color;
                 &:hover {
-                    color: theme-color('primary');
+                    color: map-get($theme-colors, 'primary');
                     text-decoration: underline;
                 }
             }
@@ -341,7 +341,7 @@
         .oe_kanban_global_click, .oe_kanban_global_click_edit {
             cursor: pointer;
             &:focus, &:focus-within {
-                outline: thin solid mix(theme-color('primary'), gray('400'));
+                outline: thin solid mix(map-get($theme-colors, 'primary'), map-get($grays, '400'));
                 outline-offset: -1px;
             }
         }
@@ -571,7 +571,7 @@
             }
 
             .o_kanban_muted_record {
-                background: gray('300');
+                background: map-get($grays, '300');
                 height: 70px;
                 margin: 10px 0px;
             }
diff --git a/addons/web/static/src/views/kanban/kanban_dashboard.scss b/addons/web/static/src/views/kanban/kanban_dashboard.scss
index d715d95f996..08f44be96f7 100644
--- a/addons/web/static/src/views/kanban/kanban_dashboard.scss
+++ b/addons/web/static/src/views/kanban/kanban_dashboard.scss
@@ -48,7 +48,7 @@
                 margin-bottom: 10px;
 
                 + .o_kanban_card_manage_section {
-                    border-top: 1px solid gray('200');
+                    border-top: 1px solid map-get($grays, '200');
                 }
 
                 > div {
@@ -90,7 +90,7 @@
                     padding-top: $o-kanban-dashboard-dropdown-complex-gap*3;
 
                     &:not(:first-child) {
-                        border-top: 1px solid gray('300');
+                        border-top: 1px solid map-get($grays, '300');
                     }
 
                     .oe_kanban_colorpicker {
@@ -99,11 +99,11 @@
                     }
 
                     div[class*="col-"] + div[class*="col-"] {
-                        border-left: 1px solid gray('300');
+                        border-left: 1px solid map-get($grays, '300');
                     }
 
                     // Default options box
-                    div.text-right {
+                    div.text-end {
                         text-align: left; // :/
                         @include o-kanban-dashboard-dropdown-link(0);
                     }
@@ -188,8 +188,8 @@
                 margin-bottom: -$o-kanban-dashboard-vpadding;
 
                 &.bottom_block {
-                    border-top: 1px solid gray('300');
-                    background-color: gray('200');
+                    border-top: 1px solid map-get($grays, '300');
+                    background-color: map-get($grays, '200');
                     padding-top: $o-kanban-dashboard-vpadding;
                     padding-bottom: $o-kanban-dashboard-vpadding;
                 }
diff --git a/addons/web/static/src/views/kanban/kanban_examples_dialog.scss b/addons/web/static/src/views/kanban/kanban_examples_dialog.scss
index c2956e29adc..2c56a485ce2 100644
--- a/addons/web/static/src/views/kanban/kanban_examples_dialog.scss
+++ b/addons/web/static/src/views/kanban/kanban_examples_dialog.scss
@@ -2,17 +2,17 @@
 .o_kanban_examples_dialog .modal-body {
     display: flex;
     padding: 0px;
-    background: theme-color('light');
+    background: map-get($theme-colors, 'light');
 
     // sidebar
     .o_notebook_headers {
         flex: 0 0 auto;
-        border-right: 1px solid gray('300');
+        border-right: 1px solid map-get($grays, '300');
         background: white;
 
         > ul > li {
             margin: 0;
-            border-bottom: 1px solid gray('300');
+            border-bottom: 1px solid map-get($grays, '300');
 
             > a {
                 padding: 12px 15px;
@@ -78,11 +78,11 @@
         .o_kanban_examples_ghost {
             padding: 5px;
             margin-top: -1px;
-            border: thin solid gray('300');
+            border: thin solid map-get($grays, '300');
             background-color: white;
             .o_ghost_content {
                 height: 12px;
-                background: gray('300');
+                background: map-get($grays, '300');
                 &.o_ghost_tag {
                     display: inline-block;
                     width: 40%;
diff --git a/addons/web/static/src/views/kanban/kanban_record_quick_create.xml b/addons/web/static/src/views/kanban/kanban_record_quick_create.xml
index cdb553cb5ee..62f936ae188 100644
--- a/addons/web/static/src/views/kanban/kanban_record_quick_create.xml
+++ b/addons/web/static/src/views/kanban/kanban_record_quick_create.xml
@@ -9,13 +9,13 @@
         >
             <FormRenderer class="'o_wowl_form_view o_xxs_form_view'" record="props.record" archInfo="props.archInfo" />
             <div class="d-flex">
-                <button class="btn btn-primary o_kanban_add mr-1 text_truncate" t-on-click="() => this.validate('add')">
+                <button class="btn btn-primary o_kanban_add me-1 text_truncate" t-on-click="() => this.validate('add')">
                     Add
                 </button>
-                <button class="btn btn-primary o_kanban_edit mr-1 text_truncate" t-on-click="() => this.validate('edit')">
+                <button class="btn btn-primary o_kanban_edit me-1 text_truncate" t-on-click="() => this.validate('edit')">
                     Edit
                 </button>
-                <button class="btn btn-secondary o_kanban_cancel ml-auto" t-on-click="() => this.cancel(true)">
+                <button class="btn btn-secondary o_kanban_cancel ms-auto" t-on-click="() => this.cancel(true)">
                     <i class="fa fa-trash" />
                 </button>
             </div>
diff --git a/addons/web/static/src/views/kanban/kanban_renderer.xml b/addons/web/static/src/views/kanban/kanban_renderer.xml
index 16a32c5193d..c4812451fb4 100644
--- a/addons/web/static/src/views/kanban/kanban_renderer.xml
+++ b/addons/web/static/src/views/kanban/kanban_renderer.xml
@@ -152,7 +152,7 @@
                                     <div class="o_ghost_content"/>
                                     <div class="o_ghost_content o_ghost_tag"/>
                                     <!-- FIXME WOWL example avatar is white on white (also in legacy) -->
-                                    <img class="float-right o_ghost_avatar" src="/base/static/img/avatar.png" alt="Avatar"/>
+                                    <img class="float-end o_ghost_avatar" src="/base/static/img/avatar.png" alt="Avatar"/>
                                 </div>
                             </div>
                         </div>
diff --git a/addons/web/static/src/views/list/list_controller.scss b/addons/web/static/src/views/list/list_controller.scss
index e3ddd06f0ff..8143c8f37ce 100644
--- a/addons/web/static/src/views/list/list_controller.scss
+++ b/addons/web/static/src/views/list/list_controller.scss
@@ -13,7 +13,7 @@
         border-spacing: 0;
 
         thead {
-            color: $table-head-color;
+            color: color-contrast(opaque($body-bg, $light));
             border-bottom: 1px solid #cacaca;
             > tr > th:not(.o_list_record_selector) {
                 border-left: 1px solid #dfdfdf;
@@ -117,7 +117,7 @@
         .o_list_record_selector {
             width: 40px;
             padding-left: $o-horizontal-padding;
-            .custom-control-label {
+            .form-check-label {
                 cursor: pointer;
             }
         }
@@ -229,7 +229,7 @@
         .o_data_row:not(.o_selected_row) .o_data_cell {
 
             // Boolean fields in non-selected rows completely disabled.
-            .custom-checkbox {
+            .form-check {
                 pointer-events: none;
             }
 
@@ -238,7 +238,7 @@
             &.o_boolean_favorite_cell,
             &.o_boolean_toggle_cell,
             &.o_toggle_button_cell {
-                > .o_field_widget:not(.o_readonly_modifier) .custom-checkbox {
+                > .o_field_widget:not(.o_readonly_modifier) .form-check {
                     pointer-events: auto;
                 }
             }
diff --git a/addons/web/static/src/views/list/list_controller.xml b/addons/web/static/src/views/list/list_controller.xml
index 53d05c3dc18..31dcb2d109e 100644
--- a/addons/web/static/src/views/list/list_controller.xml
+++ b/addons/web/static/src/views/list/list_controller.xml
@@ -71,17 +71,17 @@
     </t>
 
     <t t-name="web.ListView.Selection" owl="1">
-        <div class="o_list_selection_box alert alert-info d-inline-flex align-items-center pl-0 px-lg-2 py-0 mb-0 ml-2" role="alert">
+        <div class="o_list_selection_box alert alert-info d-inline-flex align-items-center ps-0 px-lg-2 py-0 mb-0 ms-2" role="alert">
             <t t-if="env.isSmall">
                 <button class="btn btn-link py-0 o_discard_selection" t-on-click="discardSelection">
                     <span class="fa-2x">&#215;</span>
                 </button>
             </t>
-            <span t-if="isDomainSelected">All <span class="text-monospace" t-esc="nbTotal"/> selected</span>
+            <span t-if="isDomainSelected">All <span class="font-monospace" t-esc="nbTotal"/> selected</span>
             <t t-else="">
-                <span class="text-monospace mr-1" t-esc="nbSelected"/> selected
-                <a t-if="isPageSelected and nbTotal > nbSelected" href="#" class="o_list_select_domain ml-2 btn btn-sm btn-info px-2 py-1 border-0 font-weight-normal" t-on-click="onSelectDomain">
-                    <i class="fa fa-arrow-right"/> Select all <span class="text-monospace" t-esc="nbTotal"/>
+                <span class="font-monospace me-1" t-esc="nbSelected"/> selected
+                <a t-if="isPageSelected and nbTotal > nbSelected" href="#" class="o_list_select_domain ms-2 btn btn-sm btn-info px-2 py-1 border-0 fw-normal" t-on-click="onSelectDomain">
+                    <i class="fa fa-arrow-right"/> Select all <span class="font-monospace" t-esc="nbTotal"/>
                 </a>
             </t>
         </div>
diff --git a/addons/web/static/src/views/list/list_view_extra.scss b/addons/web/static/src/views/list/list_view_extra.scss
index c6b73eec16f..e11cc7ff0fa 100644
--- a/addons/web/static/src/views/list/list_view_extra.scss
+++ b/addons/web/static/src/views/list/list_view_extra.scss
@@ -30,7 +30,7 @@
             padding-bottom: .15rem;
         }
         &.o_invalid_cell .o_input {
-            box-shadow: 0 0 0 1px theme-color('danger');
+            box-shadow: 0 0 0 1px map-get($theme-colors, 'danger');
         }
         &.o_list_button {
             padding: .25rem;
diff --git a/addons/web/static/src/views/pivot/pivot_renderer.xml b/addons/web/static/src/views/pivot/pivot_renderer.xml
index b004a332d86..74c3f29bf48 100644
--- a/addons/web/static/src/views/pivot/pivot_renderer.xml
+++ b/addons/web/static/src/views/pivot/pivot_renderer.xml
@@ -19,7 +19,7 @@
                             <t t-elif="cell.isLeaf !== undefined" t-call="web.PivotHeader">
                                 <t t-set="isXAxis" t-value="true"/>
                             </t>
-                            <th t-else="" t-att-colspan="cell.width" t-att-rowspan="cell.height" class="font-weight-normal bg-100"/>
+                            <th t-else="" t-att-colspan="cell.width" t-att-rowspan="cell.height" class="fw-normal bg-100"/>
                         </t>
                     </tr>
                 </thead>
@@ -30,10 +30,10 @@
                             <t t-set="cell" t-value="row"/>
                         </t>
                         <t t-foreach="row.subGroupMeasurements" t-as="cell" t-key="'row_cell_' + cell_index">
-                            <td class="o_pivot_cell_value text-right" t-att-class="{
+                            <td class="o_pivot_cell_value text-end" t-att-class="{
                                     o_empty: cell.value === undefined,
                                     o_cursor_pointer: cell.value !== undefined,
-                                    'font-weight-bold': cell.isBold,
+                                    'fw-bold': cell.isBold,
                                 }" t-on-click="() => this.onCellClicked(cell)"
                                    t-on-mouseover="onMouseEnter" t-on-mouseout="onMouseLeave">
                                 <t t-if="cell.value !== undefined">
@@ -57,7 +57,7 @@
 
     <t t-name="web.PivotHeader" owl="1">
         <th
-            class="text-nowrap o_cursor_pointer font-weight-normal bg-100"
+            class="text-nowrap o_cursor_pointer fw-normal bg-100"
             t-att-colspan="isXAxis ? cell.width : undefined"
             t-att-rowspan="isXAxis ? cell.height : undefined"
             t-att-class="{
@@ -93,7 +93,7 @@
     </t>
 
     <t t-name="web.PivotMeasure" owl="1">
-        <th class="text-muted text-center text-nowrap font-weight-normal bg-100" t-att-colspan="cell.width" t-att-rowspan="cell.height" t-att-class="{
+        <th class="text-muted text-center text-nowrap fw-normal bg-100" t-att-colspan="cell.width" t-att-rowspan="cell.height" t-att-class="{
                 'o_pivot_origin_row o_cursor_pointer': cell.originIndexes,
                 'o_pivot_measure_row o_cursor_pointer': !cell.originIndexes,
                 o_pivot_sort_order_asc: cell.order === 'asc',
diff --git a/addons/web/static/src/views/pivot/pivot_view.scss b/addons/web/static/src/views/pivot/pivot_view.scss
index 72985be5483..85b13bd4c1c 100644
--- a/addons/web/static/src/views/pivot/pivot_view.scss
+++ b/addons/web/static/src/views/pivot/pivot_view.scss
@@ -22,7 +22,7 @@
         @include o-hover-text-color($body-color, $headings-color);
 
         &:hover {
-            background-color: gray('200') !important;
+            background-color: map-get($grays, '200') !important;
         }
     }
 
diff --git a/addons/web/static/src/views/view.xml b/addons/web/static/src/views/view.xml
index b54c98b749f..257b45a4350 100644
--- a/addons/web/static/src/views/view.xml
+++ b/addons/web/static/src/views/view.xml
@@ -17,7 +17,7 @@
   <t t-name="web.ReportViewMeasures" owl="1">
     <Dropdown togglerClass="'btn btn-primary'">
             <t t-set-slot="toggler">
-                Measures <i class="fa fa-caret-down ml-1"/>
+                Measures <i class="fa fa-caret-down ms-1"/>
             </t>
             <t t-foreach="measures"
                t-as="measure"
diff --git a/addons/web/static/src/views/view_dialogs/export_data_dialog.xml b/addons/web/static/src/views/view_dialogs/export_data_dialog.xml
index 7f435cb5971..34cde29f3d9 100644
--- a/addons/web/static/src/views/view_dialogs/export_data_dialog.xml
+++ b/addons/web/static/src/views/view_dialogs/export_data_dialog.xml
@@ -12,7 +12,7 @@
     </t>
 
     <t t-name="web.ExportDataItem" owl="1">
-        <div t-att-data-field_id="props.field.name" t-attf-class="o_export_tree_item o_cursor_pointer position-relative pl-4 {{ state.isExpanded ? 'o_expanded' : '' }}" role="treeitem" t-on-click.stop="onClick" t-on-dblclick="(ev) => !props.isFieldExpandable(props.field) and !this.isFieldSelected(props.field.name) and this.props.onAdd(ev)">
+        <div t-att-data-field_id="props.field.name" t-attf-class="o_export_tree_item o_cursor_pointer position-relative ps-4 {{ state.isExpanded ? 'o_expanded' : '' }}" role="treeitem" t-on-click.stop="onClick" t-on-dblclick="(ev) => !props.isFieldExpandable(props.field) and !this.isFieldSelected(props.field.name) and this.props.onAdd(ev)">
             <span t-if="props.isFieldExpandable(props.field)" t-attf-class="o_expand_parent d-inline-block position-absolute small fa {{ state.isExpanded ? 'fa-chevron-down' : 'fa-chevron-right' }}" role="img" aria-label="Show sub-fields" title="expandText" />
             <div class="o_tree_column d-flex align-items-center">
                 <span t-if="props.isDebug and props.field.id" t-esc="`${props.field.string} (${props.field.id})`" />
@@ -64,7 +64,7 @@
                 <div class="o_export_format">
                     <strong>Export Format:</strong>
                     <t t-foreach="availableFormats" t-as="format" t-key="format.tag">
-                        <div class="radio form-check form-check-inline pl-4">
+                        <div class="radio form-check form-check-inline ps-4">
                             <input t-att-id="'o_radio' + format.tag" type="radio" t-att-checked="format.tag === availableFormats[state.selectedFormat].tag" name="o_export_format_name" t-att-value="format.tag" class="form-check-input" t-on-change="setFormat" />
                             <label class="form-check-label" t-att-for="'o_radio' + format.tag" t-esc="format.label" />
                         </div>
@@ -76,29 +76,29 @@
                 <div class="o_exported_lists">
                     <div class="input-group mb-3">
                         <t t-if="state.templateId === 'new_template'">
-                            <label class="pt-2 mb-0 font-weight-bold">Save as: </label>
-                            <input t-ref="exportList" class="form-control ml-4 o_save_list_name" t-att-placeholder="newTemplateText" />
+                            <label class="pt-2 mb-0 fw-bold">Save as: </label>
+                            <input t-ref="exportList" class="form-control ms-4 o_save_list_name" t-att-placeholder="newTemplateText" />
                         </t>
                         <t t-else="">
-                            <label class="pt-2 mb-0 font-weight-bold">Template: </label>
-                            <select class="form-control ml-4 o_exported_lists_select" t-on-change="onChangeExportList">
+                            <label class="pt-2 mb-0 fw-bold">Template: </label>
+                            <select class="form-select ms-4 o_exported_lists_select" t-on-change="onChangeExportList">
                                 <option />
                                 <t t-foreach="templates" t-as="template" t-key="template.id">
                                     <option t-att-value="template.id" t-esc="template.name or 'undefined'" t-att-selected="state.templateId === template.id" />
                                 </t>
-                                <option class="font-italic" value="new_template">New template </option>
+                                <option class="fst-italic" value="new_template">New template </option>
                             </select>
                         </t>
                         <t t-if="state.isEditingTemplate">
-                            <button t-if="state.templateId === 'new_template'" type="button" class="btn btn-secondary ml-1 o_save_list_btn" t-on-click.stop="onSaveExportTemplate">
+                            <button t-if="state.templateId === 'new_template'" type="button" class="btn btn-secondary ms-1 o_save_list_btn" t-on-click.stop="onSaveExportTemplate">
                                 <i class="fa fa-floppy-o" />
                             </button>
-                            <button type="button" class="btn btn-secondary ml-1 o_cancel_list_btn" t-on-click.stop="onCancelExportTemplate">
+                            <button type="button" class="btn btn-secondary ms-1 o_cancel_list_btn" t-on-click.stop="onCancelExportTemplate">
                                 <i t-attf-class="fa {{ state.templateId === 'new_template' ? 'fa-times' : 'fa-undo' }}" />
                             </button>
                         </t>
                         <t t-else="">
-                            <button t-if="state.templateId" type="button" class="btn btn-secondary ml-1 o_delete_exported_list" t-on-click.stop="onDeleteExportTemplate">
+                            <button t-if="state.templateId" type="button" class="btn btn-secondary ms-1 o_delete_exported_list" t-on-click.stop="onDeleteExportTemplate">
                                 <i class="fa fa-trash" />
                             </button>
                         </t>
diff --git a/addons/web/static/src/views/widgets/week_days/week_days.xml b/addons/web/static/src/views/widgets/week_days/week_days.xml
index c9824dc29f6..9ebe543dc90 100644
--- a/addons/web/static/src/views/widgets/week_days/week_days.xml
+++ b/addons/web/static/src/views/widgets/week_days/week_days.xml
@@ -6,7 +6,7 @@
             <table class="table table-responsive mb-0">
                 <tr>
                     <t t-foreach="weekdays" t-as="day" t-key="day">
-                        <th class="text-center border font-weight-bold">
+                        <th class="text-center border fw-bold">
                             <div class="o_recurrent_weekday_label" t-att-data-tooltip="props.record.fields[day].string">
                                 <t t-esc="props.record.fields[day].string" />
                             </div>
diff --git a/addons/web/static/src/webclient/burger_menu/mobile_switch_company_menu/mobile_switch_company_menu.xml b/addons/web/static/src/webclient/burger_menu/mobile_switch_company_menu/mobile_switch_company_menu.xml
index 74d1cc769b4..696f40a52d9 100644
--- a/addons/web/static/src/webclient/burger_menu/mobile_switch_company_menu/mobile_switch_company_menu.xml
+++ b/addons/web/static/src/webclient/burger_menu/mobile_switch_company_menu/mobile_switch_company_menu.xml
@@ -11,14 +11,14 @@
             <t t-set="checkIcon" t-value="isCompanySelected ? 'fa-check-square text-primary' : 'fa-square-o'"/>
             <t t-set="isCompanyCurrent" t-value="companyService.currentCompany.id === id"/>
             <div class="d-flex menu_companies_item" t-att-data-company-id="id">
-                <div class="border-right toggle_company" t-att-class="{'border-primary' : isCompanyCurrent}" t-on-click="() => this.toggleCompany(id)">
+                <div class="border-end toggle_company" t-att-class="{'border-primary' : isCompanyCurrent}" t-on-click="() => this.toggleCompany(id)">
                     <span class="btn border-0 p-2">
                         <i t-attf-class="fa fa-fw h2 m-0 {{checkIcon}}"/>
                     </span>
                 </div>
-                <div class="flex-grow-1 p-2 ml-1 log_into text-muted" t-att-class="{'alert-primary': isCompanyCurrent}" t-on-click="() => this.logIntoCompany(id)">
-                    <span t-esc="displayName" class="company_label" t-att-class="isCompanyCurrent ? 'text-900 font-weight-bold' : ''"/>
-                    <small t-if="isCompanyCurrent" class="ml-1">(current)</small>
+                <div class="flex-grow-1 p-2 ms-1 log_into text-muted" t-att-class="{'alert-primary': isCompanyCurrent}" t-on-click="() => this.logIntoCompany(id)">
+                    <span t-esc="displayName" class="company_label" t-att-class="isCompanyCurrent ? 'text-900 fw-bold' : ''"/>
+                    <small t-if="isCompanyCurrent" class="ms-1">(current)</small>
                 </div>
             </div>
         </t>
diff --git a/addons/web/static/src/webclient/clickbot/clickbot.js b/addons/web/static/src/webclient/clickbot/clickbot.js
index 422bf0feead..7d1301d76f4 100644
--- a/addons/web/static/src/webclient/clickbot/clickbot.js
+++ b/addons/web/static/src/webclient/clickbot/clickbot.js
@@ -359,7 +359,7 @@
             // sometimes, the app is just a modal that needs to be closed
             const $modal = $('.modal[role="dialog"]');
             if ($modal.length > 0) {
-                const closeButton = document.querySelector("header > button.close");
+                const closeButton = document.querySelector("header > button.btn-close");
                 if (closeButton) {
                     closeButton.focus();
                     triggerClick(closeButton, "modal close button");
diff --git a/addons/web/static/src/webclient/menus/menu_command_item.xml b/addons/web/static/src/webclient/menus/menu_command_item.xml
index 6c1cf96db9b..aa72f70d99c 100644
--- a/addons/web/static/src/webclient/menus/menu_command_item.xml
+++ b/addons/web/static/src/webclient/menus/menu_command_item.xml
@@ -4,7 +4,7 @@
   <t t-name="web.AppIconCommand" owl="1">
     <div class="o_command_default position-relative d-flex align-items-center justify-content-between px-4 py-2 o_cursor_pointer">
       <t t-slot="name"/>
-      <img t-if="props.webIconData" class="o_app_icon position-relative rounded-sm" t-attf-src="{{props.webIconData}}"/>
+      <img t-if="props.webIconData" class="o_app_icon position-relative rounded-1" t-attf-src="{{props.webIconData}}"/>
       <div t-else="" class="o_app_icon d-flex align-items-center justify-content-center" t-attf-style="background-color:{{props.webIcon.backgroundColor}}" >
         <i t-att-class="props.webIcon.iconClass" t-attf-style="color:{{props.webIcon.color}}"></i>
       </div>
diff --git a/addons/web/static/src/webclient/navbar/navbar.xml b/addons/web/static/src/webclient/navbar/navbar.xml
index 57d1f232ffb..b9c1727e415 100644
--- a/addons/web/static/src/webclient/navbar/navbar.xml
+++ b/addons/web/static/src/webclient/navbar/navbar.xml
@@ -28,7 +28,7 @@
         </t>
 
         <!-- Systray -->
-        <div class="o_menu_systray d-flex flex-shrink-0 ml-auto" role="menu">
+        <div class="o_menu_systray d-flex flex-shrink-0 ms-auto" role="menu">
           <t t-foreach="systrayItems" t-as="item" t-key="item.key">
             <!-- This ensures the correct order of the systray items -->
             <div t-att-data-index="item.index"/>
diff --git a/addons/web/static/src/webclient/switch_company_menu/switch_company_menu.xml b/addons/web/static/src/webclient/switch_company_menu/switch_company_menu.xml
index 4ae24303dff..d56931388f9 100644
--- a/addons/web/static/src/webclient/switch_company_menu/switch_company_menu.xml
+++ b/addons/web/static/src/webclient/switch_company_menu/switch_company_menu.xml
@@ -27,7 +27,7 @@
                 t-att-aria-label="company.name"
                 t-att-title="(isCompanySelected ? 'Hide ' : 'Show ') + company.name + ' content.'"
                 tabindex="0"
-                class="border-right toggle_company"
+                class="border-end toggle_company"
                 t-attf-class="{{isCurrent ? 'border-primary' : ''}}"
                 t-on-click.stop="() => this.toggleCompany(company.id)">
 
@@ -42,13 +42,13 @@
                 t-att-aria-label="'Switch to ' + company.name "
                 t-att-title="'Switch to ' + company.name "
                 tabindex="0"
-                class="d-flex flex-grow-1 align-items-center py-0 log_into pl-2"
-                t-att-class="isCurrent ? 'alert-primary ml-1 mr-2' : 'btn btn-light font-weight-normal border-0'"
+                class="d-flex flex-grow-1 align-items-center py-0 log_into ps-2"
+                t-att-class="isCurrent ? 'alert-primary ms-1 me-2' : 'btn btn-light fw-normal border-0'"
                 t-on-click="() => this.logIntoCompany(company.id)">
 
                 <span
-                    class='company_label pr-3'
-                    t-att-class="isCurrent ? 'text-900 font-weight-bold' : 'ml-1'">
+                    class='company_label pe-3'
+                    t-att-class="isCurrent ? 'text-900 fw-bold' : 'ms-1'">
                     <t t-esc="company.name"/>
                 </span>
             </div>
diff --git a/addons/web/static/src/webclient/user_menu/user_menu.xml b/addons/web/static/src/webclient/user_menu/user_menu.xml
index 35b7c84e82a..0f629e4ffc4 100644
--- a/addons/web/static/src/webclient/user_menu/user_menu.xml
+++ b/addons/web/static/src/webclient/user_menu/user_menu.xml
@@ -2,10 +2,10 @@
 <templates xml:space="preserve">
 
     <t t-name="web.UserMenu" owl="1">
-        <Dropdown class="'o_user_menu d-none d-md-block pr-0'" togglerClass="'py-1 py-lg-0'">
+        <Dropdown class="'o_user_menu d-none d-md-block pe-0'" togglerClass="'py-1 py-lg-0'">
             <t t-set-slot="toggler">
                 <img class="rounded-circle o_user_avatar h-75 py-1" t-att-src="source" alt="User"/>
-                <span class="oe_topbar_name d-none d-lg-block ml-1"><t t-esc="user.name"/><t t-if="env.debug" t-esc="' (' + user.db.name + ')'"/></span>
+                <span class="oe_topbar_name d-none d-lg-block ms-1"><t t-esc="user.name"/><t t-if="env.debug" t-esc="' (' + user.db.name + ')'"/></span>
             </t>
             <t t-foreach="getElements()" t-as="element" t-key="element_index">
                 <t t-if="!element.hide">
diff --git a/addons/web/static/src/webclient/webclient.scss b/addons/web/static/src/webclient/webclient.scss
index 0964fe26a37..680ab30c392 100644
--- a/addons/web/static/src/webclient/webclient.scss
+++ b/addons/web/static/src/webclient/webclient.scss
@@ -49,7 +49,7 @@ kbd {
 //== Backgound light colors variations (bootstrap extensions)
 @each $-name, $-bg-color in $theme-colors {
   $-safe-text-color: color-contrast(mix($-bg-color, $o-view-background-color));
-  @include bg-variant(".bg-#{$-name}-light", rgba(theme-color($-name), 0.5), $-safe-text-color);
+  @include bg-variant(".bg-#{$-name}-light", rgba(map-get($theme-colors, $-name), 0.5), $-safe-text-color);
 }
 
 .bg-muted {
diff --git a/addons/web/static/tests/core/checkbox_tests.js b/addons/web/static/tests/core/checkbox_tests.js
index 529c0e7c65a..2011af057a0 100644
--- a/addons/web/static/tests/core/checkbox_tests.js
+++ b/addons/web/static/tests/core/checkbox_tests.js
@@ -32,7 +32,7 @@ QUnit.module("Components", (hooks) => {
     QUnit.test("can be rendered", async (assert) => {
         const env = await makeTestEnv();
         await mount(CheckBox, target, { env, props: {} });
-        assert.containsOnce(target, "div.custom-checkbox");
+        assert.containsOnce(target, "div.form-check");
     });
 
     QUnit.test("has a slot for translatable text", async (assert) => {
@@ -45,11 +45,8 @@ QUnit.module("Components", (hooks) => {
         Parent.components = { CheckBox };
 
         await mount(Parent, target, { env });
-        assert.containsOnce(target, "div.custom-checkbox");
-        assert.strictEqual(
-            target.querySelector("div.custom-checkbox").textContent,
-            "rugubudubudubu"
-        );
+        assert.containsOnce(target, "div.form-check");
+        assert.strictEqual(target.querySelector("div.form-check").textContent, "rugubudubudubu");
     });
 
     QUnit.test("call onChange prop when some change occurs", async (assert) => {
@@ -65,7 +62,7 @@ QUnit.module("Components", (hooks) => {
         Parent.components = { CheckBox };
 
         await mount(Parent, target, { env });
-        assert.containsOnce(target, "div.custom-checkbox");
+        assert.containsOnce(target, "div.form-check");
         await click(target.querySelector("input"));
         assert.strictEqual(value, true);
         await click(target.querySelector("input"));
@@ -86,12 +83,12 @@ QUnit.module("Components", (hooks) => {
         Parent.components = { CheckBox };
 
         await mount(Parent, target, { env });
-        assert.containsOnce(target, "div.custom-checkbox");
-        assert.notOk(target.querySelector("div.custom-checkbox input").checked);
-        await triggerEvent(target, "div.custom-checkbox input", "keydown", { key: "Enter" });
-        assert.ok(target.querySelector("div.custom-checkbox input").checked);
-        await triggerEvent(target, "div.custom-checkbox input", "keydown", { key: "Enter" });
-        assert.notOk(target.querySelector("div.custom-checkbox input").checked);
+        assert.containsOnce(target, "div.form-check");
+        assert.notOk(target.querySelector("div.form-check input").checked);
+        await triggerEvent(target, "div.form-check input", "keydown", { key: "Enter" });
+        assert.ok(target.querySelector("div.form-check input").checked);
+        await triggerEvent(target, "div.form-check input", "keydown", { key: "Enter" });
+        assert.notOk(target.querySelector("div.form-check input").checked);
     });
 
     QUnit.test("toggling through multiple ways", async (assert) => {
@@ -108,49 +105,43 @@ QUnit.module("Components", (hooks) => {
         Parent.template = xml`<CheckBox onChange.bind="onChange" value="state.value"/>`;
         Parent.components = { CheckBox };
         await mount(Parent, target, { env });
-        assert.containsOnce(target, "div.custom-checkbox");
-        assert.notOk(target.querySelector("div.custom-checkbox input").checked);
+        assert.containsOnce(target, "div.form-check");
+        assert.notOk(target.querySelector("div.form-check input").checked);
 
         // Click on div
         assert.verifySteps([]);
-        await click(target, "div.custom-checkbox");
-        assert.ok(target.querySelector("div.custom-checkbox input").checked);
+        await click(target, "div.form-check");
+        assert.ok(target.querySelector("div.form-check input").checked);
         assert.verifySteps(["true"]);
 
         // Click on label
         assert.verifySteps([]);
-        await click(target, "div.custom-checkbox label", true);
-        assert.notOk(target.querySelector("div.custom-checkbox input").checked);
+        await click(target, "div.form-check label", true);
+        assert.notOk(target.querySelector("div.form-check input").checked);
         assert.verifySteps(["false"]);
 
         // Click on input (only possible programmatically)
         assert.verifySteps([]);
-        await click(target, "div.custom-checkbox input");
-        assert.ok(target.querySelector("div.custom-checkbox input").checked);
+        await click(target, "div.form-check input");
+        assert.ok(target.querySelector("div.form-check input").checked);
         assert.verifySteps(["true"]);
 
         // When somehow applying focus on label, the focus receives it
         // (this is the default behavior from the label)
-        target.querySelector("div.custom-checkbox label").focus();
+        target.querySelector("div.form-check label").focus();
         await nextTick();
-        assert.strictEqual(
-            document.activeElement,
-            target.querySelector("div.custom-checkbox input")
-        );
+        assert.strictEqual(document.activeElement, target.querySelector("div.form-check input"));
 
         // Press Enter when focus is on input
         assert.verifySteps([]);
         triggerHotkey("Enter");
         await nextTick();
-        assert.notOk(target.querySelector("div.custom-checkbox input").checked);
+        assert.notOk(target.querySelector("div.form-check input").checked);
         assert.verifySteps(["false"]);
 
         // Pressing Space when focus is on the input is a standard behavior
         // So we simulate it and verify that it will have its standard behavior.
-        assert.strictEqual(
-            document.activeElement,
-            target.querySelector("div.custom-checkbox input")
-        );
+        assert.strictEqual(document.activeElement, target.querySelector("div.form-check input"));
         const event = triggerEvent(
             document.activeElement,
             null,
@@ -159,11 +150,11 @@ QUnit.module("Components", (hooks) => {
             { fast: true }
         );
         assert.ok(!event.defaultPrevented);
-        target.querySelector("div.custom-checkbox input").checked = true;
+        target.querySelector("div.form-check input").checked = true;
         assert.verifySteps([]);
-        triggerEvent(target, "div.custom-checkbox input", "change", {}, { fast: true });
+        triggerEvent(target, "div.form-check input", "change", {}, { fast: true });
         await nextTick();
-        assert.ok(target.querySelector("div.custom-checkbox input").checked);
+        assert.ok(target.querySelector("div.form-check input").checked);
         assert.verifySteps(["true"]);
     });
 });
diff --git a/addons/web/static/tests/legacy/components/custom_checkbox_tests.js b/addons/web/static/tests/legacy/components/custom_checkbox_tests.js
index dc2204aa43a..b9de73b1abc 100644
--- a/addons/web/static/tests/legacy/components/custom_checkbox_tests.js
+++ b/addons/web/static/tests/legacy/components/custom_checkbox_tests.js
@@ -32,7 +32,7 @@ odoo.define('web.custom_checkbox_tests', function (require) {
 
             const checkbox = await createComponent(CustomCheckbox, {
                 props: {
-                    id: 'my-custom-checkbox',
+                    id: 'my-form-check',
                     disabled: true,
                     value: true,
                     text: 'checkbox',
@@ -45,7 +45,7 @@ odoo.define('web.custom_checkbox_tests', function (require) {
 
             const input = checkbox.el.querySelector('input');
             assert.ok(input.checked, 'checkbox should be checked');
-            assert.strictEqual(input.id, 'my-custom-checkbox');
+            assert.strictEqual(input.id, 'my-form-check');
             assert.ok(input.checked, 'checkbox should be checked');
         });
     });
diff --git a/addons/web/static/tests/legacy/components/dropdown_menu_tests.js b/addons/web/static/tests/legacy/components/dropdown_menu_tests.js
index 1da551920a3..1991165322a 100644
--- a/addons/web/static/tests/legacy/components/dropdown_menu_tests.js
+++ b/addons/web/static/tests/legacy/components/dropdown_menu_tests.js
@@ -76,7 +76,7 @@ odoo.define('web.dropdown_menu_tests', function (require) {
             const bsDropdown = document.createElement('div');
             bsDropdown.innerHTML = `<div class="dropdown">
                 <button class="btn dropdown-toggle" type="button" 
-                        data-toggle="dropdown" aria-expanded="false">
+                        data-bs-toggle="dropdown" aria-expanded="false">
                     BS Dropdown button
                 </button>
                 <div class="dropdown-menu">
diff --git a/addons/web/static/tests/legacy/control_panel/favorite_menu_tests.js b/addons/web/static/tests/legacy/control_panel/favorite_menu_tests.js
index d8dcd9e9db0..d0282e10605 100644
--- a/addons/web/static/tests/legacy/control_panel/favorite_menu_tests.js
+++ b/addons/web/static/tests/legacy/control_panel/favorite_menu_tests.js
@@ -54,8 +54,8 @@ odoo.define('web.favorite_menu_tests', function (require) {
                 controlPanel.el.querySelector('.o_add_favorite input[type="text"]').value,
                 'Action Name'
             );
-            assert.containsN(controlPanel, '.o_add_favorite .custom-checkbox input[type="checkbox"]', 2);
-            const labelEls = controlPanel.el.querySelectorAll('.o_add_favorite .custom-checkbox label');
+            assert.containsN(controlPanel, '.o_add_favorite .form-check input[type="checkbox"]', 2);
+            const labelEls = controlPanel.el.querySelectorAll('.o_add_favorite .form-check label');
             assert.deepEqual(
                 [...labelEls].map(e => e.innerText.trim()),
                 ["Use by default", "Share with all users"]
diff --git a/addons/web/static/tests/legacy/core/owl_dialog_tests.js b/addons/web/static/tests/legacy/core/owl_dialog_tests.js
index df11849ead8..f2a8c218b2d 100644
--- a/addons/web/static/tests/legacy/core/owl_dialog_tests.js
+++ b/addons/web/static/tests/legacy/core/owl_dialog_tests.js
@@ -355,7 +355,7 @@ odoo.define('web.owl_dialog_tests', function (require) {
                             </div>
                         </div>
                     </div>`
-                ).appendTo('body').modal();
+                ).appendTo('body').modal('show');
                 const modal = $modal[0];
                 modal.destroy = function () {
                     $modal.modal('hide');
diff --git a/addons/web/static/tests/legacy/fields/basic_fields_tests.js b/addons/web/static/tests/legacy/fields/basic_fields_tests.js
index 60ec38a14f9..808a7a25c76 100644
--- a/addons/web/static/tests/legacy/fields/basic_fields_tests.js
+++ b/addons/web/static/tests/legacy/fields/basic_fields_tests.js
@@ -321,51 +321,51 @@ QUnit.module('Legacy basic_fields', {
             arch: '<tree editable="bottom"><field name="bar"/></tree>',
         });
 
-        assert.strictEqual(list.$('tbody td:not(.o_list_record_selector) .custom-checkbox input').length, 5,
+        assert.strictEqual(list.$('tbody td:not(.o_list_record_selector) .form-check input').length, 5,
             "should have 5 checkboxes");
-        assert.strictEqual(list.$('tbody td:not(.o_list_record_selector) .custom-checkbox input:checked').length, 4,
+        assert.strictEqual(list.$('tbody td:not(.o_list_record_selector) .form-check input:checked').length, 4,
             "should have 4 checked input");
 
         // Edit a line
-        var $cell = list.$('tr.o_data_row:has(.custom-checkbox input:checked) td:not(.o_list_record_selector)').first();
-        assert.ok($cell.find('.custom-checkbox input:checked').prop('disabled'),
+        var $cell = list.$('tr.o_data_row:has(.form-check input:checked) td:not(.o_list_record_selector)').first();
+        assert.ok($cell.find('.form-check input:checked').prop('disabled'),
             "input should be disabled in readonly mode");
         await testUtils.dom.click($cell);
-        assert.ok(!$cell.find('.custom-checkbox input:checked').prop('disabled'),
+        assert.ok(!$cell.find('.form-check input:checked').prop('disabled'),
             "input should not have the disabled property in edit mode");
-        await testUtils.dom.click($cell.find('.custom-checkbox input:checked'));
+        await testUtils.dom.click($cell.find('.form-check input:checked'));
 
         // save
         await testUtils.dom.click(list.$buttons.find('.o_list_button_save'));
-        $cell = list.$('tr.o_data_row:has(.custom-checkbox input:not(:checked)) td:not(.o_list_record_selector)').first();
-        assert.ok($cell.find('.custom-checkbox input:not(:checked)').prop('disabled'),
+        $cell = list.$('tr.o_data_row:has(.form-check input:not(:checked)) td:not(.o_list_record_selector)').first();
+        assert.ok($cell.find('.form-check input:not(:checked)').prop('disabled'),
             "input should be disabled again");
-        assert.strictEqual(list.$('tbody td:not(.o_list_record_selector) .custom-checkbox input').length, 5,
+        assert.strictEqual(list.$('tbody td:not(.o_list_record_selector) .form-check input').length, 5,
             "should still have 5 checkboxes");
-        assert.strictEqual(list.$('tbody td:not(.o_list_record_selector) .custom-checkbox input:checked').length, 3,
+        assert.strictEqual(list.$('tbody td:not(.o_list_record_selector) .form-check input:checked').length, 3,
             "should now have only 3 checked input");
 
         // Re-Edit the line and fake-check the checkbox
         await testUtils.dom.click($cell);
-        await testUtils.dom.click($cell.find('.custom-checkbox input'));
-        await testUtils.dom.click($cell.find('.custom-checkbox input'));
+        await testUtils.dom.click($cell.find('.form-check input'));
+        await testUtils.dom.click($cell.find('.form-check input'));
 
         // Save
         await testUtils.dom.click(list.$buttons.find('.o_list_button_save'));
-        assert.strictEqual(list.$('tbody td:not(.o_list_record_selector) .custom-checkbox input').length, 5,
+        assert.strictEqual(list.$('tbody td:not(.o_list_record_selector) .form-check input').length, 5,
             "should still have 5 checkboxes");
-        assert.strictEqual(list.$('tbody td:not(.o_list_record_selector) .custom-checkbox input:checked').length, 3,
+        assert.strictEqual(list.$('tbody td:not(.o_list_record_selector) .form-check input:checked').length, 3,
             "should still have only 3 checked input");
 
         // Re-Edit the line to check the checkbox back but this time click on
         // the checkbox directly in readonly mode !
-        $cell = list.$('tr.o_data_row:has(.custom-checkbox input:not(:checked)) td:not(.o_list_record_selector)').first();
-        await testUtils.dom.click($cell.find('.custom-checkbox .custom-control-label'));
+        $cell = list.$('tr.o_data_row:has(.form-check input:not(:checked)) td:not(.o_list_record_selector)').first();
+        await testUtils.dom.click($cell.find('.form-check .form-check-label'));
         await testUtils.nextTick();
 
-        assert.strictEqual(list.$('tbody td:not(.o_list_record_selector) .custom-checkbox input').length, 5,
+        assert.strictEqual(list.$('tbody td:not(.o_list_record_selector) .form-check input').length, 5,
             "should still have 5 checkboxes");
-        assert.strictEqual(list.$('tbody td:not(.o_list_record_selector) .custom-checkbox input:checked').length, 4,
+        assert.strictEqual(list.$('tbody td:not(.o_list_record_selector) .form-check input:checked').length, 4,
             "should now have 4 checked input back");
         list.destroy();
     });
@@ -451,7 +451,7 @@ QUnit.module('Legacy basic_fields', {
             res_id: 5,
         });
 
-        assert.containsOnce(form, ".custom-checkbox.o_boolean_toggle", "Boolean toggle widget applied to boolean field");
+        assert.containsOnce(form, ".form-check.o_boolean_toggle", "Boolean toggle widget applied to boolean field");
         assert.notOk(form.$('.o_boolean_toggle input')[0].checked);
         await testUtils.dom.click(form.$('.o_boolean_toggle'));
         assert.ok(form.$('.o_boolean_toggle input')[0].checked);
@@ -469,7 +469,7 @@ QUnit.module('Legacy basic_fields', {
             res_id: 5,
         });
 
-        assert.containsOnce(form, ".custom-checkbox.o_boolean_toggle", "Boolean toggle widget applied to boolean field");
+        assert.containsOnce(form, ".form-check.o_boolean_toggle", "Boolean toggle widget applied to boolean field");
         await testUtils.dom.click(form.$buttons.find('.o_form_button_edit'));
         assert.notOk(form.$('.o_boolean_toggle input')[0].checked);
         await testUtils.dom.click(form.$('.o_boolean_toggle'));
@@ -488,7 +488,7 @@ QUnit.module('Legacy basic_fields', {
             res_id: 5,
         });
 
-        assert.containsOnce(form, ".custom-checkbox.o_boolean_toggle", "Boolean toggle widget applied to boolean field");
+        assert.containsOnce(form, ".form-check.o_boolean_toggle", "Boolean toggle widget applied to boolean field");
         await testUtils.dom.click(form.$buttons.find('.o_form_button_edit'));
 
         assert.notOk(form.$('.o_boolean_toggle input')[0].checked);
@@ -5339,13 +5339,13 @@ QUnit.module('Legacy basic_fields', {
 
         assert.strictEqual(list.$('.o_data_cell:nth(0) .o_field_widget').attr('title'), '10/08/2017');
 
-        assert.hasClass(list.$('.o_data_cell:nth(0) div'), 'font-weight-bold text-warning');
-        assert.doesNotHaveClass(list.$('.o_data_cell:nth(1) div'), 'font-weight-bold text-warning text-danger');
-        assert.hasClass(list.$('.o_data_cell:nth(2) div'), 'font-weight-bold text-danger');
-        assert.doesNotHaveClass(list.$('.o_data_cell:nth(3) div'), 'font-weight-bold text-warning text-danger');
-        assert.hasClass(list.$('.o_data_cell:nth(4) div'), 'font-weight-bold text-danger');
-        assert.doesNotHaveClass(list.$('.o_data_cell:nth(5) div'), 'font-weight-bold text-warning text-danger');
-        assert.hasClass(list.$('.o_data_cell:nth(6) div'), 'font-weight-bold text-danger');
+        assert.hasClass(list.$('.o_data_cell:nth(0) div'), 'fw-bold text-warning');
+        assert.doesNotHaveClass(list.$('.o_data_cell:nth(1) div'), 'fw-bold text-warning text-danger');
+        assert.hasClass(list.$('.o_data_cell:nth(2) div'), 'fw-bold text-danger');
+        assert.doesNotHaveClass(list.$('.o_data_cell:nth(3) div'), 'fw-bold text-warning text-danger');
+        assert.hasClass(list.$('.o_data_cell:nth(4) div'), 'fw-bold text-danger');
+        assert.doesNotHaveClass(list.$('.o_data_cell:nth(5) div'), 'fw-bold text-warning text-danger');
+        assert.hasClass(list.$('.o_data_cell:nth(6) div'), 'fw-bold text-danger');
 
         list.destroy();
         unpatchDate();
@@ -5453,7 +5453,7 @@ QUnit.module('Legacy basic_fields', {
         });
 
         assert.strictEqual(form.$('.o_field_widget').text(), 'Today');
-        assert.hasClass(form.$('.o_field_widget'), 'font-weight-bold text-warning');
+        assert.hasClass(form.$('.o_field_widget'), 'fw-bold text-warning');
 
         // in edit mode, this widget should be editable.
         await testUtils.form.clickEdit(form);
@@ -5554,13 +5554,13 @@ QUnit.module('Legacy basic_fields', {
 
         assert.strictEqual(list.$('.o_data_cell:nth(0) .o_field_widget').attr('title'), '10/08/2017');
 
-        assert.hasClass(list.$('.o_data_cell:nth(0) div'), 'font-weight-bold text-warning');
-        assert.doesNotHaveClass(list.$('.o_data_cell:nth(1) div'), 'font-weight-bold text-warning text-danger');
-        assert.hasClass(list.$('.o_data_cell:nth(2) div'), 'font-weight-bold text-danger');
-        assert.doesNotHaveClass(list.$('.o_data_cell:nth(3) div'), 'font-weight-bold text-warning text-danger');
-        assert.hasClass(list.$('.o_data_cell:nth(4) div'), 'font-weight-bold text-danger');
-        assert.doesNotHaveClass(list.$('.o_data_cell:nth(5) div'), 'font-weight-bold text-warning text-danger');
-        assert.hasClass(list.$('.o_data_cell:nth(6) div'), 'font-weight-bold text-danger');
+        assert.hasClass(list.$('.o_data_cell:nth(0) div'), 'fw-bold text-warning');
+        assert.doesNotHaveClass(list.$('.o_data_cell:nth(1) div'), 'fw-bold text-warning text-danger');
+        assert.hasClass(list.$('.o_data_cell:nth(2) div'), 'fw-bold text-danger');
+        assert.doesNotHaveClass(list.$('.o_data_cell:nth(3) div'), 'fw-bold text-warning text-danger');
+        assert.hasClass(list.$('.o_data_cell:nth(4) div'), 'fw-bold text-danger');
+        assert.doesNotHaveClass(list.$('.o_data_cell:nth(5) div'), 'fw-bold text-warning text-danger');
+        assert.hasClass(list.$('.o_data_cell:nth(6) div'), 'fw-bold text-danger');
 
         list.destroy();
         unpatchDate();
@@ -7464,35 +7464,35 @@ QUnit.module('Legacy basic_fields', {
             res_id: 1,
         });
 
-        assert.containsOnce(form, '.o_field_widget.badge.badge-warning',
+        assert.containsOnce(form, '.o_field_widget.badge.text-bg-warning',
             "should have a warning status label since selection is the second, blocked state");
-        assert.containsNone(form, '.o_field_widget.badge.badge-secondary',
+        assert.containsNone(form, '.o_field_widget.badge.text-bg-secondary',
             "should not have a default status since selection is the second, blocked state");
-        assert.containsNone(form, '.o_field_widget.badge.badge-success',
+        assert.containsNone(form, '.o_field_widget.badge.text-bg-success',
             "should not have a success status since selection is the second, blocked state");
-        assert.strictEqual(form.$('.o_field_widget.badge.badge-warning').text(), 'Blocked',
+        assert.strictEqual(form.$('.o_field_widget.badge.text-bg-warning').text(), 'Blocked',
             "the label should say 'Blocked' since this is the label value for that state");
 
         // // switch to edit mode and check the result
         await testUtils.form.clickEdit(form);
-        assert.containsOnce(form, '.o_field_widget.badge.badge-warning',
+        assert.containsOnce(form, '.o_field_widget.badge.text-bg-warning',
             "should have a warning status label since selection is the second, blocked state");
-        assert.containsNone(form, '.o_field_widget.badge.badge-secondary',
+        assert.containsNone(form, '.o_field_widget.badge.text-bg-secondary',
             "should not have a default status since selection is the second, blocked state");
-        assert.containsNone(form, '.o_field_widget.badge.badge-success',
+        assert.containsNone(form, '.o_field_widget.badge.text-bg-success',
             "should not have a success status since selection is the second, blocked state");
-        assert.strictEqual(form.$('.o_field_widget.badge.badge-warning').text(), 'Blocked',
+        assert.strictEqual(form.$('.o_field_widget.badge.text-bg-warning').text(), 'Blocked',
             "the label should say 'Blocked' since this is the label value for that state");
 
         // save
         await testUtils.form.clickSave(form);
-        assert.containsOnce(form, '.o_field_widget.badge.badge-warning',
+        assert.containsOnce(form, '.o_field_widget.badge.text-bg-warning',
             "should have a warning status label since selection is the second, blocked state");
-        assert.containsNone(form, '.o_field_widget.badge.badge-secondary',
+        assert.containsNone(form, '.o_field_widget.badge.text-bg-secondary',
             "should not have a default status since selection is the second, blocked state");
-        assert.containsNone(form, '.o_field_widget.badge.badge-success',
+        assert.containsNone(form, '.o_field_widget.badge.text-bg-success',
             "should not have a success status since selection is the second, blocked state");
-        assert.strictEqual(form.$('.o_field_widget.badge.badge-warning').text(), 'Blocked',
+        assert.strictEqual(form.$('.o_field_widget.badge.text-bg-warning').text(), 'Blocked',
             "the label should say 'Blocked' since this is the label value for that state");
 
         form.destroy();
@@ -7514,51 +7514,51 @@ QUnit.module('Legacy basic_fields', {
 
         assert.strictEqual(list.$('.o_field_widget.badge:not(:empty)').length, 3,
             "should have three visible status labels");
-        assert.containsOnce(list, '.o_field_widget.badge.badge-warning',
+        assert.containsOnce(list, '.o_field_widget.badge.text-bg-warning',
             "should have one warning status label");
-        assert.strictEqual(list.$('.o_field_widget.badge.badge-warning').text(), 'Blocked',
+        assert.strictEqual(list.$('.o_field_widget.badge.text-bg-warning').text(), 'Blocked',
             "the warning label should read 'Blocked'");
-        assert.containsOnce(list, '.o_field_widget.badge.badge-secondary',
+        assert.containsOnce(list, '.o_field_widget.badge.text-bg-secondary',
             "should have one default status label");
-        assert.strictEqual(list.$('.o_field_widget.badge.badge-secondary').text(), 'Normal',
+        assert.strictEqual(list.$('.o_field_widget.badge.text-bg-secondary').text(), 'Normal',
             "the default label should read 'Normal'");
-        assert.containsOnce(list, '.o_field_widget.badge.badge-success',
+        assert.containsOnce(list, '.o_field_widget.badge.text-bg-success',
             "should have one success status label");
-        assert.strictEqual(list.$('.o_field_widget.badge.badge-success').text(), 'Done',
+        assert.strictEqual(list.$('.o_field_widget.badge.text-bg-success').text(), 'Done',
             "the success label should read 'Done'");
 
         // switch to edit mode and check the result
         await testUtils.dom.clickFirst(list.$('tbody td:not(.o_list_record_selector)'));
         assert.strictEqual(list.$('.o_field_widget.badge:not(:empty)').length, 3,
             "should have three visible status labels");
-        assert.containsOnce(list, '.o_field_widget.badge.badge-warning',
+        assert.containsOnce(list, '.o_field_widget.badge.text-bg-warning',
             "should have one warning status label");
-        assert.strictEqual(list.$('.o_field_widget.badge.badge-warning').text(), 'Blocked',
+        assert.strictEqual(list.$('.o_field_widget.badge.text-bg-warning').text(), 'Blocked',
             "the warning label should read 'Blocked'");
-        assert.containsOnce(list, '.o_field_widget.badge.badge-secondary',
+        assert.containsOnce(list, '.o_field_widget.badge.text-bg-secondary',
             "should have one default status label");
-        assert.strictEqual(list.$('.o_field_widget.badge.badge-secondary').text(), 'Normal',
+        assert.strictEqual(list.$('.o_field_widget.badge.text-bg-secondary').text(), 'Normal',
             "the default label should read 'Normal'");
-        assert.containsOnce(list, '.o_field_widget.badge.badge-success',
+        assert.containsOnce(list, '.o_field_widget.badge.text-bg-success',
             "should have one success status label");
-        assert.strictEqual(list.$('.o_field_widget.badge.badge-success').text(), 'Done',
+        assert.strictEqual(list.$('.o_field_widget.badge.text-bg-success').text(), 'Done',
             "the success label should read 'Done'");
 
         // save and check the result
         await testUtils.dom.click(list.$buttons.find('.o_list_button_save'));
         assert.strictEqual(list.$('.o_field_widget.badge:not(:empty)').length, 3,
             "should have three visible status labels");
-        assert.containsOnce(list, '.o_field_widget.badge.badge-warning',
+        assert.containsOnce(list, '.o_field_widget.badge.text-bg-warning',
             "should have one warning status label");
-        assert.strictEqual(list.$('.o_field_widget.badge.badge-warning').text(), 'Blocked',
+        assert.strictEqual(list.$('.o_field_widget.badge.text-bg-warning').text(), 'Blocked',
             "the warning label should read 'Blocked'");
-        assert.containsOnce(list, '.o_field_widget.badge.badge-secondary',
+        assert.containsOnce(list, '.o_field_widget.badge.text-bg-secondary',
             "should have one default status label");
-        assert.strictEqual(list.$('.o_field_widget.badge.badge-secondary').text(), 'Normal',
+        assert.strictEqual(list.$('.o_field_widget.badge.text-bg-secondary').text(), 'Normal',
             "the default label should read 'Normal'");
-        assert.containsOnce(list, '.o_field_widget.badge.badge-success',
+        assert.containsOnce(list, '.o_field_widget.badge.text-bg-success',
             "should have one success status label");
-        assert.strictEqual(list.$('.o_field_widget.badge.badge-success').text(), 'Done',
+        assert.strictEqual(list.$('.o_field_widget.badge.text-bg-success').text(), 'Done',
             "the success label should read 'Done'");
 
         list.destroy();
diff --git a/addons/web/static/tests/legacy/fields/relational_fields/field_many2many_tests.js b/addons/web/static/tests/legacy/fields/relational_fields/field_many2many_tests.js
index d25808c3e55..1d439fb71ed 100644
--- a/addons/web/static/tests/legacy/fields/relational_fields/field_many2many_tests.js
+++ b/addons/web/static/tests/legacy/fields/relational_fields/field_many2many_tests.js
@@ -136,7 +136,7 @@ QUnit.module('Legacy fields', {}, function () {
                     '<templates>' +
                     '<t t-name="kanban-box">' +
                     '<div class="oe_kanban_global_click">' +
-                    '<a t-if="!read_only_mode" type="delete" class="fa fa-times float-right delete_icon"/>' +
+                    '<a t-if="!read_only_mode" type="delete" class="fa fa-times float-end delete_icon"/>' +
                     '<span><t t-esc="record.display_name.value"/></span>' +
                     '</div>' +
                     '</t>' +
@@ -317,7 +317,7 @@ QUnit.module('Legacy fields', {}, function () {
                     '<templates>' +
                     '<t t-name="kanban-box">' +
                     '<div class="oe_kanban_global_click">' +
-                    '<a t-if="!read_only_mode" type="delete" class="fa fa-times float-right delete_icon"/>' +
+                    '<a t-if="!read_only_mode" type="delete" class="fa fa-times float-end delete_icon"/>' +
                     '<span><t t-esc="record.display_name.value"/></span>' +
                     '</div>' +
                     '</t>' +
@@ -1123,23 +1123,23 @@ QUnit.module('Legacy fields', {}, function () {
                 }
             });
 
-            assert.notOk(form.$('.o_form_view .custom-checkbox input').eq(0).prop('checked'),
+            assert.notOk(form.$('.o_form_view .form-check input').eq(0).prop('checked'),
                 "first checkbox should not be checked");
-            assert.notOk(form.$('.o_form_view .custom-checkbox input').eq(1).prop('checked'),
+            assert.notOk(form.$('.o_form_view .form-check input').eq(1).prop('checked'),
                 "second checkbox should not be checked");
-            assert.ok(form.$('.o_form_view .custom-checkbox input').eq(2).prop('checked'),
+            assert.ok(form.$('.o_form_view .form-check input').eq(2).prop('checked'),
                 "third checkbox should be checked");
 
-            await testUtils.dom.click(form.$('.o_form_view .custom-checkbox input:checked'));
-            await testUtils.dom.click(form.$('.o_form_view .custom-checkbox input').first());
-            await testUtils.dom.click(form.$('.o_form_view .custom-checkbox input').first());
-            await testUtils.dom.click(form.$('.o_form_view .custom-checkbox input').first());
+            await testUtils.dom.click(form.$('.o_form_view .form-check input:checked'));
+            await testUtils.dom.click(form.$('.o_form_view .form-check input').first());
+            await testUtils.dom.click(form.$('.o_form_view .form-check input').first());
+            await testUtils.dom.click(form.$('.o_form_view .form-check input').first());
 
-            assert.ok(form.$('.o_form_view .custom-checkbox input').eq(0).prop('checked'),
+            assert.ok(form.$('.o_form_view .form-check input').eq(0).prop('checked'),
                 "first checkbox should be checked");
-            assert.notOk(form.$('.o_form_view .custom-checkbox input').eq(1).prop('checked'),
+            assert.notOk(form.$('.o_form_view .form-check input').eq(1).prop('checked'),
                 "second checkbox should not be checked");
-            assert.notOk(form.$('.o_form_view .custom-checkbox input').eq(2).prop('checked'),
+            assert.notOk(form.$('.o_form_view .form-check input').eq(2).prop('checked'),
                 "third checkbox should not be checked");
 
             await testUtils.form.clickSave(form);
diff --git a/addons/web/static/tests/legacy/fields/relational_fields/field_one2many_tests.js b/addons/web/static/tests/legacy/fields/relational_fields/field_one2many_tests.js
index ef29ffd8ff0..209f174958d 100644
--- a/addons/web/static/tests/legacy/fields/relational_fields/field_one2many_tests.js
+++ b/addons/web/static/tests/legacy/fields/relational_fields/field_one2many_tests.js
@@ -1913,7 +1913,7 @@ QUnit.module('Legacy fields', {}, function () {
                     '<templates>' +
                     '<t t-name="kanban-box">' +
                     '<div class="oe_kanban_global_click">' +
-                    '<a t-if="!read_only_mode" type="delete" class="fa fa-times float-right delete_icon"/>' +
+                    '<a t-if="!read_only_mode" type="delete" class="fa fa-times float-end delete_icon"/>' +
                     '<span><t t-esc="record.display_name.value"/></span>' +
                     '</div>' +
                     '</t>' +
@@ -2398,7 +2398,7 @@ QUnit.module('Legacy fields', {}, function () {
                                 '<templates>' +
                                     '<t t-name="kanban-box">' +
                                         '<div class="oe_kanban_global_click">' +
-                                            '<a t-if="!read_only_mode" type="delete" class="fa fa-times float-right delete_icon"/>' +
+                                            '<a t-if="!read_only_mode" type="delete" class="fa fa-times float-end delete_icon"/>' +
                                             '<span><t t-esc="record.display_name.value"/></span>' +
                                             '<span><t t-esc="record.color.value"/></span>' +
                                         '</div>' +
@@ -2545,7 +2545,7 @@ QUnit.module('Legacy fields', {}, function () {
                     '<templates>' +
                     '<t t-name="kanban-box">' +
                     '<div class="oe_kanban_global_click">' +
-                    '<a t-if="!read_only_mode" type="delete" class="fa fa-times float-right delete_icon"/>' +
+                    '<a t-if="!read_only_mode" type="delete" class="fa fa-times float-end delete_icon"/>' +
                     '<span><t t-esc="record.display_name.value"/></span>' +
                     '</div>' +
                     '</t>' +
diff --git a/addons/web/static/tests/legacy/fields/relational_fields_tests.js b/addons/web/static/tests/legacy/fields/relational_fields_tests.js
index 0b607edf551..3372476f2ef 100644
--- a/addons/web/static/tests/legacy/fields/relational_fields_tests.js
+++ b/addons/web/static/tests/legacy/fields/relational_fields_tests.js
@@ -425,10 +425,10 @@ QUnit.module('Legacy relational_fields', {
         await testUtils.form.clickEdit(form);
         await testUtils.dom.click(form.$('.o_data_cell'));
         // edit the partner_ids field by (un)checking boxes on the widget
-        var $firstCheckbox = $('.modal .custom-control-input').first();
+        var $firstCheckbox = $('.modal .form-check-input').first();
         await testUtils.dom.click($firstCheckbox);
         assert.ok($firstCheckbox.prop('checked'), "the checkbox should be ticked");
-        var $secondCheckbox = $('.modal .custom-control-input').eq(1);
+        var $secondCheckbox = $('.modal .form-check-input').eq(1);
         await testUtils.dom.click($secondCheckbox);
         assert.notOk($secondCheckbox.prop('checked'), "the checkbox should be unticked");
         form.destroy();
@@ -1491,7 +1491,7 @@ QUnit.module('Legacy relational_fields', {
         // checkbox 'Hide in Kanban'
         $input = form.$('.o_field_many2manytags .badge[data-id=13] .dropdown-toggle'); // selects 'red' tag
         await testUtils.dom.click($input);
-        var $checkBox = form.$('.o_field_many2manytags .badge[data-id=13] .custom-checkbox input');
+        var $checkBox = form.$('.o_field_many2manytags .badge[data-id=13] .form-check input');
         assert.strictEqual($checkBox.length, 1, "should have a checkbox in the colorpicker dropdown menu");
         assert.notOk($checkBox.is(':checked'), "should have unticked checkbox in colorpicker dropdown menu");
 
@@ -1499,7 +1499,7 @@ QUnit.module('Legacy relational_fields', {
 
         $input = form.$('.o_field_many2manytags .badge[data-id=13] .dropdown-toggle'); // refresh
         await testUtils.dom.click($input);
-        $checkBox = form.$('.o_field_many2manytags .badge[data-id=13] .custom-checkbox input'); // refresh
+        $checkBox = form.$('.o_field_many2manytags .badge[data-id=13] .form-check input'); // refresh
         assert.equal($input.parent().data('color'), "0", "should become transparent when toggling on checkbox");
         assert.ok($checkBox.is(':checked'), "should have a ticked checkbox in colorpicker dropdown menu after mousedown");
 
@@ -1507,7 +1507,7 @@ QUnit.module('Legacy relational_fields', {
 
         $input = form.$('.o_field_many2manytags .badge[data-id=13] .dropdown-toggle'); // refresh
         await testUtils.dom.click($input);
-        $checkBox = form.$('.o_field_many2manytags .badge[data-id=13] .custom-checkbox input'); // refresh
+        $checkBox = form.$('.o_field_many2manytags .badge[data-id=13] .form-check input'); // refresh
         assert.equal($input.parent().data('color'), "8", "should revert to old color when toggling off checkbox");
         assert.notOk($checkBox.is(':checked'), "should have an unticked checkbox in colorpicker dropdown menu after 2nd click");
 
@@ -2664,24 +2664,24 @@ QUnit.module('Legacy relational_fields', {
             res_id: 1,
         });
 
-        assert.containsN(form, 'div.o_field_widget div.custom-checkbox', 2,
+        assert.containsN(form, 'div.o_field_widget div.form-check', 2,
             "should have fetched and displayed the 2 values of the many2many");
 
-        assert.ok(form.$('div.o_field_widget div.custom-checkbox input').eq(0).prop('checked'),
+        assert.ok(form.$('div.o_field_widget div.form-check input').eq(0).prop('checked'),
             "first checkbox should be checked");
-        assert.notOk(form.$('div.o_field_widget div.custom-checkbox input').eq(1).prop('checked'),
+        assert.notOk(form.$('div.o_field_widget div.form-check input').eq(1).prop('checked'),
             "second checkbox should not be checked");
 
-        assert.notOk(form.$('div.o_field_widget div.custom-checkbox input').prop('disabled'),
+        assert.notOk(form.$('div.o_field_widget div.form-check input').prop('disabled'),
             "the checkboxes should not be disabled");
 
         await testUtils.form.clickEdit(form);
 
-        assert.notOk(form.$('div.o_field_widget div.custom-checkbox input').prop('disabled'),
+        assert.notOk(form.$('div.o_field_widget div.form-check input').prop('disabled'),
             "the checkboxes should not be disabled");
 
         // add a m2m value by clicking on input
-        await testUtils.dom.click(form.$('div.o_field_widget div.custom-checkbox input').eq(1));
+        await testUtils.dom.click(form.$('div.o_field_widget div.form-check input').eq(1));
         await testUtils.form.clickSave(form);
         assert.deepEqual(this.data.partner.records[0].timmy, [12, 14],
             "should have added the second element to the many2many");
@@ -2690,13 +2690,13 @@ QUnit.module('Legacy relational_fields', {
 
         // remove a m2m value by clinking on label
         await testUtils.form.clickEdit(form);
-        await testUtils.dom.click(form.$('div.o_field_widget div.custom-checkbox > label').eq(0));
+        await testUtils.dom.click(form.$('div.o_field_widget div.form-check > label').eq(0));
         await testUtils.form.clickSave(form);
         assert.deepEqual(this.data.partner.records[0].timmy, [14],
             "should have removed the first element to the many2many");
-        assert.notOk(form.$('div.o_field_widget div.custom-checkbox input').eq(0).prop('checked'),
+        assert.notOk(form.$('div.o_field_widget div.form-check input').eq(0).prop('checked'),
             "first checkbox should be checked");
-        assert.ok(form.$('div.o_field_widget div.custom-checkbox input').eq(1).prop('checked'),
+        assert.ok(form.$('div.o_field_widget div.form-check input').eq(1).prop('checked'),
             "second checkbox should not be checked");
 
         form.destroy();
@@ -2720,27 +2720,27 @@ QUnit.module('Legacy relational_fields', {
             res_id: 1,
         });
 
-        assert.containsN(form, 'div.o_field_widget div.custom-checkbox', 2,
+        assert.containsN(form, 'div.o_field_widget div.form-check', 2,
             "should have fetched and displayed the 2 values of the many2many");
 
-        assert.ok(form.$('div.o_field_widget div.custom-checkbox input').eq(0).prop('checked'),
+        assert.ok(form.$('div.o_field_widget div.form-check input').eq(0).prop('checked'),
             "first checkbox should be checked");
-        assert.notOk(form.$('div.o_field_widget div.custom-checkbox input').eq(1).prop('checked'),
+        assert.notOk(form.$('div.o_field_widget div.form-check input').eq(1).prop('checked'),
             "second checkbox should not be checked");
 
-        assert.ok(form.$('div.o_field_widget div.custom-checkbox input').prop('disabled'),
+        assert.ok(form.$('div.o_field_widget div.form-check input').prop('disabled'),
             "the checkboxes should be disabled");
 
         await testUtils.form.clickEdit(form);
 
-        assert.ok(form.$('div.o_field_widget div.custom-checkbox input').prop('disabled'),
+        assert.ok(form.$('div.o_field_widget div.form-check input').prop('disabled'),
             "the checkboxes should be disabled");
 
-        await testUtils.dom.click(form.$('div.o_field_widget div.custom-checkbox > label').eq(1));
+        await testUtils.dom.click(form.$('div.o_field_widget div.form-check > label').eq(1));
 
-        assert.ok(form.$('div.o_field_widget div.custom-checkbox input').eq(0).prop('checked'),
+        assert.ok(form.$('div.o_field_widget div.form-check input').eq(0).prop('checked'),
             "first checkbox should be checked");
-        assert.notOk(form.$('div.o_field_widget div.custom-checkbox input').eq(1).prop('checked'),
+        assert.notOk(form.$('div.o_field_widget div.form-check input').eq(1).prop('checked'),
             "second checkbox should not be checked");
 
         form.destroy();
@@ -2761,12 +2761,12 @@ QUnit.module('Legacy relational_fields', {
             viewOptions: {mode: 'edit'},
         });
 
-        await testUtils.dom.click(form.$('div.o_field_widget div.custom-checkbox input').eq(0));
-        await testUtils.dom.click(form.$('div.o_field_widget div.custom-checkbox input').eq(1));
+        await testUtils.dom.click(form.$('div.o_field_widget div.form-check input').eq(0));
+        await testUtils.dom.click(form.$('div.o_field_widget div.form-check input').eq(1));
         await testUtils.form.clickSave(form);
-        assert.notOk(form.$('div.o_field_widget div.custom-checkbox input').eq(0).prop('checked'),
+        assert.notOk(form.$('div.o_field_widget div.form-check input').eq(0).prop('checked'),
             "first checkbox should not be checked");
-        assert.notOk(form.$('div.o_field_widget div.custom-checkbox input').eq(1).prop('checked'),
+        assert.notOk(form.$('div.o_field_widget div.form-check input').eq(1).prop('checked'),
             "second checkbox should not be checked");
 
         form.destroy();
@@ -2790,12 +2790,12 @@ QUnit.module('Legacy relational_fields', {
         });
 
         assert.strictEqual(form.$('.o_field_widget[name=int_field]').val(), '10');
-        assert.containsN(form, '.o_field_widget[name=timmy] .custom-checkbox', 2);
+        assert.containsN(form, '.o_field_widget[name=timmy] .form-check', 2);
         assert.strictEqual(form.$('.o_field_widget[name=timmy] .o_form_label').text(), 'goldsilver');
 
         await testUtils.fields.editInput(form.$('.o_field_widget[name=int_field]'), 13);
 
-        assert.containsOnce(form, '.o_field_widget[name=timmy] .custom-checkbox');
+        assert.containsOnce(form, '.o_field_widget[name=timmy] .form-check');
         assert.strictEqual(form.$('.o_field_widget[name=timmy] .o_form_label').text(), 'silver');
 
         form.destroy();
diff --git a/addons/web/static/tests/legacy/views/abstract_view_banner_tests.js b/addons/web/static/tests/legacy/views/abstract_view_banner_tests.js
index 74a01c4a6f2..284495c5f4d 100644
--- a/addons/web/static/tests/legacy/views/abstract_view_banner_tests.js
+++ b/addons/web/static/tests/legacy/views/abstract_view_banner_tests.js
@@ -48,7 +48,7 @@ QUnit.module('LegacyViews', {
                     <div class="modal-dialog" role="document">
                         <div class="modal-content">
                             <div class="modal-footer">
-                                <a type="action" class="btn btn-primary" data-dismiss="modal"
+                                <a type="action" class="btn btn-primary" data-bs-dismiss="modal"
                                 data-o-hide-banner="true">
                                     Remove
                                 </a>
@@ -58,8 +58,8 @@ QUnit.module('LegacyViews', {
                 </div>
                 <div class="o_onboarding_container collapse show">
                     <div class="o_onboarding_wrap">
-                        <a href="#" data-toggle="modal" data-bs-target=".o_onboarding_modal"
-                           class="float-right o_onboarding_btn_close">
+                        <a href="#" data-bs-toggle="modal" data-bs-target=".o_onboarding_modal"
+                           class="float-end o_onboarding_btn_close">
                             <i class="fa fa-times" title="Close the onboarding panel" />
                         </a>
                     </div>
diff --git a/addons/web/static/tests/legacy/views/form_tests.js b/addons/web/static/tests/legacy/views/form_tests.js
index 584fb64f723..39ea24981a2 100644
--- a/addons/web/static/tests/legacy/views/form_tests.js
+++ b/addons/web/static/tests/legacy/views/form_tests.js
@@ -247,7 +247,7 @@ QUnit.module('LegacyViews', {
         assert.containsNone(form, 'label:contains(something_id)');
         assert.containsOnce(form, 'label:contains(f3_description)');
         assert.containsOnce(form, 'div.o_field_one2many table');
-        assert.containsOnce(form, 'tbody td:not(.o_list_record_selector) .custom-checkbox input:checked');
+        assert.containsOnce(form, 'tbody td:not(.o_list_record_selector) .form-check input:checked');
         assert.containsOnce(form, '.o_control_panel .breadcrumb:contains(second record)');
         assert.containsNone(form, 'label.o_form_label_empty:contains(timmy)');
 
diff --git a/addons/web/static/tests/legacy/views/kanban_tests.js b/addons/web/static/tests/legacy/views/kanban_tests.js
index 86081c43c6b..7edac17b2d1 100644
--- a/addons/web/static/tests/legacy/views/kanban_tests.js
+++ b/addons/web/static/tests/legacy/views/kanban_tests.js
@@ -5828,7 +5828,7 @@ QUnit.module('LegacyViews', {
                         '<t t-name="kanban-box">' +
                             '<div>' +
                                 '<field name="foo"/>' +
-                                '<button type="object" attrs="{\'invisible\':[\'|\', (\'bar\',\'=\',True), (\'category_ids\', \'!=\', [])]}" class="btn btn-primary float-right" name="arbitrary">Join</button>' +
+                                '<button type="object" attrs="{\'invisible\':[\'|\', (\'bar\',\'=\',True), (\'category_ids\', \'!=\', [])]}" class="btn btn-primary float-end" name="arbitrary">Join</button>' +
                             '</div>' +
                         '</t>' +
                     '</templates>' +
@@ -5857,7 +5857,7 @@ QUnit.module('LegacyViews', {
                         '<t t-name="kanban-box">' +
                             '<div color="color">' +
                                 '<div class="o_dropdown_kanban dropdown">' +
-                                    '<a class="dropdown-toggle o-no-caret btn" data-toggle="dropdown" href="#">' +
+                                    '<a class="dropdown-toggle o-no-caret btn" data-bs-toggle="dropdown" href="#">' +
                                             '<span class="fa fa-bars fa-lg"/>' +
                                     '</a>' +
                                     '<ul class="dropdown-menu" role="menu">' +
@@ -6304,7 +6304,7 @@ QUnit.module('LegacyViews', {
                             '<t t-name="kanban-box">' +
                                 '<div color="color">' +
                                     '<div class="o_dropdown_kanban dropdown">' +
-                                        '<a class="dropdown-toggle o-no-caret btn" data-toggle="dropdown" href="#">' +
+                                        '<a class="dropdown-toggle o-no-caret btn" data-bs-toggle="dropdown" href="#">' +
                                             '<span class="fa fa-bars fa-lg"/>' +
                                         '</a>' +
                                         '<ul class="dropdown-menu" role="menu">' +
@@ -6651,7 +6651,7 @@ QUnit.module('LegacyViews', {
 
         assert.strictEqual(kanban.$('.o_kanban_group:eq(1) .o_kanban_counter_side').text(), "36",
             "counter should contain the correct value");
-        assert.strictEqual(kanban.$('.o_kanban_group:eq(1) .o_kanban_counter_progress > .progress-bar:first').data('originalTitle'), "1 yop",
+        assert.strictEqual(kanban.$('.o_kanban_group:eq(1) .o_kanban_counter_progress > .progress-bar:first').data('bsOriginalTitle'), "1 yop",
             "the counter progressbars should be correctly displayed");
 
         // archive all records of the second columns
@@ -6661,7 +6661,7 @@ QUnit.module('LegacyViews', {
 
         assert.strictEqual(kanban.$('.o_kanban_group:eq(1) .o_kanban_counter_side').text(), "0",
             "counter should contain the correct value");
-        assert.strictEqual(kanban.$('.o_kanban_group:eq(1) .o_kanban_counter_progress > .progress-bar:first').data('originalTitle'), "0 yop",
+        assert.strictEqual(kanban.$('.o_kanban_group:eq(1) .o_kanban_counter_progress > .progress-bar:first').data('bsOriginalTitle'), "0 yop",
             "the counter progressbars should have been correctly updated");
 
         kanban.destroy();
@@ -6908,7 +6908,7 @@ QUnit.module('LegacyViews', {
         });
 
         assert.deepEqual(
-            [...view.el.querySelectorAll('.progress-bar')].map(el => el.getAttribute('data-original-title')),
+            [...view.el.querySelectorAll('.progress-bar')].map(el => el.getAttribute('data-bs-original-title')),
             ['0 yop', '0 gnap', '1 blip', '0 __false', '1 yop', '1 gnap', '1 blip', '0 __false']
         );
 
@@ -6924,7 +6924,7 @@ QUnit.module('LegacyViews', {
         );
 
         assert.deepEqual(
-            [...view.el.querySelectorAll('.progress-bar')].map(el => el.getAttribute('data-original-title')),
+            [...view.el.querySelectorAll('.progress-bar')].map(el => el.getAttribute('data-bs-original-title')),
             ['0 yop', '1 gnap', '1 blip', '0 __false', '1 yop', '0 gnap', '1 blip', '0 __false']
         );
 
@@ -7686,7 +7686,7 @@ QUnit.module('LegacyViews', {
         const kanbanController = await viewCreatedPromise;
         assert.strictEqual(kanbanController.$('.o_kanban_record').text(),
             "LOADEDLOADEDLOADEDLOADED");
-        assert.hasClass(kanbanController.$('.o_kanban_record:first .o_field_char'), 'float-right');
+        assert.hasClass(kanbanController.$('.o_kanban_record:first .o_field_char'), 'float-end');
 
         kanbanController.destroy();
         delete fieldRegistry.map.asyncWidget;
@@ -7778,7 +7778,7 @@ QUnit.module('LegacyViews', {
                             '<div class="oe_kanban_global_click">' +
                                 '<field name="name"/>' +
                                 '<div class="o_dropdown_kanban dropdown">' +
-                                    '<a class="dropdown-toggle o-no-caret btn" data-toggle="dropdown" href="#">' +
+                                    '<a class="dropdown-toggle o-no-caret btn" data-bs-toggle="dropdown" href="#">' +
                                         '<span class="fa fa-bars fa-lg"/>' +
                                     '</a>' +
                                     '<div class="dropdown-menu" role="menu">' +
@@ -7989,7 +7989,7 @@ QUnit.module('LegacyViews', {
         });
 
         assert.containsOnce(kanban.el.querySelector('.o_kanban_record'),
-            'div.custom-checkbox.o_field_boolean');
+            'div.form-check.o_field_boolean');
         kanban.destroy();
     });
 
@@ -8127,11 +8127,11 @@ QUnit.module('LegacyViews', {
             ["No", "Yes"],
         );
         assert.deepEqual(
-            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(1) .o_legacy_kanban_counter .progress-bar")].map(el => el.dataset.originalTitle),
+            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(1) .o_legacy_kanban_counter .progress-bar")].map(el => el.dataset.bsOriginalTitle),
             ["0 yop", "1 blip", "0 __false"],
         );
         assert.deepEqual(
-            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(2) .o_legacy_kanban_counter .progress-bar")].map(el => el.dataset.originalTitle),
+            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(2) .o_legacy_kanban_counter .progress-bar")].map(el => el.dataset.bsOriginalTitle),
             ["1 yop", "1 blip", "1 __false"],
         );
 
@@ -8148,7 +8148,7 @@ QUnit.module('LegacyViews', {
         assert.containsOnce(kanban.el, ".o_kanban_group.o_kanban_group_show");
         assert.strictEqual(kanban.el.querySelector(".o_column_title").innerText, "Yes");
         assert.deepEqual(
-            [...kanban.el.querySelectorAll(".o_kanban_group .o_legacy_kanban_counter .progress-bar")].map(el => el.dataset.originalTitle),
+            [...kanban.el.querySelectorAll(".o_kanban_group .o_legacy_kanban_counter .progress-bar")].map(el => el.dataset.bsOriginalTitle),
             ["1 yop", "0 blip", "0 __false"],
         );
 
@@ -8163,11 +8163,11 @@ QUnit.module('LegacyViews', {
             ["No", "Yes"],
         );
         assert.deepEqual(
-            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(1) .o_legacy_kanban_counter .progress-bar")].map(el => el.dataset.originalTitle),
+            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(1) .o_legacy_kanban_counter .progress-bar")].map(el => el.dataset.bsOriginalTitle),
             ["0 yop", "1 blip", "0 __false"],
         );
         assert.deepEqual(
-            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(2) .o_legacy_kanban_counter .progress-bar")].map(el => el.dataset.originalTitle),
+            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(2) .o_legacy_kanban_counter .progress-bar")].map(el => el.dataset.bsOriginalTitle),
             ["1 yop", "1 blip", "1 __false"],
         );
 
@@ -8206,7 +8206,7 @@ QUnit.module('LegacyViews', {
             ["No", "Yes"],
         );
         assert.deepEqual(
-            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(1) .o_legacy_kanban_counter .progress-bar")].map(el => el.dataset.originalTitle),
+            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(1) .o_legacy_kanban_counter .progress-bar")].map(el => el.dataset.bsOriginalTitle),
             ["0 yop", "1 blip", "0 __false"],
         );
         assert.deepEqual(
@@ -8214,7 +8214,7 @@ QUnit.module('LegacyViews', {
             ["4 blip"],
         );
         assert.deepEqual(
-            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(2) .o_legacy_kanban_counter .progress-bar")].map(el => el.dataset.originalTitle),
+            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(2) .o_legacy_kanban_counter .progress-bar")].map(el => el.dataset.bsOriginalTitle),
             ["1 yop", "1 blip", "1 __false"],
         );
         assert.deepEqual(
@@ -8227,7 +8227,7 @@ QUnit.module('LegacyViews', {
         assert.containsOnce(kanban.el, ".o_kanban_group.o_kanban_group_show");
         assert.strictEqual(kanban.el.querySelector(".o_kanban_group.o_kanban_group_show .o_column_title").innerText, "Yes");
         assert.deepEqual(
-            [...kanban.el.querySelectorAll(".o_kanban_group.o_kanban_group_show .o_legacy_kanban_counter .progress-bar")].map(el => el.dataset.originalTitle),
+            [...kanban.el.querySelectorAll(".o_kanban_group.o_kanban_group_show .o_legacy_kanban_counter .progress-bar")].map(el => el.dataset.bsOriginalTitle),
             ["1 yop", "1 blip", "1 __false"],
         );
         assert.deepEqual(
@@ -8246,7 +8246,7 @@ QUnit.module('LegacyViews', {
             ["No", "Yes"],
         );
         assert.deepEqual(
-            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(1) .o_legacy_kanban_counter .progress-bar")].map(el => el.dataset.originalTitle),
+            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(1) .o_legacy_kanban_counter .progress-bar")].map(el => el.dataset.bsOriginalTitle),
             ["0 yop", "1 blip", "0 __false"],
         );
         assert.deepEqual(
@@ -8254,7 +8254,7 @@ QUnit.module('LegacyViews', {
             ["4 blip"],
         );
         assert.deepEqual(
-            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(2) .o_legacy_kanban_counter .progress-bar")].map(el => el.dataset.originalTitle),
+            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(2) .o_legacy_kanban_counter .progress-bar")].map(el => el.dataset.bsOriginalTitle),
             ["0 yop", "1 blip", "0 __false"],
         );
         assert.deepEqual(
@@ -8273,7 +8273,7 @@ QUnit.module('LegacyViews', {
             ["No", "Yes"],
         );
         assert.deepEqual(
-            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(1) .o_legacy_kanban_counter .progress-bar")].map(el => el.dataset.originalTitle),
+            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(1) .o_legacy_kanban_counter .progress-bar")].map(el => el.dataset.bsOriginalTitle),
             ["0 yop", "1 blip", "0 __false"],
         );
         assert.deepEqual(
@@ -8281,7 +8281,7 @@ QUnit.module('LegacyViews', {
             ["4 blip"],
         );
         assert.deepEqual(
-            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(2) .o_legacy_kanban_counter .progress-bar")].map(el => el.dataset.originalTitle),
+            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(2) .o_legacy_kanban_counter .progress-bar")].map(el => el.dataset.bsOriginalTitle),
             ["1 yop", "1 blip", "1 __false"],
         );
         assert.deepEqual(
@@ -8324,7 +8324,7 @@ QUnit.module('LegacyViews', {
             ["No", "Yes"],
         );
         assert.deepEqual(
-            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(1) .o_legacy_kanban_counter .progress-bar")].map(el => el.dataset.originalTitle),
+            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(1) .o_legacy_kanban_counter .progress-bar")].map(el => el.dataset.bsOriginalTitle),
             ["0 yop", "1 blip", "0 __false"],
         );
         assert.deepEqual(
@@ -8332,7 +8332,7 @@ QUnit.module('LegacyViews', {
             ["4 blip"],
         );
         assert.deepEqual(
-            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(2) .o_legacy_kanban_counter .progress-bar")].map(el => el.dataset.originalTitle),
+            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(2) .o_legacy_kanban_counter .progress-bar")].map(el => el.dataset.bsOriginalTitle),
             ["1 yop", "1 blip", "1 __false"],
         );
         assert.deepEqual(
@@ -8362,7 +8362,7 @@ QUnit.module('LegacyViews', {
             ["No", "Yes"],
         );
         assert.deepEqual(
-            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(1) .o_legacy_kanban_counter .progress-bar")].map(el => el.dataset.originalTitle),
+            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(1) .o_legacy_kanban_counter .progress-bar")].map(el => el.dataset.bsOriginalTitle),
             ["0 yop", "0 blip", "0 __false"],
         );
         assert.deepEqual(
@@ -8370,7 +8370,7 @@ QUnit.module('LegacyViews', {
             [],
         );
         assert.deepEqual(
-            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(2) .o_legacy_kanban_counter .progress-bar")].map(el => el.dataset.originalTitle),
+            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(2) .o_legacy_kanban_counter .progress-bar")].map(el => el.dataset.bsOriginalTitle),
             ["1 yop", "2 blip", "1 __false"],
         );
         assert.deepEqual(
@@ -8417,7 +8417,7 @@ QUnit.module('LegacyViews', {
             ["No", "Yes"],
         );
         assert.deepEqual(
-            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(1) .o_legacy_kanban_counter .progress-bar")].map(el => el.dataset.originalTitle),
+            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(1) .o_legacy_kanban_counter .progress-bar")].map(el => el.dataset.bsOriginalTitle),
             ["0 yop", "1 blip", "0 __false"],
         );
         assert.deepEqual(
@@ -8425,7 +8425,7 @@ QUnit.module('LegacyViews', {
             ["4 blip"],
         );
         assert.deepEqual(
-            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(2) .o_legacy_kanban_counter .progress-bar")].map(el => el.dataset.originalTitle),
+            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(2) .o_legacy_kanban_counter .progress-bar")].map(el => el.dataset.bsOriginalTitle),
             ["1 yop", "1 blip", "1 __false"],
         );
         assert.deepEqual(
@@ -8462,7 +8462,7 @@ QUnit.module('LegacyViews', {
             ["No", "Yes"],
         );
         assert.deepEqual(
-            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(1) .o_legacy_kanban_counter .progress-bar")].map(el => el.dataset.originalTitle),
+            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(1) .o_legacy_kanban_counter .progress-bar")].map(el => el.dataset.bsOriginalTitle),
             ["1 yop", "1 blip", "0 __false"],
         );
         assert.deepEqual(
@@ -8470,7 +8470,7 @@ QUnit.module('LegacyViews', {
             ["4 blip", "1 yop"],
         );
         assert.deepEqual(
-            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(2) .o_legacy_kanban_counter .progress-bar")].map(el => el.dataset.originalTitle),
+            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(2) .o_legacy_kanban_counter .progress-bar")].map(el => el.dataset.bsOriginalTitle),
             ["0 yop", "1 blip", "1 __false"],
         );
         assert.deepEqual(
diff --git a/addons/web/static/tests/legacy/views/list_tests.js b/addons/web/static/tests/legacy/views/list_tests.js
index 003dfbc5b97..9bdd9c16ab3 100644
--- a/addons/web/static/tests/legacy/views/list_tests.js
+++ b/addons/web/static/tests/legacy/views/list_tests.js
@@ -4667,7 +4667,7 @@ QUnit.module('LegacyViews', {
         assert.strictEqual(cells[0].innerText.trim(), "",
             "Char field should yield an empty element"
         );
-        assert.containsOnce(cells[1], '.custom-checkbox',
+        assert.containsOnce(cells[1], '.form-check',
             "Boolean field has been instantiated"
         );
         assert.notOk(isNaN(cells[2].innerText.trim()), "Intger value is a number");
@@ -9852,7 +9852,7 @@ QUnit.module('LegacyViews', {
         var $disabledCell = list.$('.o_data_row:eq(1) .o_data_cell:last-child');
         await testUtils.dom.click($disabledCell.prev());
         assert.containsOnce($disabledCell, ':disabled:checked');
-        var $disabledLabel = $disabledCell.find('.custom-control-label');
+        var $disabledLabel = $disabledCell.find('.form-check-label');
         await testUtils.dom.click($disabledLabel);
         assert.containsOnce($disabledCell, ':checked',
             "clicking disabled checkbox did not work"
@@ -9866,7 +9866,7 @@ QUnit.module('LegacyViews', {
         var $enabledCell = list.$('.o_data_row:eq(0) .o_data_cell:last-child');
         await testUtils.dom.click($enabledCell.prev());
         assert.containsOnce($enabledCell, ':checked:not(:disabled)');
-        var $enabledLabel = $enabledCell.find('.custom-control-label');
+        var $enabledLabel = $enabledCell.find('.form-check-label');
         await testUtils.dom.click($enabledLabel);
         assert.containsNone($enabledCell, ':checked',
             "clicking enabled checkbox worked and unchecked it"
@@ -11464,7 +11464,7 @@ QUnit.module('LegacyViews', {
         assert.ok(optionalFieldsDropdown.classList.contains('o_optional_columns'),
             'The optional fields dropdown is the last element');
 
-        assert.ok(list.$('.o_optional_columns .dropdown-menu').hasClass('dropdown-menu-right'),
+        assert.ok(list.$('.o_optional_columns .dropdown-menu').hasClass('dropdown-menu-end'),
             'In LTR, the dropdown should be anchored to the right and expand to the left');
 
         // optional fields
@@ -11532,7 +11532,7 @@ QUnit.module('LegacyViews', {
         assert.ok(optionalFieldsDropdown.classList.contains('o_optional_columns'),
             'The optional fields is the last element');
 
-        assert.ok(list.$('.o_optional_columns .dropdown-menu').hasClass('dropdown-menu-left'),
+        assert.ok(list.$('.o_optional_columns .dropdown-menu').hasClass('dropdown-menu-start'),
             'In RTL, the dropdown should be anchored to the left and expand to the right');
 
         list.destroy();
@@ -12235,7 +12235,7 @@ QUnit.module('LegacyViews', {
         });
 
         assert.containsN(list, '.o_data_row', 4);
-        assert.containsN(list, '.o_data_cell .custom-checkbox input:checked', 3);
+        assert.containsN(list, '.o_data_cell .form-check input:checked', 3);
 
         // select all records and edit the boolean field
         await testUtils.dom.click(list.$('thead .o_list_record_selector input'));
@@ -12246,7 +12246,7 @@ QUnit.module('LegacyViews', {
         assert.containsOnce(document.body, '.modal');
         await testUtils.dom.click($('.modal .modal-footer .btn-primary'));
 
-        assert.containsNone(list, '.o_data_cell .custom-checkbox input:checked');
+        assert.containsNone(list, '.o_data_cell .form-check input:checked');
 
         list.destroy();
     });
diff --git a/addons/web/static/tests/legacy/views/pivot_tests.js b/addons/web/static/tests/legacy/views/pivot_tests.js
index 4b8d50aa4d7..16294bd4eb0 100644
--- a/addons/web/static/tests/legacy/views/pivot_tests.js
+++ b/addons/web/static/tests/legacy/views/pivot_tests.js
@@ -268,8 +268,8 @@ QUnit.module('LegacyViews', {
                 '</pivot>',
         });
 
-        assert.strictEqual(pivot.$('tbody .o_pivot_header_cell_closed:first').attr('data-original-title'), 'Date');
-        assert.strictEqual(pivot.$('thead .o_pivot_header_cell_closed:first').attr('data-original-title'), 'Product');
+        assert.strictEqual(pivot.$('tbody .o_pivot_header_cell_closed:first').attr('data-bs-original-title'), 'Date');
+        assert.strictEqual(pivot.$('thead .o_pivot_header_cell_closed:first').attr('data-bs-original-title'), 'Product');
 
         pivot.destroy();
     });
diff --git a/addons/web/static/tests/qunit.js b/addons/web/static/tests/qunit.js
index d0417e56b82..2709cfcc148 100644
--- a/addons/web/static/tests/qunit.js
+++ b/addons/web/static/tests/qunit.js
@@ -310,16 +310,20 @@
 
     // Append a "Rerun in debug" link.
     // Only works if the test is not hidden.
-    QUnit.testDone(async ({ testId}) => {
+    QUnit.testDone(async ({ testId }) => {
         const testElement = document.getElementById(`qunit-test-output-${testId}`);
-        if (!testElement) { // Is probably hidden because it passed
+        if (!testElement) {
+            // Is probably hidden because it passed
             return;
         }
         const reRun = testElement.querySelector("li a");
         const reRunDebug = document.createElement("a");
         reRunDebug.textContent = "Rerun in debug";
         const location = window.location;
-        reRunDebug.setAttribute("href", `${location.origin}${location.pathname}${location.search}&debugTestId=${testId}`);
+        reRunDebug.setAttribute(
+            "href",
+            `${location.origin}${location.pathname}${location.search}&debugTestId=${testId}`
+        );
 
         reRun.parentElement.insertBefore(reRunDebug, reRun.nextSibling);
     });
@@ -460,10 +464,10 @@
         const toolbar = document.querySelector("#qunit-testrunner-toolbar .qunit-url-config");
         const statsEl = document.createElement("label");
         passedEl = document.createElement("span");
-        passedEl.classList.add("text-success", "ml-5", "mr-3");
+        passedEl.classList.add("text-success", "ms-5", "me-3");
         statsEl.appendChild(passedEl);
         failedEl = document.createElement("span");
-        failedEl.classList.add("text-danger", "mr-3");
+        failedEl.classList.add("text-danger", "me-3");
         statsEl.appendChild(failedEl);
         skippedEl = document.createElement("span");
         skippedEl.classList.add("text-dark");
diff --git a/addons/web/static/tests/search/custom_favorite_item_tests.js b/addons/web/static/tests/search/custom_favorite_item_tests.js
index a2ef6bba321..e40b326dc58 100644
--- a/addons/web/static/tests/search/custom_favorite_item_tests.js
+++ b/addons/web/static/tests/search/custom_favorite_item_tests.js
@@ -95,8 +95,8 @@ QUnit.module("Search", (hooks) => {
             target.querySelector('.o_add_favorite input[type="text"]').value,
             "Action Name"
         );
-        assert.containsN(target, '.o_add_favorite .custom-checkbox input[type="checkbox"]', 2);
-        const labelEls = target.querySelectorAll(".o_add_favorite .custom-checkbox label");
+        assert.containsN(target, '.o_add_favorite .form-check input[type="checkbox"]', 2);
+        const labelEls = target.querySelectorAll(".o_add_favorite .form-check label");
         assert.deepEqual(
             [...labelEls].map((e) => e.innerText.trim()),
             ["Use by default", "Share with all users"]
diff --git a/addons/web/static/tests/views/fields/boolean_field_tests.js b/addons/web/static/tests/views/fields/boolean_field_tests.js
index d8d2dfdf89c..1c5d795e2d4 100644
--- a/addons/web/static/tests/views/fields/boolean_field_tests.js
+++ b/addons/web/static/tests/views/fields/boolean_field_tests.js
@@ -111,7 +111,7 @@ QUnit.module("Fields", (hooks) => {
         );
 
         // check the checkbox by clicking on label
-        await click(target, ".o_form_view label:not(.custom-control-label)");
+        await click(target, ".o_form_view label:not(.form-check-label)");
         assert.containsOnce(
             target,
             ".o_field_boolean input:checked",
@@ -119,7 +119,7 @@ QUnit.module("Fields", (hooks) => {
         );
 
         // uncheck it back
-        await click(target, ".o_form_view label:not(.custom-control-label)");
+        await click(target, ".o_form_view label:not(.form-check-label)");
         assert.containsNone(
             target,
             ".o_field_boolean input:checked",
@@ -176,13 +176,13 @@ QUnit.module("Fields", (hooks) => {
 
         assert.containsN(
             target,
-            "tbody td:not(.o_list_record_selector) .custom-checkbox",
+            "tbody td:not(.o_list_record_selector) .form-check",
             5,
             "should have 5 checkboxes"
         );
         assert.containsN(
             target,
-            "tbody td:not(.o_list_record_selector) .custom-checkbox input:checked",
+            "tbody td:not(.o_list_record_selector) .form-check input:checked",
             4,
             "should have 4 checked input"
         );
@@ -190,52 +190,52 @@ QUnit.module("Fields", (hooks) => {
         // Edit a line
         let cell = target.querySelector("tr.o_data_row td:not(.o_list_record_selector)");
         assert.ok(
-            cell.querySelector(".custom-checkbox input:checked").disabled,
+            cell.querySelector(".form-check input:checked").disabled,
             "input should be disabled in readonly mode"
         );
         await click(cell);
         assert.notOk(
-            cell.querySelector(".custom-checkbox input:checked").disabled,
+            cell.querySelector(".form-check input:checked").disabled,
             "input should not have the disabled property in edit mode"
         );
-        await click(cell, ".custom-checkbox");
+        await click(cell, ".form-check");
 
         // save
         await click(target.querySelector(".o_list_button_save"));
         cell = target.querySelector("tr.o_data_row td:not(.o_list_record_selector)");
         assert.ok(
-            cell.querySelector(".custom-checkbox input:not(:checked)").disabled,
+            cell.querySelector(".form-check input:not(:checked)").disabled,
             "input should be disabled again"
         );
         assert.containsN(
             target,
-            "tbody td:not(.o_list_record_selector) .custom-checkbox",
+            "tbody td:not(.o_list_record_selector) .form-check",
             5,
             "should still have 5 checkboxes"
         );
         assert.containsN(
             target,
-            "tbody td:not(.o_list_record_selector) .custom-checkbox input:checked",
+            "tbody td:not(.o_list_record_selector) .form-check input:checked",
             3,
             "should now have only 3 checked input"
         );
 
         // Re-Edit the line and fake-check the checkbox
         await click(cell);
-        await click(cell, ".custom-checkbox");
-        await click(cell, ".custom-checkbox");
+        await click(cell, ".form-check");
+        await click(cell, ".form-check");
 
         // Save
         await click(target.querySelector(".o_list_button_save"));
         assert.containsN(
             target,
-            "tbody td:not(.o_list_record_selector) .custom-checkbox",
+            "tbody td:not(.o_list_record_selector) .form-check",
             5,
             "should still have 5 checkboxes"
         );
         assert.containsN(
             target,
-            "tbody td:not(.o_list_record_selector) .custom-checkbox input:checked",
+            "tbody td:not(.o_list_record_selector) .form-check input:checked",
             3,
             "should still have only 3 checked input"
         );
@@ -247,18 +247,18 @@ QUnit.module("Fields", (hooks) => {
         await click(cell, ".o_field_boolean");
 
         assert.notOk(
-            cell.querySelector(".custom-checkbox input").disabled,
+            cell.querySelector(".form-check input").disabled,
             "input should not have the disabled property in edit mode"
         );
         assert.containsN(
             target,
-            "tbody td:not(.o_list_record_selector) .custom-checkbox",
+            "tbody td:not(.o_list_record_selector) .form-check",
             5,
             "should still have 5 checkboxes"
         );
         assert.containsN(
             target,
-            "tbody td:not(.o_list_record_selector) .custom-checkbox input:checked",
+            "tbody td:not(.o_list_record_selector) .form-check input:checked",
             3,
             "should still have only 3 checked input"
         );
@@ -291,7 +291,7 @@ QUnit.module("Fields", (hooks) => {
             "checkbox should still be disabled"
         );
 
-        await click(target, ".o_field_boolean .custom-checkbox");
+        await click(target, ".o_field_boolean .form-check");
         assert.containsOnce(
             target,
             ".o_field_boolean input:checked",
diff --git a/addons/web/static/tests/views/fields/boolean_toggle_field_tests.js b/addons/web/static/tests/views/fields/boolean_toggle_field_tests.js
index 5d831f17c4e..0fb6d835f3e 100644
--- a/addons/web/static/tests/views/fields/boolean_toggle_field_tests.js
+++ b/addons/web/static/tests/views/fields/boolean_toggle_field_tests.js
@@ -38,19 +38,19 @@ QUnit.module("Fields", (hooks) => {
 
         assert.containsOnce(
             target,
-            ".custom-checkbox.o_boolean_toggle",
+            ".form-check.o_boolean_toggle",
             "Boolean toggle widget applied to boolean field"
         );
         assert.containsOnce(
             target,
-            ".custom-checkbox.o_boolean_toggle .fa-check-circle",
+            ".form-check.o_boolean_toggle .fa-check-circle",
             "Boolean toggle should have fa-check-circle icon"
         );
 
         await click(target, ".o_field_widget[name='bar'] input");
         assert.containsOnce(
             target,
-            ".custom-checkbox.o_boolean_toggle .fa-times-circle",
+            ".form-check.o_boolean_toggle .fa-times-circle",
             "Boolean toggle should have fa-times-circle icon"
         );
     });
@@ -82,7 +82,7 @@ QUnit.module("Fields", (hooks) => {
             resId: 1,
         });
 
-        assert.containsOnce(target, ".custom-checkbox.o_boolean_toggle");
+        assert.containsOnce(target, ".form-check.o_boolean_toggle");
         assert.notOk(target.querySelector(".o_boolean_toggle input").checked);
         await click(target, ".o_field_widget[name='bar'] label");
         assert.ok(target.querySelector(".o_boolean_toggle input").checked);
@@ -97,7 +97,7 @@ QUnit.module("Fields", (hooks) => {
             resId: 1,
         });
 
-        assert.containsOnce(target, ".custom-checkbox.o_boolean_toggle");
+        assert.containsOnce(target, ".form-check.o_boolean_toggle");
         await click(target.querySelector(".o_form_button_edit"));
         assert.notOk(target.querySelector(".o_boolean_toggle input").checked);
         await click(target, ".o_field_widget[name='bar'] label");
@@ -113,7 +113,7 @@ QUnit.module("Fields", (hooks) => {
             resId: 1,
         });
 
-        assert.containsOnce(target, ".custom-checkbox.o_boolean_toggle");
+        assert.containsOnce(target, ".form-check.o_boolean_toggle");
         await click(target.querySelector(".o_form_button_edit"));
 
         assert.notOk(target.querySelector(".o_boolean_toggle input").checked);
@@ -137,7 +137,7 @@ QUnit.module("Fields", (hooks) => {
 
         assert.containsOnce(
             target,
-            ".custom-checkbox.o_boolean_toggle",
+            ".form-check.o_boolean_toggle",
             "Boolean toggle widget applied to boolean field"
         );
         assert.containsNone(target, ".o_boolean_toggle input:checked");
@@ -164,7 +164,7 @@ QUnit.module("Fields", (hooks) => {
 
             assert.containsOnce(
                 target,
-                ".custom-checkbox.o_boolean_toggle",
+                ".form-check.o_boolean_toggle",
                 "Boolean toggle widget applied to boolean field"
             );
 
@@ -192,7 +192,7 @@ QUnit.module("Fields", (hooks) => {
 
         assert.containsOnce(
             target,
-            ".custom-checkbox.o_boolean_toggle",
+            ".form-check.o_boolean_toggle",
             "Boolean toggle widget applied to boolean field"
         );
 
diff --git a/addons/web/static/tests/views/fields/label_selection_field_tests.js b/addons/web/static/tests/views/fields/label_selection_field_tests.js
index 849550ee9f2..73ef19c83d0 100644
--- a/addons/web/static/tests/views/fields/label_selection_field_tests.js
+++ b/addons/web/static/tests/views/fields/label_selection_field_tests.js
@@ -73,21 +73,21 @@ QUnit.module("Fields", (hooks) => {
 
         assert.containsOnce(
             target,
-            ".o_field_widget .badge.badge-warning",
+            ".o_field_widget .badge.text-bg-warning",
             "should have a warning status label since selection is the second, blocked state"
         );
         assert.containsNone(
             target,
-            ".o_field_widget .badge.badge-secondary",
+            ".o_field_widget .badge.text-bg-secondary",
             "should not have a default status since selection is the second, blocked state"
         );
         assert.containsNone(
             target,
-            ".o_field_widget .badge.badge-success",
+            ".o_field_widget .badge.text-bg-success",
             "should not have a success status since selection is the second, blocked state"
         );
         assert.strictEqual(
-            target.querySelector(".o_field_widget .badge.badge-warning").textContent,
+            target.querySelector(".o_field_widget .badge.text-bg-warning").textContent,
             "Blocked",
             "the label should say 'Blocked' since this is the label value for that state"
         );
@@ -96,21 +96,21 @@ QUnit.module("Fields", (hooks) => {
         await click(target.querySelector(".o_form_button_edit"));
         assert.containsOnce(
             target,
-            ".o_field_widget .badge.badge-warning",
+            ".o_field_widget .badge.text-bg-warning",
             "should have a warning status label since selection is the second, blocked state"
         );
         assert.containsNone(
             target,
-            ".o_field_widget .badge.badge-secondary",
+            ".o_field_widget .badge.text-bg-secondary",
             "should not have a default status since selection is the second, blocked state"
         );
         assert.containsNone(
             target,
-            ".o_field_widget .badge.badge-success",
+            ".o_field_widget .badge.text-bg-success",
             "should not have a success status since selection is the second, blocked state"
         );
         assert.strictEqual(
-            target.querySelector(".o_field_widget .badge.badge-warning").textContent,
+            target.querySelector(".o_field_widget .badge.text-bg-warning").textContent,
             "Blocked",
             "the label should say 'Blocked' since this is the label value for that state"
         );
@@ -119,21 +119,21 @@ QUnit.module("Fields", (hooks) => {
         await click(target.querySelector(".o_form_button_save"));
         assert.containsOnce(
             target,
-            ".o_field_widget .badge.badge-warning",
+            ".o_field_widget .badge.text-bg-warning",
             "should have a warning status label since selection is the second, blocked state"
         );
         assert.containsNone(
             target,
-            ".o_field_widget .badge.badge-secondary",
+            ".o_field_widget .badge.text-bg-secondary",
             "should not have a default status since selection is the second, blocked state"
         );
         assert.containsNone(
             target,
-            ".o_field_widget .badge.badge-success",
+            ".o_field_widget .badge.text-bg-success",
             "should not have a success status since selection is the second, blocked state"
         );
         assert.strictEqual(
-            target.querySelector(".o_field_widget .badge.badge-warning").textContent,
+            target.querySelector(".o_field_widget .badge.text-bg-warning").textContent,
             "Blocked",
             "the label should say 'Blocked' since this is the label value for that state"
         );
@@ -159,31 +159,31 @@ QUnit.module("Fields", (hooks) => {
         );
         assert.containsOnce(
             target,
-            ".o_field_widget .badge.badge-warning",
+            ".o_field_widget .badge.text-bg-warning",
             "should have one warning status label"
         );
         assert.strictEqual(
-            target.querySelector(".o_field_widget .badge.badge-warning").textContent,
+            target.querySelector(".o_field_widget .badge.text-bg-warning").textContent,
             "Blocked",
             "the warning label should read 'Blocked'"
         );
         assert.containsOnce(
             target,
-            ".o_field_widget .badge.badge-secondary",
+            ".o_field_widget .badge.text-bg-secondary",
             "should have one default status label"
         );
         assert.strictEqual(
-            target.querySelector(".o_field_widget .badge.badge-secondary").textContent,
+            target.querySelector(".o_field_widget .badge.text-bg-secondary").textContent,
             "Normal",
             "the default label should read 'Normal'"
         );
         assert.containsOnce(
             target,
-            ".o_field_widget .badge.badge-success",
+            ".o_field_widget .badge.text-bg-success",
             "should have one success status label"
         );
         assert.strictEqual(
-            target.querySelector(".o_field_widget .badge.badge-success").textContent,
+            target.querySelector(".o_field_widget .badge.text-bg-success").textContent,
             "Done",
             "the success label should read 'Done'"
         );
@@ -197,31 +197,31 @@ QUnit.module("Fields", (hooks) => {
         );
         assert.containsOnce(
             target,
-            ".o_field_widget .badge.badge-warning",
+            ".o_field_widget .badge.text-bg-warning",
             "should have one warning status label"
         );
         assert.strictEqual(
-            target.querySelector(".o_field_widget .badge.badge-warning").textContent,
+            target.querySelector(".o_field_widget .badge.text-bg-warning").textContent,
             "Blocked",
             "the warning label should read 'Blocked'"
         );
         assert.containsOnce(
             target,
-            ".o_field_widget .badge.badge-secondary",
+            ".o_field_widget .badge.text-bg-secondary",
             "should have one default status label"
         );
         assert.strictEqual(
-            target.querySelector(".o_field_widget .badge.badge-secondary").textContent,
+            target.querySelector(".o_field_widget .badge.text-bg-secondary").textContent,
             "Normal",
             "the default label should read 'Normal'"
         );
         assert.containsOnce(
             target,
-            ".o_field_widget .badge.badge-success",
+            ".o_field_widget .badge.text-bg-success",
             "should have one success status label"
         );
         assert.strictEqual(
-            target.querySelector(".o_field_widget .badge.badge-success").textContent,
+            target.querySelector(".o_field_widget .badge.text-bg-success").textContent,
             "Done",
             "the success label should read 'Done'"
         );
@@ -235,31 +235,31 @@ QUnit.module("Fields", (hooks) => {
         );
         assert.containsOnce(
             target,
-            ".o_field_widget .badge.badge-warning",
+            ".o_field_widget .badge.text-bg-warning",
             "should have one warning status label"
         );
         assert.strictEqual(
-            target.querySelector(".o_field_widget .badge.badge-warning").textContent,
+            target.querySelector(".o_field_widget .badge.text-bg-warning").textContent,
             "Blocked",
             "the warning label should read 'Blocked'"
         );
         assert.containsOnce(
             target,
-            ".o_field_widget .badge.badge-secondary",
+            ".o_field_widget .badge.text-bg-secondary",
             "should have one default status label"
         );
         assert.strictEqual(
-            target.querySelector(".o_field_widget .badge.badge-secondary").textContent,
+            target.querySelector(".o_field_widget .badge.text-bg-secondary").textContent,
             "Normal",
             "the default label should read 'Normal'"
         );
         assert.containsOnce(
             target,
-            ".o_field_widget .badge.badge-success",
+            ".o_field_widget .badge.text-bg-success",
             "should have one success status label"
         );
         assert.strictEqual(
-            target.querySelector(".o_field_widget .badge.badge-success").textContent,
+            target.querySelector(".o_field_widget .badge.text-bg-success").textContent,
             "Done",
             "the success label should read 'Done'"
         );
diff --git a/addons/web/static/tests/views/fields/many2many_checkboxes_field_tests.js b/addons/web/static/tests/views/fields/many2many_checkboxes_field_tests.js
index 1e443405dcf..5466c68027e 100644
--- a/addons/web/static/tests/views/fields/many2many_checkboxes_field_tests.js
+++ b/addons/web/static/tests/views/fields/many2many_checkboxes_field_tests.js
@@ -61,29 +61,29 @@ QUnit.module("Fields", (hooks) => {
             },
         });
 
-        assert.containsN(target, "div.o_field_widget div.custom-checkbox", 2);
+        assert.containsN(target, "div.o_field_widget div.form-check", 2);
 
-        let checkboxes = target.querySelectorAll("div.o_field_widget div.custom-checkbox input");
+        let checkboxes = target.querySelectorAll("div.o_field_widget div.form-check input");
         assert.ok(checkboxes[0].checked);
         assert.notOk(checkboxes[1].checked);
 
-        assert.containsN(target, "div.o_field_widget div.custom-checkbox input:disabled", 2);
+        assert.containsN(target, "div.o_field_widget div.form-check input:disabled", 2);
 
         await click(target, ".o_form_button_edit");
 
-        assert.containsNone(target, "div.o_field_widget div.custom-checkbox input:disabled");
+        assert.containsNone(target, "div.o_field_widget div.form-check input:disabled");
 
         // add a m2m value by clicking on input
-        checkboxes = target.querySelectorAll("div.o_field_widget div.custom-checkbox input");
+        checkboxes = target.querySelectorAll("div.o_field_widget div.form-check input");
         await click(checkboxes[1]);
         await click(target, ".o_form_button_save");
-        assert.containsN(target, "div.o_field_widget div.custom-checkbox input:checked", 2);
+        assert.containsN(target, "div.o_field_widget div.form-check input:checked", 2);
 
         // remove a m2m value by clinking on label
         await click(target, ".o_form_button_edit");
-        await click(target.querySelector("div.o_field_widget div.custom-checkbox > label"));
+        await click(target.querySelector("div.o_field_widget div.form-check > label"));
         await click(target, ".o_form_button_save");
-        checkboxes = target.querySelectorAll("div.o_field_widget div.custom-checkbox input");
+        checkboxes = target.querySelectorAll("div.o_field_widget div.form-check input");
         assert.notOk(checkboxes[0].checked);
         assert.ok(checkboxes[1].checked);
 
@@ -107,23 +107,23 @@ QUnit.module("Fields", (hooks) => {
 
         assert.containsN(
             target,
-            "div.o_field_widget div.custom-checkbox",
+            "div.o_field_widget div.form-check",
             2,
             "should have fetched and displayed the 2 values of the many2many"
         );
 
         assert.ok(
-            target.querySelector("div.o_field_widget div.custom-checkbox input").checked,
+            target.querySelector("div.o_field_widget div.form-check input").checked,
             "first checkbox should be checked"
         );
         assert.notOk(
-            target.querySelectorAll("div.o_field_widget div.custom-checkbox input")[1].checked,
+            target.querySelectorAll("div.o_field_widget div.form-check input")[1].checked,
             "second checkbox should not be checked"
         );
 
         assert.containsN(
             target,
-            "div.o_field_widget div.custom-checkbox input:disabled",
+            "div.o_field_widget div.form-check input:disabled",
             2,
             "the checkboxes should be disabled"
         );
@@ -132,19 +132,19 @@ QUnit.module("Fields", (hooks) => {
 
         assert.containsN(
             target,
-            "div.o_field_widget div.custom-checkbox input:disabled",
+            "div.o_field_widget div.form-check input:disabled",
             2,
             "the checkboxes should be disabled"
         );
 
-        await click(target.querySelectorAll("div.o_field_widget div.custom-checkbox > label")[1]);
+        await click(target.querySelectorAll("div.o_field_widget div.form-check > label")[1]);
 
         assert.ok(
-            target.querySelector("div.o_field_widget div.custom-checkbox input").checked,
+            target.querySelector("div.o_field_widget div.form-check input").checked,
             "first checkbox should be checked"
         );
         assert.notOk(
-            target.querySelectorAll("div.o_field_widget div.custom-checkbox input")[1].checked,
+            target.querySelectorAll("div.o_field_widget div.form-check input")[1].checked,
             "second checkbox should not be checked"
         );
     });
@@ -168,15 +168,15 @@ QUnit.module("Fields", (hooks) => {
 
             await click(target, ".o_form_button_edit");
 
-            await click(target.querySelectorAll("div.o_field_widget div.custom-checkbox input")[0]);
-            await click(target.querySelectorAll("div.o_field_widget div.custom-checkbox input")[1]);
+            await click(target.querySelectorAll("div.o_field_widget div.form-check input")[0]);
+            await click(target.querySelectorAll("div.o_field_widget div.form-check input")[1]);
             await click(target, ".o_form_button_save");
             assert.notOk(
-                target.querySelectorAll("div.o_field_widget div.custom-checkbox input")[0].checked,
+                target.querySelectorAll("div.o_field_widget div.form-check input")[0].checked,
                 "first checkbox should not be checked"
             );
             assert.notOk(
-                target.querySelectorAll("div.o_field_widget div.custom-checkbox input")[1].checked,
+                target.querySelectorAll("div.o_field_widget div.form-check input")[1].checked,
                 "second checkbox should not be checked"
             );
         }
@@ -203,7 +203,7 @@ QUnit.module("Fields", (hooks) => {
                 target.querySelector(".o_field_widget[name='int_field'] input").value,
                 "10"
             );
-            assert.containsN(target, ".o_field_widget[name='timmy'] .custom-checkbox", 2);
+            assert.containsN(target, ".o_field_widget[name='timmy'] .form-check", 2);
             assert.strictEqual(
                 target.querySelector(".o_field_widget[name='timmy']").textContent,
                 "goldsilver"
@@ -213,7 +213,7 @@ QUnit.module("Fields", (hooks) => {
             input.value = 13;
             await triggerEvent(input, null, "change");
 
-            assert.containsOnce(target, ".o_field_widget[name='timmy'] .custom-checkbox");
+            assert.containsOnce(target, ".o_field_widget[name='timmy'] .form-check");
             assert.strictEqual(
                 target.querySelector(".o_field_widget[name='timmy']").textContent,
                 "silver"
@@ -374,10 +374,10 @@ QUnit.module("Fields", (hooks) => {
         await click(target.querySelector(".o_data_cell"));
 
         // edit the timmy field by (un)checking boxes on the widget
-        const firstCheckbox = target.querySelector(".modal .custom-control-input");
+        const firstCheckbox = target.querySelector(".modal .form-check-input");
         await click(firstCheckbox);
         assert.ok(firstCheckbox.checked, "the checkbox should be ticked");
-        const secondCheckbox = target.querySelectorAll(".modal .custom-control-input")[1];
+        const secondCheckbox = target.querySelectorAll(".modal .form-check-input")[1];
         await click(secondCheckbox);
         assert.notOk(secondCheckbox.checked, "the checkbox should be unticked");
 
@@ -412,33 +412,33 @@ QUnit.module("Fields", (hooks) => {
         });
 
         assert.notOk(
-            target.querySelectorAll(".o_form_view .custom-checkbox input")[0].checked,
+            target.querySelectorAll(".o_form_view .form-check input")[0].checked,
             "first checkbox should not be checked"
         );
         assert.notOk(
-            target.querySelectorAll(".o_form_view .custom-checkbox input")[1].checked,
+            target.querySelectorAll(".o_form_view .form-check input")[1].checked,
             "second checkbox should not be checked"
         );
         assert.ok(
-            target.querySelectorAll(".o_form_view .custom-checkbox input")[2].checked,
+            target.querySelectorAll(".o_form_view .form-check input")[2].checked,
             "third checkbox should be checked"
         );
 
-        await click(target.querySelector(".o_form_view .custom-checkbox input:checked"));
-        await click(target.querySelector(".o_form_view .custom-checkbox input"));
-        await click(target.querySelector(".o_form_view .custom-checkbox input"));
-        await click(target.querySelector(".o_form_view .custom-checkbox input"));
+        await click(target.querySelector(".o_form_view .form-check input:checked"));
+        await click(target.querySelector(".o_form_view .form-check input"));
+        await click(target.querySelector(".o_form_view .form-check input"));
+        await click(target.querySelector(".o_form_view .form-check input"));
 
         assert.ok(
-            target.querySelectorAll(".o_form_view .custom-checkbox input")[0].checked,
+            target.querySelectorAll(".o_form_view .form-check input")[0].checked,
             "first checkbox should be checked"
         );
         assert.notOk(
-            target.querySelectorAll(".o_form_view .custom-checkbox input")[1].checked,
+            target.querySelectorAll(".o_form_view .form-check input")[1].checked,
             "second checkbox should not be checked"
         );
         assert.notOk(
-            target.querySelectorAll(".o_form_view .custom-checkbox input")[2].checked,
+            target.querySelectorAll(".o_form_view .form-check input")[2].checked,
             "third checkbox should not be checked"
         );
 
diff --git a/addons/web/static/tests/views/fields/many2many_field_tests.js b/addons/web/static/tests/views/fields/many2many_field_tests.js
index 968739c5cf5..43e539b2e17 100644
--- a/addons/web/static/tests/views/fields/many2many_field_tests.js
+++ b/addons/web/static/tests/views/fields/many2many_field_tests.js
@@ -239,7 +239,7 @@ QUnit.module("Fields", (hooks) => {
                             <templates>
                                 <t t-name="kanban-box">
                                     <div class="oe_kanban_global_click">
-                                        <a t-if="!read_only_mode" type="delete" class="fa fa-times float-right delete_icon"/>
+                                        <a t-if="!read_only_mode" type="delete" class="fa fa-times float-end delete_icon"/>
                                         <span><t t-esc="record.display_name.value"/></span>
                                     </div>
                                 </t>
@@ -491,7 +491,7 @@ QUnit.module("Fields", (hooks) => {
                             <templates>
                                 <t t-name="kanban-box">
                                     <div class="oe_kanban_global_click">
-                                        <a t-if="!read_only_mode" type="delete" class="fa fa-times float-right delete_icon"/>
+                                        <a t-if="!read_only_mode" type="delete" class="fa fa-times float-end delete_icon"/>
                                         <span><t t-esc="record.display_name.value"/></span>
                                     </div>
                                 </t>
diff --git a/addons/web/static/tests/views/fields/many2many_tags_field_tests.js b/addons/web/static/tests/views/fields/many2many_tags_field_tests.js
index dc128a7bf6d..c370c2b1622 100644
--- a/addons/web/static/tests/views/fields/many2many_tags_field_tests.js
+++ b/addons/web/static/tests/views/fields/many2many_tags_field_tests.js
@@ -280,11 +280,11 @@ QUnit.module("Fields", (hooks) => {
         await click(badgeElement);
         assert.containsOnce(
             target,
-            ".o_tag_popover .custom-checkbox input",
+            ".o_tag_popover .form-check input",
             "should have a checkbox in the colorpicker popover"
         );
 
-        let checkBox = target.querySelector(".o_tag_popover .custom-checkbox input");
+        let checkBox = target.querySelector(".o_tag_popover .form-check input");
         assert.notOk(checkBox.checked, "should have unticked checkbox in colorpicker popover");
 
         await click(target, ".o_tag_popover input[type='checkbox']");
@@ -296,7 +296,7 @@ QUnit.module("Fields", (hooks) => {
         );
 
         await click(badgeElement);
-        checkBox = target.querySelector(".o_tag_popover .custom-checkbox input"); // refresh
+        checkBox = target.querySelector(".o_tag_popover .form-check input"); // refresh
 
         assert.ok(
             checkBox.checked,
@@ -312,7 +312,7 @@ QUnit.module("Fields", (hooks) => {
         );
 
         await click(badgeElement);
-        checkBox = target.querySelector(".o_tag_popover .custom-checkbox input"); // refresh
+        checkBox = target.querySelector(".o_tag_popover .form-check input"); // refresh
 
         assert.notOk(
             checkBox.checked,
diff --git a/addons/web/static/tests/views/fields/one2many_field_tests.js b/addons/web/static/tests/views/fields/one2many_field_tests.js
index e18cde4e83c..7ec4dd841af 100644
--- a/addons/web/static/tests/views/fields/one2many_field_tests.js
+++ b/addons/web/static/tests/views/fields/one2many_field_tests.js
@@ -2265,7 +2265,7 @@ QUnit.module("Fields", (hooks) => {
                             <templates>
                                 <t t-name="kanban-box">
                                     <div class="oe_kanban_global_click">
-                                        <a t-if="!read_only_mode" type="delete" class="fa fa-times float-right delete_icon"/>
+                                        <a t-if="!read_only_mode" type="delete" class="fa fa-times float-end delete_icon"/>
                                         <span><t t-esc="record.display_name.value"/></span>
                                     </div>
                                 </t>
@@ -2912,7 +2912,7 @@ QUnit.module("Fields", (hooks) => {
                             <templates>
                                 <t t-name="kanban-box">
                                     <div class="oe_kanban_global_click">
-                                        <a t-if="!read_only_mode" type="delete" class="fa fa-times float-right delete_icon"/>
+                                        <a t-if="!read_only_mode" type="delete" class="fa fa-times float-end delete_icon"/>
                                         <span><t t-esc="record.display_name.value"/></span>
                                         <span><t t-esc="record.color.value"/></span>
                                     </div>
@@ -3102,7 +3102,7 @@ QUnit.module("Fields", (hooks) => {
                             <templates>
                                 <t t-name="kanban-box">
                                     <div class="oe_kanban_global_click">
-                                        <a t-if="!read_only_mode" type="delete" class="fa fa-times float-right delete_icon"/>
+                                        <a t-if="!read_only_mode" type="delete" class="fa fa-times float-end delete_icon"/>
                                         <span><t t-esc="record.display_name.value"/></span>
                                     </div>
                                 </t>
diff --git a/addons/web/static/tests/views/fields/remaining_days_field_tests.js b/addons/web/static/tests/views/fields/remaining_days_field_tests.js
index 223c49f9b6d..d33c5600df7 100644
--- a/addons/web/static/tests/views/fields/remaining_days_field_tests.js
+++ b/addons/web/static/tests/views/fields/remaining_days_field_tests.js
@@ -67,34 +67,22 @@ QUnit.module("Fields", (hooks) => {
         assert.strictEqual(cells[7].textContent, "");
 
         assert.hasAttrValue(cells[0].querySelector(".o_field_widget > div"), "title", "10/08/2017");
-        assert.hasClass(
-            cells[0].querySelector(".o_field_widget > div"),
-            "font-weight-bold text-warning"
-        );
+        assert.hasClass(cells[0].querySelector(".o_field_widget > div"), "fw-bold text-warning");
         assert.doesNotHaveClass(
             cells[1].querySelector(".o_field_widget > div"),
-            "font-weight-bold text-warning text-danger"
-        );
-        assert.hasClass(
-            cells[2].querySelector(".o_field_widget > div"),
-            "font-weight-bold text-danger"
+            "fw-bold text-warning text-danger"
         );
+        assert.hasClass(cells[2].querySelector(".o_field_widget > div"), "fw-bold text-danger");
         assert.doesNotHaveClass(
             cells[3].querySelector(".o_field_widget > div"),
-            "font-weight-bold text-warning text-danger"
-        );
-        assert.hasClass(
-            cells[4].querySelector(".o_field_widget > div"),
-            "font-weight-bold text-danger"
+            "fw-bold text-warning text-danger"
         );
+        assert.hasClass(cells[4].querySelector(".o_field_widget > div"), "fw-bold text-danger");
         assert.doesNotHaveClass(
             cells[5].querySelector(".o_field_widget > div"),
-            "font-weight-bold text-warning text-danger"
-        );
-        assert.hasClass(
-            cells[6].querySelector(".o_field_widget > div"),
-            "font-weight-bold text-danger"
+            "fw-bold text-warning text-danger"
         );
+        assert.hasClass(cells[6].querySelector(".o_field_widget > div"), "fw-bold text-danger");
     });
 
     QUnit.test(
@@ -221,10 +209,7 @@ QUnit.module("Fields", (hooks) => {
         });
 
         assert.strictEqual(target.querySelector(".o_field_widget").textContent, "Today");
-        assert.hasClass(
-            target.querySelector(".o_field_widget > div "),
-            "font-weight-bold text-warning"
-        );
+        assert.hasClass(target.querySelector(".o_field_widget > div "), "fw-bold text-warning");
 
         // in edit mode, this widget should be editable.
         await click(target, ".o_form_button_edit");
@@ -341,31 +326,31 @@ QUnit.module("Fields", (hooks) => {
 
             assert.hasClass(
                 target.querySelectorAll(".o_data_cell div div")[0],
-                "font-weight-bold text-warning"
+                "fw-bold text-warning"
             );
             assert.doesNotHaveClass(
                 target.querySelectorAll(".o_data_cell div div")[1],
-                "font-weight-bold text-warning text-danger"
+                "fw-bold text-warning text-danger"
             );
             assert.hasClass(
                 target.querySelectorAll(".o_data_cell div div")[2],
-                "font-weight-bold text-danger"
+                "fw-bold text-danger"
             );
             assert.doesNotHaveClass(
                 target.querySelectorAll(".o_data_cell div div")[3],
-                "font-weight-bold text-warning text-danger"
+                "fw-bold text-warning text-danger"
             );
             assert.hasClass(
                 target.querySelectorAll(".o_data_cell div div")[4],
-                "font-weight-bold text-danger"
+                "fw-bold text-danger"
             );
             assert.doesNotHaveClass(
                 target.querySelectorAll(".o_data_cell div div")[5],
-                "font-weight-bold text-warning text-danger"
+                "fw-bold text-warning text-danger"
             );
             assert.hasClass(
                 target.querySelectorAll(".o_data_cell div div")[6],
-                "font-weight-bold text-danger"
+                "fw-bold text-danger"
             );
         }
     );
diff --git a/addons/web/static/tests/views/form/form_view_tests.js b/addons/web/static/tests/views/form/form_view_tests.js
index a7bbba362e2..a38a2e50468 100644
--- a/addons/web/static/tests/views/form/form_view_tests.js
+++ b/addons/web/static/tests/views/form/form_view_tests.js
@@ -288,7 +288,7 @@ QUnit.module("Views", (hooks) => {
         assert.containsOnce(target, "div.o_field_one2many table");
         assert.containsOnce(
             target,
-            "tbody td:not(.o_list_record_selector) .custom-checkbox input:checked"
+            "tbody td:not(.o_list_record_selector) .form-check input:checked"
         );
         assert.containsNone(target, "label.o_form_label_empty:contains(timmy)");
     });
@@ -7656,7 +7656,7 @@ QUnit.module("Views", (hooks) => {
         await click(target.querySelector(".o_pager_previous"));
         assert.containsOnce(target, ".alert .o_field_translate", "should have a translation alert");
         // remove translation alert by click X and check alert even after form reload
-        await click(target.querySelector(".alert .close"));
+        await click(target.querySelector(".alert .btn-close"));
         assert.containsNone(
             target,
             ".alert .o_field_translate",
diff --git a/addons/web/static/tests/views/kanban_view_tests.js b/addons/web/static/tests/views/kanban_view_tests.js
index 7309d973c27..d5a67d21ac4 100644
--- a/addons/web/static/tests/views/kanban_view_tests.js
+++ b/addons/web/static/tests/views/kanban_view_tests.js
@@ -6918,7 +6918,7 @@ QUnit.module("Views", (hooks) => {
                 '<t t-name="kanban-box">' +
                 "<div>" +
                 '<field name="foo"/>' +
-                "<button type=\"object\" attrs=\"{'invisible':['|', ('bar','=',True), ('category_ids', '!=', [])]}\" class=\"btn btn-primary float-right\" name=\"arbitrary\">Join</button>" +
+                "<button type=\"object\" attrs=\"{'invisible':['|', ('bar','=',True), ('category_ids', '!=', [])]}\" class=\"btn btn-primary float-end\" name=\"arbitrary\">Join</button>" +
                 "</div>" +
                 "</t>" +
                 "</templates>" +
@@ -6927,7 +6927,7 @@ QUnit.module("Views", (hooks) => {
 
         assert.containsOnce(
             target,
-            "button.float-right.oe_kanban_action_button",
+            "button.float-end.oe_kanban_action_button",
             "only one button should be visible"
         );
     });
@@ -6946,7 +6946,7 @@ QUnit.module("Views", (hooks) => {
                 '<t t-name="kanban-box">' +
                 '<div color="color">' +
                 '<div class="o_dropdown_kanban dropdown">' +
-                '<a class="dropdown-toggle o-no-caret btn" data-toggle="dropdown" href="#">' +
+                '<a class="dropdown-toggle o-no-caret btn" data-bs-toggle="dropdown" href="#">' +
                 '<span class="fa fa-bars fa-lg"/>' +
                 "</a>" +
                 '<ul class="dropdown-menu" role="menu">' +
@@ -7405,7 +7405,7 @@ QUnit.module("Views", (hooks) => {
                 '<t t-name="kanban-box">' +
                 '<div color="color">' +
                 '<div class="o_dropdown_kanban dropdown">' +
-                '<a class="dropdown-toggle o-no-caret btn" data-toggle="dropdown" href="#">' +
+                '<a class="dropdown-toggle o-no-caret btn" data-bs-toggle="dropdown" href="#">' +
                 '<span class="fa fa-bars fa-lg"/>' +
                 "</a>" +
                 '<ul class="dropdown-menu" role="menu">' +
@@ -8732,7 +8732,7 @@ QUnit.module("Views", (hooks) => {
         await makeViewProm;
 
         assert.deepEqual(getCardTexts(), ["LOADED", "LOADED", "LOADED", "LOADED"]);
-        assert.hasClass(getCard(0).querySelector(".o_field_asyncwidget"), "float-right");
+        assert.hasClass(getCard(0).querySelector(".o_field_asyncwidget"), "float-end");
     });
 
     QUnit.test("asynchronous rendering of a widget", async (assert) => {
@@ -8825,7 +8825,7 @@ QUnit.module("Views", (hooks) => {
                 '<div class="oe_kanban_global_click">' +
                 '<field name="name"/>' +
                 '<div class="o_dropdown_kanban dropdown">' +
-                '<a class="dropdown-toggle o-no-caret btn" data-toggle="dropdown" href="#">' +
+                '<a class="dropdown-toggle o-no-caret btn" data-bs-toggle="dropdown" href="#">' +
                 '<span class="fa fa-bars fa-lg"/>' +
                 "</a>" +
                 '<div class="dropdown-menu" role="menu">' +
@@ -9018,7 +9018,7 @@ QUnit.module("Views", (hooks) => {
             `,
         });
 
-        assert.containsOnce(getCard(0), "div.o_field_boolean .custom-checkbox");
+        assert.containsOnce(getCard(0), "div.o_field_boolean .form-check");
     });
 
     QUnit.test("kanban view with boolean toggle widget", async (assert) => {
diff --git a/addons/web/static/tests/views/list_view_tests.js b/addons/web/static/tests/views/list_view_tests.js
index 536d732c972..776e6e92561 100644
--- a/addons/web/static/tests/views/list_view_tests.js
+++ b/addons/web/static/tests/views/list_view_tests.js
@@ -4923,7 +4923,7 @@ QUnit.module("Views", (hooks) => {
             "",
             "Char field should yield an empty element"
         );
-        assert.containsOnce(cells[1], ".custom-checkbox", "Boolean field has been instantiated");
+        assert.containsOnce(cells[1], ".form-check", "Boolean field has been instantiated");
         assert.notOk(isNaN(cells[2].innerText.trim()), "Intger value is a number");
         assert.ok(cells[3].innerText.trim(), "Many2one field is a string");
 
diff --git a/addons/web/static/tests/views/view_tests.js b/addons/web/static/tests/views/view_tests.js
index b504faa4b2d..5f098514f12 100644
--- a/addons/web/static/tests/views/view_tests.js
+++ b/addons/web/static/tests/views/view_tests.js
@@ -1154,7 +1154,7 @@ QUnit.module("Views", (hooks) => {
             <div class="o_onboarding_container collapse show">
                 <div class="o_onboarding" />
                     <div class="o_onboarding_wrap" />
-                        <a href="#" data-bs-toggle="modal" data-bs-target=".o_onboarding_modal" class="float-right o_onboarding_btn_close">
+                        <a href="#" data-bs-toggle="modal" data-bs-target=".o_onboarding_modal" class="float-end o_onboarding_btn_close">
                             <i class="fa fa-times" title="Close the onboarding panel" id="closeOnboarding"></i>
                         </a>
                         <div class="bannerContent">Content</div>
diff --git a/addons/web/static/tests/webclient/actions/window_action_tests.js b/addons/web/static/tests/webclient/actions/window_action_tests.js
index 09e1dd2b99d..3b5ec947285 100644
--- a/addons/web/static/tests/webclient/actions/window_action_tests.js
+++ b/addons/web/static/tests/webclient/actions/window_action_tests.js
@@ -78,7 +78,7 @@ QUnit.module("ActionManager", (hooks) => {
         const webClient = await createWebClient({ serverData, mockRPC });
         await doAction(webClient, 3);
         assert.containsNone(target, ".o_cp_action_menus");
-        await click(target.querySelector("input.custom-control-input"));
+        await click(target.querySelector("input.form-check-input"));
         assert.isVisible(
             $(target).find('.o_cp_action_menus button.dropdown-toggle:contains("Print")')[0]
         );
diff --git a/addons/web/views/report_templates.xml b/addons/web/views/report_templates.xml
index 1347dff2e26..b4a7551ddea 100644
--- a/addons/web/views/report_templates.xml
+++ b/addons/web/views/report_templates.xml
@@ -158,11 +158,11 @@
                        <table class="table table-sm o_main_table" name="invoice_line_table">
                            <thead>
                                <tr>
-                                   <th name="th_description" class="text-left"><span>Description</span></th>
-                                   <th name="th_quantity" class="text-right"><span>Quantity</span></th>
-                                   <th name="th_priceunit" class="text-right d-md-table-cell"><span>Unit Price</span></th>
-                                   <th name="th_taxes" class="text-left d-md-table-cell"><span>Taxes</span></th>
-                                   <th name="th_subtotal" class="text-right">
+                                   <th name="th_description" class="text-start"><span>Description</span></th>
+                                   <th name="th_quantity" class="text-end"><span>Quantity</span></th>
+                                   <th name="th_priceunit" class="text-end d-md-table-cell"><span>Unit Price</span></th>
+                                   <th name="th_taxes" class="text-start d-md-table-cell"><span>Taxes</span></th>
+                                   <th name="th_subtotal" class="text-end">
                                        <span>Amount</span>
                                    </th>
                                </tr>
@@ -171,32 +171,32 @@
                                <tr>
                                    <td name="account_invoice_line_name"><span>[FURN_8999] Three-Seat Sofa<br/>
                                        Three Seater Sofa with Lounger in Steel Grey Colour</span></td>
-                                   <td class="text-right">
+                                   <td class="text-end">
                                        <span>5.000</span>
                                    </td>
-                                   <td class="text-right d-md-table-cell">
+                                   <td class="text-end d-md-table-cell">
                                        <span class="text-nowrap">1,500.00</span>
                                    </td>
-                                   <td class="text-left d-md-table-cell">
+                                   <td class="text-start d-md-table-cell">
                                        <span id="line_tax_ids">15.00%</span>
                                    </td>
-                                   <td class="text-right o_price_total">
+                                   <td class="text-end o_price_total">
                                        <span class="text-nowrap">$ <span class="oe_currency_value">7,500.00</span></span>
                                    </td>
                                </tr>
                                <tr>
                                    <td name="account_invoice_line_name"><span>[FURN_8220] Four Person Desk<br/>
                                        Four person modern office workstation</span></td>
-                                   <td class="text-right">
+                                   <td class="text-end">
                                        <span>5.000</span>
                                    </td>
-                                   <td class="text-right d-md-table-cell">
+                                   <td class="text-end d-md-table-cell">
                                        <span class="text-nowrap">2,350.00</span>
                                    </td>
-                                   <td class="text-left d-md-table-cell">
+                                   <td class="text-start d-md-table-cell">
                                        <span id="line_tax_ids">15.00%</span>
                                    </td>
-                                   <td class="text-right o_price_total">
+                                   <td class="text-end o_price_total">
                                        <span class="text-nowrap">$ <span class="oe_currency_value">11,750.00</span></span>
                                    </td>
                                </tr>
@@ -204,23 +204,23 @@
                        </table>
                        <div class="clearfix">
                            <div id="total" class="row">
-                               <div class="col-7 ml-auto">
+                               <div class="col-7 ms-auto">
                                    <table class="table table-sm" style="page-break-inside: avoid; position:relative;">
                                        <tbody><tr class="border-black o_subtotal" style="">
                                            <td><strong>Subtotal</strong></td>
-                                           <td class="text-right">
+                                           <td class="text-end">
                                                <span>$ <span class="oe_currency_value">19,250.00</span></span>
                                            </td>
                                        </tr>
                                            <tr style="">
                                                <td><span class="text-nowrap">Tax 15%</span></td>
-                                               <td class="text-right o_price_total">
+                                               <td class="text-end o_price_total">
                                                    <span class="text-nowrap">$ 2,887.50</span>
                                                </td>
                                            </tr>
                                            <tr class="border-black o_total">
                                                <td><strong>Total</strong></td>
-                                               <td class="text-right">
+                                               <td class="text-end">
                                                    <span class="text-nowrap">$ <span class="oe_currency_value">
                                                        22,137.50</span></span>
                                                </td>
@@ -291,7 +291,7 @@
     <!-- External layouts styles -->
 
     <template id="address_layout">
-        <t t-set="colclass" t-value="('col-sm-5' if report_type == 'html' else 'col-5') + ' ml-auto'"/>
+        <t t-set="colclass" t-value="('col-sm-5' if report_type == 'html' else 'col-5') + ' ms-auto'"/>
         <t t-if="address">
             <div class="address row">
                 <t t-if="information_block">
@@ -310,11 +310,11 @@
     <template id="external_layout_striped">
         <div t-attf-class="o_company_#{company.id}_layout header" t-att-style="report_header_style">
             <div class="o_background_header">
-            <div class="float-right">
-                <h3 class="mt0 text-right" t-field="company.report_header"/>
+            <div class="float-end">
+                <h3 class="mt0 text-end" t-field="company.report_header"/>
             </div>
-            <img t-if="company.logo" t-att-src="image_data_uri(company.logo)" class="float-left" alt="Logo"/>
-            <div class="float-left company_address">
+            <img t-if="company.logo" t-att-src="image_data_uri(company.logo)" class="float-start" alt="Logo"/>
+            <div class="float-start company_address">
                 <span t-if="company.company_details" t-field="company.company_details"></span>
             </div>
             <div class="clearfix mb8"/>
@@ -348,9 +348,9 @@
                 <div class="col-6">
                     <img t-if="company.logo" t-att-src="image_data_uri(company.logo)" alt="Logo"/>
                 </div>
-                <div class="col-6 text-right mb4">
+                <div class="col-6 text-end mb4">
                     <h4 class="mt0" t-field="company.report_header"/>
-                    <div name="company_address" class="float-right mb4">
+                    <div name="company_address" class="float-end mb4">
                         <span t-if="company.company_details" t-field="company.company_details"></span>
                     </div>
                 </div>
@@ -417,7 +417,7 @@
                     <h5 class="mt0 mb0" t-field="company.report_header"/>
                 </div>
                 <div class="col-1">
-                    <ul t-if="report_type == 'pdf'" class="list-inline pagenumber float-right text-center">
+                    <ul t-if="report_type == 'pdf'" class="list-inline pagenumber float-end text-center">
                         <li class="list-inline-item"><strong><span class="page"/></strong></li>
                     </ul>
                 </div>
@@ -431,7 +431,7 @@
                 <div class="col-3 mb4">
                     <img t-if="company.logo" t-att-src="image_data_uri(company.logo)" style="max-height: 45px;" alt="Logo"/>
                 </div>
-                <div class="col-9 text-right" style="margin-top:22px;" t-field="company.report_header" name="moto"/>
+                <div class="col-9 text-end" style="margin-top:22px;" t-field="company.report_header" name="moto"/>
             </div>
             <div t-if="company.logo or company.report_header" class="row zero_min_height">
                 <div class="col-12">
@@ -515,7 +515,7 @@
                 <div class="col-2 offset-2 text-center">
                     <span t-esc="company.name"/>
                 </div>
-                <div class="col-2 offset-3 text-right">
+                <div class="col-2 offset-3 text-end">
                     <ul class="list-inline">
                         <li class="list-inline-item"><span class="page"/></li>
                         <li class="list-inline-item">/</li>
diff --git a/addons/web/views/webclient_templates.xml b/addons/web/views/webclient_templates.xml
index 0b5d057b2aa..901d53e12de 100644
--- a/addons/web/views/webclient_templates.xml
+++ b/addons/web/views/webclient_templates.xml
@@ -65,11 +65,11 @@
                     <div t-if="not no_copyright" class="o_footer_copyright">
                         <div class="container py-3">
                             <div class="row">
-                                <div class="col-sm text-center text-sm-left text-muted">
+                                <div class="col-sm text-center text-sm-start text-muted">
                                     <t t-call="web.debug_icon"/>
-                                    <span class="o_footer_copyright_name mr-2">Copyright &amp;copy; <span t-field="res_company.name" itemprop="name">Company name</span></span>
+                                    <span class="o_footer_copyright_name me-2">Copyright &amp;copy; <span t-field="res_company.name" itemprop="name">Company name</span></span>
                                 </div>
-                                <div class="col-sm text-center text-sm-right">
+                                <div class="col-sm text-center text-sm-end">
                                     <t t-call="web.brand_promotion"/>
                                 </div>
                             </div>
@@ -84,7 +84,7 @@
         <t t-set="odoo_logo">
             <a target="_blank"
                 t-attf-href="http://www.odoo.com?utm_source=db&amp;utm_medium=#{_utm_medium}"
-                class="badge badge-light">
+                class="badge text-bg-light">
                 <img alt="Odoo"
                         src="/web/static/img/odoo_logo_tiny.png"
                         style="height: 1em; vertical-align: baseline;"/>
@@ -118,7 +118,7 @@
                         <t t-out="0"/>
                         <div class="text-center small mt-4 pt-3 border-top" t-if="not disable_footer">
                             <t t-if="not disable_database_manager">
-                                <a class="border-right pr-2 mr-1" href="/web/database/manager">Manage Databases</a>
+                                <a class="border-end pe-2 me-1" href="/web/database/manager">Manage Databases</a>
                             </t>
                             <a href="https://www.odoo.com?utm_source=db&amp;utm_medium=auth" target="_blank">Powered by <span>Odoo</span></a>
                         </div>
diff --git a/addons/web_editor/static/src/components/media_dialog/file_selector.xml b/addons/web_editor/static/src/components/media_dialog/file_selector.xml
index 95b0fe31b6f..3e850f57262 100644
--- a/addons/web_editor/static/src/components/media_dialog/file_selector.xml
+++ b/addons/web_editor/static/src/components/media_dialog/file_selector.xml
@@ -4,22 +4,22 @@
     <div class="form-inline align-items-center py-4">
         <SearchMedia searchPlaceholder="props.searchPlaceholder" needle="props.needle" search="props.search"/>
 
-        <div class="d-flex justify-content-start align-items-center flex-grow-1 ml-2">
-            <div t-if="props.showOptimizedOption" class="custom-control custom-switch align-items-center mr-2" t-on-change="props.changeShowOptimized">
-                <input class="o_we_show_optimized ml-2 custom-control-input" type="checkbox" t-att-checked="props.showOptimized" id="o_we_show_optimized_switch"/>
-                <label class="custom-control-label" for="o_we_show_optimized_switch">
+        <div class="d-flex justify-content-start align-items-center flex-grow-1 ms-2">
+            <div t-if="props.showOptimizedOption" class="custom-control form-switch align-items-center me-2" t-on-change="props.changeShowOptimized">
+                <input class="o_we_show_optimized ms-2 form-check-input" type="checkbox" t-att-checked="props.showOptimized" id="o_we_show_optimized_switch"/>
+                <label class="form-check-label" for="o_we_show_optimized_switch">
                     Show optimized images
                 </label>
             </div>
-            <select t-if="showSearchServiceSelect" class="custom-select o_we_search_select" t-on-change="ev => props.changeSearchService(ev.target.value)">
+            <select t-if="showSearchServiceSelect" class="form-select o_we_search_select" t-on-change="ev => props.changeSearchService(ev.target.value)">
                 <option t-att-selected="props.searchService === 'all'" value="all">All</option>
                 <option t-att-selected="props.searchService === 'database'" value="database">My Images</option>
                 <option t-if="props.useMediaLibrary" t-att-selected="props.searchService === 'media-library'" value="media-library">Illustrations</option>
             </select>
         </div>
 
-        <div class="input-group align-items-center ml-2">
-            <input type="text" class="form-control o_we_url_input o_we_transition_ease mr-1" t-att-class="{ o_we_horizontal_collapse: !state.showUrlInput }" name="url" t-att-placeholder="props.urlPlaceholder" t-model="state.urlInput" t-on-input="onUrlInput"/>
+        <div class="input-group align-items-center ms-2">
+            <input type="text" class="form-control o_we_url_input o_we_transition_ease me-1" t-att-class="{ o_we_horizontal_collapse: !state.showUrlInput }" name="url" t-att-placeholder="props.urlPlaceholder" t-model="state.urlInput" t-on-input="onUrlInput"/>
             <div class="input-group-append align-items-center">
                 <button type="button" class="btn o_upload_media_url_button" t-att-class="{ 'btn-primary': state.urlInput, 'btn-secondary': !state.urlInput}" t-on-click="onUrlUploadClick" t-att-disabled="!enableUrlUploadClick">
                     <t t-esc="props.addText"/>
diff --git a/addons/web_editor/static/src/components/media_dialog/image_selector.xml b/addons/web_editor/static/src/components/media_dialog/image_selector.xml
index 60186b003a7..c0ba983f826 100644
--- a/addons/web_editor/static/src/components/media_dialog/image_selector.xml
+++ b/addons/web_editor/static/src/components/media_dialog/image_selector.xml
@@ -7,7 +7,7 @@
             <img t-ref="auto-resize-image" class="img img-fluid o_we_attachment_highlight" t-att-src="props.src" t-att-alt="props.altDescription" t-att-title="props.title" loading="lazy"/>
             <a t-if="props.author" class="o_we_media_author" t-att-href="props.authorLink" target="_blank" t-esc="props.author"/>
         </div>
-        <span t-if="props.isOptimized" class="badge badge-success">Optimized</span>
+        <span t-if="props.isOptimized" class="badge text-bg-success">Optimized</span>
     </div>
 </t>
 
diff --git a/addons/web_editor/static/src/components/media_dialog/search_media.js b/addons/web_editor/static/src/components/media_dialog/search_media.js
index 6b964429179..64468481317 100644
--- a/addons/web_editor/static/src/components/media_dialog/search_media.js
+++ b/addons/web_editor/static/src/components/media_dialog/search_media.js
@@ -15,7 +15,7 @@ export class SearchMedia extends Component {
     }
 }
 SearchMedia.template = xml`
-<div class="input-group mr-auto">
+<div class="input-group me-auto">
     <input type="text" class="form-control o_we_search" t-att-placeholder="props.searchPlaceholder.trim()" t-att-value="props.needle" t-on-input="search" t-ref="autofocus"/>
     <div class="input-group-append">
         <div class="input-group-text o_we_search_icon">
diff --git a/addons/web_editor/static/src/components/media_dialog/video_selector.xml b/addons/web_editor/static/src/components/media_dialog/video_selector.xml
index 474bb327aa0..519ce5458a7 100644
--- a/addons/web_editor/static/src/components/media_dialog/video_selector.xml
+++ b/addons/web_editor/static/src/components/media_dialog/video_selector.xml
@@ -11,7 +11,7 @@
         <label class="o_switch" t-on-change="props.onChangeOption">
             <input type="checkbox" t-att-checked="props.value"/><span/>
             <span t-esc="props.label"/>
-            <span t-if="props.description" class="small text-muted ml-auto" t-esc="props.description"/>
+            <span t-if="props.description" class="small text-muted ms-auto" t-esc="props.description"/>
         </label>
     </div>
 </t>
@@ -23,7 +23,7 @@
                 <label class="col-form-label" for="o_video_text">
                     <b>Video code </b>(URL or Embed)
                 </label>
-                <div class="text-left">
+                <div class="text-start">
                     <small class="text-muted">Accepts <b><i>Youtube</i></b>, <b><i>Vimeo</i></b>, <b><i>Dailymotion</i></b> and <b><i>Youku</i></b> videos</small>
                 </div>
                 <textarea t-model="state.urlInput" class="form-control" id="o_video_text" placeholder="Copy-paste your URL or embed code here" t-on-input="onChangeUrl" t-att-class="{ 'is-valid': state.urlInput and !this.state.errorMessage, 'is-invalid': state.urlInput and this.state.errorMessage }"/>
@@ -36,7 +36,7 @@
                     description="option.description"/>
             </div>
             <t t-if="state.vimeoPreviews.length">
-                <span class="font-weight-bold">Suggestions</span>
+                <span class="fw-bold">Suggestions</span>
                 <div id="video-suggestion" class="mt-4 d-flex flex-wrap mh-75 overflow-auto">
                     <t t-foreach="state.vimeoPreviews" t-as="vimeoPreview" t-key="vimeoPreview.id">
                         <div class="o_sample_video w-25 mh-100" t-on-click="() => this.onClickSuggestion(vimeoPreview.src)">
diff --git a/addons/web_editor/static/src/components/upload_progress_toast/upload_progress_toast.xml b/addons/web_editor/static/src/components/upload_progress_toast/upload_progress_toast.xml
index cd9a7479d03..ac8a864d0cd 100644
--- a/addons/web_editor/static/src/components/upload_progress_toast/upload_progress_toast.xml
+++ b/addons/web_editor/static/src/components/upload_progress_toast/upload_progress_toast.xml
@@ -1,14 +1,14 @@
 <?xml version="1.0" encoding="utf-8"?>
 <templates id="template" xml:space="preserve">
 <t t-name="web_editor.ProgressBar" owl="1">
-    <small class="text-info d-flex align-items-center mr-2">
-        <span t-if="!props.hasError and !props.uploaded"><i class="fa fa-circle-o-notch fa-spin mr-2"/></span>
-        <span class="font-italic font-weight-bold text-truncate flex-grow-1 mr-2" t-esc="props.name"/>
-        <span class="font-weight-bold text-nowrap" t-esc="props.size"/>
+    <small class="text-info d-flex align-items-center me-2">
+        <span t-if="!props.hasError and !props.uploaded"><i class="fa fa-circle-o-notch fa-spin me-2"/></span>
+        <span class="fst-italic fw-bold text-truncate flex-grow-1 me-2" t-esc="props.name"/>
+        <span class="fw-bold text-nowrap" t-esc="props.size"/>
     </small>
     <small t-if="props.uploaded or props.hasError" class="d-flex align-items-center mt-1">
-        <span t-if="props.uploaded" class="text-success"><i class="fa fa-check my-1 mr-1"/> File has been uploaded</span>
-        <span t-else="" class="text-danger"><i class="fa fa-times float-left my-1 mr-1"/> <span class="o_we_error_text" t-esc="props.errorMessage ? props.errorMessage : 'File could not be saved'"/></span>
+        <span t-if="props.uploaded" class="text-success"><i class="fa fa-check my-1 me-1"/> File has been uploaded</span>
+        <span t-else="" class="text-danger"><i class="fa fa-times float-start my-1 me-1"/> <span class="o_we_error_text" t-esc="props.errorMessage ? props.errorMessage : 'File could not be saved'"/></span>
     </small>
     <div t-else="" class="progress">
         <div class="progress-bar bg-info progress-bar-striped progress-bar-animated" role="progressbar" t-attf-style="width: {{this.progress}}%;"><span t-esc="this.progress + '%'"/></div>
@@ -22,8 +22,8 @@
             <button type="button" class="close o_notification_close" aria-label="Close" t-on-click="() => this.state.hide = true">
                 <i class="oi oi-close"/>
             </button>
-            <div class="o_notification_body pl-2 pr-4 py-2">
-                <div class="mr-auto o_notification_content">
+            <div class="o_notification_body ps-2 pe-4 py-2">
+                <div class="me-auto o_notification_content">
                     <div t-foreach="props.files" t-as="file" t-key="file" class="o_we_progressbar">
                         <ProgressBar progress="file_value.progress"
                             errorMessage="file_value.errorMessage"
diff --git a/addons/web_editor/static/src/js/common/ace.js b/addons/web_editor/static/src/js/common/ace.js
index 528519d021e..313d2d6026c 100644
--- a/addons/web_editor/static/src/js/common/ace.js
+++ b/addons/web_editor/static/src/js/common/ace.js
@@ -785,7 +785,7 @@ var ViewEditor = Widget.extend({
                 placement: 'left',
                 container: 'body',
                 trigger: 'manual',
-                template: '<div class="popover o_ace_error_popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'
+                template: '<div class="popover o_ace_error_popover" role="tooltip"><div class="tooltip-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'
             });
             this.$errorLine.popover('show');
         }
diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/test/lib/mocha.js b/addons/web_editor/static/src/js/editor/odoo-editor/test/lib/mocha.js
index 7c3f22faed3..62b9ace103b 100644
--- a/addons/web_editor/static/src/js/editor/odoo-editor/test/lib/mocha.js
+++ b/addons/web_editor/static/src/js/editor/odoo-editor/test/lib/mocha.js
@@ -23976,10 +23976,10 @@
 	    });
 
 	    function setHookTitle(hook) {
-	      hook.originalTitle = hook.originalTitle || hook.title;
+	      hook.bsOriginalTitle = hook.bsOriginalTitle || hook.title;
 
 	      if (hook.ctx && hook.ctx.currentTest) {
-	        hook.title = "".concat(hook.originalTitle, " for \"").concat(hook.ctx.currentTest.title, "\"");
+	        hook.title = "".concat(hook.bsOriginalTitle, " for \"").concat(hook.ctx.currentTest.title, "\"");
 	      } else {
 	        var parentTitle;
 
@@ -23989,7 +23989,7 @@
 	          parentTitle = hook.parent.root ? '{root}' : '';
 	        }
 
-	        hook.title = "".concat(hook.originalTitle, " in \"").concat(parentTitle, "\"");
+	        hook.title = "".concat(hook.bsOriginalTitle, " in \"").concat(parentTitle, "\"");
 	      }
 	    }
 	  }
diff --git a/addons/web_editor/static/src/js/editor/snippets.editor.js b/addons/web_editor/static/src/js/editor/snippets.editor.js
index 1289bb89363..6c15c530f8c 100644
--- a/addons/web_editor/static/src/js/editor/snippets.editor.js
+++ b/addons/web_editor/static/src/js/editor/snippets.editor.js
@@ -824,7 +824,7 @@ var SnippetEditor = Widget.extend({
 
         this.isTargetMovable = (this.selectorSiblings.length > 0 || this.selectorChildren.length > 0);
 
-        this.$el.find('[data-toggle="dropdown"]').dropdown();
+        this.$el.find('[data-bs-toggle="dropdown"]').dropdown();
 
         return Promise.all(defs).then(async () => {
             const options = _.sortBy(this.styles, '__order');
@@ -1822,7 +1822,7 @@ var SnippetsMenu = Widget.extend({
                 const $invisEntry = $('<div/>', {
                     class: 'o_we_invisible_entry d-flex align-items-center justify-content-between',
                     text: editor.getName(),
-                }).append($('<i/>', {class: `fa ${editor.isTargetVisible() ? 'fa-eye' : 'fa-eye-slash'} ml-2`}));
+                }).append($('<i/>', {class: `fa ${editor.isTargetVisible() ? 'fa-eye' : 'fa-eye-slash'} ms-2`}));
                 $invisibleDOMPanelEl.append($invisEntry);
                 this.invisibleDOMMap.set($invisEntry[0], el);
             });
@@ -3040,7 +3040,7 @@ var SnippetsMenu = Widget.extend({
         const $input = $(`
             <we-input class="o_we_user_value_widget w-100 mx-1">
                 <div>
-                    <input type="text" autocomplete="chrome-off" value="${snippetName}" class="text-left"/>
+                    <input type="text" autocomplete="chrome-off" value="${snippetName}" class="text-start"/>
                     <we-button class="o_we_confirm_btn o_we_text_success fa fa-check" title="${confirmText}"/>
                     <we-button class="o_we_cancel_btn o_we_text_danger fa fa-times" title="${cancelText}"/>
                 </div>
diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js
index a7e6e6123a5..f5850f2ec72 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -1212,8 +1212,8 @@ const InputUserValueWidget = UnitUserValueWidget.extend({
         this.inputEl.setAttribute('type', 'text');
         this.inputEl.setAttribute('autocomplete', 'chrome-off');
         this.inputEl.setAttribute('placeholder', this.el.getAttribute('placeholder') || '');
-        this.inputEl.classList.toggle('text-left', !unit);
-        this.inputEl.classList.toggle('text-right', !!unit);
+        this.inputEl.classList.toggle('text-start', !unit);
+        this.inputEl.classList.toggle('text-end', !!unit);
         this.containerEl.appendChild(this.inputEl);
 
         var unitEl = document.createElement('span');
@@ -1765,7 +1765,7 @@ const DatetimePickerUserValueWidget = InputUserValueWidget.extend({
 
         const datetimePickerId = _.uniqueId('datetimepicker');
         this.el.classList.add('o_we_large');
-        this.inputEl.classList.add('datetimepicker-input', 'mx-0', 'text-left');
+        this.inputEl.classList.add('datetimepicker-input', 'mx-0', 'text-start');
         this.inputEl.setAttribute('id', datetimePickerId);
         this.inputEl.setAttribute('data-target', '#' + datetimePickerId);
 
diff --git a/addons/web_editor/static/src/js/frontend/loader.js b/addons/web_editor/static/src/js/frontend/loader.js
index 419495aaeab..3864bff0573 100644
--- a/addons/web_editor/static/src/js/frontend/loader.js
+++ b/addons/web_editor/static/src/js/frontend/loader.js
@@ -78,8 +78,8 @@ exports.loadFromTextarea = async (parent, textarea, options) => {
     $form.find('.note-editable').find('img.o_we_selected_image').removeClass('o_we_selected_image');
     $form.on('click', 'button[type=submit]', (e) => {
         $form.find('.note-editable').find('img.o_we_selected_image').removeClass('o_we_selected_image');
-        // float-left class messes up the post layout OPW 769721
-        $form.find('.note-editable').find('img.float-left').removeClass('float-left');
+        // float-start class messes up the post layout OPW 769721
+        $form.find('.note-editable').find('img.float-start').removeClass('float-start');
         $textarea.html(wysiwyg.getValue());
     });
 
diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/link_dialog.js b/addons/web_editor/static/src/js/wysiwyg/widgets/link_dialog.js
index b811bb69a13..e5ce390bbf2 100644
--- a/addons/web_editor/static/src/js/wysiwyg/widgets/link_dialog.js
+++ b/addons/web_editor/static/src/js/wysiwyg/widgets/link_dialog.js
@@ -36,7 +36,7 @@ const _DialogLinkWidget = Link.extend({
         var data = this._getData();
         if (data === null) {
             var $url = this.$('input[name="url"]');
-            $url.closest('.form-group').addClass('o_has_error').find('.form-control, .custom-select').addClass('is-invalid');
+            $url.closest('.form-group').addClass('o_has_error').find('.form-control, .form-select').addClass('is-invalid');
             $url.focus();
             return Promise.reject();
         }
@@ -174,7 +174,7 @@ const _DialogLinkWidget = Link.extend({
      */
     _onURLInput: function () {
         this._super(...arguments);
-        this.$('#o_link_dialog_url_input').closest('.form-group').removeClass('o_has_error').find('.form-control, .custom-select').removeClass('is-invalid');
+        this.$('#o_link_dialog_url_input').closest('.form-group').removeClass('o_has_error').find('.form-control, .form-select').removeClass('is-invalid');
     },
 });
 
diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/link_popover_widget.js b/addons/web_editor/static/src/js/wysiwyg/widgets/link_popover_widget.js
index 527a7d1de6d..169a125cc92 100644
--- a/addons/web_editor/static/src/js/wysiwyg/widgets/link_popover_widget.js
+++ b/addons/web_editor/static/src/js/wysiwyg/widgets/link_popover_widget.js
@@ -53,13 +53,13 @@ const LinkPopoverWidget = Widget.extend({
         const popoverContainer = targetWindow.frameElement ? targetWindow.frameElement.parentElement : targetWindow.document.body;
 
         // init tooltips & popovers
-        this.$('[data-toggle="tooltip"]').tooltip({
+        this.$('[data-bs-toggle="tooltip"]').tooltip({
             delay: 0,
             placement: 'bottom',
             container: popoverContainer,
         });
         const tooltips = [];
-        for (const el of this.$('[data-toggle="tooltip"]').toArray()) {
+        for (const el of this.$('[data-bs-toggle="tooltip"]').toArray()) {
             tooltips.push(Tooltip.getOrCreateInstance(el));
         }
         let popoverShown = true;
diff --git a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
index 9902f78a46a..e4424dfc569 100644
--- a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
+++ b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
@@ -86,9 +86,9 @@ const Wysiwyg = Widget.extend({
         this._onDocumentMousedown = this._onDocumentMousedown.bind(this);
         this._onBlur = this._onBlur.bind(this);
         this.customizableLinksSelector = 'a'
-            + ':not([data-toggle="tab"])'
-            + ':not([data-toggle="collapse"])'
-            + ':not([data-toggle="dropdown"])'
+            + ':not([data-bs-toggle="tab"])'
+            + ':not([data-bs-toggle="collapse"])'
+            + ':not([data-bs-toggle="dropdown"])'
             + ':not(.dropdown-item)';
         // navigator.onLine is sometimes a false positive, this._isOnline use
         // more heuristics to bypass the limitation.
@@ -798,10 +798,10 @@ const Wysiwyg = Widget.extend({
         $editable.find('[style=""]').removeAttr('style');
         $editable.find('[title=""]').removeAttr('title');
         $editable.find('[alt=""]').removeAttr('alt');
-        $editable.find('[data-original-title=""]').removeAttr('data-original-title');
+        $editable.find('[data-bs-original-title=""]').removeAttr('data-bs-original-title');
         $editable.find('[data-editor-message]').removeAttr('data-editor-message');
         $editable.find('a.o_image, span.fa, i.fa').html('');
-        $editable.find('[aria-describedby]').removeAttr('aria-describedby').removeAttr('data-original-title');
+        $editable.find('[aria-describedby]').removeAttr('aria-describedby').removeAttr('data-bs-original-title');
         this.odooEditor.cleanForSave($editable[0]);
         return $editable.html();
     },
@@ -1374,7 +1374,7 @@ const Wysiwyg = Widget.extend({
             const mode = justifyBtn.id.replace('justify', '').toLowerCase();
             const classes = mode === 'center' ? ['d-block', 'mx-auto'] : ['float-' + mode];
             const doAdd = classes.some(className => !this.lastMediaClicked.classList.contains(className));
-            this.lastMediaClicked.classList.remove('float-left', 'float-right');
+            this.lastMediaClicked.classList.remove('float-start', 'float-end');
             if (this.lastMediaClicked.classList.contains('mx-auto')) {
                 this.lastMediaClicked.classList.remove('d-block', 'mx-auto');
             }
@@ -1770,9 +1770,9 @@ const Wysiwyg = Widget.extend({
         let resetAlignment = true;
         if (!commandState) {
             const justifyMapping = [
-                ['float-left', 'justifyLeft'],
+                ['float-start', 'justifyLeft'],
                 ['mx-auto', 'justifyCenter'],
-                ['float-right', 'justifyRight'],
+                ['float-end', 'justifyRight'],
             ];
             commandState = (justifyMapping.find(pair => (
                 this.lastMediaClicked.classList.contains(pair[0]))
@@ -1784,7 +1784,7 @@ const Wysiwyg = Widget.extend({
         if (commandState) {
             const direction = commandState.replace('justify', '').toLowerCase();
             newClass = `fa-align-${direction === 'full' ? 'justify' : direction}`;
-            resetAlignment = !['float-left', 'mx-auto', 'float-right'].some(className => (
+            resetAlignment = !['float-start', 'mx-auto', 'float-end'].some(className => (
                 this.lastMediaClicked.classList.contains(className)
             ));
         }
diff --git a/addons/web_editor/static/src/scss/bootstrap_overridden.scss b/addons/web_editor/static/src/scss/bootstrap_overridden.scss
index 7010c22dfe5..b64c0690974 100644
--- a/addons/web_editor/static/src/scss/bootstrap_overridden.scss
+++ b/addons/web_editor/static/src/scss/bootstrap_overridden.scss
@@ -57,27 +57,27 @@ $grays: () !default;
 //     '100': $gray-100,
 // ), $grays);
 //
-// -> Here gray('100') is blue but $gray-100 is still gray... so BS4 is not
+// -> Here map-get($grays, '100') is blue but $gray-100 is still gray... so BS4 is not
 // correctly generated as BS4 uses $gray-100 in _variables.scss
-$primary: theme-color('primary') !default;
-$secondary: theme-color('secondary') !default;
-$success: theme-color('success') !default;
-$info: theme-color('info') !default;
-$warning: theme-color('warning') !default;
-$danger: theme-color('danger') !default;
-$light: theme-color('light') !default;
-$dark: theme-color('dark') !default;
+$primary: map-get($theme-colors, 'primary') !default;
+$secondary: map-get($theme-colors, 'secondary') !default;
+$success: map-get($theme-colors, 'success') !default;
+$info: map-get($theme-colors, 'info') !default;
+$warning: map-get($theme-colors, 'warning') !default;
+$danger: map-get($theme-colors, 'danger') !default;
+$light: map-get($theme-colors, 'light') !default;
+$dark: map-get($theme-colors, 'dark') !default;
 
-$white: gray('white') !default;
-$gray-100: gray('100') !default;
-$gray-200: gray('200') !default;
-$gray-300: gray('300') !default;
-$gray-400: gray('400') !default;
-$gray-500: gray('500') !default;
-$gray-600: gray('600') !default;
-$gray-700: gray('700') !default;
-$gray-800: gray('800') !default;
-$gray-900: gray('900') !default;
-$black: gray('black') !default;
+$white: map-get($grays, 'white') !default;
+$gray-100: map-get($grays, '100') !default;
+$gray-200: map-get($grays, '200') !default;
+$gray-300: map-get($grays, '300') !default;
+$gray-400: map-get($grays, '400') !default;
+$gray-500: map-get($grays, '500') !default;
+$gray-600: map-get($grays, '600') !default;
+$gray-700: map-get($grays, '700') !default;
+$gray-800: map-get($grays, '800') !default;
+$gray-900: map-get($grays, '900') !default;
+$black: map-get($grays, 'black') !default;
 
 $o-color-system-initialized: true;
diff --git a/addons/web_editor/static/src/scss/secondary_variables.scss b/addons/web_editor/static/src/scss/secondary_variables.scss
index 1785bb09591..c877f457543 100644
--- a/addons/web_editor/static/src/scss/secondary_variables.scss
+++ b/addons/web_editor/static/src/scss/secondary_variables.scss
@@ -111,13 +111,13 @@ $o-color-system-initialized: false;
     // value. We can thus search in those.
     @if $o-color-system-initialized {
         @if map-has-key($colors, $name) {
-            @return color($name);
+            @return map-get($colors, $name);
         }
         @if map-has-key($theme-colors, $name) {
-            @return theme-color($name);
+            @return map-get($theme-colors, $name);
         }
         @if map-has-key($grays, $name) {
-            @return gray($name);
+            @return map-get($grays, $name);
         }
     }
 
diff --git a/addons/web_editor/static/src/scss/web_editor.common.scss b/addons/web_editor/static/src/scss/web_editor.common.scss
index 4b4452a42b9..5a81056949c 100644
--- a/addons/web_editor/static/src/scss/web_editor.common.scss
+++ b/addons/web_editor/static/src/scss/web_editor.common.scss
@@ -14,56 +14,56 @@
     // Most of the keys of the color combination color should be null. We have
     // to indicate their fallback values.
     @for $index from 1 through length($o-color-combinations) {
-        $-bg-color: o-color(color('o-cc#{$index}-bg'));
+        $-bg-color: o-color(map-get($colors, 'o-cc#{$index}-bg'));
 
-        $-text: color('o-cc#{$index}-text') or color-contrast(o-color('o-cc#{$index}-bg'));
-        $-headings: color('o-cc#{$index}-headings') or $-text;
-        $-h2: color('o-cc#{$index}-h2') or $-headings;
-        $-h3: color('o-cc#{$index}-h3') or $-h2;
-        $-h4: color('o-cc#{$index}-h4') or $-h3;
-        $-h5: color('o-cc#{$index}-h5') or $-h4;
-        $-h6: color('o-cc#{$index}-h6') or $-h5;
+        $-text: map-get($colors, 'o-cc#{$index}-text') or color-contrast(o-color('o-cc#{$index}-bg'));
+        $-headings: map-get($colors, 'o-cc#{$index}-headings') or $-text;
+        $-h2: map-get($colors, 'o-cc#{$index}-h2') or $-headings;
+        $-h3: map-get($colors, 'o-cc#{$index}-h3') or $-h2;
+        $-h4: map-get($colors, 'o-cc#{$index}-h4') or $-h3;
+        $-h5: map-get($colors, 'o-cc#{$index}-h5') or $-h4;
+        $-h6: map-get($colors, 'o-cc#{$index}-h6') or $-h5;
 
-        @if not color('o-cc#{$index}-text') {
+        @if not map-get($colors, 'o-cc#{$index}-text') {
             @include print-variable('o-cc#{$index}-text', $-text);
         }
-        @if not color('o-cc#{$index}-headings') {
+        @if not map-get($colors, 'o-cc#{$index}-headings') {
             @include print-variable('o-cc#{$index}-headings', $-headings);
         }
-        @if not color('o-cc#{$index}-h2') {
+        @if not map-get($colors, 'o-cc#{$index}-h2') {
             @include print-variable('o-cc#{$index}-h2', $-h2);
         }
-        @if not color('o-cc#{$index}-h3') {
+        @if not map-get($colors, 'o-cc#{$index}-h3') {
             @include print-variable('o-cc#{$index}-h3', $-h3);
         }
-        @if not color('o-cc#{$index}-h4') {
+        @if not map-get($colors, 'o-cc#{$index}-h4') {
             @include print-variable('o-cc#{$index}-h4', $-h4);
         }
-        @if not color('o-cc#{$index}-h5') {
+        @if not map-get($colors, 'o-cc#{$index}-h5') {
             @include print-variable('o-cc#{$index}-h5', $-h5);
         }
-        @if not color('o-cc#{$index}-h6') {
+        @if not map-get($colors, 'o-cc#{$index}-h6') {
             @include print-variable('o-cc#{$index}-h6', $-h6);
         }
 
-        $-link: color('o-cc#{$index}-link');
-        $-link-color: if($-link, o-color($-link), theme-color('primary'));
+        $-link: map-get($colors, 'o-cc#{$index}-link');
+        $-link-color: if($-link, o-color($-link), map-get($theme-colors, 'primary'));
         @include print-variable('o-cc#{$index}-link', auto-contrast($-link-color, $-bg-color, 'o-cc#{$index}-link'));
 
-        $-btn-primary: color('o-cc#{$index}-btn-primary');
+        $-btn-primary: map-get($colors, 'o-cc#{$index}-btn-primary');
         @if not $-btn-primary {
-            @include print-variable('o-cc#{$index}-btn-primary', theme-color('primary'));
+            @include print-variable('o-cc#{$index}-btn-primary', map-get($theme-colors, 'primary'));
         }
-        @if not color('o-cc#{$index}-btn-primary-border') {
-            @include print-variable('o-cc#{$index}-btn-primary-border', $-btn-primary or theme-color('primary'));
+        @if not map-get($colors, 'o-cc#{$index}-btn-primary-border') {
+            @include print-variable('o-cc#{$index}-btn-primary-border', $-btn-primary or map-get($theme-colors, 'primary'));
         }
 
-        $-btn-secondary: color('o-cc#{$index}-btn-secondary');
+        $-btn-secondary: map-get($colors, 'o-cc#{$index}-btn-secondary');
         @if not $-btn-secondary {
-            @include print-variable('o-cc#{$index}-btn-secondary', theme-color('secondary'));
+            @include print-variable('o-cc#{$index}-btn-secondary', map-get($theme-colors, 'secondary'));
         }
-        @if not color('o-cc#{$index}-btn-secondary-border') {
-            @include print-variable('o-cc#{$index}-btn-secondary-border', $-btn-secondary or theme-color('secondary'));
+        @if not map-get($colors, 'o-cc#{$index}-btn-secondary-border') {
+            @include print-variable('o-cc#{$index}-btn-secondary-border', $-btn-secondary or map-get($theme-colors, 'secondary'));
         }
     }
 
@@ -194,7 +194,7 @@ img.padding-large, .img.padding-large, span.fa.padding-large, iframe.padding-lar
 img.padding-xl, .img.padding-xl, span.fa.padding-xl, iframe.padding-xl {
     padding: 32px;
 }
-img.ml-auto, img.mx-auto {
+img.ms-auto, img.mx-auto {
     display: block;
 }
 
@@ -597,7 +597,7 @@ a.o_underline {
                         }
                     }
 
-                    > .input-group.ml-2 {
+                    > .input-group.ms-2 {
                         margin-left: 0 !important;
                     }
                 }
@@ -636,7 +636,7 @@ a.o_underline {
 blockquote {
     padding: $spacer/2 $spacer;
     border-left: 5px solid;
-    border-color: gray('300');
+    border-color: map-get($grays, '300');
     font-style: italic;
 }
 
@@ -644,7 +644,7 @@ blockquote {
 // outside of the $theme-colors too (but not btn-, alert-, etc).
 @for $index from 1 through 5 {
     $-color-name: 'o-color-#{$index}';
-    $-color: color($-color-name);
+    $-color: map-get($colors, $-color-name);
     @include bg-variant(".bg-#{$-color-name}", $-color);
     @include text-emphasis-variant(".text-#{$-color-name}", $-color);
 }
@@ -673,19 +673,19 @@ blockquote {
     }
 }
 @for $index from 1 through length($o-color-combinations) {
-    $-bg: color('o-cc#{$index}-bg');
-    $-text: color('o-cc#{$index}-text');
-    $-headings: color('o-cc#{$index}-headings');
-    $-h2: color('o-cc#{$index}-h2');
-    $-h3: color('o-cc#{$index}-h3');
-    $-h4: color('o-cc#{$index}-h4');
-    $-h5: color('o-cc#{$index}-h5');
-    $-h6: color('o-cc#{$index}-h6');
-    $-link: color('o-cc#{$index}-link');
-    $-btn-primary: color('o-cc#{$index}-btn-primary');
-    $-btn-primary-border: color('o-cc#{$index}-btn-primary-border');
-    $-btn-secondary: color('o-cc#{$index}-btn-secondary');
-    $-btn-secondary-border: color('o-cc#{$index}-btn-secondary-border');
+    $-bg: map-get($colors, 'o-cc#{$index}-bg');
+    $-text: map-get($colors, 'o-cc#{$index}-text');
+    $-headings: map-get($colors, 'o-cc#{$index}-headings');
+    $-h2: map-get($colors, 'o-cc#{$index}-h2');
+    $-h3: map-get($colors, 'o-cc#{$index}-h3');
+    $-h4: map-get($colors, 'o-cc#{$index}-h4');
+    $-h5: map-get($colors, 'o-cc#{$index}-h5');
+    $-h6: map-get($colors, 'o-cc#{$index}-h6');
+    $-link: map-get($colors, 'o-cc#{$index}-link');
+    $-btn-primary: map-get($colors, 'o-cc#{$index}-btn-primary');
+    $-btn-primary-border: map-get($colors, 'o-cc#{$index}-btn-primary-border');
+    $-btn-secondary: map-get($colors, 'o-cc#{$index}-btn-secondary');
+    $-btn-secondary-border: map-get($colors, 'o-cc#{$index}-btn-secondary-border');
 
     // Those color classes color multiple elements when applied on a snippet.
     // Those rules are not important so that they can be overridden through
@@ -718,7 +718,7 @@ blockquote {
             }
 
             // Links
-            $-link-color: if($-link, o-color($-link), theme-color('primary'));
+            $-link-color: if($-link, o-color($-link), map-get($theme-colors, 'primary'));
             $-link-hover-color: darken($-link-color, 15%);
             a:not(.btn), .btn-link {
                 color: auto-contrast($-link-color, $-bg-color, 'o-cc#{$index}-link');
@@ -731,7 +731,7 @@ blockquote {
             // Buttons
 
             // Primary
-            $-btn-primary-color: if($-btn-primary, o-color($-btn-primary), theme-color('primary'));
+            $-btn-primary-color: if($-btn-primary, o-color($-btn-primary), map-get($theme-colors, 'primary'));
             $-btn-primary-border-color: if($-btn-primary-border, o-color($-btn-primary-border), $-btn-primary-color);
             .btn-fill-primary {
                 @include button-variant($-btn-primary-color, $-btn-primary-border-color);
@@ -741,7 +741,7 @@ blockquote {
             }
 
             // Secondary
-            $-btn-secondary-color: if($-btn-secondary, o-color($-btn-secondary), theme-color('secondary'));
+            $-btn-secondary-color: if($-btn-secondary, o-color($-btn-secondary), map-get($theme-colors, 'secondary'));
             $-btn-secondary-border-color: if($-btn-secondary-border, o-color($-btn-secondary-border), $-btn-secondary-color);
             .btn-fill-secondary {
                 @include button-variant($-btn-secondary-color, $-btn-secondary-border-color);
diff --git a/addons/web_editor/static/src/scss/wysiwyg.scss b/addons/web_editor/static/src/scss/wysiwyg.scss
index 15cf551f30b..334b7c4ef2a 100644
--- a/addons/web_editor/static/src/scss/wysiwyg.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg.scss
@@ -488,7 +488,7 @@ body .modal {
         }
 
         .o_link_dialog_preview {
-            border-left: 1px solid gray('200');
+            border-left: 1px solid map-get($grays, '200');
         }
     }
 }
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index b6df8f66c68..e86da7a2dab 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -588,20 +588,20 @@ body.editor_enable.editor_has_snippets {
 
                 #oe-text-color {
                     border-right:0;
-                    @include border-right-radius(0);
+                    @include border-end-radius(0);
                 }
 
                 #oe-fore-color {
-                    @include border-left-radius(0);
+                    @include border-start-radius(0);
                 }
             }
 
             .btn + .btn {
-                @include border-left-radius(0);
+                @include border-start-radius(0);
             }
 
             .btn-group > .btn:not(:last-of-type) {
-                @include border-right-radius(0);
+                @include border-end-radius(0);
             }
 
             #list {
@@ -1141,10 +1141,10 @@ body.editor_enable.editor_has_snippets {
                         border-left: none;
                     }
                     &:first-child, .active:first-child {
-                        @include border-left-radius($o-we-sidebar-content-field-border-radius);
+                        @include border-start-radius($o-we-sidebar-content-field-border-radius);
                     }
                     &:last-child, .active:last-child {
-                        @include border-right-radius($o-we-sidebar-content-field-border-radius);
+                        @include border-end-radius($o-we-sidebar-content-field-border-radius);
                     }
                 }
             }
@@ -1370,7 +1370,7 @@ body.editor_enable.editor_has_snippets {
                 &::-ms-fill-lower {
                     background-color: $o-we-sidebar-content-field-progress-active-color;
                     border-radius: 10rem;
-                    @include border-radius($custom-range-track-border-radius);
+                    @include border-radius($form-range-track-border-radius);
                 }
                 &::-ms-fill-upper {
                     background-color: $o-we-sidebar-content-field-progress-color;
diff --git a/addons/web_editor/static/src/xml/ace.xml b/addons/web_editor/static/src/xml/ace.xml
index 574cb9a4404..09c7bfc9bda 100644
--- a/addons/web_editor/static/src/xml/ace.xml
+++ b/addons/web_editor/static/src/xml/ace.xml
@@ -5,7 +5,7 @@
     <div class="o_ace_view_editor">
         <div class="form-inline o_ace_view_editor_title">
             <div class="btn-group o_ace_type_switcher">
-                <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">XML (HTML)</button>
+                <button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown">XML (HTML)</button>
                 <div class="dropdown-menu" role="menu">
                     <a role="menuitem" href="#" class="dropdown-item o_ace_type_switcher_choice" data-type="xml">XML (HTML)</a>
                     <a role="menuitem" href="#" class="dropdown-item o_ace_type_switcher_choice" data-type="scss">SCSS (CSS)</a>
@@ -17,7 +17,7 @@
             <select id="ace-js-list" class="o_res_list d-none"/>
             <label class="o_include_option oe_include_bundles">
                 <div class="dropdown">
-                    <button class="btn btn-primary dropdown-toggle" type="button" id="o_dropdown_filter_views" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    <button class="btn btn-primary dropdown-toggle" type="button" id="o_dropdown_filter_views" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                         Filter
                     </button>
                     <div class="dropdown-menu" aria-labelledby="o_dropdown_filter_views">
@@ -28,7 +28,7 @@
             </label>
             <label class="o_include_option o_include_all_scss d-none">
                 <div class="dropdown">
-                    <button class="btn btn-primary dropdown-toggle" type="button" id="o_dropdown_filter_assets" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    <button class="btn btn-primary dropdown-toggle" type="button" id="o_dropdown_filter_assets" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                         Filter
                     </button>
                     <div class="dropdown-menu" aria-labelledby="o_dropdown_filter_assets">
@@ -44,7 +44,7 @@
             </div>
         </div>
         <div id="ace-view-id">
-            <div class="float-right mb-2">
+            <div class="float-end mb-2">
                 <button data-action="reset" type="button" class="btn btn-sm btn-danger d-none"><i class="fa fa-undo"/> Reset</button>
                 <button data-action="format" type="button" class="btn btn-sm btn-link">Format</button>
             </div>
diff --git a/addons/web_editor/static/src/xml/backend.xml b/addons/web_editor/static/src/xml/backend.xml
index c79ee939283..1d6b973954a 100644
--- a/addons/web_editor/static/src/xml/backend.xml
+++ b/addons/web_editor/static/src/xml/backend.xml
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="web_editor.FieldTextHtml.button.translate">
-        <div class="btn-group float-right">
+        <div class="btn-group float-end">
             <button t-if="widget.field.translate" class="o_field_translate btn btn-secondary" style="height: 24px; padding: 1px 17px 0px 5px" aria-label="Translate" title="Translate">
                 <span class="fa fa-language fa-lg oe_input_icon"/>
             </button>
diff --git a/addons/web_editor/static/src/xml/editor.xml b/addons/web_editor/static/src/xml/editor.xml
index 8c44d4d0248..7f4d74277fc 100644
--- a/addons/web_editor/static/src/xml/editor.xml
+++ b/addons/web_editor/static/src/xml/editor.xml
@@ -9,8 +9,8 @@
         <div id="toolbar" class="oe-toolbar oe-floating">
             <div id="style" class="btn-group dropdown">
                 <button type="button" class="btn dropdown-toggle"
-                    data-toggle="dropdown" title="Text style" tabindex="-1" data-display="static"
-                    data-original-title="Style" aria-expanded="false">
+                    data-bs-toggle="dropdown" title="Text style" tabindex="-1" data-bs-display="static"
+                    data-bs-original-title="Style" aria-expanded="false">
                     <span>Normal</span>
                 </button>
                 <ul class="dropdown-menu">
@@ -57,8 +57,8 @@
             <div id="colorInputButtonGroup" class="btn-group">
                 <div class="colorpicker-group note-fore-color-preview" data-name="color">
                     <div id="oe-text-color" class="btn color-button dropdown-toggle editor-ignore"
-                        data-toggle="dropdown" title="Font Color" tabindex="-1"
-                        data-original-title="Font Color">
+                        data-bs-toggle="dropdown" title="Font Color" tabindex="-1"
+                        data-bs-original-title="Font Color">
                         <i class="fa fa-font color-indicator fore-color"></i>
                     </div>
                     <ul class="dropdown-menu colorpicker-menu">
@@ -67,8 +67,8 @@
                 </div>
                 <div class="colorpicker-group note-back-color-preview" data-name="color">
                     <button id="oe-fore-color" type="button" class="btn dropdown-toggle editor-ignore"
-                        data-toggle="dropdown" title="Background Color" tabindex="-1"
-                        data-original-title="Background Color">
+                        data-bs-toggle="dropdown" title="Background Color" tabindex="-1"
+                        data-bs-original-title="Background Color">
                         <i class="fa fa-paint-brush color-indicator hilite-color"></i>
                     </button>
                     <ul class="dropdown-menu colorpicker-menu">
@@ -79,8 +79,8 @@
 
             <div id="font-size" class="btn-group dropdown">
                 <button type="button" class="btn dropdown-toggle"
-                    data-toggle="dropdown" title="Font size" tabindex="-1" data-display="static"
-                    data-original-title="Font Size" aria-expanded="false">
+                    data-bs-toggle="dropdown" title="Font size" tabindex="-1" data-bs-display="static"
+                    data-bs-original-title="Font Size" aria-expanded="false">
                     <span id="fontSizeCurrentValue"></span>
                 </button>
                 <ul class="dropdown-menu">
@@ -101,8 +101,8 @@
 
             <div id="justify" class="btn-group dropdown">
                 <button type="button" class="btn dropdown-toggle"
-                    data-toggle="dropdown" title="Text align" tabindex="-1"
-                    data-original-title="Paragraph" aria-expanded="false">
+                    data-bs-toggle="dropdown" title="Text align" tabindex="-1"
+                    data-bs-original-title="Paragraph" aria-expanded="false">
                     <i id="paragraphDropdownButton" class="fa fa-align-left fa-fw"></i>
                 </button>
                 <div class="dropdown-menu">
@@ -129,8 +129,8 @@
             <div id="table" class="btn-group">
                 <div class="dropdown">
                     <button type="button" class="btn dropdown-toggle"
-                        data-toggle="dropdown" title="Insert table" tabindex="-1"
-                        data-original-title="Table" aria-expanded="false"
+                        data-bs-toggle="dropdown" title="Insert table" tabindex="-1"
+                        data-bs-original-title="Table" aria-expanded="false"
                         id="tableDropdownButton">
                         <i class="fa fa-table fa-fw"></i>
                     </button>
@@ -140,8 +140,8 @@
                 </div>
                 <div class="dropdown">
                     <button type="button" class="btn dropdown-toggle toolbar-edit-table"
-                        data-toggle="dropdown" title="Table tools" tabindex="-1"
-                        data-original-title="Edit table" aria-expanded="false">
+                        data-bs-toggle="dropdown" title="Table tools" tabindex="-1"
+                        data-bs-original-title="Edit table" aria-expanded="false">
                         <i class="fa fa-columns fa-fw"></i>
                     </button>
                     <ul class="dropdown-menu">
@@ -172,8 +172,8 @@
 
             <div id="image-padding" class="btn-group dropdown">
                 <button type="button" class="btn dropdown-toggle"
-                    data-toggle="dropdown" title="Image padding" tabindex="-1"
-                    data-original-title="Image padding" aria-expanded="false">
+                    data-bs-toggle="dropdown" title="Image padding" tabindex="-1"
+                    data-bs-original-title="Image padding" aria-expanded="false">
                     <span class="fa fa-plus-square-o"></span>
                 </button>
                 <ul class="dropdown-menu">
@@ -296,7 +296,7 @@
             <div class="o_we_overlay_content position-absolute">
                 <div class="o_overlay_background"/>
                 <div class="o_we_overlay_buttons position-absolute d-flex m-1" style="top: 0">
-                    <button class="btn btn-primary mr-1 o_btn_apply">Apply</button>
+                    <button class="btn btn-primary me-1 o_btn_apply">Apply</button>
                     <button class="btn btn-danger o_btn_discard">Discard</button>
                 </div>
             </div>
diff --git a/addons/web_editor/static/src/xml/snippets.xml b/addons/web_editor/static/src/xml/snippets.xml
index 2fc238fc566..f269e3122d8 100644
--- a/addons/web_editor/static/src/xml/snippets.xml
+++ b/addons/web_editor/static/src/xml/snippets.xml
@@ -58,7 +58,7 @@
             </button>
             <t t-if="widget.resetButton">
                 <t t-set="trash_title"><t t-if="widget.withCombinations">None</t><t t-else="">Reset</t></t>
-                <button type="button" class="fa fa-trash my-1 ml-5 py-0 o_we_color_btn o_colorpicker_reset o_we_hover_danger" t-att-title="trash_title"/>
+                <button type="button" class="fa fa-trash my-1 ms-5 py-0 o_we_color_btn o_colorpicker_reset o_we_hover_danger" t-att-title="trash_title"/>
             </t>
         </div>
         <div class="o_colorpicker_sections pt-2 px-2 pb-3" data-color-tab="color-combinations">
@@ -83,7 +83,7 @@
         <div class="o_we_cc_preview_wrapper d-flex justify-content-between">
             <h1 class="o_we_color_combination_btn_title">Title</h1>
             <p class="o_we_color_combination_btn_text flex-grow-1">Text</p>
-            <span class="o_we_color_combination_btn_btn btn btn-sm btn-primary o_btn_preview mr-1"><small>Button</small></span>
+            <span class="o_we_color_combination_btn_btn btn btn-sm btn-primary o_btn_preview me-1"><small>Button</small></span>
             <span class="o_we_color_combination_btn_btn btn btn-sm btn-secondary o_btn_preview"><small>Button</small></span>
         </div>
     </t>
diff --git a/addons/web_editor/static/src/xml/wysiwyg.xml b/addons/web_editor/static/src/xml/wysiwyg.xml
index 2d50cd5a770..dd70973d071 100644
--- a/addons/web_editor/static/src/xml/wysiwyg.xml
+++ b/addons/web_editor/static/src/xml/wysiwyg.xml
@@ -96,7 +96,7 @@
                         <input type="text" name="url" class="form-control" id="o_link_dialog_url_input" required="required"/>
                         <div class="form-check o_strip_domain d-none">
                             <input type="checkbox" id="o_link_dialog_url_strip_domain" checked="checked" class="form-check-input"/>
-                            <label for="o_link_dialog_url_strip_domain" class="form-check-label font-weight-normal">
+                            <label for="o_link_dialog_url_strip_domain" class="form-check-label fw-normal">
                                 Autoconvert to relative link
                             </label>
                         </div>
@@ -107,7 +107,7 @@
                     <div class="col-md-9 d-flex align-items-center">
                         <div t-attf-class="#{widget.colorCombinationClass ? ('p-2 ' + widget.colorCombinationClass) : ''}">
                             <t t-foreach="widget.colorsData" t-as="colorData">
-                                <label role="button" class="m-0 mr-2" t-if="colorData.type !== 'custom'">
+                                <label role="button" class="m-0 me-2" t-if="colorData.type !== 'custom'">
                                     <input type="radio" name="link_style_color" class="d-none link-style" t-att-value="colorData.type"/>
                                     <span t-esc="colorData.label"
                                             t-attf-class="o_btn_preview btn btn-sm btn-#{colorData.btnPreview} #{colorData.type ? '' : 'px-0'}"/>
@@ -120,7 +120,7 @@
                     <div class="form-group row">
                         <label class="col-form-label col-md-3">Size</label>
                         <div class="col-md-9">
-                            <select name="link_style_size" class="form-control link-style">
+                            <select name="link_style_size" class="form-select link-style">
                                 <option value="sm">Small</option>
                                 <option value="" selected="selected">Medium</option>
                                 <option value="lg">Large</option>
@@ -130,7 +130,7 @@
                     <div class="form-group row">
                         <label class="col-form-label col-md-3">Style</label>
                         <div class="col-md-9">
-                            <select name="link_style_shape" class="form-control link-style">
+                            <select name="link_style_shape" class="form-select link-style">
                                 <option value="" selected="selected">Default</option>
                                 <option value="rounded-circle">Default + Rounded</option>
                                 <option value="outline">Outline</option>
@@ -166,17 +166,17 @@
 
     <!-- Link Edition : Popover -->
     <div t-name="wysiwyg.widgets.link.edit.tooltip" class="d-flex">
-        <span class="mr-2 o_we_preview_favicon"><i class="fa fa-globe"/><img class="align-baseline d-none"/></span>
+        <span class="me-2 o_we_preview_favicon"><i class="fa fa-globe"/><img class="align-baseline d-none"/></span>
         <div class="w-100">
             <div class="d-flex">
-                <a href="#" target="_blank" class="o_we_url_link font-weight-bold flex-grow-1" t-esc="widget.href" title="Open in a new tab"/>
-                <a href="#" class="mx-2 o_we_copy_link text-dark" data-toggle="tooltip" data-placement="top" title="Copy Link">
+                <a href="#" target="_blank" class="o_we_url_link fw-bold flex-grow-1" t-esc="widget.href" title="Open in a new tab"/>
+                <a href="#" class="mx-2 o_we_copy_link text-dark" data-bs-toggle="tooltip" data-bs-placement="top" title="Copy Link">
                     <i class="fa fa-clone"/>
                 </a>
-                <a href="#" class="mx-2 o_we_edit_link text-dark" data-toggle="tooltip" data-placement="top" title="Edit Link">
+                <a href="#" class="mx-2 o_we_edit_link text-dark" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit Link">
                     <i class="fa fa-edit"/>
                 </a>
-                <a href="#" class="ml-2 o_we_remove_link text-dark" data-toggle="tooltip" data-placement="top" title="Remove Link">
+                <a href="#" class="ms-2 o_we_remove_link text-dark" data-bs-toggle="tooltip" data-bs-placement="top" title="Remove Link">
                     <i class="fa fa-chain-broken"/>
                 </a>
             </div>
@@ -213,8 +213,8 @@
                 <we-title>⌙ Style</we-title>
                 <div class="dropdown">
                     <button class="dropdown-toggle"
-                        data-toggle="dropdown" title="" tabindex="-1"
-                        data-original-title="Link Style" aria-expanded="false">
+                        data-bs-toggle="dropdown" title="" tabindex="-1"
+                        data-bs-original-title="Link Style" aria-expanded="false">
                         <we-toggler/>
                     </button>
                     <we-selection-items class="dropdown-menu" name="link_style_color">
@@ -232,7 +232,7 @@
             <we-select title="Color" class="o_we_user_value_widget o_we_so_color_palette">
                 <we-title> ⌙ Text Color</we-title><!-- &emsp; -->
                 <div class="dropdown">
-                    <span data-toggle="dropdown" data-css-property="color" class="o_we_color_preview"></span>
+                    <span data-bs-toggle="dropdown" data-css-property="color" class="o_we_color_preview"></span>
                     <we-selection-items class="dropdown-menu" name="link_text_color"/>
                 </div>
             </we-select>
@@ -241,7 +241,7 @@
             <we-select title="Color" class="o_we_user_value_widget o_we_so_color_palette">
                 <we-title> ⌙ Fill Color</we-title><!-- &emsp; -->
                 <div class="dropdown">
-                    <span data-toggle="dropdown" data-css-property="background-color" class="o_we_color_preview"></span>
+                    <span data-bs-toggle="dropdown" data-css-property="background-color" class="o_we_color_preview"></span>
                     <we-selection-items class="dropdown-menu" name="link_fill_color"/>
                 </div>
             </we-select>
@@ -251,28 +251,28 @@
             <div>
                 <we-input class="o_we_user_value_widget" title="Border Width">
                     <div class="o_custom_border_width_input">
-                        <input name="custom_border_width" type="text" class="text-right" size="2"/>
+                        <input name="custom_border_width" type="text" class="text-end" size="2"/>
                         <span>px</span>
                     </div>
                 </we-input>
                 <we-select class="o_we_user_value_widget" title="Border Style">
                     <div class="dropdown">
                         <button class="dropdown-toggle"
-                            data-toggle="dropdown" title="" tabindex="-1"
-                            data-original-title="Link Border Style" aria-expanded="false">
+                            data-bs-toggle="dropdown" title="" tabindex="-1"
+                            data-bs-original-title="Link Border Style" aria-expanded="false">
                             <we-toggler/>
                         </button>
                         <we-selection-items class="dropdown-menu" name="link_border_style">
                             <we-button title="Solid" class="dropdown-item" data-value="solid"><div class="o_we_fake_img_item o_we_border_preview" style="border-style: solid;"/></we-button>
                             <we-button title="Dashed" class="dropdown-item" data-value="dashed"><div class="o_we_fake_img_item o_we_border_preview" style="border-style: dashed;"/></we-button>
                             <we-button title="Dotted" class="dropdown-item" data-value="dotted"><div class="o_we_fake_img_item o_we_border_preview" style="border-style: dotted;"/></we-button>
-                            <we-button title="Double" class="dropdown-item" data-value="double"><div class="o_we_fake_img_item o_we_border_preview" style="border-style: double; border-left: none; border-right: none;"/></we-button>
+                            <we-button title="Double" class="dropdown-item" data-value="double"><div class="o_we_fake_img_item o_we_border_preview" style="border-style: double; border-start: none; border-end: none;"/></we-button>
                         </we-selection-items>
                     </div>
                 </we-select>
                 <we-select title="Border Color" class="o_we_user_value_widget o_we_so_color_palette">
                     <div class="dropdown">
-                        <span data-toggle="dropdown" data-css-property="border-color" class="o_we_color_preview"></span>
+                        <span data-bs-toggle="dropdown" data-css-property="border-color" class="o_we_color_preview"></span>
                         <we-selection-items class="dropdown-menu" name="link_border_color"/>
                     </div>
                 </we-select>
@@ -284,8 +284,8 @@
                 <div>
                     <div class="dropdown">
                         <button class="dropdown-toggle"
-                            data-toggle="dropdown" title="" tabindex="-1"
-                            data-original-title="Link Size" aria-expanded="false">
+                            data-bs-toggle="dropdown" title="" tabindex="-1"
+                            data-bs-original-title="Link Size" aria-expanded="false">
                             <we-toggler>
                                 Medium
                             </we-toggler>
@@ -312,8 +312,8 @@
                 <div>
                     <div class="dropdown">
                         <button class="dropdown-toggle"
-                            data-toggle="dropdown" title="" tabindex="-1"
-                            data-original-title="Link Shape" aria-expanded="false">
+                            data-bs-toggle="dropdown" title="" tabindex="-1"
+                            data-bs-original-title="Link Shape" aria-expanded="false">
                             <we-toggler>
                                 Default
                             </we-toggler>
@@ -346,7 +346,7 @@
         <div class="o_we_cropper_wrapper">
             <img class="o_we_cropper_img"/>
             <div class="o_we_crop_buttons text-center mt16 position-absolute o_we_no_overlay" contenteditable="false">
-                <div class="btn-group btn-group-toggle" title="Aspect Ratio" data-toggle="buttons">
+                <div class="btn-group btn-group-toggle" title="Aspect Ratio" data-bs-toggle="buttons">
                     <t t-foreach="widget.aspectRatios" t-as="ratio">
                         <t t-set="is_active" t-value="ratio === widget.aspectRatio"/>
                         <label t-attf-class="btn #{is_active and 'active' or ''}" data-action="ratio" t-att-data-value="ratio">
diff --git a/addons/web_editor/static/src/xml/wysiwyg_colorpicker.xml b/addons/web_editor/static/src/xml/wysiwyg_colorpicker.xml
index a536f6f9edd..bac7e11fe4d 100644
--- a/addons/web_editor/static/src/xml/wysiwyg_colorpicker.xml
+++ b/addons/web_editor/static/src/xml/wysiwyg_colorpicker.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates>
     <div t-name="wysiwyg.plugin.font.paletteButton" t-attf-class="note-btn-group btn-group {{className}}">
-        <button type="button" class="note-btn btn btn-light btn-sm dropdown-toggle" tabindex="-1" data-toggle="dropdown"><i
+        <button type="button" class="note-btn btn btn-light btn-sm dropdown-toggle" tabindex="-1" data-bs-toggle="dropdown"><i
                 t-att-class="icon"></i></button>
         <div class="dropdown-menu" />
     </div>
@@ -18,7 +18,7 @@
                 <h6 class="mt-2">Common colors</h6>
                 <div class="o_common_color_placeholder">
                     <div class="note-color-row" t-foreach="colors" t-as="rowColors">
-                        <button t-foreach="rowColors" t-as="color" type="button" class="note-color-btn" data-toggle="button"
+                        <button t-foreach="rowColors" t-as="color" type="button" class="note-color-btn" data-bs-toggle="button"
                             tabindex="-1" t-attf-style="background-color:{{color}}" t-att-data-value="color"
                             t-att-title="color" />
                     </div>
diff --git a/addons/web_editor/views/editor.xml b/addons/web_editor/views/editor.xml
index 16e4d6b7333..69b21d16423 100644
--- a/addons/web_editor/views/editor.xml
+++ b/addons/web_editor/views/editor.xml
@@ -37,7 +37,7 @@
             <button data-color="o-color-1"/>
             <button data-color="o-color-3"/>
             <button data-color="o-color-2"/>
-            <button data-color="o-color-4" class="ml-2"/>
+            <button data-color="o-color-4" class="ms-2"/>
             <button data-color="o-color-5"/>
         </div>
         <div class="o_colorpicker_section" data-name="common">
@@ -81,7 +81,7 @@
         <div class="o_colorpicker_section o_custom_gradient_editor" data-name="custom_gradient">
             <button class="w-50 o_custom_gradient_btn o_we_color_btn py-1 btn" title="Define a custom gradient">Custom</button>
             <div class="o_color_picker_inputs mx-1">
-                <t t-set="input_classes" t-value="'p-0 border-0 text-center text-monospace bg-transparent text-white'" />
+                <t t-set="input_classes" t-value="'p-0 border-0 text-center font-monospace bg-transparent text-white'" />
                 <div class="d-flex justify-content-between my-2 o_type_row">
                     <we-title>Type</we-title>
                     <span class="d-flex justify-content-between">
@@ -93,21 +93,21 @@
                     <we-title>Angle</we-title>
                     <span class="o_custom_gradient_input bg-black-50 px-1 d-flex align-items-baseline">
                         <input data-name="angle" type="text" t-attf-class="{{input_classes}}" style="width: 5ch;" value="90"/>
-                        <span class="flex-grow-0 ml-1 text-white-50">deg</span>
+                        <span class="flex-grow-0 ms-1 text-white-50">deg</span>
                     </span>
                 </div>
                 <div class="d-flex justify-content-between my-2 o_position_row">
                     <we-title>Position</we-title>
                     <span class="d-flex">
-                    <span class="mr-2">X</span>
+                    <span class="me-2">X</span>
                     <span class="o_custom_gradient_input bg-black-50 px-1 d-flex">
                         <input data-name="positionX" type="text" t-attf-class="{{input_classes}}" style="width: 3ch;" value="25"/>
-                        <span class="flex-grow-0 ml-1 text-white-50">%</span>
+                        <span class="flex-grow-0 ms-1 text-white-50">%</span>
                     </span>
-                    <span class="mr-2 ml-3">Y</span>
+                    <span class="me-2 ms-3">Y</span>
                     <span class="o_custom_gradient_input bg-black-50 px-1 d-flex">
                         <input data-name="positionY" type="text" t-attf-class="{{input_classes}}" style="width: 3ch;" value="25"/>
-                        <span class="flex-grow-0 ml-1 text-white-50">%</span>
+                        <span class="flex-grow-0 ms-1 text-white-50">%</span>
                     </span>
                     </span>
                 </div>
diff --git a/addons/web_editor/views/snippets.xml b/addons/web_editor/views/snippets.xml
index 30c556138cb..57135598a38 100644
--- a/addons/web_editor/views/snippets.xml
+++ b/addons/web_editor/views/snippets.xml
@@ -6,7 +6,7 @@
             <button type="button" data-action="undo" class="btn btn-secondary fa fa-undo" disabled="true"/>
             <button type="button" data-action="redo" class="btn btn-secondary fa fa-repeat" disabled="true"/>
         </div>
-        <form class="ml-auto d-flex">
+        <form class="ms-auto d-flex">
             <!-- Uncomment the following line when the mobile preview will be available. -->
             <!-- <button type="button" class="btn btn-secondary fa fa-mobile" name="mobile" data-action="mobilePreview"/> -->
             <button type="button" class="btn btn-secondary" data-action="cancel" title="Discard record" accesskey="j">Discard</button>
@@ -140,7 +140,7 @@
         <we-row t-if="with_colors or with_images" string="Background" class="o_we_full_row">
             <t t-if="with_colors" t-call="web_editor.snippet_options_background_color_widget"/>
             <t t-if="with_images">
-                <we-button title="Image" class="ml-auto fa fa-fw fa-camera"
+                <we-button title="Image" class="ms-auto fa fa-fw fa-camera"
                            data-name="bg_image_toggle_opt"
                            t-att-data-dependencies="images_dependencies"
                            data-toggle-bg-image="true"
@@ -561,11 +561,11 @@
 
         <we-row string="Transform">
             <we-button class="fa fa-fw fa-crop" data-crop="true" data-no-preview="true" title="Crop Image"/>
-            <we-button class="ml-0 border-left-0" data-reset-crop="" data-no-preview="true" title="Reset crop">
+            <we-button class="ms-0 border-start-0" data-reset-crop="" data-no-preview="true" title="Reset crop">
                 Reset
             </we-button>
             <we-button class="fa fa-fw fa-object-ungroup" data-transform="true" data-no-preview="true" title="Transform the picture"/>
-            <we-button class="ml-0 border-left-0" data-reset-transform="" data-no-preview="true" title="Reset transformation">
+            <we-button class="ms-0 border-start-0" data-reset-transform="" data-no-preview="true" title="Reset transformation">
                 Reset
             </we-button>
         </we-row>
@@ -581,9 +581,9 @@
     <div data-selector="span.fa, i.fa, img" data-exclude="[data-oe-type='image'] > img, [data-oe-xpath]">
         <we-select string="Alignment" data-state-to-first-class="true">
             <we-button data-select-class="" title="Unalign">None</we-button>
-            <we-button data-select-class="float-left" title="Align Left">Left</we-button>
+            <we-button data-select-class="float-start" title="Align Left">Left</we-button>
             <we-button data-select-class="mx-auto d-block" title="Align Center">Center</we-button>
-            <we-button data-select-class="float-right" title="Align Right">Right</we-button>
+            <we-button data-select-class="float-end" title="Align Right">Right</we-button>
         </we-select>
 
         <we-row string="Style">
diff --git a/addons/web_unsplash/static/src/components/media_dialog/image_selector.xml b/addons/web_unsplash/static/src/components/media_dialog/image_selector.xml
index 5bccb1f3292..989d2a03135 100644
--- a/addons/web_unsplash/static/src/components/media_dialog/image_selector.xml
+++ b/addons/web_unsplash/static/src/components/media_dialog/image_selector.xml
@@ -24,7 +24,7 @@
             </span>
         </div>
         <div class="form-group my-md-3">
-            <span class="ml-xl-1">
+            <span class="ms-xl-1">
                 and paste
                 <a href="https://www.odoo.com/documentation/master/applications/websites/website/optimize/unsplash.html#generate-an-unsplash-application-id" target="_blank">Application ID</a>
                 here:
@@ -36,7 +36,7 @@
                 t-att-class="{ 'is-invalid': state.hasAppIdError }"/>
             </span>
         </div>
-        <button type="button" class="btn btn-primary btn-block w-auto ml-2 save_unsplash" t-on-click="() => this.submitCredentials()">Apply</button>
+        <button type="button" class="btn btn-primary btn-block w-auto ms-2 save_unsplash" t-on-click="() => this.submitCredentials()">Apply</button>
     </div>
 </t>
 
diff --git a/addons/website/data/website_data.xml b/addons/website/data/website_data.xml
index 8303fa31477..c1a5d1f8dc8 100644
--- a/addons/website/data/website_data.xml
+++ b/addons/website/data/website_data.xml
@@ -137,11 +137,11 @@
                                 </section>
                             </div>
                             <div class="col-lg-4 mt-4 mt-lg-0">
-                                <ul class="list-unstyled mb-0 pl-2">
+                                <ul class="list-unstyled mb-0 ps-2">
                                     <li>My Company</li>
-                                    <li><i class="fa fa-map-marker fa-fw mr-2"/><span class="o_force_ltr">3575 Fake Buena Vista Avenue</span></li>
-                                    <li><i class="fa fa-phone fa-fw mr-2"/><span class="o_force_ltr">+1 (650) 555-0111</span></li>
-                                    <li><i class="fa fa-1x fa-fw fa-envelope mr-2"/><span>info@yourcompany.example.com</span></li>
+                                    <li><i class="fa fa-map-marker fa-fw me-2"/><span class="o_force_ltr">3575 Fake Buena Vista Avenue</span></li>
+                                    <li><i class="fa fa-phone fa-fw me-2"/><span class="o_force_ltr">+1 (650) 555-0111</span></li>
+                                    <li><i class="fa fa-1x fa-fw fa-envelope me-2"/><span>info@yourcompany.example.com</span></li>
                                 </ul>
                             </div>
                         </div>
@@ -165,7 +165,7 @@
                         <section class="s_text_block pt40 pb40 o_colored_level " data-snippet="s_text_block">
                             <div class="container s_allow_columns">
                                 <div class="row">
-                                    <div class="col-lg-7 col-xl-6 mr-lg-auto">
+                                    <div class="col-lg-7 col-xl-6 me-lg-auto">
                                         <span class="d-block fa fa-4x fa-thumbs-up mx-auto rounded-circle bg-primary"/><br/>
                                         <h1 class="text-center">Thank You!</h1>
                                         <div class="pb16 pt16 s_hr" data-snippet="s_hr" data-name="Separator">
@@ -178,11 +178,11 @@
                                         <p class="text-center">We will get back to you shortly.</p>
                                     </div>
                                     <div class="col-lg-4">
-                                        <ul class="list-unstyled mb-0 pl-2">
+                                        <ul class="list-unstyled mb-0 ps-2">
                                             <li>My Company</li>
-                                            <li><i class="fa fa-map-marker fa-fw mr-2"/><span class="o_force_ltr">3575 Fake Buena Vista Avenue</span></li>
-                                            <li><i class="fa fa-phone fa-fw mr-2"/><span class="o_force_ltr">+1 (650) 555-0111</span></li>
-                                            <li><i class="fa fa-1x fa-fw fa-envelope mr-2"/><span>info@yourcompany.example.com</span></li>
+                                            <li><i class="fa fa-map-marker fa-fw me-2"/><span class="o_force_ltr">3575 Fake Buena Vista Avenue</span></li>
+                                            <li><i class="fa fa-phone fa-fw me-2"/><span class="o_force_ltr">+1 (650) 555-0111</span></li>
+                                            <li><i class="fa fa-1x fa-fw fa-envelope me-2"/><span>info@yourcompany.example.com</span></li>
                                         </ul>
                                     </div>
                                 </div>
@@ -218,7 +218,7 @@
                         </p>
                         <div class="table-responsive">
                             <table class="small table table-bordered text-center">
-                                <thead class="thead-light">
+                                <thead class="table-light">
                                     <tr>
                                         <th scope="col" style="width: 20%">Category of Cookie</th>
                                         <th scope="col" style="width: 50%; min-width: 200px;">Purpose</th>
diff --git a/addons/website/data/website_demo.xml b/addons/website/data/website_demo.xml
index dd1aa41bedc..cf13782877f 100644
--- a/addons/website/data/website_demo.xml
+++ b/addons/website/data/website_demo.xml
@@ -55,7 +55,7 @@
 
                                             <h2 class="mt-4">Dropdown</h2>
                                             <div class="dropdown">
-                                                <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Toggle</button>
+                                                <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Toggle</button>
                                                 <div class="dropdown-menu">
                                                     <div class="dropdown-header">Header</div>
                                                     <a class="dropdown-item" href="#">Action</a>
@@ -68,14 +68,14 @@
                                             <h2 class="mt-4">Navbar</h2>
                                             <nav class="navbar navbar-expand-lg navbar-light bg-light">
                                                 <a class="navbar-brand" href="#">Navbar</a>
-                                                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+                                                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                                                 <span class="navbar-toggler-icon"></span>
                                                 </button>
 
                                                 <div class="collapse navbar-collapse" id="navbarSupportedContent">
-                                                    <ul class="navbar-nav mr-auto">
+                                                    <ul class="navbar-nav me-auto">
                                                         <li class="nav-item active">
-                                                            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+                                                            <a class="nav-link" href="#">Home <span class="visually-hidden">(current)</span></a>
                                                         </li>
                                                         <li class="nav-item">
                                                             <a class="nav-link" href="#">Link</a>
@@ -85,7 +85,7 @@
                                                         </li>
                                                     </ul>
                                                     <form class="form-inline my-2 my-lg-0">
-                                                        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"/>
+                                                        <input class="form-control me-sm-2" type="search" placeholder="Search" aria-label="Search"/>
                                                         <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
                                                     </form>
                                                 </div>
@@ -110,7 +110,7 @@
                                                         <a class="page-link" href="#">1</a>
                                                     </li>
                                                     <li class="page-item active">
-                                                        <a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
+                                                        <a class="page-link" href="#">2 <span class="visually-hidden">(current)</span></a>
                                                     </li>
                                                     <li class="page-item">
                                                         <a class="page-link" href="#">3</a>
@@ -163,42 +163,42 @@
                                     <h1>Utilities &amp; Typography</h1>
                                     <div class="row">
                                         <div class="col-md">
-                                            <div class="row no-gutters">
+                                            <div class="row g-0">
                                                 <t t-foreach="odoo_theme_colors" t-as="color">
                                                     <div t-attf-class="col-auto bg-#{color[0]}">
                                                         <div class="py-1 px-3"><t t-esc="color[1]"/></div>
                                                     </div>
                                                 </t>
                                             </div>
-                                            <div class="row no-gutters mt-2">
+                                            <div class="row g-0 mt-2">
                                                 <t t-foreach="bs_theme_colors" t-as="color">
                                                     <div t-attf-class="col-auto bg-#{color[0]}">
                                                         <div class="py-1 px-3"><t t-esc="color[1]"/></div>
                                                     </div>
                                                 </t>
                                             </div>
-                                            <div class="row no-gutters mt-2">
+                                            <div class="row g-0 mt-2">
                                                 <t t-foreach="bs_gray_colors" t-as="color">
                                                     <div t-attf-class="col-auto bg-#{color[0]}">
                                                         <div class="py-1 px-3"><t t-esc="color[1]"/></div>
                                                     </div>
                                                 </t>
                                             </div>
-                                            <div class="row no-gutters mt-4">
+                                            <div class="row g-0 mt-4">
                                                 <t t-foreach="odoo_theme_colors" t-as="color">
                                                     <div t-attf-class="col-auto text-#{color[0]}">
                                                         <div class="py-1 px-3"><t t-esc="color[1]"/></div>
                                                     </div>
                                                 </t>
                                             </div>
-                                            <div class="row no-gutters mt-2">
+                                            <div class="row g-0 mt-2">
                                                 <t t-foreach="bs_theme_colors" t-as="color">
                                                     <div t-attf-class="col-auto text-#{color[0]}">
                                                         <div class="py-1 px-3"><t t-esc="color[1]"/></div>
                                                     </div>
                                                 </t>
                                             </div>
-                                            <div class="row no-gutters mt-2">
+                                            <div class="row g-0 mt-2">
                                                 <t t-foreach="bs_gray_colors" t-as="color">
                                                     <div t-attf-class="col-auto text-#{color[0]}">
                                                         <div class="py-1 px-3"><t t-esc="color[1]"/></div>
@@ -244,7 +244,7 @@
                                                         <th colspan="2" class="align-middle">Theme Colors</th>
                                                         <td t-foreach="[1, 2, 3, 4, 5]" t-as="i">
                                                             <div class="d-flex">
-                                                                <span t-attf-class="border p-3 mr-1 bg-o-color-#{i}"></span>
+                                                                <span t-attf-class="border p-3 me-1 bg-o-color-#{i}"></span>
                                                                 <div class="flex-grow-1 align-self-center">
                                                                     <h5 class="m-0">o-color-<t t-esc="i"/></h5>
                                                                 </div>
@@ -255,7 +255,7 @@
                                                         <th colspan="2" class="align-middle">BTS Base Colors</th>
                                                         <td t-foreach="['primary', 'secondary', 'light', 'dark']" t-as="i">
                                                             <div class="d-flex">
-                                                                <span t-attf-class="border p-3 mr-1 bg-#{i}"></span>
+                                                                <span t-attf-class="border p-3 me-1 bg-#{i}"></span>
                                                                 <div class="flex-grow-1 align-self-center">
                                                                     <h5 class="m-0" t-esc="i"></h5>
                                                                 </div>
@@ -278,7 +278,7 @@
                                                         <p class="text-muted">Text muted. Lorem <b>ipsum dolor sit amet</b>, consectetur.</p>
                                                         <p class="small">Small text. Lorem <b>ipsum dolor sit amet</b>, consectetur adipiscing elit. <i>Integer posuere erat a ante</i>.</p>
                                                     </div>
-                                                    <div class="col-5 border-left">
+                                                    <div class="col-5 border-start">
                                                         <a href="#" class="mb-3 btn-block btn btn-primary">btn-primary</a>
                                                         <a href="#" class="mb-3 btn-block btn btn-secondary">btn-secondary</a>
                                                         <a href="#" class="mb-3 btn-block btn btn-outline-primary">btn-outline-primary</a>
@@ -329,7 +329,7 @@
                                                             <div class="progress-bar" style="width: 25%;">25%</div>
                                                         </div>
                                                     </div>
-                                                    <div class="col-5 border-left">
+                                                    <div class="col-5 border-start">
                                                         <div t-foreach="['info', 'warning', 'danger', 'success']" t-as="btn">
                                                             <a href="#" t-attf-class="mb-2 btn-block btn btn-#{btn}" t-esc="'btn-' + btn"/>
                                                             <a href="#" t-attf-class="mb-3 btn-block btn btn-outline-#{btn}" t-esc="'btn-outline-' + btn"/>
diff --git a/addons/website/static/src/client_actions/configurator/configurator.scss b/addons/website/static/src/client_actions/configurator/configurator.scss
index 9c206ef3aeb..d131615539c 100644
--- a/addons/website/static/src/client_actions/configurator/configurator.scss
+++ b/addons/website/static/src/client_actions/configurator/configurator.scss
@@ -109,8 +109,8 @@
                     position: absolute;
                     width: 100%;
                     border: none;
-                    border-bottom: 3px solid theme-color(primary);
-                    color: theme-color(primary);
+                    border-bottom: 3px solid map-get($theme-colors, primary);
+                    color: map-get($theme-colors, primary);
                     background-color: inherit;
 
                     &:focus {
@@ -128,7 +128,7 @@
             }
 
             .dropdown {
-                box-shadow: inset 0 -3px 0 theme-color(primary);
+                box-shadow: inset 0 -3px 0 map-get($theme-colors, primary);
 
                 &.o_step_todo .fa-angle-down {
                     transform: translateY(-0.26em);
@@ -180,7 +180,7 @@
 
                         &.o_no_result, &.o_no_result:hover {
                             background-color: transparent !important;
-                            color: gray('600') !important;
+                            color: map-get($grays, '600') !important;
                             cursor: default;
                             padding: $dropdown-item-padding-y*4 $dropdown-item-padding-x;
                             font-style: italic;
@@ -226,14 +226,14 @@
 
             .palette_card {
                 cursor: pointer;
-                box-shadow: 0 0 0 1px gray('200');
+                box-shadow: 0 0 0 1px map-get($grays, '200');
 
                 .color_sample {
                     padding-top: 30%;
                 }
 
                 &:hover, &.selected {
-                    box-shadow: 0 0 0 1px #FFF, 0 0 0 3px theme-color("primary")
+                    box-shadow: 0 0 0 1px #FFF, 0 0 0 3px map-get($theme-colors, "primary")
                 }
             }
 
@@ -253,7 +253,7 @@
 
             .o_configurator_logo_upload {
                 cursor: pointer;
-                @include o-hover-text-color(gray('400'), gray('800'));
+                @include o-hover-text-color(map-get($grays, '400'), map-get($grays, '800'));
             }
 
             .palette_selection_or {
@@ -336,7 +336,7 @@
                 }
 
                 &:hover {
-                    border-color: theme-color(primary)!important;
+                    border-color: map-get($theme-colors, primary)!important;
                     box-shadow: $box-shadow;
 
                     .theme_preview_tip {
diff --git a/addons/website/static/src/client_actions/configurator/configurator.xml b/addons/website/static/src/client_actions/configurator/configurator.xml
index e548b70a602..a9dcdc07d26 100644
--- a/addons/website/static/src/client_actions/configurator/configurator.xml
+++ b/addons/website/static/src/client_actions/configurator/configurator.xml
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="website.Configurator.SkipButton" owl="1">
-        <div class="container-fluid py-2 pb-md-3 text-right pr-lg-5">
+        <div class="container-fluid py-2 pb-md-3 text-end pe-lg-5">
             <button class="btn btn-link" t-on-click="this.props.skip">Skip and start from scratch</button>
         </div>
     </t>
@@ -10,14 +10,14 @@
     <t t-name="website.Configurator.WelcomeScreen" owl="1">
         <div class="o_configurator_screen h-100 d-flex flex-column o_welcome_screen">
             <div class="container-fluid pt-3 pb-2">
-                <img class="ml-lg-5" style="height: 31px; width: 99px;" src="/website/static/src/img/odoo_logo.svg" title="Odoo Logo"/>
+                <img class="ms-lg-5" style="height: 31px; width: 99px;" src="/website/static/src/img/odoo_logo.svg" title="Odoo Logo"/>
             </div>
             <div class="o_configurator_screen_content d-flex h-100">
                 <div class="container align-self-center o_configurator_show">
                     <div class="display-4 mb-2">Ready to build the<br class="d-none d-lg-inline"/>
                     <b>perfect website?</b>
                 </div>
-                <div class="lead font-weight-normal mb-4 text-600">We'll set you up and running in <b>4 steps</b>
+                <div class="lead fw-normal mb-4 text-600">We'll set you up and running in <b>4 steps</b>
                 </div>
                 <button class="o_configurator_show btn btn-primary btn-lg px-4 py-2" t-on-click="goToDescription">Let's do it</button>
             </div>
@@ -29,19 +29,19 @@
 <t t-name="website.Configurator.DescriptionScreen" owl="1">
     <div class="o_configurator_screen h-100 d-flex flex-column o_description_screen">
         <div class="container-fluid pt-3 pb-2">
-            <img class="ml-lg-5" style="height: 31px; width: 99px;" src="/website/static/src/img/odoo_logo.svg" title="Odoo Logo"/>
+            <img class="ms-lg-5" style="height: 31px; width: 99px;" src="/website/static/src/img/odoo_logo.svg" title="Odoo Logo"/>
         </div>
         <div class="o_configurator_screen_content d-flex h-100 flex-grow-1">
             <div class="container align-self-center">
                 <div class="o_configurator_typing_text d-inline d-md-block mb-md-2 mb-lg-4 o_configurator_show">
                     <span>I want </span>
                     <div t-attf-class="dropdown o_configurator_type_dd d-inline-block {{state.selectedType ? 'o_step_completed' : 'o_step_todo show'}}">
-                        <div class="w-100 px-2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                        <div class="w-100 px-2" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                             <a class="d-flex align-items-center">
                                 <i class="text-primary" t-if="state.selectedType">
                                     <t t-esc="state.getSelectedType(state.selectedType).label"/>
                                 </i>
-                                <i class="fa fa-angle-down text-black-50 ml-auto pl-2" role="img"/>
+                                <i class="fa fa-angle-down text-black-50 ms-auto ps-2" role="img"/>
                             </a>
                         </div>
                         <div t-attf-class="dropdown-menu border-0 shadow-lg {{state.selectedType ? 'o_step_completed' : 'o_step_todo show'}}" role="menu">
@@ -52,10 +52,10 @@
                             </t>
                         </div>
                     </div>
-                    <span t-attf-class="mr-2 {{!state.selectedType ? 'o_configurator_hide' : 'o_configurator_show'}}"> for my</span>
+                    <span t-attf-class="me-2 {{!state.selectedType ? 'o_configurator_hide' : 'o_configurator_show'}}"> for my</span>
                 </div>
                 <div t-attf-class="o_configurator_typing_text d-inline d-md-flex align-items-center o_configurator_industry mb-md-2 mb-lg-4 {{!state.selectedType ? 'o_configurator_hide' : 'o_configurator_show'}}">
-                    <label class="o_configurator_industry_wrapper mr-2">
+                    <label class="o_configurator_industry_wrapper me-2">
                         <input t-on-blur="_blurIndustrySelection" t-ref="industrySelection"/>
                     </label>
                     <span> business</span>
@@ -64,12 +64,12 @@
                 <div t-attf-class="o_configurator_typing_text d-inline d-md-block mb-md-2 mb-lg-4 {{!state.selectedIndustry ? 'o_configurator_hide' : 'o_configurator_show'}}">
                     <span>with the main objective to </span>
                     <div t-attf-class="dropdown d-inline-block o_configurator_purpose_dd {{state.selectedPurpose ? 'o_step_completed' : 'o_step_todo'}}">
-                        <div class="w-100 px-2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                        <div class="w-100 px-2" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                             <a class="d-flex align-items-center">
                                 <t t-if="state.selectedPurpose">
                                     <t t-esc="state.getSelectedPurpose(state.selectedPurpose).label"/>
                                 </t>
-                                <i class="fa fa-angle-down text-black-50 ml-auto pl-2" role="img"/>
+                                <i class="fa fa-angle-down text-black-50 ms-auto ps-2" role="img"/>
                             </a>
                         </div>
                         <div class="dropdown-menu border-0 shadow-lg" role="menu">
@@ -90,7 +90,7 @@
 <t t-name="website.Configurator.PaletteSelectionScreen" owl="1">
     <div class="o_configurator_screen h-100 d-flex flex-column o_palette_selection_screen">
         <div class="container-fluid pt-3 pb-2">
-            <img class="ml-lg-5" style="height: 31px; width: 99px;" src="/website/static/src/img/odoo_logo.svg" title="Odoo Logo"/>
+            <img class="ms-lg-5" style="height: 31px; width: 99px;" src="/website/static/src/img/odoo_logo.svg" title="Odoo Logo"/>
         </div>
         <div class="o_configurator_screen_content container palette_selection d-flex flex-grow-1 h-100">
             <div class="o_content_container d-flex flex-row w-100 h-auto align-self-md-center o_configurator_show">
@@ -117,7 +117,7 @@
                                 <div class="color_sample w-100" t-attf-style="background-color: {{state.recommendedPalette.color2}}"/>
                             </div>
                             <button class="btn btn-primary text-nowrap mt-3 d-block mx-auto" t-on-click="() => this.selectPalette('recommendedPalette')">
-                                Let's go!<i class="fa fa-angle-right text-white-50 pl-2" role="img"/>
+                                Let's go!<i class="fa fa-angle-right text-white-50 ps-2" role="img"/>
                             </button>
                         </div>
                     </div>
@@ -125,7 +125,7 @@
                 <div class="o_palettes_separator position-relative d-flex justify-content-center order-lg-2 w-0 py-3 py-lg-0 px-lg-5 mb-4 mb-lg-0">
                     <div class="border-top w-100"></div>
                     <b class="palette_selection_or bg-white text-muted w-lg-100 text-center px-3 py-lg-3">OR</b>
-                    <div class="border-left d-none d-lg-inline h-100 mx-auto w-0"></div>
+                    <div class="border-start d-none d-lg-inline h-100 mx-auto w-0"></div>
                 </div>
                 <div class="o_palettes_container w-auto flex-grow-1 o_configurator_show_fast">
                     <div class="h4 text-center">
@@ -152,7 +152,7 @@
 <t t-name="website.Configurator.FeatureSelection" owl="1">
     <div class="o_configurator_screen h-100 d-flex flex-column o_feature_selection_screen">
         <div class="container-fluid pt-3 pb-2">
-            <img class="ml-lg-5" style="height: 31px; width: 99px;" src="/website/static/src/img/odoo_logo.svg" title="Odoo Logo"/>
+            <img class="ms-lg-5" style="height: 31px; width: 99px;" src="/website/static/src/img/odoo_logo.svg" title="Odoo Logo"/>
         </div>
         <div class="o_configurator_screen_content overflow-hidden container d-flex flex-grow-1 align-items-center">
             <div class="m-auto d-flex mh-100 flex-column">
@@ -172,7 +172,7 @@
                                             <i t-attf-class="o_configurator_feature_status fa {{feature.selected ? 'fa-check-circle text-success' : 'fa-circle-o text-300'}}" />
                                         </t>
                                         <h5 t-attf-class="card-title d-flex align-items-center {{isInstalled ? 'text-muted' : ''}}">
-                                            <i t-attf-class="mr-2 small fa {{feature.icon}} {{isInstalled ? 'text-muted' : (feature.type == 'page' ? 'text-info' : 'text-warning')}}"/>
+                                            <i t-attf-class="me-2 small fa {{feature.icon}} {{isInstalled ? 'text-muted' : (feature.type == 'page' ? 'text-info' : 'text-warning')}}"/>
                                             <t t-esc="feature.name"/>
                                         </h5>
                                         <p class="card-text small text-muted" t-esc="feature.description"/>
@@ -182,8 +182,8 @@
                         </t>
                     </div>
                 </div>
-                <div class="text-right border-top pt-2">
-                    <button class="btn btn-primary btn-lg ml-3" t-on-click="buildWebsite">Build my website</button>
+                <div class="text-end border-top pt-2">
+                    <button class="btn btn-primary btn-lg ms-3" t-on-click="buildWebsite">Build my website</button>
                 </div>
             </div>
         </div>
@@ -194,7 +194,7 @@
 <t t-name="website.Configurator.ThemeSelectionScreen" owl="1">
     <div class="o_configurator_screen h-100 d-flex flex-column o_theme_selection_screen">
         <div class="container-fluid pt-3 pb-2">
-            <img class="ml-lg-5" style="height: 31px; width: 99px;" src="/website/static/src/img/odoo_logo.svg" title="Odoo Logo"/>
+            <img class="ms-lg-5" style="height: 31px; width: 99px;" src="/website/static/src/img/odoo_logo.svg" title="Odoo Logo"/>
         </div>
         <div class="o_configurator_screen_content d-flex flex-column flex-grow-1 align-items-center">
             <div class="m-auto w-100 w-md-75 w-xl-100">
diff --git a/addons/website/static/src/components/dialog/dialog.js b/addons/website/static/src/components/dialog/dialog.js
index c119fe15602..c7882550024 100644
--- a/addons/website/static/src/components/dialog/dialog.js
+++ b/addons/website/static/src/components/dialog/dialog.js
@@ -102,6 +102,6 @@ AddPageDialog.template = xml`
             <input type="text" t-model="state.name" class="form-control" required="required" t-ref="autofocus"/>
         </div>
     </div>
-    <Switch extraClasses="'offset-md-3 col-md-9 text-left'" label="switchLabel" value="state.addMenu" onChange="(value) => this.onChangeAddMenu(value)"/>
+    <Switch extraClasses="'offset-md-3 col-md-9 text-start'" label="switchLabel" value="state.addMenu" onChange="(value) => this.onChangeAddMenu(value)"/>
 </WebsiteDialog>
 `;
diff --git a/addons/website/static/src/components/dialog/edit_menu.scss b/addons/website/static/src/components/dialog/edit_menu.scss
index 21693e24246..3af9717484f 100644
--- a/addons/website/static/src/components/dialog/edit_menu.scss
+++ b/addons/website/static/src/components/dialog/edit_menu.scss
@@ -10,7 +10,7 @@
             margin: 0;
         }
     }
-    .font-weight-bold {
+    .fw-bold {
         font-weight: 700 !important;
     }
 }
diff --git a/addons/website/static/src/components/dialog/edit_menu.xml b/addons/website/static/src/components/dialog/edit_menu.xml
index dbb50971908..0aee5a0f17e 100644
--- a/addons/website/static/src/components/dialog/edit_menu.xml
+++ b/addons/website/static/src/components/dialog/edit_menu.xml
@@ -31,8 +31,8 @@
                 <span class="js_menu_label o_text_overflow flex-grow-1">
                     <t t-esc="props.menu.fields['name']"/>
                 </span>
-                <span t-if="props.menu.fields['is_mega_menu']" class="badge badge-primary">Mega Menu</span>
-                <i t-if="props.menu.is_homepage" class="fa fa-home ml-3" role="img" aria-label="Home" title="Home"/>
+                <span t-if="props.menu.fields['is_mega_menu']" class="badge text-bg-primary">Mega Menu</span>
+                <i t-if="props.menu.is_homepage" class="fa fa-home ms-3" role="img" aria-label="Home" title="Home"/>
             </span>
             <span class="input-group-append">
                 <button t-on-click="edit" type="button" class="btn btn-primary js_edit_menu fa fa-pencil-square-o" aria-label="Edit Menu Item" title="Edit Menu Item"/>
@@ -55,7 +55,7 @@
             </t>
         </ul>
         <div class="mt32">
-            <small class="float-right text-muted">
+            <small class="float-end text-muted">
                 Drag to the right to get a submenu
             </small>
             <a href="#" t-on-click="() => this.addMenu(false)">
diff --git a/addons/website/static/src/components/dialog/page_properties.js b/addons/website/static/src/components/dialog/page_properties.js
index f8eeeb358d0..eb4844f2940 100644
--- a/addons/website/static/src/components/dialog/page_properties.js
+++ b/addons/website/static/src/components/dialog/page_properties.js
@@ -230,7 +230,7 @@ export class PagePropertiesDialogWrapper extends Component {
         return [{
             text: this.env._t("Duplicate Page"),
             icon: 'fa-clone',
-            classes: 'btn-link ml-auto',
+            classes: 'btn-link ms-auto',
             click: function () {
                 wrapper.dialogService.add(DuplicatePageDialog, {
                     pageId: wrapper.pageId,
diff --git a/addons/website/static/src/components/dialog/page_properties.xml b/addons/website/static/src/components/dialog/page_properties.xml
index 903f2ac7b50..84c03d0d6af 100644
--- a/addons/website/static/src/components/dialog/page_properties.xml
+++ b/addons/website/static/src/components/dialog/page_properties.xml
@@ -23,7 +23,7 @@
         <t t-else="">
             <p class="text-warning">We found these ones:</p>
             <div t-foreach="dependencies" t-as="dependency" t-key="dependency" class="ml16 mb16">
-                <a class="collapsed fa fa-caret-right" data-toggle="collapse"
+                <a class="collapsed fa fa-caret-right" data-bs-toggle="collapse"
                 t-attf-aria-controls="collapseDependencies{{ dependency_index }}"
                 t-attf-href="#collapseDependencies{{ dependency_index }}"
                 aria-expanded="false">
diff --git a/addons/website/static/src/components/dialog/seo.scss b/addons/website/static/src/components/dialog/seo.scss
index 7d8234ebb77..1817e8f4f4a 100644
--- a/addons/website/static/src/components/dialog/seo.scss
+++ b/addons/website/static/src/components/dialog/seo.scss
@@ -13,7 +13,7 @@
             position: relative;
             transition: border-color 200ms;
             display: inline-block;
-            border: 2px solid gray('400');
+            border: 2px solid map-get($grays, '400');
 
             > img {
                 width: 70px;
@@ -50,7 +50,7 @@
             .o-custom-label {
                 @include o-position-absolute($bottom: 0px);
                 cursor: pointer;
-                background: rgba(gray('800'), 0.6);
+                background: rgba(map-get($grays, '800'), 0.6);
                 font-size: 12px;
             }
         }
@@ -60,9 +60,9 @@
             transition: 200ms;
             display: inline-block;
             padding: 23px 27px;
-            border: 3px dashed lighten(gray('700'), 30%);
+            border: 3px dashed lighten(map-get($grays, '700'), 30%);
             vertical-align: top;
-            color: lighten(gray('600'), 30%);
+            color: lighten(map-get($grays, '600'), 30%);
 
             &:hover {
                 border-color: $o-brand-primary;
diff --git a/addons/website/static/src/components/dialog/seo.xml b/addons/website/static/src/components/dialog/seo.xml
index 3e3dc5eb246..e16ac6089c3 100644
--- a/addons/website/static/src/components/dialog/seo.xml
+++ b/addons/website/static/src/components/dialog/seo.xml
@@ -49,7 +49,7 @@
                 <span t-if="!state.suggestions.length">Loading...</span>
                 <t t-foreach="state.suggestions" t-as="suggestion" t-key="suggestion">
                     <li class="list-inline-item" t-on-click="() => props.addKeyword(suggestion)">
-                        <span class="o_seo_suggestion badge badge-info" t-att-title="'Add ' + suggestion" t-esc="suggestion"/>
+                        <span class="o_seo_suggestion badge text-bg-info" t-att-title="'Add ' + suggestion" t-esc="suggestion"/>
                     </li>
                 </t>
             </ul>
@@ -67,7 +67,7 @@
             <div class="input-group">
                 <input t-model="state.keyword" type="text" class="form-control" t-att-placeholder="isFull ? 'Remove a keyword first' : 'Keyword'" t-att-readonly="isFull" maxlength="30" t-on-keyup="onKeyup"/>
                 <span title="The language of the keyword and related keywords." class="input-group-append">
-                    <select t-model="state.language" class="btn btn-outline-primary pr-5 form-control">
+                    <select t-model="state.language" class="btn btn-outline-primary pe-5 form-select">
                         <t t-foreach="languages" t-as="lang" t-key="lang[0]">
                             <option t-att-value="lang[0]"><t t-esc="lang[2]"/></option>
                         </t>
diff --git a/addons/website/static/src/components/fields/fields.xml b/addons/website/static/src/components/fields/fields.xml
index e2df315f39e..98675d546f5 100644
--- a/addons/website/static/src/components/fields/fields.xml
+++ b/addons/website/static/src/components/fields/fields.xml
@@ -4,16 +4,16 @@
 <t t-name="website.FieldPageUrl" owl="1">
     <div>
         <div class="d-flex">
-            <div class="input-group-text rounded-left text-lowercase border-0" t-esc="serverUrl.length > 30 ? serverUrl.slice(0,14) + '..' + serverUrl.slice(-14) : serverUrl"/>
+            <div class="input-group-text rounded-start text-lowercase border-0" t-esc="serverUrl.length > 30 ? serverUrl.slice(0,14) + '..' + serverUrl.slice(-14) : serverUrl"/>
             <input t-model="state.url" type="text" class="o_input"/>
         </div>
         <div t-if="enableRedirect">
             <div class="d-flex mt-4">
-                <Switch extraClasses="'mr-auto'" label="'Redirect Old URL'" value="state.redirect_old_url" onChange="(value) => this.onChangeRedirectOldUrl(value)"/>
+                <Switch extraClasses="'me-auto'" label="'Redirect Old URL'" value="state.redirect_old_url" onChange="(value) => this.onChangeRedirectOldUrl(value)"/>
                 <PageDependencies pageId="resId" mode="'popover'"/>
             </div>
             <div t-if="state.redirect_old_url" class="d-flex mt-4">
-                <label class="my-0 mr-4 font-weight-bold" for="redirect_type">Type</label>
+                <label class="my-0 me-4 fw-bold" for="redirect_type">Type</label>
                 <select class="o_input w-50" id="redirect_type" t-model="state.redirect_type">
                     <option value="301">301 Moved permanently</option>
                     <option value="302">302 Moved temporarily</option>
diff --git a/addons/website/static/src/js/backend/view_hierarchy.js b/addons/website/static/src/js/backend/view_hierarchy.js
index f191a2d6706..84fe168415c 100644
--- a/addons/website/static/src/js/backend/view_hierarchy.js
+++ b/addons/website/static/src/js/backend/view_hierarchy.js
@@ -239,7 +239,7 @@ const Renderer = qweb.Renderer.extend({
                 }
                 const el = matches[this.cptFound];
                 $(el).children('p').addClass(foundClasses).append($('<span/>', {
-                    class: 'o_tab_hint text-info ml-auto small font-italic pr-2',
+                    class: 'o_tab_hint text-info ms-auto small fst-italic pe-2',
                     text: _.str.sprintf(_t("Press %s for next %s"), "<Tab>", `[${this.cptFound + 1}/${matches.length}]`),
                 }));
                 $('.o_content').scrollTo(el, 0, {offset: -200});
diff --git a/addons/website/static/src/js/content/menu.js b/addons/website/static/src/js/content/menu.js
index 404a5710a5d..1873e46cf48 100644
--- a/addons/website/static/src/js/content/menu.js
+++ b/addons/website/static/src/js/content/menu.js
@@ -440,7 +440,7 @@ publicWidget.registry.menuDirection = publicWidget.Widget.extend({
      * @override
      */
     start: function () {
-        this.defaultAlignment = this.$el.is('.ml-auto, .ml-auto ~ *') ? 'right' : 'left';
+        this.defaultAlignment = this.$el.is('.ms-auto, .ms-auto ~ *') ? 'right' : 'left';
         return this._super.apply(this, arguments);
     },
 
@@ -482,7 +482,7 @@ publicWidget.registry.menuDirection = publicWidget.Widget.extend({
         var menuWidth = $menu.outerWidth();
         var pageWidth = $('#wrapwrap').outerWidth();
 
-        $menu.removeClass('dropdown-menu-left dropdown-menu-right');
+        $menu.removeClass('dropdown-menu-start dropdown-menu-end');
 
         var alignment = this.defaultAlignment;
         if ($li.nextAll(':visible').length === 0) {
diff --git a/addons/website/static/src/js/content/redirect.js b/addons/website/static/src/js/content/redirect.js
index 0e78c8b3fef..7ef56e832c6 100644
--- a/addons/website/static/src/js/content/redirect.js
+++ b/addons/website/static/src/js/content/redirect.js
@@ -67,7 +67,7 @@ document.addEventListener('DOMContentLoaded', () => {
             backendEditButtonEl.title = _t("Edit this content");
             backendEditButtonEl.classList.add('o_frontend_to_backend_edit_btn', 'px-3', ...frontendToBackendBtnClasses);
             const backendEditButtonIconEl = document.createElement('i');
-            backendEditButtonIconEl.classList.add('fa', 'fa-pencil', 'mr-1');
+            backendEditButtonIconEl.classList.add('fa', 'fa-pencil', 'me-1');
             backendEditButtonEl.prepend(backendEditButtonIconEl);
             frontendToBackendNavEl.appendChild(backendEditButtonEl);
 
diff --git a/addons/website/static/src/js/editor/snippets.editor.js b/addons/website/static/src/js/editor/snippets.editor.js
index 70fd1ba517b..3bbbe6c1826 100644
--- a/addons/website/static/src/js/editor/snippets.editor.js
+++ b/addons/website/static/src/js/editor/snippets.editor.js
@@ -128,7 +128,7 @@ const wSnippetMenu = weSnippetEditor.SnippetsMenu.extend({
                                     _t("Invalid API Key. The following error was returned by Google:")
                                 ).append($('<i/>', {
                                     text: text,
-                                    class: 'ml-1',
+                                    class: 'ms-1',
                                 }));
                             }
                         } catch (_e) {
diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index 9f303cc6972..78759aee1ca 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -60,7 +60,7 @@ const UrlPickerUserValueWidget = InputUserValueWidget.extend({
         linkButton.appendChild(icon);
         this.containerEl.appendChild(linkButton);
         this.el.classList.add('o_we_large');
-        this.inputEl.classList.add('text-left');
+        this.inputEl.classList.add('text-start');
         const options = {
             position: {
                 collision: 'flip fit',
@@ -1585,7 +1585,7 @@ options.registry.Carousel = options.Class.extend({
         const id = 'myCarousel' + Date.now();
         this.$target.attr('id', id);
         this.$target.find('[data-bs-target]').attr('data-bs-target', '#' + id);
-        _.each(this.$target.find('[data-slide], [data-slide-to]'), function (el) {
+        _.each(this.$target.find('[data-bs-slide], [data-bs-slide-to]'), function (el) {
             var $el = $(el);
             if ($el.attr('data-bs-target')) {
                 $el.attr('data-bs-target', '#' + id);
@@ -1605,7 +1605,7 @@ options.registry.Carousel = options.Class.extend({
         const $active = $items.filter('.active');
         this.$indicators.append($('<li>', {
             'data-bs-target': '#' + this.$target.attr('id'),
-            'data-slide-to': $items.length,
+            'data-bs-slide-to': $items.length,
         }));
         this.$indicators.append(' ');
         // Need to remove editor data from the clone so it gets its own.
@@ -1923,7 +1923,7 @@ options.registry.collapse = options.Class.extend({
         };
 
         const tablistId = setUniqueId($tablist, 'myCollapse');
-        $panel.attr('data-parent', '#' + tablistId);
+        $panel.attr('data-bs-parent', '#' + tablistId);
         $panel.data('bs-parent', '#' + tablistId);
 
         const panelId = setUniqueId($panel, 'myCollapseTab');
@@ -2381,7 +2381,7 @@ options.registry.anchor = options.Class.extend({
         if (this.$target.attr('id')) {
             buttons.push({
                 text: _t("Remove"),
-                classes: 'btn-link ml-auto',
+                classes: 'btn-link ms-auto',
                 icon: 'fa-trash',
                 close: true,
                 click: function () {
diff --git a/addons/website/static/src/js/theme_preview_kanban.js b/addons/website/static/src/js/theme_preview_kanban.js
index 951335ed9d9..0244b8640d6 100644
--- a/addons/website/static/src/js/theme_preview_kanban.js
+++ b/addons/website/static/src/js/theme_preview_kanban.js
@@ -20,7 +20,7 @@ var ThemePreviewKanbanController = KanbanController.extend(ThemePreviewControlle
 
         // update breacrumb
         const websiteLink = Object.assign(document.createElement('a'), {
-            className: 'btn btn-secondary ml-3 text-black-75',
+            className: 'btn btn-secondary ms-3 text-black-75',
             href: '/',
             innerHTML: '<i class="fa fa-close"></i>',
         });
diff --git a/addons/website/static/src/js/utils.js b/addons/website/static/src/js/utils.js
index 7344d4599d9..ed9e9c52691 100644
--- a/addons/website/static/src/js/utils.js
+++ b/addons/website/static/src/js/utils.js
@@ -57,7 +57,7 @@ function autocompleteWithPages(self, $input, options) {
             });
         },
         _renderSeparator: function (ul, item) {
-            return $("<li class='ui-autocomplete-category font-weight-bold text-capitalize p-2'>")
+            return $("<li class='ui-autocomplete-category fw-bold text-capitalize p-2'>")
                    .append(`<div>${item.separator}</div>`)
                    .appendTo(ul);
         },
diff --git a/addons/website/static/src/js/widgets/link_popover_widget.js b/addons/website/static/src/js/widgets/link_popover_widget.js
index 4834d1ec4fe..1eef85dcf39 100644
--- a/addons/website/static/src/js/widgets/link_popover_widget.js
+++ b/addons/website/static/src/js/widgets/link_popover_widget.js
@@ -32,8 +32,8 @@ const NavbarLinkPopoverWidget = weWidgets.LinkPopoverWidget.extend({
     start() {
         // remove link has no sense on navbar menu links, instead show edit menu
         const $anchor = $('<a/>', {
-            href: '#', class: 'ml-2 js_edit_menu', title: _t('Edit Menu'),
-            'data-placement': 'top', 'data-toggle': 'tooltip',
+            href: '#', class: 'ms-2 js_edit_menu', title: _t('Edit Menu'),
+            'data-bs-placement': 'top', 'data-bs-toggle': 'tooltip',
         }).append($('<i/>', {class: 'fa fa-sitemap'}));
         this.$('.o_we_remove_link').replaceWith($anchor);
         return this._super(...arguments);
diff --git a/addons/website/static/src/scss/compatibility/bs3_for_12_0.scss b/addons/website/static/src/scss/compatibility/bs3_for_12_0.scss
index e335c0eb33c..3078313656a 100644
--- a/addons/website/static/src/scss/compatibility/bs3_for_12_0.scss
+++ b/addons/website/static/src/scss/compatibility/bs3_for_12_0.scss
@@ -12,8 +12,8 @@ $-compat-gray-map: (
 ) !default;
 @each $old, $new in $-compat-gray-map {
     @if not map-has-key($grays, $old) {
-        @include bg-variant(".bg-#{$old}", gray($new));
-        @include text-emphasis-variant(".text-#{$old}", gray($new));
+        @include bg-variant(".bg-#{$old}", map-get($grays, $new));
+        @include text-emphasis-variant(".text-#{$old}", map-get($grays, $new));
     }
 }
 
@@ -36,7 +36,7 @@ $-compat-gray-map: (
     }
 }
 .label-default {
-    @include badge-variant(theme-color('secondary'));
+    @include badge-variant(map-get($theme-colors, 'secondary'));
 }
 
 // Adapt center-block
@@ -202,7 +202,7 @@ $-compat-breakpoints: (
 
 // Adapt buttons
 .btn-default {
-    @include button-variant(theme-color('secondary'), theme-color('secondary'));
+    @include button-variant(map-get($theme-colors, 'secondary'), map-get($theme-colors, 'secondary'));
 }
 .btn-xs {
     @extend .btn-sm;
diff --git a/addons/website/static/src/scss/user_custom_rules.scss b/addons/website/static/src/scss/user_custom_rules.scss
index 181c4c171f8..420fd6bf548 100644
--- a/addons/website/static/src/scss/user_custom_rules.scss
+++ b/addons/website/static/src/scss/user_custom_rules.scss
@@ -3,6 +3,6 @@
 // this will separate your footer with a dotted border using your primary color.
 //
 // footer {
-//     border-top: 5px dotted theme-color('primary');
+//     border-top: 5px dotted map-get($theme-colors, 'primary');
 // }
 //
diff --git a/addons/website/static/src/scss/website.backend.scss b/addons/website/static/src/scss/website.backend.scss
index 46c45fc4cf6..704d9201090 100644
--- a/addons/website/static/src/scss/website.backend.scss
+++ b/addons/website/static/src/scss/website.backend.scss
@@ -166,7 +166,7 @@
                 position: relative;
                 float: right;
                 right: 10px;
-                border: 1px solid gray('200');
+                border: 1px solid map-get($grays, '200');
                 font-weight: 300;
                 white-space: nowrap;
                 padding: .5em 1.5em;
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index 2a5064e1ae0..1164738b2a9 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -267,19 +267,19 @@ $-header-nav-link-height: $nav-link-height;
 }
 
 h2, h3, h4, h5, h6 {
-    color: color('o-cc1-h2');
+    color: map-get($colors, 'o-cc1-h2');
 }
 h3, h4, h5, h6 {
-    color: color('o-cc1-h3');
+    color: map-get($colors, 'o-cc1-h3');
 }
 h4, h5, h6 {
-    color: color('o-cc1-h4');
+    color: map-get($colors, 'o-cc1-h4');
 }
 h5, h6 {
-    color: color('o-cc1-h5');
+    color: map-get($colors, 'o-cc1-h5');
 }
 h6 {
-    color: color('o-cc1-h6');
+    color: map-get($colors, 'o-cc1-h6');
 }
 .btn {
     @if ($o-theme-buttons-font != $o-theme-font) {
@@ -308,11 +308,13 @@ font[class*='bg-'] {
         vertical-align: middle;
         text-align: center;
         // fa-1x is not ouput
-        @include size($size);
+        width: $size;
+        height: $size;
         line-height: $size;
         @for $i from 2 through 5 {
             &.fa-#{$i}x {
-                @include size($size + $i);
+                width: $size + $i;
+                height: $size + $i;
                 line-height: $size + $i;
             }
         }
@@ -347,17 +349,17 @@ font[class*='bg-'] {
         border: 0;
         letter-spacing: 0.05em;
         text-transform: uppercase;
-        @include button-size(0.75rem, 1.5rem, ($font-size-base * .75), $btn-line-height, 0);
-        &.btn-lg { @include button-size(1rem, 2rem, ($font-size-lg * .75), $btn-line-height-lg, 0); }
-        &.btn-sm { @include button-size(.5rem, 1rem, ($font-size-sm * .75), $btn-line-height-sm, 0); }
-        &.btn-xs { @include button-size(.25rem, .5rem, ($font-size-base * .5), $btn-line-height-sm, 0); }
+        @include button-size(0.75rem, 1.5rem, ($font-size-base * .75), 0);
+        &.btn-lg { @include button-size(1rem, 2rem, ($font-size-lg * .75), 0); }
+        &.btn-sm { @include button-size(.5rem, 1rem, ($font-size-sm * .75), 0); }
+        &.btn-xs { @include button-size(.25rem, .5rem, ($font-size-base * .5), 0); }
     }
     &.rounded-circle {
         border-radius: 100px !important;
-        @include button-size(0.45rem, 1.35rem, $font-size-base, $btn-line-height, 30px);
-        &.btn-lg { @include button-size(.6rem, 1.8rem, $font-size-lg, $btn-line-height-lg, 30px); }
-        &.btn-sm { @include button-size(.3rem, .9rem, $font-size-sm, $btn-line-height-sm, 30px); }
-        &.btn-xs { @include button-size(.15rem, .45rem, ($font-size-base * .75), $btn-line-height-sm, 30px); }
+        @include button-size(0.45rem, 1.35rem, $font-size-base, 30px);
+        &.btn-lg { @include button-size(.6rem, 1.8rem, $font-size-lg, 30px); }
+        &.btn-sm { @include button-size(.3rem, .9rem, $font-size-sm, 30px); }
+        &.btn-xs { @include button-size(.15rem, .45rem, ($font-size-base * .75), 30px); }
     }
 }
 
@@ -504,7 +506,8 @@ table.table_desc tr td {
     .carousel-control-next { justify-content: flex-end; }
     .carousel-control-prev-icon,
     .carousel-control-next-icon {
-        @include size(auto);
+        width: auto;
+        height: auto;
         background-image: none;
         color: $body-color;
         &:before {
@@ -563,13 +566,15 @@ table.table_desc tr td {
         .carousel-control-next-icon:before { content: "\f0da"; }
         .carousel-control-prev-icon:before,
         .carousel-control-next-icon:before {
-            @include size(2rem, 6rem);
+            width: 2rem;
+            height: 6rem;
             line-height: 6rem;
             font-size: 1.5rem;
         }
         // Indicators
         .carousel-indicators li {
-            @include size(3rem, 1rem);
+            width: 3rem;
+            height: 1rem;
         }
     }
 
@@ -587,14 +592,16 @@ table.table_desc tr td {
         .carousel-control-next-icon:before { content: "\f061"; }
         .carousel-control-prev-icon:before,
         .carousel-control-next-icon:before {
-            @include size(4rem);
+            width: 4rem;
+            height: 4rem;
             line-height: 4rem;
             border-radius: 50%;
             font-size: 1.25rem;
         }
         // Indicators
         .carousel-indicators li {
-            @include size(1rem);
+            width: 1rem;
+            height: 1rem;
             border-radius: 50%;
         }
     }
@@ -618,13 +625,15 @@ table.table_desc tr td {
         .carousel-control-next-icon:before { content: "\f105"; }
         .carousel-control-prev-icon:before,
         .carousel-control-next-icon:before {
-            @include size(2rem);
+            width: 2rem;
+            height: 2rem;
             line-height: 2rem;
             font-size: 1.25rem;
         }
         // Indicators
         .carousel-indicators li {
-            @include size(1rem);
+            width: 1rem;
+            height: 1rem;
             &:hover:not(.active) {
                 background-color: rgba(255,255,255,.8);
             }
@@ -786,10 +795,10 @@ $-transition-duration: 200ms;
 .navbar .o_extra_menu_items > .show {
     > li {
         + li {
-            border-top: 1px solid gray('200');
+            border-top: 1px solid map-get($grays, '200');
         }
         > a.dropdown-toggle {
-            background-color: gray('200');
+            background-color: map-get($grays, '200');
             color: inherit; // Useful when the toggle is active
             pointer-events: none; // hack to prevent clicking on it because dropdown always opened
         }
@@ -1310,7 +1319,7 @@ header {
     width: 1em;
     height: 1em;
     margin-right: 0.2em;
-    border-radius: $rounded-pill;
+    border-radius: $border-radius-pill;
 }
 a.js_change_lang:hover, a.o_add_language:hover {
     text-decoration: none;
@@ -1359,7 +1368,7 @@ span.list-inline-item.o_add_language:last-child {
     }
     .figure-caption {
         @include o-position-absolute(auto, 0, 0, 0);
-        @include o-bg-color(rgba(theme-color('dark'), $o-theme-figcaption-opacity));
+        @include o-bg-color(rgba(map-get($theme-colors, 'dark'), $o-theme-figcaption-opacity));
         padding: $tooltip-padding-y $tooltip-padding-x;
         font-weight: $font-weight-bold;
         a {
@@ -1379,7 +1388,7 @@ span.list-inline-item.o_add_language:last-child {
 }
 
 // TODO: Will be handled properly in master/saas-12.2, temp fix for website_event.registration_attendee_details
-.modal-footer > .float-left {
+.modal-footer > .float-start {
     margin-right: auto;
 }
 
@@ -1422,7 +1431,7 @@ span.list-inline-item.o_add_language:last-child {
     }
     7%, 21% {
         transform: scale(1.3);
-        background-color: rgba(theme-color('primary'), 0.8);
+        background-color: rgba(map-get($theme-colors, 'primary'), 0.8);
     }
 }
 
diff --git a/addons/website/static/src/snippets/s_blockquote/000.scss b/addons/website/static/src/snippets/s_blockquote/000.scss
index a41d1f278c6..929af779b40 100644
--- a/addons/website/static/src/snippets/s_blockquote/000.scss
+++ b/addons/website/static/src/snippets/s_blockquote/000.scss
@@ -14,7 +14,7 @@
             float: left;
             border-top-right-radius: 0 !important;
             border-bottom-right-radius: 0 !important;
-            &.float-right {
+            &.float-end {
                 border-top-left-radius: 0 !important;
                 border-bottom-left-radius: 0 !important;
             }
@@ -64,7 +64,7 @@
         border-color: o-color('secondary');
         .s_blockquote_content {
             padding: $spacer;
-            @include border-right-radius($border-radius);
+            @include border-end-radius($border-radius);
             p:last-of-type {
                 margin-bottom: 0;
             }
diff --git a/addons/website/static/src/snippets/s_countdown/000.js b/addons/website/static/src/snippets/s_countdown/000.js
index 349b89daecb..e6b3d5560ae 100644
--- a/addons/website/static/src/snippets/s_countdown/000.js
+++ b/addons/website/static/src/snippets/s_countdown/000.js
@@ -192,7 +192,7 @@ const CountdownWidget = publicWidget.Widget.extend({
                 });
                 this.$textWrapper.text(_t("Countdown ends in"));
                 this.$textWrapper.append($('<span/>').attr({
-                    class: 's_countdown_text ml-1',
+                    class: 's_countdown_text ms-1',
                 }));
                 this.$textWrapper.appendTo(this.$wrapper);
             }
diff --git a/addons/website/static/src/snippets/s_dynamic_snippet_carousel/000.scss b/addons/website/static/src/snippets/s_dynamic_snippet_carousel/000.scss
index 0230074e9ef..16b2c2ba523 100644
--- a/addons/website/static/src/snippets/s_dynamic_snippet_carousel/000.scss
+++ b/addons/website/static/src/snippets/s_dynamic_snippet_carousel/000.scss
@@ -4,7 +4,7 @@
     width: 4rem;
 
     > span.fa {
-      color: gray('700');
+      color: map-get($grays, '700');
       background: radial-gradient($white 50%, transparent 50%);
     }
   }
diff --git a/addons/website/static/src/snippets/s_dynamic_snippet_carousel/000.xml b/addons/website/static/src/snippets/s_dynamic_snippet_carousel/000.xml
index d1c30ca51c2..a54ee40260e 100644
--- a/addons/website/static/src/snippets/s_dynamic_snippet_carousel/000.xml
+++ b/addons/website/static/src/snippets/s_dynamic_snippet_carousel/000.xml
@@ -23,13 +23,13 @@
             </div>
             <!-- Controls -->
             <t t-if='slideIndexGenerator.length > 1'>
-                <a t-attf-href="##{uniqueId}" class="carousel-control-prev" data-slide="prev" role="button" aria-label="Previous" title="Previous">
+                <a t-attf-href="##{uniqueId}" class="carousel-control-prev" data-bs-slide="prev" role="button" aria-label="Previous" title="Previous">
                     <span class="fa fa-chevron-circle-left fa-2x"/>
-                    <span class="sr-only">Previous</span>
+                    <span class="visually-hidden">Previous</span>
                 </a>
-                <a t-attf-href="##{uniqueId}" class="carousel-control-next" data-slide="next" role="button" aria-label="Next" title="Next">
+                <a t-attf-href="##{uniqueId}" class="carousel-control-next" data-bs-slide="next" role="button" aria-label="Next" title="Next">
                     <span class="fa fa-chevron-circle-right fa-2x"/>
-                    <span class="sr-only">Next</span>
+                    <span class="visually-hidden">Next</span>
                 </a>
             </t>
         </div>
diff --git a/addons/website/static/src/snippets/s_google_map/000.scss b/addons/website/static/src/snippets/s_google_map/000.scss
index 85c091a009d..2cd6d360c24 100644
--- a/addons/website/static/src/snippets/s_google_map/000.scss
+++ b/addons/website/static/src/snippets/s_google_map/000.scss
@@ -1,7 +1,7 @@
 
-$s-google-map-desc-bg: theme-color('primary') !default;
+$s-google-map-desc-bg: map-get($theme-colors, 'primary') !default;
 $s-google-map-desc-alpha: 0.80 !default;
-$s-google-map-desc-hover-bg: theme-color('primary') !default;
+$s-google-map-desc-hover-bg: map-get($theme-colors, 'primary') !default;
 $s-google-map-desc-hover-alpha: 0.55 !default;
 
 .s_google_map {
diff --git a/addons/website/static/src/snippets/s_image_gallery/000.js b/addons/website/static/src/snippets/s_image_gallery/000.js
index 9bd0f8e39fd..eff0a67371a 100644
--- a/addons/website/static/src/snippets/s_image_gallery/000.js
+++ b/addons/website/static/src/snippets/s_image_gallery/000.js
@@ -85,7 +85,7 @@ const GallerySliderWidget = publicWidget.Widget.extend({
         this.$indicator = this.$carousel.find('.carousel-indicators');
         this.$prev = this.$indicator.find('li.o_indicators_left').css('visibility', ''); // force visibility as some databases have it hidden
         this.$next = this.$indicator.find('li.o_indicators_right').css('visibility', '');
-        var $lis = this.$indicator.find('li[data-slide-to]');
+        var $lis = this.$indicator.find('li[data-bs-slide-to]');
         let indicatorWidth = this.$indicator.width();
         if (indicatorWidth === 0) {
             // An ancestor may be hidden so we try to find it and make it
@@ -135,11 +135,11 @@ const GallerySliderWidget = publicWidget.Widget.extend({
                 var $item = self.$carousel.find('.carousel-inner .carousel-item-prev, .carousel-inner .carousel-item-next');
                 var index = $item.index();
                 $lis.removeClass('active')
-                    .filter('[data-slide-to="' + index + '"]')
+                    .filter('[data-bs-slide-to="' + index + '"]')
                     .addClass('active');
             }, 0);
         });
-        this.$indicator.on('click.gallery_slider', '> li:not([data-slide-to])', function () {
+        this.$indicator.on('click.gallery_slider', '> li:not([data-bs-slide-to])', function () {
             page += ($(this).hasClass('o_indicators_left') ? -1 : 1);
             page = Math.max(0, Math.min(nbPages - 1, page)); // should not be necessary
             self.$carousel.carousel(page * realNbPerPage);
diff --git a/addons/website/static/src/snippets/s_image_gallery/000.xml b/addons/website/static/src/snippets/s_image_gallery/000.xml
index a50a1af5674..1fd8e861bc5 100644
--- a/addons/website/static/src/snippets/s_image_gallery/000.xml
+++ b/addons/website/static/src/snippets/s_image_gallery/000.xml
@@ -10,7 +10,7 @@
         ========================================================================
     -->
     <t t-name="website.gallery.slideshow">
-        <div t-attf-id="#{id}" class="carousel slide" data-ride="carousel" t-attf-data-interval="#{interval}" style="margin: 0 12px;">
+        <div t-attf-id="#{id}" class="carousel slide" data-bs-ride="carousel" t-attf-data-interval="#{interval}" style="margin: 0 12px;">
             <div class="carousel-inner" style="padding: 0;">
                  <t t-foreach="images" t-as="image">
                     <div t-attf-class="carousel-item #{image_index == index and 'active' or None}">
@@ -24,20 +24,20 @@
                     <i class="fa fa-chevron-left"/>
                 </li>
                 <t t-foreach="images" t-as="image">
-                    <li t-attf-data-target="##{id}" t-att-data-slide-to="image_index" t-att-class="image_index == index and 'active' or None" t-attf-style="background-image: url(#{image.src})"></li>
+                    <li t-attf-data-bs-target="##{id}" t-att-data-bs-slide-to="image_index" t-att-class="image_index == index and 'active' or None" t-attf-style="background-image: url(#{image.src})"></li>
                 </t>
                 <li class="o_indicators_right text-center d-none" aria-label="Next" title="Next">
                     <i class="fa fa-chevron-right"/>
                 </li>
             </ul>
 
-            <a class="carousel-control-prev o_we_no_overlay" t-attf-href="##{id}" data-slide="prev" aria-label="Previous" title="Previous">
+            <a class="carousel-control-prev o_we_no_overlay" t-attf-href="##{id}" data-bs-slide="prev" aria-label="Previous" title="Previous">
                 <span class="fa fa-chevron-left fa-2x text-white"></span>
-                <span class="sr-only">Previous</span>
+                <span class="visually-hidden">Previous</span>
             </a>
-            <a class="carousel-control-next o_we_no_overlay" t-attf-href="##{id}" data-slide="next" aria-label="Next" title="Next">
+            <a class="carousel-control-next o_we_no_overlay" t-attf-href="##{id}" data-bs-slide="next" aria-label="Next" title="Next">
                 <span class="fa fa-chevron-right fa-2x text-white"></span>
-                <span class="sr-only">Next</span>
+                <span class="visually-hidden">Next</span>
             </a>
         </div>
     </t>
@@ -58,7 +58,7 @@
                 t-attf-style="">
                 <div class="modal-content bg-transparent">
                     <main class="modal-body o_slideshow bg-transparent">
-                        <button type="button" class="close text-white" data-dismiss="modal" style="position: absolute; right: 10px; top: 10px;"><span role="img" aria-label="Close">×</span><span class="sr-only">Close</span></button>
+                        <button type="button" class="close text-white" data-bs-dismiss="modal" style="position: absolute; right: 10px; top: 10px;"><span role="img" aria-label="Close">×</span><span class="visually-hidden">Close</span></button>
                         <t t-call="website.gallery.slideshow"></t>
                     </main>
                 </div>
diff --git a/addons/website/static/src/snippets/s_image_gallery/options.js b/addons/website/static/src/snippets/s_image_gallery/options.js
index 1384a57493a..d90cb1d44a1 100644
--- a/addons/website/static/src/snippets/s_image_gallery/options.js
+++ b/addons/website/static/src/snippets/s_image_gallery/options.js
@@ -338,7 +338,7 @@ options.registry.gallery = options.Class.extend({
                 $carousel.removeClass('slide');
                 $carousel.carousel(position);
                 this.$target.find('.carousel-indicators li').removeClass('active');
-                this.$target.find('.carousel-indicators li[data-slide-to="' + position + '"]').addClass('active');
+                this.$target.find('.carousel-indicators li[data-bs-slide-to="' + position + '"]').addClass('active');
                 this.trigger_up('activate_snippet', {
                     $snippet: this.$target.find('.carousel-item.active img'),
                     ifInactiveOptions: true,
@@ -363,7 +363,7 @@ options.registry.gallery = options.Class.extend({
     _adaptNavigationIDs: function () {
         var uuid = new Date().getTime();
         this.$target.find('.carousel').attr('id', 'slideshow_' + uuid);
-        _.each(this.$target.find('[data-slide], [data-slide-to]'), function (el) {
+        _.each(this.$target.find('[data-bs-slide], [data-bs-slide-to]'), function (el) {
             var $el = $(el);
             if ($el.attr('data-bs-target')) {
                 $el.attr('data-bs-target', '#slideshow_' + uuid);
diff --git a/addons/website/static/src/snippets/s_map/000.scss b/addons/website/static/src/snippets/s_map/000.scss
index 80d27d48e69..4e591991864 100644
--- a/addons/website/static/src/snippets/s_map/000.scss
+++ b/addons/website/static/src/snippets/s_map/000.scss
@@ -1,7 +1,7 @@
 
-$s-map-desc-bg: theme-color('primary') !default;
+$s-map-desc-bg: map-get($theme-colors, 'primary') !default;
 $s-map-desc-alpha: 0.80 !default;
-$s-map-desc-hover-bg: theme-color('primary') !default;
+$s-map-desc-hover-bg: map-get($theme-colors, 'primary') !default;
 $s-map-desc-hover-alpha: 0.55 !default;
 
 .s_map {
diff --git a/addons/website/static/src/snippets/s_media_list/000.scss b/addons/website/static/src/snippets/s_media_list/000.scss
index 6c22e3528d3..366bd6fd71a 100644
--- a/addons/website/static/src/snippets/s_media_list/000.scss
+++ b/addons/website/static/src/snippets/s_media_list/000.scss
@@ -8,16 +8,16 @@
     }
     .s_media_list_body {
         padding: $grid-gutter-width;
-        background-color: gray('white');
+        background-color: map-get($grays, 'white');
     }
     .s_media_list_options {
         @include o-position-absolute(auto,0,0,0);
         display: flex;
-        border-top: 1px solid gray('400');
+        border-top: 1px solid map-get($grays, '400');
         .s_media_list_option {
             flex: 1 1 auto;
             padding: $grid-gutter-width/3 0;
-            border-right: 1px solid gray('400');
+            border-right: 1px solid map-get($grays, '400');
             text-align: center;
             &:last-child {
                 border-right: 0;
diff --git a/addons/website/static/src/snippets/s_process_steps/000.scss b/addons/website/static/src/snippets/s_process_steps/000.scss
index 8642f2c0cac..f0c76136f1c 100644
--- a/addons/website/static/src/snippets/s_process_steps/000.scss
+++ b/addons/website/static/src/snippets/s_process_steps/000.scss
@@ -21,7 +21,7 @@
                 span:after {
                     content: '';
                     z-index: -1;
-                    border-top: 1px solid gray('500');
+                    border-top: 1px solid map-get($grays, '500');
                     @include o-position-absolute(50%, 0, 0, auto);
                 }
             }
@@ -38,13 +38,13 @@
             }
             &:first-child .s_process_step_icon {
                 .fa:after { right: 0; }
-                .fa.float-right:after { width: 0; }
+                .fa.float-end:after { width: 0; }
             }
             &:last-child .s_process_step_icon {
                 span:after { left: 0; }
                 .fa {
                     &:after { left: 0; }
-                    &.float-left:after { width: 0; }
+                    &.float-start:after { width: 0; }
                 }
             }
         }
diff --git a/addons/website/static/src/snippets/s_process_steps/001.scss b/addons/website/static/src/snippets/s_process_steps/001.scss
index 3741c0da0dd..7e891cc397b 100644
--- a/addons/website/static/src/snippets/s_process_steps/001.scss
+++ b/addons/website/static/src/snippets/s_process_steps/001.scss
@@ -28,7 +28,7 @@
             margin: $grid-gutter-width 0;
 
             path {
-                stroke: gray('600');
+                stroke: map-get($grays, '600');
                 stroke-width: 2;
                 fill: transparent;
             }
@@ -46,7 +46,7 @@
     }
 
     .s_process_steps_arrow_head path {
-        fill: gray('600');
+        fill: map-get($grays, '600');
         stroke: transparent;
     }
 
diff --git a/addons/website/static/src/snippets/s_rating/000.scss b/addons/website/static/src/snippets/s_rating/000.scss
index 968ee7d3f15..a3ae05d7983 100644
--- a/addons/website/static/src/snippets/s_rating/000.scss
+++ b/addons/website/static/src/snippets/s_rating/000.scss
@@ -37,7 +37,7 @@
                 @include transition($progress-bar-transition);
                 @include gradient-striped();
                 background-size: $progress-height $progress-height;
-                background-color: theme-color('primary');
+                background-color: map-get($theme-colors, 'primary');
                 animation: progress-bar-stripes $progress-bar-animation-timing;
             }
         }
diff --git a/addons/website/static/src/snippets/s_searchbar/000.xml b/addons/website/static/src/snippets/s_searchbar/000.xml
index e28893b4de5..7ec3372d30e 100644
--- a/addons/website/static/src/snippets/s_searchbar/000.xml
+++ b/addons/website/static/src/snippets/s_searchbar/000.xml
@@ -21,7 +21,7 @@
                 <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']"/>
-                <div t-attf-class="h6 font-weight-bold #{description ? '' : 'mb-0'}" t-out="result['name']"/>
+                <div t-attf-class="h6 fw-bold #{description ? '' : 'mb-0'}" t-out="result['name']"/>
                 <p t-if="description" class="mb-0" t-out="description"/>
                 <button t-if="extra_link" class="extra_link btn btn-link btn-sm" t-att-data-target="result['extra_link_url']" t-out="extra_link"/>
                 <t t-if="extra_link_html" t-out="extra_link_html"/>
diff --git a/addons/website/static/src/snippets/s_showcase/000.scss b/addons/website/static/src/snippets/s_showcase/000.scss
index f4897bb1cbc..178bd8731ba 100644
--- a/addons/website/static/src/snippets/s_showcase/000.scss
+++ b/addons/website/static/src/snippets/s_showcase/000.scss
@@ -9,7 +9,7 @@
                 display: block;
                 @include o-position-absolute($left: 50%);
                 height: 100%;
-                border-right: 1px solid gray('200');
+                border-right: 1px solid map-get($grays, '200');
             }
         }
     }
@@ -18,7 +18,7 @@
         opacity: 0.5;
     }
 
-    .text-right{
+    .text-end{
         .fa {
             float: right;
             margin-left: .5em;
@@ -28,7 +28,7 @@
             display: block;
         }
     }
-    .text-left{
+    .text-start{
         .fa {
             float: left;
             margin-right: .5em;
@@ -49,7 +49,7 @@
 
 @include media-breakpoint-down(lg) {
     #wrapwrap .s_showcase:not([data-vcss]) {
-        .text-right, .text-left {
+        .text-end, .text-start {
             text-align: center;
 
             .fa {
diff --git a/addons/website/static/src/snippets/s_showcase/001.scss b/addons/website/static/src/snippets/s_showcase/001.scss
index f7a8cd3f374..762797bf853 100644
--- a/addons/website/static/src/snippets/s_showcase/001.scss
+++ b/addons/website/static/src/snippets/s_showcase/001.scss
@@ -9,7 +9,7 @@
                 display: block;
                 @include o-position-absolute($left: 50%);
                 height: 100%;
-                border-right: 1px solid gray('200');
+                border-right: 1px solid map-get($grays, '200');
             }
         }
         // Features
diff --git a/addons/website/static/src/snippets/s_showcase/options.js b/addons/website/static/src/snippets/s_showcase/options.js
index b870393da61..9c28030dd07 100644
--- a/addons/website/static/src/snippets/s_showcase/options.js
+++ b/addons/website/static/src/snippets/s_showcase/options.js
@@ -12,8 +12,8 @@ options.registry.Showcase = options.Class.extend({
         const isLeftCol = $showcaseCol.index() <= 0;
         const $title = this.$target.children('.s_showcase_title');
         $title.toggleClass('flex-lg-row-reverse', isLeftCol);
-        $showcaseCol.find('.s_showcase_icon.ml-3').removeClass('ml-3').addClass('ml-lg-3'); // For compatibility with old version
-        $title.find('.s_showcase_icon').toggleClass('mr-lg-0 ml-lg-3', isLeftCol);
+        $showcaseCol.find('.s_showcase_icon.ms-3').removeClass('ms-3').addClass('ms-lg-3'); // For compatibility with old version
+        $title.find('.s_showcase_icon').toggleClass('me-lg-0 ms-lg-3', isLeftCol);
     },
 });
 });
diff --git a/addons/website/static/src/snippets/s_table_of_content/000.scss b/addons/website/static/src/snippets/s_table_of_content/000.scss
index 670e1365a9c..bc238f000dd 100644
--- a/addons/website/static/src/snippets/s_table_of_content/000.scss
+++ b/addons/website/static/src/snippets/s_table_of_content/000.scss
@@ -36,7 +36,7 @@
                     opacity: 1;
 
                     &:before {
-                        background-color: theme-color('primary');
+                        background-color: map-get($theme-colors, 'primary');
                     }
                 }
             }
diff --git a/addons/website/static/src/snippets/s_timeline/000.scss b/addons/website/static/src/snippets/s_timeline/000.scss
index 0b52cb47f97..46457948394 100644
--- a/addons/website/static/src/snippets/s_timeline/000.scss
+++ b/addons/website/static/src/snippets/s_timeline/000.scss
@@ -1,7 +1,7 @@
 .s_timeline {
     .s_timeline_line {
         position: relative;
-        border-color: gray('800'); // For inheritance, not actual border
+        border-color: map-get($grays, '800'); // For inheritance, not actual border
 
         &:before {
             content: '';
diff --git a/addons/website/static/src/snippets/s_website_form/000.js b/addons/website/static/src/snippets/s_website_form/000.js
index 3f61f6a04a7..d89dc4419c9 100644
--- a/addons/website/static/src/snippets/s_website_form/000.js
+++ b/addons/website/static/src/snippets/s_website_form/000.js
@@ -212,7 +212,7 @@ odoo.define('website.s_website_form', function (require) {
             this.$target[0].querySelectorAll('textarea').forEach(el => el.value = el.textContent);
 
             // Remove saving of the error colors
-            this.$target.find('.o_has_error').removeClass('o_has_error').find('.form-control, .custom-select').removeClass('is-invalid');
+            this.$target.find('.o_has_error').removeClass('o_has_error').find('.form-control, .form-select').removeClass('is-invalid');
 
             // Remove the status message
             this.$target.find('#s_website_form_result, #o_website_form_result').empty(); // !compatibility
@@ -423,9 +423,9 @@ odoo.define('website.s_website_form', function (require) {
                 });
 
                 // Update field color if invalid or erroneous
-                $field.removeClass('o_has_error').find('.form-control, .custom-select').removeClass('is-invalid');
+                $field.removeClass('o_has_error').find('.form-control, .form-select').removeClass('is-invalid');
                 if (invalid_inputs.length || error_fields[field_name]) {
-                    $field.addClass('o_has_error').find('.form-control, .custom-select').addClass('is-invalid');
+                    $field.addClass('o_has_error').find('.form-control, .form-select').addClass('is-invalid');
                     if (_.isString(error_fields[field_name])) {
                         $field.popover({content: error_fields[field_name], trigger: 'hover', container: 'body', placement: 'top'});
                         // update error message and show it.
diff --git a/addons/website/static/src/snippets/s_website_form/options.js b/addons/website/static/src/snippets/s_website_form/options.js
index 75318581a0a..efac876d9f8 100644
--- a/addons/website/static/src/snippets/s_website_form/options.js
+++ b/addons/website/static/src/snippets/s_website_form/options.js
@@ -228,7 +228,7 @@ const FieldEditor = FormEditor.extend({
     _getLabelPosition: function () {
         const label = this.$target[0].querySelector('.s_website_form_label');
         if (this.$target[0].querySelector('.row:not(.s_website_form_multiple)')) {
-            return label.classList.contains('text-right') ? 'right' : 'left';
+            return label.classList.contains('text-end') ? 'right' : 'left';
         } else {
             return label.classList.contains('d-none') ? 'none' : 'top';
         }
diff --git a/addons/website/static/src/systray_items/edit_website.xml b/addons/website/static/src/systray_items/edit_website.xml
index 44267d62af2..66f9ecd899e 100644
--- a/addons/website/static/src/systray_items/edit_website.xml
+++ b/addons/website/static/src/systray_items/edit_website.xml
@@ -3,8 +3,8 @@
 <t t-name="website.EditWebsiteSystray" owl="1">
     <div class="o_edit_website_container" t-att-class="{ o_translatable: translatable }">
         <a href="#" accesskey="a" t-on-click="startEdit">
-            <span t-if="translatable" class="fa fa-pencil mr-2"/>
-            <span t-else="" class="fa mr-2" t-att-class="{ 'fa-refresh fa-spin': this.state.isLoading, 'fa-pencil': !this.state.isLoading }"/>
+            <span t-if="translatable" class="fa fa-pencil me-2"/>
+            <span t-else="" class="fa me-2" t-att-class="{ 'fa-refresh fa-spin': this.state.isLoading, 'fa-pencil': !this.state.isLoading }"/>
             <t t-esc="label"/>
         </a>
     </div>
diff --git a/addons/website/static/src/systray_items/new_content.xml b/addons/website/static/src/systray_items/new_content.xml
index 066b563da62..63c54f33049 100644
--- a/addons/website/static/src/systray_items/new_content.xml
+++ b/addons/website/static/src/systray_items/new_content.xml
@@ -41,7 +41,7 @@
 
 <t t-name="website.NewContentSystray" owl="1">
     <div class="o_menu_systray_item o_new_content_container" t-on-click="onClick">
-        <a href="#" accesskey="c"><span class="fa fa-plus mr-2"/>New</a>
+        <a href="#" accesskey="c"><span class="fa fa-plus me-2"/>New</a>
         <NewContentModal t-if="websiteContext.showNewContentModal"/>
     </div>
 </t>
diff --git a/addons/website/static/src/systray_items/publish.js b/addons/website/static/src/systray_items/publish.js
index ea860af4111..56af387722c 100644
--- a/addons/website/static/src/systray_items/publish.js
+++ b/addons/website/static/src/systray_items/publish.js
@@ -34,7 +34,7 @@ class PublishSystray extends Component {
     }
 }
 PublishSystray.template = xml`
-<div t-on-click="publishContent" class="o_menu_systray_item d-md-flex ml-auto">
+<div t-on-click="publishContent" class="o_menu_systray_item d-md-flex ms-auto">
     <a href="#">
         <Switch value="state.published" extraClasses="'mb-0 o_switch_danger_success'"/>
         <t t-esc="this.label"/>
diff --git a/addons/website/static/src/systray_items/translate_website.xml b/addons/website/static/src/systray_items/translate_website.xml
index 666b0dd62fa..940b51c3339 100644
--- a/addons/website/static/src/systray_items/translate_website.xml
+++ b/addons/website/static/src/systray_items/translate_website.xml
@@ -4,7 +4,7 @@
     <t t-name="website.TranslateWebsiteSystray" owl="1">
         <div class="o_translate_website_container">
             <a href="#" accesskey="a" t-on-click="startTranslate">
-                <span t-if="websiteContext.translation" class="fa fa-refresh fa-spin mr-2"/>
+                <span t-if="websiteContext.translation" class="fa fa-refresh fa-spin me-2"/>
                 TRANSLATE
             </a>
         </div>
diff --git a/addons/website/static/src/systray_items/website_switcher.xml b/addons/website/static/src/systray_items/website_switcher.xml
index ab3cf6b093c..7e4f34911f1 100644
--- a/addons/website/static/src/systray_items/website_switcher.xml
+++ b/addons/website/static/src/systray_items/website_switcher.xml
@@ -3,7 +3,7 @@
 <t t-name="website.WebsiteSwitcherSystray" owl="1">
     <Dropdown class="'o_menu_systray_item o_website_switcher_container'" hotkey="'w'">
         <t t-set-slot="toggler">
-            <span><t t-esc="websiteService.currentWebsite.name"/><i class="fa fa-caret-down ml-2"/></span>
+            <span><t t-esc="websiteService.currentWebsite.name"/><i class="fa fa-caret-down ms-2"/></span>
         </t>
         <t t-foreach="getElements()" t-as="element" t-key="element_index">
             <DropdownItem
diff --git a/addons/website/static/src/xml/theme_preview.xml b/addons/website/static/src/xml/theme_preview.xml
index 75c07957abe..8786d99b5aa 100644
--- a/addons/website/static/src/xml/theme_preview.xml
+++ b/addons/website/static/src/xml/theme_preview.xml
@@ -14,7 +14,7 @@
     </t>
 
     <t t-name="website.ThemePreview.SwitchModeButton">
-        <div class="btn-group btn-group-toggle ml-1" data-toggle="buttons">
+        <div class="btn-group btn-group-toggle ms-1" data-bs-toggle="buttons">
             <label class="btn btn-secondary active">
                 <input type="radio" name="viewer" data-mode='desktop' autocomplete="off" checked='checked'/> Desktop
             </label>
@@ -25,7 +25,7 @@
     </t>
     <t t-name="website.ThemePreview.Loader">
         <div class="o_theme_install_loader_container position-fixed fixed-top fixed-left
-            h-100 w-100 d-flex flex-column align-items-center text-white font-weight-bold text-center">
+            h-100 w-100 d-flex flex-column align-items-center text-white fw-bold text-center">
             <t t-if="showTips">Building your website...</t>
             <div class="o_theme_install_loader"></div>
             <p t-if="showTips" class="o_theme_install_loader_tip w-25">
diff --git a/addons/website/static/src/xml/website.backend.xml b/addons/website/static/src/xml/website.backend.xml
index 2f6cba28376..b5453c35409 100644
--- a/addons/website/static/src/xml/website.backend.xml
+++ b/addons/website/static/src/xml/website.backend.xml
@@ -60,7 +60,7 @@
                 <h2>Analytics</h2>
                 <div>
                     <div class="row">
-                        <div class="embed-responsive embed-responsive-1by1">
+                        <div class="ratio ratio-1x1">
                             <iframe t-att-src='widget.dashboards_data.plausible_share_url' class="embed-responsive-item" frameborder="0" loading="lazy"/>
                         </div>
                     </div>
@@ -91,12 +91,12 @@
 
     <t t-name="website.DateRangeButtons">
         <!-- TODO: Hide in mobile as it is going to push in control panel and it breaks UI, maybe we will improve it in future -->
-        <div class="btn-group o_date_range_buttons d-none d-md-inline-flex float-right">
+        <div class="btn-group o_date_range_buttons d-none d-md-inline-flex float-end">
             <button class="btn btn-secondary js_date_range active" data-date="week">Last Week</button>
             <button class="btn btn-secondary js_date_range" data-date="month">Last Month</button>
             <button class="btn btn-secondary js_date_range" data-date="year">Last Year</button>
         </div>
-        <div class="btn-group d-none d-md-inline-block float-right" style="margin-right: 20px;">
+        <div class="btn-group d-none d-md-inline-block float-end" style="margin-right: 20px;">
             <t t-foreach="widget.websites" t-as="website">
                 <button t-attf-class="btn btn-secondary js_website #{website.selected ? 'active' : ''}"
                         t-att-data-website-id="website.id">
@@ -114,8 +114,8 @@
 
     <t t-name="PageListView.WebsiteSelect">
         <div class="btn-group" role="toolbar" aria-label="Main actions">
-            <button class="btn btn-primary dropdown-toggle o-no-caret" data-toggle="dropdown" aria-expanded="false">
-                <span class="o_website_active" t-esc="active.name"/> <i class="fa fa-caret-down ml-1"/>
+            <button class="btn btn-primary dropdown-toggle o-no-caret" data-bs-toggle="dropdown" aria-expanded="false">
+                <span class="o_website_active" t-esc="active.name"/> <i class="fa fa-caret-down ms-1"/>
             </button>
             <div class="dropdown-menu">
                 <t t-foreach="websites" t-as="website">
diff --git a/addons/website/static/src/xml/website.background.video.xml b/addons/website/static/src/xml/website.background.video.xml
index 18c1f4bdba6..c3abb037d7a 100644
--- a/addons/website/static/src/xml/website.background.video.xml
+++ b/addons/website/static/src/xml/website.background.video.xml
@@ -4,7 +4,7 @@
         <div class="o_bg_video_container">
             <div class="o_bg_video_loading d-flex justify-content-center align-items-center text-primary">
                 <div class="spinner-border" style="width: 4em; height: 4em;" role="status">
-                    <span class="sr-only">Loading...</span>
+                    <span class="visually-hidden">Loading...</span>
                 </div>
             </div>
             <iframe t-att-id="iframeID"
diff --git a/addons/website/static/src/xml/website.cookies_bar.xml b/addons/website/static/src/xml/website.cookies_bar.xml
index 1f43786926b..e32dc4ba110 100644
--- a/addons/website/static/src/xml/website.cookies_bar.xml
+++ b/addons/website/static/src/xml/website.cookies_bar.xml
@@ -23,7 +23,7 @@
                     <div class="col-lg-8 pt16">
                         <p>We use cookies to provide you a better user experience.</p>
                     </div>
-                    <div class="col-lg-4 pt16 text-right">
+                    <div class="col-lg-4 pt16 text-end">
                         <a href="/cookie-policy" class="o_cookies_bar_text_policy btn btn-link btn-sm">Cookie Policy</a>
                         <a href="#" role="button" class="js_close_popup o_cookies_bar_text_button btn btn-primary btn-sm">I agree</a>
                     </div>
@@ -57,7 +57,7 @@
                         <t t-call="website.cookies_bar.text_title"/>
                         <t t-call="website.cookies_bar.text_primary"/>
                         <t t-call="website.cookies_bar.text_secondary"/>
-                        <a href="/cookie-policy" class=" o_cookies_bar_text_policy btn btn-link mr-2">Cookie Policy</a>
+                        <a href="/cookie-policy" class=" o_cookies_bar_text_policy btn btn-link me-2">Cookie Policy</a>
                         <a href="#" role="button" class="js_close_popup o_cookies_bar_text_button btn btn-primary">I agree</a>
                     </div>
                 </div>
diff --git a/addons/website/static/src/xml/website.editor.xml b/addons/website/static/src/xml/website.editor.xml
index b913daa2c93..d7b93467388 100644
--- a/addons/website/static/src/xml/website.editor.xml
+++ b/addons/website/static/src/xml/website.editor.xml
@@ -21,8 +21,8 @@
                     <div>
                         <div class="dropdown">
                             <button class="dropdown-toggle"
-                                data-toggle="dropdown" title="" tabindex="-1"
-                                data-original-title="Link Size" aria-expanded="false">
+                                data-bs-toggle="dropdown" title="" tabindex="-1"
+                                data-bs-original-title="Link Size" aria-expanded="false">
                                 <we-toggler>
                                     Loading...
                                 </we-toggler>
@@ -57,7 +57,7 @@
             <div class="col-md-9">
                 <textarea id="google_font_html" class="form-control o_input_google_font"
                     placeholder="https://fonts.google.com/specimen/Roboto" style="height: 100px;"/>
-                <span class="float-right text-muted">
+                <span class="float-end text-muted">
                     Select one font on <a target="_blank" href="https://fonts.google.com">fonts.google.com</a> and copy paste the address of the font page here.
                 </span>
             </div>
@@ -67,7 +67,7 @@
     <t t-name="website.delete_google_font_btn">
         <t t-set="delete_font_title">Delete this font</t>
         <i role="button"
-           class="text-danger ml-2 fa fa-trash-o o_we_delete_google_font_btn"
+           class="text-danger ms-2 fa fa-trash-o o_we_delete_google_font_btn"
            t-att-aria-label="delete_font_title"
            t-att-title="delete_font_title"
            t-att-data-font-index="index"/>
@@ -138,7 +138,7 @@
 
     <t t-name="website.new_content_loader">
         <div class="o_new_content_loader_container position-fixed fixed-top fixed-left
-            h-100 w-100 d-flex flex-column align-items-center text-white font-weight-bold">
+            h-100 w-100 d-flex flex-column align-items-center text-white fw-bold">
             <p id="new_content_loader_text"/>
             <div class="o_new_content_loader"/>
         </div>
diff --git a/addons/website/static/src/xml/website.xml b/addons/website/static/src/xml/website.xml
index e04722d5118..8a5e979a94d 100644
--- a/addons/website/static/src/xml/website.xml
+++ b/addons/website/static/src/xml/website.xml
@@ -6,7 +6,7 @@
                 <div class="modal-content">
                     <header class="modal-header" t-if="window_title">
                         <h3 class="modal-title"><t t-esc="window_title"/></h3>
-                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                     </header>
                     <main class="modal-body">
                         <form role="form" t-att-id="id">
@@ -17,14 +17,14 @@
                                 <div class="col-md-9">
                                     <input t-if="field_type == 'input'" type="text" class="form-control" required="required"/>
                                     <textarea t-if="field_type == 'textarea'" class="form-control" required="required" rows="5"></textarea>
-                                    <select t-if="field_type == 'select'" class="form-control"></select>
+                                    <select t-if="field_type == 'select'" class="form-select"></select>
                                 </div>
                             </div>
                         </form>
                     </main>
                     <footer class="modal-footer">
                         <button type="button" class="btn btn-primary btn-continue"><t t-esc="btn_primary_title"/></button>
-                        <button type="button" class="btn btn-secondary" data-dismiss="modal" aria-label="Cancel"><t t-esc="btn_secondary_title"/></button>
+                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" aria-label="Cancel"><t t-esc="btn_secondary_title"/></button>
                     </footer>
                 </div>
             </div>
diff --git a/addons/website/static/src/xml/website_form_editor.xml b/addons/website/static/src/xml/website_form_editor.xml
index 9e086a1ed31..11e2dec2f76 100644
--- a/addons/website/static/src/xml/website_form_editor.xml
+++ b/addons/website/static/src/xml/website_form_editor.xml
@@ -37,7 +37,7 @@
             t-att-data-type="field.type"
             data-name="Field">
             <div t-if="field.formatInfo.labelPosition != 'none' and field.formatInfo.labelPosition != 'top'" class="row s_col_no_resize s_col_no_bgcolor">
-                <label t-attf-class="#{!field.isCheck and 'col-form-label' or ''} col-sm-auto s_website_form_label #{field.formatInfo.labelPosition == 'right' and 'text-right' or ''}" t-attf-style="width: #{field.formatInfo.labelWidth or '200px'}" t-att-for="field.id">
+                <label t-attf-class="#{!field.isCheck and 'col-form-label' or ''} col-sm-auto s_website_form_label #{field.formatInfo.labelPosition == 'right' and 'text-end' or ''}" t-attf-style="width: #{field.formatInfo.labelWidth or '200px'}" t-att-for="field.id">
                      <t t-call="website.form_label_content"/>
                 </label>
                 <div class="col-sm">
@@ -297,7 +297,7 @@
         <!-- Generic one2many -->
         <t t-if="field.relation != 'ir.attachment'">
             <t t-call="website.form_field">
-                <select class="form-control s_website_form_input" t-att-name="field.name" t-att-required="field.required || field.modelRequired || None" t-att-id="field.id" style="display: none">
+                <select class="form-select s_website_form_input" t-att-name="field.name" t-att-required="field.required || field.modelRequired || None" t-att-id="field.id" style="display: none">
                     <t t-foreach="field.records" t-as="record">
                         <option t-esc="record.display_name" t-att-value="record.id" t-att-selected="record.selected and 'selected' or None"/>
                     </t>
diff --git a/addons/website/static/tests/tours/automatic_editor.js b/addons/website/static/tests/tours/automatic_editor.js
index 8e1825e3bd5..3ab5dab4b9d 100644
--- a/addons/website/static/tests/tours/automatic_editor.js
+++ b/addons/website/static/tests/tours/automatic_editor.js
@@ -38,7 +38,7 @@ wTourUtils.registerEditionTour('automatic_editor_on_new_website', {
     },
     {
         content: "load parseltongue",
-        extra_trigger: '.modal div[name="lang_ids"] .badge-pill .o_tag_badge_text:contains(Parseltongue)',
+        extra_trigger: '.modal div[name="lang_ids"] .rounded-pill .o_tag_badge_text:contains(Parseltongue)',
         trigger: '.modal-footer button:first',
     },
     {
diff --git a/addons/website/static/tests/tours/link_tools.js b/addons/website/static/tests/tours/link_tools.js
index 5c2a29754a6..520b8f22bf5 100644
--- a/addons/website/static/tests/tours/link_tools.js
+++ b/addons/website/static/tests/tours/link_tools.js
@@ -55,7 +55,7 @@ wTourUtils.registerEditionTour('link_tools', {
     },
     {
         content: "The new link content should be odoo website and url odoo.be",
-        trigger: '#toolbar button[data-original-title="Link Style"]',
+        trigger: '#toolbar button[data-bs-original-title="Link Style"]',
     },
     {
         // When doing automated testing, the link popover takes time to
diff --git a/addons/website/static/tests/tours/rte.js b/addons/website/static/tests/tours/rte.js
index 05679a5ea55..e4b9b5cbdf5 100644
--- a/addons/website/static/tests/tours/rte.js
+++ b/addons/website/static/tests/tours/rte.js
@@ -41,7 +41,7 @@ wTourUtils.registerEditionTour('rte_translator', {
 }, {
     content: "load Parseltongue",
     trigger: '.modal-footer button:first',
-    extra_trigger: '.modal-dialog div[name="lang_ids"] .badge-pill .o_tag_badge_text:contains(Parseltongue)',
+    extra_trigger: '.modal-dialog div[name="lang_ids"] .rounded-pill .o_tag_badge_text:contains(Parseltongue)',
 }, {
     content: "click language dropdown (2)",
     trigger: 'iframe .js_language_selector .dropdown-toggle',
diff --git a/addons/website/static/tests/tours/website_form_editor.js b/addons/website/static/tests/tours/website_form_editor.js
index 26a35249011..540aa58df78 100644
--- a/addons/website/static/tests/tours/website_form_editor.js
+++ b/addons/website/static/tests/tours/website_form_editor.js
@@ -286,13 +286,13 @@ odoo.define('website.tour.form_editor', function (require) {
             run: () => null,
         }, {
             content: "Change button's style",
-            trigger: '.dropdown-toggle[data-original-title="Link Style"]',
+            trigger: '.dropdown-toggle[data-bs-original-title="Link Style"]',
             run: () => {
-                $('.dropdown-toggle[data-original-title="Link Style"]').click();
+                $('.dropdown-toggle[data-bs-original-title="Link Style"]').click();
                 $('[data-value="secondary"]').click();
-                $('[data-original-title="Link Shape"]').click();
+                $('[data-bs-original-title="Link Shape"]').click();
                 $('[data-value="rounded-circle"]').click();
-                $('[data-original-title="Link Size"]').click();
+                $('[data-bs-original-title="Link Size"]').click();
                 $('[data-value="sm"]').click();
             },
         }, {
diff --git a/addons/website/views/res_config_settings_views.xml b/addons/website/views/res_config_settings_views.xml
index 0c0f16b9966..7f47773eb21 100644
--- a/addons/website/views/res_config_settings_views.xml
+++ b/addons/website/views/res_config_settings_views.xml
@@ -21,15 +21,15 @@
         <field name="arch" type="xml">
             <xpath expr="//div[hasclass('settings')]" position="inside">
                 <div class="app_settings_block" data-string="Website" string="Website" data-key="website" groups="website.group_website_designer">
-                    <div class="row o_settings_container mb-0 mt-0 ml-0 mw-100"
+                    <div class="row o_settings_container mb-0 mt-0 ms-0 mw-100"
                         style="background-color: #FEF0D0; margin-bottom: 0px !important; margin-top: 0px !important;">
-                        <div class="col-xs-12 col-md-6 ml-0 o_setting_box">
-                            <div class="o_setting_right_pane border-left-0 ml-0 pl-0">
+                        <div class="col-xs-12 col-md-6 ms-0 o_setting_box">
+                            <div class="o_setting_right_pane border-start-0 ms-0 ps-0">
                                 <div class="content-group">
                                     <div class="row mt8">
-                                        <label class="col-lg-3 pl-0" string="Settings of Website" for="website_id"/>
+                                        <label class="col-lg-3 ps-0" string="Settings of Website" for="website_id"/>
                                         <field name="website_id" options="{'no_open': True, 'no_create': True}" title="Settings on this page will apply to this website"/>
-                                        <button name="action_website_create_new" type="object" string="+ New Website" class="col-auto btn-link ml-2" style="line-height: 0.5;"/>
+                                        <button name="action_website_create_new" type="object" string="+ New Website" class="col-auto btn-link ms-2" style="line-height: 0.5;"/>
                                     </div>
                                 </div>
                             </div>
@@ -38,7 +38,7 @@
                     <h2>Website Info</h2>
                     <div class="col-xs-12 row o_settings_container" id="website_info_settings">
                         <div class="col-xs-12 col-md-6 o_setting_box">
-                            <div class="o_setting_right_pane border-left-0">
+                            <div class="o_setting_right_pane border-start-0">
                                 <div class="content-group">
                                     <div class="row mt8">
                                         <label class="col-lg-3" string="Domain" for="website_domain"/>
@@ -64,7 +64,7 @@
                             </div>
                         </div>
                         <div class="col-xs-12 col-md-6 o_setting_box">
-                            <div class="o_setting_right_pane border-left-0">
+                            <div class="o_setting_right_pane border-start-0">
                                 <div class="content-group">
                                     <div class="row mt8">
                                         <label class="col-lg-3" string="Website Name" for="website_name"/>
@@ -76,7 +76,7 @@
                                     </div>
                                     <div class="row mt8">
                                         <label class="col-lg-3" string="Favicon" for="favicon"/>
-                                        <field name="favicon" widget="image" class="float-left oe_avatar"/>
+                                        <field name="favicon" widget="image" class="float-start oe_avatar"/>
                                     </div>
                                 </div>
                             </div>
diff --git a/addons/website/views/snippets/s_badge.xml b/addons/website/views/snippets/s_badge.xml
index 4eba4ddc000..ffdaf6a9410 100644
--- a/addons/website/views/snippets/s_badge.xml
+++ b/addons/website/views/snippets/s_badge.xml
@@ -2,7 +2,7 @@
 <odoo>
 
 <template name="Badge" id="s_badge">
-    <span class="s_badge badge badge-secondary o_animable" data-name="Badge">
+    <span class="s_badge badge text-bg-secondary o_animable" data-name="Badge">
         <i class="fa fa-1x fa-fw fa-folder o_not-animable"/>Category
     </span>
 </template>
diff --git a/addons/website/views/snippets/s_blockquote.xml b/addons/website/views/snippets/s_blockquote.xml
index 8f2645810ba..63700cef284 100644
--- a/addons/website/views/snippets/s_blockquote.xml
+++ b/addons/website/views/snippets/s_blockquote.xml
@@ -7,7 +7,7 @@
         <div class="s_blockquote_content bg-100">
             <p>Write a quote here from one of your customers. Quotes are a great way to build confidence in your products or services.</p>
             <footer class="blockquote-footer">
-                <img src="/web/image/website.s_blockquote_default_image" class="s_blockquote_avatar img rounded-circle mr-2" alt=""/>
+                <img src="/web/image/website.s_blockquote_default_image" class="s_blockquote_avatar img rounded-circle me-2" alt=""/>
                 <span class="s_blockquote_author"><b>John DOE</b> &#8226; CEO of MyCompany</span>
             </footer>
         </div>
diff --git a/addons/website/views/snippets/s_carousel.xml b/addons/website/views/snippets/s_carousel.xml
index be65e01c7f0..72fe5e63bc4 100644
--- a/addons/website/views/snippets/s_carousel.xml
+++ b/addons/website/views/snippets/s_carousel.xml
@@ -4,12 +4,12 @@
 <template id="s_carousel" name="Carousel">
     <section class="s_carousel_wrapper" data-vxml="001">
         <t t-set="uniq" t-value="datetime.datetime.now().microsecond"/>
-        <div t-attf-id="myCarousel{{uniq}}" class="s_carousel s_carousel_default carousel slide" data-interval="10000">
+        <div t-attf-id="myCarousel{{uniq}}" class="s_carousel s_carousel_default carousel slide" data-bs-interval="10000">
             <!-- Indicators -->
             <ol class="carousel-indicators">
-                <li t-attf-data-target="#myCarousel{{uniq}}" data-slide-to="0" class="active"/>
-                <li t-attf-data-target="#myCarousel{{uniq}}" data-slide-to="1"/>
-                <li t-attf-data-target="#myCarousel{{uniq}}" data-slide-to="2"/>
+                <li t-attf-data-bs-target="#myCarousel{{uniq}}" data-bs-slide-to="0" class="active"/>
+                <li t-attf-data-bs-target="#myCarousel{{uniq}}" data-bs-slide-to="1"/>
+                <li t-attf-data-bs-target="#myCarousel{{uniq}}" data-bs-slide-to="2"/>
             </ol>
             <!-- Content -->
             <div class="carousel-inner">
@@ -57,13 +57,13 @@
                 </div>
             </div>
             <!-- Controls -->
-            <a class="carousel-control-prev o_not_editable" contenteditable="false" t-attf-href="#myCarousel{{uniq}}" data-slide="prev" role="img" aria-label="Previous" title="Previous">
+            <a class="carousel-control-prev o_not_editable" contenteditable="false" t-attf-href="#myCarousel{{uniq}}" data-bs-slide="prev" role="img" aria-label="Previous" title="Previous">
                 <span class="carousel-control-prev-icon"/>
-                <span class="sr-only">Previous</span>
+                <span class="visually-hidden">Previous</span>
             </a>
-            <a class="carousel-control-next o_not_editable" contenteditable="false" t-attf-href="#myCarousel{{uniq}}" data-slide="next" role="img" aria-label="Next" title="Next">
+            <a class="carousel-control-next o_not_editable" contenteditable="false" t-attf-href="#myCarousel{{uniq}}" data-bs-slide="next" role="img" aria-label="Next" title="Next">
                 <span class="carousel-control-next-icon"/>
-                <span class="sr-only">Next</span>
+                <span class="visually-hidden">Next</span>
             </a>
         </div>
     </section>
diff --git a/addons/website/views/snippets/s_embed_code.xml b/addons/website/views/snippets/s_embed_code.xml
index 9126e27425e..99ec860d9a4 100644
--- a/addons/website/views/snippets/s_embed_code.xml
+++ b/addons/website/views/snippets/s_embed_code.xml
@@ -4,7 +4,7 @@
 <template name="Embed Code" id="s_embed_code">
     <section class="s_embed_code text-center pt64 pb64">
         <div class="s_embed_code_embedded container o_not_editable">
-            <div class="text-monospace pt8 bg-light">&#10;    Replace this with your own HTML code&#10;</div>
+            <div class="font-monospace pt8 bg-light">&#10;    Replace this with your own HTML code&#10;</div>
         </div>
     </section>
 </template>
@@ -19,9 +19,9 @@
                         title="Edit embedded code">Edit</we-button>
             </we-row>
             <we-button-group string="Alignment">
-                <we-button class="fa fa-fw fa-align-left" title="Left" data-select-class="text-left"/>
+                <we-button class="fa fa-fw fa-align-left" title="Left" data-select-class="text-start"/>
                 <we-button class="fa fa-fw fa-align-center" title="Center" data-select-class="text-center"/>
-                <we-button class="fa fa-fw fa-align-right" title="Right" data-select-class="text-right"/>
+                <we-button class="fa fa-fw fa-align-right" title="Right" data-select-class="text-end"/>
             </we-button-group>
         </div>
     </xpath>
diff --git a/addons/website/views/snippets/s_faq_collapse.xml b/addons/website/views/snippets/s_faq_collapse.xml
index 1189252f60b..2172a175692 100644
--- a/addons/website/views/snippets/s_faq_collapse.xml
+++ b/addons/website/views/snippets/s_faq_collapse.xml
@@ -7,16 +7,16 @@
         <div class="container">
             <div id="myCollapse" class="accordion" role="tablist">
                 <div class="card bg-white" data-name="Item">
-                    <a href="#" t-attf-data-target="#myCollapseTab{{uniq}}_1" role="tab" data-toggle="collapse" aria-expanded="true" class="card-header">Terms of service</a>
-                    <div t-attf-id="myCollapseTab{{uniq}}_1" class="collapse show" data-parent="#myCollapse" role="tabpanel">
+                    <a href="#" t-attf-data-bs-target="#myCollapseTab{{uniq}}_1" role="tab" data-bs-toggle="collapse" aria-expanded="true" class="card-header">Terms of service</a>
+                    <div t-attf-id="myCollapseTab{{uniq}}_1" class="collapse show" data-bs-parent="#myCollapse" role="tabpanel">
                         <div class="card-body">
                             <p class="card-text">These terms of service ("Terms", "Agreement") are an agreement between the website ("Website operator", "us", "we" or "our") and you ("User", "you" or "your"). This Agreement sets forth the general terms and conditions of your use of this website and any of its products or services (collectively, "Website" or "Services").</p>
                         </div>
                     </div>
                 </div>
                 <div class="card bg-white" data-name="Item">
-                    <a href="#" t-attf-data-target="#myCollapseTab{{uniq}}_2" role="tab" data-toggle="collapse" aria-expanded="false" class="collapsed card-header">Links to other Websites</a>
-                    <div t-attf-id="myCollapseTab{{uniq}}_2" class="collapse" data-parent="#myCollapse" role="tabpanel">
+                    <a href="#" t-attf-data-bs-target="#myCollapseTab{{uniq}}_2" role="tab" data-bs-toggle="collapse" aria-expanded="false" class="collapsed card-header">Links to other Websites</a>
+                    <div t-attf-id="myCollapseTab{{uniq}}_2" class="collapse" data-bs-parent="#myCollapse" role="tabpanel">
                         <div class="card-body">
                             <p class="card-text">Although this Website may be linked to other websites, we are not, directly or indirectly, implying any approval, association, sponsorship, endorsement, or affiliation with any linked website, unless specifically stated herein.</p>
                             <p class="card-text">You should carefully review the legal statements and other conditions of use of any website which you access through a link from this Website. Your linking to any other off-site pages or other websites is at your own risk.</p>
@@ -24,8 +24,8 @@
                     </div>
                 </div>
                 <div class="card bg-white" data-name="Item">
-                    <a href="#" t-attf-data-target="#myCollapseTab{{uniq}}_3" role="tab" data-toggle="collapse" aria-expanded="false" class="collapsed card-header">Use of Cookies</a>
-                    <div t-attf-id="myCollapseTab{{uniq}}_3" class="collapse" data-parent="#myCollapse" role="tabpanel">
+                    <a href="#" t-attf-data-bs-target="#myCollapseTab{{uniq}}_3" role="tab" data-bs-toggle="collapse" aria-expanded="false" class="collapsed card-header">Use of Cookies</a>
+                    <div t-attf-id="myCollapseTab{{uniq}}_3" class="collapse" data-bs-parent="#myCollapse" role="tabpanel">
                         <div class="card-body">
                             <p class="card-text">Website may use cookies to personalize and facilitate maximum navigation of the User by this site. The User may configure his / her browser to notify and reject the installation of the cookies sent by us.</p>
                         </div>
diff --git a/addons/website/views/snippets/s_hr.xml b/addons/website/views/snippets/s_hr.xml
index fc03ec21787..ddeed3a97b1 100644
--- a/addons/website/views/snippets/s_hr.xml
+++ b/addons/website/views/snippets/s_hr.xml
@@ -2,7 +2,7 @@
 <odoo>
 
 <template id="s_hr" name="Separator">
-    <div class="s_hr text-left pt32 pb32">
+    <div class="s_hr text-start pt32 pb32">
         <hr class="w-100 mx-auto" style="border-top-width: 1px; border-top-style: solid;"/>
     </div>
 </template>
@@ -21,9 +21,9 @@
                 <we-button data-select-class="w-100" data-name="so_width_100">100%</we-button>
             </we-select>
             <we-button-group string="Alignment" data-dependencies="!so_width_100">
-                <we-button class="fa fa-fw fa-align-left" title="Left" data-select-class="mr-auto"/>
+                <we-button class="fa fa-fw fa-align-left" title="Left" data-select-class="me-auto"/>
                 <we-button class="fa fa-fw fa-align-center" title="Center" data-select-class="mx-auto"/>
-                <we-button class="fa fa-fw fa-align-right" title="Right" data-select-class="ml-auto"/>
+                <we-button class="fa fa-fw fa-align-right" title="Right" data-select-class="ms-auto"/>
             </we-button-group>
         </div>
     </xpath>
diff --git a/addons/website/views/snippets/s_image_gallery.xml b/addons/website/views/snippets/s_image_gallery.xml
index f85e0b53621..a43c6bcd163 100644
--- a/addons/website/views/snippets/s_image_gallery.xml
+++ b/addons/website/views/snippets/s_image_gallery.xml
@@ -4,7 +4,7 @@
 <template id="s_image_gallery" name="Image Gallery">
     <section class="s_image_gallery o_slideshow s_image_gallery_show_indicators s_image_gallery_indicators_rounded pt24" data-vcss="001" data-columns="3" style="height: 500px; overflow: hidden;">
         <div class="container">
-            <div id="slideshow_sample" class="carousel slide" data-ride="carousel" data-interval="0" style="margin: 0 12px;">
+            <div id="slideshow_sample" class="carousel slide" data-bs-ride="carousel" data-bs-interval="0" style="margin: 0 12px;">
                 <div class="carousel-inner" style="padding: 0;">
                     <div class="carousel-item active">
                         <img class="img img-fluid d-block" src="/web/image/website.library_image_08" data-name="Image" data-index="0"/>
@@ -20,20 +20,20 @@
                     <li class="o_indicators_left text-center d-none" aria-label="Previous" title="Previous">
                         <i class="fa fa-chevron-left"/>
                     </li>
-                    <li data-target="#slideshow_sample" data-slide-to="0" style="background-image: url(/web/image/website.library_image_08)" class="active"/>
-                    <li data-target="#slideshow_sample" data-slide-to="1" style="background-image: url(/web/image/website.library_image_03)"/>
-                    <li data-target="#slideshow_sample" data-slide-to="2" style="background-image: url(/web/image/website.library_image_02)"/>
+                    <li data-bs-target="#slideshow_sample" data-bs-slide-to="0" style="background-image: url(/web/image/website.library_image_08)" class="active"/>
+                    <li data-bs-target="#slideshow_sample" data-bs-slide-to="1" style="background-image: url(/web/image/website.library_image_03)"/>
+                    <li data-bs-target="#slideshow_sample" data-bs-slide-to="2" style="background-image: url(/web/image/website.library_image_02)"/>
                     <li class="o_indicators_right text-center d-none" aria-label="Next" title="Next">
                         <i class="fa fa-chevron-right"/>
                     </li>
                 </ul>
-                <a class="carousel-control-prev o_we_no_overlay" href="#slideshow_sample" data-slide="prev" aria-label="Previous" title="Previous">
+                <a class="carousel-control-prev o_we_no_overlay" href="#slideshow_sample" data-bs-slide="prev" aria-label="Previous" title="Previous">
                     <span class="fa fa-chevron-left fa-2x text-white"/>
-                    <span class="sr-only">Previous</span>
+                    <span class="visually-hidden">Previous</span>
                 </a>
-                <a class="carousel-control-next o_we_no_overlay" href="#slideshow_sample" data-slide="next" aria-label="Next" title="Next">
+                <a class="carousel-control-next o_we_no_overlay" href="#slideshow_sample" data-bs-slide="next" aria-label="Next" title="Next">
                     <span class="fa fa-chevron-right fa-2x text-white"/>
-                    <span class="sr-only">Next</span>
+                    <span class="visually-hidden">Next</span>
                 </a>
             </div>
         </div>
diff --git a/addons/website/views/snippets/s_media_list.xml b/addons/website/views/snippets/s_media_list.xml
index 76e3499783d..9cd9e3e6c00 100644
--- a/addons/website/views/snippets/s_media_list.xml
+++ b/addons/website/views/snippets/s_media_list.xml
@@ -6,7 +6,7 @@
         <div class="container">
             <div class="row s_nb_column_fixed s_col_no_bgcolor">
                 <div class="col-lg-12 s_media_list_item pt16 pb16" data-name="Media item">
-                    <div class="row s_col_no_resize s_col_no_bgcolor no-gutters align-items-center o_cc o_cc1">
+                    <div class="row s_col_no_resize s_col_no_bgcolor g-0 align-items-center o_cc o_cc1">
                         <div class="col-lg-4 align-self-stretch s_media_list_img_wrapper">
                             <img src="/web/image/website.s_media_list_default_image_1" class="s_media_list_img h-100 w-100" alt=""/>
                         </div>
@@ -18,7 +18,7 @@
                     </div>
                 </div>
                 <div class="col-lg-12 s_media_list_item pt16 pb16" data-name="Media item">
-                    <div class="row s_col_no_resize s_col_no_bgcolor no-gutters align-items-center o_cc o_cc1">
+                    <div class="row s_col_no_resize s_col_no_bgcolor g-0 align-items-center o_cc o_cc1">
                         <div class="col-lg-4 align-self-stretch s_media_list_img_wrapper">
                             <img src="/web/image/website.s_media_list_default_image_2" class="s_media_list_img h-100 w-100" alt=""/>
                         </div>
@@ -29,14 +29,14 @@
                     </div>
                 </div>
                 <div class="col-lg-12 s_media_list_item pt16 pb16" data-name="Media item">
-                    <div class="row s_col_no_resize s_col_no_bgcolor no-gutters align-items-center o_cc o_cc1">
+                    <div class="row s_col_no_resize s_col_no_bgcolor g-0 align-items-center o_cc o_cc1">
                         <div class="col-lg-4 align-self-stretch s_media_list_img_wrapper">
                             <img src="/web/image/website.s_media_list_default_image_3" class="s_media_list_img h-100 w-100" alt=""/>
                         </div>
                         <div class="col-lg-8 s_media_list_body">
                             <h3>Post heading</h3>
                             <p>Use this component for creating a list of featured elements to which you want to bring attention.</p>
-                            <a href="#">Continue reading <i class="fa fa-long-arrow-right align-middle ml-1"/></a>
+                            <a href="#">Continue reading <i class="fa fa-long-arrow-right align-middle ms-1"/></a>
                         </div>
                     </div>
                 </div>
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 7cf0a320ff5..2482b0a7c32 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
@@ -71,7 +71,7 @@
 <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="d-flex align-items-center">
-            <i t-attf-class="fa rounded rounded-circle mr-3 #{_icon_classes}"/>
+            <i t-attf-class="fa rounded rounded-circle me-3 #{_icon_classes}"/>
             <div class="flex-grow-1">
                 <h4 class="mt-0 mb-0" t-esc="_title"/>
                 <span><font style="font-size: 14px;" t-esc="_text"/></span>
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 e7ce5a47aac..65cd6616645 100644
--- a/addons/website/views/snippets/s_mega_menu_images_subtitles.xml
+++ b/addons/website/views/snippets/s_mega_menu_images_subtitles.xml
@@ -59,7 +59,7 @@
 <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="d-flex">
-            <img t-att-src="_img_src" class="mr-3 rounded shadow" alt=""/>
+            <img t-att-src="_img_src" class="me-3 rounded shadow" alt=""/>
             <div class="flex-grow-1">
                 <h4 class="mt-0 mb-0" t-esc="_title"/>
                 <span><font style="font-size: 14px;" t-esc="_text"/></span>
diff --git a/addons/website/views/snippets/s_mega_menu_little_icons.xml b/addons/website/views/snippets/s_mega_menu_little_icons.xml
index e7f23c4a26e..3f1ba579711 100644
--- a/addons/website/views/snippets/s_mega_menu_little_icons.xml
+++ b/addons/website/views/snippets/s_mega_menu_little_icons.xml
@@ -8,15 +8,15 @@
                 <div class="col-12 col-sm py-2 d-flex align-items-center">
                     <nav class="nav flex-column">
                         <a href="#" class="nav-link o_default_snippet_text px-2 rounded text-wrap" data-name="Menu Item">
-                            <i class="s_mega_menu_little_icons_icon fa fa-eye fa-fw mr-2"></i>
+                            <i class="s_mega_menu_little_icons_icon fa fa-eye fa-fw me-2"></i>
                             <b>About us</b>
                         </a>
                         <a href="#" class="nav-link o_default_snippet_text px-2 text-wrap" data-name="Menu Item">
-                            <i class="s_mega_menu_little_icons_icon fa fa-group fa-fw mr-2"></i>
+                            <i class="s_mega_menu_little_icons_icon fa fa-group fa-fw me-2"></i>
                             <b>Partners</b>
                         </a>
                         <a href="#" class="nav-link o_default_snippet_text px-2 text-wrap" data-name="Menu Item">
-                            <i class="s_mega_menu_little_icons_icon fa fa-star-o fa-fw mr-2"></i>
+                            <i class="s_mega_menu_little_icons_icon fa fa-star-o fa-fw me-2"></i>
                             <b>Customers</b>
                         </a>
                     </nav>
@@ -24,15 +24,15 @@
                 <div class="col-12 col-sm py-2 d-flex align-items-center">
                     <nav class="nav flex-column">
                         <a href="#" class="nav-link o_default_snippet_text px-2 rounded text-wrap" data-name="Menu Item">
-                            <i class="s_mega_menu_little_icons_icon fa fa-tags fa-fw mr-2"></i>
+                            <i class="s_mega_menu_little_icons_icon fa fa-tags fa-fw me-2"></i>
                             <b>Products</b>
                         </a>
                         <a href="#" class="nav-link o_default_snippet_text px-2 rounded text-wrap" data-name="Menu Item">
-                            <i class="s_mega_menu_little_icons_icon fa fa-handshake-o fa-fw mr-2"></i>
+                            <i class="s_mega_menu_little_icons_icon fa fa-handshake-o fa-fw me-2"></i>
                             <b>Services</b>
                         </a>
                         <a href="#" class="nav-link o_default_snippet_text px-2 rounded text-wrap" data-name="Menu Item">
-                            <i class="s_mega_menu_little_icons_icon fa fa-headphones fa-fw mr-2"></i>
+                            <i class="s_mega_menu_little_icons_icon fa fa-headphones fa-fw me-2"></i>
                             <b>Help center</b>
                         </a>
                     </nav>
@@ -40,15 +40,15 @@
                 <div class="col-12 col-sm py-2 d-flex align-items-center">
                     <nav class="nav flex-column">
                         <a href="#" class="nav-link o_default_snippet_text px-2 rounded text-wrap" data-name="Menu Item">
-                            <i class="s_mega_menu_little_icons_icon fa fa-newspaper-o fa-fw mr-2"></i>
+                            <i class="s_mega_menu_little_icons_icon fa fa-newspaper-o fa-fw me-2"></i>
                             <b>Our blog</b>
                         </a>
                         <a href="#" class="nav-link o_default_snippet_text px-2 rounded text-wrap" data-name="Menu Item">
-                            <i class="s_mega_menu_little_icons_icon fa fa-calendar fa-fw mr-2"></i>
+                            <i class="s_mega_menu_little_icons_icon fa fa-calendar fa-fw me-2"></i>
                             <b>Events</b>
                         </a>
                         <a href="#" class="nav-link o_default_snippet_text px-2 rounded text-wrap" data-name="Menu Item">
-                            <i class="s_mega_menu_little_icons_icon fa fa-map-o fa-fw mr-2"></i>
+                            <i class="s_mega_menu_little_icons_icon fa fa-map-o fa-fw me-2"></i>
                             <b>Guides</b>
                         </a>
                     </nav>
diff --git a/addons/website/views/snippets/s_mega_menu_odoo_menu.xml b/addons/website/views/snippets/s_mega_menu_odoo_menu.xml
index a7bc77fea39..3358c7b459a 100644
--- a/addons/website/views/snippets/s_mega_menu_odoo_menu.xml
+++ b/addons/website/views/snippets/s_mega_menu_odoo_menu.xml
@@ -6,8 +6,8 @@
         <div class="container">
             <div class="row">
                 <div class="col-md-6 col-lg pt16 pb24">
-                    <h4 class="o_default_snippet_text text-uppercase h5 font-weight-bold mt-0">Computers &amp; Devices</h4>
-                    <div class="s_hr text-left pt4 pb16 text-o-color-3">
+                    <h4 class="o_default_snippet_text text-uppercase h5 fw-bold mt-0">Computers &amp; Devices</h4>
+                    <div class="s_hr text-start pt4 pb16 text-o-color-3">
                         <hr class="w-100 mx-auto" style="border-top-width: 2px; border-top-style: solid;"/>
                     </div>
                     <nav class="nav flex-column">
@@ -20,8 +20,8 @@
                     </nav>
                 </div>
                 <div class="col-md-6 col-lg pt16 pb24">
-                    <h4 class="o_default_snippet_text text-uppercase h5 font-weight-bold mt-0">Monitors</h4>
-                    <div class="s_hr text-left pt4 pb16 text-o-color-1">
+                    <h4 class="o_default_snippet_text text-uppercase h5 fw-bold mt-0">Monitors</h4>
+                    <div class="s_hr text-start pt4 pb16 text-o-color-1">
                         <hr class="w-100 mx-auto" style="border-top-width: 2px; border-top-style: solid;"/>
                     </div>
                     <nav class="nav flex-column">
@@ -31,8 +31,8 @@
                     </nav>
                 </div>
                 <div class="col-md-6 col-lg pt16 pb24">
-                    <h4 class="o_default_snippet_text text-uppercase h5 font-weight-bold mt-0">Electronics</h4>
-                    <div class="s_hr text-left pt4 pb16 text-o-color-2">
+                    <h4 class="o_default_snippet_text text-uppercase h5 fw-bold mt-0">Electronics</h4>
+                    <div class="s_hr text-start pt4 pb16 text-o-color-2">
                         <hr class="w-100 mx-auto" style="border-top-width: 2px; border-top-style: solid;"/>
                     </div>
                     <nav class="nav flex-column">
@@ -44,8 +44,8 @@
                     </nav>
                 </div>
                 <div class="col-md-6 col-lg pt16 pb24">
-                    <h4 class="o_default_snippet_text text-uppercase h5 font-weight-bold mt-0">Promotions</h4>
-                    <div class="s_hr text-left pt4 pb16 text-o-color-5">
+                    <h4 class="o_default_snippet_text text-uppercase h5 fw-bold mt-0">Promotions</h4>
+                    <div class="s_hr text-start pt4 pb16 text-o-color-5">
                         <hr class="w-100 mx-auto" style="border-top-width: 2px; border-top-style: solid;"/>
                     </div>
                     <nav class="nav flex-column">
@@ -62,22 +62,22 @@
                 <div class="col-12 pt8 pb8">
                     <div class="s_social_media text-center o_not_editable" data-snippet="s_social_media" data-name="Social Media" contenteditable="false">
                         <h5 class="s_social_media_title d-none" contenteditable="true">Follow us</h5>
-                        <a href="/website/social/facebook" class="s_social_media_facebook mr-3 ml-3" target="_blank">
+                        <a href="/website/social/facebook" class="s_social_media_facebook me-3 ms-3" target="_blank">
                             <i class="fa fa-2x fa-facebook m-1"/>
                         </a>
-                        <a href="/website/social/twitter" class="s_social_media_twitter mr-3 ml-3" target="_blank">
+                        <a href="/website/social/twitter" class="s_social_media_twitter me-3 ms-3" target="_blank">
                             <i class="fa fa-2x fa-twitter m-1"/>
                         </a>
-                        <a href="/website/social/linkedin" class="s_social_media_linkedin mr-3 ml-3" target="_blank">
+                        <a href="/website/social/linkedin" class="s_social_media_linkedin me-3 ms-3" target="_blank">
                             <i class="fa fa-2x fa-linkedin m-1"/>
                         </a>
-                        <a href="/website/social/github" class="s_social_media_github mr-3 ml-3" target="_blank">
+                        <a href="/website/social/github" class="s_social_media_github me-3 ms-3" target="_blank">
                             <i class="fa fa-2x fa-github m-1"/>
                         </a>
-                        <a href="/website/social/youtube" class="s_social_media_youtube mr-3 ml-3" target="_blank">
+                        <a href="/website/social/youtube" class="s_social_media_youtube me-3 ms-3" target="_blank">
                             <i class="fa fa-2x fa-youtube m-1"/>
                         </a>
-                        <a href="/website/social/instagram" class="s_social_media_instagram mr-3 ml-3" target="_blank">
+                        <a href="/website/social/instagram" class="s_social_media_instagram me-3 ms-3" target="_blank">
                             <i class="fa fa-2x fa-instagram m-1"/>
                         </a>
                     </div>
diff --git a/addons/website/views/snippets/s_mega_menu_thumbnails.xml b/addons/website/views/snippets/s_mega_menu_thumbnails.xml
index 5f0f92d36d7..722a27e0106 100644
--- a/addons/website/views/snippets/s_mega_menu_thumbnails.xml
+++ b/addons/website/views/snippets/s_mega_menu_thumbnails.xml
@@ -68,22 +68,22 @@
             <div class="container row mx-auto px-0 w-100 align-items-center">
                 <div class="col-12 col-md-6 col-lg d-flex justify-content-center align-items-center py-2">
                     <p class="text-muted align-middle m-0">
-                        <i class="s_mega_menu_thumbnails_icon fa fa-cube mr-2"></i> Free returns
+                        <i class="s_mega_menu_thumbnails_icon fa fa-cube me-2"></i> Free returns
                     </p>
                 </div>
                 <div class="col-12 col-md-6 col-lg d-flex justify-content-center align-items-center py-2">
                     <p class="text-muted align-middle m-0">
-                        <i class="s_mega_menu_thumbnails_icon fa fa-shopping-basket mr-2"></i> Pickup in store
+                        <i class="s_mega_menu_thumbnails_icon fa fa-shopping-basket me-2"></i> Pickup in store
                     </p>
                 </div>
                 <div class="col-12 col-md-6 col-lg d-flex justify-content-center align-items-center py-2">
                     <p class="text-muted align-middle m-0">
-                        <i class="s_mega_menu_thumbnails_icon fa fa-truck mr-2"></i> Express delivery
+                        <i class="s_mega_menu_thumbnails_icon fa fa-truck me-2"></i> Express delivery
                     </p>
                 </div>
                 <div class="col-12 col-md-6 col-lg py-2">
                     <a href="#" class="btn btn-secondary d-block o_default_snippet_text">
-                        <i class="s_mega_menu_thumbnails_icon fa fa-comments mr-2"></i> Contact us
+                        <i class="s_mega_menu_thumbnails_icon fa fa-comments me-2"></i> Contact us
                     </a>
                 </div>
             </div>
diff --git a/addons/website/views/snippets/s_popup.xml b/addons/website/views/snippets/s_popup.xml
index a0821b03f48..21e56020167 100644
--- a/addons/website/views/snippets/s_popup.xml
+++ b/addons/website/views/snippets/s_popup.xml
@@ -3,7 +3,7 @@
 
 <template id="s_popup" name="Popup">
     <div class="s_popup o_snippet_invisible" data-vcss="001">
-        <div class="modal fade s_popup_middle" style="background-color: var(--black-50) !important;" data-show-after="5000" data-display="afterDelay" data-consents-duration="7" data-focus="false" data-backdrop="false" tabindex="-1" role="dialog">
+        <div class="modal fade s_popup_middle" style="background-color: var(--black-50) !important;" data-show-after="5000" data-display="afterDelay" data-consents-duration="7" data-focus="false" data-bs-backdrop="false" tabindex="-1" role="dialog">
             <div class="modal-dialog d-flex">
                 <div class="modal-content oe_structure">
                     <div class="s_popup_close js_close_popup o_we_no_overlay o_not_editable" aria-label="Close">&#215;</div>
diff --git a/addons/website/views/snippets/s_process_steps.xml b/addons/website/views/snippets/s_process_steps.xml
index d3fc0ae7397..b76ed267434 100644
--- a/addons/website/views/snippets/s_process_steps.xml
+++ b/addons/website/views/snippets/s_process_steps.xml
@@ -11,7 +11,7 @@
             </defs>
         </svg>
         <div class="container">
-            <div class="row no-gutters">
+            <div class="row g-0">
                 <div class="col-lg-3 s_process_step pt24 pb24">
                     <svg class="s_process_step_connector" viewBox="0 0 100 20" preserveAspectRatio="none">
                         <path d="M 0 10 L 100 10" vector-effect="non-scaling-stroke"/>
diff --git a/addons/website/views/snippets/s_product_catalog.xml b/addons/website/views/snippets/s_product_catalog.xml
index b38eeff60b2..2a256df8df3 100644
--- a/addons/website/views/snippets/s_product_catalog.xml
+++ b/addons/website/views/snippets/s_product_catalog.xml
@@ -50,7 +50,7 @@
     <li class="s_product_catalog_dish" data-name="Product">
         <p class="s_product_catalog_dish_title d-flex align-items-baseline pb-2">
             <span t-esc="name" class="s_product_catalog_dish_name s_product_catalog_dish_dot_leaders"/>
-            <span t-esc="price" class="s_product_catalog_dish_price ml-auto pl-2"/>
+            <span t-esc="price" class="s_product_catalog_dish_price ms-auto ps-2"/>
         </p>
     </li>
 </template>
diff --git a/addons/website/views/snippets/s_quotes_carousel.xml b/addons/website/views/snippets/s_quotes_carousel.xml
index 8356976c1d8..3fd12b00801 100644
--- a/addons/website/views/snippets/s_quotes_carousel.xml
+++ b/addons/website/views/snippets/s_quotes_carousel.xml
@@ -4,12 +4,12 @@
 <template id="s_quotes_carousel" name="Quotes">
     <section class="s_quotes_carousel_wrapper" data-vxml="001" data-vcss="001">
         <t t-set="uniq" t-value="datetime.datetime.now().microsecond"/>
-        <div t-attf-id="myQuoteCarousel{{uniq}}" class="s_quotes_carousel s_carousel_default carousel slide o_cc o_cc2" data-interval="10000">
+        <div t-attf-id="myQuoteCarousel{{uniq}}" class="s_quotes_carousel s_carousel_default carousel slide o_cc o_cc2" data-bs-interval="10000">
             <!-- Indicators -->
             <ol class="carousel-indicators">
-                <li t-attf-data-target="#myQuoteCarousel{{uniq}}" data-slide-to="0" class="active"/>
-                <li t-attf-data-target="#myQuoteCarousel{{uniq}}" data-slide-to="1"/>
-                <li t-attf-data-target="#myQuoteCarousel{{uniq}}" data-slide-to="2"/>
+                <li t-attf-data-bs-target="#myQuoteCarousel{{uniq}}" data-bs-slide-to="0" class="active"/>
+                <li t-attf-data-bs-target="#myQuoteCarousel{{uniq}}" data-bs-slide-to="1"/>
+                <li t-attf-data-bs-target="#myQuoteCarousel{{uniq}}" data-bs-slide-to="2"/>
             </ol>
             <!-- Content -->
             <div class="carousel-inner">
@@ -17,11 +17,11 @@
                 <div class="carousel-item active oe_img_bg o_bg_img_center pt80 pb80" style="background-image: url('/web/image/website.s_quotes_carousel_demo_image_0'); background-position: 50% 50%;" data-name="Slide">
                     <div class="container">
                         <blockquote class="s_blockquote s_blockquote_classic blockquote mx-auto w-50" data-name="Blockquote">
-                            <i class="fa fa-1x fa-quote-left rounded float-left bg-o-color-2 s_blockquote_icon"/>
+                            <i class="fa fa-1x fa-quote-left rounded float-start bg-o-color-2 s_blockquote_icon"/>
                             <div class="s_blockquote_content o_cc1">
                                 <p>Write a quote here from one of your customers. Quotes are a great way to build confidence in your products or services.</p>
                                 <footer class="blockquote-footer">
-                                    <img src="/web/image/website.s_quotes_carousel_demo_image_3" class="s_blockquote_avatar img rounded-circle mr-2" alt=""/>
+                                    <img src="/web/image/website.s_quotes_carousel_demo_image_3" class="s_blockquote_avatar img rounded-circle me-2" alt=""/>
                                     <span class="s_blockquote_author"><b>Jane DOE</b> &#8226; CEO of MyCompany</span>
                                 </footer>
                             </div>
@@ -31,12 +31,12 @@
                 <!-- #02 -->
                 <div class="carousel-item oe_img_bg o_bg_img_center pt80 pb80" style="background-image: url('/web/image/website.s_quotes_carousel_demo_image_1'); background-position: 50% 50%;" data-name="Slide">
                     <div class="container">
-                        <blockquote class="s_blockquote s_blockquote_classic blockquote mr-auto w-50" data-name="Blockquote">
-                            <i class="fa fa-1x fa-quote-left rounded float-left bg-o-color-2 s_blockquote_icon"/>
+                        <blockquote class="s_blockquote s_blockquote_classic blockquote me-auto w-50" data-name="Blockquote">
+                            <i class="fa fa-1x fa-quote-left rounded float-start bg-o-color-2 s_blockquote_icon"/>
                             <div class="s_blockquote_content o_cc1">
                                 <p>Write a quote here from one of your customers. Quotes are a great way to build confidence in your products or services.</p>
                                 <footer class="blockquote-footer">
-                                    <img src="/web/image/website.s_quotes_carousel_demo_image_4" class="s_blockquote_avatar img rounded-circle mr-2" alt=""/>
+                                    <img src="/web/image/website.s_quotes_carousel_demo_image_4" class="s_blockquote_avatar img rounded-circle me-2" alt=""/>
                                     <span class="s_blockquote_author"><b>John DOE</b> &#8226; CEO of MyCompany</span>
                                 </footer>
                             </div>
@@ -46,12 +46,12 @@
                 <!-- #03 -->
                 <div class="carousel-item oe_img_bg o_bg_img_center pt80 pb80" style="background-image: url('/web/image/website.s_quotes_carousel_demo_image_2'); background-position: 50% 50%;" data-name="Slide">
                     <div class="container">
-                        <blockquote class="s_blockquote s_blockquote_classic blockquote ml-auto w-50" data-name="Blockquote">
-                            <i class="fa fa-1x fa-quote-left rounded float-left bg-o-color-2 s_blockquote_icon"/>
+                        <blockquote class="s_blockquote s_blockquote_classic blockquote ms-auto w-50" data-name="Blockquote">
+                            <i class="fa fa-1x fa-quote-left rounded float-start bg-o-color-2 s_blockquote_icon"/>
                             <div class="s_blockquote_content o_cc1">
                                 <p>Write a quote here from one of your customers. Quotes are a great way to build confidence in your products or services.</p>
                                 <footer class="blockquote-footer">
-                                    <img src="/web/image/website.s_quotes_carousel_demo_image_5" class="s_blockquote_avatar img rounded-circle mr-2" alt=""/>
+                                    <img src="/web/image/website.s_quotes_carousel_demo_image_5" class="s_blockquote_avatar img rounded-circle me-2" alt=""/>
                                     <span class="s_blockquote_author"><b>Iris DOE</b> &#8226; CEO of MyCompany</span>
                                 </footer>
                             </div>
@@ -60,13 +60,13 @@
                 </div>
             </div>
             <!-- Controls -->
-            <div class="carousel-control-prev o_not_editable" t-attf-data-target="#myQuoteCarousel{{uniq}}" data-slide="prev" role="img" aria-label="Previous" title="Previous">
+            <div class="carousel-control-prev o_not_editable" t-attf-data-bs-target="#myQuoteCarousel{{uniq}}" data-bs-slide="prev" role="img" aria-label="Previous" title="Previous">
                 <span class="carousel-control-prev-icon"/>
-                <span class="sr-only">Previous</span>
+                <span class="visually-hidden">Previous</span>
             </div>
-            <div class="carousel-control-next o_not_editable" t-attf-data-target="#myQuoteCarousel{{uniq}}" data-slide="next" role="img" aria-label="Next" title="Next">
+            <div class="carousel-control-next o_not_editable" t-attf-data-bs-target="#myQuoteCarousel{{uniq}}" data-bs-slide="next" role="img" aria-label="Next" title="Next">
                 <span class="carousel-control-next-icon"/>
-                <span class="sr-only">Next</span>
+                <span class="visually-hidden">Next</span>
             </div>
         </div>
     </section>
diff --git a/addons/website/views/snippets/s_rating.xml b/addons/website/views/snippets/s_rating.xml
index 30bf0a45d63..7ab7754ec2e 100644
--- a/addons/website/views/snippets/s_rating.xml
+++ b/addons/website/views/snippets/s_rating.xml
@@ -32,13 +32,13 @@
             <we-row string="&#8985; Active">
                 <we-colorpicker data-select-style="" data-apply-to=".s_rating_active_icons" data-css-property="color" data-color-prefix="text-"/>
                 <we-button data-custom-icon="true" data-custom-active-icon="true" data-no-preview="true">
-                    <i class="fa fa-fw fa-refresh mr-1"/> Replace Icon
+                    <i class="fa fa-fw fa-refresh me-1"/> Replace Icon
                 </we-button>
             </we-row>
             <we-row string="&#8985; Inactive">
                 <we-colorpicker data-select-style="" data-apply-to=".s_rating_inactive_icons" data-css-property="color" data-color-prefix="text-"/>
                 <we-button data-custom-icon="true" data-custom-active-icon="false" data-no-preview="true">
-                    <i class="fa fa-fw fa-refresh mr-1"/> Replace Icon
+                    <i class="fa fa-fw fa-refresh me-1"/> Replace Icon
                 </we-button>
             </we-row>
             <we-row string="Score">
diff --git a/addons/website/views/snippets/s_share.xml b/addons/website/views/snippets/s_share.xml
index 2eac792bb74..d8edb7b7df3 100644
--- a/addons/website/views/snippets/s_share.xml
+++ b/addons/website/views/snippets/s_share.xml
@@ -2,7 +2,7 @@
 <odoo>
 
 <template id="s_share" name="Share">
-    <div t-attf-class="s_share text-left #{_classes}">
+    <div t-attf-class="s_share text-start #{_classes}">
         <h4 t-if="not _no_title" class="s_share_title d-none">Share</h4>
         <a t-if="not _exclude_share_links or not 'facebook' in _exclude_share_links" href="https://www.facebook.com/sharer/sharer.php?u={url}" t-attf-class="s_share_facebook #{_link_classes}" target="_blank">
             <i t-attf-class="fa fa-facebook #{not _link_classes and 'rounded shadow-sm'}"/>
diff --git a/addons/website/views/snippets/s_showcase.xml b/addons/website/views/snippets/s_showcase.xml
index b0052a184e6..4aab5d166ee 100644
--- a/addons/website/views/snippets/s_showcase.xml
+++ b/addons/website/views/snippets/s_showcase.xml
@@ -5,19 +5,19 @@
 <template name="Showcase" id="s_showcase">
     <section class="s_showcase pt48 pb48" data-vcss="002">
         <div class="container">
-            <div class="row no-gutters s_col_no_resize s_col_no_bgcolor s_nb_column_fixed">
-                <div class="col-lg text-lg-right">
+            <div class="row g-0 s_col_no_resize s_col_no_bgcolor s_nb_column_fixed">
+                <div class="col-lg text-lg-end">
                     <div class="row">
                         <div class="col-lg-12 pt24 pb24" data-name="Block">
                             <div class="s_showcase_title d-flex flex-lg-row-reverse mb-2">
-                                <i class="s_showcase_icon fa fa-2x fa-desktop text-secondary mr-3 mr-lg-0 ml-lg-3"/>
+                                <i class="s_showcase_icon fa fa-2x fa-desktop text-secondary me-3 me-lg-0 ms-lg-3"/>
                                 <h3>First feature</h3>
                             </div>
                             <p>A short description of this great feature.</p>
                         </div>
                         <div class="col-lg-12 pt24 pb24" data-name="Block">
                             <div class="s_showcase_title d-flex flex-lg-row-reverse mb-2">
-                                <i class="s_showcase_icon fa fa-2x fa-paint-brush text-secondary mr-3 mr-lg-0 ml-lg-3"/>
+                                <i class="s_showcase_icon fa fa-2x fa-paint-brush text-secondary me-3 me-lg-0 ms-lg-3"/>
                                 <h3>Second feature</h3>
                             </div>
                             <p>A short description of this great feature.</p>
@@ -25,20 +25,20 @@
                     </div>
                 </div>
                 <div class="col-1">
-                    <div class="w-50 h-100 border-right"/>
+                    <div class="w-50 h-100 border-end"/>
                 </div>
                 <div class="col-lg">
                     <div class="row">
                         <div class="col-lg-12 pt24 pb24" data-name="Block">
                             <div class="s_showcase_title d-flex mb-2">
-                                <i class="s_showcase_icon fa fa-2x fa-heart text-secondary mr-3"/>
+                                <i class="s_showcase_icon fa fa-2x fa-heart text-secondary me-3"/>
                                 <h3>Another feature</h3>
                             </div>
                             <p>A short description of this great feature.</p>
                         </div>
                         <div class="col-lg-12 pt24 pb24" data-name="Block">
                             <div class="s_showcase_title d-flex mb-2">
-                                <i class="s_showcase_icon fa fa-2x fa-gift text-secondary mr-3"/>
+                                <i class="s_showcase_icon fa fa-2x fa-gift text-secondary me-3"/>
                                 <h3>Last Feature</h3>
                             </div>
                             <p>A short description of this great feature.</p>
diff --git a/addons/website/views/snippets/s_social_media.xml b/addons/website/views/snippets/s_social_media.xml
index 59d580e7c40..9c48389a757 100644
--- a/addons/website/views/snippets/s_social_media.xml
+++ b/addons/website/views/snippets/s_social_media.xml
@@ -2,7 +2,7 @@
 <odoo>
 
 <template id="s_social_media" name="Social Media">
-    <div class="s_social_media text-left o_not_editable" contenteditable="false">
+    <div class="s_social_media text-start o_not_editable" contenteditable="false">
         <h4 class="s_social_media_title d-none" contenteditable="true">Social Media</h4>
         <a href="/website/social/facebook" class="s_social_media_facebook" target="_blank">
             <i class="fa fa-facebook rounded shadow-sm"/>
diff --git a/addons/website/views/snippets/s_tabs.xml b/addons/website/views/snippets/s_tabs.xml
index edaf4b4ad04..aeb36159a0b 100644
--- a/addons/website/views/snippets/s_tabs.xml
+++ b/addons/website/views/snippets/s_tabs.xml
@@ -8,13 +8,13 @@
                 <div class="s_tabs_nav mb-3">
                     <ul class="nav nav-pills" role="tablist">
                         <li class="nav-item">
-                            <a class="nav-link active" id="nav_tabs_link_1" data-toggle="tab" href="#nav_tabs_content_1" role="tab" aria-controls="nav_tabs_content_1" aria-selected="true">Home</a>
+                            <a class="nav-link active" id="nav_tabs_link_1" data-bs-toggle="tab" href="#nav_tabs_content_1" role="tab" aria-controls="nav_tabs_content_1" aria-selected="true">Home</a>
                         </li>
                         <li class="nav-item">
-                            <a class="nav-link" id="nav_tabs_link_2" data-toggle="tab" href="#nav_tabs_content_2" role="tab" aria-controls="nav_tabs_content_2" aria-selected="false">Profile</a>
+                            <a class="nav-link" id="nav_tabs_link_2" data-bs-toggle="tab" href="#nav_tabs_content_2" role="tab" aria-controls="nav_tabs_content_2" aria-selected="false">Profile</a>
                         </li>
                         <li class="nav-item">
-                            <a class="nav-link" id="nav_tabs_link_3" data-toggle="tab" href="#nav_tabs_content_3" role="tab" aria-controls="nav_tabs_content_3" aria-selected="false">Contact</a>
+                            <a class="nav-link" id="nav_tabs_link_3" data-bs-toggle="tab" href="#nav_tabs_content_3" role="tab" aria-controls="nav_tabs_content_3" aria-selected="false">Contact</a>
                         </li>
                     </ul>
                 </div>
@@ -55,10 +55,10 @@
 <template id="s_tabs_options" inherit_id="website.snippet_options">
     <xpath expr="." position="inside">
         <div data-js="NavTabs" data-selector="section.s_tabs">
-            <we-button data-add-item="" data-item=".tab-pane.active" data-no-preview="true" class="o_we_text_success ml-0" title="Add Tab" aria-label="Add Tab">
+            <we-button data-add-item="" data-item=".tab-pane.active" data-no-preview="true" class="o_we_text_success ms-0" title="Add Tab" aria-label="Add Tab">
                 <i class="fa fa-fw fa-plus"/>
             </we-button>
-            <we-button data-remove-item="" data-item=".tab-pane.active" data-name="remove_tab_opt" data-no-preview="true" class="o_we_text_danger mr-3" title="Remove Tab" aria-label="Remove Tab">
+            <we-button data-remove-item="" data-item=".tab-pane.active" data-name="remove_tab_opt" data-no-preview="true" class="o_we_text_danger me-3" title="Remove Tab" aria-label="Remove Tab">
                 <i class="fa fa-fw fa-minus"/>
             </we-button>
         </div>
diff --git a/addons/website/views/snippets/s_website_form.xml b/addons/website/views/snippets/s_website_form.xml
index 1f532753454..7b079fbfecb 100644
--- a/addons/website/views/snippets/s_website_form.xml
+++ b/addons/website/views/snippets/s_website_form.xml
@@ -197,9 +197,9 @@
 
         <div data-js="WebsiteFormSubmit" data-selector=".s_website_form_submit" data-exclude=".s_website_form_no_submit_options">
             <we-select string="Button Position">
-                <we-button data-select-class="text-left s_website_form_no_submit_label">Left</we-button>
+                <we-button data-select-class="text-start s_website_form_no_submit_label">Left</we-button>
                 <we-button data-select-class="text-center s_website_form_no_submit_label">Center</we-button>
-                <we-button data-select-class="text-right s_website_form_no_submit_label">Right</we-button>
+                <we-button data-select-class="text-end s_website_form_no_submit_label">Right</we-button>
                 <we-button data-select-class="">Input Aligned</we-button>
             </we-select>
         </div>
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index 4cdf7e52337..b76108c3d40 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -262,7 +262,7 @@
             <we-button title="Solid" data-select-style="solid"><div class="o_we_fake_img_item o_we_border_preview" style="border-style: solid;"/></we-button>
             <we-button title="Dashed" data-select-style="dashed"><div class="o_we_fake_img_item o_we_border_preview" style="border-style: dashed;"/></we-button>
             <we-button title="Dotted" data-select-style="dotted"><div class="o_we_fake_img_item o_we_border_preview" style="border-style: dotted;"/></we-button>
-            <we-button title="Double" data-select-style="double"><div class="o_we_fake_img_item o_we_border_preview" style="border-style: double; border-left: none; border-right: none;"/></we-button>
+            <we-button title="Double" data-select-style="double"><div class="o_we_fake_img_item o_we_border_preview" style="border-style: double; border-start: none; border-end: none;"/></we-button>
         </we-select>
         <we-colorpicker data-dependencies="border_width_opt"
                         t-att-data-apply-to="apply_to"
@@ -362,9 +362,9 @@
     <!-- H-ALIGN -->
     <div id="so_text_align" data-selector=".s_share, .s_text_highlight, .s_social_media">
         <we-button-group string="Alignment">
-            <we-button class="fa fa-fw fa-align-left" title="Left" data-select-class="text-left"/>
+            <we-button class="fa fa-fw fa-align-left" title="Left" data-select-class="text-start"/>
             <we-button class="fa fa-fw fa-align-center" title="Center" data-select-class="text-center"/>
-            <we-button class="fa fa-fw fa-align-right" title="Right" data-select-class="text-right"/>
+            <we-button class="fa fa-fw fa-align-right" title="Right" data-select-class="text-end"/>
         </we-button-group>
     </div>
 
@@ -400,9 +400,9 @@
 
     <div id="so_block_align" data-selector=".s_alert, .s_card, .s_blockquote, .s_text_highlight">
         <we-button-group string="Alignment" data-dependencies="!so_width_100">
-            <we-button class="fa fa-fw fa-align-left" title="Left" data-select-class="mr-auto"/>
+            <we-button class="fa fa-fw fa-align-left" title="Left" data-select-class="me-auto"/>
             <we-button class="fa fa-fw fa-align-center" title="Center" data-select-class="mx-auto"/>
-            <we-button class="fa fa-fw fa-align-right" title="Right" data-select-class="ml-auto"/>
+            <we-button class="fa fa-fw fa-align-right" title="Right" data-select-class="ms-auto"/>
         </we-button-group>
     </div>
 
@@ -444,8 +444,8 @@
 
     <div data-js="CarouselItem"
          data-selector=".s_carousel .carousel-item, .s_quotes_carousel .carousel-item">
-        <we-button class="fa fa-fw fa-angle-left" data-slide="left" data-no-preview="true" data-tooltip="true" title="Move Backward"/>
-        <we-button class="fa fa-fw fa-angle-right mr-2" data-slide="right" data-no-preview="true" data-tooltip="true" title="Move Forward"/>
+        <we-button class="fa fa-fw fa-angle-left" data-bs-slide="left" data-no-preview="true" data-tooltip="true" title="Move Backward"/>
+        <we-button class="fa fa-fw fa-angle-right me-2" data-bs-slide="right" data-no-preview="true" data-tooltip="true" title="Move Forward"/>
         <we-button class="fa fa-fw fa-plus o_we_bg_success" data-add-slide-item="true" data-no-preview="true" data-tooltip="true" title="Add Slide"/>
         <we-button class="fa fa-fw fa-minus o_we_bg_danger" data-remove-slide="true" data-no-preview="true" data-tooltip="true" title="Remove Slide"/>
     </div>
@@ -1068,7 +1068,7 @@
                 <t t-set="with_color_combinations" t-value="True"/>
                 <t t-set="with_gradients" t-value="True"/>
             </t>
-            <we-button-group class="ml-auto">
+            <we-button-group class="ms-auto">
                 <we-imagepicker title="Image" data-background="" data-button-style="true"/>
                 <we-button class="fa fa-fw fa-ban" title="None" data-background="">
                 </we-button>
@@ -1088,7 +1088,7 @@
         <we-select string="Text Alignment" data-name="text_align_opt" data-cover-opt-name="text_align">
             <we-button data-select-class="">Left</we-button>
             <we-button data-select-class="text-center">Centered</we-button>
-            <we-button data-select-class="text-right">Right</we-button>
+            <we-button data-select-class="text-end">Right</we-button>
         </we-select>
     </div>
 
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index 52dd15c0941..53459b7e14f 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -16,7 +16,7 @@
         (submenu.clean_url() and submenu.clean_url() != '/' and any(request.httprequest.path == child.url for child in submenu.child_id if child.url) or
          (submenu.clean_url() and request.httprequest.path == submenu.clean_url())) and 'active'
         } #{submenu.is_mega_menu and 'position-static'}">
-        <a t-attf-class="#{link_class or ''} dropdown-toggle #{submenu.is_mega_menu and 'o_mega_menu_toggle'}" data-toggle="dropdown" href="#">
+        <a t-attf-class="#{link_class or ''} dropdown-toggle #{submenu.is_mega_menu and 'o_mega_menu_toggle'}" data-bs-toggle="dropdown" href="#">
             <span t-field="submenu.name"/>
         </a>
         <div t-if="submenu.is_mega_menu"
@@ -221,7 +221,7 @@
 
 <!-- Navbar -->
 <template id="navbar_toggler" name="Navbar Toggler">
-    <button type="button" t-attf-class="navbar-toggler #{_toggler_class}" data-toggle="collapse" data-target="#top_menu_collapse">
+    <button type="button" t-attf-class="navbar-toggler #{_toggler_class}" data-bs-toggle="collapse" data-bs-target="#top_menu_collapse">
         <span class="navbar-toggler-icon o_not_editable"/>
     </button>
 </template>
@@ -249,7 +249,7 @@
             <div id="top_menu_container" class="container justify-content-start justify-content-lg-between">
                 <!-- Brand -->
                 <t t-call="website.placeholder_header_brand">
-                    <t t-set="_link_class" t-valuef="mr-4"/>
+                    <t t-set="_link_class" t-valuef="me-4"/>
                 </t>
                 <!-- Navbar Collapse -->
                 <div id="top_menu_collapse" class="collapse navbar-collapse order-last order-lg-0">
@@ -264,29 +264,29 @@
                         </t>
                         <!-- Sign In -->
                         <t t-call="portal.placeholder_user_sign_in">
-                            <t t-set="_item_class" t-valuef="nav-item ml-lg-auto"/>
-                            <t t-set="_link_class" t-valuef="nav-link font-weight-bold"/>
+                            <t t-set="_item_class" t-valuef="nav-item ms-lg-auto"/>
+                            <t t-set="_link_class" t-valuef="nav-link fw-bold"/>
                         </t>
                         <!-- User Dropdown -->
                         <t t-call="portal.user_dropdown">
                             <t t-set="_user_name" t-value="true"/>
-                            <t t-set="_item_class" t-valuef="nav-item dropdown ml-lg-auto"/>
-                            <t t-set="_link_class" t-valuef="nav-link font-weight-bold"/>
+                            <t t-set="_item_class" t-valuef="nav-item dropdown ms-lg-auto"/>
+                            <t t-set="_link_class" t-valuef="nav-link fw-bold"/>
                         </t>
                     </t>
 
                     <!-- Language Selector -->
                     <t t-call="website.placeholder_header_language_selector">
-                        <t t-set="_div_classes" t-valuef="my-auto ml-lg-2"/>
+                        <t t-set="_div_classes" t-valuef="my-auto ms-lg-2"/>
                     </t>
                 </div>
                 <!-- Call To Action -->
                 <t t-call="website.placeholder_header_call_to_action">
-                    <t t-set="_div_classes" t-valuef="ml-lg-4"/>
+                    <t t-set="_div_classes" t-valuef="ms-lg-4"/>
                 </t>
                 <!-- Navbar Toggler -->
                 <t t-call="website.navbar_toggler">
-                    <t t-set="_toggler_class" t-valuef="ml-auto"/>
+                    <t t-set="_toggler_class" t-valuef="ms-auto"/>
                 </t>
             </div>
         </t>
@@ -301,7 +301,7 @@
 
 <template id="template_header_default_align_right" inherit_id="website.template_header_default" active="False">
     <xpath expr="//t[@t-set='_nav_class']" position="replace">
-        <t t-set="_nav_class" t-valuef="ml-auto"/>
+        <t t-set="_nav_class" t-valuef="ms-auto"/>
     </xpath>
 </template>
 
@@ -313,33 +313,33 @@
             <div id="top_menu_container" class="container">
                 <!-- Brand -->
                 <t t-call="website.placeholder_header_brand">
-                    <t t-set="_link_class" t-valuef="mr-lg-auto mr-0"/>
+                    <t t-set="_link_class" t-valuef="me-lg-auto me-0"/>
                 </t>
                 <ul class="nav navbar-nav navbar-expand d-none d-sm-block">
                     <!-- Sign In -->
                     <t t-call="portal.placeholder_user_sign_in">
-                        <t t-set="_item_class" t-valuef="nav-item ml-3"/>
+                        <t t-set="_item_class" t-valuef="nav-item ms-3"/>
                         <t t-set="_link_class" t-valuef="nav-link"/>
                     </t>
                     <!-- User Dropdown -->
                     <t t-call="portal.user_dropdown">
                         <t t-set="_icon" t-value="true"/>
-                        <t t-set="_item_class" t-valuef="nav-item dropdown ml-3"/>
+                        <t t-set="_item_class" t-valuef="nav-item dropdown ms-3"/>
                         <t t-set="_link_class" t-valuef="nav-link"/>
-                        <t t-set="_dropdown_menu_class" t-valuef="position-absolute dropdown-menu-right"/>
+                        <t t-set="_dropdown_menu_class" t-valuef="position-absolute dropdown-menu-end"/>
                     </t>
                 </ul>
                 <!-- Navbar Toggler -->
                 <t t-call="website.navbar_toggler">
-                    <t t-set="_toggler_class" t-valuef="order-first mr-auto"/>
+                    <t t-set="_toggler_class" t-valuef="order-first me-auto"/>
                 </t>
                 <!-- Language Selector -->
                 <t t-call="website.placeholder_header_language_selector">
-                    <t t-set="_div_classes" t-valuef="ml-2 d-none d-sm-block"/>
+                    <t t-set="_div_classes" t-valuef="ms-2 d-none d-sm-block"/>
                 </t>
                 <!-- Call To Action -->
                 <t t-call="website.placeholder_header_call_to_action">
-                    <t t-set="_div_classes" t-valuef="ml-3"/>
+                    <t t-set="_div_classes" t-valuef="ms-3"/>
                 </t>
                 <!-- Navbar Collapse -->
                 <div id="top_menu_collapse" class="collapse navbar-collapse">
@@ -362,7 +362,7 @@
                             <t t-set="_icon" t-value="true"/>
                             <t t-set="_item_class" t-valuef="nav-item dropdown d-block d-sm-none"/>
                             <t t-set="_link_class" t-valuef="nav-link"/>
-                            <t t-set="_dropdown_menu_class" t-valuef="dropdown-menu-left"/>
+                            <t t-set="_dropdown_menu_class" t-valuef="dropdown-menu-start"/>
                         </t>
                     </t>
                     <!-- Language Selector -->
@@ -381,7 +381,7 @@
         <div class="oe_structure oe_structure_solo" id="oe_structure_header_hamburger_2">
             <section class="s_text_block" data-snippet="s_text_block" data-name="Text">
                 <div class="container">
-                    <div class="s_hr text-left pt16 pb16" data-name="Separator">
+                    <div class="s_hr text-start pt16 pb16" data-name="Separator">
                         <hr class="w-100 mx-auto" style="border-top-width: 1px; border-top-style: solid; border-color: var(--300);"/>
                     </div>
                 </div>
@@ -398,13 +398,13 @@
                     <div class="row align-items-center">
                         <!-- Separator -->
                         <div class="col-lg-12">
-                            <div class="s_hr text-left pt16 pb16" data-name="Separator">
+                            <div class="s_hr text-start pt16 pb16" data-name="Separator">
                                 <hr class="w-100 mx-auto" style="border-top-width: 1px; border-top-style: solid; border-color: var(--300);"/>
                             </div>
                         </div>
                         <!-- Social -->
                         <div class="col-lg-6 pb16">
-                            <div class="s_social_media text-left no_icon_color o_not_editable" data-snippet="s_social_media" data-name="Social Media" contenteditable="false">
+                            <div class="s_social_media text-start no_icon_color o_not_editable" data-snippet="s_social_media" data-name="Social Media" contenteditable="false">
                                 <h5 class="s_social_media_title d-none" contenteditable="true">Follow us</h5>
                                 <a href="/website/social/facebook" class="s_social_media_facebook" target="_blank">
                                     <i class="fa fa-facebook m-1"/>
@@ -421,11 +421,11 @@
                             </div>
                         </div>
                         <!-- Contact -->
-                        <div class="col-lg-4 text-lg-right pb16">
-                            <i class="fa fa-1x fa-fw fa-envelope mr-2"/><span><a href="mailto:info@yourcompany.example.com">info@yourcompany.example.com</a></span>
+                        <div class="col-lg-4 text-lg-end pb16">
+                            <i class="fa fa-1x fa-fw fa-envelope me-2"/><span><a href="mailto:info@yourcompany.example.com">info@yourcompany.example.com</a></span>
                         </div>
-                        <div class="col-lg-2 text-lg-right pb16">
-                            <i class="fa fa-1x fa-fw fa-phone mr-2"/><span class="o_force_ltr"><a href="tel:+1 (650) 555-0111">+1 (650) 555-0111</a></span>
+                        <div class="col-lg-2 text-lg-end pb16">
+                            <i class="fa fa-1x fa-fw fa-phone me-2"/><span class="o_force_ltr"><a href="tel:+1 (650) 555-0111">+1 (650) 555-0111</a></span>
                         </div>
                     </div>
                 </div>
@@ -436,13 +436,13 @@
 
 <template id="template_header_hamburger_align_center" inherit_id="website.template_header_hamburger" active="False">
     <xpath expr="//t[@t-set='_toggler_class']" position="replace">
-        <t t-set="_toggler_class" t-valuef="ml-4 mr-auto"/>
+        <t t-set="_toggler_class" t-valuef="ms-4 me-auto"/>
     </xpath>
 </template>
 
 <template id="template_header_hamburger_align_right" inherit_id="website.template_header_hamburger" active="False">
     <xpath expr="//t[@t-set='_toggler_class']" position="replace">
-        <t t-set="_toggler_class" t-valuef="ml-4"/>
+        <t t-set="_toggler_class" t-valuef="ms-4"/>
     </xpath>
 </template>
 
@@ -462,12 +462,12 @@
                         <t t-set="_link_class" t-valuef="m-0"/>
                     </t>
                     <!-- Right -->
-                    <div class="o_header_centered_logo text-right">
+                    <div class="o_header_centered_logo text-end">
                         <div class="oe_structure oe_structure_solo" id="oe_structure_header_vertical_2"/>
                     </div>
                     <!-- Call To Action -->
                     <t t-call="website.placeholder_header_call_to_action">
-                        <t t-set="_div_classes" t-valuef="ml-1 d-block d-lg-none ml-auto mr-4"/>
+                        <t t-set="_div_classes" t-valuef="ms-1 d-block d-lg-none ms-auto me-4"/>
                     </t>
                     <!-- Navbar Toggler -->
                     <t t-call="website.navbar_toggler">
@@ -495,20 +495,20 @@
                             </t>
                             <!-- Sign In -->
                             <t t-call="portal.placeholder_user_sign_in">
-                                <t t-set="_item_class" t-valuef="nav-item ml-lg-3"/>
+                                <t t-set="_item_class" t-valuef="nav-item ms-lg-3"/>
                                 <t t-set="_link_class" t-valuef="nav-link"/>
                             </t>
                             <!-- User Dropdown -->
                             <t t-call="portal.user_dropdown">
                                 <t t-set="_user_name" t-value="True"/>
-                                <t t-set="_item_class" t-valuef="nav-item dropdown ml-lg-3"/>
-                                <t t-set="_link_class" t-valuef="nav-link font-weight-bold"/>
+                                <t t-set="_item_class" t-valuef="nav-item dropdown ms-lg-3"/>
+                                <t t-set="_link_class" t-valuef="nav-link fw-bold"/>
                             </t>
                         </t>
                         <!-- Language Selector -->
                         <t t-call="website.placeholder_header_language_selector">
                             <t t-set="_div_classes" t-valuef="d-block d-lg-none mb-2"/>
-                            <t t-set="_dropdown_menu_class" t-valuef="dropdown-menu-right position-static float-none"/>
+                            <t t-set="_dropdown_menu_class" t-valuef="dropdown-menu-end position-static float-none"/>
                         </t>
                         <!-- Call To Action -->
                         <t t-call="website.placeholder_header_call_to_action">
@@ -552,7 +552,7 @@
         <div class="oe_structure oe_structure_solo" id="oe_structure_header_vertical_2">
             <section class="s_text_block" data-snippet="s_text_block" data-name="Text">
                 <div class="container">
-                    <small><i class="fa fa-1x fa-fw fa-phone mr-2"/><a href="tel:+1 (650) 555-0111">+1 (650) 555-0111</a></small>
+                    <small><i class="fa fa-1x fa-fw fa-phone me-2"/><a href="tel:+1 (650) 555-0111">+1 (650) 555-0111</a></small>
                 </div>
             </section>
         </div>
@@ -564,7 +564,7 @@
         <div class="oe_structure oe_structure_solo w-100" id="oe_structure_header_vertical_3">
             <section class="s_text_block" data-snippet="s_text_block" data-name="Text">
                 <div class="container">
-                    <div class="s_hr w-100 text-left pt0 pb0" data-name="Separator">
+                    <div class="s_hr w-100 text-start pt0 pb0" data-name="Separator">
                         <hr class="w-100 mx-auto" style="border-top-width: 1px; border-top-style: solid; border-color: var(--300);"/>
                     </div>
                 </div>
@@ -597,7 +597,7 @@
                             </t>
                         </t>
                         <!-- Language Selector -->
-                        <li class="nav-item ml-lg-1">
+                        <li class="nav-item ms-lg-1">
                             <t t-call="website.placeholder_header_language_selector">
                                 <t t-set="_div_classes" t-valuef="dropup"/>
                                 <t t-set="_dropdown_menu_class" t-valuef="dropdown-menu-lg-left"/>
@@ -618,7 +618,7 @@
                                 <t t-call="portal.user_dropdown">
                                     <t t-set="_icon" t-value="true"/>
                                     <t t-set="_user_name" t-value="true"/>
-                                    <t t-set="_item_class" t-valuef="nav-item dropdown mr-auto"/>
+                                    <t t-set="_item_class" t-valuef="nav-item dropdown me-auto"/>
                                     <t t-set="_link_class" t-valuef="nav-link"/>
                                 </t>
                             </ul>
@@ -635,7 +635,7 @@
                         <t t-call="portal.user_dropdown">
                             <t t-set="_icon" t-value="true"/>
                             <t t-set="_user_name" t-value="true"/>
-                            <t t-set="_item_class" t-valuef="nav-item dropup mr-auto"/>
+                            <t t-set="_item_class" t-valuef="nav-item dropup me-auto"/>
                             <t t-set="_link_class" t-valuef="nav-link"/>
                             <t t-set="_dropdown_menu_class" t-valuef="position-absolute"/>
                         </t>
@@ -668,14 +668,14 @@
                         </a>
                     </div>
                     <!-- Separator -->
-                    <div class="s_hr text-left pt16 pb16" data-name="Separator">
+                    <div class="s_hr text-start pt16 pb16" data-name="Separator">
                         <hr class="w-100 mx-auto" style="border-top-width: 1px; border-top-style: solid; border-top-color: var(--400);"/>
                     </div>
                     <!-- Contact -->
-                    <small><i class="fa fa-envelope fa-fw mr-2"/><span><a href="mailto:info@yourcompany.example.com">info@yourcompany.example.com</a></span></small><br/>
-                    <small><i class="fa fa-phone fa-fw mr-2"/><span class="o_force_ltr"><a href="tel:+1 (650) 555-0111">+1 (650) 555-0111</a></span></small>
+                    <small><i class="fa fa-envelope fa-fw me-2"/><span><a href="mailto:info@yourcompany.example.com">info@yourcompany.example.com</a></span></small><br/>
+                    <small><i class="fa fa-phone fa-fw me-2"/><span class="o_force_ltr"><a href="tel:+1 (650) 555-0111">+1 (650) 555-0111</a></span></small>
                     <!-- Separator -->
-                    <div class="s_hr text-left pt16 pb16" data-name="Separator">
+                    <div class="s_hr text-start pt16 pb16" data-name="Separator">
                         <hr class="w-100 mx-auto" style="border-top-width: 1px; border-top-style: solid; border-top-color: var(--400);"/>
                     </div>
                 </div>
@@ -691,30 +691,30 @@
             <div id="top_menu_container" class="container flex-row flex-wrap">
                 <!-- Brand -->
                 <t t-call="website.placeholder_header_brand">
-                    <t t-set="_link_class" t-valuef="mr-4"/>
+                    <t t-set="_link_class" t-valuef="me-4"/>
                 </t>
                 <!-- Slogan -->
-                <div class="ml-lg-3 mr-auto">
+                <div class="ms-lg-3 me-auto">
                     <div class="oe_structure oe_structure_solo" id="oe_structure_header_slogan_1"/>
                 </div>
-                <ul class="nav navbar-nav navbar-expand ml-auto order-last order-lg-0">
+                <ul class="nav navbar-nav navbar-expand ms-auto order-last order-lg-0">
                     <!-- Sign In -->
                     <t t-call="portal.placeholder_user_sign_in">
-                        <t t-set="_item_class" t-valuef="nav-item ml-3"/>
+                        <t t-set="_item_class" t-valuef="nav-item ms-3"/>
                         <t t-set="_link_class" t-valuef="btn btn-outline-primary"/>
                     </t>
                     <!-- User Dropdown -->
                     <t t-call="portal.user_dropdown">
                         <t t-set="_user_name" t-value="True"/>
-                        <t t-set="_user_name_class" t-valuef="font-weight-bold"/>
-                        <t t-set="_item_class" t-valuef="nav-item dropdown ml-3"/>
+                        <t t-set="_user_name_class" t-valuef="fw-bold"/>
+                        <t t-set="_item_class" t-valuef="nav-item dropdown ms-3"/>
                         <t t-set="_link_class" t-valuef="nav-link"/>
-                        <t t-set="_dropdown_menu_class" t-valuef="dropdown-menu-right position-absolute"/>
+                        <t t-set="_dropdown_menu_class" t-valuef="dropdown-menu-end position-absolute"/>
                     </t>
                     <li class="nav-item">
                         <!-- Call To Action -->
                         <t t-call="website.placeholder_header_call_to_action">
-                            <t t-set="_div_classes" t-valuef="ml-2"/>
+                            <t t-set="_div_classes" t-valuef="ms-2"/>
                         </t>
                     </li>
                 </ul>
@@ -738,8 +738,8 @@
                     </t>
                     <!-- Language Selector -->
                     <t t-call="website.placeholder_header_language_selector">
-                        <t t-set="_div_classes" t-valuef="mb-4 mb-lg-0 align-self-lg-center ml-lg-auto"/>
-                        <t t-set="_dropdown_menu_class" t-valuef="float-lg-right"/>
+                        <t t-set="_div_classes" t-valuef="mb-4 mb-lg-0 align-self-lg-center ms-lg-auto"/>
+                        <t t-set="_dropdown_menu_class" t-valuef="float-lg-end"/>
                     </t>
                 </div>
             </div>
@@ -797,7 +797,7 @@
                     <t t-set="_div_classes" t-valuef="d-block d-lg-none"/>
                 </t>
                 <!-- Navbar Collapse -->
-                <div id="top_menu_collapse" class="collapse navbar-collapse ml-lg-3">
+                <div id="top_menu_collapse" class="collapse navbar-collapse ms-lg-3">
                     <t t-call="website.navbar_nav">
                         <t t-set="_nav_class" t-valuef="flex-grow-1"/>
                         <!-- Menu -->
@@ -809,24 +809,24 @@
                         </t>
                         <!-- Sign In -->
                         <t t-call="portal.placeholder_user_sign_in">
-                            <t t-set="_item_class" t-valuef="nav-item ml-lg-auto"/>
+                            <t t-set="_item_class" t-valuef="nav-item ms-lg-auto"/>
                             <t t-set="_link_class" t-valuef="nav-link"/>
                         </t>
                         <!-- User Dropdown -->
                         <t t-call="portal.user_dropdown">
                             <t t-set="_user_name" t-value="True"/>
-                            <t t-set="_user_name_class" t-valuef="font-weight-bold"/>
-                            <t t-set="_item_class" t-valuef="nav-item dropdown ml-lg-auto"/>
+                            <t t-set="_user_name_class" t-valuef="fw-bold"/>
+                            <t t-set="_item_class" t-valuef="nav-item dropdown ms-lg-auto"/>
                             <t t-set="_link_class" t-valuef="nav-link"/>
                         </t>
                     </t>
                     <!-- Language Selector -->
                     <t t-call="website.placeholder_header_language_selector">
-                        <t t-set="_div_classes" t-valuef="my-auto ml-lg-2 align-self-lg-center"/>
+                        <t t-set="_div_classes" t-valuef="my-auto ms-lg-2 align-self-lg-center"/>
                     </t>
                     <!-- Call To Action -->
                     <t t-call="website.placeholder_header_call_to_action">
-                        <t t-set="_div_classes" t-valuef="d-none d-lg-block ml-3"/>
+                        <t t-set="_div_classes" t-valuef="d-none d-lg-block ms-3"/>
                     </t>
                 </div>
             </div>
@@ -842,11 +842,11 @@
                     <div class="row align-items-center">
                         <div class="col-lg-8">
                             <small>
-                                <i class="fa fa-1x fa-fw fa-phone mr-2"/><span class="mr-3"><a href="tel:+1 (650) 555-0111">+1 (650) 555-0111</a></span>
-                                <i class="fa fa-1x fa-fw fa-envelope mr-2 d-inline"/><span><a href="mailto:info@yourcompany.example.com">info@yourcompany.example.com</a></span>
+                                <i class="fa fa-1x fa-fw fa-phone me-2"/><span class="me-3"><a href="tel:+1 (650) 555-0111">+1 (650) 555-0111</a></span>
+                                <i class="fa fa-1x fa-fw fa-envelope me-2 d-inline"/><span><a href="mailto:info@yourcompany.example.com">info@yourcompany.example.com</a></span>
                             </small>
                         </div>
-                        <div class="col-lg-4 text-lg-right">
+                        <div class="col-lg-4 text-lg-end">
                             <div class="s_social_media no_icon_color o_not_editable" data-snippet="s_social_media" data-name="Social Media" contenteditable="false">
                                 <small class="s_social_media_title text-muted d-none" contenteditable="true"><b>Follow us</b></small>
                                 <a href="/website/social/facebook" class="s_social_media_facebook" target="_blank">
@@ -882,29 +882,29 @@
             <div class="container d-flex align-items-center pb-4 flex-wrap">
                 <!-- Social Icons -->
                 <div class="oe_structure oe_structure_solo" id="oe_structure_header_boxed_1"/>
-                <ul class="nav ml-auto flex-nowrap" contenteditable="false">
+                <ul class="nav ms-auto flex-nowrap" contenteditable="false">
                     <!-- Sign In -->
                     <t t-call="portal.placeholder_user_sign_in">
-                        <t t-set="_item_class" t-valuef="nav-item ml-lg-3"/>
-                        <t t-set="_link_class" t-valuef="nav-link font-weight-bold"/>
+                        <t t-set="_item_class" t-valuef="nav-item ms-lg-3"/>
+                        <t t-set="_link_class" t-valuef="nav-link fw-bold"/>
                     </t>
                     <!-- User Dropdown -->
                     <t t-call="portal.user_dropdown">
                         <t t-set="_avatar" t-value="true"/>
-                        <t t-set="_item_class" t-valuef="nav-item dropdown ml-lg-3"/>
+                        <t t-set="_item_class" t-valuef="nav-item dropdown ms-lg-3"/>
                         <t t-set="_link_class" t-valuef="nav-link"/>
-                        <t t-set="_dropdown_menu_class" t-valuef="dropdown-menu-right"/>
+                        <t t-set="_dropdown_menu_class" t-valuef="dropdown-menu-end"/>
                     </t>
                 </ul>
                 <!-- Language Selector -->
                 <t t-call="website.placeholder_header_language_selector">
-                    <t t-set="_div_classes" t-valuef="ml-2 d-none d-sm-block"/>
+                    <t t-set="_div_classes" t-valuef="ms-2 d-none d-sm-block"/>
                 </t>
             </div>
         </div>
         <div id="top_menu_container" class="container mt-n4">
             <t t-call="website.navbar">
-                <t t-set="_navbar_classes" t-valuef="shadow-sm rounded pr-2"/>
+                <t t-set="_navbar_classes" t-valuef="shadow-sm rounded pe-2"/>
                 <!-- Brand -->
                 <t t-call="website.placeholder_header_brand"/>
                 <!-- Navbar Toggler -->
@@ -923,11 +923,11 @@
                     <!-- Language Selector -->
                     <t t-call="website.placeholder_header_language_selector">
                         <t t-set="_div_classes" t-valuef="d-block d-sm-none mb-2"/>
-                        <t t-set="_dropdown_menu_class" t-valuef="dropdown-menu-right position-static float-none"/>
+                        <t t-set="_dropdown_menu_class" t-valuef="dropdown-menu-end position-static float-none"/>
                     </t>
                     <!-- Call To Action -->
                     <t t-call="website.placeholder_header_call_to_action">
-                        <t t-set="_div_classes" t-valuef="ml-lg-3"/>
+                        <t t-set="_div_classes" t-valuef="ms-lg-3"/>
                     </t>
                 </div>
             </t>
@@ -940,7 +940,7 @@
         <div class="oe_structure oe_structure_solo" id="oe_structure_header_boxed_1">
             <section class="s_text_block" data-snippet="s_text_block" name="Text">
                 <div class="container">
-                    <div class="s_social_media text-left o_not_editable" data-snippet="s_social_media" data-name="Social Media" contenteditable="false">
+                    <div class="s_social_media text-start o_not_editable" data-snippet="s_social_media" data-name="Social Media" contenteditable="false">
                         <h6 class="s_social_media_title d-none" contenteditable="true">Follow us</h6>
                         <a href="/website/social/facebook" class="s_social_media_facebook" target="_blank">
                             <i class="fa fa-facebook m-1"/>
@@ -970,19 +970,19 @@
                 <ul class="nav navbar-nav o_header_centered_logo justify-content-end flex-row">
                     <!-- Sign In -->
                     <t t-call="portal.placeholder_user_sign_in">
-                        <t t-set="_item_class" t-valuef="nav-item ml-3"/>
+                        <t t-set="_item_class" t-valuef="nav-item ms-3"/>
                         <t t-set="_link_class" t-valuef="nav-link"/>
                     </t>
                     <!-- User Dropdown -->
                     <t t-call="portal.user_dropdown">
                         <t t-set="_icon" t-value="true"/>
-                        <t t-set="_item_class" t-valuef="nav-item dropdown ml-3"/>
+                        <t t-set="_item_class" t-valuef="nav-item dropdown ms-3"/>
                         <t t-set="_link_class" t-valuef="nav-link"/>
-                        <t t-set="_dropdown_menu_class" t-valuef="position-absolute dropdown-menu-right"/>
+                        <t t-set="_dropdown_menu_class" t-valuef="position-absolute dropdown-menu-end"/>
                     </t>
                     <!-- Call To Action -->
                     <t t-call="website.placeholder_header_call_to_action">
-                        <t t-set="_div_classes" t-valuef="ml-2"/>
+                        <t t-set="_div_classes" t-valuef="ms-2"/>
                     </t>
                 </ul>
                 <!-- Navbar Toggler -->
@@ -1001,7 +1001,7 @@
                     </t>
                     <!-- Language Selector -->
                     <t t-call="website.placeholder_header_language_selector">
-                        <t t-set="_div_classes" t-valuef="ml-lg-1 mb-2 mb-lg-0 align-self-lg-center"/>
+                        <t t-set="_div_classes" t-valuef="ms-lg-1 mb-2 mb-lg-0 align-self-lg-center"/>
                     </t>
                 </div>
             </div>
@@ -1019,14 +1019,14 @@
                 <t t-call="website.placeholder_header_brand"/>
                 <!-- Call To Action -->
                 <t t-call="website.placeholder_header_call_to_action">
-                    <t t-set="_div_classes" t-valuef="d-lg-none mr-3"/>
+                    <t t-set="_div_classes" t-valuef="d-lg-none me-3"/>
                 </t>
                 <!-- Navbar Toggler -->
                 <t t-call="website.navbar_toggler"/>
                 <!-- Navbar Collapse -->
                 <div id="top_menu_collapse" class="collapse navbar-collapse">
                     <t t-call="website.navbar_nav">
-                        <t t-set="_nav_class" t-valuef="ml-lg-3 flex-grow-1"/>
+                        <t t-set="_nav_class" t-valuef="ms-lg-3 flex-grow-1"/>
                         <!-- Menu -->
                         <t t-foreach="website.menu_id.child_id" t-as="submenu">
                             <t t-call="website.submenu">
@@ -1036,24 +1036,24 @@
                         </t>
                         <!-- Sign In -->
                         <t t-call="portal.placeholder_user_sign_in">
-                            <t t-set="_item_class" t-valuef="nav-item ml-lg-auto"/>
+                            <t t-set="_item_class" t-valuef="nav-item ms-lg-auto"/>
                             <t t-set="_link_class" t-valuef="nav-link"/>
                         </t>
                         <!-- User Dropdown -->
                         <t t-call="portal.user_dropdown">
                             <t t-set="_icon" t-value="True"/>
                             <t t-set="_user_name" t-value="True"/>
-                            <t t-set="_item_class" t-valuef="nav-item dropdown ml-lg-auto"/>
+                            <t t-set="_item_class" t-valuef="nav-item dropdown ms-lg-auto"/>
                             <t t-set="_link_class" t-valuef="nav-link"/>
                         </t>
                     </t>
                     <!-- Language Selector -->
                     <t t-call="website.placeholder_header_language_selector">
-                        <t t-set="_div_classes" t-valuef="ml-lg-2"/>
+                        <t t-set="_div_classes" t-valuef="ms-lg-2"/>
                     </t>
                     <!-- Call To Action -->
                     <t t-call="website.placeholder_header_call_to_action">
-                        <t t-set="_div_classes" t-valuef="d-none d-lg-block ml-3"/>
+                        <t t-set="_div_classes" t-valuef="d-none d-lg-block ms-3"/>
                     </t>
                 </div>
             </div>
@@ -1081,10 +1081,10 @@
             <div id="top_menu_container" class="container">
                 <!-- Brand -->
                 <t t-call="website.placeholder_header_brand"/>
-                <div class="d-flex align-items-center ml-auto">
+                <div class="d-flex align-items-center ms-auto">
                     <!-- Navbar Toggler -->
                     <t t-call="website.navbar_toggler">
-                        <t t-set="_toggler_class" t-valuef="o_header_hamburger_full_toggler ml-2"/>
+                        <t t-set="_toggler_class" t-valuef="o_header_hamburger_full_toggler ms-2"/>
                     </t>
                 </div>
             </div>
@@ -1107,13 +1107,13 @@
                         <!-- Sign In -->
                         <t t-call="portal.placeholder_user_sign_in">
                             <t t-set="_item_class" t-valuef="nav-item"/>
-                            <t t-set="_link_class" t-valuef="nav-link font-weight-bold"/>
+                            <t t-set="_link_class" t-valuef="nav-link fw-bold"/>
                         </t>
                         <!-- User Dropdown -->
                         <t t-call="portal.user_dropdown">
                             <t t-set="_user_name" t-value="true"/>
                             <t t-set="_item_class" t-valuef="nav-item dropdown"/>
-                            <t t-set="_link_class" t-valuef="nav-link font-weight-bold ml-lg-3"/>
+                            <t t-set="_link_class" t-valuef="nav-link fw-bold ms-lg-3"/>
                         </t>
                     </t>
                     <!-- Call To Action -->
@@ -1168,15 +1168,15 @@
             <div id="top_menu_container" class="container">
                 <!-- Brand -->
                 <t t-call="website.placeholder_header_brand"/>
-                <div class="d-flex align-items-center ml-auto">
+                <div class="d-flex align-items-center ms-auto">
                     <!-- Navbar Toggler -->
                     <t t-call="website.navbar_toggler">
-                        <t t-set="_toggler_class" t-valuef="ml-2"/>
+                        <t t-set="_toggler_class" t-valuef="ms-2"/>
                     </t>
                 </div>
                 <!-- Navbar Collapse -->
                 <div id="top_menu_collapse" class="collapse navbar-collapse">
-                    <t t-set="_nav_class" t-valuef="text-right align-items-sm-end"/>
+                    <t t-set="_nav_class" t-valuef="text-end align-items-sm-end"/>
                     <t t-call="website.navbar_nav">
                         <!-- Menu -->
                         <t t-foreach="website.menu_id.child_id" t-as="submenu">
@@ -1218,11 +1218,11 @@
         <div class="oe_structure oe_structure_solo" id="oe_structure_header_magazine_1">
             <section class="s_text_block" data-snippet="s_text_block" data-name="Text">
                 <div class="container">
-                    <div class="row align-items-center text-center text-md-left">
+                    <div class="row align-items-center text-center text-md-start">
                         <div class="col-lg-8 pt16">
                             <p class="mb-0"><small>We help you grow your business</small></p>
                         </div>
-                        <div class="col-lg-4 text-lg-right pt16">
+                        <div class="col-lg-4 text-lg-end pt16">
                             <div class="s_social_media no_icon_color o_not_editable" data-snippet="s_social_media" data-name="Social Media" contenteditable="false">
                                 <small class="s_social_media_title d-none" contenteditable="true"><b>Follow us</b></small>
                                 <a href="/website/social/facebook" class="s_social_media_facebook" target="_blank">
@@ -1243,7 +1243,7 @@
                                 <a href="/website/social/instagram" class="s_social_media_instagram" target="_blank">
                                     <i class="fa fa-instagram m-1"/>
                                 </a>
-                                <a href="mailto:info@yourcompany.example.com" class="ml-3" target="_blank">
+                                <a href="mailto:info@yourcompany.example.com" class="ms-3" target="_blank">
                                     <i class="fa fa-1x fa-envelope"/>
                                 </a>
                             </div>
@@ -1266,11 +1266,11 @@
         <attribute name="class" separator=" " add="position-relative"/>
     </xpath>
     <xpath expr="//ul[@id='top_menu']" position="before">
-        <div class="o_offcanvas_menu_backdrop" data-toggle="collapse" data-target="#top_menu_collapse" aria-label="Toggle navigation"/>
+        <div class="o_offcanvas_menu_backdrop" data-bs-toggle="collapse" data-bs-target="#top_menu_collapse" aria-label="Toggle navigation"/>
     </xpath>
     <xpath expr="//ul[@id='top_menu']/t" position="before">
-        <li class="o_offcanvas_menu_toggler order-first navbar-toggler text-right border-0 o_not_editable">
-            <a href="#top_menu_collapse" class="nav-link px-3" data-toggle="collapse">
+        <li class="o_offcanvas_menu_toggler order-first navbar-toggler text-end border-0 o_not_editable">
+            <a href="#top_menu_collapse" class="nav-link px-3" data-bs-toggle="collapse">
                 <span class="fa-2x">&#215;</span>
             </a>
         </li>
@@ -1417,11 +1417,11 @@
                         <div id="connect" class="col-lg-4 offset-lg-1 pt24 pb24">
                             <h5 class="mb-3">Connect with us</h5>
                             <ul class="list-unstyled">
-                                <li><i class="fa fa-comment fa-fw mr-2"/><span><a href="/contactus">Contact us</a></span></li>
-                                <li><i class="fa fa-envelope fa-fw mr-2"/><span><a href="mailto:info@yourcompany.example.com">info@yourcompany.example.com</a></span></li>
-                                <li><i class="fa fa-phone fa-fw mr-2"/><span class="o_force_ltr"><a href="tel:+1 (650) 555-0111">+1 (650) 555-0111</a></span></li>
+                                <li><i class="fa fa-comment fa-fw me-2"/><span><a href="/contactus">Contact us</a></span></li>
+                                <li><i class="fa fa-envelope fa-fw me-2"/><span><a href="mailto:info@yourcompany.example.com">info@yourcompany.example.com</a></span></li>
+                                <li><i class="fa fa-phone fa-fw me-2"/><span class="o_force_ltr"><a href="tel:+1 (650) 555-0111">+1 (650) 555-0111</a></span></li>
                             </ul>
-                            <div class="s_social_media text-left o_not_editable" data-snippet="s_social_media" data-name="Social Media" contenteditable="false">
+                            <div class="s_social_media text-start o_not_editable" data-snippet="s_social_media" data-name="Social Media" contenteditable="false">
                                 <h5 class="s_social_media_title d-none" contenteditable="true">Follow us</h5>
                                 <a href="/website/social/facebook" class="s_social_media_facebook" target="_blank">
                                     <i class="fa fa-facebook rounded-circle shadow-sm"/>
@@ -1463,10 +1463,10 @@
                         </div>
                         <div class="col-lg-3">
                             <ul class="list-unstyled mb-2">
-                                <li><i class="fa fa-phone fa-fw mr-2"/><span class="o_force_ltr"><a href="tel:+1 (650) 555-0111">+1 (650) 555-0111</a></span></li>
-                                <li><i class="fa fa-envelope fa-fw mr-2"/><span><a href="mailto:hello@mycompany.com">hello@mycompany.com</a></span></li>
+                                <li><i class="fa fa-phone fa-fw me-2"/><span class="o_force_ltr"><a href="tel:+1 (650) 555-0111">+1 (650) 555-0111</a></span></li>
+                                <li><i class="fa fa-envelope fa-fw me-2"/><span><a href="mailto:hello@mycompany.com">hello@mycompany.com</a></span></li>
                             </ul>
-                            <div class="s_social_media text-left no_icon_color o_not_editable" data-snippet="s_social_media" data-name="Social Media" contenteditable="false">
+                            <div class="s_social_media text-start no_icon_color o_not_editable" data-snippet="s_social_media" data-name="Social Media" contenteditable="false">
                                 <h5 class="s_social_media_title d-none" contenteditable="true">Follow us</h5>
                                 <a href="/website/social/github" class="s_social_media_github" target="_blank">
                                     <i class="fa fa-2x fa-github m-1"/>
@@ -1508,8 +1508,8 @@
                     </div>
                     <p class="text-center mb-1">250 Executive Park Blvd, Suite 3400 • San Francisco CA 94134 • United States</p>
                     <ul class="list-inline text-center">
-                        <li class="list-inline-item mx-3"><i class="fa fa-1x fa-fw fa-phone mr-2"/><span class="o_force_ltr"><a href="tel:1 (650) 555-0111">+1 (650) 555-0111</a></span></li>
-                        <li class="list-inline-item mx-3"><i class="fa fa-1x fa-fw fa-envelope mr-2"/><span><a href="mailto:info@yourcompany.example.com">info@yourcompany.example.com</a></span></li>
+                        <li class="list-inline-item mx-3"><i class="fa fa-1x fa-fw fa-phone me-2"/><span class="o_force_ltr"><a href="tel:1 (650) 555-0111">+1 (650) 555-0111</a></span></li>
+                        <li class="list-inline-item mx-3"><i class="fa fa-1x fa-fw fa-envelope me-2"/><span><a href="mailto:info@yourcompany.example.com">info@yourcompany.example.com</a></span></li>
                     </ul>
                 </div>
             </section>
@@ -1559,17 +1559,17 @@
                         <div class="col-lg-2 pb16">
                             <h5>Follow us</h5>
                             <ul class="list-unstyled">
-                                <li class="py-1"><i class="fa fa-1x fa-fw fa-facebook-square mr-2"/><a href="/website/social/facebook" target="_blank">Facebook</a></li>
-                                <li class="py-1"><i class="fa fa-1x fa-fw fa-twitter-square mr-2"/><a href="/website/social/twitter" target="_blank">Twitter</a></li>
-                                <li class="py-1"><i class="fa fa-1x fa-fw fa-linkedin-square mr-2"/><a href="/website/social/linkedin" target="_blank">Linkedin</a></li>
-                                <li class="py-1"><i class="fa fa-1x fa-fw fa-instagram mr-2"/><a href="/website/social/instagram" target="_blank">Instagram</a></li>
+                                <li class="py-1"><i class="fa fa-1x fa-fw fa-facebook-square me-2"/><a href="/website/social/facebook" target="_blank">Facebook</a></li>
+                                <li class="py-1"><i class="fa fa-1x fa-fw fa-twitter-square me-2"/><a href="/website/social/twitter" target="_blank">Twitter</a></li>
+                                <li class="py-1"><i class="fa fa-1x fa-fw fa-linkedin-square me-2"/><a href="/website/social/linkedin" target="_blank">Linkedin</a></li>
+                                <li class="py-1"><i class="fa fa-1x fa-fw fa-instagram me-2"/><a href="/website/social/instagram" target="_blank">Instagram</a></li>
                             </ul>
                         </div>
                         <div class="col-lg-3 pb16">
                             <h5>Get in touch</h5>
                             <ul class="list-unstyled">
-                                <li class="py-1"><i class="fa fa-1x fa-fw fa-envelope mr-2"/><a href="mailto:info@yourcompany.com">info@yourcompany.com</a></li>
-                                <li class="py-1"><i class="fa fa-1x fa-fw fa-phone mr-2"/><span class="o_force_ltr"><a href="tel:1 (650) 555-0111">+1 (650) 555-0111</a></span></li>
+                                <li class="py-1"><i class="fa fa-1x fa-fw fa-envelope me-2"/><a href="mailto:info@yourcompany.com">info@yourcompany.com</a></li>
+                                <li class="py-1"><i class="fa fa-1x fa-fw fa-phone me-2"/><span class="o_force_ltr"><a href="tel:1 (650) 555-0111">+1 (650) 555-0111</a></span></li>
                             </ul>
                         </div>
                         <div class="col-lg-3 pb16">
@@ -1595,7 +1595,7 @@
                             </a>
                         </div>
                         <div class="col-lg-5 d-flex align-items-center justify-content-center justify-content-lg-start pt16 pb16">
-                            <ul class="list-inline mb-0 ml-3">
+                            <ul class="list-inline mb-0 ms-3">
                                 <li class="list-inline-item"><a href="/">Home</a></li>
                                 <li class="list-inline-item"><a href="#">About us</a></li>
                                 <li class="list-inline-item"><a href="#">Products</a></li>
@@ -1607,7 +1607,7 @@
                             </ul>
                         </div>
                         <div class="col-lg-3 pt16 pb16">
-                            <div class="s_social_media text-right no_icon_color o_not_editable" data-snippet="s_social_media" data-name="Social Media" contenteditable="false">
+                            <div class="s_social_media text-end no_icon_color o_not_editable" data-snippet="s_social_media" data-name="Social Media" contenteditable="false">
                                 <h5 class="s_social_media_title d-none" contenteditable="true">Follow us</h5>
                                 <a href="/website/social/github" class="s_social_media_github" target="_blank">
                                     <i class="fa fa-2x fa-github m-1"/>
@@ -1649,7 +1649,7 @@
                             <h5><a href="mailto:hello@mycompany.com">hello@mycompany.com</a></h5>
                         </div>
                         <div class="col-lg-3 pt16 pb16">
-                            <div class="s_social_media text-right no_icon_color o_not_editable" data-snippet="s_social_media" data-name="Social Media" contenteditable="false">
+                            <div class="s_social_media text-end no_icon_color o_not_editable" data-snippet="s_social_media" data-name="Social Media" contenteditable="false">
                                 <p class="s_social_media_title d-block mb-2" contenteditable="true">Follow us</p>
                                 <a href="/website/social/twitter" class="s_social_media_twitter" target="_blank">
                                     <i class="fa fa-twitter m-1"/>
@@ -1680,7 +1680,7 @@
                                 <img src="/website/static/src/img/website_logo.svg" class="img-fluid" aria-label="Logo of MyCompany" title="MyCompany" role="img"/>
                             </a>
                         </div>
-                        <div class="col-lg-10 pb16 text-right">
+                        <div class="col-lg-10 pb16 text-end">
                             <ul class="list-inline mb-0">
                                 <li class="list-inline-item"><a href="/">Home</a></li>
                                 <li class="list-inline-item">•</li>
@@ -1731,10 +1731,10 @@
                 <div class="container">
                     <div class="row">
                         <div class="col-lg-9">
-                            <p><i class="fa fa-1x fa-fw fa-map-marker mr-2"/>250 Executive Park Blvd, Suite 3400 • San Francisco CA 94134 • United States</p>
+                            <p><i class="fa fa-1x fa-fw fa-map-marker me-2"/>250 Executive Park Blvd, Suite 3400 • San Francisco CA 94134 • United States</p>
                         </div>
                         <div class="col-lg-3">
-                            <p><i class="fa fa-1x fa-fw fa-envelope mr-2"/><a href="mailto:info@yourcompany.example.com">info@yourcompany.example.com</a></p>
+                            <p><i class="fa fa-1x fa-fw fa-envelope me-2"/><a href="mailto:info@yourcompany.example.com">info@yourcompany.example.com</a></p>
                         </div>
                     </div>
                 </div>
@@ -1763,7 +1763,7 @@
                 <div class="container">
                     <div class="row align-items-center">
                         <div class="col-lg-3 pb24">
-                            <ul class="pl-3 mb-0">
+                            <ul class="ps-3 mb-0">
                                 <li><a href="/">Home</a></li>
                                 <li><a href="/contactus">Contact us</a></li>
                                 <t t-set="configurator_footer_links" t-value="[]"/>
@@ -1774,12 +1774,12 @@
                         </div>
                         <div class="col-lg-6 pb24">
                             <ul class="list-unstyled mb-0">
-                                <li><i class="fa fa-phone fa-fw mr-2"/><span class="o_force_ltr"><a href="tel:+1 (650) 555-0111">+1 (650) 555-0111</a></span></li>
-                                <li><i class="fa fa-envelope fa-fw mr-2"/><span><a href="mailto:info@yourcompany.example.com">info@yourcompany.example.com</a></span></li>
+                                <li><i class="fa fa-phone fa-fw me-2"/><span class="o_force_ltr"><a href="tel:+1 (650) 555-0111">+1 (650) 555-0111</a></span></li>
+                                <li><i class="fa fa-envelope fa-fw me-2"/><span><a href="mailto:info@yourcompany.example.com">info@yourcompany.example.com</a></span></li>
                             </ul>
                         </div>
                         <div class="col-lg-3 pb24">
-                            <div class="s_social_media text-right o_not_editable" data-snippet="s_social_media" data-name="Social Media" contenteditable="false">
+                            <div class="s_social_media text-end o_not_editable" data-snippet="s_social_media" data-name="Social Media" contenteditable="false">
                                 <h5 class="s_social_media_title d-none" contenteditable="true">Follow Us</h5>
                                 <a href="/website/social/facebook" class="s_social_media_facebook" target="_blank">
                                     <i class="fa fa-1x fa-facebook rounded-circle shadow-sm"/>
@@ -1815,7 +1815,7 @@
 
 <template id="footer_copyright_company_name" inherit_id="website.layout">
     <xpath expr="//footer//span[hasclass('o_footer_copyright_name')]" position="replace">
-        <span class="o_footer_copyright_name mr-2">Copyright &amp;copy; Company name</span>
+        <span class="o_footer_copyright_name me-2">Copyright &amp;copy; Company name</span>
     </xpath>
 </template>
 
@@ -1843,7 +1843,7 @@
                  data-display="afterDelay"
                  data-consents-duration="999"
                  data-focus="false"
-                 data-backdrop="false"
+                 data-bs-backdrop="false"
                  data-keyboard="false"
                  tabindex="-1"
                  role="dialog">
@@ -1855,7 +1855,7 @@
                                     <div class="col-lg-8 pt16">
                                         <p>We use cookies to provide you a better user experience.</p>
                                     </div>
-                                    <div class="col-lg-4 pt16 text-right">
+                                    <div class="col-lg-4 pt16 text-end">
                                         <a href="/cookie-policy" class="o_cookies_bar_text_policy btn btn-link btn-sm">Cookie Policy</a>
                                         <a href="#" role="button" class="js_close_popup o_cookies_bar_text_button btn btn-primary btn-sm">I agree</a>
                                     </div>
@@ -2027,11 +2027,11 @@
 
 <!-- Util template -->
 <template id="publish_management">
-    <div groups="website.group_website_publisher" t-ignore="true" class="float-right css_editable_mode_hidden" t-att-style="style or None">
+    <div groups="website.group_website_publisher" t-ignore="true" class="float-end css_editable_mode_hidden" t-att-style="style or None">
         <div t-attf-class="btn-group #{btn_class} js_publish_management #{object.website_published and 'css_published' or 'css_unpublished'}" t-att-data-id="object.id" t-att-data-object="object._name" t-att-data-description="env['ir.model']._get(object._name).display_name" t-att-data-controller="publish_controller">
             <button class="btn btn-danger js_publish_btn">Unpublished</button>
             <button class="btn btn-success js_publish_btn">Published</button>
-            <button type="button" t-attf-class="btn btn-default dropdown-toggle dropdown-toggle-split" t-att-id="'dopprod-%s' % object.id" data-toggle="dropdown"/>
+            <button type="button" t-attf-class="btn btn-default dropdown-toggle dropdown-toggle-split" t-att-id="'dopprod-%s' % object.id" data-bs-toggle="dropdown"/>
             <div class="dropdown-menu" role="menu" t-att-aria-labelledby="'dopprod-%s' % object.id">
                 <t t-out="0"/>
                 <a role="menuitem" t-attf-href="/web#view_type=form&amp;model=#{object._name}&amp;id=#{object.id}&amp;action=#{action}&amp;menu_id=#{menu or object.env['ir.model.data']._xmlid_to_res_id('website.menu_website_configuration')}"
@@ -2080,7 +2080,7 @@
                 </p>
 
                 <div class="alert alert-warning alert-dismissable mt16" groups="website.group_website_publisher" role="status">
-                   <button type="button" class="close" data-dismiss="alert" aria-label="Close">×</button>
+                   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    <p>
                      Note: To hide this page, uncheck it from the Customize tab in edit mode.
                    </p>
@@ -2260,7 +2260,7 @@
                     <div class="modal-content">
                         <header class="modal-header">
                             <h4 class="modal-title">Reset templates</h4>
-                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button>
+                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                         </header>
                         <main class="modal-body">
                             <div class="form-group row mb0">
@@ -2278,7 +2278,7 @@
                             </div>
                         </main>
                         <footer class="modal-footer">
-                            <button type="button" class="btn" data-dismiss="modal" aria-label="Cancel">Cancel</button>
+                            <button type="button" class="btn" data-bs-dismiss="modal" aria-label="Cancel">Cancel</button>
                             <input type="submit" value="Confirm" class="btn btn-primary"/>
                         </footer>
                     </div>
@@ -2376,7 +2376,7 @@ Sitemap: <t t-esc="url_root"/>sitemap.xml
         <div id="wrap">
             <div class="container">
                 <t t-call="website.website_search_box_input">
-                    <t t-set="_form_classes" t-valuef="mt8 float-right"/>
+                    <t t-set="_form_classes" t-valuef="mt8 float-end"/>
                     <t t-set="search_type" t-valuef="pages"/>
                     <t t-set="action" t-valuef="/pages"/>
                     <t t-set="search" t-value="original_search or search"/>
@@ -2456,7 +2456,7 @@ Sitemap: <t t-esc="url_root"/>sitemap.xml
                 <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')"/>
-                <div t-att-class="'h6 font-weight-bold %s' % ('' if description else 'mb-0')" t-out="result['name']"/>
+                <div t-att-class="'h6 fw-bold %s' % ('' if description else 'mb-0')" t-out="result['name']"/>
                 <p t-if="description" class="mb-0" t-out="description"/>
                 <button t-if="extra_link" class="extra_link btn btn-link btn-sm" t-out="extra_link"
                     t-attf-onclick="location.href='#{result.get('extra_link_url')}';return false;"/>
diff --git a/addons/website/views/website_views.xml b/addons/website/views/website_views.xml
index 9099d659842..2b6ea310e5f 100644
--- a/addons/website/views/website_views.xml
+++ b/addons/website/views/website_views.xml
@@ -34,7 +34,7 @@
                         </div>
                         <div name="logo">
                             <group name="logo">
-                                <field name="logo" widget="image" class="oe_avatar float-left"/>
+                                <field name="logo" widget="image" class="oe_avatar float-start"/>
                             </group>
                         </div>
                         <div name="other">
@@ -358,19 +358,19 @@
             <field name="arch" type="xml">
                 <qweb js_class="view_hierarchy">
                     <nav class="o_tree_nav navbar justify-content-start w-100 fixed-top bg-white shadow">
-                        <div class="dropdown ml-2 border border-info rounded">
-                            <a href="#" role="button" class="btn dropdown-toggle text-info" data-toggle="dropdown">
+                        <div class="dropdown ms-2 border border-info rounded">
+                            <a href="#" role="button" class="btn dropdown-toggle text-info" data-bs-toggle="dropdown">
                                 All Websites
                             </a>
                             <div class="dropdown-menu o_website_filter">
                                 <a href="#" class="dropdown-item active" data-website_name="*">All Websites</a>
                             </div>
                         </div>
-                        <div class="ml-2 custom-control custom-switch">
-                            <input id="o_show_inactive" class="custom-control-input" type="checkbox"/>
-                            <label class="custom-control-label" for="o_show_inactive">Show inactive views</label>
+                        <div class="ms-2 custom-control form-switch">
+                            <input id="o_show_inactive" class="form-check-input" type="checkbox"/>
+                            <label class="form-check-label" for="o_show_inactive">Show inactive views</label>
                         </div>
-                        <div class="o_search input-group ml-auto col-8 col-sm-6 col-md-4 col-xl-3" role="search">
+                        <div class="o_search input-group ms-auto col-8 col-sm-6 col-md-4 col-xl-3" role="search">
                             <input type="search" name="search" class="form-control border-info" placeholder="Name, id or key"/>
                             <button type="submit" class="btn btn-info" aria-label="Search" title="Search">
                                 <i class="fa fa-search"/>
@@ -381,12 +381,12 @@
                     <t t-set="view" t-value="env['ir.ui.view'].browse(context['active_id']).with_context(active_test=False)"/>
                     <t t-set="requested_view" t-value="view"/>
                     <t t-set="view" t-value="view._get_top_level_view()"/>
-                    <div class="o_tree_container ml-2" t-att-data-requested-view-id="requested_view.id">
+                    <div class="o_tree_container ms-2" t-att-data-requested-view-id="requested_view.id">
                         <t t-set="sibling_views" t-value="view.search([('key', '=', view.key)]) - view"/>
                         <div t-if="sibling_views" class="alert alert-info m-1 p-1">
                             Multiple tree exists for this view
                             <a t-foreach="sibling_views" t-as="sibling_view" href="#" class="o_load_hierarchy" t-att-data-view_id="sibling_view.id">
-                                <i class="fa fa-arrow-right mr-1"/>
+                                <i class="fa fa-arrow-right me-1"/>
                                 <t t-esc="sibling_view.with_context(display_website=True, display_key=True).display_name"/>
                             </a>
                         </div>
@@ -397,18 +397,18 @@
         </record>
         <template id="report_viewhierarchy_children">
             <t t-set="classes_for_search" t-value="'d-flex align-items-center'"/>
-            <p t-attf-class="o_tree_entry mb-0 #{'text-muted font-weight-normal' if not view.active else ''} #{view.inherit_children_ids and 'o_has_child' or ''} #{classes_for_search}">
-                <i t-if="view.inherit_children_ids" class="js_fold o_fold_icon fa fa-minus-square-o mr-1"/>
-                <i t-if="view.arch_updated" class="fa fa-pencil-square mr-1 o_text_pink" title="This view arch has been modified"/>
+            <p t-attf-class="o_tree_entry mb-0 #{'text-muted fw-normal' if not view.active else ''} #{view.inherit_children_ids and 'o_has_child' or ''} #{classes_for_search}">
+                <i t-if="view.inherit_children_ids" class="js_fold o_fold_icon fa fa-minus-square-o me-1"/>
+                <i t-if="view.arch_updated" class="fa fa-pencil-square me-1 o_text_pink" title="This view arch has been modified"/>
                 <span class="js_fold">
-                    <t t-esc="view.name"/> (<span class="font-weight-bold" t-esc="view.key"/>)
+                    <t t-esc="view.name"/> (<span class="fw-bold" t-esc="view.key"/>)
                     <span class="o_text_orange" t-if="view.website_id" t-esc="' [%s]' % view.website_id.name"/>
                  </span>
                 <a type="action" data-model="ir.ui.view" t-att-data-res-id="view.id">
-                    <i class="fa fa-eye ml-2 text-muted" title="Go to View"/>
+                    <i class="fa fa-eye ms-2 text-muted" title="Go to View"/>
                 </a>
                 <a href="#" class="o_show_diff" t-att-data-view_id="view.id">
-                    <i class="fa fa-files-o ml-2 text-muted" title="Show Arch Diff"/>
+                    <i class="fa fa-files-o ms-2 text-muted" title="Show Arch Diff"/>
                 </a>
             </p>
             <ul t-if="view.inherit_children_ids">
@@ -512,10 +512,10 @@
                                 </div>
                             </div>
                             <div class="o_theme_preview_bottom clearfix">
-                                <h5 t-if="record.summary.value" class="text-uppercase float-left">
+                                <h5 t-if="record.summary.value" class="text-uppercase float-start">
                                     <b><t t-esc="record.summary.value.split(',')[0]"/></b>
                                 </h5>
-                                <h6 t-if="record.display_name.value" class="text-muted float-right">
+                                <h6 t-if="record.display_name.value" class="text-muted float-end">
                                     <b><t t-esc="record.display_name.value.replace('Theme', '').replace('theme', '')"/></b>
                                 </h6>
                             </div>
diff --git a/addons/website/views/website_visitor_views.xml b/addons/website/views/website_visitor_views.xml
index b0be3555b11..0b446c6f173 100644
--- a/addons/website/views/website_visitor_views.xml
+++ b/addons/website/views/website_visitor_views.xml
@@ -97,7 +97,7 @@
                             <div class="o_kanban_detail_ungrouped row mx-0">
                                 <div class="col-lg-2 col-sm-8 col-12 py-0 my-2 my-lg-0">
                                     <div class="d-flex">
-                                        <div class="o_wvisitor_kanban_image mr-3">
+                                        <div class="o_wvisitor_kanban_image me-3">
                                             <img t-if="record.partner_image.raw_value"
                                                 t-att-src="kanban_image('res.partner', 'avatar_128', record.partner_id.raw_value)"
                                                 width="54px" height="54px" alt="Visitor"/>
@@ -108,8 +108,8 @@
                                         <div class="o_wvisitor_name d-flex flex-grow-1 flex-column my-0 my-lg-2">
                                             <div class="d-flex align-items-start">
                                                 <b><field name="display_name"/></b>
-                                                <span t-if="record.is_connected.raw_value" class="fa fa-circle text-success ml-2 my-1" aria-label="Online" title="Online"/>
-                                                <span t-else="" class="fa fa-circle text-danger ml-2 my-1" aria-label="Offline" title="Offline"/>
+                                                <span t-if="record.is_connected.raw_value" class="fa fa-circle text-success ms-2 my-1" aria-label="Online" title="Online"/>
+                                                <span t-else="" class="fa fa-circle text-danger ms-2 my-1" aria-label="Offline" title="Offline"/>
                                             </div>
                                             <!-- Double check is necessary for sample view (or error image are shown) -->
                                             <div t-if="record.country_id.raw_value and record.country_flag.raw_value">
@@ -128,18 +128,18 @@
                                     <div>Visits</div>
                                 </div>
                                 <div class="col-lg col-sm-4 col-6 py-0 my-2">
-                                    <span t-att-class="record.page_count.raw_value ? 'font-weight-bold' : 'text-muted'">
+                                    <span t-att-class="record.page_count.raw_value ? 'fw-bold' : 'text-muted'">
                                         <field name="last_visited_page_id"/>
                                     </span>
                                     <div t-att-class="record.page_count.raw_value ? '' : 'text-muted'">Last Page</div>
                                 </div>
                                 <div id="wvisitor_visited_page" class="col-lg col-sm-4 col-6 py-0 my-2">
-                                     <span t-att-class="record.page_count.raw_value ? 'font-weight-bold' : 'text-muted'">
+                                     <span t-att-class="record.page_count.raw_value ? 'fw-bold' : 'text-muted'">
                                         <field name="page_count"/>
                                     </span>
                                     <div t-att-class="record.page_count.raw_value ? '' : 'text-muted'">Visited Pages</div>
                                 </div>
-                                <div class="w_visitor_kanban_actions_ungrouped col-lg-3 col-sm-12 py-0 my-2 text-lg-right">
+                                <div class="w_visitor_kanban_actions_ungrouped col-lg-3 col-sm-12 py-0 my-2 text-lg-end">
                                     <button name="action_send_mail" type="object"
                                             class="btn btn-secondary border" attrs="{'invisible': [('email', '=', False)]}">
                                             Email
@@ -148,7 +148,7 @@
                             </div>
                             <!-- displayed in grouped mode -->
                             <div class="oe_kanban_details">
-                                <div class="float-right">
+                                <div class="float-end">
                                     <span class="fa fa-circle text-success" t-if="record.is_connected.raw_value" aria-label="Online" title="Online"/>
                                     <span class="fa fa-circle text-danger" t-else="" aria-label="Offline" title="Offline"/>
                                 </div>
@@ -159,9 +159,9 @@
                                     <field name="display_name"/>
                                 </strong>
                                 <div class="mb-2">Active <field name="time_since_last_action"/></div>
-                                <div t-if="record.page_count.raw_value">Last Page<span class="float-right font-weight-bold"><field name="last_visited_page_id"/></span></div>
-                                <div>Visits<span class="float-right font-weight-bold"><field name="visit_count"/></span></div>
-                                <div t-if="record.page_count.raw_value" id="o_page_count">Visited Pages<span class="float-right font-weight-bold"><field name="page_count"/></span></div>
+                                <div t-if="record.page_count.raw_value">Last Page<span class="float-end fw-bold"><field name="last_visited_page_id"/></span></div>
+                                <div>Visits<span class="float-end fw-bold"><field name="visit_count"/></span></div>
+                                <div t-if="record.page_count.raw_value" id="o_page_count">Visited Pages<span class="float-end fw-bold"><field name="page_count"/></span></div>
                                 <div class="w_visitor_kanban_actions">
                                     <button name="action_send_mail" type="object"
                                             class="btn btn-secondary" attrs="{'invisible': [('email', '=', False)]}">
@@ -204,7 +204,7 @@
                             <field name="visitor_page_count" widget="statinfo" string="Page Views"/>
                         </button>
                     </div>
-                    <div class="float-right" attrs="{'invisible': [('country_id', '=', False)]}">
+                    <div class="float-end" attrs="{'invisible': [('country_id', '=', False)]}">
                         <field name="country_flag" widget="image_url" options='{"size": [32, 32]}'/>
                     </div>
                     <div class="oe_title">
diff --git a/addons/website/wizard/website_robots.xml b/addons/website/wizard/website_robots.xml
index 078c80887ce..ee1996bac40 100644
--- a/addons/website/wizard/website_robots.xml
+++ b/addons/website/wizard/website_robots.xml
@@ -13,8 +13,8 @@
                     </a>
                     <br/><br/>
                     Example of rule:<br/>
-                    <code class='ml-4'>Disallow: /web/login</code><br/>
-                    <code class='ml-4'>Allow: *</code>
+                    <code class='ms-4'>Disallow: /web/login</code><br/>
+                    <code class='ms-4'>Allow: *</code>
                 </small>
                 <footer>
                     <button string="Save" name="action_save" type="object" class="oe_highlight" data-hotkey="q"/>
diff --git a/addons/website_blog/static/src/scss/website_blog.scss b/addons/website_blog/static/src/scss/website_blog.scss
index e62f506516b..62e77ccf883 100644
--- a/addons/website_blog/static/src/scss/website_blog.scss
+++ b/addons/website_blog/static/src/scss/website_blog.scss
@@ -110,7 +110,8 @@ $o-wblog-loader-size: 50px;
     }
 
     .o_wblog_social_links > a {
-        @include size(3em);
+        width: 3em;
+        height: 3em;
         > i {
             font-size: 1.3em;
         }
@@ -191,10 +192,10 @@ $o-wblog-loader-size: 50px;
     // ==============================================
     .o_wblog_post_title {
         #o_wblog_post_name {
-            font-weight: $display4-weight;
+            font-weight: $display-font-weight;
             line-height: $display-line-height;
             // Default font-size.
-            @include font-size($display4-size);
+            @include font-size(map-get($display-font-sizes, 4));
         }
 
         #o_wblog_post_subtitle {
@@ -224,7 +225,8 @@ $o-wblog-loader-size: 50px;
             transform: translateZ(1px);
 
             div {
-                @include size($o-wblog-loader-size);
+                width: $o-wblog-loader-size;
+                height: $o-wblog-loader-size;
                 background: rgba(black, 0.15);
                 animation: o-wblog-loader 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
             }
@@ -295,7 +297,8 @@ $o-wblog-loader-size: 50px;
 
 #o_wblog_post_content_jump {
     @extend .o_scroll_button;
-    @include size($o-wblog-loader-size);
+    width: $o-wblog-loader-size;
+    height: $o-wblog-loader-size;
     background-color: rgba(black, 0.5);
 
     &:hover {
diff --git a/addons/website_blog/static/src/snippets/s_blog_posts/000.scss b/addons/website_blog/static/src/snippets/s_blog_posts/000.scss
index 71e8e66d324..13aeadca7f8 100644
--- a/addons/website_blog/static/src/snippets/s_blog_posts/000.scss
+++ b/addons/website_blog/static/src/snippets/s_blog_posts/000.scss
@@ -13,7 +13,8 @@
         // Set sizes relative to the container font-size.
         // (handle parents with, for example, '.small' or '.h1' classes)
         .s_blog_posts_post_cover {
-            @include size(3.5em);
+            width: 3.5em;
+            height: 3.5em;
             max: {width: 85px; height: 85px}
         }
 
@@ -100,7 +101,7 @@
                 &::before {
                     content: "";
                     @include o-position-absolute(0, 0, 0, 0);
-                    background: linear-gradient(to bottom, darken(theme-color('secondary'), 10%) 0%, darken(theme-color('secondary'), 30%) 100%);
+                    background: linear-gradient(to bottom, darken(map-get($theme-colors, 'secondary'), 10%) 0%, darken(map-get($theme-colors, 'secondary'), 30%) 100%);
                     z-index: -1;
                 }
                 padding: 3em;
@@ -227,7 +228,7 @@
                     bottom: 0;
                     left: 0;
                     display: block;
-                    background: theme-color('primary');
+                    background: map-get($theme-colors, 'primary');
                     width: 100%;
                     height: 150px;
                     overflow: hidden;
diff --git a/addons/website_blog/views/snippets/s_blog_posts.xml b/addons/website_blog/views/snippets/s_blog_posts.xml
index 5da8cb7e85e..689a43121bd 100644
--- a/addons/website_blog/views/snippets/s_blog_posts.xml
+++ b/addons/website_blog/views/snippets/s_blog_posts.xml
@@ -21,7 +21,7 @@
                 <t t-set="additionnal_classes" t-value="'w-100 h-100 bg-200 position-absolute'"/>
             </t>
         </a>
-        <div class="pl-2">
+        <div class="ps-2">
             <a class="" t-att-title="'Read' + data['name']" t-att-href="data['call_to_action_url']">
                 <div class="s_blog_posts_post_title mb-1">
                     <span t-if="is_sample" class="bg-primary text-uppercase px-1">Sample</span>
@@ -57,7 +57,7 @@
 <template id="dynamic_filter_template_blog_post_horizontal" name="Horizontal layout">
     <figure t-foreach="records" t-as="data" class="post s_blog_posts_post w-100">
         <t t-set="record" t-value="data['_record']"/>
-        <span t-if="is_sample" class="h5 float-right bg-primary text-uppercase rounded-circle px-2 py-2">Sample</span>
+        <span t-if="is_sample" class="h5 float-end bg-primary text-uppercase rounded-circle px-2 py-2">Sample</span>
         <figcaption>
             <h4 class="mb0">
                 <a t-att-href="data['call_to_action_url']" t-field="record.name"/>
@@ -93,8 +93,8 @@
             </div>
             <div class="card-footer d-flex justify-content-between">
                 <span class="text-muted mb-0" t-field="record.post_date" t-options='{"format": "MMM d, yyyy"}' />
-                <span class="text-muted mb-0">In <a class="font-weight-bold" t-field="record.blog_id.name" t-att-href="'/blog/%s' % record.blog_id.id" />
-                    <a t-if="is_sample" class="font-weight-bold" href="#">Sample</a>
+                <span class="text-muted mb-0">In <a class="fw-bold" t-field="record.blog_id.name" t-att-href="'/blog/%s' % record.blog_id.id" />
+                    <a t-if="is_sample" class="fw-bold" href="#">Sample</a>
                 </span>
             </div>
         </div>
diff --git a/addons/website_blog/views/website_blog_components.xml b/addons/website_blog/views/website_blog_components.xml
index 58c3c27578b..06035f34aab 100644
--- a/addons/website_blog/views/website_blog_components.xml
+++ b/addons/website_blog/views/website_blog_components.xml
@@ -9,10 +9,10 @@
         <div class="container">
             <ul class="navbar-nav">
                 <li class="nav-item">
-                    <span class="nav-link disabled pl-0">Blogs:</span>
+                    <span class="nav-link disabled ps-0">Blogs:</span>
                 </li>
                 <li class="nav-item">
-                    <a href="/blog" t-attf-class="nav-link font-weight-bold #{(not blog) and 'active'}">All</a>
+                    <a href="/blog" t-attf-class="nav-link fw-bold #{(not blog) and 'active'}">All</a>
                 </li>
                 <li class="nav-item" t-foreach="blogs" t-as="nav_blog">
                     <a t-attf-href="/blog/#{slug(nav_blog)}" t-cache="nav_blog,blog and nav_blog.id == blog.id"
@@ -41,12 +41,12 @@
         <div t-if="not hide_title and categ_title" class="text-muted mb-1 h6" t-esc="categ_title"/>
         <t t-foreach="tags" t-as="tag">
             <t t-if="tag.post_ids">
-                <span t-if="dismissibleBtn and tag.id in active_tag_ids" class="align-items-baseline border d-inline-flex pl-2 rounded mb-2">
-                    <i class="fa fa-tag mr-2 text-muted"/>
+                <span t-if="dismissibleBtn and tag.id in active_tag_ids" class="align-items-baseline border d-inline-flex ps-2 rounded mb-2">
+                    <i class="fa fa-tag me-2 text-muted"/>
                     <t t-esc="tag.name"/>
                     <a t-attf-href="#{blog_url(tag=tags_list(active_tag_ids, tag.id))}" class="btn border-0 py-1 post_link" t-att-rel="len(active_tag_ids) and 'nofollow'">&#215;</a>
                 </span>
-                <a t-elif="showInactive" t-attf-href="#{blog_url(tag=tags_list(active_tag_ids, tag.id))}" t-attf-class="badge mb-2 mw-100 text-truncate #{tag.id in active_tag_ids and 'badge-primary' or 'border'} post_link" t-attf-rel="len(active_tag_ids) and 'nofollow'" t-esc="tag.name"/>
+                <a t-elif="showInactive" t-attf-href="#{blog_url(tag=tags_list(active_tag_ids, tag.id))}" t-attf-class="badge mb-2 mw-100 text-truncate #{tag.id in active_tag_ids and 'text-bg-primary' or 'border'} post_link" t-attf-rel="len(active_tag_ids) and 'nofollow'" t-esc="tag.name"/>
             </t>
         </t>
     </t>
@@ -55,7 +55,7 @@
 <!-- ======   Template: Date Selector   ========================================
 ============================================================================ -->
 <template id="date_selector">
-    <select name="archive" oninput="location = this.value;" class="custom-select">
+    <select name="archive" oninput="location = this.value;" class="form-select">
         <option t-att-value="blog_url(date_begin=False, date_end=False) if blog else '/blog'"
                 t-att="[('selected' if (not date_begin) else 'unselected' ) , 'true' ]">
                 -- All dates
@@ -79,8 +79,8 @@
         <div t-if="blog_post.author_avatar"
              t-field="blog_post.author_avatar"
              style="line-height:1"
-             t-options='{"widget": "image", "class": "rounded-circle " + "o_wblog_author_avatar mr-1" if hide_date else  "o_wblog_author_avatar_date mr-2"}' />
-        <div t-att-class="not hide_date and 'small font-weight-bold'" style="line-height:1">
+             t-options='{"widget": "image", "class": "rounded-circle " + "o_wblog_author_avatar me-1" if hide_date else  "o_wblog_author_avatar_date me-2"}' />
+        <div t-att-class="not hide_date and 'small fw-bold'" style="line-height:1">
             <span t-if="editable" t-field="blog_post.author_id" t-options='{ "widget": "contact", "fields": ["name"]}'/>
             <span t-else="" t-esc="blog_post.author_name"/>
             <small t-if="not hide_date" t-field="blog_post.post_date" t-options='{"format": "d MMMM, yyyy"}'/>
@@ -112,7 +112,7 @@ Options:
     <div id="o_wblog_sidebar" class="w-100">
         <div class="oe_structure" id="oe_structure_blog_sidebar_index_1"/>
         <div class="o_wblog_sidebar_block pb-5">
-            <h6 class="text-uppercase pb-2 mb-4 border-bottom font-weight-bold">About us</h6>
+            <h6 class="text-uppercase pb-2 mb-4 border-bottom fw-bold">About us</h6>
             <div>
                 <p>Write a small text here to describe your blog or company.</p>
             </div>
@@ -125,7 +125,7 @@ Options:
 <template id="opt_sidebar_blog_index_follow_us" name="Follow Us" priority="1" inherit_id="website_blog.sidebar_blog_index" active="True">
     <xpath expr="//div[@id='o_wblog_sidebar']" position="inside">
         <div class="o_wblog_sidebar_block pb-5">
-            <h6 class="text-uppercase pb-2 mb-4 border-bottom font-weight-bold">Follow Us</h6>
+            <h6 class="text-uppercase pb-2 mb-4 border-bottom fw-bold">Follow Us</h6>
             <div class="o_wblog_social_links d-flex flex-wrap mx-n1">
                 <t t-set="classes" t-translation="off">bg-100 border mx-1 mb-2 rounded-circle d-flex align-items-center justify-content-center text-decoration-none</t>
                 <a t-if="website.social_facebook" t-att-href="website.social_facebook" aria-label="Facebook" title="Facebook" t-att-class="classes"><i class="fa fa-facebook-square text-facebook"/></a>
@@ -150,7 +150,7 @@ Options:
 <template id="opt_sidebar_blog_index_archives" name="Archives" priority="2" inherit_id="website_blog.sidebar_blog_index" active="True">
     <xpath expr="//div[@id='o_wblog_sidebar']" position="inside">
         <div class="o_wblog_sidebar_block pb-5">
-            <h6 class="text-uppercase pb-2 mb-4 border-bottom font-weight-bold">Archives</h6>
+            <h6 class="text-uppercase pb-2 mb-4 border-bottom fw-bold">Archives</h6>
 
             <t t-call="website_blog.date_selector"/>
         </div>
@@ -163,7 +163,7 @@ Options:
     <xpath expr="//div[@id='o_wblog_sidebar']" position="inside">
 
         <div t-if="other_tags or tag_category" class="o_wblog_sidebar_block pb-5">
-            <h6 class="text-uppercase pb-2 mb-4 border-bottom font-weight-bold">Tags</h6>
+            <h6 class="text-uppercase pb-2 mb-4 border-bottom fw-bold">Tags</h6>
             <div class="h5">
                 <t t-foreach="tag_category" t-as="nav_tag_category">
                     <t t-call="website_blog.tags_list">
@@ -182,7 +182,7 @@ Options:
         </div>
 
         <div t-else="" groups="website.group_website_designer" class="o_wblog_sidebar_block pb-5">
-            <h6 class="text-uppercase pb-2 mb-4 border-bottom font-weight-bold">Tags</h6>
+            <h6 class="text-uppercase pb-2 mb-4 border-bottom fw-bold">Tags</h6>
             <em t-ignore="True" class="text-muted">No tags defined yet.</em>
         </div>
         <div class="oe_structure" id="oe_structure_blog_sidebar_index_5"/>
@@ -216,7 +216,7 @@ Display a sidebar beside the post content.
 <template id="opt_blog_post_share_links_display" name="Share Links" inherit_id="website_blog.blog_post_sidebar" active="True" priority="2">
     <xpath expr="//div[@id='o_wblog_post_sidebar']" position="inside">
         <div class="o_wblog_sidebar_block pb-5">
-            <h6 class="text-uppercase pb-3 mb-4 border-bottom font-weight-bold">Share this post</h6>
+            <h6 class="text-uppercase pb-3 mb-4 border-bottom fw-bold">Share this post</h6>
 
             <div class="o_wblog_social_links d-flex flex-wrap mx-n1">
                 <t t-set="classes" t-translation="off">bg-100 border mx-1 mb-2 rounded-circle d-flex align-items-center justify-content-center text-decoration-none</t>
@@ -234,7 +234,7 @@ Display a sidebar beside the post content.
 <template id="opt_blog_post_tags_display" name="Tags" inherit_id="website_blog.blog_post_sidebar" active="True" priority="3">
     <xpath expr="//div[@id='o_wblog_post_sidebar']" position="inside">
         <div class="o_wblog_sidebar_block pb-5">
-            <h6 class="text-uppercase pb-3 mb-4 border-bottom font-weight-bold">Tags</h6>
+            <h6 class="text-uppercase pb-3 mb-4 border-bottom fw-bold">Tags</h6>
             <t t-if="blog_post.tag_ids">
                 <div class="h5">
                     <t t-foreach="blog_post.tag_ids" t-as="one_tag">
@@ -258,7 +258,7 @@ Display a sidebar beside the post content.
 <template id="opt_blog_post_blogs_display" name="Blogs List" inherit_id="website_blog.blog_post_sidebar" active="True" priority="4">
     <xpath expr="//div[@id='o_wblog_post_sidebar']" position="inside">
         <div t-if="len(blogs) > 1" class="o_wblog_sidebar_block pb-5">
-            <h6 class="text-uppercase pb-3 mb-4 border-bottom font-weight-bold">Our blogs</h6>
+            <h6 class="text-uppercase pb-3 mb-4 border-bottom fw-bold">Our blogs</h6>
             <ul class="list-unstyled">
                 <li t-foreach="blogs" t-as="nav_blog" class="mb-2">
                     <a t-attf-href="#{blog_url(blog=nav_blog, tag=False, date_begin=False, date_end=False)}"><b t-field="nav_blog.name"/></a>
@@ -273,7 +273,7 @@ Display a sidebar beside the post content.
 <template id="opt_blog_post_archive_display" name="Archive" inherit_id="website_blog.blog_post_sidebar" active="True" priority="5">
     <xpath expr="//div[@id='o_wblog_post_sidebar']" position="inside">
         <div class="o_wblog_sidebar_block pb-5">
-            <h6 class="text-uppercase pb-3 mb-4 border-bottom font-weight-bold">Archive</h6>
+            <h6 class="text-uppercase pb-3 mb-4 border-bottom fw-bold">Archive</h6>
 
             <t t-call="website_blog.date_selector"/>
         </div>
diff --git a/addons/website_blog/views/website_blog_posts_loop.xml b/addons/website_blog/views/website_blog_posts_loop.xml
index 4f738c4a25d..886d735261a 100644
--- a/addons/website_blog/views/website_blog_posts_loop.xml
+++ b/addons/website_blog/views/website_blog_posts_loop.xml
@@ -17,21 +17,21 @@ according to the enabled options.
 
         <div groups="website.group_website_designer" t-if="state_info and (state_info['published'] > 0 and state_info['unpublished'] > 0)">
             <div class="bg-200 py-2 mb-4 alert alert-dismissable">
-                <button type="button" class="close" data-dismiss="alert" aria-label="Close">&#215;</button>
-                <span class="mr-1">Show:</span>
+                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+                <span class="me-1">Show:</span>
                 <div class="btn-group btn-group-sm">
                     <a t-attf-class="btn #{state == 'published' and 'btn-success' or 'btn-default bg-white border'}"
                        t-attf-href="#{state == 'published' and blog_url(state='') or blog_url(state='published')}">
-                        <i t-attf-class="fa mr-1 #{state == 'published' and 'fa-check-square-o' or 'fa-square-o'}"/>
+                        <i t-attf-class="fa me-1 #{state == 'published' and 'fa-check-square-o' or 'fa-square-o'}"/>
                         Published (<t t-esc="state_info['published']" />)
                     </a>
                     <a t-attf-class="btn #{state == 'unpublished' and 'btn-success' or 'btn-default bg-white border'}"
                        t-attf-href="#{state == 'unpublished' and blog_url(state='') or blog_url(state='unpublished')}">
-                        <i t-attf-class="fa mr-1 #{state == 'unpublished' and 'fa-check-square-o' or 'fa-square-o'}"/>
+                        <i t-attf-class="fa me-1 #{state == 'unpublished' and 'fa-check-square-o' or 'fa-square-o'}"/>
                         Unpublished (<t t-esc="state_info['unpublished']" />)
                     </a>
                 </div>
-                <div class="pt-1 font-italic small">This box will not be visible to your visitors</div>
+                <div class="pt-1 fst-italic small">This box will not be visible to your visitors</div>
             </div>
         </div>
 
@@ -43,8 +43,8 @@ according to the enabled options.
                     <t t-if="len(posts) &lt; 2">Article</t>
                     <t t-else="">Articles</t>
                 </div>
-                <span t-if="search" class="align-items-baseline border d-inline-flex pl-2 rounded mb-2">
-                    <i class="fa fa-search mr-2 text-muted"/>
+                <span t-if="search" class="align-items-baseline border d-inline-flex ps-2 rounded mb-2">
+                    <i class="fa fa-search me-2 text-muted"/>
                     <t t-esc="search"/>
                     <a t-att-href="blog_url(search=False, tag=tag)" class="btn border-0 py-1 post_link">&#215;</a>
                 </span>
@@ -63,8 +63,8 @@ according to the enabled options.
                         <t t-set='dismissibleBtn' t-value="True"/>
                     </t>
                 </t>
-                <span t-if="date_begin" class="align-items-baseline border d-inline-flex pl-2 rounded mb-2">
-                    <i class="fa fa-calendar-o mr-2 text-muted"/>
+                <span t-if="date_begin" class="align-items-baseline border d-inline-flex ps-2 rounded mb-2">
+                    <i class="fa fa-calendar-o me-2 text-muted"/>
                     <t t-esc="date_begin" t-options="{'widget': 'date', 'format': 'MMM yyyy'}"></t>
                     <a t-attf-href="#{blog_url(date_begin=False, date_end=False)}" class="btn border-0 py-1">&#215;</a>
                 </span>
@@ -74,7 +74,7 @@ according to the enabled options.
             <!-- No blog post yet -->
             <div t-if="not posts" class="col">
                 <t t-set="no_results_str">No results for "%s".</t>
-                <h2 t-if="search" t-esc="no_results_str % search" class="font-weight-bold"/>
+                <h2 t-if="search" t-esc="no_results_str % search" class="fw-bold"/>
                 <h2 t-else="">No blog post yet.</h2>
                 <div class="alert alert-info" groups="website.group_website_designer">
                     Click on "<b>New</b>" in the top-right corner to write your first blog post.
@@ -119,7 +119,7 @@ according to the enabled options.
                             </div>
                             <div t-else="" class="mt-3">
                                 <a t-attf-href="/blog/#{slug(blog_post.blog_id)}/#{slug(blog_post)}" class="btn btn-primary">
-                                    Read more <i class="fa fa-chevron-right ml-2"/>
+                                    Read more <i class="fa fa-chevron-right ms-2"/>
                                 </a>
                             </div>
                         </t>
@@ -132,7 +132,7 @@ according to the enabled options.
                                     <t t-call="website_blog.post_teaser"/>
                                 </div>
                             </div>
-                            <div t-attf-class="o_wblog_normalize_font #{'card-footer px-2 pb-2' if opt_blog_cards_design else 'pr-2 pb-2'}">
+                            <div t-attf-class="o_wblog_normalize_font #{'card-footer px-2 pb-2' if opt_blog_cards_design else 'pe-2 pb-2'}">
                                 <t t-call="website_blog.post_info"></t>
                             </div>
                         </t>
@@ -165,10 +165,10 @@ according to the enabled options.
 <template id="post_info">
     <div class="d-flex small flex-wrap mb-1 w-100">
         <div t-attf-class="d-flex flex-wrap align-items-center justify-content-between mx-n2 #{opt_blog_list_view and 'flex-grow-0 w-auto mw-100' or 'flex-grow-1' }">
-            <time t-field="blog_post.post_date" class="text-nowrap font-weight-bold px-2" t-options='{"format": "MMM d, yyyy"}'/>
+            <time t-field="blog_post.post_date" class="text-nowrap fw-bold px-2" t-options='{"format": "MMM d, yyyy"}'/>
             <div t-if="is_view_active('website_blog.opt_posts_loop_show_stats')" class="px-2">
-                <b class="text-nowrap" title="Comments"><i class="fa fa-comment text-muted mr-1"/><t t-esc="len(blog_post.message_ids)"/></b>
-                <b class="text-nowrap pl-2" title="Views"><i class="fa fa-binoculars text-muted mr-1"/><t t-esc="blog_post.visits"/></b>
+                <b class="text-nowrap" title="Comments"><i class="fa fa-comment text-muted me-1"/><t t-esc="len(blog_post.message_ids)"/></b>
+                <b class="text-nowrap ps-2" title="Views"><i class="fa fa-binoculars text-muted me-1"/><t t-esc="blog_post.visits"/></b>
             </div>
             <b t-if="posts_list_show_parent_blog" class="text-nowrap text-truncate px-2">
                 <i class="fa fa-folder-open text-muted"/>
@@ -211,7 +211,7 @@ according to the enabled options.
     <div t-if="len(blog_post.tag_ids)" class="o_wblog_post_short_tag_section d-flex align-items-center flex-wrap pt-2">
         <t t-foreach="blog_post.tag_ids" t-as="one_tag">
             <a t-attf-href="#{blog_url(tag=tags_list(active_tag_ids, one_tag.id))}"
-               t-attf-class="badge mb-2 mr-1 text-truncate #{one_tag.id in active_tag_ids and 'bg-primary text-light' or 'border text-primary'} post_link"
+               t-attf-class="badge mb-2 me-1 text-truncate #{one_tag.id in active_tag_ids and 'bg-primary text-light' or 'border text-primary'} post_link"
                t-att-rel="len(active_tag_ids) and 'nofollow'"
                t-esc="one_tag.name"/>
         </t>
diff --git a/addons/website_blog/views/website_blog_templates.xml b/addons/website_blog/views/website_blog_templates.xml
index acd96834538..6a3b147a3eb 100644
--- a/addons/website_blog/views/website_blog_templates.xml
+++ b/addons/website_blog/views/website_blog_templates.xml
@@ -110,13 +110,13 @@ list of filtered posts (by date or tag).
                                 <div t-field="blog.subtitle" class="h4" placeholder="Subtitle"/>
                             </t>
                             <t t-else="first_post">
-                                <div t-if="not date and not tag" class="h4 mb-3 bg-o-color-3 px-2 rounded-sm d-inline-block mr-auto">Latest</div>
+                                <div t-if="not date and not tag" class="h4 mb-3 bg-o-color-3 px-2 rounded-1 d-inline-block me-auto">Latest</div>
                                 <a t-attf-href="/blog/#{slug(first_post.blog_id)}/#{slug(first_post)}"
                                    t-field="first_post.name" class="h1 d-block" t-att-data-blog-id="first_post.id" placeholder="Blog Post Title"/>
                                 <div t-field="first_post.subtitle" class="h4" placeholder="Subtitle"/>
 
                                 <div t-if="not blog" class="d-flex">
-                                    <div class="small mt-2 mb-3 mr-1">
+                                    <div class="small mt-2 mb-3 me-1">
                                         in <i class="fa fa-folder-open text-muted"/> <a t-attf-href="#{blog_url(blog=first_post.blog_id)}" t-field="first_post.blog_id"/>
                                     </div>
                                 </div>
@@ -145,7 +145,7 @@ list of filtered posts (by date or tag).
 
             <div class="container position-relative h-100 d-flex flex-column justify-content-around" t-cache="_record">
                 <div t-attf-class="o_wblog_post_title #{'js_tweet' if opt_blog_post_select_to_tweet else ''} #{'js_comment' if opt_blog_post_select_to_comment else ''}">
-                    <div t-if="not date and not tag and not blog" class="h4 bg-o-color-3 px-2 d-inline-block rounded-sm">Latest</div>
+                    <div t-if="not date and not tag and not blog" class="h4 bg-o-color-3 px-2 d-inline-block rounded-1">Latest</div>
                     <a t-if="not blog and first_post" t-attf-href="/blog/#{slug(first_post.blog_id)}/#{slug(first_post)}" t-att-title="first_post.name" class="text-white text-decoration-none">
                         <div t-field="first_post.name" id="o_wblog_post_name" t-att-data-blog-id="first_post.id" placeholder="Blog Post Title"/>
                         <div t-field="first_post.subtitle" id="o_wblog_post_subtitle"  placeholder="Subtitle"/>
@@ -171,8 +171,8 @@ list of filtered posts (by date or tag).
 <!-- (Option) Blog: Sidebar : Show -->
 <template id="opt_blog_sidebar_show" name="Show Sidebar" inherit_id="website_blog.blog_post_short" active="False">
     <xpath expr="//div[@id='o_wblog_posts_loop_container']" position="after">
-        <div t-if="opt_blog_list_view" class="border-right d-none d-lg-block" style="opacity: 0.5"/>
-        <div t-attf-class="col-12 col-md-3 d-flex #{opt_blog_list_view and 'col-lg-4' or 'ml-lg-5'}">
+        <div t-if="opt_blog_list_view" class="border-end d-none d-lg-block" style="opacity: 0.5"/>
+        <div t-attf-class="col-12 col-md-3 d-flex #{opt_blog_list_view and 'col-lg-4' or 'ms-lg-5'}">
             <t t-call="website_blog.sidebar_blog_index"/>
         </div>
     </xpath>
@@ -241,7 +241,7 @@ list of filtered posts (by date or tag).
                     <div id="o_wblog_post_content" t-attf-class="#{opt_blog_post_readable and 'o_container_small mx-0 w-100 flex-shrink-0' or 'w-lg-75'}">
                         <t t-call="website_blog.blog_post_content"/>
                     </div>
-                    <div id="o_wblog_post_sidebar_col" t-attf-class="pl-lg-5 #{not opt_blog_post_readable and 'flex-grow-1 w-lg-25'}">
+                    <div id="o_wblog_post_sidebar_col" t-attf-class="ps-lg-5 #{not opt_blog_post_readable and 'flex-grow-1 w-lg-25'}">
                         <t t-call="website_blog.blog_post_sidebar"/>
                     </div>
                 </div>
@@ -274,7 +274,7 @@ list of filtered posts (by date or tag).
         <div t-if="len(blogs) > 1">in <a t-attf-href="#{blog_url(blog=blog_post.blog_id)}"><b t-field="blog.name"/></a></div>
         <div t-if="len(blog_post.tag_ids) > 0">#
             <t t-foreach="blog_post.tag_ids" t-as="one_tag">
-                <a class="badge text-primary border mr-1 post_link" t-attf-href="#{blog_url(tag=slug(one_tag), date_begin=False, date_end=False)}" t-esc="one_tag.name"/>
+                <a class="badge text-primary border me-1 post_link" t-attf-href="#{blog_url(tag=slug(one_tag), date_begin=False, date_end=False)}" t-esc="one_tag.name"/>
             </t>
         </div>
     </div>
@@ -316,12 +316,12 @@ list of filtered posts (by date or tag).
                         <span t-field="blog_post.post_date" class="text-muted" t-options='{"format": "d MMMM, yyyy"}'/>
                         <span>by
                             <t t-call="website_blog.post_author">
-                                <t t-set="additionnal_classes" t-value="'d-inline-flex mr-2'"/>
+                                <t t-set="additionnal_classes" t-value="'d-inline-flex me-2'"/>
                                 <t t-set="hide_date" t-value="True"/>
                             </t>
                         </span>
-                        <span t-if="len(blog_post.message_ids) > 0" class="text-nowrap pl-2 o_not_editable">|
-                            <i class="fa fa-comment text-muted mr-1"/>
+                        <span t-if="len(blog_post.message_ids) > 0" class="text-nowrap ps-2 o_not_editable">|
+                            <i class="fa fa-comment text-muted me-1"/>
                             <a href="#discussion">
                                 <t t-esc="len(blog_post.message_ids)"/>
                                 <t t-if="len(blog_post.message_ids)>1">Comments</t>
@@ -393,9 +393,9 @@ list of filtered posts (by date or tag).
                 <div class="container">
                     <div t-attf-class="mb-4 mx-auto #{ readableClass if opt_blog_post_readable else ''}">
                         <hr/>
-                        <div class="d-flex text-right py-4">
-                            <div class="flex-grow-1 pr-3">
-                                <span class="bg-o-color-3 h6 d-inline-block py-1 px-2 rounded-sm">Read Next</span>
+                        <div class="d-flex text-end py-4">
+                            <div class="flex-grow-1 pe-3">
+                                <span class="bg-o-color-3 h6 d-inline-block py-1 px-2 rounded-1">Read Next</span>
                                 <a t-att-href="'/blog/' + slug(next_post.blog_id) + '/' + slug(next_post)" t-att-title="'Read next' + next_post.name">
                                     <div t-field="next_post.name" id="o_wblog_post_name" t-att-data-blog-id="next_post.id" placeholder="Blog Post Title" class="h2"/>
                                     <div t-field="next_post.subtitle" id="o_wblog_post_subtitle" placeholder="Subtitle" class="lead"/>
@@ -433,7 +433,7 @@ list of filtered posts (by date or tag).
                             </div>
 
                             <div t-attf-class="o_wblog_toggle #{next_cover_is_full and 'mb-n5'}">
-                                <span class="h4 d-inline-block py-1 px-2 rounded-sm text-white">
+                                <span class="h4 d-inline-block py-1 px-2 rounded-1 text-white">
                                     <i class="fa fa-angle-right fa-3x text-white" aria-label="Read next" title="Read Next"/>
                                 </span>
                             </div>
diff --git a/addons/website_blog/views/website_blog_views.xml b/addons/website_blog/views/website_blog_views.xml
index dad9a3cf929..cc493f42c90 100644
--- a/addons/website_blog/views/website_blog_views.xml
+++ b/addons/website_blog/views/website_blog_views.xml
@@ -133,13 +133,13 @@
                                     <strong class="col-8">
                                         <span t-esc="record.name.value"/>
                                     </strong>
-                                    <strong class="col-4 text-right">
+                                    <strong class="col-4 text-end">
                                         <span t-esc="record.blog_id.value"/>
                                     </strong>
                                     <div class="col-8">
                                         <i class="fa fa-clock-o" role="img" aria-label="Post date" title="Post date"/><span t-esc="record.post_date.value"/>
                                     </div>
-                                    <div class="col-4 text-right">
+                                    <div class="col-4 text-end">
                                         <img t-if="record.author_id.raw_value"
                                              t-att-title="record.author_id.value"
                                              t-att-alt="record.author_id.value"
diff --git a/addons/website_crm/views/website_visitor_views.xml b/addons/website_crm/views/website_visitor_views.xml
index 978cc1c6e58..b36dd0e557b 100644
--- a/addons/website_crm/views/website_visitor_views.xml
+++ b/addons/website_crm/views/website_visitor_views.xml
@@ -50,14 +50,14 @@
             <xpath expr="//div[@id='o_page_count']" position="after">
                 <div t-if="record.lead_count.raw_value">
                     Leads / Opportunities
-                    <span class="float-right font-weight-bold">
+                    <span class="float-end fw-bold">
                         <field name="lead_count"/>
                     </span>
                 </div>
             </xpath>
             <xpath expr="//div[@id='wvisitor_visited_page']" position="after">
                 <div class="col-lg col-sm-4 col-6 py-0 my-2">
-                    <span t-att-class="record.lead_count.raw_value ? 'font-weight-bold' : 'text-muted'">
+                    <span t-att-class="record.lead_count.raw_value ? 'fw-bold' : 'text-muted'">
                         <field name="lead_count"/>
                     </span>
                     <div t-att-class="record.lead_count.raw_value ? '' : 'text-muted'">Leads / Opportunities</div>
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 a6d74a8e5c1..103fc1bef49 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
@@ -35,7 +35,7 @@
                     <li class="nav-item">
                         <a t-attf-href="/partners#{ grade['grade_id'][0] and '/grade/%s' % grade['grade_id'][0] or '' }#{ current_country and '/country/%s' % slug(current_country) or '' }#{ '?' + (search_path or '') + '&amp;' + keep_query('country_all') }"
                            t-attf-class="nav-link#{grade['active'] and ' active' or ''}">
-                            <span class="badge badge-pill float-right" t-esc="grade['grade_id_count'] or ''"/>
+                            <span class="badge rounded-pill float-end" t-esc="grade['grade_id_count'] or ''"/>
                             <t t-esc="grade['grade_id'][1]"/>
                         </a>
                     </li>
@@ -48,7 +48,7 @@
                     <li t-if="country['country_id']" class="nav-item">
                         <a t-attf-href="/partners#{ current_grade and '/grade/%s' % slug(current_grade) or ''}#{country['country_id'][0] and '/country/%s' % country['country_id'][0] or '' }#{ '?' + (search_path or '') + (country['country_id'][0] == 0 and '&amp;country_all=True' or '')}"
                            t-attf-class="nav-link#{country['active'] and ' active' or ''}">
-                            <span class="badge badge-pill float-right" t-esc="country['country_id_count'] or ''"/>
+                            <span class="badge rounded-pill float-end" t-esc="country['country_id_count'] or ''"/>
                             <t t-esc="country['country_id'][1]"/>
                         </a>
                     </li>
@@ -60,7 +60,7 @@
         <div class="col-lg-8 offset-lg-1" id="ref_content">
             <div class="d-flex p-2">
                 <t t-call="website.pager"/>
-                <form action="" method="get" class="form-inline ml-auto">
+                <form action="" method="get" class="form-inline ms-auto">
                     <div class="form-group">
                         <input t-if="country_all" type="hidden" name="country_all" value="True" />
                         <input type="text" name="search" class="search-query form-control" placeholder="Search" t-att-value="searches.get('search', '')"/>
@@ -83,7 +83,7 @@
                     <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"
+                           class="me-3 text-center o_width_128"
                            t-options='{"widget": "image", "qweb_img_responsive": False, "class": "o_image_128_max"}'
                         ></a>
                         <div class="flex-grow-1 o_partner_body" style="min-height: 64px;">
@@ -102,7 +102,7 @@
             </div>
             <div class='navbar'>
                 <t t-call="website.pager">
-                   <t t-set="classname" t-valuef="float-left"/>
+                   <t t-set="classname" t-valuef="float-start"/>
                 </t>
             </div>
         </div>
@@ -118,7 +118,7 @@
                 <div class="modal-content">
                     <header class="modal-header">
                         <h4 class="modal-title">World Map</h4>
-                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                     </header>
                     <iframe t-attf-src="/google_map/?width=898&amp;height=485&amp;partner_ids=#{ google_map_partner_ids }&amp;partner_url=/partners/"
                     style="width:898px; height:485px; border:0; padding:0; margin:0;"></iframe>
@@ -126,7 +126,7 @@
               </div>
             </div>
             <!-- modal end -->
-            <h3>World Map<button class="btn btn-link" data-toggle="modal" data-target=".partner_map_modal"><span class="fa fa-external-link" role="img" aria-label="External link" title="External link"/></button></h3>
+            <h3>World Map<button class="btn btn-link" data-bs-toggle="modal" data-bs-target=".partner_map_modal"><span class="fa fa-external-link" role="img" aria-label="External link" title="External link"/></button></h3>
             <ul class="nav">
                 <iframe t-attf-src="/google_map?width=260&amp;height=240&amp;partner_ids=#{ google_map_partner_ids }&amp;partner_url=/partners/"
                     style="width:260px; height:240px; border:0; padding:0; margin:0;" scrolling="no"></iframe>
@@ -162,7 +162,7 @@
     <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="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"}'/>
+            <span t-field="reference.avatar_128" class="d-block me-3 text-center o_width_128" t-options='{"widget": "image", "qweb_img_responsive": False, "class": "o_image_128_max"}'/>
             <div class="flex-grow-1" style="min-height: 64px;">
                 <span t-field="reference.self"/>
                 <div t-field='reference.website_short_description'/>
@@ -252,8 +252,8 @@
             <t t-call="portal.portal_searchbar">
                 <t t-set="title">Opportunities</t>
 
-                <div class="form-inline ml-lg-4" t-if="request.env.user.partner_id.grade_id or request.env.user.commercial_partner_id.grade_id">
-                    <button class="btn btn-success btn-sm" name='new_opp' data-toggle="modal" data-target=".modal_new_opp" title="Add an opportunity" aria-label="Add an opportunity">
+                <div class="form-inline ms-lg-4" t-if="request.env.user.partner_id.grade_id or request.env.user.commercial_partner_id.grade_id">
+                    <button class="btn btn-success btn-sm" name='new_opp' data-bs-toggle="modal" data-bs-target=".modal_new_opp" title="Add an opportunity" aria-label="Add an opportunity">
                         Create Opportunity
                     </button>
                 </div>
@@ -265,7 +265,7 @@
                         <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
                         <header class="modal-header">
                             <h4 class="modal-title">New Opportunity</h4>
-                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button>
+                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                         </header>
                         <main class="modal-body" id="new-opp-dialog">
                             <div class="form-group">
@@ -282,7 +282,7 @@
                             </div>
                         </main>
                         <footer class="modal-footer">
-                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                             <button t-attf-class="btn btn-primary new_opp_confirm">Confirm</button>
                         </footer>
                     </form>
@@ -317,7 +317,7 @@
                             <span t-field="opp.probability" />%
                         </td>
                         <td>
-                            <span class="badge badge-info badge-pill" title="Current stage of the opportunity" t-esc="opp.stage_id.name" />
+                            <span class="badge text-bg-info rounded-pill" title="Current stage of the opportunity" t-esc="opp.stage_id.name" />
                         </td>
                     </tr>
                 </tbody>
@@ -331,7 +331,7 @@
                 <div class="card-header">
                     <div class="row">
                         <div class="col-lg-12">
-                            <span class="float-right" title="Rating" role="img" t-attf-aria-label="Rating: #{lead.priority} on 3">
+                            <span class="float-end" title="Rating" role="img" t-attf-aria-label="Rating: #{lead.priority} on 3">
                                 <t t-foreach="range(1, 4)" t-as="i">
                                     <span t-attf-class="fa fa-lg fa-star#{'' if i &lt;= int(lead.priority) else '-o'}"/>
                                 </t>
@@ -394,7 +394,7 @@
                                 <label class="col-4">Tags</label>
                                 <span class="col-8">
                                     <t t-foreach="lead.tag_ids" t-as="tag">
-                                        <span class="badge badge-info" t-esc="tag.name" />
+                                        <span class="badge text-bg-info" t-esc="tag.name" />
                                     </t>
                                 </span>
                             </div>
@@ -415,8 +415,8 @@
                 </div>
             </div>
             <div class='mt8'>
-                <a role="button" href="#" class="btn btn-primary btn" data-toggle="modal" data-target=".modal_partner_assign_interested"><i class="fa fa-file-text-o"/> I'm interested</a>
-                <a role="button" href="#" class="btn btn-primary btn" data-toggle="modal" data-target=".modal_partner_assign_desinterested"><i class="fa fa-fw fa-times"/> I'm not interested</a>
+                <a role="button" href="#" class="btn btn-primary btn" data-bs-toggle="modal" data-bs-target=".modal_partner_assign_interested"><i class="fa fa-file-text-o"/> I'm interested</a>
+                <a role="button" href="#" class="btn btn-primary btn" data-bs-toggle="modal" data-bs-target=".modal_partner_assign_desinterested"><i class="fa fa-fw fa-times"/> I'm not interested</a>
                 <div class="modal fade modal_partner_assign_interested" role="form">
                     <div class="modal-dialog">
                         <form method="POST" class="js_accept_json modal-content js_website_submit_form interested_partner_assign_form">
@@ -424,7 +424,7 @@
                             <input type="hidden" name="lead_id" class="assign_lead_id" t-att-value="lead.id"/>
                             <header class="modal-header">
                                 <h4 class="modal-title">Lead Feedback</h4>
-                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button>
+                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                             </header>
                             <main class="modal-body" id="sign-dialog">
                                 <div class="form-group">
@@ -440,7 +440,7 @@
                                 </div>
                             </main>
                             <footer class="modal-footer">
-                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                                 <button t-attf-class="btn btn-primary interested_partner_assign_confirm">Confirm</button>
                             </footer>
                         </form>
@@ -453,7 +453,7 @@
                             <input type="hidden" name="lead_id" class="assign_lead_id" t-att-value="lead.id"/>
                             <header class="modal-header">
                                 <h4 class="modal-title">Lead Feedback</h4>
-                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button>
+                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                             </header>
                             <main class="modal-body" id="sign-dialog">
                                 <div class="form-group">
@@ -473,7 +473,7 @@
                                 </div>
                             </main>
                             <footer class="modal-footer">
-                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                                 <button t-attf-class="btn btn-primary desinterested_partner_assign_confirm">Confirm</button>
                             </footer>
                         </form>
@@ -497,18 +497,18 @@
         <t t-call="portal.portal_layout">
             <t t-call="portal.portal_record_layout">
                 <t t-set="card_header">
-                    <div class="row no-gutters">
+                    <div class="row g-0">
                         <div class="col-md">
                             <h5 class="mb-2 mb-md-0">
                                 <small class="text-muted">Opportunity - </small>
                                 <span t-field="opportunity.name"/>
                             </h5>
                         </div>
-                        <div class="col-md text-md-right">
+                        <div class="col-md text-md-end">
                             <div class="d-inline-block">
-                                <small class="mr-2 mt-1 float-left"><b>Stage:</b></small>
-                                <div t-foreach="stages[::-1]" t-as="stage" class="float-left">
-                                    <i t-if="not stage_first" class="fa fa-chevron-right ml-2 mr-1 small" style="opacity: 0.5"/>
+                                <small class="me-2 mt-1 float-start"><b>Stage:</b></small>
+                                <div t-foreach="stages[::-1]" t-as="stage" class="float-start">
+                                    <i t-if="not stage_first" class="fa fa-chevron-right ms-2 me-1 small" style="opacity: 0.5"/>
                                     <button type="button" t-att-data="stage.id" t-att-opp="opportunity.id" t-attf-class="btn btn-sm px-2 opp-stage-button #{'btn-secondary' if opportunity.stage_id.name != stage.name else 'btn-primary disabled'}">
                                         <span t-field="stage.name"/>
                                     </button>
@@ -526,9 +526,9 @@
                                     <span t-if="opportunity.company_currency" class="text-nowrap" t-esc="opportunity.expected_revenue" t-options="{'widget': 'monetary', 'display_currency': opportunity.company_currency}"/>
                                     <span t-else="" class="text-nowrap" t-esc="opportunity.expected_revenue"/>
                                     <span> at </span>
-                                    <span class="badge badge-info badge-pill"><span t-field="opportunity.probability"/>%</span>
+                                    <span class="badge text-bg-info rounded-pill"><span t-field="opportunity.probability"/>%</span>
                                 </h5>
-                                <button type="button" data-toggle="modal" data-target=".modal_edit_opp" class="btn btn-link btn-sm"><i class="fa fa-pencil mr-1"/>Edit</button>
+                                <button type="button" data-bs-toggle="modal" data-bs-target=".modal_edit_opp" class="btn btn-link btn-sm"><i class="fa fa-pencil me-1"/>Edit</button>
                             </div>
                             <div class="row mb-2">
                                 <strong class="col-12 col-sm-4">Expected Closing</strong>
@@ -564,15 +564,15 @@
                         <div class="col-lg-6 offset-lg-1 col-xl-5 offset-xl-2">
                             <div class="d-flex justify-content-between py-2 mb-3 border-bottom align-items-center">
                                 <h5 class="card-title mb-0">Contact</h5>
-                                <button type="button" data-toggle="modal" data-target=".modal_edit_contact" class="btn btn-link btn-sm"><i class="fa fa-pencil mr-1"/>Edit</button>
+                                <button type="button" data-bs-toggle="modal" data-bs-target=".modal_edit_contact" class="btn btn-link btn-sm"><i class="fa fa-pencil me-1"/>Edit</button>
                             </div>
                             <div class="row mb-3" t-if="opportunity.partner_name or opportunity.email_from or opportunity.contact_name">
                                 <strong class="col-12 col-sm-3">Customer</strong>
                                 <div class="col">
                                     <div t-if="opportunity.partner_name or opportunity.contact_name">
                                         <span class="fa fa-user fa-fw" role="img" aria-label="User" title="User"/>
-                                        <strong class="font-italic" t-if="opportunity.partner_name" itemprop="name" t-field="opportunity.partner_name" />
-                                        <strong class="font-italic" t-else="" itemprop="name" t-field="opportunity.contact_name" />
+                                        <strong class="fst-italic" t-if="opportunity.partner_name" itemprop="name" t-field="opportunity.partner_name" />
+                                        <strong class="fst-italic" t-else="" itemprop="name" t-field="opportunity.contact_name" />
                                     </div>
                                     <div t-if="opportunity.phone">
                                         <span class="fa fa-phone fa-fw" role="img" aria-label="Phone" title="Phone"/>
@@ -617,11 +617,11 @@
                                         <input type="hidden" name="opportunity_id" class="opportunity_id" t-att-value="opportunity.id"/>
                                         <header class="modal-header">
                                             <h4 class="modal-title">Edit Opportunity</h4>
-                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button>
+                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                         </header>
                                         <main class="modal-body" id="sign-dialog">
                                             <div class="form-group">
-                                                <div class="form-row align-items-center">
+                                                <div class="row align-items-center">
                                                     <div class="col-auto flex-grow-1">
                                                         <div class="input-group">
                                                             <div class="input-group-text"><span class="text-nowrap" t-esc="opportunity.company_currency.symbol"/></div>
@@ -644,22 +644,22 @@
                                                         <div class="input-group">
                                                             <label class="radio-inline">
                                                                 <input type="radio" name="PriorityRadioOptions" value="0" t-att-checked="opportunity.priority not in ['1','2','3']" aria-label="Rating: 0 on 3" title="Rating: 0 on 3"/>
-                                                                <i class="ml-1 fa fa-star-o"></i>
+                                                                <i class="ms-1 fa fa-star-o"></i>
                                                             </label>
-                                                            <label class="radio-inline ml-2">
+                                                            <label class="radio-inline ms-2">
                                                                 <input type="radio" name="PriorityRadioOptions" value="1" t-att-checked="opportunity.priority == '1'" aria-label="Rating: 1 on 3" title="Rating: 1 on 3"/>
-                                                                <i class="ml-1 fa text-warning fa-star"></i>
+                                                                <i class="ms-1 fa text-warning fa-star"></i>
                                                             </label>
-                                                            <label class="radio-inline ml-2">
+                                                            <label class="radio-inline ms-2">
                                                                 <input type="radio" name="PriorityRadioOptions" value="2" t-att-checked="opportunity.priority == '2'" aria-label="Rating: 2 on 3" title="Rating: 2 on 3"/>
-                                                                <i class="ml-1 fa text-warning fa-star"></i>
-                                                                <i class="ml-1 fa text-warning fa-star"></i>
+                                                                <i class="ms-1 fa text-warning fa-star"></i>
+                                                                <i class="ms-1 fa text-warning fa-star"></i>
                                                             </label>
-                                                            <label class="radio-inline ml-2">
+                                                            <label class="radio-inline ms-2">
                                                                 <input type="radio" name="PriorityRadioOptions" value="3" t-att-checked="opportunity.priority == '3'" aria-label="Rating: 3 on 3" title="Rating: 3 on 3"/>
-                                                                <i class="ml-1 fa text-warning fa-star"></i>
-                                                                <i class="ml-1 fa text-warning fa-star"></i>
-                                                                <i class="ml-1 fa text-warning fa-star"></i>
+                                                                <i class="ms-1 fa text-warning fa-star"></i>
+                                                                <i class="ms-1 fa text-warning fa-star"></i>
+                                                                <i class="ms-1 fa text-warning fa-star"></i>
                                                             </label>
                                                         </div>
                                                     </div>
@@ -679,7 +679,7 @@
                                                 <div class="row">
                                                     <div class="col-md-5">
                                                         <label class="col-form-label" for="next_activity">Next Activity</label>
-                                                        <select class="form-control next_activity" name="next_activity">
+                                                        <select class="form-select next_activity" name="next_activity">
                                                             <t t-foreach="activity_types" t-as="activity_type">
                                                                 <option t-att-data="activity_type.id" t-att-selected="activity_type.id == user_activity.activity_type_id.id"
                                                                     t-att-name="activity_type.name" t-att-delay_count="activity_type.delay_count"
@@ -706,7 +706,7 @@
                                             </div>
                                         </main>
                                         <footer class="modal-footer">
-                                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                                             <button t-attf-class="btn btn-primary edit_opp_confirm">Confirm</button>
                                         </footer>
                                     </form>
@@ -720,7 +720,7 @@
                                         <input type="hidden" name="opportunity_id" class="opportunity_id" t-att-value="opportunity.id"/>
                                         <header class="modal-header">
                                             <h4 class="modal-title">Edit Contact</h4>
-                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button>
+                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                         </header>
                                         <main class="modal-body" id="sign-dialog">
                                             <t t-if="opportunity.partner_name">
@@ -760,7 +760,7 @@
                                                         <input type="text" name="city" class="form-control city" t-att-value="opportunity.city" placeholder="City"/>
                                                     </div>
                                                     <div class="col-md-5">
-                                                        <select name="state_id" class="form-control state_id">
+                                                        <select name="state_id" class="form-select state_id">
                                                             <option>States...</option>
                                                             <t t-foreach="states or []" t-as="state">
                                                                 <option class="state" t-att-value="state.id" t-att-country="state.country_id.id" t-att-selected="state.id == opportunity.state_id.id">
@@ -775,7 +775,7 @@
                                                 </div>
                                             </div>
                                             <div class="form-group">
-                                                <select name="country_id" class="form-control country_id">
+                                                <select name="country_id" class="form-select country_id">
                                                     <option>Countries...</option>
                                                     <t t-foreach="countries or []" t-as="country">
                                                         <option t-att-value="country.id" t-att-selected="country.id == opportunity.country_id.id">
@@ -786,7 +786,7 @@
                                             </div>
                                         </main>
                                         <footer class="modal-footer">
-                                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                                             <button t-attf-class="btn btn-primary edit_contact_confirm">Confirm</button>
                                         </footer>
                                     </form>
diff --git a/addons/website_customer/views/website_customer_templates.xml b/addons/website_customer/views/website_customer_templates.xml
index df7f9f048d5..4f74f486113 100644
--- a/addons/website_customer/views/website_customer_templates.xml
+++ b/addons/website_customer/views/website_customer_templates.xml
@@ -20,9 +20,9 @@
                     <div class="col-lg-8 offset-lg-1" id="ref_content">
                         <div class='d-flex m-2'>
                             <t t-call="website.pager">
-                               <t t-set="classname" t-value="'float-left'"/>
+                               <t t-set="classname" t-value="'float-start'"/>
                             </t>
-                            <form action="" method="get" class="navbar-search ml-auto pagination form-inline">
+                            <form action="" method="get" class="navbar-search ms-auto pagination form-inline">
                                 <div class="form-group">
                                     <input type="text" name="search" class="search-query form-control"
                                         placeholder="Search" t-att-value="post.get('search', '')"/>
@@ -37,7 +37,7 @@
                         <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"
+                               class="d-block me-3 text-center o_width_128"
                                t-options='{"widget": "image", "qweb_img_responsive": False, "class": "o_image_128_max"}'
                             ></a>
                             <div class="flex-grow-1" style="min-height: 64px;">
@@ -45,7 +45,7 @@
                                     <span t-field="partner.display_name"/>
                                 </a>
                                 <t t-if="partner.industry_id">
-                                    <a class="badge badge-secondary" t-attf-href="/customers/#{ 'industry/%s/' % slug(partner.industry_id) }#{ current_country_id and 'country/%s' % slug(current_country) or '' }" t-esc="partner.industry_id.name"/>
+                                    <a class="badge text-bg-secondary" t-attf-href="/customers/#{ 'industry/%s/' % slug(partner.industry_id) }#{ current_country_id and 'country/%s' % slug(current_country) or '' }" t-esc="partner.industry_id.name"/>
                                 </t>
                                 <div t-field="partner.website_short_description"/>
                             </div>
@@ -71,7 +71,7 @@
                 <div class="modal-content">
                     <header class="modal-header">
                         <h4 class="modal-title">World Map</h4>
-                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                     </header>
                     <iframe t-attf-src="/google_map/?width=898&amp;height=485&amp;partner_ids=#{ google_map_partner_ids }&amp;partner_url=/customers/"
                     style="width:898px; height:485px; border:0; padding:0; margin:0;"></iframe>
@@ -79,7 +79,7 @@
               </div>
             </div>
             <!-- modal end -->
-            <h3>World Map<button class="btn btn-link" data-toggle="modal" data-target=".customer_map_modal"><span class="fa fa-external-link" role="img" aria-label="External link" title="External link"/></button></h3>
+            <h3>World Map<button class="btn btn-link" data-bs-toggle="modal" data-bs-target=".customer_map_modal"><span class="fa fa-external-link" role="img" aria-label="External link" title="External link"/></button></h3>
             <ul class="nav">
                 <iframe t-attf-src="/google_map?width=260&amp;height=240&amp;partner_ids=#{ google_map_partner_ids }&amp;partner_url=/customers/"
                     style="width:260px; height:240px; border:0; padding:0; margin:0;" scrolling="no"></iframe>
@@ -97,7 +97,7 @@
                     <li class="nav-item">
                         <a t-attf-href="/customers/#{ industry_dict['industry_id'][0] and 'industry/%s/' % slug(industry_dict['industry_id']) or '' }#{ current_country_id and 'country/%s' % current_country_id or '' }#{ search_path }"
                            t-attf-class="nav-link#{industry_dict['industry_id'][0] == current_industry_id and ' active' or ''}">
-                            <span class="badge badge-pill float-right" t-esc="industry_dict['industry_id_count'] or '0'"/>
+                            <span class="badge rounded-pill float-end" t-esc="industry_dict['industry_id_count'] or '0'"/>
                             <t t-esc="industry_dict['industry_id'][1]"/>
                         </a>
                     </li>
@@ -116,7 +116,7 @@
                     <li class="nav-item">
                         <a t-attf-href="/customers/#{ current_industry_id and 'industry/%s/' % slug(current_industry) or '' }#{ country_dict['country_id'][0] and 'country/%s' % slug(country_dict['country_id']) or '' }#{ search_path }"
                            t-attf-class="nav-link#{country_dict['country_id'][0] == current_country_id and ' active' or ''}">
-                            <span class="badge badge-pill float-right" t-esc="country_dict['country_id_count'] or '0'"/>
+                            <span class="badge rounded-pill float-end" t-esc="country_dict['country_id_count'] or '0'"/>
                             <t t-esc="country_dict['country_id'][1]"/>
                         </a>
                     </li>
@@ -179,7 +179,7 @@
 <template id="partner_detail" inherit_id="website_partner.partner_detail" name="Partner Details">
     <xpath expr="//address" position="inside">
         <t t-if="partner.industry_id">
-            <span class="badge badge-secondary"><t t-esc="partner.industry_id.name"/></span>
+            <span class="badge text-bg-secondary"><t t-esc="partner.industry_id.name"/></span>
         </t>
     </xpath>
 </template>
@@ -203,7 +203,7 @@
                 t-options='{"widget": "image", "qweb_img_responsive": False, "class": "o_image_128_max"}'
              />
         </div>
-        <address class="text-left">
+        <address class="text-start">
              <div t-field="partner.assigned_partner_id" t-options='{
                  "widget": "contact",
                  "fields": ["address", "website", "phone", "email"]
@@ -220,14 +220,14 @@
             <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"}'/>
+                    <span t-field="reference.avatar_128" class="d-block me-3 text-center o_width_128" t-options='{"widget": "image", "qweb_img_responsive": False, "class": "o_image_128_max"}'/>
                 </a>
                 <div class="flex-grow-1" style="min-height: 64px;">
                     <a t-attf-href="/customers/#{slug(reference)}">
                         <span t-field="reference.self"/>
                     </a>
                     <t t-if="reference.industry_id">
-                        <span class="badge badge-secondary"><t t-esc="reference.industry_id.name"/></span>
+                        <span class="badge text-bg-secondary"><t t-esc="reference.industry_id.name"/></span>
                     </t>
                     <div t-field='reference.website_short_description'/>
                 </div>
diff --git a/addons/website_event/data/event_demo.xml b/addons/website_event/data/event_demo.xml
index 31822c6919d..250ab5174ae 100644
--- a/addons/website_event/data/event_demo.xml
+++ b/addons/website_event/data/event_demo.xml
@@ -10,8 +10,8 @@
                 <p class="lead mb-3">Every year we invite our community, partners and end-users to come and meet us! It's the ideal event to get together and present new features, roadmap of future versions, achievements of the software, workshops, training sessions, etc....</p>
                 <p class="mb-3">This event is also an opportunity to showcase our partners' case studies, methodology or developments. Be there and see directly from the source the features of the version 12!
                 </p>
-                <div class="bg-light rounded-right border-left border-secondary p-3 mb-5" style="border-left-width: 3px !important;">
-                    <p class="mb-0"><i class="fa fa-info-circle mr-2"/>This event and all the conferences are in <b>English</b>!</p>
+                <div class="bg-light rounded-end border-start border-secondary p-3 mb-5" style="border-start-width: 3px !important;">
+                    <p class="mb-0"><i class="fa fa-info-circle me-2"/>This event and all the conferences are in <b>English</b>!</p>
                 </div>
                 <h5 class="mb-2">What's new?</h5>
                 <ul class="mb-5">
@@ -27,11 +27,11 @@
                     <li><b>Business Room</b> - To discuss implementation methodologies, best sales practices, etc.</li>
                     <li><b>Workshop Room</b> - Mainly for developers.</li>
                 </ul>
-                <div class="bg-light rounded-right border-left border-secondary p-3 mb-3" style="border-left-width: 3px !important;">
+                <div class="bg-light rounded-end border-start border-secondary p-3 mb-3" style="border-start-width: 3px !important;">
                     <p class="mb-0"><em>If you wish to make a presentation, please send your topic proposal as soon as possible for approval to Mr. Famke Jenssens at ngh (a) yourcompany (dot) com. The presentations should be, for example, a presentation of a community module, a case study, methodology feedback, technical, etc. Each presentation must be in English.</em></p>
                 </div>
                 <p class="mb-3">For any additional information, please contact us at <a href="mailto:events@yourcompany.com">events@yourcompany.com</a>.</p>
-                <div class="bg-light rounded-right border-left border-secondary p-3 mb-5" style="border-left-width: 3px !important;">
+                <div class="bg-light rounded-end border-start border-secondary p-3 mb-5" style="border-start-width: 3px !important;">
                     <p class="mb-0">OpenElec Applications reserves the right to cancel, re-name or re-locate the event or change the dates on which it is held.</p>
                 </div>
             </div>
@@ -51,7 +51,7 @@
                 <p class="lead mb-3">Around one hundred ballons will simultaneously take flight and turn the sky into a beautiful canvas of colours.</p>
                 <p class="lead mb-3">This is the perfect place for spending a nice day with your family, we guarantee you will be leaving with beautiful everlasting memories !</p>
                 <p class="mb-3">For any additional information, please contact us at <a href="mailto:events@yourcompany.com">events@yourcompany.com</a>.</p>
-                <div class="bg-light rounded-right border-left border-secondary p-3 mb-5" style="border-left-width: 3px !important;">
+                <div class="bg-light rounded-end border-start border-secondary p-3 mb-5" style="border-start-width: 3px !important;">
                     <p class="mb-1">We reserve the right to cancel, re-name or re-locate the event or change the dates on which it is held in case the weather fails us.</p>
                     <p class="mb0">The safety of our attendees and our aeronauts comes first !</p>
                 </div>
@@ -85,8 +85,8 @@
     <p>For any additional information, please contact us at <a href="mailto:events@odoo.com">events@odoo.com</a></p>
 
     <section class="s_we_speaker bg-200 p-3 mb-4" itemscope="itemscope" itemtype="http://schema.org/Person" itemprop="performer">
-        <span class="badge badge-secondary o_wevent_badge float-right">SPEAKER</span>
-        <img src="/mail/static/src/img/odoobot.png" width="70" class="img-fluid rounded-circle float-left mr-3" alt=""/>
+        <span class="badge text-bg-secondary o_wevent_badge float-end">SPEAKER</span>
+        <img src="/mail/static/src/img/odoobot.png" width="70" class="img-fluid rounded-circle float-start me-3" alt=""/>
         <div class="overflow-hidden">
             <h4 class="mt-3 mb-1" itemprop="name">John DOE</h4>
             <h6 class="mb-4">Company</h6>
@@ -112,7 +112,7 @@
                 <p class="lead mb-3">Bands like Bar Fighters, Led Slippers and Link Floyd will offer you the show of the century during our three day event.</p>
                 <p class="lead mb-3">This is the perfect place for spending a nice time with your friends while listening to some of the most iconic rock songs of all times!</p>
                 <p class="mb-3">For any additional information, please contact us at <a href="mailto:events@yourcompany.com">events@yourcompany.com</a>.</p>
-                <div class="bg-light rounded-right border-left border-secondary p-3 mb-5" style="border-left-width: 3px !important;">
+                <div class="bg-light rounded-end border-start border-secondary p-3 mb-5" style="border-start-width: 3px !important;">
                     <p class="mb-1">We reserve the right to cancel, re-name or re-locate the event or change the dates on which it is held in case the weather fails us.</p>
                 </div>
             </div>
@@ -137,7 +137,7 @@
                 to chat with experienced players and trainers once the tournament is over !
                 </p>
                 <p class="mb-3">For any additional information, please contact us at <a href="mailto:events@yourcompany.com">events@yourcompany.com</a>.</p>
-                <div class="bg-light rounded-right border-left border-secondary p-3 mb-5" style="border-left-width: 3px !important;">
+                <div class="bg-light rounded-end border-start border-secondary p-3 mb-5" style="border-start-width: 3px !important;">
                     <p class="mb-1">We reserve the right to cancel, re-name or re-locate the event or change the dates on which it is held in case the weather fails us.</p>
                 </div>
             </div>
@@ -163,7 +163,7 @@
         Special discount codes will be handed out during the various streams, make sure to be there on time.
     </p>
     <p class="mb-3">For any additional information, please contact us at <a href="mailto:events@openwood.example.com">events@penwood.example.com</a>.</p>
-    <div class="bg-light rounded-right border-left border-secondary p-3 mb-5" style="border-left-width: 3px !important;">
+    <div class="bg-light rounded-end border-start border-secondary p-3 mb-5" style="border-start-width: 3px !important;">
         <p class="mb-1">This event is fully online and FREE, if you have paid for tickets, you should get a refund.<br/>
         It will require a good Internet connection to get the best video quality.</p>
     </div>
diff --git a/addons/website_event/static/src/js/website_event.js b/addons/website_event/static/src/js/website_event.js
index 0b64c139dfb..98a49a88951 100644
--- a/addons/website_event/static/src/js/website_event.js
+++ b/addons/website_event/static/src/js/website_event.js
@@ -57,7 +57,7 @@ var EventRegistrationForm = Widget.extend({
                 $modal.appendTo(document.body);
                 const modalBS = new Modal($modal[0], {backdrop: 'static', keyboard: false});
                 modalBS.show();
-                $modal.appendTo('body').modal();
+                $modal.appendTo('body').modal('show');
                 $modal.on('click', '.js_goto_event', function () {
                     $modal.modal('hide');
                     $button.prop('disabled', false);
diff --git a/addons/website_event/static/src/js/website_event_ticket_details.js b/addons/website_event/static/src/js/website_event_ticket_details.js
index e84424acff1..c6b7011266b 100644
--- a/addons/website_event/static/src/js/website_event_ticket_details.js
+++ b/addons/website_event/static/src/js/website_event_ticket_details.js
@@ -5,7 +5,7 @@ odoo.define('website_event.ticket_details', function (require) {
         selector: '.o_wevent_js_ticket_details',
         events: {
             'click .o_wevent_registration_btn': '_onTicketDetailsClick',
-            'change .custom-select': '_onTicketQuantityChange'
+            'change .form-select': '_onTicketQuantityChange'
         },
         start: function (){
             this.foldedByDefault = this.$el.data('foldedByDefault') === 1;
@@ -21,7 +21,7 @@ odoo.define('website_event.ticket_details', function (require) {
          */
         _getTotalTicketCount: function (){
             var ticketCount = 0;
-            this.$('.custom-select').each(function (){
+            this.$('.form-select').each(function (){
                 ticketCount += parseInt($(this).val());
             });
             return ticketCount;
diff --git a/addons/website_event/static/src/scss/event_templates_common.scss b/addons/website_event/static/src/scss/event_templates_common.scss
index ffc7dec40cf..e91090c3e13 100644
--- a/addons/website_event/static/src/scss/event_templates_common.scss
+++ b/addons/website_event/static/src/scss/event_templates_common.scss
@@ -53,12 +53,12 @@
 
     .o_wevent_index_topbar_filters {
         .dropdown-toggle {
-            border: $border-width solid gray('400');
-            @include o-bg-color(gray('white'), $with-extras: false);
+            border: $border-width solid map-get($grays, '400');
+            @include o-bg-color(map-get($grays, 'white'), $with-extras: false);
             @include border-radius($dropdown-border-radius);
             &:hover, &:focus {
-                border-color: theme-color('primary');
-                color: theme-color('primary');
+                border-color: map-get($theme-colors, 'primary');
+                color: map-get($theme-colors, 'primary');
                 text-decoration: none;
             }
             &:after {
@@ -66,7 +66,7 @@
             }
             .fa {
                 margin-right: .4em;
-                color: theme-color('primary');
+                color: map-get($theme-colors, 'primary');
             }
         }
         .dropdown-menu {
diff --git a/addons/website_event/static/src/scss/event_templates_list.scss b/addons/website_event/static/src/scss/event_templates_list.scss
index 8349c794492..fbfdcbe5539 100644
--- a/addons/website_event/static/src/scss/event_templates_list.scss
+++ b/addons/website_event/static/src/scss/event_templates_list.scss
@@ -3,15 +3,16 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    @include size($o_link_size);
+    width: $o_link_size;
+    height: $o_link_size;
     margin: 0 ($spacer * .25) ($spacer * .5) ($spacer * .25);
     line-height: $o_link_size;
-    background-color: gray('100');
+    background-color: map-get($grays, '100');
     border: $border-width solid $border-color;
     border-radius: 50%;
     text-align: center;
     &:hover, &:focus {
-        background-color: gray('300');
+        background-color: map-get($grays, '300');
     }
 }
 
@@ -28,7 +29,7 @@
             }
         }
         &.opt_event_list_cards_bg {
-            @if (color('body') == $o-portal-default-body-bg) {
+            @if (map-get($colors, 'body') == $o-portal-default-body-bg) {
                 @extend .bg-200;
             }
         }
@@ -46,7 +47,7 @@
         }
         .o_wevent_badge_event {
             @include o-position-absolute($top: 0, $left: 0);
-            @include border-left-radius(0);
+            @include border-start-radius(0);
             padding: ($spacer * .5) $card-spacer-x;
             transform: translateY(-50%);
         }
@@ -56,7 +57,8 @@
             display: flex;
             flex-direction: column;
             justify-content: center;
-            @include size(4rem);
+            width: 4rem;
+            height: 4rem;
             border-radius: 50%;
             text-align: center;
 
diff --git a/addons/website_event/static/src/scss/event_templates_page.scss b/addons/website_event/static/src/scss/event_templates_page.scss
index cb1f3d20d4a..3aeb0d5c5b0 100644
--- a/addons/website_event/static/src/scss/event_templates_page.scss
+++ b/addons/website_event/static/src/scss/event_templates_page.scss
@@ -20,9 +20,9 @@
         margin: 3rem 0;
 
         .o_wevent_event_name {
-            font-weight: $display4-weight;
+            font-weight: $display-font-weight;
             line-height: $display-line-height;
-            @include font-size($display4-size);
+            @include font-size(map-get($display-font-sizes, 4));
         }
         .o_wevent_event_subtitle {
             font-weight: $lead-font-weight;
diff --git a/addons/website_event/static/src/snippets/s_events/000.scss b/addons/website_event/static/src/snippets/s_events/000.scss
index ae329c2a83b..18af91f115b 100644
--- a/addons/website_event/static/src/snippets/s_events/000.scss
+++ b/addons/website_event/static/src/snippets/s_events/000.scss
@@ -63,8 +63,8 @@
                     display: flex;
                     flex-direction: column;
                     justify-content: center;
-                    width: $display4-size;
-                    height: $display4-size;
+                    width: map-get($display-font-sizes, 4);
+                    height: map-get($display-font-sizes, 4);
                     border-radius: 50%;
                     text-align: center;
 
diff --git a/addons/website_event/views/event_snippets.xml b/addons/website_event/views/event_snippets.xml
index 3caea5d7f03..899e81b0de1 100644
--- a/addons/website_event/views/event_snippets.xml
+++ b/addons/website_event/views/event_snippets.xml
@@ -31,8 +31,8 @@
 <!-- Snippet - Speaker Bio -->
 <template id="s_speaker_bio" name="Speaker Bio">
     <div class="s_speaker_bio" itemscope="itemscope" itemtype="http://schema.org/Person" itemprop="performer">
-        <span class="badge badge-secondary text-uppercase o_wevent_badge">Speaker</span>
-        <img src="/website_event/static/src/img/speaker.png" width="70" class="img-fluid rounded-circle float-left mr-3" alt=""/>
+        <span class="badge text-bg-secondary text-uppercase o_wevent_badge">Speaker</span>
+        <img src="/website_event/static/src/img/speaker.png" width="70" class="img-fluid rounded-circle float-start me-3" alt=""/>
         <div class="overflow-hidden">
             <h4 class="mt-3 mb-1" itemprop="name">John DOE</h4>
             <h6 class="mb-4">Company</h6>
diff --git a/addons/website_event/views/event_templates_list.xml b/addons/website_event/views/event_templates_list.xml
index 4dbf3531bde..9b8c065c29e 100644
--- a/addons/website_event/views/event_templates_list.xml
+++ b/addons/website_event/views/event_templates_list.xml
@@ -48,11 +48,11 @@
     <nav class="navbar navbar-light border-top shadow-sm d-print-none">
         <div class="container">
             <div class="d-flex flex-column flex-sm-row justify-content-between w-100">
-                <span class="navbar-brand h4 my-0 mr-auto">Events</span>
+                <span class="navbar-brand h4 my-0 me-auto">Events</span>
                 <ul class="o_wevent_index_topbar_filters nav">
                     <t t-foreach="categories" t-as="category">
-                        <li t-if="category.is_published and category.tag_ids and any(tag.color for tag in category.tag_ids)" class="nav-item dropdown mr-2 my-1">
-                            <a href="#" role="button" class="btn dropdown-toggle" data-toggle="dropdown">
+                        <li t-if="category.is_published and category.tag_ids and any(tag.color for tag in category.tag_ids)" class="nav-item dropdown me-2 my-1">
+                            <a href="#" role="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
                                 <i class="fa fa-folder-open"/>
                                 <t t-out="category.name"/>
                             </a>
@@ -68,7 +68,7 @@
                         </li>
                     </t>
                 </ul>
-                <div class="d-flex align-items-center flex-wrap pl-sm-3 pr-0">
+                <div class="d-flex align-items-center flex-wrap ps-sm-3 pe-0">
                     <t t-call="website_event.events_search_box_input"/>
                 </div>
             </div>
@@ -79,8 +79,8 @@
 <template id="searched_tags" name="Searched tags">
     <div class="d-flex align-items-center mt16">
         <t t-foreach="search_tags" t-as="tag">
-            <span class="align-items-baseline border d-inline-flex pl-2 rounded ml16 mb-2 bg-white">
-                <i class="fa fa-tag mr-2 text-muted"/>
+            <span class="align-items-baseline border d-inline-flex ps-2 rounded ml16 mb-2 bg-white">
+                <i class="fa fa-tag me-2 text-muted"/>
                 <t t-out="tag.display_name"/>
                 <a t-att-href="'/event?%s' % keep_query('*', tags=str((search_tags - tag).ids))" class="btn border-0 py-1">&#215;</a>
             </span>
@@ -91,8 +91,8 @@
 <!-- Filter - Date -->
 <template id="event_time" inherit_id="website_event.index_topbar" name="Filter by Date">
     <xpath expr="//ul[hasclass('o_wevent_index_topbar_filters')]" position="inside">
-        <li class="nav-item dropdown mr-2 my-1">
-            <a href="#" role="button" class="btn dropdown-toggle" data-toggle="dropdown">
+        <li class="nav-item dropdown me-2 my-1">
+            <a href="#" role="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
                 <i class="fa fa-calendar"/>
                 <t t-if="current_date" t-out="current_date"/>
                 <t t-else="">Upcoming Events</t>
@@ -102,7 +102,7 @@
                     <t t-if="date[3] or (date[0] in ('old','upcoming','all'))">
                         <a t-att-href="keep('/event', date=date[0])" t-attf-class="dropdown-item d-flex align-items-center justify-content-between #{searches.get('date') == date[0] and 'active'}">
                             <t t-out="date[1]"/>
-                            <span t-if="date[3]" t-out="date[3]" t-attf-class="badge badge-pill #{searches.get('date') == date[0] and 'bg-light text-primary' or 'bg-primary'} ml-3"/>
+                            <span t-if="date[3]" t-out="date[3]" t-attf-class="badge rounded-pill #{searches.get('date') == date[0] and 'bg-light text-primary' or 'bg-primary'} ms-3"/>
                         </a>
                     </t>
                 </t>
@@ -114,8 +114,8 @@
 <!-- Filter - Location -->
 <template id="event_location" inherit_id="website_event.index_topbar" active="False" name="Filter by Country">
     <xpath expr="//ul[hasclass('o_wevent_index_topbar_filters')]" position="inside">
-        <li class="nav-item dropdown mr-2 my-1">
-            <a href="#" role="button" class="btn dropdown-toggle" data-toggle="dropdown">
+        <li class="nav-item dropdown me-2 my-1">
+            <a href="#" role="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
                 <i class="fa fa-map-marker"/>
                 <t t-if="current_country" t-out="current_country.name"/>
                 <t t-else="">All countries</t>
@@ -125,13 +125,13 @@
                     <t t-if="country['country_id']">
                         <a t-att-href="keep('/event', country=country['country_id'][0])" t-attf-class="dropdown-item d-flex align-items-center justify-content-between #{searches.get('country') == str(country['country_id'] and country['country_id'][0]) and 'active'}">
                             <t t-out="country['country_id'][1]"/>
-                            <span t-out="country['country_id_count']" class="badge badge-pill badge-primary ml-auto"/>
+                            <span t-out="country['country_id_count']" class="badge rounded-pill text-bg-primary ms-auto"/>
                         </a>
                     </t>
                     <t t-else="">
                         <a t-att-href="keep('/event', country='online')" t-attf-class="dropdown-item d-flex align-items-center justify-content-between #{searches.get('country') == 'online' and 'active'}">
                             <span>Online Events</span>
-                            <span t-out="country['country_id_count']" class="badge badge-pill badge-primary ml-3"/>
+                            <span t-out="country['country_id_count']" class="badge rounded-pill text-bg-primary ms-3"/>
                         </a>
                     </t>
                 </t>
@@ -163,7 +163,7 @@
     <div t-foreach="event_ids" t-as="event" t-attf-class=" #{opt_event_size} mb-4">
         <a t-cache="event if not editable and event.website_published else None" t-attf-href="/event/#{ slug(event) }/#{(not event.menu_id) and 'register'}" class="text-decoration-none" t-att-data-publish="event.website_published and 'on' or 'off'">
             <article t-attf-class="h-100 #{opt_events_list_cards and 'card border-0 shadow-sm'}" itemscope="itemscope" itemtype="http://schema.org/Event">
-                <div class="h-100 row no-gutters">
+                <div class="h-100 row g-0">
                     <!-- Header -->
                     <header t-attf-class="overflow-hidden bg-secondary #{opt_events_list_columns and 'col-12' or 'col-sm-4 col-lg-3'} #{(not opt_events_list_cards) and 'shadow'}">
                         <!-- Image + Link -->
@@ -178,11 +178,11 @@
                                 </div>
                                 <!-- Participating -->
                                 <small t-if="event.is_participating" class="o_wevent_participating text-bg-success">
-                                    <i class="fa fa-check mr-2"/>Registered
+                                    <i class="fa fa-check me-2"/>Registered
                                 </small>
                                 <!-- Unpublished -->
                                 <small t-if="not event.website_published" class="o_wevent_unpublished text-bg-danger">
-                                    <i class="fa fa-ban mr-2"/>Unpublished
+                                    <i class="fa fa-ban me-2"/>Unpublished
                                 </small>
                             </t>
                         </div>
@@ -250,13 +250,13 @@
 
 <template id="opt_events_list_categories" inherit_id="website_event.events_list" active="False" name="Show Templates">
     <xpath expr="//main/*" position="before">
-        <span t-if="event.event_type_id" t-attf-href="/event?type=#{event.event_type_id.id}" t-attf-class="badge bg-secondary o_wevent_badge #{opt_events_list_columns and 'o_wevent_badge_event' or 'float-right'}" t-field="event.event_type_id"/>
+        <span t-if="event.event_type_id" t-attf-href="/event?type=#{event.event_type_id.id}" t-attf-class="badge bg-secondary o_wevent_badge #{opt_events_list_columns and 'o_wevent_badge_event' or 'float-end'}" t-field="event.event_type_id"/>
     </xpath>
 </template>
 
 <!-- Index - Sidebar -->
 <template id="index_sidebar" name="Sidebar">
-    <div id="o_wevent_index_sidebar" class="col-lg-4 ml-lg-3 ml-xl-5 my-5"/>
+    <div id="o_wevent_index_sidebar" class="col-lg-4 ms-lg-3 ms-xl-5 my-5"/>
 </template>
 
 <!-- Index - Sidebar - About us -->
diff --git a/addons/website_event/views/event_templates_page.xml b/addons/website_event/views/event_templates_page.xml
index 6b779205afa..c2022c0e80d 100644
--- a/addons/website_event/views/event_templates_page.xml
+++ b/addons/website_event/views/event_templates_page.xml
@@ -10,25 +10,25 @@
             <t t-if="not event.menu_id">
                 <nav class="navbar navbar-light border-top shadow-sm d-print-none">
                     <div class="container align-items-baseline justify-content-start">
-                        <a href="/event" class="navbar-brand h4 my-0 mr-0 mr-md-4">
-                            <i class="fa fa-long-arrow-left text-primary mr-2"/>
+                        <a href="/event" class="navbar-brand h4 my-0 me-0 me-md-4">
+                            <i class="fa fa-long-arrow-left text-primary me-2"/>
                             <span>All Events</span>
                         </a>
-                        <ul class="navbar-nav flex-row ml-md-auto ml-0">
-                            <li t-if="opt_events_list_categories" class="nav-item mr-3">
+                        <ul class="navbar-nav flex-row ms-md-auto ms-0">
+                            <li t-if="opt_events_list_categories" class="nav-item me-3">
                                 <a t-attf-href="/event?type=#{event.event_type_id.id}" t-if="event.event_type_id" class="nav-link">
-                                    <i class="fa fa-folder-open text-primary mr-2"/><span t-field="event.event_type_id"/>
+                                    <i class="fa fa-folder-open text-primary me-2"/><span t-field="event.event_type_id"/>
                                 </a>
                             </li>
-                            <li t-if="event.country_id" class="nav-item mr-3">
+                            <li t-if="event.country_id" class="nav-item me-3">
                                 <a t-attf-href="/event?country=#{event.country_id.id}" class="nav-link">
-                                    <i class="fa fa-map-marker text-primary mr-2"/><span t-field="event.country_id"/>
+                                    <i class="fa fa-map-marker text-primary me-2"/><span t-field="event.country_id"/>
                                 </a>
                             </li>
                         </ul>
-                        <div class="d-flex align-items-centerflex-wrap pl-sm-3 pr-0">
+                        <div class="d-flex align-items-centerflex-wrap ps-sm-3 pe-0">
                             <t t-call="website_event.events_search_box_input">
-                                <t t-set="_classes" t-valuef="ml-auto"/>
+                                <t t-set="_classes" t-valuef="ms-auto"/>
                             </t>
                         </div>
                     </div>
@@ -37,8 +37,8 @@
             <t t-else="">
                 <nav class="navbar navbar-light border-top shadow-sm navbar-expand-md">
                     <div class="container align-items-baseline">
-                        <a t-att-href="event.website_url" t-field="event.name" class="navbar-brand h4 my-0 mr-0"/>
-                        <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#o_wevent_event_submenu" aria-controls="o_wevent_event_submenu" aria-expanded="false" aria-label="Toggle navigation">
+                        <a t-att-href="event.website_url" t-field="event.name" class="navbar-brand h4 my-0 me-0"/>
+                        <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#o_wevent_event_submenu" aria-controls="o_wevent_event_submenu" aria-expanded="false" aria-label="Toggle navigation">
                             <span class="navbar-toggler-icon"></span>
                         </button>
                         <div id="o_wevent_event_submenu" class="collapse navbar-collapse">
@@ -53,7 +53,7 @@
                             <!-- Add Register additional CTA button, in addition to menus -->
                             <a t-if="event.menu_register_cta and not event.is_participating"
                                 t-att-href="'/event/%s/register' % (slug(event))"
-                                class="btn btn-primary ml-auto">
+                                class="btn btn-primary ms-auto">
                                 Register
                             </a>
                         </div>
diff --git a/addons/website_event/views/event_templates_page_registration.xml b/addons/website_event/views/event_templates_page_registration.xml
index 888732af729..6126ff7d07b 100644
--- a/addons/website_event/views/event_templates_page_registration.xml
+++ b/addons/website_event/views/event_templates_page_registration.xml
@@ -13,7 +13,7 @@
 
                 <div class="container d-flex flex-column flex-grow-1 justify-content-around">
                     <div class="o_wevent_event_title">
-                        <span t-if="event.is_participating" class="badge badge-success o_wevent_badge"><i class="fa fa-check mr-2"/>Registered</span>
+                        <span t-if="event.is_participating" class="badge text-bg-success o_wevent_badge"><i class="fa fa-check me-2"/>Registered</span>
                         <h1 t-field="event.name" class="o_wevent_event_name" itemprop="name" placeholder="Event Title"/>
                         <h2 t-field="event.subtitle" class="o_wevent_event_subtitle" placeholder="Event Subtitle"/>
                     </div>
@@ -32,7 +32,7 @@
     <t t-call="website_event.event_details">
         <section class="bg-200 mt-n5" t-cache="event if not editable and event.website_published else None">
             <div class="container overflow-hidden">
-                <div class="row no-gutters mt-n4 mb-3">
+                <div class="row g-0 mt-n4 mb-3">
                     <!-- Description -->
                     <div id="o_wevent_event_main_col" class="col-lg-8 bg-white px-3 pt-5 pb-0 shadow-sm">
                         <span t-field="event.description" itemprop="description"/>
@@ -42,7 +42,7 @@
                         <div class="o_wevent_sidebar_block">
                             <h6 class="o_wevent_sidebar_title">Date &amp; Time</h6>
                             <div class="d-flex">
-                                <h5 t-field="event.date_begin" class="my-1 mr-1 oe_hide_on_date_edit" t-options="{'tz_name': event.date_tz, 'date_only': 'true', 'format': 'EEEE'}"/>
+                                <h5 t-field="event.date_begin" class="my-1 me-1 oe_hide_on_date_edit" t-options="{'tz_name': event.date_tz, 'date_only': 'true', 'format': 'EEEE'}"/>
                                 <h5 class="my-1 oe_hide_on_date_edit" t-field="event.date_begin" t-options="{'tz_name': event.date_tz, 'date_only': 'true', 'format': 'long'}" itemprop="startDate" t-att-datetime="event.date_begin"/>
                             </div>
                             <t t-if="not event.is_one_day">Start -</t>
@@ -56,7 +56,7 @@
                                 (<span t-out="event.date_tz"/>)
                                 <i class="fa fa-long-arrow-down d-block text-muted mx-3 my-2" style="font-size: 1.5rem"/>
                                 <div class="d-flex">
-                                    <h5 t-field="event.date_end" class="my-1 mr-1 oe_hide_on_date_edit" t-options="{'tz_name': event.date_tz, 'date_only': 'true', 'format': 'EEEE'}"/>
+                                    <h5 t-field="event.date_end" class="my-1 me-1 oe_hide_on_date_edit" t-options="{'tz_name': event.date_tz, 'date_only': 'true', 'format': 'EEEE'}"/>
                                     <h5 class="my-1 oe_hide_on_date_edit" t-field="event.date_end" t-options="{'tz_name': event.date_tz, 'date_only': 'true', 'format': 'long'}"/>
                                 </div>
                                 <t t-if="not event.is_one_day">End -</t>
@@ -65,8 +65,8 @@
                             </t>
 
                             <div class="dropdown">
-                                <i class="fa fa-calendar mr-1"/>
-                                <a href="#" role="button" data-toggle="dropdown">Add to Calendar</a>
+                                <i class="fa fa-calendar me-1"/>
+                                <a href="#" role="button" data-bs-toggle="dropdown">Add to Calendar</a>
                                 <div class="dropdown-menu">
                                     <a t-att-href="iCal_url" class="dropdown-item">iCal/Outlook</a>
                                     <a t-att-href="google_url" class="dropdown-item" target="_blank">Google</a>
@@ -122,7 +122,7 @@
         <div class="alert alert-info mb-0 row g-0 justify-content-between align-items-center" role="status">
             <t t-if="not event.event_registrations_started and not event.event_registrations_sold_out">
                 <div class="col col-md-8 d-flex">
-                    <em class="mr-2">Ticket Sales starting on
+                    <em class="me-2">Ticket Sales starting on
                         <span class="" t-out="event.start_sale_datetime"
                             t-options="{'widget': 'datetime', 'tz_name': event.date_tz, 'format': 'short'}"/>
                         <span t-out="event.date_tz"/>
@@ -154,13 +154,13 @@
             <t t-set="tickets" t-value="event.event_ticket_ids.filtered(lambda ticket: not ticket.is_expired)"/>
             <!-- If some tickets expired and there is only one type left, we keep the same layout -->
             <t t-if="len(event.event_ticket_ids) &gt; 1 or tickets.description">
-                <div class="d-flex align-items-center py-2 pl-3 pr-2 border-bottom">
-                    <span class="py-2 o_wevent_registration_title text-left">Tickets</span>
+                <div class="d-flex align-items-center py-2 ps-3 pe-2 border-bottom">
+                    <span class="py-2 o_wevent_registration_title text-start">Tickets</span>
                     <div class="o_wevent_price_range d-none"/>
                     <t t-call="website_event.registration_configure_tickets_button"
                         t-if="request.env.user.has_group('event.group_event_manager')"/>
                     <span t-if="not event.event_registrations_open" class="text-danger">
-                        <i class="fa fa-ban mr-2"/>Sold Out
+                        <i class="fa fa-ban me-2"/>Sold Out
                     </span>
                     <a href="#" role="button" class="o_wevent_registration_btn d-none" data-target="#o_wevent_tickets_collapse">
                         <span>Tickets</span>
@@ -178,13 +178,13 @@
                                 <br/>
                             </t>
                             <small t-if="ticket.end_sale_datetime and ticket.sale_available and not ticket.is_expired"
-                                   class="text-muted mr-3" itemprop="availabilityEnds">Sales end on
+                                   class="text-muted me-3" itemprop="availabilityEnds">Sales end on
                                 <span itemprop="priceValidUntil" t-out="ticket.end_sale_datetime"
                                 t-options="{'widget': 'datetime', 'tz_name': event.date_tz, 'format': 'short'}"/>
                                 (<span t-out="ticket.event_id.date_tz"/>)
                             </small>
                             <small t-if="ticket.start_sale_datetime and not ticket.sale_available and not ticket.is_expired"
-                                   class="text-muted mr-3" itemprop="availabilityEnds">
+                                   class="text-muted me-3" itemprop="availabilityEnds">
                                 Sales start on <span itemprop="priceValidUntil" t-out="ticket.start_sale_datetime"
                                 t-options="{'widget': 'datetime', 'tz_name': event.date_tz, 'format': 'short'}"/>
                                 (<span t-out="ticket.event_id.date_tz"/>)
@@ -192,10 +192,10 @@
                         </div>
                         <div class="col-md-4 col-xs-12 p-0 d-flex align-items-center justify-content-between">
                             <div class="o_wevent_registration_multi_select"/>
-                            <div class="w-auto ml-auto">
+                            <div class="w-auto ms-auto">
                                 <select t-if="not ticket.is_expired and ticket.sale_available"
                                     t-attf-name="nb_register-#{ticket.id}"
-                                    class="custom-select">
+                                    class="form-select">
                                     <t t-set="seats_max_ticket" t-value="(not ticket.seats_limited or ticket.seats_available &gt; 9) and 10 or ticket.seats_available + 1"/>
                                     <t t-set="seats_max_event" t-value="(not event.seats_limited or event.seats_available &gt; 9) and 10 or event.seats_available + 1"/>
                                     <t t-set="seats_max" t-value="min(seats_max_ticket, seats_max_event)"/>
@@ -210,8 +210,8 @@
                             </div>
                         </div>
                     </div>
-                    <div class="row no-gutters">
-                        <div class="d-grid col-md-4 offset-md-8 py-2 pl-md-0 pr-md-2">
+                    <div class="row g-0">
+                        <div class="d-grid col-md-4 offset-md-8 py-2 ps-md-0 pe-md-2">
                             <button type="submit" class="btn btn-primary o_wait_lazy_js a-submit" disabled="" t-attf-id="#{event.id}">
                                 Register
                                 <t t-if="event.seats_limited and event.seats_max and event.seats_available &lt;= (event.seats_max * 0.2)">
@@ -223,14 +223,14 @@
                 </div>
             </t>
             <div t-else="" class="o_wevent_registration_single">
-                <div class="row p-2 pl-3">
+                <div class="row p-2 ps-3">
                     <div class="col-lg-8 d-flex flex-columns align-items-center" itemscope="itemscope" itemtype="http://schema.org/Offer">
-                        <h6 itemprop="name" class="my-0 pr-3 border-right text-dark o_wevent_single_ticket_name">
+                        <h6 itemprop="name" class="my-0 pe-3 border-end text-dark o_wevent_single_ticket_name">
                             <span t-if="tickets" t-field="tickets.name"/>
                             <span t-else="">Registration</span>
                         </h6>
                         <small t-if="tickets.end_sale_datetime and tickets.sale_available and not tickets.is_expired"
-                            class="text-muted ml-1 mr-3" itemprop="availabilityEnds">
+                            class="text-muted ms-1 me-3" itemprop="availabilityEnds">
                             Sales end on
                             <span itemprop="priceValidUntil" t-out="tickets.end_sale_datetime"
                                 t-options="{'widget': 'datetime', 'tz_name': event.date_tz, 'format': 'short'}"/>
@@ -238,11 +238,11 @@
                         </small>
                         <t t-call="website_event.registration_configure_tickets_button"
                         t-if="request.env.user.has_group('event.group_event_manager')"/>
-                        <div class="ml-auto o_wevent_nowrap">
+                        <div class="ms-auto o_wevent_nowrap">
                             <t t-if="event.event_registrations_open">
-                                <span class="text-dark font-weight-bold align-middle px-2">Qty</span>
+                                <span class="text-dark fw-bold align-middle px-2">Qty</span>
                                 <link itemprop="availability" content="http://schema.org/InStock"/>
-                                <select t-att-name="'nb_register-%s' % (tickets.id if tickets else 0)" class="d-inline w-auto custom-select">
+                                <select t-att-name="'nb_register-%s' % (tickets.id if tickets else 0)" class="d-inline w-auto form-select">
                                     <t t-set="seats_max_ticket" t-value="(not tickets or not tickets.seats_limited or tickets.seats_available &gt; 9) and 10 or tickets.seats_available + 1"/>
                                     <t t-set="seats_max_event" t-value="(not event.seats_limited or event.seats_available &gt; 9) and 10 or event.seats_available + 1"/>
                                     <t t-set="seats_max" t-value="min(seats_max_ticket, seats_max_event) if tickets else seats_max_event"/>
@@ -253,12 +253,12 @@
                             </t>
                             <t t-else="">
                                 <span itemprop="availability" content="http://schema.org/SoldOut" class="text-danger">
-                                    <i class="fa fa-ban mr-2"/>Sold Out
+                                    <i class="fa fa-ban me-2"/>Sold Out
                                 </span>
                             </t>
                         </div>
                     </div>
-                    <div class="d-grid col-lg-4 pt-3 pt-lg-0 pl-2 pl-lg-0">
+                    <div class="d-grid col-lg-4 pt-3 pt-lg-0 ps-2 ps-lg-0">
                         <button type="submit" class="btn btn-primary o_wait_lazy_js a-submit" t-attf-id="#{event.id}">
                             Register
                             <t t-if="event.seats_limited and event.seats_max and event.seats_available &lt;= (event.seats_max * 0.2)">
@@ -280,7 +280,7 @@
                 <div class="modal-content">
                     <div class="modal-header align-items-center">
                         <h4 class="modal-title">Attendees</h4>
-                        <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                     </div>
                     <t t-set="counter_type" t-value="1"/>
                     <t t-set="counter" t-value="0"/>
@@ -317,7 +317,7 @@
                         </div>
                     </t>
                     <div class="modal-footer border-0 justify-content-between">
-                        <button type="button" class="btn btn-secondary js_goto_event" data-dismiss="modal">Cancel</button>
+                        <button type="button" class="btn btn-secondary js_goto_event" data-bs-dismiss="modal">Cancel</button>
                         <button type="submit" class="btn btn-primary" t-if="availability_check">Continue</button>
                     </div>
                 </div>
@@ -338,21 +338,21 @@
             <div class="row mb-3 o_wereg_confirmed_attendees">
                 <div class="col-md-4 col-xs-12 mt-3" t-foreach="attendees" t-as="attendee">
                     <div class="d-flex flex-column">
-                        <span class="font-weight-bold text-truncate">
+                        <span class="fw-bold text-truncate">
                             <t t-if="attendee.name" t-out="attendee.name"/>
                             <t t-else="">N/A</t>
                         </span>
                         <span class="text-truncate">
-                            <i class="fa fa-envelope mr-2   "></i>
+                            <i class="fa fa-envelope me-2   "></i>
                             <t t-if="attendee.email" t-out="attendee.email"/>
                             <t t-else="">N/A</t>
                         </span>
                         <span t-if="attendee.phone">
-                            <i class="fa fa-phone mr-2"></i>
+                            <i class="fa fa-phone me-2"></i>
                             <t t-out="attendee.phone"/>
                         </span>
                         <span>
-                            <i class="fa fa-ticket mr-2"></i>
+                            <i class="fa fa-ticket me-2"></i>
                             <t t-if="attendee.event_ticket_id">
                                 <t t-out="attendee.event_ticket_id.name"/> (Ref: <t t-out="attendee.id"/>)
                             </t>
@@ -367,7 +367,7 @@
                         <div class="col-2 col-md-1">
                             <b>Start</b>
                         </div>
-                        <div class="col pl-0">
+                        <div class="col ps-0">
                             <span itemprop="startDate" t-out="event.date_begin_located"/>
                             (<span t-out="event.date_tz"/>)
                         </div>
@@ -376,13 +376,13 @@
                         <div class="col-2 col-md-1">
                             <b>End</b>
                         </div>
-                        <div class="col pl-0">
+                        <div class="col ps-0">
                             <span itemprop="endDate" t-out="event.date_end_located"/>
                             (<span t-out="event.date_tz"/>)
                         </div>
                     </div>
                     <div class="mt-4">
-                        <h5 t-field="event.address_id" class="text-secondary font-weight-bold" t-options='{
+                        <h5 t-field="event.address_id" class="text-secondary fw-bold" t-options='{
                             "widget": "contact",
                             "fields": ["name"]
                             }'/>
@@ -399,7 +399,7 @@
                         <a role="button" class="btn btn-primary" t-att-href="iCal_url">
                             <i class="fa fa-fw fa-calendar"/> Add to iCal/Outlook
                         </a>
-                        <a role="button" class="btn btn-primary ml-md-2 mt-2 mt-md-0" t-att-href="google_url" target='_blank'>
+                        <a role="button" class="btn btn-primary ms-md-2 mt-2 mt-md-0" t-att-href="google_url" target='_blank'>
                             <i class="fa fa-fw fa-calendar"/> Add to Google Calendar
                         </a>
                     </div>
@@ -414,7 +414,7 @@
 <template id="registration_configure_tickets_button" name="Registration Configure Ticket Button">
     <div class="o_not_editable mx-2" role="link">
         <a class="text-nowrap" t-attf-href="/web#id=#{event.id}&amp;menu_id=#{backend_menu_id}&amp;view_type=form&amp;model=event.event">
-            <i class="fa fa-gear mr-1" role="img" aria-label="Configure" title="Configure event tickets"/><em>Configure Tickets</em>
+            <i class="fa fa-gear me-1" role="img" aria-label="Configure" title="Configure event tickets"/><em>Configure Tickets</em>
         </a>
     </div>
 </template>
@@ -435,7 +435,7 @@
     </xpath>
     <xpath expr="//a[hasclass('o_wevent_registration_btn')]" position="attributes">
         <attribute
-            name="class">btn btn-primary o_wevent_registration_btn collapsed ml-auto</attribute>
+            name="class">btn btn-primary o_wevent_registration_btn collapsed ms-auto</attribute>
         <attribute name="data-toggle">collapse</attribute>
     </xpath>
 </template>
diff --git a/addons/website_event/views/event_templates_widgets.xml b/addons/website_event/views/event_templates_widgets.xml
index 953d512bc1a..2738ca09d9a 100644
--- a/addons/website_event/views/event_templates_widgets.xml
+++ b/addons/website_event/views/event_templates_widgets.xml
@@ -50,9 +50,9 @@
          t-att-data-pre-countdown-text="pre_countdown_text">
         <t t-set="remaining_time" t-value="pre_remaining_time if pre_remaining_time else main_remaining_time"/>
         <span class="o_display_timer_countdown d-flex justify-content-center">
-            <span class="o_countdown_text pr-1" t-out="pre_countdown_text if pre_countdown_text else main_countdown_text if not pre_countdown_display else ''"/>
+            <span class="o_countdown_text pe-1" t-out="pre_countdown_text if pre_countdown_text else main_countdown_text if not pre_countdown_display else ''"/>
             <div t-if="int(remaining_time) > 86400"
-             class="o_countdown_metric_container"><span class="o_countdown_remaining o_timer_days pr-1">0</span><span class="o_countdown_metric pr-1">days</span></div>
+             class="o_countdown_metric_container"><span class="o_countdown_remaining o_timer_days pe-1">0</span><span class="o_countdown_metric pe-1">days</span></div>
             <div t-if="int(remaining_time) > 3600"
                  class="o_countdown_metric_container"><span class="o_countdown_remaining o_timer_hours">00</span><span class="o_countdown_metric">:</span></div>
             <div class="o_countdown_metric_container"><span class="o_countdown_remaining o_timer_minutes">00</span><span class="o_countdown_metric">:</span></div>
@@ -64,9 +64,7 @@
 <template id="display_timer_alert_widget" name="Display Countdown widget">
     <div class="o_we_track_timer alert alert-warning alert-dismissible fade show d-none mx-3 mt-3 mb-0" role="alert" t-att-data-time-to-live="time_to_live">
         Starts <span />
-        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
-            <i class="fa fa-times"/>
-        </button>
+        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
     </div>
 </template>
 
diff --git a/addons/website_event_booth/static/src/js/booth_register.js b/addons/website_event_booth/static/src/js/booth_register.js
index b188668f166..9c1415169a0 100644
--- a/addons/website_event_booth/static/src/js/booth_register.js
+++ b/addons/website_event_booth/static/src/js/booth_register.js
@@ -14,7 +14,7 @@ publicWidget.registry.boothRegistration = publicWidget.Widget.extend({
     ],
     events: {
         'change input[name="booth_category_id"]': '_onChangeBoothType',
-        'change .custom-checkbox > input[type="checkbox"]': '_onChangeBooth',
+        'change .form-check > input[type="checkbox"]': '_onChangeBooth',
         'click .o_wbooth_registration_submit': '_onSubmitBoothSelectionClick',
         'click .o_wbooth_registration_confirm': '_onConfirmRegistrationClick',
     },
@@ -43,7 +43,7 @@ publicWidget.registry.boothRegistration = publicWidget.Widget.extend({
             if (result.unavailable_booths.length) {
                 self.$('input[name="event_booth_ids"]').each(function (i, el) {
                     if (result.unavailable_booths.includes(parseInt(el.value))) {
-                        $(el).closest('.custom-checkbox').addClass('text-danger');
+                        $(el).closest('.form-check').addClass('text-danger');
                     }
                 });
                 self.$('.o_wbooth_unavailable_booth_alert').removeClass('d-none');
@@ -54,7 +54,7 @@ publicWidget.registry.boothRegistration = publicWidget.Widget.extend({
     },
 
     _countSelectedBooths() {
-        return this.$('.custom-checkbox > input[type="checkbox"]:checked').length;
+        return this.$('.form-check > input[type="checkbox"]:checked').length;
     },
 
     _fillBooths() {
@@ -146,7 +146,7 @@ publicWidget.registry.boothRegistration = publicWidget.Widget.extend({
     //--------------------------------------------------------------------------
 
     _onChangeBooth(ev) {
-        $(ev.currentTarget).closest('.custom-checkbox').removeClass('text-danger');
+        $(ev.currentTarget).closest('.form-check').removeClass('text-danger');
         this._updateUiAfterBoothChange(this._countSelectedBooths());
     },
 
diff --git a/addons/website_event_booth/static/src/xml/event_booth_registration_templates.xml b/addons/website_event_booth/static/src/xml/event_booth_registration_templates.xml
index 7bb2ab81e45..2c8894ef591 100644
--- a/addons/website_event_booth/static/src/xml/event_booth_registration_templates.xml
+++ b/addons/website_event_booth/static/src/xml/event_booth_registration_templates.xml
@@ -9,17 +9,17 @@
                 </div>
             </div>
             <div class="d-flex flex-column">
-                <span t-if="contact.name" t-out="contact.name" class="font-weight-bold"/>
+                <span t-if="contact.name" t-out="contact.name" class="fw-bold"/>
                 <span t-if="contact.email">
-                    <i class="fa fa-fw fa-envelope mr-2"/>
+                    <i class="fa fa-fw fa-envelope me-2"/>
                     <t t-out="contact.email"/>
                 </span>
                 <span t-if="contact.phone">
-                    <i class="fa fa-fw fa-phone mr-2"/>
+                    <i class="fa fa-fw fa-phone me-2"/>
                     <t t-out="contact.phone"/>
                 </span>
                 <span t-if="contact.mobile">
-                    <i class="fa fa-fw fa-mobile mr-2"/>
+                    <i class="fa fa-fw fa-mobile me-2"/>
                     <t t-out="contact.mobile"/>
                 </span>
             </div>
diff --git a/addons/website_event_booth/views/event_booth_registration_templates.xml b/addons/website_event_booth/views/event_booth_registration_templates.xml
index fc57879cf9d..2ab3fa40c61 100644
--- a/addons/website_event_booth/views/event_booth_registration_templates.xml
+++ b/addons/website_event_booth/views/event_booth_registration_templates.xml
@@ -50,12 +50,12 @@
                     </div>
                 </div>
                 <div class="o_wbooth_registration_error_section alert alert-danger d-none mt-4" role="alert">
-                    <i class="fa fa-exclamation-triangle mr-2" role="img" aria-label="Error" title="Error"/>
+                    <i class="fa fa-exclamation-triangle me-2" role="img" aria-label="Error" title="Error"/>
                     <span class="o_wbooth_registration_error_message"/>
                 </div>
                 <div class="form-group">
                     <div class="d-grid col-sm-6 offset-sm-3 mt-5">
-                        <button type="submit" class="btn btn-primary font-weight-bold o_wbooth_registration_confirm">
+                        <button type="submit" class="btn btn-primary fw-bold o_wbooth_registration_confirm">
                             Book my Booths
                         </button>
                     </div>
diff --git a/addons/website_event_booth/views/event_booth_templates.xml b/addons/website_event_booth/views/event_booth_templates.xml
index cd50cabdb8e..65df2059926 100644
--- a/addons/website_event_booth/views/event_booth_templates.xml
+++ b/addons/website_event_booth/views/event_booth_templates.xml
@@ -17,7 +17,7 @@
                 </t>
                 <section class="mt-n5">
                     <div class="container overflow-hidden">
-                        <div class="row mb64 bg-white no-gutters rounded shadow-sm">
+                        <div class="row mb64 bg-white g-0 rounded shadow-sm">
                             <t t-out="0"/>
                         </div>
                     </div>
@@ -30,7 +30,7 @@
                         <span t-if="request.env.user.has_group('event.group_event_manager')">
                             you can
                             <a class="text-nowrap" t-attf-href="/web#id=#{event.id}&amp;view_type=form&amp;model=event.event">
-                                <i class="fa fa-gear mr-1" role="img" aria-label="Configure" title="Configure event booths"/><em>Configure Booths</em>
+                                <i class="fa fa-gear me-1" role="img" aria-label="Configure" title="Configure event booths"/><em>Configure Booths</em>
                             </a>
                             for this event.
                         </span>
@@ -73,7 +73,7 @@
                         <t t-if="available_booth_category_ids">
                             <div t-if="event.exhibition_map" class="row">
                                 <div class="d-grid col-sm-6 offset-sm-3 mb-4">
-                                    <button type="button" class="btn btn-info" data-toggle="modal" data-target="#mapModal">View Floor Plan</button>
+                                    <button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#mapModal">View Floor Plan</button>
                                     <div role="dialog" id="mapModal" class="modal" tabindex="-1">
                                         <div class="modal-dialog modal-lg">
                                             <div class="modal-content">
@@ -99,7 +99,7 @@
                             </div>
                             <div class="row" name="booth_registration_submit">
                                 <div class="col-sm-6 offset-sm-3 mt-5">
-                                    <button type="submit" class="btn btn-primary btn-block font-weight-bold o_wbooth_registration_submit" disabled="true">
+                                    <button type="submit" class="btn btn-primary btn-block fw-bold o_wbooth_registration_submit" disabled="true">
                                         <span>Book my Booths</span>
                                     </button>
                                 </div>
diff --git a/addons/website_event_booth_exhibitor/views/event_booth_registration_templates.xml b/addons/website_event_booth_exhibitor/views/event_booth_registration_templates.xml
index a39eafe0b00..a4d8a11f4ac 100644
--- a/addons/website_event_booth_exhibitor/views/event_booth_registration_templates.xml
+++ b/addons/website_event_booth_exhibitor/views/event_booth_registration_templates.xml
@@ -57,7 +57,7 @@
                 </div>
                 <div class="form-check">
                     <input class="form-check-input" type="checkbox" id="contact_details"/>
-                    <label class="font-weight-normal" for="contact_details">Contact me through a different email/phone.</label>
+                    <label class="fw-normal" for="contact_details">Contact me through a different email/phone.</label>
                 </div>
             </div>
         </xpath>
diff --git a/addons/website_event_booth_sale/views/event_booth_templates.xml b/addons/website_event_booth_sale/views/event_booth_templates.xml
index c93f3186a45..6ae8553c4d2 100644
--- a/addons/website_event_booth_sale/views/event_booth_templates.xml
+++ b/addons/website_event_booth_sale/views/event_booth_templates.xml
@@ -4,14 +4,14 @@
     <template id="event_booth_registration" inherit_id="website_event_booth.event_booth_registration">
         <xpath expr="//h5[@name='booth_category_name']" position="after">
             <t t-if="booth_category.price">
-                <span t-field="booth_category.price_reduce" class="font-weight-normal text-muted"
+                <span t-field="booth_category.price_reduce" class="fw-normal text-muted"
                       t-options="{'widget': 'monetary', 'display_currency': website.pricelist_id.currency_id}"
                       groups="account.group_show_line_subtotals_tax_excluded"/>
-                <span t-field="booth_category.price_reduce_taxinc" class="font-weight-normal text-muted"
+                <span t-field="booth_category.price_reduce_taxinc" class="fw-normal text-muted"
                       t-options="{'widget': 'monetary', 'display_currency': website.pricelist_id.currency_id}"
                       groups="account.group_show_line_subtotals_tax_included"/>
             </t>
-            <span t-else="" class="font-weight-normal text-muted">Free</span>
+            <span t-else="" class="fw-normal text-muted">Free</span>
         </xpath>
         <xpath expr="//input[@name='booth_category_id']" position="attributes">
             <attribute name="t-att-data-price">
@@ -21,10 +21,10 @@
         <xpath expr="//div[@name='booth_registration_submit']" position="before">
             <div class="row o_wbooth_booth_total_price d-none">
                 <div class="col-sm-2 offset-sm-1">
-                    <span class="font-weight-bold">Total</span>
+                    <span class="fw-bold">Total</span>
                 </div>
                 <div class="col-sm-6">
-                    <span class="font-weight-bold" t-out="float(0)"
+                    <span class="fw-bold" t-out="float(0)"
                           t-options="{'widget': 'monetary', 'display_currency': website.pricelist_id.currency_id}"/>
                 </div>
             </div>
diff --git a/addons/website_event_exhibitor/static/src/xml/event_exhibitor_connect.xml b/addons/website_event_exhibitor/static/src/xml/event_exhibitor_connect.xml
index 4206a41985c..2f9b99644a2 100644
--- a/addons/website_event_exhibitor/static/src/xml/event_exhibitor_connect.xml
+++ b/addons/website_event_exhibitor/static/src/xml/event_exhibitor_connect.xml
@@ -7,15 +7,15 @@
                 <t t-if="! widget.sponsorData.event_is_ongoing">
                     <div class="col-12 alert alert-warning text-center" role="alert"
                         t-if="widget.sponsorData.event_is_done">
-                        Event <span t-out="widget.sponsorData.event_name" class="font-weight-bold"/> is over.
+                        Event <span t-out="widget.sponsorData.event_name" class="fw-bold"/> is over.
 
                         <br/>
                         <span>Join us next time to meet <b t-out="widget.sponsorData.name"/>!</span>
                     </div>
                     <div class="col-12 alert alert-warning text-center" role="alert"
                         t-else="">
-                        <span t-out="widget.sponsorData.name" class="font-weight-bold"/> is not available right now.<br />
-                        Event <span t-out="widget.sponsorData.event_name" class="font-weight-bold"/>
+                        <span t-out="widget.sponsorData.name" class="fw-bold"/> is not available right now.<br />
+                        Event <span t-out="widget.sponsorData.event_name" class="fw-bold"/>
                         <span t-if="widget.sponsorData.event_start_today">
                             starts in
                             <span t-if="widget.sponsorData.event_start_remaining &gt;= 1" t-out="widget.sponsorData.event_start_remaining"
@@ -31,7 +31,7 @@
                 </t>
                 <div class="col-12 alert alert-warning text-center" role="alert"
                     t-else="">
-                    <span t-out="widget.sponsorData.name" class="font-weight-bold"/> is not available right now.<br />
+                    <span t-out="widget.sponsorData.name" class="fw-bold"/> is not available right now.<br />
                     Come back between
                     <strong>
                         <t t-out="widget.sponsorData.hour_from_str"/>
@@ -50,22 +50,22 @@
                         <div class="d-flex flex-column">
                             <div class="d-flex align-items-center">
                                 <h4 t-out="widget.sponsorData.name" class="mb4"/>
-                                <span class="badge badge-primary ml-2"
+                                <span class="badge text-bg-primary ms-2"
                                     t-out="widget.sponsorData.sponsor_type_name"/>
                             </div>
                             <span class="text-muted" t-if="widget.sponsorData.subtitle" t-out="widget.sponsorData.subtitle"/>
                             <span t-if="widget.sponsorData.url">
-                                <i class="fa fa-home mr-2"/><a t-att-href="widget.sponsorData.url"><span t-out="widget.sponsorData.url"/></a>
+                                <i class="fa fa-home me-2"/><a t-att-href="widget.sponsorData.url"><span t-out="widget.sponsorData.url"/></a>
                             </span>
                             <span t-if="widget.sponsorData.email">
-                                <i class="fa fa-envelope mr-2"/><a t-att-mailto="widget.sponsorData.email"><span t-out="widget.sponsorData.email"/></a>
+                                <i class="fa fa-envelope me-2"/><a t-att-mailto="widget.sponsorData.email"><span t-out="widget.sponsorData.email"/></a>
                             </span>
                             <span t-if="widget.sponsorData.phone">
-                                <i class="fa fa-phone mr-2"/><span t-out="widget.sponsorData.phone"/>
+                                <i class="fa fa-phone me-2"/><span t-out="widget.sponsorData.phone"/>
                             </span>
                         </div>
                         <img t-if="widget.sponsorData.country_flag_url"
-                            class="img ml-auto"
+                            class="img ms-auto"
                             style="max-height: 36px;"
                             t-att-src="widget.sponsorData.country_flag_url"
                             t-att-alt="widget.sponsorData.country_name"/>
diff --git a/addons/website_event_exhibitor/views/event_exhibitor_templates_list.xml b/addons/website_event_exhibitor/views/event_exhibitor_templates_list.xml
index 77458e5c90f..e06a87df472 100644
--- a/addons/website_event_exhibitor/views/event_exhibitor_templates_list.xml
+++ b/addons/website_event_exhibitor/views/event_exhibitor_templates_list.xml
@@ -38,7 +38,7 @@
                     <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
                     <ul class="o_wesponsor_topbar_filters o_wevent_index_topbar_filters nav"/>
                 </form>
-                <div class="o_wevent_event_search_box d-flex align-items-center flex-wrap pl-sm-3 pr-0">
+                <div class="o_wevent_event_search_box d-flex align-items-center flex-wrap ps-sm-3 pe-0">
                     <t t-call="website_event_exhibitor.exhibitor_search_box">
                         <t t-set="search" t-value="search_key" />
                         <t t-set="placeholder" t-value="'Search an exhibitor ...'"/>
@@ -55,8 +55,8 @@
     name="Filter by Country"
     active="True">
     <xpath expr="//ul[hasclass('o_wesponsor_topbar_filters')]" position="inside">
-        <li class="nav-item dropdown mr-2 my-1">
-            <a href="#" role="button" class="btn dropdown-toggle" data-toggle="dropdown">
+        <li class="nav-item dropdown me-2 my-1">
+            <a href="#" role="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
                 <i class="fa fa-folder-open"/>
                 By Country
             </a>
@@ -83,8 +83,8 @@
     name="Filter by Sponsorship"
     active="True">
     <xpath expr="//ul[hasclass('o_wesponsor_topbar_filters')]" position="inside">
-        <li class="nav-item dropdown mr-2 my-1">
-            <a href="#" role="button" class="btn dropdown-toggle" data-toggle="dropdown">
+        <li class="nav-item dropdown me-2 my-1">
+            <a href="#" role="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
                 <i class="fa fa-folder-open"/>
                 By Level
             </a>
@@ -156,16 +156,16 @@
 <template id="exhibitor_card" name="Exhibitor Card">
     <article class="h-100 card border-0 shadow-sm o_wesponsor_card"
         itemscope="itemscope" itemtype="http://schema.org/Event">
-        <div class="h-100 row no-gutters" t-att-data-publish="sponsor.website_published and 'on' or 'off'">
+        <div class="h-100 row g-0" t-att-data-publish="sponsor.website_published and 'on' or 'off'">
             <t t-set="sponsor_image_url" t-value="sponsor.website_image_url"/>
             <header t-att-class="'overflow-hidden col-12 %s' % ('bg-secondary' if not sponsor_image_url else '')">
                 <div class="d-block h-100 w-100">
                     <div t-if="sponsor_image_url" class="card-img-top position-static o_wesponsor_bg_image"
                         t-attf-style="padding-top: 50%; background-image: url(#{sponsor_image_url});">
                         <small t-if="not sponsor.is_published" class="o_wesponsor_card_header_badge bg-danger">
-                            <i class="fa fa-ban mr-2"/>Unpublished
+                            <i class="fa fa-ban me-2"/>Unpublished
                         </small>
-                        <img class="position-absolute mr-2 mt-2"
+                        <img class="position-absolute me-2 mt-2"
                             style="right: 0; top: 0; max-height: 20px;"
                             t-if="sponsor.partner_id.country_id"
                             t-att-src="sponsor.partner_id.country_id.image_url"
@@ -174,7 +174,7 @@
                     <div t-else="" class="o_wesponsor_gradient card-img-top"
                         style="padding-top: 50%">
                         <small t-if="not sponsor.is_published" class="o_wesponsor_card_header_badge bg-danger">
-                            <i class="fa fa-ban mr-2"/>Unpublished
+                            <i class="fa fa-ban me-2"/>Unpublished
                         </small>
                     </div>
                 </div>
@@ -185,7 +185,7 @@
                     <h5 class="card-title mt-0 mb-0 d-flex align-items-start">
                         <span t-field="sponsor.name" itemprop="name" class="text-break"/>
                         <span t-if="sponsor.is_in_opening_hours and sponsor.chat_room_id"
-                            class="ml-auto badge badge-danger">Live
+                            class="ms-auto badge text-bg-danger">Live
                         </span>
                     </h5>
                     <!-- Catchy sentence -->
@@ -234,8 +234,8 @@
 
 <template id="exhibitors_search_tag" name="Exhibitors: term">
     <span t-att-data-field="field" t-att-data-value="value"
-        class="o_search_tag align-items-baseline border d-inline-flex pl-2 mt-3 rounded ml16 mb-2 bg-white">
-        <i class="fa fa-tag mr-2 text-muted"/>
+        class="o_search_tag align-items-baseline border d-inline-flex ps-2 mt-3 rounded ml16 mb-2 bg-white">
+        <i class="fa fa-tag me-2 text-muted"/>
         <t t-out="label"/>
         <span class="btn border-0 py-1">&#215;</span>
     </span>
diff --git a/addons/website_event_exhibitor/views/event_exhibitor_templates_page.xml b/addons/website_event_exhibitor/views/event_exhibitor_templates_page.xml
index b8e7444869e..1bbf3b5fcb0 100644
--- a/addons/website_event_exhibitor/views/event_exhibitor_templates_page.xml
+++ b/addons/website_event_exhibitor/views/event_exhibitor_templates_page.xml
@@ -34,12 +34,12 @@
         <!-- EVENT NOT STARTED ALERTS -->
         <t t-if="not sponsor.event_id.is_ongoing">
             <div t-if="sponsor.event_id.is_done" class="alert alert-warning rounded-0 text-center" role="alert">
-                Event <span t-out="sponsor.event_id.name" class="font-weight-bold"/> is over.
+                Event <span t-out="sponsor.event_id.name" class="fw-bold"/> is over.
                 <br/>
                 <span>Join us next time to meet <b t-out="sponsor.partner_name"/>!</span>
             </div>
             <div t-else="" class="alert alert-warning rounded-0 text-center" role="alert">
-                Event <span t-out="sponsor.event_id.name" class="font-weight-bold"/>
+                Event <span t-out="sponsor.event_id.name" class="fw-bold"/>
                 <span t-if="sponsor.event_id.start_today">
                     starts in
                     <span t-if="sponsor.event_id.start_remaining &gt;= 1" t-out="sponsor.event_id.start_remaining"
@@ -98,8 +98,8 @@
             About <t t-out="sponsor.name"/>
         </div>
         <hr class="my-0"/>
-        <div class="ml-3 clearfix">
-            <div class="float-left pt-3">
+        <div class="ms-3 clearfix">
+            <div class="float-start pt-3">
                 <span t-if="sponsor.image_128" t-field="sponsor.image_128" class="o_wevent_online_page_avatar"
                     t-options="{'widget': 'image', 'filename-field': 'partner_name'}"/>
                 <span t-elif="sponsor.partner_id.image_128" t-field="sponsor.partner_id.image_128" class="o_wevent_online_page_avatar"
@@ -123,21 +123,21 @@
                         (<span t-out="sponsor.event_date_tz"/>)
                     </div>
                     <div t-if="sponsor.url" class="d-flex text-break align-items-baseline">
-                        <i class="fa fa-home mr-2"/><a t-att-href="sponsor.url"><span t-field="sponsor.url"/></a>
+                        <i class="fa fa-home me-2"/><a t-att-href="sponsor.url"><span t-field="sponsor.url"/></a>
                     </div>
                     <div t-elif="sponsor.partner_id.website" class="d-flex text-break align-items-baseline">
-                        <i class="fa fa-home mr-2"/><a t-att-href="sponsor.partner_id.website"><span t-field="sponsor.partner_id.website"/></a>
+                        <i class="fa fa-home me-2"/><a t-att-href="sponsor.partner_id.website"><span t-field="sponsor.partner_id.website"/></a>
                     </div>
                     <div t-if="sponsor.email" class="d-flex text-break align-items-baseline">
-                        <i class="fa fa-envelope mr-2"/><a t-att-mailto="sponsor.email"><span t-field="sponsor.email"/></a>
+                        <i class="fa fa-envelope me-2"/><a t-att-mailto="sponsor.email"><span t-field="sponsor.email"/></a>
                     </div>
                     <div t-if="sponsor.phone" class="d-flex text-break align-items-baseline">
-                        <i class="fa fa-phone mr-2"/><span t-field="sponsor.phone"/>
+                        <i class="fa fa-phone me-2"/><span t-field="sponsor.phone"/>
                     </div>
                 </div>
                 <a t-if="sponsor.partner_id.country_id"
                     t-att-href="'/event/%s/exhibitors?countries=%s' % (slug(sponsor.event_id), [sponsor.partner_id.country_id.id])"
-                    t-attf-class="text-right d-none d-md-block #{'mr-5' if sponsor.sponsor_type_id.display_ribbon_style and sponsor.sponsor_type_id.display_ribbon_style != 'no_ribbon' else ''}">
+                    t-attf-class="text-end d-none d-md-block #{'me-5' if sponsor.sponsor_type_id.display_ribbon_style and sponsor.sponsor_type_id.display_ribbon_style != 'no_ribbon' else ''}">
                     <img class="img"
                         style="max-height: 36px;"
                         t-att-src="sponsor.partner_id.country_id.image_url"
@@ -154,29 +154,29 @@
 <!-- ============================================================ -->
 
 <template id="exhibitor_aside" name="Exhibitor: Aside">
-    <div t-att-class="'col-12 pl-0 pr-0 o_wevent_online_page_aside o_wesponsor_exhibitor_aside %s' % ('col-md-3 col-lg-2' if option_widescreen else 'col-md-4 col-lg-3')">
+    <div t-att-class="'col-12 ps-0 pe-0 o_wevent_online_page_aside o_wesponsor_exhibitor_aside %s' % ('col-md-3 col-lg-2' if option_widescreen else 'col-md-4 col-lg-3')">
         <div class="bg-white o_wevent_online_page_aside_content">
             <div class="d-flex align-items-center justify-content-between mx-2">
                 <span class="h5 mb-0 pt-0 pt-md-3 pb-0 pb-md-2">Other exhibitors</span>
-                <a href="#collapse_exhibitor_aside" data-toggle="collapse"
+                <a href="#collapse_exhibitor_aside" data-bs-toggle="collapse"
                    class="d-lg-none p-2 text-decoration-none o_wevent_online_page_aside_collapse collapsed">
                     <i class="fa fa-chevron-down d-lg-none"/>
                 </a>
             </div>
             <ul id="collapse_exhibitor_aside" class="list-unstyled collapse d-lg-block mb-0">
                 <li t-foreach="sponsors_other" t-as="sponsor_other">
-                    <a class="row no-gutters px-2 pt-2 pb-1 text-decoration-none"
+                    <a class="row g-0 px-2 pt-2 pb-1 text-decoration-none"
                         t-att-href="sponsor_other.website_url"
                         t-att-data-publish="sponsor_other.website_published and 'on' or 'off'">
                         <div class="col-3 d-flex flex-column align-items-center">
                             <img t-if="sponsor_other.partner_id.country_id"
-                            class="mr-2 mb-1 o_wesponsor_aside_logo"
+                            class="me-2 mb-1 o_wesponsor_aside_logo"
                             t-att-src="sponsor_other.partner_id.country_id.image_url"
                             t-att-alt="sponsor_other.partner_id.country_id.name"/>
                             <span t-if="sponsor_other.sponsor_type_id.display_ribbon_style not in [False, 'no_ribbon']"
-                                t-att-class="'badge badge-light mr-2 ribbon_%s' % sponsor_other.sponsor_type_id.display_ribbon_style"
+                                t-att-class="'badge text-bg-light me-2 ribbon_%s' % sponsor_other.sponsor_type_id.display_ribbon_style"
                                 t-out="sponsor_other.sponsor_type_id.name"/>
-                            <span t-else="" class="badge badge-light mr-2"
+                            <span t-else="" class="badge text-bg-light me-2"
                                 t-out="sponsor_other.sponsor_type_id.name"/>
                         </div>
                         <div class="col flex-grow-1 overflow-auto">
@@ -185,8 +185,8 @@
 
                             </span>
                             <small class="text-muted" t-out="sponsor_other.subtitle"/>
-                            <div class="d-inline-block float-right" t-if="not sponsor_other.website_published">
-                                <small class="badge badge-danger">Unpublished</small>
+                            <div class="d-inline-block float-end" t-if="not sponsor_other.website_published">
+                                <small class="badge text-bg-danger">Unpublished</small>
                             </div>
                         </div>
                     </a>
diff --git a/addons/website_event_exhibitor/views/event_sponsor_views.xml b/addons/website_event_exhibitor/views/event_sponsor_views.xml
index 7c7356d5a3b..348416b6d13 100644
--- a/addons/website_event_exhibitor/views/event_sponsor_views.xml
+++ b/addons/website_event_exhibitor/views/event_sponsor_views.xml
@@ -179,7 +179,7 @@
                                 <div class="w-25 d-flex justify-content-center">
                                     <img t-att-src="kanban_image('event.sponsor', 'image_128', record.id.raw_value)" class="img-fluid" alt="Sponsor image"/>
                                 </div>
-                                <div class="w-75 d-flex flex-column ml-3">
+                                <div class="w-75 d-flex flex-column ms-3">
                                     <h1 class="o_kanban_record_title"><field name="name"/></h1>
                                     <strong>Level: <field name="sponsor_type_id"/></strong>
                                     <span class="text-muted"><field name="exhibitor_type"/></span>
diff --git a/addons/website_event_exhibitor/views/event_templates_sponsor.xml b/addons/website_event_exhibitor/views/event_templates_sponsor.xml
index d4989441513..a2f2e950446 100644
--- a/addons/website_event_exhibitor/views/event_templates_sponsor.xml
+++ b/addons/website_event_exhibitor/views/event_templates_sponsor.xml
@@ -12,7 +12,7 @@
                         <t t-set="popover_content">
                             <div t-field="sponsor.name" class="h5"/>
                             <div t-if="sponsor.url" class="d-flex align-items-baseline">
-                                <i class="fa fa-home mr-2"/><a t-att-href="sponsor.url" t-field="sponsor.url" class="text-truncate"/>
+                                <i class="fa fa-home me-2"/><a t-att-href="sponsor.url" t-field="sponsor.url" class="text-truncate"/>
                             </div>
                         </t>
                         <a class="o_wevent_sponsor o_wevent_sponsor_card h-100" tabindex="0" role="button"
@@ -37,7 +37,7 @@
             t-field="sponsor.sponsor_type_id" t-attf-class="o_ribbon o_ribbon_right ribbon_#{sponsor.sponsor_type_id.display_ribbon_style}"/>
     </div>
     <span t-if="not sponsor.website_published"
-        class="d-flex justify-content-center badge badge-danger o_wevent_online_badge_unpublished">Unpublished</span>
+        class="d-flex justify-content-center badge text-bg-danger o_wevent_online_badge_unpublished">Unpublished</span>
 </template>
 
 </odoo>
diff --git a/addons/website_event_meet/static/src/xml/website_event_meeting_room.xml b/addons/website_event_meet/static/src/xml/website_event_meeting_room.xml
index baea5dcfca2..c6bfec99f28 100644
--- a/addons/website_event_meet/static/src/xml/website_event_meeting_room.xml
+++ b/addons/website_event_meet/static/src/xml/website_event_meeting_room.xml
@@ -12,27 +12,27 @@
                             <h2>Launch a new topic</h2>
                             <p>Be sure you are ready to spend at least 10 minutes in the room if you want to initiate a new topic.</p>
                             <div class="row m-2">
-                                <label class="col-4 mt-2 text-left">Room Topic</label>
+                                <label class="col-4 mt-2 text-start">Room Topic</label>
                                 <input class="form-control col-8" maxlength="50" name="name" placeholder="e.g. Finance" required="1"/>
                             </div>
                             <div class="row m-2">
-                                <label class="col-4 mt-2 text-left">Short Summary</label>
+                                <label class="col-4 mt-2 text-start">Short Summary</label>
                                 <input class="form-control col-8" maxlength="200" name="summary" placeholder="e.g. Let's talk about Corporate Finance" required="1"/>
                             </div>
                             <div class="row m-2">
-                                <label class="col-4 mt-2 text-left">Target People</label>
+                                <label class="col-4 mt-2 text-start">Target People</label>
                                 <input class="form-control col-8" maxlength="30" name="audience" placeholder="e.g. Accountants"/>
                             </div>
                             <div class="row m-2">
-                                <label class="col-4 mt-2 text-left">Language</label>
-                                <select class="o_wevent_create_meeting_room_lang form-control col-8" name="lang_code" required="1">
+                                <label class="col-4 mt-2 text-start">Language</label>
+                                <select class="o_wevent_create_meeting_room_lang form-select col-8" name="lang_code" required="1">
                                     <option t-foreach="langs" t-as="language" t-att-value="language[0]" t-out="language[1]"
                                         t-att-selected="language[0] == defaultLangCode and 'selected' or None"/>
                                 </select>
                             </div>
                             <div class="row m-2">
-                                <label class="col-4 mt-2 text-left">Capacity</label>
-                                <select class="form-control col-8" name="capacity" required="1">
+                                <label class="col-4 mt-2 text-start">Capacity</label>
+                                <select class="form-select col-8" name="capacity" required="1">
                                     <option value="4">4</option>
                                     <option selected="selected" value="8">8</option>
                                     <option value="12">12</option>
@@ -46,7 +46,7 @@
                     </main>
                     <footer class="modal-footer justify-content-start">
                         <button class="btn btn-primary" form="o_wevent_create_meeting_room_form" type="submit">Create</button>
-                        <button class="btn bg-white text-primary" role="button" data-dismiss="modal">Discard</button>
+                        <button class="btn bg-white text-primary" role="button" data-bs-dismiss="modal">Discard</button>
                     </footer>
                 </div>
             </div>
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 6134ee2095a..4f45ea28855 100644
--- a/addons/website_event_meet/views/event_meet_templates_list.xml
+++ b/addons/website_event_meet/views/event_meet_templates_list.xml
@@ -25,12 +25,12 @@
 
 <!-- Meeting Rooms Main Display -->
 <template id="community_main" name="Meeting Rooms: Main Display">
-    <div class="col-12 col-md-8 pl-0 pr-0 pr-md-3 mt-3">
+    <div class="col-12 col-md-8 ps-0 pe-0 pe-md-3 mt-3">
         <h2 class="d-flex flex-row justify-content-between">
             <span>Join a room</span>
             <div class="dropdown">
                 <a class="dropdown-toggle o-no-caret btn p-0" title="Languages Menu"
-                    aria-label="Dropdown menu" data-display="static" data-toggle="dropdown" href="#" role="button">
+                    aria-label="Dropdown menu" data-bs-display="static" data-bs-toggle="dropdown" href="#" role="button">
                     <span t-out="current_lang.name if current_lang else 'All Languages'"/> ▼</a>
                 <div class="dropdown-menu" role="menu">
                     <a class="dropdown-item" role="menuitem" t-attf-href="/event/#{slug(event)}/community">All Languages
@@ -70,7 +70,7 @@
                             </div>
                         </div>
                     </nav>
-                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                     <t t-if="not event.is_done">
                         <span>This room is not open right now!</span><br />
                         Join us here on the
@@ -79,7 +79,7 @@
                         to have a chat with us!
                     </t>
                     <t t-else="">
-                        Event <span t-out="event.name" class="font-weight-bold"/> is over.
+                        Event <span t-out="event.name" class="fw-bold"/> is over.
                         <br/>
                         <span>Join us next time to chat about <b t-out="meeting_room.name"/>!</span>
                     </t>
@@ -121,15 +121,15 @@
         t-att-data-is-event-manager="int(is_event_user)"
         t-attf-class="card o_wevent_meeting_room_card w-100 my-2 bg-light d-block text-decoration-none rounded-0"
         t-att-href="meeting_room_href"
-        t-att-data-toggle="meeting_room_data_toggle"
-        t-att-data-target="meeting_room_data_target">
+        t-att-data-bs-toggle="meeting_room_data_toggle"
+        t-att-data-bs-target="meeting_room_data_target">
         <div class="text-decoration-none w-100 h-100 p-3" t-att-data-publish="meeting_room.website_published and 'on' or 'off'">
             <div class="o_wevent_meeting_room_corner_ribbon" t-if="meeting_room.room_is_full">Full</div>
             <div class="d-flex flex-column">
                 <div class="d-flex flex-row">
                     <h4 t-att-class="'text-break text-uppercase %s' % ('w-75' if meeting_room.website_published else 'w-50')" t-out="meeting_room.name"/>
                     <div t-if="not meeting_room.is_published" class="w-25">
-                        <span class="badge badge-danger">Unpublished</span>
+                        <span class="badge text-bg-danger">Unpublished</span>
                     </div>
                 </div>
                 <span class="text-muted" t-field="meeting_room.summary"/>
@@ -147,8 +147,8 @@
             <button t-attf-class="o_wevent_meeting_room_is_pinned btn #{'o_wevent_meeting_room_pinned' if meeting_room.is_pinned else ''}">
                 <i class="fa fa-thumb-tack"/>
             </button>
-            <div class="dropdown dropleft">
-                <button class="btn" data-toggle="dropdown"><i class="fa fa-ellipsis-v px-1"/></button>
+            <div class="dropdown dropstart">
+                <button class="btn" data-bs-toggle="dropdown"><i class="fa fa-ellipsis-v px-1"/></button>
                 <div class="dropdown-menu">
                     <button class="dropdown-item btn o_wevent_meeting_room_duplicate" type="button">Duplicate</button>
                     <button class="dropdown-item btn o_wevent_meeting_room_delete" type="button">Close</button>
@@ -179,7 +179,7 @@
                 <button disabled="disabled" class="btn btn-primary align-self-start">Create a Room</button>
                 Room creation will be available when event starts at 
                 <span>
-                    <span class="font-weight-bold" t-field="event.with_context(tz=event.date_tz).date_begin"
+                    <span class="fw-bold" t-field="event.with_context(tz=event.date_tz).date_begin"
                         t-options="{'format': 'medium'}"/>
                     <span class="small">(<t t-out="event.date_tz"/>)</span>
                 </span>
diff --git a/addons/website_event_meet/views/event_meet_templates_page.xml b/addons/website_event_meet/views/event_meet_templates_page.xml
index 58435458817..5d905798244 100644
--- a/addons/website_event_meet/views/event_meet_templates_page.xml
+++ b/addons/website_event_meet/views/event_meet_templates_page.xml
@@ -34,12 +34,12 @@
         <!-- EVENT NOT STARTED ALERTS -->
         <t t-if="not meeting_room.event_id.is_ongoing">
             <div t-if="meeting_room.event_id.is_done" class="alert alert-warning text-center">
-                The event <span t-out="meeting_room.event_id.name" class="font-weight-bold"/> is over.
+                The event <span t-out="meeting_room.event_id.name" class="fw-bold"/> is over.
                 <br/>
                 <span>Join us next time to chat about <b t-out="meeting_room.name"/>!</span>
             </div>
             <div t-else="" class="alert alert-warning text-center">
-                The event <span t-out="meeting_room.event_id.name" class="font-weight-bold"/>
+                The event <span t-out="meeting_room.event_id.name" class="fw-bold"/>
                 <span t-if="meeting_room.event_id.start_today">
                     starts in
                     <span t-if="meeting_room.event_id.start_remaining &gt;= 1" t-out="meeting_room.event_id.start_remaining"
@@ -65,7 +65,7 @@
             <div t-else="" class="d-flex flex-column">
                 <div id="o_wemeet_jitsi_iframe">
                     <div class="o_wjitsi_chat_room_loading position-absolute w-100 text-center text-muted">
-                        <i class="fa fa-spin fa-circle-o-notch mr-3"/>
+                        <i class="fa fa-spin fa-circle-o-notch me-3"/>
                         <span>Loading your room...</span>
                     </div>
                 </div>
@@ -88,7 +88,7 @@
         <div class="mx-3">
             <div class="h5 my-3" t-out="meeting_room.name"/>
             <div t-if="meeting_room.room_participant_count > 0" class="text-muted mb-3">
-                A chat among <t t-out="meeting_room.room_participant_count"/> <span class="font-weight-bold" t-out="meeting_room.target_audience"/>
+                A chat among <t t-out="meeting_room.room_participant_count"/> <span class="fw-bold" t-out="meeting_room.target_audience"/>
             </div>
         </div>
         <hr class="my-0"/>
@@ -101,11 +101,11 @@
 <!-- ============================================================ -->
 
 <template id="meeting_room_aside" name="Meeting Room: Aside">
-    <div t-att-class="'col-12 pl-0 pr-0 o_wevent_online_page_aside %s' % ('col-md-3 col-lg-2' if option_widescreen else 'col-md-4 col-lg-3')">
+    <div t-att-class="'col-12 ps-0 pe-0 o_wevent_online_page_aside %s' % ('col-md-3 col-lg-2' if option_widescreen else 'col-md-4 col-lg-3')">
         <div class="bg-white o_wevent_online_page_aside_content">
             <div class="d-flex align-items-center justify-content-between mx-2">
                 <span class="h5 mb-0 pt-0 pt-md-3 pb-0 pb-md-2">Other Rooms</span>
-                <a href="#collapse_meet_room_aside" data-toggle="collapse" class="d-lg-none p-2 text-decoration-none o_wevent_online_page_aside_collapse collapsed">
+                <a href="#collapse_meet_room_aside" data-bs-toggle="collapse" class="d-lg-none p-2 text-decoration-none o_wevent_online_page_aside_collapse collapsed">
                     <i class="fa fa-chevron-down d-lg-none"/>
                 </a>
             </div>
diff --git a/addons/website_event_meet_quiz/views/event_meet_templates.xml b/addons/website_event_meet_quiz/views/event_meet_templates.xml
index 8a3821dbd6e..f6853514b32 100644
--- a/addons/website_event_meet_quiz/views/event_meet_templates.xml
+++ b/addons/website_event_meet_quiz/views/event_meet_templates.xml
@@ -19,17 +19,17 @@
     <table class="w-100">
         <tr t-foreach="top3_visitors" t-as="visitor">
             <td><div class="d-flex align-items-center mb-3">
-                <b class="mr-2 text-muted" t-out="visitor['position']"/>
-                <img class="rounded-circle float-left"
+                <b class="me-2 text-muted" t-out="visitor['position']"/>
+                <img class="rounded-circle float-start"
                     style="width: 32px; height: 32px; object-fit: cover;"
                     t-att-src="image_data_uri(visitor['visitor'].partner_image) if visitor['visitor'].partner_image else '/web/static/img/user_placeholder.jpg'"
                     t-att-alt="visitor['visitor'].display_name"/>
                 <div class="o_we_leaderboard_name">
-                    <span t-if="visitor['visitor'] == current_visitor and not visitor['visitor'].partner_id" class="font-weight-bold">You</span>
-                    <span t-else="" class="font-weight-bold" t-out="visitor['visitor'].display_name"/>
+                    <span t-if="visitor['visitor'] == current_visitor and not visitor['visitor'].partner_id" class="fw-bold">You</span>
+                    <span t-else="" class="fw-bold" t-out="visitor['visitor'].display_name"/>
                 </div>
             </div></td>
-            <td class="text-right">
+            <td class="text-end">
                 <div class="mb-3">
                     <span class="text-nowrap"><t t-out="visitor['points']"/> xp</span>
                 </div>
diff --git a/addons/website_event_questions/static/tests/tours/tickets_questions.js b/addons/website_event_questions/static/tests/tours/tickets_questions.js
index 36084499e8e..a62623bc3f6 100644
--- a/addons/website_event_questions/static/tests/tours/tickets_questions.js
+++ b/addons/website_event_questions/static/tests/tours/tickets_questions.js
@@ -10,7 +10,7 @@ tour.register('test_tickets_questions', {
     trigger: 'article:contains("Design Fair New York")',
 }, {
     content: "Select 2 'Free' tickets to buy",
-    trigger: 'div.row:contains("Free") select.custom-select',
+    trigger: 'div.row:contains("Free") select.form-select',
     run: 'text 2'
 }, {
     content: "Click on Register tickets button",
diff --git a/addons/website_event_questions/views/event_templates.xml b/addons/website_event_questions/views/event_templates.xml
index db2d8bd2fb4..8ad6e4a5826 100644
--- a/addons/website_event_questions/views/event_templates.xml
+++ b/addons/website_event_questions/views/event_templates.xml
@@ -34,7 +34,7 @@
     <label t-out="question.title"/>
     <span t-if="question.is_mandatory_answer">*</span>
     <t t-if="question.question_type == 'simple_choice'">
-        <select t-attf-name="question_answer-#{registration_index}-#{question.id}" class="custom-select"
+        <select t-attf-name="question_answer-#{registration_index}-#{question.id}" class="form-select"
                 t-att-required="question.is_mandatory_answer">
             <option value=""/>
             <t t-foreach="question.answer_ids" t-as="answer">
diff --git a/addons/website_event_sale/views/website_event_templates.xml b/addons/website_event_sale/views/website_event_templates.xml
index 1cdf3c16d4d..80e90bb1365 100644
--- a/addons/website_event_sale/views/website_event_templates.xml
+++ b/addons/website_event_sale/views/website_event_templates.xml
@@ -6,14 +6,14 @@
     <xpath expr="//div[hasclass('o_wevent_registration_multi_select')]" position="inside">
         <t t-if="ticket.price">
             <t t-if="(ticket.price-website.currency_id._convert(ticket.price_reduce, event.company_id.sudo().currency_id, event.company_id, datetime.date.today())) &gt; 1 and website.pricelist_id.discount_policy == 'without_discount'">
-                <del class="text-danger mr-1" t-field="ticket.price" t-options="{'widget': 'monetary', 'from_currency': event.company_id.sudo().currency_id, 'display_currency': website.pricelist_id.currency_id}"/>
+                <del class="text-danger me-1" t-field="ticket.price" t-options="{'widget': 'monetary', 'from_currency': event.company_id.sudo().currency_id, 'display_currency': website.pricelist_id.currency_id}"/>
             </t>
             <span t-field="ticket.price_reduce" t-options="{'widget': 'monetary', 'display_currency': website.pricelist_id.currency_id}" groups="account.group_show_line_subtotals_tax_excluded"/>
             <span t-field="ticket.price_reduce_taxinc" t-options="{'widget': 'monetary', 'display_currency': website.pricelist_id.currency_id}" groups="account.group_show_line_subtotals_tax_included"/>
             <span itemprop="price" class="d-none" t-out="ticket.price"/>
             <span itemprop="priceCurrency" class="d-none" t-out="website.pricelist_id.currency_id.name"/>
         </t>
-        <span t-else="" class="font-weight-bold text-uppercase">Free</span>
+        <span t-else="" class="fw-bold text-uppercase">Free</span>
     </xpath>
     <xpath expr="//div[hasclass('o_wevent_price_range')]" position="inside">
         <t t-if="event.event_ticket_ids[-1].price_reduce > 0">
@@ -32,14 +32,14 @@
         <div class="px-2 text-dark d-flex align-items-center align-self-stretch">
             <t t-if="tickets.price">
                 <t t-if="(tickets.price-website.currency_id._convert(tickets.price_reduce, event.company_id.sudo().currency_id, event.company_id, datetime.date.today())) &gt; 1 and website.pricelist_id.discount_policy == 'without_discount'">
-                    <del class="text-danger mr-1" t-field="tickets.price" t-options="{'widget': 'monetary', 'from_currency': event.company_id.sudo().currency_id, 'display_currency': website.pricelist_id.currency_id}"/>
+                    <del class="text-danger me-1" t-field="tickets.price" t-options="{'widget': 'monetary', 'from_currency': event.company_id.sudo().currency_id, 'display_currency': website.pricelist_id.currency_id}"/>
                 </t>
                 <span t-field="tickets.price_reduce" t-options="{'widget': 'monetary', 'display_currency': website.pricelist_id.currency_id}" groups="account.group_show_line_subtotals_tax_excluded"/>
                 <span t-field="tickets.price_reduce_taxinc" t-options="{'widget': 'monetary', 'display_currency': website.pricelist_id.currency_id}" groups="account.group_show_line_subtotals_tax_included"/>
                 <span itemprop="price" class="d-none" t-out="tickets.price"/>
                 <span itemprop="priceCurrency" class="d-none" t-out="website.pricelist_id.currency_id.name"/>
             </t>
-            <span t-else="" class="font-weight-bold text-uppercase">Free</span>
+            <span t-else="" class="fw-bold text-uppercase">Free</span>
         </div>
     </xpath>
 </template>
diff --git a/addons/website_event_sale/views/website_sale_templates.xml b/addons/website_event_sale/views/website_sale_templates.xml
index 202e0ff41f5..93e76cf604d 100644
--- a/addons/website_event_sale/views/website_sale_templates.xml
+++ b/addons/website_event_sale/views/website_sale_templates.xml
@@ -50,7 +50,7 @@
                 <section class="pb32 o_cc o_cc2 o_colored_level bg-transparent">
                     <div class="s_nb_column_fixed s_col_no_bgcolor o_wevent_index" t-foreach="events" t-as="event">
                         <div class="col-lg-12 card mt-3 mx-auto item pt16 pb16">
-                            <div class="row s_col_no_bgcolor no-gutters align-items-center o_cc1">
+                            <div class="row s_col_no_bgcolor g-0 align-items-center o_cc1">
                                 <div class="col-lg-4 align-self-stretch d-block o_wevent_events_list">
                                     <t t-call="website.record_cover">
                                         <t t-set="_record" t-value="event" />
@@ -59,11 +59,11 @@
                                             <span t-field="event.with_context(tz=event.date_tz).date_begin" t-options="{'format': 'dd'}" class="o_wevent_event_day oe_hide_on_date_edit" />
                                         </div>
                                         <small class="o_wevent_participating text-bg-success">
-                                            <i class="fa fa-check mr-2" />
+                                            <i class="fa fa-check me-2" />
                                             Registered
                                         </small>
                                         <small t-if="not event.website_published" class="o_wevent_unpublished text-bg-danger">
-                                            <i class="fa fa-ban mr-2" />
+                                            <i class="fa fa-ban me-2" />
                                             Unpublished
                                         </small>
                                     </t>
diff --git a/addons/website_event_track/static/src/js/website_event_track.js b/addons/website_event_track/static/src/js/website_event_track.js
index 98f51e8755d..7ce54821876 100644
--- a/addons/website_event_track/static/src/js/website_event_track.js
+++ b/addons/website_event_track/static/src/js/website_event_track.js
@@ -18,7 +18,7 @@ publicWidget.registry.websiteEventTrack = publicWidget.Widget.extend({
      */
     start: function () {
         this._super.apply(this, arguments).then(() => {
-            this.$el.find('[data-toggle="popover"]').popover()
+            this.$el.find('[data-bs-toggle="popover"]').popover()
         })
     },
 
diff --git a/addons/website_event_track/views/event_track_templates_agenda.xml b/addons/website_event_track/views/event_track_templates_agenda.xml
index fcf48be9ac6..758d1bd9e6e 100644
--- a/addons/website_event_track/views/event_track_templates_agenda.xml
+++ b/addons/website_event_track/views/event_track_templates_agenda.xml
@@ -34,8 +34,8 @@
             <div class="d-flex flex-column flex-sm-row justify-content-between w-100">
                 <ul class="o_weagenda_topbar_filters o_wevent_index_topbar_filters nav">
                 </ul>
-                <div class="d-flex pl-sm-3 pr-0">
-                    <label class="invisible text-muted mr-2" id="search_summary"><span id="search_number" class="mr-1">0</span>Results</label>
+                <div class="d-flex ps-sm-3 pe-0">
+                    <label class="invisible text-muted me-2" id="search_summary"><span id="search_number" class="me-1">0</span>Results</label>
                     <input type="text" class="form-control" placeholder="Filter Tracks..." id="event_track_search"/>
                 </div>
             </div>
@@ -75,19 +75,19 @@
         <!-- DAY HEADER -->
         <div class="o_we_track_day_header mt-3 w-100 d-flex justify-content-between align-items-center">
             <div class="d-flex">
-                <span class="h1 m-0 font-weight-bold" t-out="day"
+                <span class="h1 m-0 fw-bold" t-out="day"
                     t-options="{'widget': 'date', 'format': 'EEEE dd'}"/>
-                <div class="d-flex flex-column ml-2">
-                    <span class="font-weight-bold" t-out="day"
+                <div class="d-flex flex-column ms-2">
+                    <span class="fw-bold" t-out="day"
                         t-options="{'widget': 'date', 'format': 'MMMM'}"/>
-                    <span class="font-weight-bold" t-out="day"
+                    <span class="fw-bold" t-out="day"
                         t-options="{'widget': 'date', 'format': 'YYYY'}"/>
                 </div>
-                <div class="flex-column align-self-center ml-2">
-                    <span class="small font-weight-light">(<t t-out="event.date_tz"/>)</span>
+                <div class="flex-column align-self-center ms-2">
+                    <span class="small fw-light">(<t t-out="event.date_tz"/>)</span>
                 </div>
             </div>
-            <small class="float-right text-muted align-self-end"><t t-out="tracks_by_days[day]"/> tracks</small>
+            <small class="float-end text-muted align-self-end"><t t-out="tracks_by_days[day]"/> tracks</small>
         </div>
         <hr class="mt-2 mb-2"/>
 
@@ -161,11 +161,11 @@
     <div class="d-flex flex-column h-100" t-att-data-publish="track.website_published and 'on' or 'off'">
         <div class="d-flex justify-content-end flex-wrap-reverse align-items-center o_weagenda_track_badges">
             <small t-if="track.is_track_live and not track.is_track_done and track.website_published"
-                class="mx-1 badge badge-danger rounded-sm">Live
+                class="mx-1 badge text-bg-danger rounded-1">Live
             </small>
             <small t-if="not track.website_published and is_event_user"
                    title="Unpublished"
-                   class="ml-1 mt-1 mt-md-0 badge badge-danger o_wevent_online_badge_unpublished">Unpublished</small>
+                   class="ms-1 mt-1 mt-md-0 badge text-bg-danger o_wevent_online_badge_unpublished">Unpublished</small>
             <span t-if="option_track_wishlist">
                 <t t-call="website_event_track.track_widget_reminder">
                     <t t-set="reminder_light" t-value="True"/>
@@ -194,7 +194,7 @@
             <div class="d-flex justify-content-center flex-wrap">
                 <t t-foreach="track.tag_ids" t-as="tag">
                     <span t-if="tag.color" t-att-title="tag.name"
-                          t-attf-class="mr-1 mt-1 badge #{'o_tag_color_'+str(tag.color)}" t-out="tag.name"
+                          t-attf-class="me-1 mt-1 badge #{'o_tag_color_'+str(tag.color)}" t-out="tag.name"
                           t-attf-onclick="
                             var value = '#{tag.name}' ;
                             var target = $('#event_track_search');
diff --git a/addons/website_event_track/views/event_track_templates_list.xml b/addons/website_event_track/views/event_track_templates_list.xml
index 45fc9b5125e..4fb772bd57a 100644
--- a/addons/website_event_track/views/event_track_templates_list.xml
+++ b/addons/website_event_track/views/event_track_templates_list.xml
@@ -36,8 +36,8 @@
             <div class="d-flex flex-column flex-sm-row justify-content-between w-100">
                 <ul class="o_wesession_topbar_filters o_wevent_index_topbar_filters nav">
                     <!-- Optional wishlist filter -->
-                    <li t-if="option_track_wishlist" class="nav-item dropdown mr-2 my-1">
-                        <a href="#" role="button" class="btn dropdown-toggle" data-toggle="dropdown">
+                    <li t-if="option_track_wishlist" class="nav-item dropdown me-2 my-1">
+                        <a href="#" role="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
                             <i class="fa fa-folder-open"/> Favorites
                         </a>
                         <div class="dropdown-menu">
@@ -58,7 +58,7 @@
                         </div>
                     </li>
                 </ul>
-                <div class="d-flex align-items-center flex-wrap pl-sm-3 pr-0">
+                <div class="d-flex align-items-center flex-wrap ps-sm-3 pe-0">
                     <t t-call="website_event.events_search_box">
                         <t t-set="_searches" t-value="searches"/>
                         <t t-set="action" t-value="'/event/%s/track' % (slug(event))"/>
@@ -77,8 +77,8 @@
     active="True">
     <xpath expr="//ul[hasclass('o_wesession_topbar_filters')]" position="inside">
         <t t-foreach="tag_categories" t-as="tag_category">
-            <li t-if="tag_category.tag_ids and any(tag.color for tag in tag_category.tag_ids)" class="nav-item dropdown mr-2 my-1">
-                <a href="#" role="button" class="btn dropdown-toggle" data-toggle="dropdown">
+            <li t-if="tag_category.tag_ids and any(tag.color for tag in tag_category.tag_ids)" class="nav-item dropdown me-2 my-1">
+                <a href="#" role="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
                     <i class="fa fa-folder-open"/>
                     <t t-out="tag_category.name"/>
                 </a>
@@ -172,27 +172,27 @@
                 <!-- DAY HEADER -->
                 <div class="o_we_track_day_header d-flex">
                     <div class="d-flex flex-grow-1" t-if="tracks_date">
-                        <span class="h1 m-0 font-weight-bold" t-out="tracks_date"
+                        <span class="h1 m-0 fw-bold" t-out="tracks_date"
                             t-options="{'widget': 'date', 'format': 'EEEE dd'}"/>
-                        <div class="d-flex flex-column ml-2">
-                            <span class="font-weight-bold" t-out="tracks_date"
+                        <div class="d-flex flex-column ms-2">
+                            <span class="fw-bold" t-out="tracks_date"
                                 t-options="{'widget': 'date', 'format': 'MMMM'}"/>
-                            <span class="font-weight-bold" t-out="tracks_date"
+                            <span class="fw-bold" t-out="tracks_date"
                                 t-options="{'widget': 'date', 'format': 'YYYY'}"/>
                         </div>
-                        <div class="flex-column align-self-center ml-2">
-                            <span class="small font-weight-light">(<t t-out="event.date_tz"/>)</span>
+                        <div class="flex-column align-self-center ms-2">
+                            <span class="small fw-light">(<t t-out="event.date_tz"/>)</span>
                         </div>
                     </div>
                     <div class="d-flex flex-grow-1" t-elif="tracks_header_name">
-                        <span class="h1 m-0 font-weight-bold"
+                        <span class="h1 m-0 fw-bold"
                             t-out="tracks_header_name"/>
                     </div>
-                    <a t-attf-class="ml-auto align-self-start text-black {{ 'collapsed' if tracks_info['default_collapsed'] else '' }}"
+                    <a t-attf-class="ms-auto align-self-start text-black {{ 'collapsed' if tracks_info['default_collapsed'] else '' }}"
                         t-attf-href="#collapse_session_list_{{ tracks_info_index }}"
                         t-attf-aria-controls="collapse_session_list_{{ tracks_info_index }}"
                         t-att-aria-expanded="'false' if tracks_info['default_collapsed'] else 'true'"
-                        data-toggle="collapse">
+                        data-bs-toggle="collapse">
                         <i class="fa fa-2x fa-chevron-down"/>
                     </a>
                     <hr class="mt-2 mb-2"/>
@@ -204,18 +204,18 @@
                         t-att-class="'o_wesession_list_item px-2 py-2 event_color_%d' % (track.color)">
                         <!-- Side information in a floating div (desktop only) -->
                         <div t-if="not event.is_done and (not track.date or today_tz &lt;= tracks_date) and option_track_wishlist"
-                            class="float-right d-none d-md-block ml-2 py-1">
+                            class="float-end d-none d-md-block ms-2 py-1">
                             <t t-call="website_event_track.track_widget_reminder">
                                 <t t-set="reminder_small" t-value="False"/>
                                 <t t-set="reminder_light" t-value="False"/>
                             </t>
                         </div>
-                        <div class="row no-gutters">
+                        <div class="row g-0">
                             <!-- Main column: name, speaker -->
                             <div class="col-md-7">
                                 <!-- Reminder widget: directly in line to gain space, mobile only -->
                                 <div t-if="not event.is_done and (not track.date or today_tz &lt;= tracks_date) and option_track_wishlist"
-                                    class="float-right d-block d-md-none ml-2 py-1">
+                                    class="float-end d-block d-md-none ms-2 py-1">
                                     <t t-call="website_event_track.track_widget_reminder">
                                         <t t-set="reminder_small" t-value="True"/>
                                         <t t-set="reminder_light" t-value="False"/>
@@ -223,15 +223,15 @@
                                 </div>
                                 <span class="h5 mb0">
                                     <a t-if="track.website_published or is_event_user"
-                                        class="mr-2"
+                                        class="me-2"
                                         t-att-href="track.website_url">
                                         <span t-field="track.name"/>
                                     </a>
                                     <t t-else="">
-                                        <span class="mr-2" t-field="track.name"/>
+                                        <span class="me-2" t-field="track.name"/>
                                     </t>
                                     <span t-if="not track.website_published and is_event_user"
-                                        class="badge badge-danger o_wevent_online_badge_unpublished">
+                                        class="badge text-bg-danger o_wevent_online_badge_unpublished">
                                         Unpublished
                                     </span>
                                 </span>
@@ -240,25 +240,25 @@
                                     <t t-if="tracks_date and today_tz &lt;= tracks_date">
                                         <!-- Hour: Live > Remaining > Hour: mobile only -->
                                         <div class="d-block d-md-none">
-                                            <span t-if="track.partner_tag_line" class="ml-2">&amp;bull;</span>
+                                            <span t-if="track.partner_tag_line" class="ms-2">&amp;bull;</span>
                                             <span t-if="track.is_track_live and not track.is_track_done"
-                                                class="badge badge-danger ml-2">Live</span>
+                                                class="badge text-bg-danger ms-2">Live</span>
                                             <span t-elif="not track.is_track_done and track.is_track_soon"
-                                                class="ml-2">
+                                                class="ms-2">
                                                 <span t-out="track.track_start_remaining"
                                                     t-options="{'widget': 'duration', 'digital': False, 'format': 'narrow',
                                                                 'add_direction': True, 'unit': 'second', 'round': 'minute'}"/>
                                             </span>
                                             <span t-elif="not track.is_track_done and not track.is_track_soon"
-                                                class="ml-2"
+                                                class="ms-2"
                                                 t-out="track.date"
                                                 t-options="{'widget': 'datetime', 'time_only': True, 'format': 'short', 'tz_name': track.event_id.date_tz}"/>
-                                            <span t-else="" class="badge badge-info ml-2">Finished</span>
+                                            <span t-else="" class="badge text-bg-info ms-2">Finished</span>
                                         </div>
                                         <!-- Duration (desktop only) -->
                                         <t t-if="track.duration and not track.is_track_done and not track.is_track_done">
-                                            <span class="d-none d-md-block ml-2">&amp;bull;</span>
-                                            <span class="d-none d-md-block ml-2"
+                                            <span class="d-none d-md-block ms-2">&amp;bull;</span>
+                                            <span class="d-none d-md-block ms-2"
                                                 t-out="track.duration"
                                                 t-options="{'widget': 'duration', 'digital': False, 'format': 'short', 'unit': 'hour', 'round': 'minute'}"/>
                                         </t>
@@ -269,20 +269,20 @@
                             <div class="col-md-5 align-self-center">
                                 <!-- Hour: Live > Remaining > Hour: desktop only -->
                                 <div t-if="tracks_date and today_tz &lt;= tracks_date"
-                                    class="d-none d-md-block float-right">
+                                    class="d-none d-md-block float-end">
                                     <span t-if="track.is_track_live and not track.is_track_done"
-                                        class="badge badge-danger ml-2">Live</span>
+                                        class="badge text-bg-danger ms-2">Live</span>
                                     <span t-elif="not track.is_track_done and track.is_track_soon"
-                                        class="ml-2">
+                                        class="ms-2">
                                         <span t-out="track.track_start_remaining"
                                             t-options="{'widget': 'duration', 'digital': False, 'format': 'narrow',
                                                         'add_direction': True, 'unit': 'second', 'round': 'minute'}"/>
                                     </span>
                                     <span t-elif="not track.is_track_done and not track.is_track_soon"
-                                        class="ml-2"
+                                        class="ms-2"
                                         t-out="track.date"
                                         t-options="{'widget': 'datetime', 'time_only': True, 'format': 'short', 'tz_name': event.date_tz}"/>
-                                    <span t-else="" class="badge badge-info ml-2">Finished</span>
+                                    <span t-else="" class="badge text-bg-info ms-2">Finished</span>
                                 </div>
                                 <!-- Tags: desktop only -->
                                 <div class="d-none d-md-block">
@@ -319,15 +319,15 @@
 <template id="track_card" name="Track Card">
     <article t-att-class="'h-100 card rounded-0 border-0 shadow-sm o_wesession_track_card %s' % ('o_wesession_track_card_unpublished' if (not track.website_published and is_event_user) else '')"
         itemscope="itemscope" itemtype="http://schema.org/Event">
-        <div class="h-100 row no-gutters">
+        <div class="h-100 row g-0">
             <header class="overflow-hidden bg-secondary col-12">
                 <small t-if="not track.website_published and is_event_user" class="o_wesession_track_card_header_badge bg-danger">
-                    <i class="fa fa-ban mr-2"/>Unpublished
+                    <i class="fa fa-ban me-2"/>Unpublished
                 </small>
 
                 <div t-if="track.website_image_url" class="card-img-top"
                     t-attf-style="padding-top: 50%; background-image: url(#{track.website_image_url}); background-size: cover; background-position:center">
-                    <span t-if="option_track_wishlist and not track.is_track_live" class="position-absolute h3 mt-2 mr-2" style="right: 0; top: 0;">
+                    <span t-if="option_track_wishlist and not track.is_track_live" class="position-absolute h3 mt-2 me-2" style="right: 0; top: 0;">
                         <t t-call="website_event_track.track_widget_reminder">
                             <t t-set="reminder_light" t-value="True"/>
                             <t t-set="light_theme" t-value="True"/>
@@ -336,7 +336,7 @@
                 </div>
                 <div t-else="" class="o_wesession_gradient card-img-top position-relative"
                     style="padding-top: 50%;">
-                    <span t-if="option_track_wishlist" class="position-absolute h3 mt-2 mr-2" style="right: 0; top: 0;">
+                    <span t-if="option_track_wishlist" class="position-absolute h3 mt-2 me-2" style="right: 0; top: 0;">
                         <t t-call="website_event_track.track_widget_reminder">
                             <t t-set="reminder_light" t-value="True"/>
                         </t>
@@ -364,13 +364,13 @@
                     <!-- Speaker -->
                     <span class="text-muted text-truncate" t-field="track.partner_name" itemprop="performer"/>
                     <!-- Starts -->
-                    <span class="text-muted ml-auto">
+                    <span class="text-muted ms-auto">
                         <t t-if="track.track_start_remaining &gt;= 60">In
-                            <span class="text-muted ml-auto" t-field="track.track_start_remaining" itemprop="duration"
+                            <span class="text-muted ms-auto" t-field="track.track_start_remaining" itemprop="duration"
                                 t-options="{'widget': 'duration', 'digital': False, 'format': 'short', 'unit': 'second', 'round': 'minute'}"/>
                         </t>
                         <t t-elif="track.track_start_relative &gt;= 60">
-                            <span class="text-muted ml-auto" t-field="track.track_start_relative" itemprop="duration"
+                            <span class="text-muted ms-auto" t-field="track.track_start_relative" itemprop="duration"
                                 t-options="{'widget': 'duration', 'digital': False, 'format': 'short', 'unit': 'second', 'round': 'minute'}"/>
                             ago
                         </t>
@@ -388,8 +388,8 @@
 <template id="tracks_search" name="Tracks: search tags">
     <div class="d-flex align-items-center mb-3">
         <span t-if="search_wishlist"
-            class="align-items-baseline border d-inline-flex pl-2 mt-3 rounded ml16 mb-2 bg-white">
-            <i class="fa fa-bell mr-2 text-muted"/> Favorite Talks
+            class="align-items-baseline border d-inline-flex ps-2 mt-3 rounded ml16 mb-2 bg-white">
+            <i class="fa fa-bell me-2 text-muted"/> Favorite Talks
             <a t-att-href="'/event/%s/track?%s' % (slug(event), keep_query('*', search_wishlist=''))"
                 class="btn border-0 py-1">
                 &#215;
@@ -397,8 +397,8 @@
         </span>
 
         <t t-foreach="search_tags" t-as="tag">
-            <span class="align-items-baseline border d-inline-flex pl-2 mt-3 rounded ml16 mb-2 bg-white">
-                <i class="fa fa-tag mr-2 text-muted"/>
+            <span class="align-items-baseline border d-inline-flex ps-2 mt-3 rounded ml16 mb-2 bg-white">
+                <i class="fa fa-tag me-2 text-muted"/>
                 <t t-out="tag.display_name"/>
                 <a t-att-href="'/event/%s/track?%s' % (slug(event), keep_query('*', tags=str((search_tags - tag).ids)))"
                     class="btn border-0 py-1">
@@ -419,7 +419,7 @@
             slug(event),
             keep_query('*', tags=str((search_tags - tag).ids if tag in search_tags else (tag | search_tags).ids))
         )"
-        t-att-class="'badge %s' % ('badge-primary' if tag in search_tags else 'o_tag_color_hovered_0')"
+        t-att-class="'badge %s' % ('text-bg-primary' if tag in search_tags else 'o_tag_color_hovered_0')"
         t-out="tag.name"/>
     <a t-else=""
         t-att-href="'/event/%s/track?%s'% (
@@ -432,7 +432,7 @@
 
 <template id="track_tag_badge_info" name="Track: Tag Badge Info">
     <span t-if="search_tags"
-        t-att-class="'badge %s' % ('badge-primary' if tag in search_tags else 'o_tag_color_0')"
+        t-att-class="'badge %s' % ('text-bg-primary' if tag in search_tags else 'o_tag_color_0')"
         t-out="tag.name"/>
     <span t-else=""
         t-att-class="'badge o_tag_color_%s' % (tag.color)"
diff --git a/addons/website_event_track/views/event_track_templates_page.xml b/addons/website_event_track/views/event_track_templates_page.xml
index 8d9930a5a3f..f1d14167931 100644
--- a/addons/website_event_track/views/event_track_templates_page.xml
+++ b/addons/website_event_track/views/event_track_templates_page.xml
@@ -34,7 +34,7 @@
         <!-- LIVE INFORMATIONS -->
         <div t-if="not track.event_id.is_ongoing and track.event_id.start_remaining" class="pt-3">
             <div class="mx-3 alert alert-warning">
-                Event <span t-out="track.event_id.name" class="font-weight-bold"/>
+                Event <span t-out="track.event_id.name" class="fw-bold"/>
                 <span t-if="track.event_id.start_today">
                     starts in
                     <span t-if="track.event_id.start_remaining &gt;= 1" t-out="track.event_id.start_remaining"
@@ -107,22 +107,22 @@
                 <div class="mt-2 d-flex">
                     <span t-if="track.image" t-field="track.image" class="o_wevent_online_page_avatar"
                         t-options="{'widget': 'image', 'class': 'rounded-circle', 'max_width': '96'}"/>
-                    <div class="pl-2 pr-0 pr-md-2 d-flex flex-column">
-                        <span t-field="track.partner_name" class="font-weight-bold mb-2"/>
+                    <div class="ps-2 pe-0 pe-md-2 d-flex flex-column">
+                        <span t-field="track.partner_name" class="fw-bold mb-2"/>
                         <span class="mb-1 d-flex align-items-baseline text-break" t-if="track.partner_function">
-                            <i class="fa fa-briefcase mr-2"/><span t-out="track.partner_function"/>
+                            <i class="fa fa-briefcase me-2"/><span t-out="track.partner_function"/>
                             <t t-if="track.partner_company_name">
                                 <span>&amp;nbsp;at&amp;nbsp;</span><span t-out="track.partner_company_name"/>
                             </t>
                         </span>
                         <span class="mb-1 d-flex align-items-baseline text-break" t-if="track.partner_id.website">
-                            <i class="fa fa-home mr-2"/><a t-att-href="track.partner_id.website"><span t-field="track.partner_id.website"/></a>
+                            <i class="fa fa-home me-2"/><a t-att-href="track.partner_id.website"><span t-field="track.partner_id.website"/></a>
                         </span>
                         <span class="mb-1 d-flex align-items-baseline text-break" t-if="track.partner_email">
-                            <i class="fa fa-envelope mr-2"/><a t-att-mailto="track.partner_email"><span t-field="track.partner_email"/></a>
+                            <i class="fa fa-envelope me-2"/><a t-att-mailto="track.partner_email"><span t-field="track.partner_email"/></a>
                         </span>
                         <span class="mb-1 d-flex align-items-baseline text-break" t-if="track.partner_phone">
-                            <i class="fa fa-phone mr-2"/><span t-field="track.partner_phone"/>
+                            <i class="fa fa-phone me-2"/><span t-field="track.partner_phone"/>
                         </span>
                     </div>
                 </div>
@@ -139,7 +139,7 @@
 <!-- ============================================================ -->
 
 <template id="event_track_aside" name="Track: Aside">
-    <div t-att-class="'col-12 pl-0 pr-0 o_wevent_online_page_aside o_wesession_track_aside %s' % ('col-md-3 col-lg-2' if option_widescreen else 'col-md-4 col-lg-3')">
+    <div t-att-class="'col-12 ps-0 pe-0 o_wevent_online_page_aside o_wesession_track_aside %s' % ('col-md-3 col-lg-2' if option_widescreen else 'col-md-4 col-lg-3')">
         <div class="bg-white pt-0 pt-md-3 o_wevent_online_page_aside_content">
             <div class="mx-2" t-if="track.date and track.website_cta">
                 <t t-set="cta_coundown" t-value="bool(track.website_cta_start_remaining)"/>
@@ -165,12 +165,12 @@
             <div class="d-flex align-items-center justify-content-between mx-2">
                 <ul class="nav nav-tabs o_wesession_track_aside_nav d-flex border-0" role="tablist">
                     <li class="nav-item flex-grow-1">
-                        <a href="#track_list" aria-controls="track_list" class="nav-link active" role="tab" data-toggle="tab">
+                        <a href="#track_list" aria-controls="track_list" class="nav-link active" role="tab" data-bs-toggle="tab">
                             Talks
                         </a>
                     </li>
                 </ul>
-                <a href="#collapse_track_aside" data-toggle="collapse" class="d-md-none p-2 text-decoration-none o_wevent_online_page_aside_collapse collapsed">
+                <a href="#collapse_track_aside" data-bs-toggle="collapse" class="d-md-none p-2 text-decoration-none o_wevent_online_page_aside_collapse collapsed">
                     <i class="fa fa-chevron-down d-md-none"/>
                 </a>
             </div>
@@ -202,20 +202,20 @@
     <span t-out="track_other.name" class="w-100"/>
     <div class="d-flex align-items-center">
         <small class="text-muted" t-out="track_other.partner_name"/>
-        <div class="d-inline-block ml-auto o_wesession_track_aside_info text-truncate">
+        <div class="d-inline-block ms-auto o_wesession_track_aside_info text-truncate">
             <small t-if="not track_other.website_published and user_event_manager"
-                class="badge badge-danger">Unpublished</small>
+                class="badge text-bg-danger">Unpublished</small>
             <small t-if="track_other.is_track_live and not track_other.is_track_done"
-                class="badge badge-danger">Live</small>
+                class="badge text-bg-danger">Live</small>
             <small t-elif="track_other.is_track_done"
-                class="badge badge-light">Done</small>
+                class="badge text-bg-light">Done</small>
             <small t-elif="track_other.is_track_today and track_other.track_start_remaining"
-                class="badge badge-light">
+                class="badge text-bg-light">
                 <span t-out="track_other.track_start_remaining"
                     t-options="{'widget': 'duration', 'digital': False, 'add_direction': True,
                                 'unit': 'second', 'round': 'minute', 'format': 'narrow'}"/>
             </small>
-            <div t-elif="track_other.date" class="badge badge-light">
+            <div t-elif="track_other.date" class="badge text-bg-light">
                 <span t-out="track_other.date" t-options="{'widget': 'datetime', 'tz_name': track_other.event_id.date_tz, 'format': 'MMM. dd'}"/>
             </div>
         </div>
diff --git a/addons/website_event_track/views/event_track_templates_proposal.xml b/addons/website_event_track/views/event_track_templates_proposal.xml
index 86c79bbb203..81247a9a874 100644
--- a/addons/website_event_track/views/event_track_templates_proposal.xml
+++ b/addons/website_event_track/views/event_track_templates_proposal.xml
@@ -7,7 +7,7 @@
         <div class="container">
             <section class="pt48">
                 <h1 class="o_page_header">Call for Proposals</h1>
-                <h2 class="text-center text-secondary font-weight-bold my-4" t-out="event.name"/>
+                <h2 class="text-center text-secondary fw-bold my-4" t-out="event.name"/>
             </section>
             <section id="forms" t-if="not event.website_track_proposal">
                 <h1>Proposals are closed!</h1>
@@ -153,7 +153,7 @@
     <div id="event_track_proposal_additional_contact_section">
         <div class="mb-3">
             <input name="add_contact_information" type= "checkbox" class="o_wetrack_add_contact_information_checkbox"/>
-            <label class="font-weight-normal" for="add_contact_information">Contact me through a different email/phone</label>
+            <label class="fw-normal" for="add_contact_information">Contact me through a different email/phone</label>
         </div>
         <div class="o_wetrack_contact_information d-none">
             <h4><b>Contact Information</b></h4>
diff --git a/addons/website_event_track/views/event_track_views.xml b/addons/website_event_track/views/event_track_views.xml
index 3803af13a0d..7ff0cfabca1 100644
--- a/addons/website_event_track/views/event_track_views.xml
+++ b/addons/website_event_track/views/event_track_views.xml
@@ -47,7 +47,7 @@
                         <div t-attf-class="{{!selection_mode ? 'oe_kanban_color_' + kanban_getcolor(record.color.raw_value) : ''}} oe_kanban_card oe_kanban_global_click">
                             <div class="o_dropdown_kanban dropdown" groups="base.group_user">
 
-                                <a role="button" class="dropdown-toggle o-no-caret btn" data-toggle="dropdown" href="#" aria-label="Dropdown menu" title="Dropdown menu">
+                                <a role="button" class="dropdown-toggle o-no-caret btn" data-bs-toggle="dropdown" href="#" aria-label="Dropdown menu" title="Dropdown menu">
                                     <span class="fa fa-ellipsis-v"/>
                                 </a>
                                 <div class="dropdown-menu" role="menu">
@@ -164,7 +164,7 @@
                     <field name="legend_normal" invisible="1"/>
                     <field name="legend_done" invisible="1"/>
                     <widget name="web_ribbon" text="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
-                    <field name="kanban_state" widget="state_selection" class="ml-3 float-right"/>
+                    <field name="kanban_state" widget="state_selection" class="ms-3 float-end"/>
                     <field name="website_image" widget="image" class="oe_avatar"/>
                     <div class="oe_title">
                         <label for="name"/>
diff --git a/addons/website_event_track_live/static/src/xml/website_event_track_live_templates.xml b/addons/website_event_track_live/static/src/xml/website_event_track_live_templates.xml
index 558b7b9895b..d6e623cc2e0 100644
--- a/addons/website_event_track_live/static/src/xml/website_event_track_live_templates.xml
+++ b/addons/website_event_track_live/static/src/xml/website_event_track_live_templates.xml
@@ -9,7 +9,7 @@
             <div class="text-white">You just watched:</div>
             <div class="h1 text-white" t-out="widget.currentTrack.name"/>
             <div>
-                <a href="#" class="owevent_track_suggestion_replay font-weight-bold">
+                <a href="#" class="owevent_track_suggestion_replay fw-bold">
                     <span>Replay Video</span>
                 </a>
             </div>
@@ -25,18 +25,18 @@
             <div class="text-white">You just watched:</div>
             <div class="h1 text-white" t-out="widget.currentTrack.name"/>
             <div>
-                <a href="#" class="owevent_track_suggestion_replay font-weight-bold">
+                <a href="#" class="owevent_track_suggestion_replay fw-bold">
                     <span>Replay Video</span>
                 </a>
             </div>
         </div>
         <div class="d-flex w-100 flex-column align-items-end">
             <div class="p-2 rounded owevent_track_suggestion_next position-relative">
-                <div class="text-white text-right owevent_track_suggestion_close_wrapper">
+                <div class="text-white text-end owevent_track_suggestion_close_wrapper">
                     <i class="fa fa-remove owevent_track_suggestion_close position-absolute"/>
                 </div>
                 <span class="text-white">Up Next:</span>
-                <span class="text-primary font-weight-bold pr-4" t-out="widget.suggestion.name"/>
+                <span class="text-primary fw-bold pe-4" t-out="widget.suggestion.name"/>
                 <div class="text-white owevent_track_suggestion_timer_text_wrapper">
                     <span>Starts in</span>
                     <span class="owevent_track_suggestion_timer_text">30</span>
diff --git a/addons/website_event_track_live/views/event_track_templates_list.xml b/addons/website_event_track_live/views/event_track_templates_list.xml
index 75938cb0ac0..c8e0e6351b6 100644
--- a/addons/website_event_track_live/views/event_track_templates_list.xml
+++ b/addons/website_event_track_live/views/event_track_templates_list.xml
@@ -5,17 +5,17 @@
     <!-- TRACK LIST: ADD REPLAY TAG FOR FINISHED TRACKS -->
     <xpath expr="//div[@t-foreach='tracks']//div[hasclass('col-md-7')]//span[@t-elif='not track.is_track_done and not track.is_track_soon']" position="after">
         <a t-elif="track.youtube_video_url and (track.is_published or is_event_user)"
-            t-att-href="track.website_url" class="badge badge-danger ml-2">Replay
+            t-att-href="track.website_url" class="badge text-bg-danger ms-2">Replay
         </a>
     </xpath>
     <!-- ADD YOUTUBE ICON -->
     <xpath expr="//div[@t-foreach='tracks']//div[hasclass('col-md-7')]//a/span[@t-field='track.name']" position="before">
         <i t-if="track.date and track.youtube_video_url and (track.is_track_soon or track.is_track_live or track.is_youtube_replay)"
-            class="fa fa-youtube-play text-danger mr-1"/>
+            class="fa fa-youtube-play text-danger me-1"/>
     </xpath>
     <xpath expr="//div[@t-foreach='tracks']//div[hasclass('col-md-7')]//t/span[@t-field='track.name']" position="before">
         <i t-if="track.date and track.youtube_video_url and (track.is_track_soon or track.is_track_live or track.is_youtube_replay)"
-            class="fa fa-youtube-play text-danger mr-1"/>
+            class="fa fa-youtube-play text-danger me-1"/>
     </xpath>
 </template>
 
diff --git a/addons/website_event_track_live/views/event_track_templates_page.xml b/addons/website_event_track_live/views/event_track_templates_page.xml
index 81eb1a2f171..1c6a653b001 100644
--- a/addons/website_event_track_live/views/event_track_templates_page.xml
+++ b/addons/website_event_track_live/views/event_track_templates_page.xml
@@ -25,7 +25,7 @@
             t-att-data-youtube-video-id="track.youtube_video_id">
             <div class="position-absolute o_wevent_event_track_live_loading w-100 d-flex align-items-center justify-content-center text-white h4">
                 <i class="fa fa-spin fa-circle-o-notch position-relative"/>
-                <span class="pl-2">Loading Video...</span>
+                <span class="ps-2">Loading Video...</span>
             </div>
             <div id="o_wevent_youtube_iframe_container" class="w-100"/>
         </div>
@@ -36,7 +36,7 @@
 <template id="event_track_aside" inherit_id="website_event_track.event_track_aside">
     <xpath expr="//ul[hasclass('o_wesession_track_aside_nav')]/li" position="before">
         <li t-if="track.is_youtube_chat_available and not is_mobile_chat_disabled" class="nav-item flex-grow-1">
-            <a href="#track_chat" aria-controls="track_chat" class="nav-link active" role="tab" data-toggle="tab">
+            <a href="#track_chat" aria-controls="track_chat" class="nav-link active" role="tab" data-bs-toggle="tab">
                 Chat
             </a>
         </li>
diff --git a/addons/website_event_track_live_quiz/static/src/xml/website_event_track_live_templates.xml b/addons/website_event_track_live_quiz/static/src/xml/website_event_track_live_templates.xml
index 91c37f78bc0..492f0e92790 100644
--- a/addons/website_event_track_live_quiz/static/src/xml/website_event_track_live_templates.xml
+++ b/addons/website_event_track_live_quiz/static/src/xml/website_event_track_live_templates.xml
@@ -3,7 +3,7 @@
 
 <t t-extend="website_event_track_live.website_event_track_suggestion">
     <t t-jquery="a.owevent_track_suggestion_replay" t-operation="before">
-        <a t-if="widget.currentTrack.showQuiz" class="btn btn-primary btn-lg mr-2 owevent_track_suggestion_quiz"
+        <a t-if="widget.currentTrack.showQuiz" class="btn btn-primary btn-lg me-2 owevent_track_suggestion_quiz"
            href="#we_track_quiz_container"
            onclick="$('.o_quiz_js_quiz_container').removeClass('d-none');">
             <span>Take the Quiz</span>
diff --git a/addons/website_event_track_quiz/static/src/scss/event_quiz.scss b/addons/website_event_track_quiz/static/src/scss/event_quiz.scss
index ca441d4df4d..3bb1d3decef 100644
--- a/addons/website_event_track_quiz/static/src/scss/event_quiz.scss
+++ b/addons/website_event_track_quiz/static/src/scss/event_quiz.scss
@@ -77,7 +77,8 @@ $o-wslides-fs-side-width: 300px;
 
         &:before, &:after {
             content: "";
-            @include size(6px);
+            width: 6px;
+            height: 6px;
             display: block;
             border-radius: 100%;
             background-color: inherit;
diff --git a/addons/website_event_track_quiz/static/src/xml/quiz_templates.xml b/addons/website_event_track_quiz/static/src/xml/quiz_templates.xml
index 5971fa500aa..2194cc889b5 100644
--- a/addons/website_event_track_quiz/static/src/xml/quiz_templates.xml
+++ b/addons/website_event_track_quiz/static/src/xml/quiz_templates.xml
@@ -15,7 +15,7 @@
                                 t-att-data-text="answer.text_value"
                                 t-attf-class="o_quiz_quiz_answer list-group-item d-flex align-items-center list-group-item-action #{widget.track.completed  &amp;&amp; answer.is_correct ? 'list-group-item-success' : '' }">
 
-                                <label class="my-0 d-flex align-items-center justify-content-center mr-2">
+                                <label class="my-0 d-flex align-items-center justify-content-center me-2">
                                     <input type="radio"
                                         t-att-name="question.id"
                                         t-att-value="answer.id"
@@ -34,7 +34,7 @@
     </t>
 
     <t t-name="quiz.badge">
-        <span class="badge badge-warning ml-2">
+        <span class="badge text-bg-warning ms-2">
             <span>+ <t t-out="answer.awarded_points"/></span>
             <span t-if="answer.awarded_points == 1">Point</span>
             <span t-else="">Points</span>
@@ -68,16 +68,16 @@
         <div id="validation" class="d-md-flex">
             <div class="flex-grow-1">
                 <button t-if="!widget.track.completed" role="button" title="Check answers" aria-label="Check answers"
-                    class="btn btn-primary text-uppercase font-weight-bold o_quiz_js_quiz_submit">
+                    class="btn btn-primary text-uppercase fw-bold o_quiz_js_quiz_submit">
                     Check your answers
                 </button>
                 <t t-else="">
-                    <div t-if="widget.quiz.quizPointsGained > 0" class="alert alert-warning mr-md-3">
-                        Congratulations, you scored a total of <span t-out="widget.quiz.quizPointsGained" class="font-weight-bold"/>
+                    <div t-if="widget.quiz.quizPointsGained > 0" class="alert alert-warning me-md-3">
+                        Congratulations, you scored a total of <span t-out="widget.quiz.quizPointsGained" class="fw-bold"/>
                         <span t-if="widget.quiz.quizPointsGained == 1">point!</span>
                         <span t-else="">points!</span>
                     </div>
-                    <div t-else="" class="alert alert-warning mr-md-3">
+                    <div t-else="" class="alert alert-warning me-md-3">
                         Oopsie, you did not score any point on this quiz.
                     </div>
                 </t>
diff --git a/addons/website_event_track_quiz/views/event_leaderboard_templates.xml b/addons/website_event_track_quiz/views/event_leaderboard_templates.xml
index 2a07ee3d371..cadf76d8983 100644
--- a/addons/website_event_track_quiz/views/event_leaderboard_templates.xml
+++ b/addons/website_event_track_quiz/views/event_leaderboard_templates.xml
@@ -27,13 +27,13 @@
             <div class='alert alert-warning mt32'>No user found for <strong><t t-out="search"/></strong>. Try another search.</div>
         </div>
         <div t-if="not visitors and not search" class="vh-100 bg-light d-flex justify-content-center align-items-center">
-            <h4 class="text-muted font-weight-bold">There is currently no leaderboard available</h4>
+            <h4 class="text-muted fw-bold">There is currently no leaderboard available</h4>
         </div>
     </t>
 </template>
 
 <template id="pager_nobox" name="Pager (not box display)">
-    <ul t-if="pager['page_count'] > 1" t-attf-class="o_wprofile_pager font-weight-bold pagination m-0">
+    <ul t-if="pager['page_count'] > 1" t-attf-class="o_wprofile_pager fw-bold pagination m-0">
         <li t-attf-class="page-item o_wprofile_pager_arrow #{'disabled' if pager['page']['num'] == 1 else ''}">
             <a t-att-href=" pager['page_first']['url'] if pager['page']['num'] != 1 else None" class="page-link"><i class="fa fa-step-backward"/></a>
         </li>
@@ -71,7 +71,7 @@
 </template>
 
 <template id="all_visitor_card" name="All VIsitor Card">
-    <td class="align-middle text-right text-muted" style="width: 0">
+    <td class="align-middle text-end text-muted" style="width: 0">
         <span t-out="visitor['position']"/>
     </td>
     <td class="align-middle d-none d-sm-table-cell">
@@ -81,11 +81,11 @@
         t-att-src="image_data_uri(visitor['visitor'].partner_image) if visitor['visitor'].partner_image else '/web/static/img/user_placeholder.jpg'"/>
     </td>
     <td class="align-middle w-md-75">
-        <span t-if="visitor['visitor'] == current_visitor and not visitor['visitor'].partner_id" class="font-weight-bold">You</span>
-        <span t-else="" class="font-weight-bold" t-out="visitor['visitor'].display_name"/><br/>
+        <span t-if="visitor['visitor'] == current_visitor and not visitor['visitor'].partner_id" class="fw-bold">You</span>
+        <span t-else="" class="fw-bold" t-out="visitor['visitor'].display_name"/><br/>
     </td>
-    <td class="align-middle font-weight-bold text-right text-nowrap">
-        <b t-out="visitor['points']"/> <span class="text-muted small font-weight-bold">Points</span>
+    <td class="align-middle fw-bold text-end text-nowrap">
+        <b t-out="visitor['points']"/> <span class="text-muted small fw-bold">Points</span>
     </td>
 </template>
 
@@ -97,8 +97,8 @@
             <div class="col d-none d-md-flex flex-row align-items-center justify-content-end">
                 <!-- search -->
                 <form t-attf-action="#{'/event/%s/community/leaderboard/results' % (slug(event))}" role="search" method="get">
-                    <div class="input-group ml-1 position-relative">
-                        <button class="btn btn-link text-white rounded-0 pr-1" type="submit" aria-label="Search" title="Search">
+                    <div class="input-group ms-1 position-relative">
+                        <button class="btn btn-link text-white rounded-0 pe-1" type="submit" aria-label="Search" title="Search">
                             <i class="fa fa-search"></i>
                         </button>
                         <input type="text" class="form-control rounded-0" name="search" placeholder="Search Attendees" t-att-value="searched_name or ''"/>
@@ -110,9 +110,9 @@
             <div class="col d-md-none py-1 o_wprofile_user_profile_sub_nav_mobile_col">
                 <div class="btn-group w-100 position-relative" role="group" aria-label="Mobile sub-nav">
 
-                    <div class="btn-group ml-1 position-static mr-2">
-                        <a class="btn bg-black-25 text-white dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-search"></i></a>
-                        <div class="dropdown-menu dropdown-menu-right w-100" style="right: 10px;">
+                    <div class="btn-group ms-1 position-static me-2">
+                        <a class="btn bg-black-25 text-white dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-search"></i></a>
+                        <div class="dropdown-menu dropdown-menu-end w-100" style="right: 10px;">
                             <form class="px-3" t-attf-action="#{'/event/%s/community/leaderboard' % (slug(event))}" role="search" method="get">
                                 <div class="input-group">
                                     <input type="text" class="form-control" name="search" placeholder="Search courses"/>
diff --git a/addons/website_event_track_quiz/views/event_quiz_templates.xml b/addons/website_event_track_quiz/views/event_quiz_templates.xml
index 8b3508e9133..524fd7fa070 100644
--- a/addons/website_event_track_quiz/views/event_quiz_templates.xml
+++ b/addons/website_event_track_quiz/views/event_quiz_templates.xml
@@ -31,7 +31,7 @@
                     <a t-att-data-answer-id="answer['id']" href="#"
                         t-att-data-text="answer['text_value']"
                         class="o_quiz_quiz_answer list-group-item list-group-item-action d-flex align-items-center">
-                        <label class="my-0 d-flex align-items-center justify-content-center mr-2">
+                        <label class="my-0 d-flex align-items-center justify-content-center me-2">
                             <input type="radio"
                                 t-att-name="question['id']"
                                 t-att-value="answer['id']"
diff --git a/addons/website_event_track_quiz/views/event_track_templates_page.xml b/addons/website_event_track_quiz/views/event_track_templates_page.xml
index 2a50df5e61c..6d425fad012 100644
--- a/addons/website_event_track_quiz/views/event_track_templates_page.xml
+++ b/addons/website_event_track_quiz/views/event_track_templates_page.xml
@@ -17,7 +17,7 @@
         </div>
     </xpath>
     <xpath expr="//div[hasclass('o_we_track_reminder_button')]" position="before">
-        <div class="o_we_track_quiz_button mr-2 my-1" t-if="track.quiz_id and not track.is_quiz_completed and not track.is_track_upcoming">
+        <div class="o_we_track_quiz_button me-2 my-1" t-if="track.quiz_id and not track.is_quiz_completed and not track.is_track_upcoming">
             <a class="btn btn-primary" href="#we_track_quiz_container" onclick="$('.o_quiz_js_quiz_container').removeClass('d-none'); ">
                 Take the Quiz
             </a>
diff --git a/addons/website_forum/data/forum_default_faq.xml b/addons/website_forum/data/forum_default_faq.xml
index d53d6df2f03..82059a2b5a3 100644
--- a/addons/website_forum/data/forum_default_faq.xml
+++ b/addons/website_forum/data/forum_default_faq.xml
@@ -9,10 +9,10 @@
                     <div class="container">
                         <div id="myCollapse" class="accordion" role="tablist">
                             <div class="card bg-white" data-name="Item">
-                                <a href="#" role="tab" data-toggle="collapse" aria-expanded="false" class="collapsed card-header" data-target="#collapse1">
+                                <a href="#" role="tab" data-bs-toggle="collapse" aria-expanded="false" class="collapsed card-header" data-bs-target="#collapse1">
                                     <b>What kinds of questions can I ask here?</b>
                                 </a>
-                                <div id="collapse1" class="collapse" data-parent="#myCollapse" role="tabpanel">
+                                <div id="collapse1" class="collapse" data-bs-parent="#myCollapse" role="tabpanel">
                                     <div class="card-body">
                                         <p>This community is for professional and enthusiast users, partners and programmers. You can ask questions about:</p>
                                         <ul>
@@ -28,10 +28,10 @@
                                 </div>
                             </div>
                             <div class="card bg-white" data-name="Item">
-                                <a href="#" role="tab" data-toggle="collapse" aria-expanded="false" class="collapsed card-header" data-target="#collapse2">
+                                <a href="#" role="tab" data-bs-toggle="collapse" aria-expanded="false" class="collapsed card-header" data-bs-target="#collapse2">
                                     <b>What should I avoid in my questions?</b>
                                 </a>
-                                <div id="collapse2" class="collapse" data-parent="#myCollapse" role="tabpanel">
+                                <div id="collapse2" class="collapse" data-bs-parent="#myCollapse" role="tabpanel">
                                     <div class="card-body">
                                         <p>You should only ask practical, answerable questions based on actual problems that you face. Chatty, open-ended questions diminish the usefulness of this site and push other questions off the front page.</p>
                                         <p>To prevent your question from being flagged and possibly removed, avoid asking subjective questions where …</p>
@@ -55,10 +55,10 @@
                                 </div>
                             </div>
                             <div class="card bg-white" data-name="Item">
-                                <a href="#" role="tab" data-toggle="collapse" aria-expanded="false" class="collapsed card-header" data-target="#collapse3">
+                                <a href="#" role="tab" data-bs-toggle="collapse" aria-expanded="false" class="collapsed card-header" data-bs-target="#collapse3">
                                     <b>What should I avoid in my answers?</b>
                                 </a>
-                                <div id="collapse3" class="collapse"  data-parent="#myCollapse" role="tabpanel">
+                                <div id="collapse3" class="collapse"  data-bs-parent="#myCollapse" role="tabpanel">
                                     <div class="card-body">
                                         <p><b>Answers should not add or expand questions</b>. Insteadeither edit the question or add a comment.</p>
                                         <p><b>Answers should not comment other answers</b>. Instead add a comment on the other answers.</p>
@@ -71,10 +71,10 @@
                                 </div>
                             </div>
                             <div class="card bg-white" data-name="Item">
-                                <a href="#" role="tab" data-toggle="collapse" aria-expanded="false" class="collapsed card-header" data-target="#collapse4">
+                                <a href="#" role="tab" data-bs-toggle="collapse" aria-expanded="false" class="collapsed card-header" data-bs-target="#collapse4">
                                     <b>Why can other people edit my questions/answers?</b>
                                 </a>
-                                <div id="collapse4" class="collapse" data-parent="#myCollapse" role="tabpanel">
+                                <div id="collapse4" class="collapse" data-bs-parent="#myCollapse" role="tabpanel">
                                     <div class="card-body">
                                         <p>The goal of this site is create a relevant knowledge base that would answer questions related to Odoo.</p>
                                         <p>Therefore questions and answers can be edited like wiki pages by experienced users of this site in order to improve the overall quality of the knowledge base content. Such privileges are granted based on user karma level: you will be able to do the same once your karma gets high enough.</p>
diff --git a/addons/website_forum/static/src/js/tours/website_forum.js b/addons/website_forum/static/src/js/tours/website_forum.js
index 8aeaabe6014..a9f22ba8bb1 100644
--- a/addons/website_forum/static/src/js/tours/website_forum.js
+++ b/addons/website_forum/static/src/js/tours/website_forum.js
@@ -38,7 +38,7 @@ odoo.define("website_forum.tour_forum", function (require) {
         position: "bottom",
     }, {
         extra_trigger: 'div.modal.modal_shown',
-        trigger: ".modal-header button.close",
+        trigger: ".modal-header button.btn-close",
         auto: true,
     },
     {
@@ -58,7 +58,7 @@ odoo.define("website_forum.tour_forum", function (require) {
         position: "bottom",
     }, {
         extra_trigger: 'div.modal.modal_shown',
-        trigger: ".modal-header button.close",
+        trigger: ".modal-header button.btn-close",
         auto: true,
     }, {
         trigger: ".o_wforum_validate_toggler[data-karma]:first",
diff --git a/addons/website_forum/static/src/js/website_forum.js b/addons/website_forum/static/src/js/website_forum.js
index 5f87484531f..ed8d9192719 100644
--- a/addons/website_forum/static/src/js/website_forum.js
+++ b/addons/website_forum/static/src/js/website_forum.js
@@ -45,8 +45,8 @@ publicWidget.registry.websiteForum = publicWidget.Widget.extend({
 
         this.lastsearch = [];
 
-        // float-left class messes up the post layout OPW 769721
-        $('span[data-oe-model="forum.post"][data-oe-field="content"]').find('img.float-left').removeClass('float-left');
+        // float-start class messes up the post layout OPW 769721
+        $('span[data-oe-model="forum.post"][data-oe-field="content"]').find('img.float-start').removeClass('float-start');
 
         // welcome message action button
         var forumLogin = _.string.sprintf('%s/web?redirect=%s',
@@ -56,8 +56,8 @@ publicWidget.registry.websiteForum = publicWidget.Widget.extend({
         $('.forum_register_url').attr('href', forumLogin);
 
         // Initialize forum's tooltips
-        this.$('[data-toggle="tooltip"]').tooltip({delay: 0});
-        this.$('[data-toggle="popover"]').popover({offset: 8});
+        this.$('[data-bs-toggle="tooltip"]').tooltip({delay: 0});
+        this.$('[data-bs-toggle="popover"]').popover({offset: 8});
 
         $('input.js_select2').select2({
             tags: true,
@@ -147,8 +147,8 @@ publicWidget.registry.websiteForum = publicWidget.Widget.extend({
                 if (!hasFullEdit) {
                     wysiwyg.toolbar.$el.find('#link, #media').remove();
                 }
-                // float-left class messes up the post layout OPW 769721
-                $form.find('.note-editable').find('img.float-left').removeClass('float-left');
+                // float-start class messes up the post layout OPW 769721
+                $form.find('.note-editable').find('img.float-start').removeClass('float-start');
             });
         });
 
@@ -457,7 +457,7 @@ publicWidget.registry.websiteForum = publicWidget.Widget.extend({
 
                     $answer.toggleClass('o_wforum_answer_correct', isCorrect);
                     $toggler.tooltip('dispose')
-                            .attr('data-original-title', newHelper)
+                            .attr('data-bs-original-title', newHelper)
                             .tooltip({delay: 0});
                 });
             }
@@ -622,7 +622,7 @@ publicWidget.registry.websiteForumSpam = publicWidget.Widget.extend({
      */
     _onMarkSpamClick: function (ev) {
         var key = this.$('.modal .tab-pane.active').data('key');
-        var $inputs = this.$('.modal .tab-pane.active input.custom-control-input:checked');
+        var $inputs = this.$('.modal .tab-pane.active input.form-check-input:checked');
         var values = _.map($inputs, function (o) {
             return parseInt(o.value);
         });
diff --git a/addons/website_forum/static/src/scss/website_forum.scss b/addons/website_forum/static/src/scss/website_forum.scss
index f3b827135a9..248c02c6f3f 100644
--- a/addons/website_forum/static/src/scss/website_forum.scss
+++ b/addons/website_forum/static/src/scss/website_forum.scss
@@ -25,12 +25,13 @@ $bronze: #eea91e;
         }
 
         &.active {
-            background-color: rgba(theme-color('info'), 0.1);
-            color: darken(theme-color('info'), 15%)!important;
+            background-color: rgba(map-get($theme-colors, 'info'), 0.1);
+            color: darken(map-get($theme-colors, 'info'), 15%)!important;
         }
 
         img.o_forum_avatar {
-            @include size(30px);
+            width: 30px;
+            height: 30px;
         }
     }
 
@@ -39,23 +40,24 @@ $bronze: #eea91e;
         word-wrap: break-word;
 
         pre {
-            color: color-contrast(gray('100'));
+            color: color-contrast(map-get($grays, '100'));
             border-radius: $border-radius;
             padding: 1rem;
-            background-color: gray('100');
+            background-color: map-get($grays, '100');
             white-space: pre-wrap;
         }
 
         blockquote {
             position: relative;
             padding-left: 1em;
-            border-left: .25em solid gray('500');
-            color: gray('600');
+            border-left: .25em solid map-get($grays, '500');
+            color: map-get($grays, '600');
         }
 
         #post_reply {
             img.o_forum_avatar {
-                @include size(24px);
+                width: 24px;
+                height: 24px;
             }
         }
     }
@@ -101,7 +103,8 @@ $bronze: #eea91e;
         &.o_show_info {
             line-height: 1.2;
             img {
-                @include size(2em);
+                width: 2em;
+                height: 2em;
             }
         }
 
@@ -109,7 +112,8 @@ $bronze: #eea91e;
             line-height: 1;
 
             img {
-                @include size(1.4em);
+                width: 1.4em;
+                height: 1.4em;
             }
         }
 
@@ -121,7 +125,8 @@ $bronze: #eea91e;
         }
 
         .o_wforum_author_box_check {
-            @include size(1em);
+            width: 1em;
+            height: 1em;
             display: none;
             top: 0;
             right: -3px;
@@ -130,7 +135,7 @@ $bronze: #eea91e;
         }
 
         .o_wforum_validate_toggler {
-            @include o-hover-text-color(gray('400'), lighten(theme-color('success'), 20%));
+            @include o-hover-text-color(map-get($grays, '400'), lighten(map-get($theme-colors, 'success'), 20%));
         }
 
         &.o_wforum_answer_correct {
@@ -139,7 +144,7 @@ $bronze: #eea91e;
             }
 
             .o_wforum_validate_toggler {
-                @include o-hover-text-color(theme-color('success'), theme-color('warning'));
+                @include o-hover-text-color(map-get($theme-colors, 'success'), map-get($theme-colors, 'warning'));
 
                 &:hover .fa.fa-check:before {
                     content: '\f00d';
@@ -183,11 +188,11 @@ $bronze: #eea91e;
         .vote_down, .vote_up {
             line-height: 0.5;
             font-size: 1.1em;
-            @include o-hover-text-color(rgba($text-muted, 0.5), theme-color('success'));
+            @include o-hover-text-color(rgba($text-muted, 0.5), map-get($theme-colors, 'success'));
         }
 
         .vote_down {
-            @include o-hover-text-color(rgba($text-muted, 0.5), theme-color('danger'));
+            @include o-hover-text-color(rgba($text-muted, 0.5), map-get($theme-colors, 'danger'));
         }
 
         &.o_wforum_vote_vertical {
@@ -219,18 +224,21 @@ $bronze: #eea91e;
 }
 
 img.o_forum_avatar {
-    @include size(40px);
+    width: 40px;
+    height: 40px;
     object-fit: cover;
 }
 
 img.o_forum_avatar_big {
-    @include size(75px);
+    width: 75px;
+    height: 75px;
     object-fit: cover;
 }
 
 .o_wprofile_email_validation_container {
     img.o_forum_avatar {
-        @include size(16px);
+        width: 16px;
+        height: 16px;
     }
 }
 
@@ -257,7 +265,7 @@ img.o_forum_avatar_big {
 
 .o_wforum_elearning_navtabs_container {
     @include media-breakpoint-up(md) {
-        background-color: theme-color('secondary');
+        background-color: map-get($theme-colors, 'secondary');
     }
 }
 
@@ -270,7 +278,7 @@ img.o_forum_avatar_big {
 }
 
 .o_wforum_forum_card_bg {
-    background-image: linear-gradient(99deg, theme-color('secondary') 10%, darken(theme-color('secondary'), 10%) 90%);
+    background-image: linear-gradient(99deg, map-get($theme-colors, 'secondary') 10%, darken(map-get($theme-colors, 'secondary'), 10%) 90%);
 
     #o_wforum_forums_index_list & {
         min-height: 100px;
diff --git a/addons/website_forum/static/src/xml/public_templates.xml b/addons/website_forum/static/src/xml/public_templates.xml
index b9c1f50b685..18c32a3e126 100644
--- a/addons/website_forum/static/src/xml/public_templates.xml
+++ b/addons/website_forum/static/src/xml/public_templates.xml
@@ -5,9 +5,7 @@
                 <div class="modal-content">
                     <header class="modal-header alert alert-info mb0" role="status">
                         <h4 class="modal-title">Thanks for posting!</h4>
-                        <button type="button" class="close" data-dismiss="modal">
-                            <span role="img" aria-label="Close">x</span>
-                        </button>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                     </header>
                     <main class="modal-body">
                         <t t-if="target_type == 'question'" t-call="website_forum.social_message_question"/>
@@ -30,9 +28,9 @@
         <t t-foreach="posts" t-as="post">
             <div class="card mb-1 o_spam_character">
                 <div class="card-body py-2">
-                    <div class="custom-control custom-checkbox">
-                        <input type="checkbox" class="custom-control-input" t-attf-id="post_#{post.id}" t-att-value='post.id' checked='checked'/>
-                        <label class="custom-control-label" t-attf-for="post_#{post.id}">
+                    <div class="custom-control form-check">
+                        <input type="checkbox" class="form-check-input" t-attf-id="post_#{post.id}" t-att-value='post.id' checked='checked'/>
+                        <label class="form-check-label" t-attf-for="post_#{post.id}">
                             <b><t t-esc="post.name" /></b>
                             <p class='text-muted'><t t-esc="post.content" /></p>
                         </label>
@@ -58,9 +56,7 @@
 
     <t t-name="website.social_alert">
         <div class="alert alert-info alert-dismissable" role="status">
-            <button type="button" class="close" data-dismiss="alert">
-                <span role="img" aria-label="Close">&#215;</span>
-            </button>
+            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
             <p>Move this question to the top of the list by sharing it on social networks.</p><br/>
             <div>
                 <t t-foreach="medias" t-as="media">
diff --git a/addons/website_forum/static/tests/tours/website_forum_question.js b/addons/website_forum/static/tests/tours/website_forum_question.js
index 33b15ffc758..8bd8d5fbdc0 100644
--- a/addons/website_forum/static/tests/tours/website_forum_question.js
+++ b/addons/website_forum/static/tests/tours/website_forum_question.js
@@ -34,7 +34,7 @@ odoo.define('website_forum.tour_forum_question', function (require) {
     }, {
         content: "Close modal once modal animation is done.",
         extra_trigger: 'div.modal.modal_shown',
-        trigger: ".modal-header button.close",
+        trigger: ".modal-header button.btn-close",
     },
     {
         trigger: "a:contains(\"Answer\").collapsed",
@@ -52,7 +52,7 @@ odoo.define('website_forum.tour_forum_question', function (require) {
     }, {
         content: "Close modal once modal animation is done.",
         extra_trigger: 'div.modal.modal_shown',
-        trigger: ".modal-header button.close",
+        trigger: ".modal-header button.btn-close",
     }, {
         content: "Click here to accept this answer.",
         extra_trigger: '#wrap:has(".o_wforum_validate_toggler")',
diff --git a/addons/website_forum/views/ir_qweb.xml b/addons/website_forum/views/ir_qweb.xml
index c0e8f9c4704..ca0a319d2bf 100644
--- a/addons/website_forum/views/ir_qweb.xml
+++ b/addons/website_forum/views/ir_qweb.xml
@@ -14,11 +14,11 @@
                 <div t-if="options.get('badges')" style="display: inline-block">
                     <t t-esc="separator"/>
                     <b>|</b>
-                    <span class="fa fa-trophy bg-gold ml-2" role="img" aria-label="Gold badge" title="Gold badge"/>
+                    <span class="fa fa-trophy bg-gold ms-2" role="img" aria-label="Gold badge" title="Gold badge"/>
                     <t t-esc="object.gold_badge"/>
-                    <span class="fa fa-trophy bg-silver ml-2" role="img" aria-label="Silver badge" title="Silver badge"/>
+                    <span class="fa fa-trophy bg-silver ms-2" role="img" aria-label="Silver badge" title="Silver badge"/>
                     <t t-esc="object.silver_badge"/>
-                    <span class="fa fa-trophy bg-bronze ml-2" role="img" aria-label="Bronze badge" title="Bronze badge"/>
+                    <span class="fa fa-trophy bg-bronze ms-2" role="img" aria-label="Bronze badge" title="Bronze badge"/>
                     <t t-esc="object.bronze_badge"/>
                 </div>
                 <t t-out="0"/>
diff --git a/addons/website_forum/views/website_forum.xml b/addons/website_forum/views/website_forum.xml
index fa5d51b0019..3f55b45a3b7 100644
--- a/addons/website_forum/views/website_forum.xml
+++ b/addons/website_forum/views/website_forum.xml
@@ -5,10 +5,10 @@
 <!-- Editor custom -->
 <!-- helper -->
 <template id="show_flag_validator">
-    <a href="#" t-att-data-post-id="object.id" t-attf-data-action="validate" t-attf-class="#{'' if object.state == 'flagged' else 'd-none'} flag_validator badge badge-light my-2 mr-2 o_wforum_flag_validator" title="Validate" data-bs-toggle="tooltip">
+    <a href="#" t-att-data-post-id="object.id" t-attf-data-action="validate" t-attf-class="#{'' if object.state == 'flagged' else 'd-none'} flag_validator badge text-bg-light my-2 me-2 o_wforum_flag_validator" title="Validate" data-bs-toggle="tooltip">
         <i class="fa fa-check text-success"/>
     </a>
-    <a href="#" t-attf-data-action="/forum/#{object.id}/ask_for_mark_as_offensive" t-attf-class="#{'' if object.state == 'flagged' else 'd-none'} flag_validator badge badge-light my-2 mr-2 o_wforum_flag_mark_as_offensive" title="Mark as Offensive"  data-bs-toggle="tooltip">
+    <a href="#" t-attf-data-action="/forum/#{object.id}/ask_for_mark_as_offensive" t-attf-class="#{'' if object.state == 'flagged' else 'd-none'} flag_validator badge text-bg-light my-2 me-2 o_wforum_flag_mark_as_offensive" title="Mark as Offensive"  data-bs-toggle="tooltip">
         <i class="fa fa-times text-danger"/>
     </a>
 </template>
@@ -17,8 +17,8 @@
     <form  t-attf-method="#{form_method or 'POST'}" t-att-action="url" t-attf-class="#{form_classes} #{not inDropdown and 'btn btn-sm border'}">
         <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
         <div class="input-group">
-            <button t-attf-class="#{icon and not label and ('fa ' + icon)} #{inDropdown and 'dropdown-item pl-3' or 'btn btn-sm p-0'} #{classes} #{karma and 'karma_required text-muted'}" t-attf-data-karma="#{karma}" t-att-title="title">
-                <i t-if="icon and label" t-attf-class="fa fa-fw text-muted #{icon} #{inDropdown and 'mr-1'}"/>
+            <button t-attf-class="#{icon and not label and ('fa ' + icon)} #{inDropdown and 'dropdown-item ps-3' or 'btn btn-sm p-0'} #{classes} #{karma and 'karma_required text-muted'}" t-attf-data-karma="#{karma}" t-att-title="title">
+                <i t-if="icon and label" t-attf-class="fa fa-fw text-muted #{icon} #{inDropdown and 'me-1'}"/>
                 <t t-esc="label"/>
             </button>
             <t t-if="flag_validator" t-call="website_forum.show_flag_validator"/>
@@ -126,11 +126,11 @@
 <template id="forum_nav_header">
     <div class="navbar navbar-expand-sm navbar-light">
         <div class="container flex-wrap flex-md-nowrap">
-            <a t-if="has_back_button_url" class="btn btn-light border mr-2 o_back_button" title="Back">
-                <i class="fa fa-chevron-left mr-1"/>Back
+            <a t-if="has_back_button_url" class="btn btn-light border me-2 o_back_button" title="Back">
+                <i class="fa fa-chevron-left me-1"/>Back
             </a>
             <!-- Desktop -->
-            <ul class="navbar-nav mr-auto d-none d-lg-flex">
+            <ul class="navbar-nav me-auto d-none d-lg-flex">
                 <li class="nav-item">
                     <a t-if="request.website.forums_count > 1" class="nav-link" href="/forum/" title="All forums">
                         All Forums
@@ -157,9 +157,9 @@
 
             <!-- Mobile -->
             <ul class="navbar-nav d-lg-none flex-row flex-grow-1 justify-content-between">
-                <span class="navbar-text mr-1">Go to:</span>
-                <li class="nav-item dropdown mr-auto">
-                    <a class="nav-link active dropdown-toggle" type="button" data-toggle="dropdown">
+                <span class="navbar-text me-1">Go to:</span>
+                <li class="nav-item dropdown me-auto">
+                    <a class="nav-link active dropdown-toggle" type="button" data-bs-toggle="dropdown">
                         <t t-if="searches.get('users')">People</t>
                         <t t-elif="searches.get('tags')">Tags</t>
                         <t t-elif="searches.get('badges')">Badges</t>
@@ -196,7 +196,7 @@
                             <b t-esc="forum.count_posts_waiting_validation" class="text-800"/>
                         </a>
                     </li>
-                    <li t-if="forum.count_flagged_posts" class="nav-item ml-2">
+                    <li t-if="forum.count_flagged_posts" class="nav-item ms-2">
                         <a class="nav-link" t-attf-href="/forum/#{slug(forum)}/flagged_queue">
                             <i class="fa fa-flag fa-fw text-danger"/>
                             <b t-esc="forum.count_flagged_posts" class="text-800"/>
@@ -204,8 +204,8 @@
                     </li>
                 </t>
                 <!-- Mobile 'Search Box' toggler-->
-                <li class="nav-item ml-4">
-                    <a data-toggle="collapse" href="#o_wforum_search" class="nav-link"><i class="fa fa-search"/></a>
+                <li class="nav-item ms-4">
+                    <a data-bs-toggle="collapse" href="#o_wforum_search" class="nav-link"><i class="fa fa-search"/></a>
                 </li>
             </ul>
 
@@ -231,12 +231,12 @@
             <span t-if="question.has_validated_answer and filters != 'solved'"
                 title="Solved"
                 aria-label="Solved"
-                data-toggle="tooltip"
+                data-bs-toggle="tooltip"
                 class="fa fa-check-circle text-success"/>
             <span t-if="question.user_favourite and not (my == 'favourites' or hide_fav_icon)"
                 title="Your favourite"
                 aria-label="Your favourite"
-                data-toggle="tooltip"
+                data-bs-toggle="tooltip"
                 class="fa fa-star o_wforum_gold"/>
 
             <a t-attf-href="/forum/#{slug(question.forum_id)}/#{slug(question)}#{answer and ('/#answer-%s' % answer.id)}"
@@ -264,7 +264,7 @@
                 t-value="'/forum/' + slug(question_tag.forum_id) + '/tag/' + slug(question_tag) + '/questions?' + keep_query( 'search', 'sorting', 'my', filters='tag')"/>
 
             <a t-att-href="click_action"
-                t-attf-class="badge #{tag and tag.name == question_tag.name and 'badge-secondary' or 'border text-600 badge-light'} #{ not question_tag_first and 'ml-lg-1 mt-lg-1'}"
+                t-attf-class="badge #{tag and tag.name == question_tag.name and 'text-bg-secondary' or 'border text-600 text-bg-light'} #{ not question_tag_first and 'ms-lg-1 mt-lg-1'}"
                 t-field="question_tag.name"/>
         </t>
     </div>
@@ -274,11 +274,11 @@
             <t t-call="website_forum.vote">
                 <t t-set="post" t-value="question"/>
             </t>
-            <span t-field="question.write_date" t-options='{"format": "d MMMM y"}'/>, by <a t-attf-href="/forum/#{slug(question.forum_id)}/user/#{question.create_uid.id}?forum_origin=#{request.httprequest.path}" t-field="question.create_uid" class="d-inline-block font-weight-bold" t-options='{"widget": "contact", "fields": ["name"]}'/>
+            <span t-field="question.write_date" t-options='{"format": "d MMMM y"}'/>, by <a t-attf-href="/forum/#{slug(question.forum_id)}/user/#{question.create_uid.id}?forum_origin=#{request.httprequest.path}" t-field="question.create_uid" class="d-inline-block fw-bold" t-options='{"widget": "contact", "fields": ["name"]}'/>
         </div>
         <div>
             <span class="mx-1 d-none d-sm-inline">&amp;nbsp;|</span>
-            <a t-if="question.child_count" class="font-weight-bold" t-attf-href="/forum/#{ slug(question.forum_id) }/#{ slug(question) }">
+            <a t-if="question.child_count" class="fw-bold" t-attf-href="/forum/#{ slug(question.forum_id) }/#{ slug(question) }">
                 <t t-esc="question.child_count"/>
                 <t t-if="question.child_count == 1">Answer</t>
                 <t t-else="">Answers</t>
@@ -310,7 +310,7 @@
                     <t t-set="allow_biography" t-value="True"/>
                 </t>
             </div>
-            <div t-attf-class="flex-grow-1 #{show_author_avatar and 'pl-2'}">
+            <div t-attf-class="flex-grow-1 #{show_author_avatar and 'ps-2'}">
                 <t t-call="website_forum.display_post_question_block"/>
             </div>
         </div>
@@ -426,8 +426,8 @@
     <t t-set="col_class" t-valuef="mb-3 col-sm-6"/>
     <t t-set="img_class" t-valuef="col-md-4"/>
     <t t-set="content_class" t-valuef="col-md-8"/>
-    <t t-set="last_post_class" t-valuef="col-md-12 pr-md-3 pt-3"/>
-    <t t-set="nb_post_class" t-valuef="col-md-12 pr-md-3 pt-2"/>
+    <t t-set="last_post_class" t-valuef="col-md-12 pe-md-3 pt-3"/>
+    <t t-set="nb_post_class" t-valuef="col-md-12 pe-md-3 pt-2"/>
 
     <t t-call="website.layout">
         <t t-set="pageName" t-value="'website_forum'"/>
@@ -458,7 +458,7 @@
         <t t-set="has_desc" t-value="forum.description"/>
         <div t-attf-class="#{col_class}">
             <div class="row py-4 bg-200 mx-1 h-100 o_forum_row">
-                <div t-attf-class="o_forum_image_container pr-md-0 h-100 #{img_class}">
+                <div t-attf-class="o_forum_image_container pe-md-0 h-100 #{img_class}">
                     <a t-attf-href="/forum/#{slug(forum)}">
                         <div t-attf-class="h-100 w-100 #{not forum.image_1920 and 'rounded o_wforum_forum_card_bg shadow-sm flex-shrink-0'}">
                             <div t-if="forum.image_1920 or editable" t-attf-class="h-100"
@@ -504,10 +504,10 @@
         <attribute name="t-valuef">col-md-9</attribute>
     </xpath>
     <xpath expr="//t[@t-set='last_post_class']" position="attributes">
-        <attribute name="t-valuef">col-md-10 pr-md-0 pt-3</attribute>
+        <attribute name="t-valuef">col-md-10 pe-md-0 pt-3</attribute>
     </xpath>
     <xpath expr="//t[@t-set='nb_post_class']" position="attributes">
-        <attribute name="t-valuef">col-md-2 pr-md-3 pt-3</attribute>
+        <attribute name="t-valuef">col-md-2 pe-md-3 pt-3</attribute>
     </xpath>
 </template>
 
@@ -544,23 +544,23 @@
 </template>
 
 <template id="website_forum.user_sidebar">
-    <nav t-if="uid" class="o_wforum_nav nav nav-pills flex-column ml-4">
+    <nav t-if="uid" class="o_wforum_nav nav nav-pills flex-column ms-4">
         <a t-attf-href="/forum/#{slug(forum)}/user/#{uid}?forum_origin=#{request.httprequest.path}"
             class="nav-link d-flex align-items-center rounded-pill text-reset mb-2"
-            data-toggle="tooltip"
+            data-bs-toggle="tooltip"
             data-trigger="hover"
             title="My profile">
-            <img class="o_forum_avatar rounded-circle mr-1" t-att-src="website.image_url(user, 'avatar_128', '30x30')" alt="Avatar"/>
+            <img class="o_forum_avatar rounded-circle me-1" t-att-src="website.image_url(user, 'avatar_128', '30x30')" alt="Avatar"/>
             <div>
                 <h6 class="my-0" t-esc="user_id.name"/>
-                <small class="text-muted font-weight-bold"><t t-esc="user_id.karma"/>xp</small>
+                <small class="text-muted fw-bold"><t t-esc="user_id.karma"/>xp</small>
             </div>
         </a>
 
         <t t-set="location" t-value="url_for('/forum/') + slug(forum) + ( ('/tag/' + slug(tag) + '/questions?') if tag else '?' )"/>
 
         <!-- My Posts -->
-        <span t-if="my == 'mine'" class="nav-link rounded-pill mb-2 active font-weight-bold">
+        <span t-if="my == 'mine'" class="nav-link rounded-pill mb-2 active fw-bold">
             <i class="fa fa-question-circle-o fa-fw"/> My Posts
             <a class="text-reset pull-right no-decoration" t-att-href="location + keep_query('search', 'filters', 'sorting')">&#215;</a>
         </span>
@@ -569,7 +569,7 @@
         </a>
 
         <!-- My Favourites -->
-        <span t-if="my == 'favourites'" class="nav-link rounded-pill mb-2 active font-weight-bold">
+        <span t-if="my == 'favourites'" class="nav-link rounded-pill mb-2 active fw-bold">
             <i class="fa fa-star fa-fw"/> Favourites
             <a class="text-reset pull-right no-decoration" t-att-href="location + keep_query( 'search', 'filters', 'sorting')">&#215;</a>
         </span>
@@ -578,7 +578,7 @@
         </a>
 
         <!-- My Followed posts -->
-        <span t-if="my == 'followed'" class="nav-link rounded-pill mb-2 active font-weight-bold">
+        <span t-if="my == 'followed'" class="nav-link rounded-pill mb-2 active fw-bold">
             <i class="fa fa-bell fa-fw"/> Followed Posts
             <a class="text-reset pull-right no-decoration" t-att-href="location + keep_query( 'search', 'filters', 'sorting')">&#215;</a>
         </span>
@@ -587,7 +587,7 @@
         </a>
 
         <!-- My Followed tags -->
-        <span t-if="my == 'tagged'" class="nav-link rounded-pill mb-2 active font-weight-bold">
+        <span t-if="my == 'tagged'" class="nav-link rounded-pill mb-2 active fw-bold">
             <i class="fa fa-tags fa-fw"/> Followed Tags
             <a class="text-reset pull-right no-decoration" t-att-href="location + keep_query( 'search', 'filters', 'sorting')">&#215;</a>
         </span>
@@ -601,21 +601,21 @@
                 <div class="pb-1 border-bottom text-muted">Moderation tools</div>
             </span>
 
-            <span t-if="queue_type == 'validation'" class="nav-link rounded-pill mb-2 active font-weight-bold">
+            <span t-if="queue_type == 'validation'" class="nav-link rounded-pill mb-2 active fw-bold">
                 <i class="fa fa-check-square-o fa-fw"/> To Validate
                 <a class="text-reset pull-right no-decoration" t-attf-href="/forum/#{ slug(forum) }">&#215;</a>
             </span>
             <a t-else="" class="nav-link rounded-pill text-reset" t-attf-href="/forum/#{slug(forum)}/validation_queue">
                 <i class="fa fa-check-square-o fa-fw"/> To Validate
-                <span t-attf-class="badge pull-right #{forum.count_posts_waiting_validation > 0 and 'badge-warning' or 'badge-light'}" t-esc="forum.count_posts_waiting_validation"/>
+                <span t-attf-class="badge pull-right #{forum.count_posts_waiting_validation > 0 and 'text-bg-warning' or 'text-bg-light'}" t-esc="forum.count_posts_waiting_validation"/>
             </a>
-            <span t-if="queue_type == 'offensive' or queue_type == 'flagged'" class="nav-link rounded-pill mb-2 active font-weight-bold">
+            <span t-if="queue_type == 'offensive' or queue_type == 'flagged'" class="nav-link rounded-pill mb-2 active fw-bold">
                 <i class="fa fa-flag fa-fw"/> Flagged
                 <a class="text-reset pull-right no-decoration" t-attf-href="/forum/#{ slug(forum) }">&#215;</a>
             </span>
             <a t-else="" class="nav-link rounded-pill text-reset" t-attf-href="/forum/#{slug(forum)}/flagged_queue">
                 <i class="fa fa-flag fa-fw"/> Flagged
-                <span id="count_flagged_posts" t-attf-class="badge pull-right #{forum.count_flagged_posts > 0 and 'badge-danger' or 'badge-light'}" t-esc="forum.count_flagged_posts"/>
+                <span id="count_flagged_posts" t-attf-class="badge pull-right #{forum.count_flagged_posts > 0 and 'text-bg-danger' or 'text-bg-light'}" t-esc="forum.count_flagged_posts"/>
             </a>
         </t>
     </nav>
@@ -625,16 +625,16 @@
 <!-- Specific Forum Layout -->
 <template id="forum_index" name="Forum">
     <t t-call="website_forum.header">
-        <div class="row no-gutters">
+        <div class="row g-0">
             <div t-attf-class="d-flex justify-content-end flex-md-grow-1 #{(search or tag or my) and 'col-12 flex-column-reverse flex-md-row mb-3' or 'col-md-auto order-md-3'}">
                 <div t-if="search or tag or my" class="d-flex flex-wrap align-items-center flex-grow-1">
-                    <span t-if="search" class="w-100 w-md-auto mb-2 mb-md-0 border rounded pl-2 d-inline-flex align-items-center justify-content-between">
+                    <span t-if="search" class="w-100 w-md-auto mb-2 mb-md-0 border rounded ps-2 d-inline-flex align-items-center justify-content-between">
                         <em class="bg-light px-2" t-esc="search"/>
                         <a t-att-href="url_for('') + '?' + keep_query( 'filters', 'sorting', 'my')" class="btn py-1">&#215;</a>
                     </span>
-                    <span t-if="my" t-attf-class="w-100 w-md-auto mb-2 mb-md-0 border rounded pl-2 d-inline-flex align-items-center justify-content-between #{search and 'ml-md-2'}">
+                    <span t-if="my" t-attf-class="w-100 w-md-auto mb-2 mb-md-0 border rounded ps-2 d-inline-flex align-items-center justify-content-between #{search and 'ms-md-2'}">
                         <div>
-                            <img t-if="uid" class="o_forum_avatar rounded-circle mr-1" t-att-src="website.image_url(user, 'avatar_128', '16x16')" alt="Avatar"/>
+                            <img t-if="uid" class="o_forum_avatar rounded-circle me-1" t-att-src="website.image_url(user, 'avatar_128', '16x16')" alt="Avatar"/>
                             <span t-if="my == 'favourites'"> My <b>Favourites</b></span>
                             <span t-elif="my == 'followed'"> I'm <b>Following</b></span>
                             <span t-elif="my == 'mine'"> My <b>Posts</b></span>
@@ -642,9 +642,9 @@
                         </div>
                         <a t-att-href="url_for('') + '?' + keep_query( 'search', 'filters', 'sorting')" class="btn py-1">&#215;</a>
                     </span>
-                    <span t-if="tag" t-attf-class="w-100 w-md-auto mb-2 mb-md-0 border rounded pl-2 d-inline-flex align-items-center justify-content-between #{(search or my) and 'ml-md-2'}">
+                    <span t-if="tag" t-attf-class="w-100 w-md-auto mb-2 mb-md-0 border rounded ps-2 d-inline-flex align-items-center justify-content-between #{(search or my) and 'ms-md-2'}">
                         <div>
-                            <span class="fa fa-tag text-muted mr-1"/>
+                            <span class="fa fa-tag text-muted me-1"/>
                             <span t-esc="tag.name"/>
                         </div>
                         <a t-att-href="url_for('/forum/') + slug(forum) + '?' + keep_query( 'search', 'sorting', 'filters', 'my')" class="btn py-1">&#215;</a>
@@ -663,7 +663,7 @@
                 <!-- Filter post by type (mobile only) -->
                 <div class="col-6 col-md-auto d-lg-none d-flex align-items-center">
                     <div class="dropdown"> Show
-                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+                        <a href="#" class="dropdown-toggle" data-bs-toggle="dropdown">
                             <t t-if="no_filters"> All</t>
                             <t t-elif="filters == 'solved'"> Solved</t>
                             <t t-elif="filters == 'unsolved'"> Unsolved</t>
@@ -695,21 +695,21 @@
                 <div class="d-none d-lg-flex align-items-center col-auto flex-grow-md-1 flex-grow-lg-0">
                     <nav class="o_wforum_nav nav nav-pills justify-content-around">
                         <a t-att-href="url_for('') + '?' + keep_query('search', 'sorting', 'my', filters='all')"
-                            t-attf-class="nav-link py-1 rounded-pill #{no_filters and 'active font-weight-bold' or 'pl-0 pr-2'}">
+                            t-attf-class="nav-link py-1 rounded-pill #{no_filters and 'active fw-bold' or 'ps-0 pe-2'}">
                             All
                         </a>
                         <t t-if="forum.mode == 'questions'">
                             <span class="mx-1 text-400 d-none d-lg-block">|</span>
                             <a t-att-href="url_for('') + '?' + keep_query( 'search', 'sorting', 'my', filters='solved')"
-                                t-attf-class="nav-link py-1 rounded-pill #{filters == 'solved' and 'active font-weight-bold' or 'px-2'}">Solved
+                                t-attf-class="nav-link py-1 rounded-pill #{filters == 'solved' and 'active fw-bold' or 'px-2'}">Solved
                             </a>
                             <a t-att-href="url_for('') + '?' + keep_query( 'search', 'sorting', 'my', filters='unsolved')"
-                                t-attf-class="d-none d-lg-block nav-link py-1 rounded-pill #{filters == 'unsolved' and 'active font-weight-bold' or 'px-2'}">Unsolved
+                                t-attf-class="d-none d-lg-block nav-link py-1 rounded-pill #{filters == 'unsolved' and 'active fw-bold' or 'px-2'}">Unsolved
                             </a>
                         </t>
                         <span class="mx-1 text-400 d-none d-lg-block">|</span>
                         <a t-att-href="url_for('') + '?' + keep_query( 'search', 'sorting', 'my', filters='unanswered')"
-                            t-attf-class="nav-link py-1 rounded-pill #{filters == 'unanswered' and 'active font-weight-bold' or 'px-2'}">Unanswered
+                            t-attf-class="nav-link py-1 rounded-pill #{filters == 'unanswered' and 'active fw-bold' or 'px-2'}">Unanswered
                         </a>
                     </nav>
                 </div>
@@ -721,14 +721,14 @@
                 <span class="mx-3  mx-lg-2 text-400 d-none d-md-inline">|</span>
                 <span class="dropdown">
                     Order by
-                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+                    <a href="#" class="dropdown-toggle" data-bs-toggle="dropdown">
                         <t t-if="sorting == 'relevancy desc'"> trending</t>
                         <t t-elif="sorting == 'create_date desc'"> newest</t>
                         <t t-elif="sorting == 'write_date desc'"> activity date</t>
                         <t t-elif="sorting == 'child_count desc'"> most answered</t>
                         <t t-elif="sorting == 'vote_count desc'"> most voted</t>
                     </a>
-                    <div class="dropdown-menu dropdown-menu-right" role="menu">
+                    <div class="dropdown-menu dropdown-menu-end" role="menu">
                         <a role="menuitem" t-att-href="url_for('') + '?' + keep_query( 'search', 'filters', sorting='relevancy desc')" t-attf-class="dropdown-item#{sorting == 'relevancy desc' and ' active'}">Trending</a>
                         <a role="menuitem" t-att-href="url_for('') + '?' + keep_query( 'search', 'filters', sorting='write_date desc')" t-attf-class="dropdown-item#{sorting == 'write_date desc' and ' active'}">Last activity date</a>
                         <a role="menuitem" t-att-href="url_for('') + '?' + keep_query( 'search', 'filters', sorting='create_date desc')" t-attf-class="dropdown-item#{sorting == 'create_date desc' and ' active'}">Newest</a>
@@ -762,14 +762,14 @@
                         <t t-if="my == 'followed'">in your followed list</t>
                         <t t-if="my == 'mine'">in your posts</t>
                     </t>
-                    <t t-set="_search_str"><t t-if="search">matching "<em class="font-weight-bold" t-esc="original_search or search"/>"</t></t>
+                    <t t-set="_search_str"><t t-if="search">matching "<em class="fw-bold" t-esc="original_search or search"/>"</t></t>
                     <t t-set="_search_and_tag_str"><t t-if="search and tag">&amp;nbsp;and&amp;nbsp;</t></t>
-                    <t t-set="_tag_str"><t t-if="tag">using the <span class="badge badge-light" t-esc="tag.name"/> tag</t></t>
+                    <t t-set="_tag_str"><t t-if="tag">using the <span class="badge text-bg-light" t-esc="tag.name"/> tag</t></t>
                     <t t-set="result_msg">
                         Sorry, we could not find any <b>%s</b> result <b>%s</b> %s%s%s.
                     </t>
                     <span t-out="result_msg % (_filters_str.strip(), _my_str.strip(), _search_str.strip(), _search_and_tag_str.strip(), _tag_str.strip())"/>
-                    <span t-if="original_search">Showing results for <em class="font-weight-bold" t-esc="search"/> instead.</span>
+                    <span t-if="original_search">Showing results for <em class="fw-bold" t-esc="search"/> instead.</span>
                 </div>
 
                 <t t-elif="not tag and not search and no_filters">
@@ -822,7 +822,7 @@
         <div t-if="request.env.user.forum_waiting_posts_count" class="alert border" role="alert">
             <b>You already have a pending post.</b><br/>
             <p>Please wait for a moderator to validate your previous post before continuing.</p>
-            <a t-attf-href="/forum/#{ slug(forum) }" title="All Topics"><i class="fa fa-chevron-left mr-2"/>Back to All Topics</a>
+            <a t-attf-href="/forum/#{ slug(forum) }" title="All Topics"><i class="fa fa-chevron-left me-2"/>Back to All Topics</a>
         </div>
 
         <form t-else="" t-attf-action="/forum/#{slug(forum)}/new" method="post" role="form" class="tag_text js_website_submit_form js_wforum_submit_form o_wforum_readable">
@@ -833,7 +833,7 @@
                     class="form-control form-control-lg" placeholder="A clear, explicit and concise title" title="Title must not be empty"/>
                 <input type="hidden" name="karma" t-attf-value="#{user.karma}" id="karma"/>
                 <div class="form-text small text-muted">
-                    <a data-toggle="collapse" href="#newQuestionExample" role="button" aria-expanded="false" aria-controls="newQuestionExample">
+                    <a data-bs-toggle="collapse" href="#newQuestionExample" role="button" aria-expanded="false" aria-controls="newQuestionExample">
                         Example
                         <i class="fa fa-question-circle"/>
                     </a>
@@ -873,7 +873,7 @@
 <!-- Edition: edit a post -->
 <template id="edit_post">
     <t t-call="website_forum.header">
-        <div t-if="is_answer" class="font-weight-bold mb-1">Question by <t t-esc="post.parent_id.create_uid.sudo().name"/></div>
+        <div t-if="is_answer" class="fw-bold mb-1">Question by <t t-esc="post.parent_id.create_uid.sudo().name"/></div>
         <article t-if="is_answer" class="alert border pb-0 o_wforum_readable">
             <h5 class="mb-1 text-muted" t-esc="post.parent_id.name"/>
             <div t-field="post.parent_id.content" class="o_wforum_post_content text-muted oe_no_empty"/>
@@ -885,7 +885,7 @@
                 <input type="text" name="post_name" required="required" pattern=".*\S.*" t-attf-value="#{post.name}"
                     class="form-control form-control-lg" placeholder="Edit your Post" title="Title must not be empty"/>
                 <div class="form-text small text-muted">
-                    <a data-toggle="collapse" href="#newQuestionExample" role="button" aria-expanded="false" aria-controls="newQuestionExample">
+                    <a data-bs-toggle="collapse" href="#newQuestionExample" role="button" aria-expanded="false" aria-controls="newQuestionExample">
                         Example
                         <i class="fa fa-question-circle"/>
                     </a>
@@ -951,7 +951,7 @@
             </div>
             <div class="mb-4">
                 <label class="form-label" for="reason"><t t-if="offensive">Offensive</t><t t-if="not offensive">Closing</t> Reason:</label>
-                <select class="form-control custom-select custom-select-lg" name="reason_id">
+                <select class="form-select form-select form-select-lg" name="reason_id">
                     <t t-foreach="reasons or []" t-as="reason">
                         <option t-att-value="reason.id" t-att-selected="reason.id == question.closed_reason_id.id"><t t-esc="reason.name"/></option>
                     </t>
@@ -962,7 +962,7 @@
                     <t t-if="offensive">Mark as offensive</t>
                     <t t-if="not offensive">Close post</t>
                 </button>
-                <a role="button" class="btn btn-light border ml-2" t-attf-href="/forum/#{ slug(forum) }/#{ slug(question) }">Discard</a>
+                <a role="button" class="btn btn-light border ms-2" t-attf-href="/forum/#{ slug(forum) }/#{ slug(question) }">Discard</a>
             </div>
         </form>
     </div>
@@ -991,7 +991,7 @@
 <!-- Edition: post an answer -->
 <template id="post_answer">
     <div class="d-flex align-items-center mt-5 mb-2">
-        <img t-if="uid" t-attf-class="o_forum_avatar rounded-circle mr-2" t-att-src="website.image_url(user, 'avatar_128', '24x24')" alt="Avatar"/>
+        <img t-if="uid" t-attf-class="o_forum_avatar rounded-circle me-2" t-att-src="website.image_url(user, 'avatar_128', '24x24')" alt="Avatar"/>
         <h4 class="my-0">Your Answer</h4>
     </div>
     <t t-if="request.params.get('nocontent')">
@@ -1012,8 +1012,8 @@
                 data-social-target-type="answer" data-hashtags="#answer">Post Answer</button>
         <a href="#"
         class="btn btn-secondary"
-        data-toggle="collapse"
-        data-target=".answer_collapse"
+        data-bs-toggle="collapse"
+        data-bs-target=".answer_collapse"
         aria-expanded="false">Discard</a>
     </form>
 </template>
@@ -1025,7 +1025,7 @@
     <t t-set="can_downvote" t-value="post.can_downvote"/>
     <div t-attf-class="vote text-center d-inline-flex align-items-center #{vertical and 'o_wforum_vote_vertical flex-md-column'} #{classes}">
         <button type="button" t-attf-data-href="/forum/#{slug(forum)}/post/#{slug(post)}/upvote"
-            t-attf-class="btn btn-link vote_up fa fa-caret-up pl-0 #{vertical and 'px-md-0 pt-md-0' or 'pr-2'} #{own_vote == 1 and 'text-success' or 'text-muted'} #{not can_upvote and 'karma_required'}"
+            t-attf-class="btn btn-link vote_up fa fa-caret-up ps-0 #{vertical and 'px-md-0 pt-md-0' or 'pe-2'} #{own_vote == 1 and 'text-success' or 'text-muted'} #{not can_upvote and 'karma_required'}"
             t-att-disabled="own_vote == 1 and 'disabled'"
             t-att-data-karma="forum.karma_upvote"
             t-att-data-can-upvote="can_upvote"
@@ -1050,9 +1050,9 @@
                 Do you want <b>Accept</b> or <b>Reject</b> this post ?</p>
             <div>
                 <a role="button" t-attf-href="/forum/#{slug(forum)}/post/#{slug(question)}/validate" type="button" class="btn btn-success">
-                    <i class="fa fa-check fa-fw mr-1"/>Accept</a>
+                    <i class="fa fa-check fa-fw me-1"/>Accept</a>
                 <a role="button" t-attf-href="/forum/#{slug(forum)}/post/#{slug(question)}/refuse" type="button" class="btn btn-danger">
-                    <i class="fa fa-times fa-fw mr-1"/>Reject</a>
+                    <i class="fa fa-times fa-fw me-1"/>Reject</a>
             </div>
         </div>
 
@@ -1061,19 +1061,19 @@
             Waiting for validation
         </div>
 
-        <article t-attf-class="question o_wforum_post row no-gutters #{can_bump and 'oe_js_bump'}"
+        <article t-attf-class="question o_wforum_post row g-0 #{can_bump and 'oe_js_bump'}"
             data-type="question"
             t-att-data-last-update="question.write_date"
             t-att-data-id="question.id"
             t-att-data-state="question.state">
 
-            <div t-if="question.state == 'active'" class="col-6 mb-3 col-md-auto pr-2 pr-md-3 pr-lg-4">
+            <div t-if="question.state == 'active'" class="col-6 mb-3 col-md-auto pe-2 pe-md-3 pe-lg-4">
                 <t t-call="website_forum.vote">
                     <t t-set="post" t-value="question"/>
                     <t t-set="vertical" t-value="True"/>
                 </t>
             </div>
-            <div t-attf-class="text-right d-md-none #{question.state == 'active' and 'col-6' or 'col-12'}">
+            <div t-attf-class="text-end d-md-none #{question.state == 'active' and 'col-6' or 'col-12'}">
                 <t t-call="website_forum.question_dropdown"/>
             </div>
             <section class="col">
@@ -1082,11 +1082,11 @@
                         <i t-if="uid" aria-label="Toggle favorite status"
                             title="Toggle favorite status"
                             t-attf-data-href="/forum/#{slug(question.forum_id)}/question/#{slug(question)}/toggle_favourite"
-                            t-attf-class="o_wforum_favourite_toggle no-decoration small mr-1 fa #{question.user_favourite and 'fa-star o_wforum_gold' or 'fa-star-o text-muted'}"/>
+                            t-attf-class="o_wforum_favourite_toggle no-decoration small me-1 fa #{question.user_favourite and 'fa-star o_wforum_gold' or 'fa-star-o text-muted'}"/>
 
                         <h1 class="d-inline mb-0 h2" t-esc="question.name"/>
 
-                        <span t-if="not question.active" class="border rounded-pill h6 text-muted my-0 ml-2 px-2">
+                        <span t-if="not question.active" class="border rounded-pill h6 text-muted my-0 ms-2 px-2">
                             <t t-if="question.state!='offensive'">Deleted</t>
                             <t t-if="question.state=='offensive'">Offensive</t>
                             <t t-if="question.state=='offensive' and question.closed_reason_id">
@@ -1094,7 +1094,7 @@
                             </t>
                         </span>
                         <small t-if="question.state == 'close'">
-                            <span class="badge badge-info">Closed</span>
+                            <span class="badge text-bg-info">Closed</span>
                         </small>
                     </header>
                     <div class="d-none d-md-block col-md-auto">
@@ -1119,7 +1119,7 @@
                         <i class="fa fa-tag text-muted"/>
                         <a t-foreach="question.tag_ids" t-as="question_tag"
                             t-attf-href="/forum/#{slug(question_tag.forum_id)}/tag/#{slug(question_tag)}/questions?#{keep_query(filters='tag')}"
-                            t-attf-class="badge border text-600 badge-light #{not question_tag_first and 'ml-1'}"
+                            t-attf-class="badge border text-600 text-bg-light #{not question_tag_first and 'ms-1'}"
                             t-field="question_tag.name"/>
                     </div>
                 </div>
@@ -1151,23 +1151,23 @@
                 <t t-set="_question_comment_collapse_uid" t-value="'comment_%s_%s' % (question._name.replace('.', '_'), question.id)"/>
                 <div t-if="question.state == 'active' and question.active != False"
                     class="btn-toolbar mb-3" role="toolbar">
-                    <div t-if="not question.uid_has_answered and question.can_answer" class="btn-group btn-group-sm mr-2">
+                    <div t-if="not question.uid_has_answered and question.can_answer" class="btn-group btn-group-sm me-2">
                         <a t-attf-class="btn btn-primary collapsed #{not question.can_answer and 'karma_required text-muted'}"
                             t-att-data-karma="question.forum_id.karma_answer"
-                            data-toggle="collapse"
-                            data-target=".answer_collapse"
+                            data-bs-toggle="collapse"
+                            data-bs-target=".answer_collapse"
                             href="#">
-                            <i class="fa fa-reply mr-1"/>Answer
+                            <i class="fa fa-reply me-1"/>Answer
                         </a>
                     </div>
                     <div class="btn-group btn-group-sm">
                         <a t-attf-class="btn px-2 border #{not question.can_comment and 'karma_required text-muted'}" t-att-data-karma="question.karma_comment" t-att-data-toggle="question.can_comment and 'collapse' or None"
                             t-attf-href="##{_question_comment_collapse_uid}">
-                            <i class=" fa fa-comment text-muted mr-1"/>Comment
+                            <i class=" fa fa-comment text-muted me-1"/>Comment
                         </a>
                         <a href="javascript:void(0)" class="oe_social_share btn px-2 border"
                             t-attf-data-hashtags="#question">
-                            <i class="fa fa-share-alt text-muted mr-1"/>Share
+                            <i class="fa fa-share-alt text-muted me-1"/>Share
                         </a>
                     </div>
                 </div>
@@ -1194,13 +1194,13 @@
                     </t>
                 </section>
 
-                <div t-if="not question.uid_has_answered and question.can_answer and question.child_ids" class="btn-group btn-group-sm mr-2">
+                <div t-if="not question.uid_has_answered and question.can_answer and question.child_ids" class="btn-group btn-group-sm me-2">
                     <a t-attf-class="btn btn-primary answer_collapse show collapsed collapse #{not question.can_answer and 'karma_required text-muted'}"
                         t-att-data-karma="question.forum_id.karma_answer"
-                        data-toggle="collapse"
-                        data-target=".answer_collapse"
+                        data-bs-toggle="collapse"
+                        data-bs-target=".answer_collapse"
                         href="#">
-                        <i class="fa fa-reply mr-1"/>Answer
+                        <i class="fa fa-reply me-1"/>Answer
                     </a>
                 </div>
 
@@ -1224,10 +1224,10 @@
 
 <template id="website_forum.question_dropdown">
     <div class="dropdown">
-        <a class="btn py-0" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+        <a class="btn py-0" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             <i class="fa fa-ellipsis-v"/>
         </a>
-        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
+        <div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink">
             <t t-if="question.state == 'close'" t-call="website_forum.link_button">
                 <t t-set="url" t-value="'/forum/' + slug(forum) +'/question/' + slug(question) + '/reopen'"/>
                 <t t-set="label">Reopen</t>
@@ -1289,8 +1289,8 @@
     <a t-attf-id="answer-#{str(answer.id)}"/>
     <div t-attf-class="forum_answer pt-4 border-top border-light #{answer.is_correct and 'o_wforum_answer_correct'}" t-attf-id="answer_#{answer.id}" >
         <div class="">
-            <div class="row no-gutters">
-                <div class="col-12 col-md-auto pr-2 pr-md-2 pr-lg-3">
+            <div class="row g-0">
+                <div class="col-12 col-md-auto pe-2 pe-md-2 pe-lg-3">
                     <t t-call="website_forum.vote">
                         <t t-set="vertical" t-value="True"/>
                         <t t-set="post" t-value="answer"/>
@@ -1303,7 +1303,7 @@
                            t-att-data-helper-accept="helper_accept"
                            t-att-data-helper-decline="helper_decline"
                            t-att-title="answer.is_correct and helper_decline or helper_accept"
-                           data-toggle="tooltip"
+                           data-bs-toggle="tooltip"
                            t-attf-data-target="#answer_#{answer.id}"
                            t-attf-data-href="/forum/#{slug(question.forum_id)}/post/#{slug(answer)}/toggle_correct">
                             <i class="fa fa-circle-o fa-stack-2x"/>
@@ -1320,7 +1320,7 @@
                             <t t-set="allow_biography" t-value="True"/>
                             <t t-set="object_validable" t-value="True"/>
                         </t>
-                        <span class="o_wforum_answer_correct_badge border small border-success rounded-pill font-weight-bold text-success ml-2 px-2">
+                        <span class="o_wforum_answer_correct_badge border small border-success rounded-pill fw-bold text-success ms-2 px-2">
                             Best Answer
                         </span>
                     </div>
@@ -1330,11 +1330,11 @@
                     <t t-set="_answer_comment_collapse_uid" t-value="'comment_%s_%s' % (answer._name.replace('.', '_'), answer.id)"/>
                     <div class="btn-toolbar mb-3">
                         <div t-if="question.uid_has_answered and answer.create_uid.id == uid"
-                            class="btn-group btn-group-sm mr-1 mr-md-2">
+                            class="btn-group btn-group-sm me-1 me-md-2">
                             <t t-set="edit_answer_title">Only one answer per question is allowed</t>
                             <a class="btn btn-sm px-2 btn-primary"
                                 t-att-title="question.forum_id.mode == 'questions' and edit_answer_title"
-                                data-toggle="tooltip"
+                                data-bs-toggle="tooltip"
                                 t-attf-href="/forum/#{slug(forum)}/question/#{slug(question)}/edit_answer">
                                 <i class="fa fa-pencil"/>
                                 Edit<span class="d-none d-lg-inline"> your answer</span>
@@ -1344,7 +1344,7 @@
                             <a t-attf-class="btn border px-2 #{not answer.can_comment and 'karma_required text-muted'}"
                                 t-attf-data-karma="#{not answer.can_comment and answer.karma_comment or 0}"
                                 t-att-data-toggle="answer.can_comment and 'collapse' or None"
-                                t-attf-data-target="##{_answer_comment_collapse_uid}">
+                                t-attf-data-bs-target="##{_answer_comment_collapse_uid}">
                                 <i t-attf-class="fa fa-comment text-muted #{not answer.can_comment and 'karma_required'}"/>
                                 Comment
                             </a>
@@ -1355,8 +1355,8 @@
                                 Share
                             </a>
                         </div>
-                        <div t-if="answer.can_comment" class="btn-group btn-group-sm ml-1 ml-md-2">
-                            <a class="btn border dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                        <div t-if="answer.can_comment" class="btn-group btn-group-sm ms-1 ms-md-2">
+                            <a class="btn border dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                 More
                             </a>
                             <div class="dropdown-menu shadow">
@@ -1364,14 +1364,14 @@
                                     <t t-set="url" t-value="'/forum/' + slug(forum) + '/post/' + slug(answer) + '/edit'"/>
                                     <t t-set="label">Edit</t>
                                     <t t-set="inDropdown" t-value="True"/>
-                                    <t t-set="icon" t-value="'fa-pencil-square-o text-muted mr-2'"/>
+                                    <t t-set="icon" t-value="'fa-pencil-square-o text-muted me-2'"/>
                                     <t t-set="karma" t-value="not answer.can_edit and answer.karma_edit or 0"/>
                                 </t>
                                 <t t-call="website_forum.link_button">
                                     <t t-set="url" t-value="'/forum/' + slug(forum) + '/post/' + slug(answer) + '/delete'"/>
                                     <t t-set="label">Delete</t>
                                     <t t-set="inDropdown" t-value="True"/>
-                                    <t t-set="icon" t-value="'fa-trash-o text-muted mr-2'"/>
+                                    <t t-set="icon" t-value="'fa-trash-o text-muted me-2'"/>
                                     <t t-set="karma" t-value="not answer.can_unlink and answer.karma_unlink or 0"/>
                                 </t>
                                 <t t-if="answer.can_flag" t-call="website_forum.link_button">
@@ -1380,7 +1380,7 @@
                                     <t t-set="form_method" t-value="'GET'"/>
                                     <t t-set="inDropdown" t-value="True"/>
                                     <t t-set="karma" t-value="not answer.can_flag and answer.forum_id.karma_flag or 0"/>
-                                    <t t-set="icon" t-value="'fa-flag-o text-muted mr-2'"/>
+                                    <t t-set="icon" t-value="'fa-flag-o text-muted me-2'"/>
                                     <t t-set="classes" t-valuef="o_wforum_flag"/>
                                     <t t-set="flag_validator" t-value="answer.can_moderate"/>
                                     <t t-set="object" t-value="answer"/>
@@ -1389,7 +1389,7 @@
                                     <t t-set="url" t-value="'/forum/' + slug(forum) + '/post/' + slug(answer) + '/convert_to_comment'"/>
                                     <t t-set="label">Convert as a comment</t>
                                     <t t-set="inDropdown" t-value="True"/>
-                                    <t t-set="icon" t-value="'fa-magic text-muted mr-2'"/>
+                                    <t t-set="icon" t-value="'fa-magic text-muted me-2'"/>
                                     <t t-set="karma" t-value="not answer.can_comment_convert and answer.karma_comment_convert or 0"/>
                                 </t>
                             </div>
@@ -1414,7 +1414,7 @@
     <t t-set="display_info" t-value="show_name or show_date or show_karma"/>
     <t t-if="allow_biography and object.can_display_biography" t-set="bio_popover_data">
         <div class="d-flex o_wforum_bio_popover_wrap">
-            <img class="o_forum_avatar_big flex-shrink-0 mr-3" t-att-src="website.image_url(object.create_uid, 'avatar_128', '75x75')" alt="Avatar"/>
+            <img class="o_forum_avatar_big flex-shrink-0 me-3" t-att-src="website.image_url(object.create_uid, 'avatar_128', '75x75')" alt="Avatar"/>
             <div>
                 <h5 class="o_wforum_bio_popover_name mb-0" t-field="object.create_uid" t-options='{"widget": "contact", "country_image": True, "fields": ["name", "country_id"]}'/>
 
@@ -1438,14 +1438,14 @@
             <img t-attf-class="rounded-circle o_forum_avatar #{not display_info and 'shadow'}" t-att-src="website.image_url(object.create_uid, 'avatar_128', '40x40')" alt="Avatar"/>
         </a>
 
-        <div t-if="show_name or show_date or show_karma" t-attf-class="d-flex #{compact and 'align-items-baseline ml-1' or 'flex-column justify-content-around ml-2'}">
+        <div t-if="show_name or show_date or show_karma" t-attf-class="d-flex #{compact and 'align-items-baseline ms-1' or 'flex-column justify-content-around ms-2'}">
             <a t-att-href="user_profile_url" class="h6 my-0 text-reset" t-field="object.create_uid" t-options='{"widget": "contact", "fields": ["name"]}'/>
-            <small t-if="show_karma and show_date" class="text-muted font-weight-bold"> - <t t-esc="object.create_uid.karma"/>xp</small>
+            <small t-if="show_karma and show_date" class="text-muted fw-bold"> - <t t-esc="object.create_uid.karma"/>xp</small>
 
-            <div t-attf-class="text-muted small font-weight-bold #{compact and 'd-flex align-items-baseline'}">
+            <div t-attf-class="text-muted small fw-bold #{compact and 'd-flex align-items-baseline'}">
                 <span t-if="compact" class="mx-1"> - </span>
-                <time t-if="show_date" class="d-block text-muted font-weight-bold" t-field="object.create_date" t-options='{"format": "d MMMM y"}'/>
-                <span t-if="show_karma and not show_date" class="text-muted font-weight-bold"><t t-esc="object.create_uid.karma"/>xp</span>
+                <time t-if="show_date" class="d-block text-muted fw-bold" t-field="object.create_date" t-options='{"format": "d MMMM y"}'/>
+                <span t-if="show_karma and not show_date" class="text-muted fw-bold"><t t-esc="object.create_uid.karma"/>xp</span>
             </div>
         </div>
     </div>
@@ -1453,9 +1453,9 @@
 
 <!-- Utility template: Post a Comment -->
 <template id="post_comment">
-    <div class="o_wforum_post_comments_container ml-2 ml-md-5">
+    <div class="o_wforum_post_comments_container ms-2 ms-md-5">
         <div t-if="len(object.website_message_ids)" class="o_wforum_comments_count_header mb-2">
-            <div class="text-muted font-weight-bold small">
+            <div class="text-muted fw-bold small">
                 <span class="o_wforum_comments_count" t-esc="len(object.website_message_ids)"/>
                 <t t-if="len(object.website_message_ids) == 1">Comment</t>
                 <t t-else="">Comments</t>
@@ -1468,12 +1468,12 @@
                     <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
                     <input name="post_id" t-att-value="object.id" type="hidden" class="mt8"/>
                     <div class="d-flex w-100">
-                        <img class="d-none d-md-inline-block rounded-circle o_forum_avatar mr-3" t-att-src="website.image_url(user, 'avatar_128', '40x40')" alt="Avatar"/>
+                        <img class="d-none d-md-inline-block rounded-circle o_forum_avatar me-3" t-att-src="website.image_url(user, 'avatar_128', '40x40')" alt="Avatar"/>
                         <div class="w-100">
                             <textarea name="comment" class="form-control mb-2" placeholder="Comment this post..."/>
                             <div>
                                 <button type="submit" class="btn btn-primary o_wforum_submit_post">Post Comment</button>
-                                <a t-attf-href="##{_collapse_uid}" data-toggle="collapse" class="btn border">Discard</a>
+                                <a t-attf-href="##{_collapse_uid}" data-bs-toggle="collapse" class="btn border">Discard</a>
                             </div>
                         </div>
                     </div>
@@ -1481,7 +1481,7 @@
             </form>
         </div>
 
-        <div class="o_wforum_post_comments pl-3 pl-md-4 border-left">
+        <div class="o_wforum_post_comments ps-3 ps-md-4 border-start">
             <t t-foreach="reversed(object.website_message_ids)" t-as="message">
                 <div t-attf-class="o_wforum_post_comment #{not message_first and 'mt-3'}">
                     <div>
@@ -1497,8 +1497,8 @@
                                 <t t-set="show_name" t-value="True"/>
                                 <t t-set="show_date" t-value="True"/>
                             </div>
-                            <div class="dropdown ml-2">
-                                <a class="btn btn-sm" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            <div class="dropdown ms-2">
+                                <a class="btn btn-sm" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                     <i class="fa fa-ellipsis-v"/>
                                 </a>
                                 <div class="dropdown-menu shadow">
@@ -1533,7 +1533,7 @@
     <t t-call="website_forum.header">
         <nav t-if="pager_tag_chars" class="navbar navbar-light bg-light justify-content-start">
             <t t-if="len(pager_tag_chars) &lt; 11">
-                <span class="navbar-text mr-3">Show Tags Starting By</span>
+                <span class="navbar-text me-3">Show Tags Starting By</span>
                 <ul class="pagination mt0 mb0">
                     <t t-foreach="pager_tag_chars" t-as="tuple_char">
                         <t t-if="tuple_char_index &lt; 11">
@@ -1543,8 +1543,8 @@
                 </ul>
             </t>
             <div t-else="" class="form-inline" role="toolbar" aria-label="Toolbar with button groups">
-                <label for="filter" class="my-1 mr-2">Show Tags Starting By</label>
-                <select name="filter" class="custom-select" onchange="location = this.value;">
+                <label for="filter" class="my-1 me-2">Show Tags Starting By</label>
+                <select name="filter" class="form-select" onchange="location = this.value;">
                     <t t-foreach="pager_tag_chars" t-as="tuple_char">
                         <option t-if="active_char_tag == tuple_char[1]" selected="selected" value="" t-esc="tuple_char[0]"/>
                         <option t-else="" t-attf-value="/forum/#{slug(forum)}/tag/#{quote_plus(tuple_char[1])}" t-esc="tuple_char[0]"/>
@@ -1555,7 +1555,7 @@
 
         <div class="row mb-5" t-if="tags">
             <div class="col-md-3 mt16 o_js_forum_tag_follow" t-foreach="tags" t-as="tag">
-                <span t-attf-class="badge border px-2 #{tag.message_is_follower and 'border-success text-success' or 'badge-light text-600'}">
+                <span t-attf-class="badge border px-2 #{tag.message_is_follower and 'border-success text-success' or 'text-bg-light text-600'}">
                     <i class="fa fa-tag small"/>
                     <t t-esc="tag.name"/>
                     <b class="small align-top">(<t t-esc="tag.posts_count"/>)</b>
@@ -1586,8 +1586,8 @@
 <template id="moderation_queue" name="Forum Moderation Queue">
     <t t-call="website_forum.header">
         <t t-set="website_forum_action" t-value="'o_wforum_moderation_queue'"/>
-        <div t-if="len(posts_ids) > 0" class="mb-2 text-right">
-            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#markAllAsSpam"><i class="fa fa-bug"></i> Filter Tool</button>
+        <div t-if="len(posts_ids) > 0" class="mb-2 text-end">
+            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#markAllAsSpam"><i class="fa fa-bug"></i> Filter Tool</button>
         </div>
         <div t-attf-class="o_caught_up_alert alert text-center #{len(posts_ids) and 'd-none'}">
             <i class="fa fa-check text-success d-block display-2"></i>
@@ -1600,19 +1600,19 @@
             <div class="modal-dialog" role="document">
                 <div class="modal-content">
                     <div class="modal-header d-flex align-items-center pb-0">
-                        <div class="text-muted mr-2">Filter by:</div>
+                        <div class="text-muted me-2">Filter by:</div>
                         <ul class="nav nav-tabs border-bottom-0" id="myTab" role="tablist">
                             <li class="nav-item">
-                                <a class="nav-link active spam_menu" id="user-tab" data-toggle="tab" href="#spam_user" role="tab" aria-controls="user" aria-selected="true"><i class="fa fa-user"/> User</a>
+                                <a class="nav-link active spam_menu" id="user-tab" data-bs-toggle="tab" href="#spam_user" role="tab" aria-controls="user" aria-selected="true"><i class="fa fa-user"/> User</a>
                             </li>
                             <li class="nav-item">
-                                <a class="nav-link spam_menu" id="country-tab" data-toggle="tab" href="#spam_country" role="tab" aria-controls="spam_country" aria-selected="false"><i class="fa fa-flag"/> Country</a>
+                                <a class="nav-link spam_menu" id="country-tab" data-bs-toggle="tab" href="#spam_country" role="tab" aria-controls="spam_country" aria-selected="false"><i class="fa fa-flag"/> Country</a>
                             </li>
                             <li class="nav-item">
-                                <a class="nav-link spam_menu" id="character-tab" data-toggle="tab" href="#spam_character" role="tab" aria-controls="spam_character" aria-selected="false">圾 Text</a>
+                                <a class="nav-link spam_menu" id="character-tab" data-bs-toggle="tab" href="#spam_character" role="tab" aria-controls="spam_character" aria-selected="false">圾 Text</a>
                             </li>
                         </ul>
-                        <button type="button" class="btn-close align-self-start" data-dismiss="modal"></button>
+                        <button type="button" class="btn-close align-self-start" data-bs-dismiss="modal"></button>
                     </div>
                     <div class="modal-body bg-100">
                         <div class="tab-content" id="o_tab_content_spam">
@@ -1621,9 +1621,9 @@
                                     <div t-foreach="posts_ids.mapped('create_uid')" t-as="user" class="col-6">
                                         <div class="card mb-2">
                                             <div class="card-body py-2">
-                                                <div class="custom-control custom-checkbox">
-                                                    <input type="checkbox" t-att-value="user.id" class="custom-control-input" t-attf-id="user_#{user.id}"/>
-                                                    <label class="custom-control-label" t-attf-for="user_#{user.id}">
+                                                <div class="custom-control form-check">
+                                                    <input type="checkbox" t-att-value="user.id" class="form-check-input" t-attf-id="user_#{user.id}"/>
+                                                    <label class="form-check-label" t-attf-for="user_#{user.id}">
                                                         <img class="d-inline img o_forum_avatar" t-att-src="website.image_url(user, 'avatar_128', '40x40')" alt="Avatar"/>
                                                         <span t-esc="user.name" class="d-inline"/>
                                                     </label>
@@ -1638,10 +1638,10 @@
                                     <div t-foreach="posts_ids.mapped('create_uid.country_id')" t-as="country" class="col-6">
                                         <div class="card mb-2">
                                             <div class="card-body py-2">
-                                                <div class="custom-control custom-checkbox">
-                                                    <input type="checkbox" class="custom-control-input" t-attf-id="country_#{country.id}" t-att-value="country.id"/>
-                                                    <label class="custom-control-label" t-attf-for="country_#{country.id}">
-                                                        <span t-field="country.image_url" t-options='{"widget": "image_url", "class": "country_flag"}' class="mr-2"/>
+                                                <div class="custom-control form-check">
+                                                    <input type="checkbox" class="form-check-input" t-attf-id="country_#{country.id}" t-att-value="country.id"/>
+                                                    <label class="form-check-label" t-attf-for="country_#{country.id}">
+                                                        <span t-field="country.image_url" t-options='{"widget": "image_url", "class": "country_flag"}' class="me-2"/>
                                                         <span t-esc="country.name"/>
                                                     </label>
                                                 </div>
@@ -1666,12 +1666,12 @@
         <div t-foreach="posts_ids" t-as="question" class="post_to_validate card mb-3">
             <div class="card-body">
                 <div class="row">
-                    <div class="col-md-2 col-sm-3 o_js_validation_queue border-right">
+                    <div class="col-md-2 col-sm-3 o_js_validation_queue border-end">
                         <div class="text-center d-flex align-items-end flex-sm-column justify-content-end align-items-sm-stretch">
-                            <a t-attf-href="/forum/#{slug(forum)}/post/#{slug(question)}/validate" title="Validate" aria-label="Validate" data-toggle="tooltip" class="btn border-success m-1 bg-white"><i class="fa fa-check text-success"/></a>
-                            <a t-if="queue_type == 'validation'" t-attf-href="/forum/#{slug(forum)}/post/#{slug(question)}/refuse" data-toggle="tooltip" title="Refuse" aria-label="Refuse" class="btn border-danger m-1 bg-white"><i class="fa fa-times text-danger"/></a>
-                            <a t-if="queue_type == 'flagged'" t-attf-href="/forum/#{slug(forum)}/post/#{slug(question)}/ask_for_mark_as_offensive" data-toggle="tooltip" aria-label="Mark as offensive" title="Mark as offensive" class="btn border-danger m-1 bg-white"><i class="fa fa-times text-danger"/></a>
-                            <a href="#" t-if="queue_type == 'offensive'" disabled="True" aria-label="Offensive" title="Offensive" data-toggle="tooltip" class="btn border-danger bg-white"><i class="fa fa-times m-1 text-danger"/></a>
+                            <a t-attf-href="/forum/#{slug(forum)}/post/#{slug(question)}/validate" title="Validate" aria-label="Validate" data-bs-toggle="tooltip" class="btn border-success m-1 bg-white"><i class="fa fa-check text-success"/></a>
+                            <a t-if="queue_type == 'validation'" t-attf-href="/forum/#{slug(forum)}/post/#{slug(question)}/refuse" data-bs-toggle="tooltip" title="Refuse" aria-label="Refuse" class="btn border-danger m-1 bg-white"><i class="fa fa-times text-danger"/></a>
+                            <a t-if="queue_type == 'flagged'" t-attf-href="/forum/#{slug(forum)}/post/#{slug(question)}/ask_for_mark_as_offensive" data-bs-toggle="tooltip" aria-label="Mark as offensive" title="Mark as offensive" class="btn border-danger m-1 bg-white"><i class="fa fa-times text-danger"/></a>
+                            <a href="#" t-if="queue_type == 'offensive'" disabled="True" aria-label="Offensive" title="Offensive" data-bs-toggle="tooltip" class="btn border-danger bg-white"><i class="fa fa-times m-1 text-danger"/></a>
                         </div>
                     </div>
                     <t t-if="question.parent_id">
@@ -1680,9 +1680,9 @@
                             <small class="text-muted">
                                  <i t-attf-class="fa fa-user" role="img" aria-label="Question" />
                                 <span>By </span><span t-field="question.create_uid" t-options='{"widget": "contact", "country_image": True, "fields": ["name", "country_id"]}' style="display: inline-block;"/>
-                                <i class="ml-4 mr4 fa fa-calendar"/><span t-field="question.write_date" t-options='{"format":"short"}'/>
+                                <i class="ms-4 mr4 fa fa-calendar"/><span t-field="question.write_date" t-options='{"format":"short"}'/>
                                 <span t-if="question.state == 'flagged'" class="text-black">
-                                    <i class="fa fa-flag ml-4 mr4"/>
+                                    <i class="fa fa-flag ms-4 mr4"/>
                                     Flagged
                                 </span>
                             </small>
diff --git a/addons/website_forum/views/website_forum_profile.xml b/addons/website_forum/views/website_forum_profile.xml
index 021f3c7342b..fc8e1b816ea 100644
--- a/addons/website_forum/views/website_forum_profile.xml
+++ b/addons/website_forum/views/website_forum_profile.xml
@@ -11,7 +11,7 @@
 
     <template id="user_profile_sub_nav" inherit_id="website_profile.user_profile_sub_nav">
         <xpath expr="//nav" position="before">
-            <div t-if="request.params.get('forum_origin')" class="o_wprofile_all_users_nav_btn_container col pr-0 flex-grow-0">
+            <div t-if="request.params.get('forum_origin')" class="o_wprofile_all_users_nav_btn_container col pe-0 flex-grow-0">
                 <a t-att-href="(request.website.domain or '') + '/' + request.params.get('forum_origin').lstrip('/')"
                     class="o_wprofile_all_users_nav_btn btn text-nowrap">
                     <i class="fa fa-chevron-left small"/> Back
@@ -24,13 +24,13 @@
         <xpath expr="//table[@id='o_wprofile_sidebar_table']//tr[last()]" position="after">
             <t t-if="forum and (up_votes or down_votes)">
                 <tr id="profile_abstract_info_company">
-                    <th><small class="font-weight-bold">Votes</small></th>
+                    <th><small class="fw-bold">Votes</small></th>
                     <td>
                         <span>
                             <i class="fa fa-thumbs-up text-success" role="img" aria-label="Positive votes" title="Positive votes"/>
-                            <span class="font-weight-bold" t-esc="up_votes"/>
-                            <i class="fa fa-thumbs-down text-danger ml-3" role="img" aria-label="Negative votes" title="Negative votes"/>
-                            <span class="font-weight-bold" t-esc="down_votes"/>
+                            <span class="fw-bold" t-esc="up_votes"/>
+                            <i class="fa fa-thumbs-down text-danger ms-3" role="img" aria-label="Negative votes" title="Negative votes"/>
+                            <span class="fw-bold" t-esc="down_votes"/>
                         </span>
                     </td>
                 </tr>
@@ -39,16 +39,16 @@
         <xpath expr="//ul[@id='profile_extra_info_tablist']" position="inside">
             <t t-if="forum">
                 <li class="nav-item">
-                    <a role="tab" aria-controls="questions" href="#questions" class="nav-link o_wprofile_navlink" data-toggle="tab"><t t-esc="count_questions"/> Questions</a>
+                    <a role="tab" aria-controls="questions" href="#questions" class="nav-link o_wprofile_navlink" data-bs-toggle="tab"><t t-esc="count_questions"/> Questions</a>
                 </li>
                 <li class="nav-item">
-                    <a role="tab" aria-controls="answers" href="#answers" class="nav-link o_wprofile_navlink" data-toggle="tab"><t t-esc="count_answers"/> Answers</a>
+                    <a role="tab" aria-controls="answers" href="#answers" class="nav-link o_wprofile_navlink" data-bs-toggle="tab"><t t-esc="count_answers"/> Answers</a>
                 </li>
                 <li t-if="uid == user.id" class="nav-item">
-                    <a role="tab" aria-controls="activity" href="#activity" class="nav-link o_wprofile_navlink" data-toggle="tab">Activity</a>
+                    <a role="tab" aria-controls="activity" href="#activity" class="nav-link o_wprofile_navlink" data-bs-toggle="tab">Activity</a>
                 </li>
                 <li t-if="uid == user.id" class="nav-item">
-                    <a role="tab" aria-controls="votes" href="#votes" class="nav-link o_wprofile_navlink" data-toggle="tab">Votes</a>
+                    <a role="tab" aria-controls="votes" href="#votes" class="nav-link o_wprofile_navlink" data-bs-toggle="tab">Votes</a>
                 </li>
             </t>
         </xpath>
@@ -66,7 +66,7 @@
                             </div>
                         </t>
                         <t t-else="">
-                            <span class="font-weight-bold">No question posted yet.</span>
+                            <span class="fw-bold">No question posted yet.</span>
                         </t>
                     </div>
                     <t t-if="favourite">
@@ -101,7 +101,7 @@
                             </div>
                         </t>
                         <t t-else="">
-                            <span class="font-weight-bold">No answer posted yet.</span>
+                            <span class="fw-bold">No answer posted yet.</span>
                         </t>
                     </div>
                 </div>
@@ -126,8 +126,8 @@
 
     <template id="forum_filter_tag" name="Filtering Forum Tag">
         <t t-if="forum_filtered">
-            <span class="align-items-baseline border d-inline-flex pl-2 rounded mb-1 ml-4">
-                <i class="fa fa-filter mr-2 text-muted"/>
+            <span class="align-items-baseline border d-inline-flex ps-2 rounded mb-1 ms-4">
+                <i class="fa fa-filter me-2 text-muted"/>
                 <t t-esc="forum_filtered"/>
                 <a t-attf-href="/profile/user/#{uid}" class="btn border-0 py-1">&#215;</a>
             </span>
@@ -138,8 +138,8 @@
         <t t-if="activities">
             <div t-foreach="activities" t-as="activity" class="card mb-2">
                 <div class="card-body">
-                    <span t-esc="activity.subtype_id.name" class="badge badge-info mr-2 mt-1"/>
-                    <span t-field="activity.date" t-options='{"format": "short"}' class="mr-2"/>
+                    <span t-esc="activity.subtype_id.name" class="badge text-bg-info me-2 mt-1"/>
+                    <span t-field="activity.date" t-options='{"format": "short"}' class="me-2"/>
                     <t t-set="post" t-value="posts[activity.res_id]"/>
                     <span t-if="post[1]">
                         <a t-attf-href="/forum/#{ slug(post[0].forum_id) }/#{ slug(post[0]) }#answer-#{ str(post[1].id) }">
diff --git a/addons/website_hr_recruitment/static/src/scss/website_hr_recruitment.scss b/addons/website_hr_recruitment/static/src/scss/website_hr_recruitment.scss
index e7806db9ba1..903c471dba6 100644
--- a/addons/website_hr_recruitment/static/src/scss/website_hr_recruitment.scss
+++ b/addons/website_hr_recruitment/static/src/scss/website_hr_recruitment.scss
@@ -15,7 +15,7 @@
         }
         .o_job_infos {
             .fa {
-                color: theme-color('primary');
+                color: map-get($theme-colors, 'primary');
                 margin-right: 8px;
             }
         }
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 2b1ebe3e52d..2c064ecf88e 100644
--- a/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml
+++ b/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml
@@ -39,7 +39,7 @@
                         <a t-foreach="jobs" t-as="job" t-attf-href="/jobs/detail/#{ slug(job) }" t-attf-class="text-decoration-none#{' mt-3' if job_index else ''}">
                             <div class="card card-default mb32">
                                 <div class="card-body" t-att-data-publish="job.website_published and 'on' or 'off'">
-                                    <span t-if="not job.website_published" class="badge badge-danger mb8 p-2">unpublished</span>
+                                    <span t-if="not job.website_published" class="badge text-bg-danger mb8 p-2">unpublished</span>
                                     <h3 class="text-secondary mt0 mb4">
                                         <span t-field="job.name"/>
                                     </h3>
@@ -80,8 +80,8 @@
             <section class="bg-200">
                 <div class="container">
                     <nav aria-label="breadcrumb">
-                        <ol class="breadcrumb pl-0">
-                            <li class="breadcrumb-item"><a href="/jobs" class="text-secondary font-weight-bold">Jobs</a></li>
+                        <ol class="breadcrumb ps-0">
+                            <li class="breadcrumb-item"><a href="/jobs" class="text-secondary fw-bold">Jobs</a></li>
                             <li class="breadcrumb-item active" aria-current="page"><span t-field="job.name"/></li>
                         </ol>
                     </nav>
@@ -91,11 +91,11 @@
             <section class="pb32">
                 <div class="container">
                     <div class="mt32">
-                        <div class="float-right">
-                            <a role="button" t-attf-href="/jobs/apply/#{job.id}" class="btn btn-primary btn-lg float-right">Apply Now!</a>
+                        <div class="float-end">
+                            <a role="button" t-attf-href="/jobs/apply/#{job.id}" class="btn btn-primary btn-lg float-end">Apply Now!</a>
                         </div>
                         <h1 t-field="job.name"/>
-                        <h5 class="font-weight-light" t-field="job.address_id" t-options='{
+                        <h5 class="fw-light" t-field="job.address_id" t-options='{
                             "widget": "contact",
                             "fields": ["city"],
                             "no_tag_br": True
diff --git a/addons/website_jitsi/static/src/xml/chat_room_modal.xml b/addons/website_jitsi/static/src/xml/chat_room_modal.xml
index 7ab8727c4dd..e98805198e2 100644
--- a/addons/website_jitsi/static/src/xml/chat_room_modal.xml
+++ b/addons/website_jitsi/static/src/xml/chat_room_modal.xml
@@ -6,12 +6,12 @@
                 <div class="modal-content border-0">
                     <main class="modal-body p-0">
                         <div class="o_wjitsi_chat_room_loading position-absolute w-100 text-center text-muted">
-                            <i class="fa fa-spin fa-circle-o-notch mr-3"/>
+                            <i class="fa fa-spin fa-circle-o-notch me-3"/>
                             <span>Loading your room...</span>
                         </div>
                     </main>
                     <footer class="modal-footer">
-                        <button class="btn btn-primary" data-dismiss="modal" type="button">Close</button>
+                        <button class="btn btn-primary" data-bs-dismiss="modal" type="button">Close</button>
                     </footer>
                 </div>
             </div>
diff --git a/addons/website_knowledge/views/knowledge_templates_frontend.xml b/addons/website_knowledge/views/knowledge_templates_frontend.xml
index 4aba21eef4d..f092a15ad1d 100644
--- a/addons/website_knowledge/views/knowledge_templates_frontend.xml
+++ b/addons/website_knowledge/views/knowledge_templates_frontend.xml
@@ -3,7 +3,7 @@
      <template id="website_knowledge_article_view_frontend" name="Website Knowledge Layout" inherit_id="knowledge.knowledge_article_view_frontend">
         <xpath expr="//a[hasclass('o_favorites_toggle_button')]" position="replace">
             <a t-if="not request.env.user._is_public()"
-               href="#" class="o_favorites_toggle_button pl-1" t-att-data-article-id="article.id">
+               href="#" class="o_favorites_toggle_button ps-1" t-att-data-article-id="article.id">
                 <i t-if="article.is_user_favorite" class="fa fa-star" />
                 <i t-else="" class="fa fa-star-o" />
             </a>
diff --git a/addons/website_links/static/src/js/website_links.js b/addons/website_links/static/src/js/website_links.js
index b0067be9bc9..d8961d47cb6 100644
--- a/addons/website_links/static/src/js/website_links.js
+++ b/addons/website_links/static/src/js/website_links.js
@@ -384,7 +384,7 @@ publicWidget.registry.websiteLinks = publicWidget.Widget.extend({
 
         this.url_copy_animating = false;
 
-        $('[data-toggle="tooltip"]').tooltip();
+        $('[data-bs-toggle="tooltip"]').tooltip();
 
         return Promise.all(defs);
     },
diff --git a/addons/website_links/static/src/xml/recent_link.xml b/addons/website_links/static/src/xml/recent_link.xml
index dc41b9003fe..1e9f091cbe2 100644
--- a/addons/website_links/static/src/xml/recent_link.xml
+++ b/addons/website_links/static/src/xml/recent_link.xml
@@ -25,9 +25,9 @@
                     <a class="o_website_links_edit_code" aria-label="Edit code" title="Edit code"><span class="fa fa-pencil gray"></span></a>
 
                     <br/>
-                    <span class="badge badge-success"><t t-esc="widget.link_obj.campaign_id[1]"/></span>
-                    <span class="badge badge-success"><t t-esc="widget.link_obj.medium_id[1]"/></span>
-                    <span class="badge badge-success"><t t-esc="widget.link_obj.source_id[1]"/></span>
+                    <span class="badge text-bg-success"><t t-esc="widget.link_obj.campaign_id[1]"/></span>
+                    <span class="badge text-bg-success"><t t-esc="widget.link_obj.medium_id[1]"/></span>
+                    <span class="badge text-bg-success"><t t-esc="widget.link_obj.source_id[1]"/></span>
                 </p>
                 <p class='o_website_links_code_error' style='color:red;font-weight:bold;'></p>
             </div>
diff --git a/addons/website_links/views/website_links_graphs.xml b/addons/website_links/views/website_links_graphs.xml
index fb1197010f2..d5f31d2cbc5 100644
--- a/addons/website_links/views/website_links_graphs.xml
+++ b/addons/website_links/views/website_links_graphs.xml
@@ -90,11 +90,11 @@
 
 
                         <h1 class="o_page_header">Statistics
-                            <small class="float-right d-none d-md-block mt16" id="filters">
+                            <small class="float-end d-none d-md-block mt16" id="filters">
                                 <ul class="nav nav-tabs nav-tabs-inline graph-tabs" role="tablist">
-                                    <li class="nav-item"><a aria-controls="all_time_charts" href="#all_time_charts" class="nav-link active" role="tab" data-toggle="tab">All Time</a></li>
-                                    <li class="nav-item"><a aria-controls="last_month_charts" href="#last_month_charts" class="nav-link" role="tab" data-toggle="tab">Last Month</a></li>
-                                    <li class="nav-item"><a aria-controls="last_week_charts" href="#last_week_charts" class="nav-link" role="tab" data-toggle="tab">Last Week</a></li>
+                                    <li class="nav-item"><a aria-controls="all_time_charts" href="#all_time_charts" class="nav-link active" role="tab" data-bs-toggle="tab">All Time</a></li>
+                                    <li class="nav-item"><a aria-controls="last_month_charts" href="#last_month_charts" class="nav-link" role="tab" data-bs-toggle="tab">Last Month</a></li>
+                                    <li class="nav-item"><a aria-controls="last_week_charts" href="#last_week_charts" class="nav-link" role="tab" data-bs-toggle="tab">Last Week</a></li>
                                 </ul>
                             </small>
                         </h1>
diff --git a/addons/website_links/views/website_links_template.xml b/addons/website_links/views/website_links_template.xml
index 275082c12d4..39708f2d684 100644
--- a/addons/website_links/views/website_links_template.xml
+++ b/addons/website_links/views/website_links_template.xml
@@ -11,7 +11,7 @@
                             <form id="o_website_links_link_tracker_form">
 
                                 <div class="form-group row" id="url-form-group">
-                                    <label class="col-md-3 col-form-label text-left">URL</label>
+                                    <label class="col-md-3 col-form-label text-start">URL</label>
 
                                     <div class="col-md-9">
                                         <input type="text" id="url" class="form-control required-form-control"  required="True" placeholder="e.g. https://www.odoo.com/contactus" t-att-value="u"/>
@@ -20,7 +20,7 @@
 
                                 <div class="o_website_links_utm_forms">
                                     <div class="form-group row">
-                                        <label class="col-md-3 col-form-label">Campaign <i class="fa fa-info-circle" data-toggle="tooltip" data-placement="top" role="img" aria-label="Tooltip info" title="Defines the context of your link. It might be an event you want to promote or a special promotion."></i></label>
+                                        <label class="col-md-3 col-form-label">Campaign <i class="fa fa-info-circle" data-bs-toggle="tooltip" data-bs-placement="top" role="img" aria-label="Tooltip info" title="Defines the context of your link. It might be an event you want to promote or a special promotion."></i></label>
 
                                         <div class="col-md-9">
                                             <input type="hidden" class="form-control" id="campaign-select"/>
@@ -28,7 +28,7 @@
                                     </div>
 
                                     <div class="form-group row">
-                                        <label class="col-md-3 col-form-label">Medium <i class="fa fa-info-circle" data-toggle="tooltip" data-placement="top" role="img" aria-label="Tooltip info" title="Defines the medium used to share your link. It might be an email, or a Facebook Ads for instance."></i></label>
+                                        <label class="col-md-3 col-form-label">Medium <i class="fa fa-info-circle" data-bs-toggle="tooltip" data-bs-placement="top" role="img" aria-label="Tooltip info" title="Defines the medium used to share your link. It might be an email, or a Facebook Ads for instance."></i></label>
 
                                         <div class="col-md-9">
                                             <input type="hidden" class="form-control" id="channel-select" />
@@ -36,7 +36,7 @@
                                     </div>
 
                                     <div class="form-group row">
-                                        <label class="col-md-3 col-form-label">Source <i class="fa fa-info-circle" data-toggle="tooltip" data-placement="top" role="img" aria-label="Tooltip info" title="Defines the source from which your traffic will come from, Facebook or Twitter for instance."></i></label>
+                                        <label class="col-md-3 col-form-label">Source <i class="fa fa-info-circle" data-bs-toggle="tooltip" data-bs-placement="top" role="img" aria-label="Tooltip info" title="Defines the source from which your traffic will come from, Facebook or Twitter for instance."></i></label>
 
                                         <div class="col-md-9">
                                             <input type="hidden" class="form-control" id="source-select" />
@@ -61,11 +61,11 @@
                     </div>
 
                     <h2 class="o_page_header">Your tracked links
-                        <small class="float-right d-none d-md-block" id="filters">
+                        <small class="float-end d-none d-md-block" id="filters">
                             <ul class="nav nav-tabs nav-tabs-inline graph-tabs" role="tablist">
-                                <li class="nav-item"><a aria-controls="filter-newest-links" href="#" class="nav-link active" id="filter-newest-links" role="tab" data-toggle="tab">Newest</a></li>
-                                <li class="nav-item"><a aria-controls="filter-most-clicked-links" href="#" class="nav-link" id="filter-most-clicked-links" role="tab" data-toggle="tab">Most Clicked</a></li>
-                                <li class="nav-item"><a aria-controls="filter-recently-used-links" href="#" class="nav-link" id="filter-recently-used-links" role="tab" data-toggle="tab">Recently Used</a></li>
+                                <li class="nav-item"><a aria-controls="filter-newest-links" href="#" class="nav-link active" id="filter-newest-links" role="tab" data-bs-toggle="tab">Newest</a></li>
+                                <li class="nav-item"><a aria-controls="filter-most-clicked-links" href="#" class="nav-link" id="filter-most-clicked-links" role="tab" data-bs-toggle="tab">Most Clicked</a></li>
+                                <li class="nav-item"><a aria-controls="filter-recently-used-links" href="#" class="nav-link" id="filter-recently-used-links" role="tab" data-bs-toggle="tab">Recently Used</a></li>
                             </ul>
                         </small>
                     </h2>
diff --git a/addons/website_livechat/static/src/components/visitor_banner/visitor_banner.scss b/addons/website_livechat/static/src/components/visitor_banner/visitor_banner.scss
index 31840198c46..b58df43dc7a 100644
--- a/addons/website_livechat/static/src/components/visitor_banner/visitor_banner.scss
+++ b/addons/website_livechat/static/src/components/visitor_banner/visitor_banner.scss
@@ -9,8 +9,8 @@
 }
 
 .o_VisitorBanner_avatar {
-    height: map-get($sizes, 100);
-    width: map-get($sizes, 100);
+    height: 100%;
+    width: 100%;
     object-fit: cover;
 }
 
diff --git a/addons/website_livechat/views/website_livechat.xml b/addons/website_livechat/views/website_livechat.xml
index 61d0fbe8094..621a1644c3b 100644
--- a/addons/website_livechat/views/website_livechat.xml
+++ b/addons/website_livechat/views/website_livechat.xml
@@ -114,21 +114,21 @@
                                         <div class="col-lg-12">
                                             <div class="row">
                                                 <t t-if="user.partner_id.id in ratings_per_user">
-                                                    <div class="col-lg-4 pl-0 pr-0">
+                                                    <div class="col-lg-4 ps-0 pe-0">
                                                         <img t-attf-src='/rating/static/src/img/rating_5.png' alt="Great" width="16px" height="16px"/>
                                                         <span class="align-middle"><t t-esc="ratings_per_user[user.partner_id.id]['great']"/>%</span>
                                                     </div>
-                                                    <div class="col-lg-4 pl-0 pr-0">
+                                                    <div class="col-lg-4 ps-0 pe-0">
                                                         <img t-attf-src='/rating/static/src/img/rating_3.png' alt="Okay" width="16px" height="16px"/>
                                                         <span class="align-middle"><t t-esc="ratings_per_user[user.partner_id.id]['okay']"/>%</span>
                                                     </div>
-                                                    <div class="col-lg-4 pl-0 pr-0">
+                                                    <div class="col-lg-4 ps-0 pe-0">
                                                         <img t-attf-src='/rating/static/src/img/rating_1.png' alt="Bad" width="16px" height="16px"/>
                                                         <span class="align-middle"><t t-esc="ratings_per_user[user.partner_id.id]['bad']"/>%</span>
                                                     </div>
                                                 </t>
                                                 <t t-else="">
-                                                    <div class="col-lg-12 pl-0 pr-0 o_livechat_no_rating">Not rated yet</div>
+                                                    <div class="col-lg-12 ps-0 pe-0 o_livechat_no_rating">Not rated yet</div>
                                                 </t>
                                             </div>
                                         </div>
diff --git a/addons/website_livechat/views/website_visitor_views.xml b/addons/website_livechat/views/website_visitor_views.xml
index 693dab2a6db..0bff18de2a2 100644
--- a/addons/website_livechat/views/website_visitor_views.xml
+++ b/addons/website_livechat/views/website_visitor_views.xml
@@ -37,11 +37,11 @@
                 <field name="session_count"/>
             </field>
             <xpath expr="//div[hasclass('w_visitor_kanban_actions')]" position="before">
-                <div t-if="record.session_count.raw_value">Chats<span class="float-right font-weight-bold"><field name="session_count"/></span></div>
+                <div t-if="record.session_count.raw_value">Chats<span class="float-end fw-bold"><field name="session_count"/></span></div>
                 <div t-if="record.livechat_operator_id.raw_value">
                     Speaking With
                     <div name="livechat_operator_id"
-                        class="font-weight-bold float-right d-inline-block">
+                        class="fw-bold float-end d-inline-block">
                         <img class="oe_avatar rounded-circle" width="19" height="19"
                             t-attf-src="/web/image/res.partner/#{record.livechat_operator_id.raw_value}/avatar_128"
                             alt="Operator Avatar"/>
@@ -54,7 +54,7 @@
             </xpath>
             <xpath expr="//div[hasclass('w_visitor_kanban_actions_ungrouped')]" position="before">
                 <div class="col-lg col-sm-4 col-6 py-0 my-2">
-                    <span t-att-class="record.session_count.raw_value ? 'font-weight-bold' : 'text-muted'">
+                    <span t-att-class="record.session_count.raw_value ? 'fw-bold' : 'text-muted'">
                         <field name="session_count"/>
                     </span>
                     <div t-att-class="record.session_count.raw_value ? '' : 'text-muted'">Chats</div>
diff --git a/addons/website_mail/static/src/css/website_mail.scss b/addons/website_mail/static/src/css/website_mail.scss
index c83a048eea9..1f124d0138c 100644
--- a/addons/website_mail/static/src/css/website_mail.scss
+++ b/addons/website_mail/static/src/css/website_mail.scss
@@ -31,12 +31,12 @@
     }
 
     .js_unfollow_btn .fa:before {
-        color: theme-color('primary');
+        color: map-get($theme-colors, 'primary');
     }
 
     .js_unfollow_btn:hover .fa:before {
         content: "\f1f6";
-        color: theme-color('danger');
+        color: map-get($theme-colors, 'danger');
     }
 }
 
diff --git a/addons/website_mail/static/src/js/follow.js b/addons/website_mail/static/src/js/follow.js
index 878a2c9279d..18c24235762 100644
--- a/addons/website_mail/static/src/js/follow.js
+++ b/addons/website_mail/static/src/js/follow.js
@@ -105,10 +105,10 @@ publicWidget.registry.follow = publicWidget.Widget.extend({
         var $email = $jsFollow.find(".js_follow_email");
 
         if ($email.length && !$email.val().match(/.+@.+/)) {
-            $jsFollow.addClass('o_has_error').find('.form-control, .custom-select').addClass('is-invalid');
+            $jsFollow.addClass('o_has_error').find('.form-control, .form-select').addClass('is-invalid');
             return false;
         }
-        $jsFollow.removeClass('o_has_error').find('.form-control, .custom-select').removeClass('is-invalid');
+        $jsFollow.removeClass('o_has_error').find('.form-control, .form-select').removeClass('is-invalid');
 
         var email = $email.length ? $email.val() : false;
         if (email || this.isUser) {
diff --git a/addons/website_mail/views/website_mail_templates.xml b/addons/website_mail/views/website_mail_templates.xml
index 3772b5deb95..68a54505e8a 100644
--- a/addons/website_mail/views/website_mail_templates.xml
+++ b/addons/website_mail/views/website_mail_templates.xml
@@ -13,12 +13,12 @@
             <div t-if="icons_design and not request.env.user.has_group('base.group_public')" class="js_follow_icons_container">
                 <button class="btn text-reset js_unfollow_btn">
                     <div class="d-flex align-items-center">
-                        <small>Unfollow</small><i class="fa fa-fw ml-1"/>
+                        <small>Unfollow</small><i class="fa fa-fw ms-1"/>
                     </div>
                 </button>
                 <button class="btn text-reset js_follow_btn">
                     <div class="d-flex align-items-center">
-                        <small>Follow</small><i class="fa fa-fw ml-1"/>
+                        <small>Follow</small><i class="fa fa-fw ms-1"/>
                     </div>
                 </button>
             </div>
diff --git a/addons/website_mass_mailing/static/tests/tours/newsletter_block.js b/addons/website_mass_mailing/static/tests/tours/newsletter_block.js
index 4cb921e6e8d..efde36c722c 100644
--- a/addons/website_mass_mailing/static/tests/tours/newsletter_block.js
+++ b/addons/website_mass_mailing/static/tests/tours/newsletter_block.js
@@ -40,7 +40,7 @@ wTourUtils.registerEditionTour('newsletter_block_edition', {
     },
     {
         content: 'Click on the link style button',
-        trigger: '[data-original-title="Link Style"]',
+        trigger: '[data-bs-original-title="Link Style"]',
     },
     {
         content: 'Click on the primary style button',
@@ -48,7 +48,7 @@ wTourUtils.registerEditionTour('newsletter_block_edition', {
     },
     {
         content: 'Change the shape of the button',
-        trigger: '[data-original-title="Link Shape"]',
+        trigger: '[data-bs-original-title="Link Shape"]',
     },
     {
         content: 'Click on the flat shape button',
diff --git a/addons/website_mass_mailing/views/snippets_templates.xml b/addons/website_mass_mailing/views/snippets_templates.xml
index 1ff75c0483b..599bbcac925 100644
--- a/addons/website_mass_mailing/views/snippets_templates.xml
+++ b/addons/website_mass_mailing/views/snippets_templates.xml
@@ -53,7 +53,7 @@
         <div class="modal fade s_popup_middle o_newsletter_modal"
              style="background-color: var(--black-50) !important;"
              data-show-after="5000" data-display="afterDelay" data-consents-duration="7"
-             data-focus="false" data-backdrop="false" tabindex="-1" role="dialog">
+             data-focus="false" data-bs-backdrop="false" tabindex="-1" role="dialog">
             <div class="modal-dialog d-flex">
                 <div class="modal-content oe_structure">
                     <div class="s_popup_close js_close_popup o_we_no_overlay o_not_editable" aria-label="Close">&#215;</div>
@@ -66,7 +66,7 @@
                     </section>
                     <section class="s_text_block" data-snippet="s_text_block" data-name="Text">
                         <div class="container">
-                            <div class="row s_nb_column_fixed no-gutters">
+                            <div class="row s_nb_column_fixed g-0">
                                 <div class="col-lg-8 offset-lg-2 pt32 pb32">
                                     <t t-snippet-call="website_mass_mailing.s_newsletter_subscribe_form"/>
                                 </div>
diff --git a/addons/website_membership/views/website_membership_templates.xml b/addons/website_membership/views/website_membership_templates.xml
index f45631b096d..2adb026239c 100644
--- a/addons/website_membership/views/website_membership_templates.xml
+++ b/addons/website_membership/views/website_membership_templates.xml
@@ -35,9 +35,9 @@
             <div class="col-lg-8" id="ref_content">
                 <div class='d-flex m-2'>
                     <t t-call="website.pager">
-                       <t t-set="classname" t-valuef="float-left"/>
+                       <t t-set="classname" t-valuef="float-start"/>
                     </t>
-                    <form action="" method="get" class="navbar-search ml-auto pagination form-inline">
+                    <form action="" method="get" class="navbar-search ms-auto pagination form-inline">
                         <t t-call="website.website_search_box">
                             <t t-set="search" t-value="post.get('search', '')"/>
                         </t>
@@ -55,7 +55,7 @@
                                 <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"}'
+                                       t-options='{"widget": "image", "qweb_img_responsive": False, "class": "o_image_64_cover me-3"}'
                                     ></a>
                                     <div class="flex-grow-1" style="min-height: 64px;">
                                         <a t-attf-href="/members/#{slug(partner)}">
@@ -86,7 +86,7 @@
                 <li t-if="country['country_id']" class="nav-item">
                     <a t-attf-href="/members#{ membership_id and '/association/%s' % membership_id or '' }#{ country['country_id'][0] and '/country/%s' % slug(country['country_id']) or '' }#{ search }"
                         t-attf-class="nav-link#{country['country_id'] and country['country_id'][0] == current_country_id and ' active' or ''}"><t t-esc="country['country_id'][1]"/>
-                        <span class="badge badge-pill float-right"><t t-esc="country['country_id_count'] or '0'"/></span>
+                        <span class="badge rounded-pill float-end"><t t-esc="country['country_id_count'] or '0'"/></span>
                     </a>
                 </li>
             </t>
@@ -105,7 +105,7 @@
                 <div class="modal-content">
                     <header class="modal-header">
                         <h4 class="modal-title">World Map</h4>
-                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                     </header>
                     <iframe t-attf-src="/google_map/?width=898&amp;height=485&amp;partner_ids=#{ google_map_partner_ids }&amp;partner_url=/members/"
                     style="width:898px; height:485px; border:0; padding:0; margin:0;"></iframe>
@@ -113,7 +113,7 @@
               </div>
             </div>
             <!-- modal end -->
-            <h3>World Map<button class="btn btn-link" data-toggle="modal" data-target=".partner_map_modal"><span class="fa fa-external-link" role="img" aria-label="External link" title="External link"/></button></h3>
+            <h3>World Map<button class="btn btn-link" data-bs-toggle="modal" data-bs-target=".partner_map_modal"><span class="fa fa-external-link" role="img" aria-label="External link" title="External link"/></button></h3>
             <ul class="nav">
                 <iframe t-attf-src="/google_map/?width=260&amp;height=240&amp;partner_ids=#{ google_map_partner_ids }&amp;partner_url=/members/"
                     style="width:260px; height:240px; border:0; padding:0; margin:0;"></iframe>
diff --git a/addons/website_payment/static/src/snippets/s_donation/000.js b/addons/website_payment/static/src/snippets/s_donation/000.js
index 97f30e9eb03..5a704a35997 100644
--- a/addons/website_payment/static/src/snippets/s_donation/000.js
+++ b/addons/website_payment/static/src/snippets/s_donation/000.js
@@ -77,7 +77,7 @@ publicWidget.registry.DonationSnippet = publicWidget.Widget.extend({
                 const before = result.position === "before";
                 const $currencySymbol = document.createElement('span');
                 $currencySymbol.innerText = result.symbol;
-                $currencySymbol.classList.add('s_donation_currency', before ? "pr-1" : "pl-1");
+                $currencySymbol.classList.add('s_donation_currency', before ? "pe-1" : "ps-1");
                 if (before) {
                     $(button).prepend($currencySymbol);
                 } else {
diff --git a/addons/website_payment/static/src/snippets/s_donation/000.scss b/addons/website_payment/static/src/snippets/s_donation/000.scss
index 215229dfff4..779e6e07cca 100644
--- a/addons/website_payment/static/src/snippets/s_donation/000.scss
+++ b/addons/website_payment/static/src/snippets/s_donation/000.scss
@@ -35,7 +35,7 @@
             margin-top: 28px;
             padding: 0.5rem 1rem;
             color: color-contrast(o-color('primary'));
-            background: theme-color('primary');
+            background: map-get($theme-colors, 'primary');
             font-size: 1.15rem;
             border-radius: 0.3rem;
             transform: translateX(-50%);
@@ -47,7 +47,7 @@
                 left: 50%;
                 width: 0;
                 border-style: solid;
-                border-color: theme-color('primary') transparent;
+                border-color: map-get($theme-colors, 'primary') transparent;
                 border-width: 0 5px 5px;
                 margin-left: -5px;
             }
diff --git a/addons/website_payment/static/src/snippets/s_donation/000.xml b/addons/website_payment/static/src/snippets/s_donation/000.xml
index ba9b81a9688..f03a036e39d 100644
--- a/addons/website_payment/static/src/snippets/s_donation/000.xml
+++ b/addons/website_payment/static/src/snippets/s_donation/000.xml
@@ -3,13 +3,13 @@
     <t t-name="website_payment.donation.prefilledButtons">
         <div class="s_donation_prefilled_buttons mb-2">
             <t t-foreach="prefilled_buttons" t-as="prefilled_button_value">
-                <button class="s_donation_btn btn btn-outline-primary btn-lg mb-2 mr-1 o_not_editable"
+                <button class="s_donation_btn btn btn-outline-primary btn-lg mb-2 me-1 o_not_editable"
                         type="button"
                         contenteditable="false"
                         t-att-data-donation-value="prefilled_button_value"
                         t-esc="prefilled_button_value"/>
             </t>
-            <span t-if="custom_input" class="s_donation_btn s_donation_custom_btn btn btn-outline-primary btn-lg mb-2 mr-1">
+            <span t-if="custom_input" class="s_donation_btn s_donation_custom_btn btn btn-outline-primary btn-lg mb-2 me-1">
                 <input id="s_donation_amount_input" type="number" t-att-min="minimum_amount" class="" placeholder="Custom Amount" aria-label="Amount"/>
             </span>
         </div>
@@ -18,11 +18,11 @@
         <div class="s_donation_prefilled_buttons my-4">
             <t t-foreach="prefilled_buttons" t-as="prefilled_button">
                 <div class="s_donation_btn_description d-sm-flex align-items-center my-3 o_not_editable o_translate_mode_hidden" contenteditable="false">
-                    <button class="s_donation_btn btn btn-outline-primary btn-lg mr-3"
+                    <button class="s_donation_btn btn btn-outline-primary btn-lg me-3"
                             type="button"
                             t-att-data-donation-value="prefilled_button.value"
                             t-esc="prefilled_button.value"/>
-                    <p class="s_donation_description mt-2 my-sm-auto text-muted font-italic" t-esc="prefilled_button.description"></p>
+                    <p class="s_donation_description mt-2 my-sm-auto text-muted fst-italic" t-esc="prefilled_button.description"></p>
                 </div>
             </t>
             <div t-if="custom_input" class="d-sm-flex align-items-center my-3">
@@ -35,7 +35,7 @@
     <t t-name="website_payment.donation.slider">
         <div class="s_donation_range_slider_wrap mb-2 position-relative">
             <label for="s_donation_range_slider">Choose Your Amount</label>
-            <input type="range" class="custom-range" t-att-min="minimum_amount" t-att-max="maximum_amount" t-att-step="slider_step" id="s_donation_range_slider" contenteditable="false"/>
+            <input type="range" class="form-range" t-att-min="minimum_amount" t-att-max="maximum_amount" t-att-step="slider_step" id="s_donation_range_slider" contenteditable="false"/>
             <output class="s_range_bubble" contenteditable="false">25</output>
         </div>
     </t>
diff --git a/addons/website_payment/views/donation_templates.xml b/addons/website_payment/views/donation_templates.xml
index 494fe0dc5f5..d2baf4bcb1c 100644
--- a/addons/website_payment/views/donation_templates.xml
+++ b/addons/website_payment/views/donation_templates.xml
@@ -8,26 +8,26 @@
                 <t t-set="donation_confirm_button_icon_class" t-valuef="fa-gift"/>
                 <t t-set="donation_confirm_button_label">Donate Now</t>
                 <h3 class="o_page_header mt16 mb4">Donation</h3>
-                <div class="form-row">
+                <div class="row">
                     <div t-attf-class="form-group #{error.get('name') and 'o_has_error' or ''} col-lg-12 div_name">
-                        <label class="col-form-label font-weight-bold" for="name">Name
+                        <label class="col-form-label fw-bold" for="name">Name
                             <span class="s_website_form_mark"> *</span>
                         </label>
                         <input t-att-readonly="'1' if 'name' in partner_details and partner_id else None" type="text" name="name" t-attf-class="form-control #{error.get('name') and 'is-invalid' or ''}" t-att-value="partner_details.get('name')" />
                     </div>
                     <div class="w-100"/>
                     <div t-attf-class="form-group #{error.get('email') and 'o_has_error' or ''} col-lg-6" id="div_email">
-                        <label class="col-form-label font-weight-bold" for="email">Email
+                        <label class="col-form-label fw-bold" for="email">Email
                             <span class="s_website_form_mark"> *</span>
                         </label>
                         <input t-att-readonly="'1' if 'email' in partner_details and partner_id else None" type="email" name="email" t-attf-class="form-control #{error.get('email') and 'is-invalid' or ''}" t-att-value="partner_details.get('email')" />
                     </div>
                     <t t-set="country_id" t-value="partner_details.get('country_id')"/>
                     <div t-attf-class="form-group #{error.get('country_id') and 'o_has_error' or ''} col-lg-6 div_country">
-                        <label class="col-form-label font-weight-bold" for="country_id">Country
+                        <label class="col-form-label fw-bold" for="country_id">Country
                             <span class="s_website_form_mark"> *</span>
                         </label>
-                        <select t-att-disabled="'1' if country_id and partner_id else None" id="country_id" name="country_id" t-attf-class="o_wpayment_fee_impact form-control #{error.get('country_id') and 'is-invalid' or ''}">
+                        <select t-att-disabled="'1' if country_id and partner_id else None" id="country_id" name="country_id" t-attf-class="o_wpayment_fee_impact form-select #{error.get('country_id') and 'is-invalid' or ''}">
                             <option value="">Country...</option>
                             <t t-foreach="countries" t-as="c">
                                 <option t-att-value="c.id" t-att-selected="c.id == (country_id or -1)">
@@ -39,29 +39,29 @@
                     <div class="w-100"/>
                     <div class="form-group col-lg-12 o_donation_payment_form">
                         <div class="col-lg-6 px-0">
-                            <label class="col-form-label font-weight-bold">Amount (<t t-out="currency.symbol"/>)</label>
+                            <label class="col-form-label fw-bold">Amount (<t t-out="currency.symbol"/>)</label>
                             <t t-set="donation_layout" t-value="donation_options.get('customAmount')"/>
                             <t t-set="prefilled_options" t-value="donation_options.get('prefilledOptions')"/>
                             <t t-if="prefilled_options">
                                 <t t-foreach="donation_amounts" t-as="donation_amount">
-                                    <div class="custom-control custom-radio my-2">
+                                    <div class="custom-control form-check my-2">
                                         <t t-set="is_checked" t-value="float(amount) == float(donation_amount)"/>
                                         <t t-set="has_checked" t-value="has_checked or is_checked"/>
-                                        <input class="o_wpayment_fee_impact custom-control-input" type="radio" name="amount"
+                                        <input class="o_wpayment_fee_impact form-check-input" type="radio" name="amount"
                                             t-attf-id="amount_#{donation_amount_index}" t-att-value="donation_amount"
                                             t-att-checked="is_checked or None"/>
-                                        <label class="custom-control-label mt-0" t-attf-for="amount_#{donation_amount_index}">
+                                        <label class="form-check-label mt-0" t-attf-for="amount_#{donation_amount_index}">
                                             <t t-out="donation_amount"/>
-                                            <span t-if="donation_options.get('descriptions')" class="text-muted font-italic ml-1">
+                                            <span t-if="donation_options.get('descriptions')" class="text-muted fst-italic ms-1">
                                                 - <t t-out="donation_descriptions[donation_amount_index]"/>
                                             </span>
                                         </label>
                                     </div>
                                 </t>
-                                <div t-attf-class="custom-control custom-radio my-2 #{not donation_layout and 'd-none' or ''}">
-                                    <input class="o_wpayment_fee_impact custom-control-input" type="radio" id="other_amount" name="amount"
+                                <div t-attf-class="custom-control form-check my-2 #{not donation_layout and 'd-none' or ''}">
+                                    <input class="o_wpayment_fee_impact form-check-input" type="radio" id="other_amount" name="amount"
                                         t-att-value="amount" t-att-checked="not has_checked or None"/>
-                                    <label class="custom-control-label mt-0 d-block" for="other_amount">
+                                    <label class="form-check-label mt-0 d-block" for="other_amount">
                                         <t t-call="website_payment.donation_input">
                                             <t t-set="amount" t-value="not has_checked and amount or ''"/>
                                         </t>
@@ -73,9 +73,9 @@
                             </t>
                         </div>
                         <div class="col-lg-12 px-0">
-                            <div class="custom-control custom-checkbox mt-3">
-                                <input class="custom-control-input" type="checkbox" value="" id="donation_comment_checkbox"/>
-                                <label class="custom-control-label" for="donation_comment_checkbox">Write us a comment</label>
+                            <div class="custom-control form-check mt-3">
+                                <input class="form-check-input" type="checkbox" value="" id="donation_comment_checkbox"/>
+                                <label class="form-check-label" for="donation_comment_checkbox">Write us a comment</label>
                             </div>
                             <textarea class="form-control d-none mt-2" id="donation_comment" placeholder="Your comment"/>
                         </div>
diff --git a/addons/website_payment/views/res_config_settings_views.xml b/addons/website_payment/views/res_config_settings_views.xml
index b6ce835c591..7ccc305992b 100644
--- a/addons/website_payment/views/res_config_settings_views.xml
+++ b/addons/website_payment/views/res_config_settings_views.xml
@@ -16,18 +16,18 @@
                                 Support most payment methods; Visa, Mastercard, Maestro, Google Pay, Apple Pay, etc. as well as recurring charges.
                             </div>
                             <div class="content-group">
-                                <div class="row mt8 ml-4" attrs="{'invisible': [('acquirers_state', '=', 'other_than_paypal')]}">
+                                <div class="row mt8 ms-4" attrs="{'invisible': [('acquirers_state', '=', 'other_than_paypal')]}">
                                     <field name="acquirers_state" invisible="1"/>
                                     <field name="is_stripe_supported_country" invisible="1"/>
                                     <button attrs="{'invisible': [('is_stripe_supported_country', '=', False)]}"
                                             name="action_activate_stripe" type="object" string="Activate Stripe" class="btn-primary"/>
-                                    <div attrs="{'invisible': [('is_stripe_supported_country', '=', True)]}" data-toggle="tooltip" title="Stripe Connect is not available in your country, please use another payment provider.">
+                                    <div attrs="{'invisible': [('is_stripe_supported_country', '=', True)]}" data-bs-toggle="tooltip" title="Stripe Connect is not available in your country, please use another payment provider.">
                                         <button string="Activate Stripe" class="btn-primary pe-none" disabled=""
                                                 style="pointer-events: none;"/>
                                     </div>
                                     <button type="action" name="%(payment.action_payment_acquirer)d" string="View Alternatives" class="btn-link" icon="fa-arrow-right"/>
                                 </div>
-                                <div class="row mt8 ml-4" attrs="{'invisible': [('acquirers_state', '!=', 'other_than_paypal')]}">
+                                <div class="row mt8 ms-4" attrs="{'invisible': [('acquirers_state', '!=', 'other_than_paypal')]}">
                                     <button name="action_configure_first_provider" type="object" class="btn-primary col-auto"><field name="first_provider_label" nolabel="1"/></button>
                                     <button type="action" name="%(payment.action_payment_acquirer)d" string="View other providers " class="btn-link col-auto" icon="fa-arrow-right"/>
                                 </div>
diff --git a/addons/website_payment_authorize/views/res_config_settings_views.xml b/addons/website_payment_authorize/views/res_config_settings_views.xml
index 907a495d75e..1d4e63cb957 100644
--- a/addons/website_payment_authorize/views/res_config_settings_views.xml
+++ b/addons/website_payment_authorize/views/res_config_settings_views.xml
@@ -15,7 +15,7 @@
                         </div>
                         <div class="content-group">
                             <div class="content-group">
-                                <div class="row mt16 ml-4">
+                                <div class="row mt16 ms-4">
                                     <field name="authorize_capture_method" class="w-75" widget="radio"/>
                                 </div>
                             </div>
diff --git a/addons/website_payment_paypal/views/res_config_settings_views.xml b/addons/website_payment_paypal/views/res_config_settings_views.xml
index 1ecfffd1172..183fe778095 100644
--- a/addons/website_payment_paypal/views/res_config_settings_views.xml
+++ b/addons/website_payment_paypal/views/res_config_settings_views.xml
@@ -8,7 +8,7 @@
         <field name="arch" type="xml">
             <div id="website_payment_right_pane" position="inside">
                 <div class="content-group">
-                    <div class="row mt8 ml-4">
+                    <div class="row mt8 ms-4">
                         <label class="col-lg-3" string="Email" for="paypal_email_account"/>
                         <field name="paypal_email_account"/>
                     </div>
diff --git a/addons/website_profile/static/src/scss/website_profile.scss b/addons/website_profile/static/src/scss/website_profile.scss
index c0547b54270..f7608e1c77e 100644
--- a/addons/website_profile/static/src/scss/website_profile.scss
+++ b/addons/website_profile/static/src/scss/website_profile.scss
@@ -14,7 +14,8 @@ $owprofile-color-bg: mix($body-bg, #efeff4);
 }
 
 .o_wprofile_pict {
-    @include size(100%);
+    width: 100%;
+    height: 100%;
     padding-top: 30%;
     background-size: cover;
     background-position: center;
@@ -117,8 +118,8 @@ $owprofile-color-bg: mix($body-bg, #efeff4);
         }
 
         #gradient {
-            --o-pc-color-stop-1: #{lighten(theme-color('primary'), 10%)};
-            --o-pc-color-stop-2: #{theme-color('primary')};
+            --o-pc-color-stop-1: #{lighten(map-get($theme-colors, 'primary'), 10%)};
+            --o-pc-color-stop-2: #{map-get($theme-colors, 'primary')};
         }
     }
 
@@ -252,5 +253,5 @@ $owprofile-color-bg: mix($body-bg, #efeff4);
 
 // Own profile border
 .o_wprofile_border_focus {
-    border-left: 4px solid theme-color('secondary');
+    border-left: 4px solid map-get($theme-colors, 'secondary');
 }
diff --git a/addons/website_profile/views/website_profile.xml b/addons/website_profile/views/website_profile.xml
index b52470833f4..a6925b3a819 100644
--- a/addons/website_profile/views/website_profile.xml
+++ b/addons/website_profile/views/website_profile.xml
@@ -7,7 +7,7 @@
                 <div class="row align-items-center justify-content-between">
                     <!-- Desktop Mode -->
                     <nav aria-label="breadcrumb" class="col d-none d-md-flex">
-                        <ol class="breadcrumb bg-transparent mb-0 pl-0 py-0">
+                        <ol class="breadcrumb bg-transparent mb-0 ps-0 py-0">
                             <li t-attf-class="breadcrumb-item #{'active' if not view_user else ''}">
                                 <a href="/profile/users">Users</a>
                             </li>
@@ -20,11 +20,11 @@
                     <div class="col d-none d-md-flex flex-row align-items-center justify-content-end">
                         <!-- search -->
                         <form t-attf-action="/profile/users" role="search" method="get">
-                            <div class="input-group o_wprofile_course_nav_search ml-1 position-relative">
-                                <button class="btn btn-link text-white border-1 rounded-0 pr-1 mr-2" type="submit" aria-label="Search" title="Search">
+                            <div class="input-group o_wprofile_course_nav_search ms-1 position-relative">
+                                <button class="btn btn-link text-white border-1 rounded-0 pe-1 me-2" type="submit" aria-label="Search" title="Search">
                                     <i class="fa fa-search border-1"></i>
                                 </button>
-                                <input type="text" class="form-control border-0 rounded-0 bg-transparent text-white ml-auto" name="search" placeholder="Search users"/>
+                                <input type="text" class="form-control border-0 rounded-0 bg-transparent text-white ms-auto" name="search" placeholder="Search users"/>
                             </div>
                         </form>
                     </div>
@@ -32,8 +32,8 @@
                     <!-- Mobile Mode -->
                     <div class="col d-md-none py-1 o_wprofile_user_profile_sub_nav_mobile_col">
                         <div class="btn-group w-100 position-relative" role="group" aria-label="Mobile sub-nav">
-                            <div class="btn-group w-100 ml-2">
-                                <a class="btn bg-black-25 text-white dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Nav</a>
+                            <div class="btn-group w-100 ms-2">
+                                <a class="btn bg-black-25 text-white dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Nav</a>
 
                                 <ul class="dropdown-menu">
                                     <a class="dropdown-item" t-att-href="home_url or '/'">Home</a>
@@ -42,9 +42,9 @@
                                 </ul>
                             </div>
 
-                            <div class="btn-group ml-1 position-static mr-2">
-                                <a class="btn bg-black-25 text-white dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-search"></i></a>
-                                <div class="dropdown-menu dropdown-menu-right w-100" style="right: 10px;">
+                            <div class="btn-group ms-1 position-static me-2">
+                                <a class="btn bg-black-25 text-white dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-search"></i></a>
+                                <div class="dropdown-menu dropdown-menu-end w-100" style="right: 10px;">
                                     <form class="px-3" t-attf-action="/profile/users" role="search" method="get">
                                         <div class="input-group">
                                             <input type="text" class="form-control" name="search" placeholder="Search courses"/>
@@ -91,15 +91,15 @@
                             <img class="o_forum_avatar_img w-100 mb-3" t-att-src="website.image_url(user, 'avatar_128')"/>
                             <div class="text-center">
                                 <a href="#" class="o_forum_profile_pic_edit btn btn-primary" aria-label="Edit">
-                                    <i class="fa fa-pencil fa-1g float-sm-none float-md-left" title="Edit"></i>
+                                    <i class="fa fa-pencil fa-1g float-sm-none float-md-start" title="Edit"></i>
                                 </a>
                                 <a href="#" title="Clear" aria-label="Clear" class="btn border-primary o_forum_profile_pic_clear">
-                                    <i class="fa fa-trash-o float-sm-none float-md-right"></i>
+                                    <i class="fa fa-trash-o float-sm-none float-md-end"></i>
                                 </a>
                             </div>
                             <div class="form-group mt-3 mb-0 pt-2 border-top">
-                                <label class="text-primary" for="user_website_published" t-if="user.id == uid"><span class="font-weight-bold">Public profile</span></label>
-                                <div class=" mb-0 float-right" t-if="user.id == uid">
+                                <label class="text-primary" for="user_website_published" t-if="user.id == uid"><span class="fw-bold">Public profile</span></label>
+                                <div class=" mb-0 float-end" t-if="user.id == uid">
                                     <input type="checkbox" class="mt8" name="website_published" id="user_website_published" value="True" t-if="not user.website_published"/>
                                     <input type="checkbox" class="mt8" name="website_published" id="user_website_published" value="True" checked="checked" t-if="user.website_published"/>
                                 </div>
@@ -113,38 +113,38 @@
                             <div class="row">
                                 <input name="user_id" t-att-value="user.id" type="hidden"/>
                                 <div class="form-group col-12">
-                                    <label class="text-primary mb-1 d-block" for="user_name"><span class="font-weight-bold">Name</span></label>
+                                    <label class="text-primary mb-1 d-block" for="user_name"><span class="fw-bold">Name</span></label>
                                     <div>
                                         <input type="text" class="form-control" name="name" id="user_name" required="True" t-attf-value="#{user.name}"/>
                                     </div>
                                 </div>
 
                                 <div class="form-group col-6">
-                                    <label class="mb-1 text-primary" for="user_website"><span class="font-weight-bold">Website</span></label>
+                                    <label class="mb-1 text-primary" for="user_website"><span class="fw-bold">Website</span></label>
                                     <div>
                                         <input type="text" class="form-control" name="website" id="user_website" t-attf-value="#{user.partner_id.website or ''}"/>
                                     </div>
                                 </div>
                                 <div class="form-group col-6">
                                     <div t-if="email_required" class="alert alert-danger alert-dismissable oe_email_required" role="alert">
-                                        <button type="button" class="close" data-dismiss="alert">x</button>
+                                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                                         <p>Please enter a valid email address in order to receive notifications from answers or comments.</p>
                                     </div>
-                                    <label class="mb-1 text-primary" for="user_email"><span class="font-weight-bold">Email</span></label>
+                                    <label class="mb-1 text-primary" for="user_email"><span class="fw-bold">Email</span></label>
                                     <div>
                                         <input type="text" class="form-control" name="email" id="user_email" required="True" t-attf-value="#{user.partner_id.email}"/>
                                     </div>
                                 </div>
                                 <div class="form-group col-6">
-                                    <label class="mb-1 text-primary" for="user_city"><span class="font-weight-bold">City</span></label>
+                                    <label class="mb-1 text-primary" for="user_city"><span class="fw-bold">City</span></label>
                                     <div>
                                         <input type="text" class="form-control" name="city" id="user_city" t-attf-value="#{user.partner_id.city or ''}"/>
                                     </div>
                                 </div>
                                 <div class="form-group col-6">
-                                    <label class="mb-1 text-primary"><span class="font-weight-bold">Country</span></label>
+                                    <label class="mb-1 text-primary"><span class="fw-bold">Country</span></label>
                                     <div>
-                                        <select class="form-control" name="country">
+                                        <select class="form-select" name="country">
                                             <option value="">Country...</option>
                                             <t t-foreach="countries or []" t-as="country">
                                                 <option t-att-value="country.id" t-att-selected="country.id == user.partner_id.country_id.id"><t t-esc="country.name"/></option>
@@ -153,7 +153,7 @@
                                     </div>
                                 </div>
                                 <div class="form-group col-12">
-                                    <label class="mb-1 text-primary" for="description"><span class="font-weight-bold">Biography</span></label>
+                                    <label class="mb-1 text-primary" for="description"><span class="fw-bold">Biography</span></label>
                                     <textarea name="description" id="description" style="min-height: 120px"
                                         class="form-control o_wysiwyg_loader"><t t-esc="user.partner_id.website_description"/></textarea>
                                 </div>
@@ -194,7 +194,7 @@
                             <a class="btn btn-primary d-inline-block d-md-none"
                                 t-if="request.env.user == user and user.karma != 0"
                                 t-attf-href="/profile/edit?url_param=#{edit_button_url_param}&amp;user_id=#{user.id}">
-                                <i class="fa fa-pencil mr-1"/>EDIT
+                                <i class="fa fa-pencil me-1"/>EDIT
                             </a>
                         </div>
                     </div>
@@ -206,20 +206,20 @@
                                 <span t-field="user.name"/><small t-if="user.karma == 0"> (not verified)</small>
                             </h1>
                             <a class="btn btn-primary d-none d-md-inline-block" t-if="request.env.user == user and user.karma != 0 or request.env.user._is_admin()" t-attf-href="/profile/edit?url_param=#{edit_button_url_param}&amp;user_id=#{user.id}">
-                                <i class="fa fa-pencil mr-2"/>EDIT PROFILE
+                                <i class="fa fa-pencil me-2"/>EDIT PROFILE
                             </a>
                         </div>
 
                         <div class="d-flex flex-column justify-content-center flex-grow-1 mb-0 mb-md-5">
                             <div t-if="user.partner_id.company_name" class="lead mb-2">
-                                <i class="fa fa-building-o fa-fw mr-1"/><span t-field="user.partner_id.company_name"/>
+                                <i class="fa fa-building-o fa-fw me-1"/><span t-field="user.partner_id.company_name"/>
                             </div>
                             <div t-if="user.city or user.country_id" class="lead mb-2">
-                                <i class="fa fa-map-marker fa-fw mr-1"/>
-                                <span t-field="user.city"/><span class="text-nowrap ml-1" t-if="user.country_id">(<span t-field="user.country_id"/>)</span>
+                                <i class="fa fa-map-marker fa-fw me-1"/>
+                                <span t-field="user.city"/><span class="text-nowrap ms-1" t-if="user.country_id">(<span t-field="user.country_id"/>)</span>
                             </div>
                             <div t-if="user.website" class="lead mb-2">
-                                <i class="fa fa-globe fa-fw mr-1"/><span t-field="user.website"/>
+                                <i class="fa fa-globe fa-fw me-1"/><span t-field="user.website"/>
                             </div>
                         </div>
                     </div>
@@ -237,15 +237,15 @@
                     <div class="o_wprofile_sidebar bg-white px-3 py-2 py-md-3 mb-3 mb-md-5">
                         <div class="o_wprofile_sidebar_top d-flex justify-content-between">
                             <div t-if="user.rank_id" class="d-flex align-items-center">
-                                <small class="font-weight-bold mr-2">Current rank:</small>
-                                <img t-att-src="website.image_url(user.rank_id, 'image_128')" width="16" height="16" alt="" class="o_object_fit_cover mr-1"/>
+                                <small class="fw-bold me-2">Current rank:</small>
+                                <img t-att-src="website.image_url(user.rank_id, 'image_128')" width="16" height="16" alt="" class="o_object_fit_cover me-1"/>
                                 <a t-attf-href="/profile/ranks_badges?url_origin=#{request.httprequest.path}&amp;name_origin=#{user.name}" t-field="user.rank_id"/>
                             </div>
-                            <button class="btn btn-sm d-md-none bg-white border" type="button" data-toggle="collapse" data-target="#o_wprofile_sidebar_collapse" aria-expanded="false" aria-controls="o_wprofile_sidebar_collapse">More info</button>
+                            <button class="btn btn-sm d-md-none bg-white border" type="button" data-bs-toggle="collapse" data-bs-target="#o_wprofile_sidebar_collapse" aria-expanded="false" aria-controls="o_wprofile_sidebar_collapse">More info</button>
                         </div>
                         <div class="collapse d-md-block" id="o_wprofile_sidebar_collapse">
                             <t t-set="next_rank_id" t-value="user._get_next_rank()"/>
-                            <small t-if="next_rank_id" class="font-weight-bold mt-1">Next rank:</small>
+                            <small t-if="next_rank_id" class="fw-bold mt-1">Next rank:</small>
                             <t t-if="next_rank_id or user.rank_id" t-call="website_profile.profile_next_rank_card">
                                 <t t-set="img_max_width" t-value="'40%'"/>
                             </t>
@@ -253,11 +253,11 @@
                             <table class="table table-sm w-100" id="o_wprofile_sidebar_table">
                                 <tbody>
                                     <tr>
-                                        <th><small class="font-weight-bold">Joined</small></th>
+                                        <th><small class="fw-bold">Joined</small></th>
                                         <td><span t-field="user.create_date" t-options='{"format": "d MMM Y"}'/></td>
                                     </tr>
                                     <tr>
-                                        <th><small class="font-weight-bold">Badges</small></th>
+                                        <th><small class="fw-bold">Badges</small></th>
                                         <td t-if="user.badge_ids" t-esc="len(user.badge_ids.filtered(lambda b: b.badge_id.website_published))"/>
                                         <td t-else="">0</td>
                                     </tr>
@@ -271,7 +271,7 @@
                 <div class="col-12 col-md-8 col-lg-9">
                     <ul class="nav nav-tabs o_wprofile_nav_tabs flex-nowrap" role="tablist" id="profile_extra_info_tablist">
                         <li class="nav-item">
-                            <a role="tab" aria-controls="about" href="#profile_tab_content_about" class="nav-link active" data-toggle="tab">About</a>
+                            <a role="tab" aria-controls="about" href="#profile_tab_content_about" class="nav-link active" data-bs-toggle="tab">About</a>
                         </li>
                     </ul>
                     <div class="tab-content py-4 o_wprofile_tabs_content mb-4" id="profile_extra_info_tabcontent">
@@ -335,13 +335,13 @@
                     <span t-else="" t-field="user.rank_id.name"/>
                 </h4>
                 <small>
-                    <span class="font-weight-bold text-primary"
+                    <span class="fw-bold text-primary"
                         t-field="user.karma"
                         t-options="{'format_decimalized_number': True, 'precision_digits': 2}"/> /
-                    <span t-if="next_rank_id" class="font-weight-bold"
+                    <span t-if="next_rank_id" class="fw-bold"
                         t-field="next_rank_id.karma_min"
                         t-options="{'format_decimalized_number': True, 'precision_digits': 2}"/>
-                    <span t-else="" class="font-weight-bold"
+                    <span t-else="" class="fw-bold"
                         t-field="user.rank_id.karma_min"
                         t-options="{'format_decimalized_number': True, 'precision_digits': 2}"/>
                      xp
@@ -356,20 +356,20 @@
                 <t t-if="badge.badge_id.website_published">
                     <div class="col px-1 mb-2 col-xl-4">
                         <div class="card">
-                            <div class="card-body p-2 pr-3">
+                            <div class="card-body p-2 pe-3">
                                 <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"
-                                        class="o_object_fit_cover mr-0"
+                                        class="o_object_fit_cover me-0"
                                         t-att-alt="badge.badge_id.name"/>
                                     <img t-else=""
                                         width="38" height="38"
                                         t-att-src="website.image_url(badge.badge_id, 'image_128')"
-                                        class="o_object_fit_cover mr-0"
+                                        class="o_object_fit_cover me-0"
                                         t-att-alt="badge.badge_id.name"/>
                                     <div class="flex-grow-1 col-md-10 p-0">
-                                        <h6 class="my-0 pl-1 text-truncate" t-field="badge.badge_id.name"/>
+                                        <h6 class="my-0 ps-1 text-truncate" t-field="badge.badge_id.name"/>
                                     </div>
                                 </div>
                             </div>
@@ -381,11 +381,11 @@
         <div class="mb-3 d-inline-block" t-if="not user.badge_ids">
             <p class="text-muted">No badges yet!</p>
         </div>
-        <div class="text-right d-inline-block pull-right">
+        <div class="text-end d-inline-block pull-right">
             <a t-if="not user.badge_ids and badge_category" t-attf-href="/profile/ranks_badges?badge_category=#{badge_category}&amp;url_origin=#{request.httprequest.path}&amp;name_origin=#{user.name}"
             class="btn btn-link btn-sm"><i class="fa fa-arrow-right"/> All Badges</a>
             <a t-else="" t-attf-href="/profile/ranks_badges?url_origin=#{request.httprequest.path}&amp;name_origin=#{user.name}"
-            class="btn btn-link btn-sm"><i class="fa fa-arrow-right mr-1"/>All Badges</a>
+            class="btn btn-link btn-sm"><i class="fa fa-arrow-right me-1"/>All Badges</a>
         </div>
     </template>
 
@@ -417,10 +417,10 @@
                                 <t t-foreach="ranks" t-as="rank">
                                     <li t-attf-class="list-group-item">
                                         <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"/>
+                                            <img t-att-src="website.image_url(rank, 'image_128')" class="me-2 o_image_40_cover" alt="Rank badge"/>
                                             <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>
+                                                <span class="badge text-bg-success"><span t-field="rank.karma_min"/></span> point<span t-if="rank.karma_min">s</span>
                                             </div>
                                         </div>
                                     </li>
@@ -453,7 +453,7 @@
                 <div class="col-6">
                     <span t-field="badge.description"/>
                 </div>
-                <div class="col-3 text-right">
+                <div class="col-3 text-end">
                     <b t-esc="badge.granted_users_count"/>
                     <i class="text-muted"> awarded users</i>
                 </div>
@@ -463,8 +463,8 @@
 
     <template id="badge_header">
         <img t-if="not badge.image_1920 and badge.level" t-attf-src="/website_profile/static/src/img/badge_#{badge.level}.svg"
-                class="my-1 mr-1 wprofile_badge_img" t-att-alt="badge.name"/>
-        <img t-else="" t-att-src="website.image_url(badge, 'image_1024')" class="my-1 mr-1 wprofile_badge_img" t-att-alt="badge.name"/>
+                class="my-1 me-1 wprofile_badge_img" t-att-alt="badge.name"/>
+        <img t-else="" t-att-src="website.image_url(badge, 'image_1024')" class="my-1 me-1 wprofile_badge_img" t-att-alt="badge.name"/>
         <a t-if="badge_url" t-att-href="badge_url">
             <h6 t-field="badge.name" class="d-inline my-0"/>
         </a>
@@ -508,8 +508,8 @@
             <t t-call="website_profile.user_profile_sub_nav"/>
             <div class="container">
                 <h1 class="py-4 text-white d-inline-block">All Users</h1>
-                <div class="form-inline py-4 float-right">
-                    <strong class="form-group text-white mr-2">Rank by :</strong>
+                <div class="form-inline py-4 float-end">
+                    <strong class="form-group text-white me-2">Rank by :</strong>
                     <div class="form-group btn-group">
                         <a t-attf-class="btn btn-secondary #{ 'active' if group_by == 'week' else ''}"
                             t-att-href="'/profile/users?' + keep_query('search', group_by='week')">This week</a>
@@ -567,10 +567,10 @@
                     <img class="position-absolute" t-attf-src="/website_profile/static/src/img/rank_#{user_index + 1}.svg" alt="User rank" style="bottom: 0; right: -10px"/>
                 </div>
                 <h3 class="mt-2 mb-0" t-esc="user['name']"></h3>
-                <span class="badge badge-danger font-weight-normal px-2" t-if="not user['website_published']">Unpublished</span>
+                <span class="badge text-bg-danger fw-normal px-2" t-if="not user['website_published']">Unpublished</span>
                 <strong class="text-muted" t-esc="user['rank']"/>
                 <div class="h3 my-2" t-if="user['karma_gain']">
-                    <span class="badge badge-pill badge-success px-3 py-2" >+ <t t-esc="user['karma_gain']"/> XP</span>
+                    <span class="badge rounded-pill text-bg-success px-3 py-2" >+ <t t-esc="user['karma_gain']"/> XP</span>
                 </div>
             </div>
             <div class="row mx-0 o_wprofile_top3_card_footer text-nowrap">
@@ -581,40 +581,40 @@
     </template>
 
     <template id="all_user_card" name="All User Card">
-        <td class="align-middle text-right text-muted" style="width: 0">
+        <td class="align-middle text-end text-muted" style="width: 0">
             <span t-esc="user['position']"/>
         </td>
         <td class="align-middle d-none d-sm-table-cell">
             <img class="o_object_fit_cover rounded-circle o_wprofile_img_small" width="30" height="30" t-att-src="'/profile/avatar/%s?field=avatar_128%s' % (user['id'], '&amp;res_model=%s&amp;res_id=%s' % (record._name, record.id) if record else '')"/>
         </td>
         <td class="align-middle w-md-75">
-            <span class="font-weight-bold" t-esc="user['name']"/><br/>
-            <span class="text-muted font-weight-bold" t-esc="user['rank']"></span>
+            <span class="fw-bold" t-esc="user['name']"/><br/>
+            <span class="text-muted fw-bold" t-esc="user['rank']"></span>
         </td>
         <td class="align-middle text-nowrap">
             <t t-if="user['karma_gain']">
-                <span class="badge badge-pill badge-success d-inline">+ <t t-esc="user['karma_gain']"/> XP</span>
-                <span class="text-muted pl-2 pr-3">
+                <span class="badge rounded-pill text-bg-success d-inline">+ <t t-esc="user['karma_gain']"/> XP</span>
+                <span class="text-muted ps-2 pe-3">
                     <t t-if="group_by == 'week'">this week</t>
                     <t t-elif="group_by == 'month'">this month</t>
                     <t t-else="">All time </t>
                 </span>
             </t>
         </td>
-        <td class="align-middle font-weight-bold text-right text-nowrap">
-            <span t-if="not user['website_published']" class="badge badge-danger font-weight-normal px-2 py-1 m-1">Unpublished</span>
+        <td class="align-middle fw-bold text-end text-nowrap">
+            <span t-if="not user['website_published']" class="badge text-bg-danger fw-normal px-2 py-1 m-1">Unpublished</span>
         </td>
-        <td class="align-middle font-weight-bold text-right text-nowrap">
-            <b t-esc="user['karma']"/> <span class="text-muted small font-weight-bold">XP</span>
+        <td class="align-middle fw-bold text-end text-nowrap">
+            <b t-esc="user['karma']"/> <span class="text-muted small fw-bold">XP</span>
         </td>
-        <td class="align-middle font-weight-bold text-right pr-3 text-nowrap all_user_badge_count">
-            <b t-esc="user['badge_count']"/> <span class="text-muted small font-weight-bold">Badges</span>
+        <td class="align-middle fw-bold text-end pe-3 text-nowrap all_user_badge_count">
+            <b t-esc="user['badge_count']"/> <span class="text-muted small fw-bold">Badges</span>
         </td>
     </template>
 
     <!-- Custom Pager: lighter than existing one, no box around number, first / end displayed -->
     <template id="pager_nobox" name="Pager (not box display)">
-        <ul t-if="pager['page_count'] > 1" t-attf-class="o_wprofile_pager font-weight-bold pagination m-0">
+        <ul t-if="pager['page_count'] > 1" t-attf-class="o_wprofile_pager fw-bold pagination m-0">
             <li t-attf-class="page-item o_wprofile_pager_arrow #{'disabled' if pager['page']['num'] == 1 else ''}">
                 <a t-att-href=" pager['page_first']['url'] if pager['page']['num'] != 1 else None" class="page-link"><i class="fa fa-step-backward"/></a>
             </li>
@@ -639,22 +639,22 @@
         <t t-set="my_account_redirect" t-value="'/my/account?redirect='+redirect_url"/>
 
         <div t-if="not is_public_user and not user.email" t-att-class="send_alert_classes" role="alert">
-            <button type="button" class="close" data-dismiss="alert" aria-label="Close">×</button>
+            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
             Your account does not have an email set up. Please set it up on <a class="alert-link" t-att-href="my_account_redirect">your account settings</a>.
         </div>
         <div t-elif="not validation_email_sent and not is_public_user and user.karma == 0" t-att-class="send_alert_classes" role="alert">
-            <button type="button" class="close validation_email_close" data-dismiss="alert" aria-label="Close">×</button>
+            <button type="button" class="close validation_email_close" data-bs-dismiss="alert" aria-label="Close">×</button>
             Your Account has not yet been verified.<br/>
             Click <a class="send_validation_email alert-link" href="#" t-att-data-redirect_url="redirect_url"><u>here</u></a> to receive a verification email<t t-esc="additional_validation_email_message"/>!
         </div>
         <div t-elif="validation_email_sent and not validation_email_done" t-att-class="done_alert_classes">
-            <button type="button" class="close" data-dismiss="alert" aria-label="Close">×</button>
+            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
             Verification Email sent to <i t-esc="user.email"></i>!<br/>
             Did not receive it? <a class="alert-link" t-att-href="my_account_redirect"><u>Correct your email address</u></a> 
             or <a class="send_validation_email alert-link" href="#" t-att-data-redirect_url="redirect_url"><u>Send Again</u></a>.
         </div>
         <div t-if="validation_email_done" t-att-class="done_alert_classes" role="status">
-            <button type="button" class="close validated_email_close" data-dismiss="alert" aria-label="Close">×</button>
+            <button type="button" class="close validated_email_close" data-bs-dismiss="alert" aria-label="Close">×</button>
             <span id="email_validated_message">Congratulations! Your email has just been validated.</span>
             <span t-esc="additional_validated_email_message"/>
         </div>
diff --git a/addons/website_sale/data/product_snippet_template_data.xml b/addons/website_sale/data/product_snippet_template_data.xml
index c1db44b01c7..f159667c84a 100644
--- a/addons/website_sale/data/product_snippet_template_data.xml
+++ b/addons/website_sale/data/product_snippet_template_data.xml
@@ -29,7 +29,7 @@
                             <t t-call="website_sale.price_dynamic_filter_template_product_product"/>
                         </div>
                         <button t-if="record._website_show_quick_add()"
-                                type="button" role="button" class="btn btn-primary js_add_cart ml-auto" title="Add to Cart">
+                                type="button" role="button" class="btn btn-primary js_add_cart ms-auto" title="Add to Cart">
                             <i class="fa fa-fw fa-shopping-cart"/>
                         </button>
                     </div>
@@ -59,7 +59,7 @@
                         <div>
                             <t t-call="website_sale.price_dynamic_filter_template_product_product"/>
                         </div>
-                        <a class="btn btn-primary ml-auto" t-att-href="record.website_url">
+                        <a class="btn btn-primary ms-auto" t-att-href="record.website_url">
                             <i class="fa fa-fw fa-search"/>
                         </a>
                     </div>
@@ -188,7 +188,7 @@
                     </a>
                     <div class="o_carousel_product_card_body px-3 mt-2 h-100 d-flex flex-column justify-content-between">
                         <div class="d-flex justify-content-between align-items-center flex-wrap mb-2">
-                            <div class="h5 mb-0 mr-4">
+                            <div class="h5 mb-0 me-4">
                                 <t t-call="website_sale.price_dynamic_filter_template_product_product"/>
                             </div>
                             <t t-if="is_view_active('website_sale.product_comment')">
@@ -199,7 +199,7 @@
                             </t>
                             <div class="card-title h6 w-100 mt-2" t-field="record.display_name"/>
                         </div>
-                        <div class="text-right o_dynamic_snippet_btn_wrapper" t-if="record._website_show_quick_add()">
+                        <div class="text-end o_dynamic_snippet_btn_wrapper" t-if="record._website_show_quick_add()">
                             <button t-if="record._website_show_quick_add()"
                                     type="button" role="button" class="btn btn-primary js_add_cart" title="Add to Cart">
                                 Add to Cart <i class="fa fa-fw fa-shopping-cart"/>
@@ -224,7 +224,7 @@
                             <div class="o_carousel_product_card_body p-5">
                                 <div class="card-title h1" t-field="record.display_name"/>
                                 <div class="d-flex align-items-center my-4">
-                                    <div class="text-primary h4 mb-0 mr-3">
+                                    <div class="text-primary h4 mb-0 me-3">
                                         <t t-call="website_sale.price_dynamic_filter_template_product_product"/>
                                     </div>
                                     <t t-if="is_view_active('website_sale.product_comment')" t-call="portal_rating.rating_widget_stars_static">
@@ -234,7 +234,7 @@
                                 </div>
                                 <div class="card-text text-muted" t-field="record.description_sale"/>
                                 <div class="mt-4">
-                                    <a class="btn btn-outline-secondary mr-1 mt-1" t-att-href="record.website_url">
+                                    <a class="btn btn-outline-secondary me-1 mt-1" t-att-href="record.website_url">
                                         View Product
                                     </a>
                                     <button t-if="record._website_show_quick_add()"
@@ -261,7 +261,7 @@
                                 <img class="img img-fluid mx-auto" loading="lazy" t-att-src="data['image_512']" t-att-alt="record.display_name"/>
                             </a>
                         </div>
-                        <div class="o_carousel_product_card_body col-lg-8 pl-3 d-flex flex-column justify-content-between">
+                        <div class="o_carousel_product_card_body col-lg-8 ps-3 d-flex flex-column justify-content-between">
                             <div>
                                 <div class="card-title h6" t-field="record.display_name"/>
                                 <div class="mb-2">
@@ -287,9 +287,9 @@
         </template>
 
         <template id="price_dynamic_filter_template_product_product" name="Dynamic Product Filter Price">
-            <span t-esc="record._get_contextual_price()" class="font-weight-bold"
+            <span t-esc="record._get_contextual_price()" class="fw-bold"
                   t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"/>
-            <del t-if="data.get('has_discounted_price')" class="text-danger ml-1 h6" style="white-space: nowrap;"
+            <del t-if="data.get('has_discounted_price')" class="text-danger ms-1 h6" style="white-space: nowrap;"
                  t-esc="data['list_price']" t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"/>
         </template>
 
diff --git a/addons/website_sale/static/src/js/tours/tour_utils.js b/addons/website_sale/static/src/js/tours/tour_utils.js
index 1a20277a1da..24dbc0affce 100644
--- a/addons/website_sale/static/src/js/tours/tour_utils.js
+++ b/addons/website_sale/static/src/js/tours/tour_utils.js
@@ -21,7 +21,7 @@ odoo.define("website_sale.tour_utils", function (require) {
         return [
             {
                 content: "Click on pricelist dropdown",
-                trigger: "div.o_pricelist_dropdown a[data-toggle=dropdown]",
+                trigger: "div.o_pricelist_dropdown a[data-bs-toggle=dropdown]",
             },
             {
                 content: "Click on pricelist",
diff --git a/addons/website_sale/static/src/js/website_sale.js b/addons/website_sale/static/src/js/website_sale.js
index 85d616bda58..cdd0dcf56ae 100644
--- a/addons/website_sale/static/src/js/website_sale.js
+++ b/addons/website_sale/static/src/js/website_sale.js
@@ -42,7 +42,7 @@ publicWidget.registry.websiteSaleCartLink = publicWidget.Widget.extend({
             },
             container: 'body',
             placement: 'auto',
-            template: '<div class="popover mycart-popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'
+            template: '<div class="popover mycart-popover" role="tooltip"><div class="tooltip-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'
         });
         window.addEventListener('visibilitychange', this._onVisibilityChange);
         this._updateCartQuantityText();
@@ -380,10 +380,10 @@ publicWidget.registry.WebsiteSale = publicWidget.Widget.extend(VariantMixin, car
                 var cart_alert = $('.oe_cart').parent().find('#data_warning');
                 if (cart_alert.length === 0) {
                     $('.oe_cart').prepend('<div class="alert alert-danger alert-dismissable" role="alert" id="data_warning">'+
-                            '<button type="button" class="btn-close" data-dismiss="alert" aria-hidden="true"></button> ' + data.warning + '</div>');
+                            '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-hidden="true"></button> ' + data.warning + '</div>');
                 }
                 else {
-                    cart_alert.html('<button type="button" class="btn-close" data-dismiss="alert" aria-hidden="true"></button> ' + data.warning);
+                    cart_alert.html('<button type="button" class="btn-close" data-bs-dismiss="alert" aria-hidden="true"></button> ' + data.warning);
                 }
                 $input.val(data.quantity);
             }
@@ -977,7 +977,7 @@ publicWidget.registry.websiteSaleCarouselProduct = publicWidget.Widget.extend({
         const $indicatorsDiv = isLeftIndicators ? this.$target.find('.o_carousel_product_indicators') : this.$target.find('.carousel-indicators');
         let indicatorIndex = $(ev.relatedTarget).index();
         indicatorIndex = indicatorIndex > -1 ? indicatorIndex : this.$target.find('li.active').index();
-        const $indicator = $indicatorsDiv.find('[data-slide-to=' + indicatorIndex + ']');
+        const $indicator = $indicatorsDiv.find('[data-bs-slide-to=' + indicatorIndex + ']');
         const indicatorsDivSize = isLeftIndicators && !isReversed ? $indicatorsDiv.outerHeight() : $indicatorsDiv.outerWidth();
         const indicatorSize = isLeftIndicators && !isReversed ? $indicator.outerHeight() : $indicator.outerWidth();
         const indicatorPosition = isLeftIndicators && !isReversed ? $indicator.position().top : $indicator.position().left;
diff --git a/addons/website_sale/static/src/scss/website_sale.scss b/addons/website_sale/static/src/scss/website_sale.scss
index 4a3d680c0aa..91c5721a4db 100644
--- a/addons/website_sale/static/src/scss/website_sale.scss
+++ b/addons/website_sale/static/src/scss/website_sale.scss
@@ -28,7 +28,7 @@ $o-wsale-products-layout-grid-gutter-width: min($grid-gutter-width / 2, $o-wsale
         --o-wsale-card-border-width: 0;
         --o-wsale-card-info-padding: #{map-get($spacers, 3)} 0;
         --o-wsale-card-thumb-border-radius: #{$o-wsale-products-layout-grid-gutter-width * .5};
-        --o-wsale-card-thumb-shadow: 0 13px 27px -5px #{scale-color(theme-color('primary'), $alpha: -90%)},
+        --o-wsale-card-thumb-shadow: 0 13px 27px -5px #{scale-color(map-get($theme-colors, 'primary'), $alpha: -90%)},
                                      0 8px 16px -8px rgba(0, 0, 0, .28);
     }
     .o_wsale_design_grid {
@@ -104,12 +104,12 @@ $o-wsale-products-layout-grid-gutter-width: min($grid-gutter-width / 2, $o-wsale
     }
 
     .breadcrumb {
-        background-color: gray('100');
+        background-color: map-get($grays, '100');
         padding: 0.6rem 0.75rem;
         font-size: 0.9rem;
 
         a {
-            color: theme-color('primary');
+            color: map-get($theme-colors, 'primary');
             font-weight: bold;
         }
         .breadcrumb-item + .breadcrumb-item::before {
@@ -133,35 +133,35 @@ $o-wsale-products-layout-grid-gutter-width: min($grid-gutter-width / 2, $o-wsale
         #wsale_products_categories_collapse {
             label {
                 &:hover {
-                    color: theme-color('primary');
+                    color: map-get($theme-colors, 'primary');
                     cursor: pointer;
                 }
             }
             i.fa {
-                color: gray('500');
+                color: map-get($grays, '500');
             }
         }
         .o_categories_collapse_title, .o_products_attributes_title {
             font-size: 0.9rem;
         }
-        .custom-control.custom-checkbox {
-            .custom-control-input {
-                ~ .custom-control-label:before {
+        .custom-control.form-check {
+            .form-check-input {
+                ~ .form-check-label:before {
                     outline: none;
                     border: 0px;
-                    border: 2px solid gray('400');
+                    border: 2px solid map-get($grays, '400');
                     border-radius: 0px;
                     cursor: pointer;
                 }
                 &:checked {
-                    ~ .custom-control-label:before {
-                        background-color: theme-color('primary');
-                        border: 2px solid theme-color('primary');
+                    ~ .form-check-label:before {
+                        background-color: map-get($theme-colors, 'primary');
+                        border: 2px solid map-get($theme-colors, 'primary');
                     }
                 }
             }
             label:hover {
-                color: theme-color('primary');
+                color: map-get($theme-colors, 'primary');
                 cursor: pointer;
             }
         }
@@ -182,7 +182,7 @@ $o-wsale-products-layout-grid-gutter-width: min($grid-gutter-width / 2, $o-wsale
         }
     }
     .o_wsale_apply_layout > .btn {
-        color: gray('500');
+        color: map-get($grays, '500');
         background-color: transparent;
         border-radius: 0%;
     }
@@ -190,15 +190,15 @@ $o-wsale-products-layout-grid-gutter-width: min($grid-gutter-width / 2, $o-wsale
     .o_wsale_apply_layout > .btn-check:checked + .btn,
     .o_wsale_apply_layout > .btn:focus
     {
-        color: gray('600');
-        background-color: gray('200');
+        color: map-get($grays, '600');
+        background-color: map-get($grays, '200');
         box-shadow: none !important;
     }
 }
 
 #product_detail ~ .oe_structure.oe_empty > section:first-child,
 .o_shop_discussion_rating {
-    border-top: 1px solid gray('400');
+    border-top: 1px solid map-get($grays, '400');
 }
 
 .o_alternative_product {
@@ -394,7 +394,7 @@ ul.wizard {
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.065);
 
     li {
-        border: 1px solid gray('200');
+        border: 1px solid map-get($grays, '200');
         border-right-width: 0;
         position: relative;
         float: left;
@@ -411,7 +411,7 @@ ul.wizard {
             display: block;
             border: 20px solid transparent;
             border-right: 0;
-            border-left: 10px solid gray('200');
+            border-left: 10px solid map-get($grays, '200');
         }
 
         .chevron:before {
@@ -547,10 +547,10 @@ a.no-decoration {
             width: 2.5rem;
             height: 2.5rem;
             line-height: 2.5rem;
-            color: gray('900');
+            color: map-get($grays, '900');
             background: white;
             font-size: 1.15rem;
-            border: 1px solid gray('400');
+            border: 1px solid map-get($grays, '400');
             border-radius: 50%;
         }
         @include media-breakpoint-down(lg) {
@@ -591,7 +591,7 @@ a.no-decoration {
                     height: 64px;
                     text-indent: unset;
                     transition: none;
-                    border: 1px solid gray('400');
+                    border: 1px solid map-get($grays, '400');
 
                     .o_product_video_thumb {
                         @include o-position-absolute(0, 0, 0, 0);
@@ -599,7 +599,7 @@ a.no-decoration {
                     }
 
                     &.active {
-                        border-color: theme-color('primary');
+                        border-color: map-get($theme-colors, 'primary');
                     }
 
                     &:hover {
@@ -623,11 +623,11 @@ a.no-decoration {
                 height: 8px;
                 min-width: 8px;
                 border-radius: 50%;
-                border: 2px solid gray('400');
+                border: 2px solid map-get($grays, '400');
 
                 &.active {
-                    border-color: theme-color('primary');
-                    background-color: theme-color('primary');
+                    border-color: map-get($theme-colors, 'primary');
+                    background-color: map-get($theme-colors, 'primary');
                 }
                 > div {
                     display: none;
@@ -697,7 +697,7 @@ a.no-decoration {
 }
 
 .o_red_highlight {
-    background: theme-color('danger') !important;
+    background: map-get($theme-colors, 'danger') !important;
     box-shadow: 0 0 0 0 rgba(240,8,0,0.4);
     transition: all 0.5s linear;
 }
@@ -761,7 +761,7 @@ a.no-decoration {
 .o_product_page_reviews_title {
     .fa {
         font-size: 1.4rem;
-        color: theme-color('primary');
+        color: map-get($theme-colors, 'primary');
 
         &:before {
             content: "\f067";
diff --git a/addons/website_sale/static/src/scss/website_sale_backend.scss b/addons/website_sale/static/src/scss/website_sale_backend.scss
index 857ae06a1ec..987c617cdab 100644
--- a/addons/website_sale/static/src/scss/website_sale_backend.scss
+++ b/addons/website_sale/static/src/scss/website_sale_backend.scss
@@ -41,14 +41,14 @@
 
 .o_website_sale_image_modal {
     .o_website_sale_image_modal_container {
-        border-left: 1px solid gray('400');
+        border-left: 1px solid map-get($grays, '400');
 
         .o_field_image {
             margin-bottom: 0;
-            box-shadow: 0 2px 10px gray('300');
+            box-shadow: 0 2px 10px map-get($grays, '300');
 
             > img {
-                border: 1px solid gray('400');
+                border: 1px solid map-get($grays, '400');
                 height: 200px;
                 width: auto;
             }
diff --git a/addons/website_sale/static/src/scss/website_sale_frontend.scss b/addons/website_sale/static/src/scss/website_sale_frontend.scss
index a4aba636202..997d3a52f83 100644
--- a/addons/website_sale/static/src/scss/website_sale_frontend.scss
+++ b/addons/website_sale/static/src/scss/website_sale_frontend.scss
@@ -7,10 +7,10 @@ $o-wsale-wizard-dot-size: 0.625rem;
 $o-wsale-wizard-dot-active-glow: 0.25rem;
 
 $o-wsale-wizard-color-inner: white;
-$o-wsale-wizard-color-default: gray('200');
+$o-wsale-wizard-color-default: map-get($grays, '200');
 
-$o-wsale-wizard-dot-active: theme-color('primary');
-$o-wsale-wizard-dot-completed: theme-color('success');
+$o-wsale-wizard-dot-active: map-get($theme-colors, 'primary');
+$o-wsale-wizard-dot-completed: map-get($theme-colors, 'success');
 
 $o-wsale-wizard-label-default: $text-muted;
 $o-wsale-wizard-label-active: $body-color;
diff --git a/addons/website_sale/static/src/xml/website_sale.xml b/addons/website_sale/static/src/xml/website_sale.xml
index 2c8fd7504b0..f1a1c0b5ae4 100644
--- a/addons/website_sale/static/src/xml/website_sale.xml
+++ b/addons/website_sale/static/src/xml/website_sale.xml
@@ -3,7 +3,7 @@
 <templates xml:space="preserve">
 
     <t t-name="productVideo">
-        <div class="embed-responsive embed-responsive-16by9 mt-2" t-if="embedCode">
+        <div class="ratio ratio-16x9 mt-2" t-if="embedCode">
             <t t-out="embedCode"/>
         </div>
     </t>
diff --git a/addons/website_sale/static/src/xml/website_sale_dashboard.xml b/addons/website_sale/static/src/xml/website_sale_dashboard.xml
index 0f6427c7b1d..020a390c7c5 100644
--- a/addons/website_sale/static/src/xml/website_sale_dashboard.xml
+++ b/addons/website_sale/static/src/xml/website_sale_dashboard.xml
@@ -137,7 +137,7 @@
         <t t-jquery=".o_top_margin .row" t-operation="append">
             <div class="col-lg-6 col-12 o_dashboard_utms">
                 <div>
-                    <h4 class="float-left">REVENUE BY</h4>
+                    <h4 class="float-start">REVENUE BY</h4>
                     <t t-call="website_sale.LinkTrackersDropDown"/>
                 </div>
                 <div class="o_utm_no_data_img">
@@ -150,7 +150,7 @@
 
     <t t-name="website_sale.LinkTrackersDropDown">
         <div class="dropdown">
-            <button class="btn btn-secondary dropdown-toggle utm_dropdown ml4" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><span class="utm_button_name">Campaigns</span>
+            <button class="btn btn-secondary dropdown-toggle utm_dropdown ml4" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><span class="utm_button_name">Campaigns</span>
             </button>
             <div class="dropdown-menu" role="menu" aria-labelledby="utm_dropdown">
                 <a name="campaign_id" class="dropdown-item js_utm_selector" role="menuitem">Campaigns</a>
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 55c2b5a2e5a..79bbf9ef0bf 100644
--- a/addons/website_sale/static/src/xml/website_sale_utils.xml
+++ b/addons/website_sale/static/src/xml/website_sale_utils.xml
@@ -16,7 +16,7 @@
             </t>
             <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']"/>
+                <h6 t-attf-class="fw-bold #{description ? '' : 'mb-0'}" t-out="product['name']"/>
                 <p t-if="description" class="mb-0" t-out="description"/>
             </div>
             <div t-if="widget.displayPrice" class="flex-shrink-0">
@@ -40,10 +40,10 @@
 <!-- Products Search Bar autocomplete item -->
 <we-button t-name="website_sale.ribbonSelectItem" t-att-data-set-ribbon="ribbon.id">
     <t t-out="ribbon.html"/>
-    <span t-attf-class="fa fa-#{isTag ? 'tag' : 'bookmark'} ml-auto"></span>
-    <span t-attf-class="fa fa-arrow-#{isLeft ? 'left' : 'right'} ml-1"></span>
-    <span t-attf-class="o_wsale_color_preview #{colorClasses} ml-1" t-attf-style="background-color: #{ribbon.bg_color}"></span>
-    <span t-attf-class="o_wsale_color_preview #{colorClasses} ml-1" t-attf-style="background-color: #{textColor} !important;"></span>
+    <span t-attf-class="fa fa-#{isTag ? 'tag' : 'bookmark'} ms-auto"></span>
+    <span t-attf-class="fa fa-arrow-#{isLeft ? 'left' : 'right'} ms-1"></span>
+    <span t-attf-class="o_wsale_color_preview #{colorClasses} ms-1" t-attf-style="background-color: #{ribbon.bg_color}"></span>
+    <span t-attf-class="o_wsale_color_preview #{colorClasses} ms-1" t-attf-style="background-color: #{textColor} !important;"></span>
 </we-button>
 
 </templates>
diff --git a/addons/website_sale/static/tests/tours/website_sale_shop_customize.js b/addons/website_sale/static/tests/tours/website_sale_shop_customize.js
index 9f608fa50d9..4eed6c4c22c 100644
--- a/addons/website_sale/static/tests/tours/website_sale_shop_customize.js
+++ b/addons/website_sale/static/tests/tours/website_sale_shop_customize.js
@@ -63,7 +63,7 @@ wTourUtils.registerEditionTour('shop_customize', {
         {
             context: "check variant price",
             extra_trigger: "iframe body:not(.editor_enable)",
-            trigger: 'iframe .custom-radio:contains("Aluminium") .badge:contains("+") .oe_currency_value:contains("50.4")',
+            trigger: 'iframe .form-check:contains("Aluminium") .badge:contains("+") .oe_currency_value:contains("50.4")',
             run: function () {},
         },
         {
diff --git a/addons/website_sale/static/tests/tours/website_sale_shop_editor_tour.js b/addons/website_sale/static/tests/tours/website_sale_shop_editor_tour.js
index fc52b4254d3..902579fc02b 100644
--- a/addons/website_sale/static/tests/tours/website_sale_shop_editor_tour.js
+++ b/addons/website_sale/static/tests/tours/website_sale_shop_editor_tour.js
@@ -7,13 +7,13 @@ tour.register('shop_editor', {
     url: '/shop?enable_editor=1',
 }, [{
     content: "Click on pricelist dropdown",
-    trigger: "iframe div.o_pricelist_dropdown a[data-toggle=dropdown]",
+    trigger: "iframe div.o_pricelist_dropdown a[data-bs-toggle=dropdown]",
 }, {
     trigger: "iframe input[name=search]",
-    extra_trigger: "iframe div.o_pricelist_dropdown a[data-toggle=dropdown][aria-expanded=true]",
+    extra_trigger: "iframe div.o_pricelist_dropdown a[data-bs-toggle=dropdown][aria-expanded=true]",
     content: "Click somewhere else in the shop.",
 }, {
-    trigger: "iframe div.o_pricelist_dropdown a[data-toggle=dropdown]",
-    extra_trigger: "iframe div.o_pricelist_dropdown a[data-toggle=dropdown][aria-expanded=false]",
+    trigger: "iframe div.o_pricelist_dropdown a[data-bs-toggle=dropdown]",
+    extra_trigger: "iframe div.o_pricelist_dropdown a[data-bs-toggle=dropdown][aria-expanded=false]",
     content: "Click on the pricelist again.",
 }]);
diff --git a/addons/website_sale/static/tests/tours/website_sale_shop_list_view_b2c.js b/addons/website_sale/static/tests/tours/website_sale_shop_list_view_b2c.js
index 2370b666016..2bc28dccb57 100644
--- a/addons/website_sale/static/tests/tours/website_sale_shop_list_view_b2c.js
+++ b/addons/website_sale/static/tests/tours/website_sale_shop_list_view_b2c.js
@@ -49,7 +49,7 @@ wTourUtils.registerEditionTour('shop_list_view_b2c', {
         },
         {
             context: "check variant price",
-            trigger: 'iframe .custom-radio:contains("Aluminium") .badge:contains("+") .oe_currency_value:contains("55.44")',
+            trigger: 'iframe .form-check:contains("Aluminium") .badge:contains("+") .oe_currency_value:contains("55.44")',
             run: () => {}, // It's a check.
         },
         {
diff --git a/addons/website_sale/views/crm_team_views.xml b/addons/website_sale/views/crm_team_views.xml
index f6cfa662e8a..a427a4ca6ee 100644
--- a/addons/website_sale/views/crm_team_views.xml
+++ b/addons/website_sale/views/crm_team_views.xml
@@ -17,7 +17,7 @@
                                 </a>
                             </div>
                         </div>
-                        <div class="col-4 text-right">
+                        <div class="col-4 text-end">
                             <field name="abandoned_carts_amount" widget="monetary"/>
                         </div>
                     </div>
diff --git a/addons/website_sale/views/product_views.xml b/addons/website_sale/views/product_views.xml
index 122bc864946..4d608494b2c 100644
--- a/addons/website_sale/views/product_views.xml
+++ b/addons/website_sale/views/product_views.xml
@@ -359,17 +359,17 @@
                             </div>
                             <!-- below 100 Kb: good -->
                             <t t-if="record.image_1920.raw_value.length &lt; 100*1000">
-                                <t t-set="size_status" t-value="'badge-success'"/>
+                                <t t-set="size_status" t-value="'text-bg-success'"/>
                                 <t t-set="message">Acceptable file size</t>
                             </t>
                             <!-- below 1000 Kb: decent -->
                             <t t-elif="record.image_1920.raw_value.length &lt; 1000*1000">
-                                <t t-set="size_status" t-value="'badge-warning'" />
+                                <t t-set="size_status" t-value="'text-bg-warning'" />
                                 <t t-set="message">Huge file size. The image should be optimized/reduced.</t>
                             </t>
                             <!-- above 1000 Kb: bad -->
                             <t t-else="1">
-                                <t t-set="size_status" t-value="'badge-danger'"/>
+                                <t t-set="size_status" t-value="'text-bg-danger'"/>
                                 <t t-set="message">Optimization required! Reduce the image size or increase your compression settings.</t>
                             </t>
                             <span t-attf-class="badge #{size_status} o_product_image_size" t-esc="record.image_1920.value" t-att-title="message"/>
diff --git a/addons/website_sale/views/res_config_settings_views.xml b/addons/website_sale/views/res_config_settings_views.xml
index 0cddaf8b595..c77fab0b17a 100644
--- a/addons/website_sale/views/res_config_settings_views.xml
+++ b/addons/website_sale/views/res_config_settings_views.xml
@@ -45,7 +45,7 @@
                                 What should be done on "Add to Cart"?
                             </div>
                             <div class="content-group">
-                                <div class="row mt16 ml-4">
+                                <div class="row mt16 ms-4">
                                     <field name="add_to_cart_action" widget="radio"/>
                                 </div>
                             </div>
@@ -71,7 +71,7 @@
                             <div class="text-muted">
                                 Add a customizable form during checkout (after address)
                             </div>
-                            <div class="row mt8 ml-4" attrs="{'invisible': [('enabled_extra_checkout_step', '=', False)]}">
+                            <div class="row mt8 ms-4" attrs="{'invisible': [('enabled_extra_checkout_step', '=', False)]}">
                                 <button type="object" name="action_open_extra_info" string="Configure Form " class="btn-link" icon="fa-arrow-right"/>
                             </div>
                         </div>
@@ -368,7 +368,7 @@
                     <div class="text-muted">
                         "Optional" allows guests to register from the order confirmation email to track their order.
                     </div>
-                    <div class="mt8 ml-4">
+                    <div class="mt8 ms-4">
                         <field name="account_on_checkout" class="w-75" widget="radio"/>
                     </div>
                 </div>
diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index 6bef1d01e6e..383eead9fc0 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -12,7 +12,7 @@
                 <a href="/shop/cart" t-attf-class="#{_link_class}">
                     <i t-if="_icon" class="fa fa-shopping-cart"/>
                     <span t-if="_text">My Cart</span>
-                    <sup class="my_cart_quantity badge badge-primary" t-esc="website_sale_cart_quantity" t-att-data-order-id="request.session.get('sale_order_id', '')"/>
+                    <sup class="my_cart_quantity badge text-bg-primary" t-esc="website_sale_cart_quantity" t-att-data-order-id="request.session.get('sale_order_id', '')"/>
                 </a>
             </li>
         </t>
@@ -48,7 +48,7 @@
         <xpath expr="//t[@t-foreach='website.menu_id.child_id']" position="after">
             <t t-call="website_sale.header_cart_link">
                 <t t-set="_icon" t-value="True"/>
-                <t t-set="_item_class" t-value="'nav-item ml-lg-3'"/>
+                <t t-set="_item_class" t-value="'nav-item ms-lg-3'"/>
                 <t t-set="_link_class" t-value="'nav-link'"/>
             </t>
         </xpath>
@@ -79,7 +79,7 @@
         <xpath expr="//t[@t-foreach='website.menu_id.child_id']" position="after">
             <t t-call="website_sale.header_cart_link">
                 <t t-set="_text" t-value="True"/>
-                <t t-set="_item_class" t-value="'nav-item ml-lg-3'"/>
+                <t t-set="_item_class" t-value="'nav-item ms-lg-3'"/>
                 <t t-set="_link_class" t-value="'nav-link'"/>
             </t>
         </xpath>
@@ -109,7 +109,7 @@
         <xpath expr="//t[@t-foreach='website.menu_id.child_id']" position="after">
             <t t-call="website_sale.header_cart_link">
                 <t t-set="_icon" t-value="True"/>
-                <t t-set="_item_class" t-value="'nav-item ml-lg-3'"/>
+                <t t-set="_item_class" t-value="'nav-item ms-lg-3'"/>
                 <t t-set="_link_class" t-value="'nav-link'"/>
             </t>
         </xpath>
@@ -119,7 +119,7 @@
         <xpath expr="//t[@t-foreach='website.menu_id.child_id']" position="after">
             <t t-call="website_sale.header_cart_link">
                 <t t-set="_icon" t-value="True"/>
-                <t t-set="_item_class" t-value="'nav-item ml-lg-3'"/>
+                <t t-set="_item_class" t-value="'nav-item ms-lg-3'"/>
                 <t t-set="_link_class" t-value="'nav-link'"/>
             </t>
         </xpath>
@@ -129,7 +129,7 @@
         <xpath expr="//t[@t-foreach='website.menu_id.child_id']" position="after">
             <t t-call="website_sale.header_cart_link">
                 <t t-set="_text" t-value="True"/>
-                <t t-set="_item_class" t-value="'nav-item ml-md-auto'"/>
+                <t t-set="_item_class" t-value="'nav-item ms-md-auto'"/>
                 <t t-set="_link_class" t-value="'nav-link'"/>
             </t>
         </xpath>
@@ -138,7 +138,7 @@
     <!-- Search Bar input-group template -->
     <template id="search" name="Search Box">
         <t t-call="website.website_search_box_input">
-            <t t-set="_form_classes" t-valuef="o_wsale_products_searchbar_form w-100 w-md-auto mr-auto mb-2 flex-grow-1"/>
+            <t t-set="_form_classes" t-valuef="o_wsale_products_searchbar_form w-100 w-md-auto me-auto mb-2 flex-grow-1"/>
             <t t-set="_classes" t-valuef=" "/>
             <t t-set="search_type" t-valuef="products"/>
             <t t-set="action" t-value="keep('/shop'+ ('/category/'+slug(category)) if category else None, search=0) or '/shop'"/>
@@ -190,7 +190,7 @@
                     <div class="o_wsale_product_btn"/>
                     <div class="product_price" itemprop="offers" itemscope="itemscope" itemtype="http://schema.org/Offer">
                         <t t-if="'base_price' in template_price_vals">
-                            <del t-attf-class="text-muted mr-1 h6 mb-0" style="white-space: nowrap;">
+                            <del t-attf-class="text-muted me-1 h6 mb-0" style="white-space: nowrap;">
                                 <em class="small" t-esc="template_price_vals['base_price']" t-options="{'widget': 'monetary', 'display_currency': website.currency_id}" />
                             </del>
                         </t>
@@ -228,7 +228,7 @@
         <t t-set="website_sale_pricelists" t-value="website.get_pricelist_available(show_visible=True)" />
         <div t-attf-class="o_pricelist_dropdown dropdown#{'' if website_sale_pricelists and len(website_sale_pricelists)&gt;1 else ' d-none'} #{_classes}">
             <t t-set="curr_pl" t-value="website.pricelist_id" />
-            <a role="button" href="#" class="dropdown-toggle btn btn-light border-0 px-0 text-muted align-baseline" data-toggle="dropdown">
+            <a role="button" href="#" class="dropdown-toggle btn btn-light border-0 px-0 text-muted align-baseline" data-bs-toggle="dropdown">
                 <t t-esc="curr_pl and curr_pl.name or ' - '" />
             </a>
             <div class="dropdown-menu" role="menu">
@@ -277,11 +277,11 @@
                             </t>
                             <div class="products_header d-flex flex-md-nowrap justify-content-end mb-4">
                                 <t t-call="website_sale.search">
-                                    <t t-set="_classes" t-valuef="w-100 w-md-auto mr-auto mb-2"/>
+                                    <t t-set="_classes" t-valuef="w-100 w-md-auto me-auto mb-2"/>
                                     <t t-set="search" t-value="original_search or search"/>
                                 </t>
                                 <t t-call="website_sale.pricelist_list" t-cache="pricelist">
-                                    <t t-set="_classes" t-valuef="ml-3 mb-2"/>
+                                    <t t-set="_classes" t-valuef="ms-3 mb-2"/>
                                 </t>
                             </div>
                             <div t-if="original_search and products" class="alert alert-warning mt8">
@@ -387,9 +387,9 @@
         <xpath expr="//div[hasclass('products_header')]/t[@t-call='website_sale.pricelist_list']" position="after">
             <t t-set="website_sale_sortable" t-value="website._get_product_sort_mapping()"/>
             <t t-set="website_sale_sortable_current" t-value="[sort for sort in website_sale_sortable if sort[0]==request.params.get('order', '')]"/>
-            <div class="o_sortby_dropdown dropdown dropdown_sorty_by ml-3 pb-2">
-                <span class="d-none d-lg-inline font-weight-bold text-muted">Sort By:</span>
-                <a role="button" href="#" class="dropdown-toggle btn btn-light border-0 px-0 text-muted align-baseline" data-toggle="dropdown">
+            <div class="o_sortby_dropdown dropdown dropdown_sorty_by ms-3 pb-2">
+                <span class="d-none d-lg-inline fw-bold text-muted">Sort By:</span>
+                <a role="button" href="#" class="dropdown-toggle btn btn-light border-0 px-0 text-muted align-baseline" data-bs-toggle="dropdown">
                     <span class="d-none d-lg-inline">
                         <t t-if='website_sale_sortable_current'>
                             <t t-esc="website_sale_sortable_current[0][1]"/>
@@ -400,7 +400,7 @@
                     </span>
                     <i class="fa fa-sort-amount-asc d-lg-none"/>
                 </a>
-                <div class="dropdown-menu dropdown-menu-right" role="menu">
+                <div class="dropdown-menu dropdown-menu-end" role="menu">
                     <t t-foreach="website_sale_sortable" t-as="sortby">
                         <a role="menuitem" rel="noindex,nofollow" t-att-href="keep('/shop', order=sortby[0])" class="dropdown-item">
                             <span t-out="sortby[1]"/>
@@ -437,9 +437,9 @@
     </template>
 
     <template id="categorie_link" name="Category Link">
-        <div t-att-data-link-href="keep('/shop/category/' + slug(c), category=0)" class="custom-control custom-radio mb-1 d-inline-block">
-            <input type="radio" style="pointer-events:none;" class="custom-control-input" t-att-id="c.id" t-att-value="c.id" t-att-checked="'true' if c.id == category.id else None"/>
-            <label class="custom-control-label font-weight-normal" t-att-for="c.id" t-field="c.name"/>
+        <div t-att-data-link-href="keep('/shop/category/' + slug(c), category=0)" class="custom-control form-check mb-1 d-inline-block">
+            <input type="radio" style="pointer-events:none;" class="form-check-input" t-att-id="c.id" t-att-value="c.id" t-att-checked="'true' if c.id == category.id else None"/>
+            <label class="form-check-label fw-normal" t-att-for="c.id" t-field="c.name"/>
         </div>
     </template>
 
@@ -452,7 +452,7 @@
         </xpath>
         <xpath expr="//div[hasclass('products_categories')]" position="inside">
             <button type="button" class="btn btn-light d-lg-none mb-2 w-100 p-0"
-                data-target="#wsale_products_categories_collapse" data-toggle="collapse">
+                data-bs-target="#wsale_products_categories_collapse" data-bs-toggle="collapse">
                 Show categories
             </button>
             <div class="collapse d-lg-block" id="wsale_products_categories_collapse">
@@ -460,9 +460,9 @@
                 <ul class="nav flex-column my-2">
                     <form>
                         <li class="nav-item">
-                            <div t-att-data-link-href="keep('/shop', category=0)" class="custom-control custom-radio mb-1 d-inline-block">
-                                <input type="radio" style="pointer-events:none;" class="custom-control-input o_not_editable" t-att-id="all_products" t-att-value="all_products" t-att-checked="'true' if not category else None"/>
-                                <label class="custom-control-label font-weight-normal" t-att-for="all_products">All Products</label>
+                            <div t-att-data-link-href="keep('/shop', category=0)" class="custom-control form-check mb-1 d-inline-block">
+                                <input type="radio" style="pointer-events:none;" class="form-check-input o_not_editable" t-att-id="all_products" t-att-value="all_products" t-att-checked="'true' if not category else None"/>
+                                <label class="form-check-label fw-normal" t-att-for="all_products">All Products</label>
                             </div>
                         </li>
                         <t t-foreach="categories" t-as="c">
@@ -506,7 +506,7 @@
         </xpath>
         <xpath expr="//div[hasclass('products_attributes_filters')]" position="inside">
             <button type="button" class="btn btn-light d-lg-none mb-2 w-100 p-0"
-                data-target="#wsale_products_attributes_collapse" data-toggle="collapse">
+                data-bs-target="#wsale_products_attributes_collapse" data-bs-toggle="collapse">
                 Show options
             </button>
             <div class="collapse d-lg-block mb-lg-3" id="wsale_products_attributes_collapse">
@@ -523,7 +523,7 @@
                                     <b t-field="a.name" class="o_products_attributes_title"/>
                                 </h6>
                                 <t t-if="a.display_type == 'select'">
-                                    <select class="custom-select css_attribute_select" name="attrib">
+                                    <select class="form-select css_attribute_select" name="attrib">
                                         <option value="" />
                                         <t t-foreach="a.value_ids" t-as="v">
                                             <option t-att-value="'%s-%s' % (a.id,v.id)" t-esc="v.name" t-att-selected="v.id in attrib_set" />
@@ -533,9 +533,9 @@
                                 <t t-if="a.display_type == 'radio' or a.display_type == 'pills'">
                                     <div class="flex-column">
                                         <t t-foreach="a.value_ids" t-as="v">
-                                            <div class="custom-control custom-checkbox mb-1">
-                                                <input type="checkbox" name="attrib" class="custom-control-input" t-att-id="'%s-%s' % (a.id,v.id)" t-att-value="'%s-%s' % (a.id,v.id)" t-att-checked="'checked' if v.id in attrib_set else None"/>
-                                                <label class="custom-control-label font-weight-normal" t-att-for="'%s-%s' % (a.id,v.id)" t-field="v.name"/>
+                                            <div class="custom-control form-check mb-1">
+                                                <input type="checkbox" name="attrib" class="form-check-input" t-att-id="'%s-%s' % (a.id,v.id)" t-att-value="'%s-%s' % (a.id,v.id)" t-att-checked="'checked' if v.id in attrib_set else None"/>
+                                                <label class="form-check-label fw-normal" t-att-for="'%s-%s' % (a.id,v.id)" t-field="v.name"/>
                                             </div>
                                         </t>
                                     </div>
@@ -561,7 +561,7 @@
                 <label class="m-0 h6 o_products_attributes_title">
                     <b>Price Range</b>
                 </label>
-                <input type="range" multiple="multiple" class="custom-range range-with-input"
+                <input type="range" multiple="multiple" class="form-range range-with-input"
                        t-att-data-currency="pricelist.currency_id.symbol"
                        t-att-data-currency-position="pricelist.currency_id.position"
                        t-att-step="pricelist.currency_id.rounding" t-att-min="'%f' % (available_min_price)"
@@ -616,10 +616,10 @@
                             <div class="d-sm-flex justify-content-between mb-2">
                                 <t t-call="website_sale.search">
                                     <t t-set="search" t-value="False"/>
-                                    <t t-set="_classes" t-value="'mb-2 mr-sm-2'"/>
+                                    <t t-set="_classes" t-value="'mb-2 me-sm-2'"/>
                                 </t>
                                 <t t-call="website_sale.pricelist_list">
-                                    <t t-set="_classes" t-valuef="ml-2 mb-2 float-right"/>
+                                    <t t-set="_classes" t-valuef="ms-2 mb-2 float-end"/>
                                 </t>
                             </div>
                         </div>
@@ -648,7 +648,7 @@
                                     <div>
                                         <t t-call="website_sale.product_price" />
                                         <small t-if="combination_info['base_unit_price']"
-                                               class="ml-1 text-muted o_base_unit_price_wrapper d-none" groups="website_sale.group_show_uom_price">
+                                               class="ms-1 text-muted o_base_unit_price_wrapper d-none" groups="website_sale.group_show_uom_price">
                                             <t t-call='website_sale.base_unit_price'/>
                                         </small>
                                     </div>
@@ -671,9 +671,9 @@
                                         <t t-set="hasBuyNow" t-value="false"/>
                                         <t t-set="ctaSizeBig" t-value="not hasQuantities or not hasBuyNow"/>
 
-                                        <div id="add_to_cart_wrap" class="d-inline-flex align-items-center mb-2 mr-auto">
+                                        <div id="add_to_cart_wrap" class="d-inline-flex align-items-center mb-2 me-auto">
                                             <a role="button" id="add_to_cart" t-attf-class="btn btn-primary js_check_product a-submit flex-grow-1 #{'btn-lg' if ctaSizeBig else ''}" href="#">
-                                                <i class="fa fa-shopping-cart mr-2"/>
+                                                <i class="fa fa-shopping-cart me-2"/>
                                                 <span style="font-weight: bold">ADD TO CART</span>
                                             </a>
                                         </div>
@@ -726,7 +726,7 @@
                 <t t-snippet-call="website.s_share">
                     <t t-set="_exclude_share_links" t-value="['whatsapp', 'linkedin']"/>
                     <t t-set="_no_title" t-value="True"/>
-                    <t t-set="_classes" t-valuef="text-lg-right"/>
+                    <t t-set="_classes" t-valuef="text-lg-end"/>
                     <t t-set="_link_classes" t-valuef="mx-1 my-0"/>
                 </t>
             </div>
@@ -782,7 +782,7 @@
         <xpath expr="//div[@t-field='product.website_description']" position="after">
             <div class="o_shop_discussion_rating" data-anchor='true'>
                 <section id="o_product_page_reviews" class="container pt32 pb32" data-anchor='true'>
-                    <a class="o_product_page_reviews_title d-flex justify-content-between text-decoration-none collapsed" type="button" data-toggle="collapse" data-target="#o_product_page_reviews_content" aria-expanded="false" aria-controls="o_product_page_reviews_content">
+                    <a class="o_product_page_reviews_title d-flex justify-content-between text-decoration-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#o_product_page_reviews_content" aria-expanded="false" aria-controls="o_product_page_reviews_content">
                         <h3 class="mb32">Customer Reviews</h3>
                         <i class="fa align-self-start"/>
                     </a>
@@ -804,7 +804,7 @@
             <attribute name="t-value" remove="false" add="true" separator=" "/>
         </xpath>
       <xpath expr="//div[@id='add_to_cart_wrap']" position="before">
-        <div t-attf-class="css_quantity input-group d-inline-flex mr-2 mb-2 align-middle #{'input-group-lg' if ctaSizeBig else ''}" contenteditable="false">
+        <div t-attf-class="css_quantity input-group d-inline-flex me-2 mb-2 align-middle #{'input-group-lg' if ctaSizeBig else ''}" contenteditable="false">
             <a t-attf-href="#" class="btn btn-link js_add_cart_json" aria-label="Remove one" title="Remove one">
                 <i class="fa fa-minus"></i>
             </a>
@@ -821,8 +821,8 @@
             <attribute name="t-value" remove="false" add="true" separator=" "/>
         </xpath>
         <xpath expr="//a[@id='add_to_cart']" position="after">
-            <a role="button" t-attf-class="btn btn-outline-primary o_we_buy_now ml-1 #{'btn-lg' if ctaSizeBig else ''}" href="#">
-                <i class="fa fa-bolt mr-2"/>
+            <a role="button" t-attf-class="btn btn-outline-primary o_we_buy_now ms-1 #{'btn-lg' if ctaSizeBig else ''}" href="#">
+                <i class="fa fa-bolt me-2"/>
                 <span style="font-weight:bold">BUY NOW</span>
             </a>
         </xpath>
@@ -834,7 +834,7 @@
                 <span class="oe_price" style="white-space: nowrap;" t-esc="combination_info['price']" t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"/>
                 <span itemprop="price" style="display:none;" t-esc="combination_info['price']"/>
                 <span itemprop="priceCurrency" style="display:none;" t-esc="website.currency_id.name"/>
-                <span t-attf-class="text-danger oe_default_price ml-1 h5 {{'' if combination_info['has_discounted_price'] else 'd-none'}}" style="text-decoration: line-through; white-space: nowrap;"
+                <span t-attf-class="text-danger oe_default_price ms-1 h5 {{'' if combination_info['has_discounted_price'] else 'd-none'}}" style="text-decoration: line-through; white-space: nowrap;"
                     t-esc="combination_info['list_price']" t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"
                     itemprop="listPrice"
                 />
@@ -886,16 +886,16 @@
                 <input type="hidden" t-if="len(filtered_sorted_variants) == 1" class="product_id" name="product_id" t-att-value="filtered_sorted_variants[0].id"/>
                 <t t-if="len(filtered_sorted_variants) &gt; 1">
                     <div class="mb-4">
-                        <div t-foreach="filtered_sorted_variants" t-as="variant_id" class="custom-control custom-radio mb-1">
+                        <div t-foreach="filtered_sorted_variants" t-as="variant_id" class="custom-control form-check mb-1">
                             <t t-set="template_combination_info" t-value="product._get_combination_info(only_template=True, add_qty=add_qty, pricelist=pricelist)"/>
                             <t t-set="combination_info" t-value="variant_id._get_combination_info_variant(add_qty=add_qty, pricelist=pricelist)"/>
-                            <input type="radio" name="product_id" class="custom-control-input product_id js_product_change" t-att-checked="'checked' if variant_id_index == 0 else None" t-attf-id="radio_variant_#{variant_id.id}" t-att-value="variant_id.id" t-att-data-price="combination_info['price']" t-att-data-combination="variant_id.product_template_attribute_value_ids.ids"/>
-                            <label t-attf-for="radio_variant_#{variant_id.id}" label-default="label-default" class="custom-control-label font-weight-normal">
+                            <input type="radio" name="product_id" class="form-check-input product_id js_product_change" t-att-checked="'checked' if variant_id_index == 0 else None" t-attf-id="radio_variant_#{variant_id.id}" t-att-value="variant_id.id" t-att-data-price="combination_info['price']" t-att-data-combination="variant_id.product_template_attribute_value_ids.ids"/>
+                            <label t-attf-for="radio_variant_#{variant_id.id}" label-default="label-default" class="form-check-label fw-normal">
                                 <span t-esc="combination_info['display_name']"/>
                                 <t t-set="diff_price" t-value="website.currency_id.compare_amounts(combination_info['price'], template_combination_info['price'])"/>
-                                <span class="badge badge-pill badge-light border" t-if="diff_price != 0">
+                                <span class="badge rounded-pill text-bg-light border" t-if="diff_price != 0">
                                     <span class="sign_badge_price_extra" t-esc="diff_price > 0 and '+' or '-'"/>
-                                    <span t-esc="abs(combination_info['price'] - template_combination_info['price'])" t-options="{'widget': 'monetary', 'display_currency': website.currency_id}" class="text-muted font-italic" />
+                                    <span t-esc="abs(combination_info['price'] - template_combination_info['price'])" t-options="{'widget': 'monetary', 'display_currency': website.currency_id}" class="text-muted fst-italic" />
                                 </span>
                             </label>
                         </div>
@@ -993,8 +993,8 @@
                                             </div>
                                             <div class="form-group col-12 s_website_form_submit s_website_form_no_submit_options">
                                                 <div style="width: 200px;" class="s_website_form_label"/>
-                                                <a role="button" href="/shop/checkout" class="btn btn-secondary float-left"><span class="fa fa-chevron-left"/> Previous</a>
-                                                <a role="button" class="btn btn-primary float-right s_website_form_send" href="/shop/confirm_order">Next <span class="fa fa-chevron-right" /></a>
+                                                <a role="button" href="/shop/checkout" class="btn btn-secondary float-start"><span class="fa fa-chevron-left"/> Previous</a>
+                                                <a role="button" class="btn btn-primary float-end s_website_form_send" href="/shop/confirm_order">Next <span class="fa fa-chevron-right" /></a>
                                                 <span id="s_website_form_result"></span>
                                             </div>
                                         </div>
@@ -1187,7 +1187,7 @@
                                         <span class="fa fa-chevron-left" />
                                         <span class="">Continue Shopping</span>
                                     </a>
-                                    <a role="button" t-if="website_sale_order and website_sale_order.website_order_line" class="btn btn-primary float-right d-none d-xl-inline-block" href="/shop/checkout?express=1">
+                                    <a role="button" t-if="website_sale_order and website_sale_order.website_order_line" class="btn btn-primary float-end d-none d-xl-inline-block" href="/shop/checkout?express=1">
                                         <span class="">Process Checkout</span>
                                         <span class="fa fa-chevron-right" />
                                     </a>
@@ -1202,7 +1202,7 @@
                                     <span class="fa fa-chevron-left" />
                                     Continue<span class="d-none d-md-inline"> Shopping</span>
                                 </a>
-                                <a role="button" t-if="website_sale_order and website_sale_order.website_order_line" class="btn btn-primary float-right" href="/shop/checkout?express=1">
+                                <a role="button" t-if="website_sale_order and website_sale_order.website_order_line" class="btn btn-primary float-end" href="/shop/checkout?express=1">
                                     <span class="">Process Checkout</span>
                                     <span class="fa fa-chevron-right" />
                                 </a>
@@ -1222,7 +1222,7 @@
         </div>
         <t t-if="website_sale_order and website_sale_order.website_order_line">
             <t t-foreach="website_sale_order.website_order_line" t-as="line">
-                <div class="form-row mb8 cart_line">
+                <div class="row mb8 cart_line">
                     <div class="col-3 text-center">
                         <span t-if="line._is_not_sellable_line() and line.product_id.image_128">
                             <img t-att-src="image_data_uri(line.product_id.image_128)" class="img o_image_64_max rounded mb-2 img-fluid" t-att-alt="line.name_short"/>
@@ -1302,7 +1302,7 @@
             </div>
         </form>
         <t t-if="request.params.get('code_not_available')" name="code_not_available">
-            <div class="alert alert-danger text-left" role="alert">This promo code is not available.</div>
+            <div class="alert alert-danger text-start" role="alert">This promo code is not available.</div>
         </t>
     </template>
 
@@ -1399,7 +1399,7 @@
             </form>
             <div t-attf-class="card #{selected and 'border border-primary' or 'js_change_shipping'}">
                 <div class='card-body' style='min-height: 130px;'>
-                    <a t-if="allow_edit" href="#" class="btn btn-link float-right p-0 js_edit_address no-decoration" role="button" title="Edit this address" aria-label="Edit this address"><i class='fa fa-edit'/></a>
+                    <a t-if="allow_edit" href="#" class="btn btn-link float-end p-0 js_edit_address no-decoration" role="button" title="Edit this address" aria-label="Edit this address"><i class='fa fa-edit'/></a>
                     <t t-esc="contact" t-options="dict(widget='contact', fields=['name', 'address'], no_marker=True)"/>
                 </div>
                 <div class='card-footer' t-if='not readonly'>
@@ -1464,7 +1464,7 @@
                                     <h5 class="text-danger" t-esc="err" />
                                 </t>
                                 <form t-if="account_on_checkout != 'mandatory' or not is_public_user" action="/shop/address" method="post" class="checkout_autoformat">
-                                    <div class="form-row">
+                                    <div class="row">
                                         <div t-attf-class="form-group #{error.get('name') and 'o_has_error' or ''} col-lg-12 div_name">
                                             <label class="col-form-label" for="name">Name</label>
                                             <input type="text" name="name" t-attf-class="form-control #{error.get('name') and 'is-invalid' or ''}" t-att-value="'name' in checkout and checkout['name']" />
@@ -1508,7 +1508,7 @@
                                         <div class="w-100"/>
                                         <div t-attf-class="form-group #{error.get('country_id') and 'o_has_error' or ''} col-lg-6 div_country">
                                             <label class="col-form-label" for="country_id">Country</label>
-                                            <select id="country_id" name="country_id" t-attf-class="form-control #{error.get('country_id') and 'is-invalid' or ''}" t-att-mode="mode[1]">
+                                            <select id="country_id" name="country_id" t-attf-class="form-select #{error.get('country_id') and 'is-invalid' or ''}" t-att-mode="mode[1]">
                                                 <option value="">Country...</option>
                                                 <t t-foreach="countries" t-as="c">
                                                     <option t-att-value="c.id" t-att-selected="c.id == (country and country.id or -1)">
@@ -1519,7 +1519,7 @@
                                         </div>
                                         <div t-attf-class="form-group #{error.get('state_id') and 'o_has_error' or ''} col-lg-6 div_state" t-att-style="(not country or not country.state_ids) and 'display: none'">
                                             <label class="col-form-label" for="state_id">State / Province</label>
-                                            <select name="state_id" t-attf-class="form-control #{error.get('state_id') and 'is-invalid' or ''}" data-init="1">
+                                            <select name="state_id" t-attf-class="form-select #{error.get('state_id') and 'is-invalid' or ''}" data-init="1">
                                                 <option value="">State / Province...</option>
                                                 <t t-foreach="country_states" t-as="s">
                                                     <option t-att-value="s.id" t-att-selected="s.id == ('state_id' in checkout and country and checkout['state_id'] != '' and int(checkout['state_id']))">
@@ -1573,12 +1573,12 @@
             <t t-set='vat_warning' t-value="'vat' in checkout and checkout['vat'] and not can_edit_vat" />
             <t t-if="mode == ('new', 'billing') or (mode == ('edit', 'billing') and (can_edit_vat or 'vat' in checkout and checkout['vat']))">
                 <div t-attf-class="form-group #{error.get('company_name') and 'o_has_error' or ''} col-lg-6 mb-0">
-                    <label class="col-form-label font-weight-normal label-optional" for="company_name">Company Name</label>
+                    <label class="col-form-label fw-normal label-optional" for="company_name">Company Name</label>
                     <input type="text" name="company_name" t-attf-class="form-control #{error.get('company_name') and 'is-invalid' or ''}" t-att-value="'commercial_company_name' in checkout and checkout['commercial_company_name'] or 'company_name' in checkout and checkout['company_name']" t-att-readonly="'1' if vat_warning else None" />
                     <small t-if="vat_warning" class="form-text text-muted d-block d-lg-none">Changing company name is not allowed once document(s) have been issued for your account. Please contact us directly for this operation.</small>
                 </div>
                 <div t-attf-class="form-group #{error.get('vat') and 'o_has_error' or ''} col-lg-6 div_vat mb-0">
-                    <label class="col-form-label font-weight-normal label-optional" for="vat">TIN / VAT </label>
+                    <label class="col-form-label fw-normal label-optional" for="vat">TIN / VAT </label>
                     <input type="text" name="vat" t-attf-class="form-control #{error.get('vat') and 'is-invalid' or ''}" t-att-value="'vat' in checkout and checkout['vat']" t-att-readonly="'1' if vat_warning else None"/>
                     <small t-if="vat_warning" class="form-text text-muted d-block d-lg-none">Changing VAT number is not allowed once document(s) have been issued for your account. Please contact us directly for this operation.</small>
                 </div>
@@ -1592,7 +1592,7 @@
     <template id="address_on_payment" name="Address on payment">
         <div class="card">
             <div class="card-body" id="shipping_and_billing">
-                <a class="float-right no-decoration" href="/shop/checkout"><i class="fa fa-edit"/> Edit</a>
+                <a class="float-end no-decoration" href="/shop/checkout"><i class="fa fa-edit"/> Edit</a>
                 <t t-set="same_shipping" t-value="bool(order.partner_shipping_id==order.partner_id or only_services)" />
                 <div>
                     <b>Billing<t t-if="same_shipping and not only_services"> &amp; Shipping</t>: </b>
@@ -1678,13 +1678,13 @@
 
     <template id="payment_footer" name="Payment">
         <div name="o_checkbox_container"
-             class="custom-control custom-checkbox mt-2 o_accept_tc_button"/>
-        <div class="float-left mt-2">
+             class="custom-control form-check mt-2 o_accept_tc_button"/>
+        <div class="float-start mt-2">
             <a role="button" href="/shop/cart" class="btn btn-secondary">
                 <i class="fa fa-chevron-left"/> Return to Cart
             </a>
         </div>
-        <div class="float-right mt-2">
+        <div class="float-end mt-2">
             <button name="o_payment_submit_button"
                     type="submit"
                     class="btn btn-primary"
@@ -1697,8 +1697,8 @@
 
     <template id="payment_sale_note" inherit_id="payment_footer" name="Accept Terms &amp; Conditions" active="False">
         <xpath expr="//div[@name='o_checkbox_container']" position="inside">
-            <input type="checkbox" id="checkbox_tc" class="custom-control-input"/>
-            <label for="checkbox_tc" class="custom-control-label">
+            <input type="checkbox" id="checkbox_tc" class="form-check-input"/>
+            <label for="checkbox_tc" class="form-check-label">
                 I agree to the <a target="_BLANK" href="/terms">terms &amp; conditions</a>
             </label>
         </xpath>
@@ -1713,7 +1713,7 @@
                     <t t-call="website_sale.total">
                         <t t-set="no_rowspan" t-value="1"/>
                     </t>
-                    <a role="button" t-if="website_sale_order and website_sale_order.website_order_line" class="btn btn-secondary float-right d-none d-xl-inline-block" href="/shop/checkout?express=1">
+                    <a role="button" t-if="website_sale_order and website_sale_order.website_order_line" class="btn btn-secondary float-end d-none d-xl-inline-block" href="/shop/checkout?express=1">
                         <span>Process Checkout</span>
                     </a>
                 </div>
@@ -1730,7 +1730,7 @@
             <div class="card-body p-xl-0">
                 <div class="toggle_summary d-xl-none">
                     <b>Your order: </b> <span id="amount_total_summary" class="monetary_field" t-field="website_sale_order.amount_total" t-options='{"widget": "monetary", "display_currency": website_sale_order.pricelist_id.currency_id}'/>
-                    <span class='fa fa-chevron-down fa-border float-right' role="img" aria-label="Details" title="Details"></span>
+                    <span class='fa fa-chevron-down fa-border float-end' role="img" aria-label="Details" title="Details"></span>
                 </div>
                 <div t-if="not website_sale_order or not website_sale_order.website_order_line" class="alert alert-info">
                     Your cart is empty!
@@ -1816,7 +1816,7 @@
                                     </p>
                                 </t>
                                 <div class="oe_structure clearfix mt-3" id="oe_structure_website_sale_confirmation_1"/>
-                                <h3 class="text-left mt-3">
+                                <h3 class="text-start mt-3">
                                     <strong>Payment Information:</strong>
                                 </h3>
                                 <table class="table">
@@ -1825,10 +1825,10 @@
                                             <td colspan="2">
                                                 <t t-esc="order.get_portal_last_transaction().acquirer_id.sudo().name" />
                                             </td>
-                                            <td class="text-right" width="100">
+                                            <td class="text-end" width="100">
                                                 <strong>Total:</strong>
                                             </td>
-                                            <td class="text-right" width="100">
+                                            <td class="text-end" width="100">
                                                 <strong t-field="order.amount_total" t-options="{'widget': 'monetary', 'display_currency': order.pricelist_id.currency_id}" />
                                             </td>
                                         </tr>
@@ -1868,20 +1868,20 @@
                       <td class="col-md-2 col-3 border-0" ></td>
                   </tr>
                   <tr id="order_total_untaxed">
-                      <td class="text-right border-0">Subtotal:</td>
-                      <td class="text-xl-right border-0" >
+                      <td class="text-end border-0">Subtotal:</td>
+                      <td class="text-xl-end border-0" >
                           <span t-field="website_sale_order.amount_untaxed" class="monetary_field" style="white-space: nowrap;" t-options="{'widget': 'monetary', 'display_currency': website_sale_order.currency_id}"/>
                       </td>
                   </tr>
                   <tr id="order_total_taxes">
-                      <td class="text-right border-0">Taxes:</td>
-                      <td class="text-xl-right border-0">
+                      <td class="text-end border-0">Taxes:</td>
+                      <td class="text-xl-end border-0">
                            <span t-field="website_sale_order.amount_tax" class="monetary_field" style="white-space: nowrap;" t-options="{'widget': 'monetary', 'display_currency': website_sale_order.currency_id}" />
                       </td>
                   </tr>
                   <tr id="order_total">
-                      <td class="text-right border-top border-bottom-0"><strong>Total:</strong></td>
-                      <td class="text-xl-right border-top border-bottom-0">
+                      <td class="text-end border-top border-bottom-0"><strong>Total:</strong></td>
+                      <td class="text-xl-end border-top border-bottom-0">
                           <strong t-field="website_sale_order.amount_total" class="monetary_field"
                               t-options='{"widget": "monetary", "display_currency": website_sale_order.pricelist_id.currency_id}'/>
                       </td>
@@ -1893,7 +1893,7 @@
     <template id="reduction_code" inherit_id="website_sale.total" name="Promo Code">
         <xpath expr="//div[@id='cart_total']//table/tr[last()]" position="after">
             <tr t-if="not hide_promotions">
-                <td colspan="3" class="text-center text-xl-right border-0">
+                <td colspan="3" class="text-center text-xl-end border-0">
                 <span class=''>
                     <t t-set='force_coupon' t-value="website_sale_order.pricelist_id.code or request.params.get('code_not_available')"/>
                     <t t-if="not force_coupon">
@@ -1917,7 +1917,7 @@
                 (payment_tx_id.state == 'authorized' and 'alert-success') or
                 'bg-danger'}">
                 <div class="card-header">
-                    <a role="button" groups="base.group_system" class="btn btn-sm btn-link text-white float-right" target="_blank" aria-label="Edit" title="Edit"
+                    <a role="button" groups="base.group_system" class="btn btn-sm btn-link text-white float-end" target="_blank" aria-label="Edit" title="Edit"
                             t-att-href="'/web#model=%s&amp;id=%s&amp;action=%s&amp;view_type=form' % ('payment.acquirer', payment_tx_id.acquirer_id.id, 'payment.action_payment_acquirer')">
                         <i class="fa fa-pencil"></i>
                     </a>
@@ -1978,12 +1978,12 @@
     <template id="website_sale.shop_product_carousel" name="Shop Product Carousel">
         <t t-set="product_images" t-value="product_variant._get_images() if product_variant else product._get_images()"/>
         <t t-set="product_carousel_block_name">Product Image</t>
-        <div id="o-carousel-product" class="carousel slide position-sticky mb-3 overflow-hidden" data-ride="carousel" data-interval="0" t-att-data-name="product_carousel_block_name">
+        <div id="o-carousel-product" class="carousel slide position-sticky mb-3 overflow-hidden" data-bs-ride="carousel" data-bs-interval="0" t-att-data-name="product_carousel_block_name">
             <div class="o_carousel_product_outer carousel-outer position-relative flex-grow-1">
                 <div class="carousel-inner h-100">
                     <t t-foreach="product_images" t-as="product_image">
                         <div t-attf-class="carousel-item h-100#{' active' if product_image_first else ''}">
-                            <div t-if="product_image._name == 'product.image' and product_image.embed_code" class="d-flex align-items-center justify-content-center h-100 embed-responsive embed-responsive-16by9">
+                            <div t-if="product_image._name == 'product.image' and product_image.embed_code" class="d-flex align-items-center justify-content-center h-100 ratio ratio-16x9">
                                 <t t-out="product_image.embed_code"/>
                             </div>
                             <div  t-else="" t-field="product_image.image_1920" class="d-flex align-items-center justify-content-center h-100" t-options='{"widget": "image", "preview_image": "image_1024", "class": "product_detail_img mh-100", "alt-field": "name", "zoom": product_image.can_image_1024_be_zoomed and "image_1920", "itemprop": "image"}'/>
@@ -1991,10 +1991,10 @@
                     </t>
                 </div>
                 <t t-if="len(product_images) > 1">
-                    <a class="carousel-control-prev" href="#o-carousel-product" role="button" data-slide="prev">
+                    <a class="carousel-control-prev" href="#o-carousel-product" role="button" data-bs-slide="prev">
                         <span class="fa fa-chevron-left fa-2x" role="img" aria-label="Previous" title="Previous"/>
                     </a>
-                    <a class="carousel-control-next" href="#o-carousel-product" role="button" data-slide="next">
+                    <a class="carousel-control-next" href="#o-carousel-product" role="button" data-bs-slide="next">
                         <span class="fa fa-chevron-right fa-2x" role="img" aria-label="Next" title="Next"/>
                     </a>
                 </t>
@@ -2013,7 +2013,7 @@
     <template id="carousel_product_indicators_left" inherit_id="website_sale.shop_product_carousel" name="Carousel Product Indicators Left" active="False">
         <xpath expr="//div[hasclass('o_carousel_product_outer')]" position="before">
             <t t-call="website_sale.carousel_product_indicators">
-                <t t-set="indicators_list_class" t-value="'d-flex d-lg-block pr-2'"/>
+                <t t-set="indicators_list_class" t-value="'d-flex d-lg-block pe-2'"/>
             </t>
         </xpath>
         <xpath expr="//div[@id='o-carousel-product']" position="attributes">
@@ -2023,11 +2023,11 @@
 
     <template id="carousel_product_indicators" name="Carousel Product">
         <div t-ignore="True" t-attf-class="o_carousel_product_indicators {{indicators_div_class}}">
-            <ol t-if="len(product_images) > 1" t-attf-class="carousel-indicators {{indicators_list_class}} position-static pt-2 pt-lg-0 mx-auto my-0 text-left">
+            <ol t-if="len(product_images) > 1" t-attf-class="carousel-indicators {{indicators_list_class}} position-static pt-2 pt-lg-0 mx-auto my-0 text-start">
                 <li t-foreach="product_images" t-as="product_image"
                     t-attf-class="align-top position-relative {{'active' if product_image_first else ''}}"
                     data-target="#o-carousel-product"
-                    t-att-data-slide-to="str(product_image_index)">
+                    t-att-data-bs-slide-to="str(product_image_index)">
                     <div t-field="product_image.image_128" t-options='{"widget": "image", "qweb_img_responsive": False, "class": "o_image_64_cover", "alt-field": "name"}'/>
                     <i t-if="product_image._name == 'product.image' and product_image.embed_code" class="fa fa-2x fa-play-circle o_product_video_thumb bg-black-50 text-center"/>
                 </li>
@@ -2082,7 +2082,7 @@
     </template>
 
     <template id="product_category_extra_link" name="Product Category Extra Link">
-        <button  class="btn btn-link btn-sm pr-0" disabled="disabled">
+        <button  class="btn btn-link btn-sm pe-0" disabled="disabled">
             <t t-if="len(categories) == 1">Category:</t>
             <t t-else="">Categories:</t>
         </button>
diff --git a/addons/website_sale/views/website_sale_visitor_views.xml b/addons/website_sale/views/website_sale_visitor_views.xml
index 7080073bb99..fcfd68f2e39 100644
--- a/addons/website_sale/views/website_sale_visitor_views.xml
+++ b/addons/website_sale/views/website_sale_visitor_views.xml
@@ -95,7 +95,7 @@
                 <field name="product_ids"/>
             </xpath>
             <xpath expr="//div[@id='o_page_count']" position="after">
-                 <div id="o_product_count">Visited Products<span class="float-right font-weight-bold"><field name="product_count"/></span></div>
+                 <div id="o_product_count">Visited Products<span class="float-end fw-bold"><field name="product_count"/></span></div>
             </xpath>
         </field>
     </record>
diff --git a/addons/website_sale_comparison/static/src/scss/website_sale_comparison.scss b/addons/website_sale_comparison/static/src/scss/website_sale_comparison.scss
index 4bcb4389e1b..55b874645fe 100644
--- a/addons/website_sale_comparison/static/src/scss/website_sale_comparison.scss
+++ b/addons/website_sale_comparison/static/src/scss/website_sale_comparison.scss
@@ -57,7 +57,7 @@
 
 // Specifications
 #product_full_spec {
-    border-top: 1px solid gray('400');
+    border-top: 1px solid map-get($grays, '400');
 
     .o_add_compare_dyn {
         font-size: 1.1rem;
diff --git a/addons/website_sale_comparison/static/src/xml/comparison.xml b/addons/website_sale_comparison/static/src/xml/comparison.xml
index 5ef256d69d6..f64bd10680e 100644
--- a/addons/website_sale_comparison/static/src/xml/comparison.xml
+++ b/addons/website_sale_comparison/static/src/xml/comparison.xml
@@ -6,7 +6,7 @@
                 <span class="o_product_panel_header text-center">
                     <span class="o_product_icon"><i class="fa fa-exchange" role="img" aria-label="Product" title="Product"></i></span>
                     <span class="o_product_text">Compare</span>
-                    <span class="o_product_circle o_animate_blink badge badge-primary">0</span>
+                    <span class="o_product_circle o_animate_blink badge text-bg-primary">0</span>
                 </span>
                 <span class="o_product_panel_content">
                     <div class="o_comparelist_products">
@@ -17,7 +17,7 @@
                         </div>
                     </div>
                     <div class="o_comparelist_button" style='display:none'>
-                        <a role="button" class="btn btn-primary d-block" href="#"><i class="fa fa-exchange mr-2"/>Compare</a>
+                        <a role="button" class="btn btn-primary d-block" href="#"><i class="fa fa-exchange me-2"/>Compare</a>
                     </div>
                 </span>
             </span>
diff --git a/addons/website_sale_comparison/views/website_sale_comparison_template.xml b/addons/website_sale_comparison/views/website_sale_comparison_template.xml
index a1fb3dbab63..184bb33d728 100644
--- a/addons/website_sale_comparison/views/website_sale_comparison_template.xml
+++ b/addons/website_sale_comparison/views/website_sale_comparison_template.xml
@@ -20,7 +20,7 @@
                             <h3 class="m-0">Specifications</h3>
                             <t t-if="is_view_active('website_sale_comparison.add_to_compare')">
                                 <t t-set="product_variant" t-value="product_variant or product._create_first_product_variant()"/>
-                                <button t-if="product_variant" type="button" role="button" class="d-none d-md-block btn btn-link px-0 o_add_compare_dyn" aria-label="Compare" t-att-data-product-product-id="product_variant.id" data-action="o_comparelist"><span class="fa fa-exchange mr-2"></span>Compare</button>
+                                <button t-if="product_variant" type="button" role="button" class="d-none d-md-block btn btn-link px-0 o_add_compare_dyn" aria-label="Compare" t-att-data-product-product-id="product_variant.id" data-action="o_comparelist"><span class="fa fa-exchange me-2"></span>Compare</button>
                             </t>
                         </div>
                         <div id="product_specifications">
@@ -30,7 +30,7 @@
                                         <table class="table">
                                             <t t-if="len(categories) > 1">
                                                 <tr>
-                                                    <th class="text-left" t-att-colspan="2">
+                                                    <th class="text-start" t-att-colspan="2">
                                                         <span t-if="category" t-field="category.name"/>
                                                         <span t-else="">Uncategorized</span>
                                                     </th>
@@ -126,7 +126,7 @@
                                             <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()" />
                                                 <input name="product_id" t-att-value="product.id" type="hidden"
                                                        t-att-data-product-tracking-info="json.dumps(request.env['product.template'].get_google_analytics_data(combination_info))"/>
-                                                <a role="button" class="btn btn-primary d-block a-submit" href="#"><i class="fa fa-shopping-cart mr-2"></i>Add to Cart</a>
+                                                <a role="button" class="btn btn-primary d-block a-submit" href="#"><i class="fa fa-shopping-cart me-2"></i>Add to Cart</a>
                                             </form>
                                         </div>
                                     </td>
@@ -135,8 +135,8 @@
                             <tbody>
                                 <t t-foreach="categories" t-as="category">
                                     <t t-if="len(categories) &gt; 1">
-                                        <tr class="clickable" data-toggle="collapse" t-att-data-target="'.o_ws_category_%d' % category.id">
-                                            <th class="text-left" t-att-colspan="len(products) + 1"><i class="fa fa-chevron-circle-down o_product_comparison_collpase" role="img" aria-label="Collapse" title="Collapse"></i><span t-if="category" t-field="category.name"/><span t-else="">Uncategorized</span></th>
+                                        <tr class="clickable" data-bs-toggle="collapse" t-att-data-bs-target="'.o_ws_category_%d' % category.id">
+                                            <th class="text-start" t-att-colspan="len(products) + 1"><i class="fa fa-chevron-circle-down o_product_comparison_collpase" role="img" aria-label="Collapse" title="Collapse"></i><span t-if="category" t-field="category.name"/><span t-else="">Uncategorized</span></th>
                                         </tr>
                                     </t>
                                     <tr t-foreach="categories[category]" t-as="attribute" t-att-class="'collapse show o_ws_category_%d' % category.id">
@@ -159,18 +159,18 @@
 
     <template id="product_product" name="Comparator - Product row in comparator popover">
         <t t-set="combination_info" t-value="product._get_combination_info_variant()"/>
-        <div class="row no-gutters align-items-center my-1 o_product_row" t-att-data-category_ids="product.public_categ_ids.ids">
+        <div class="row g-0 align-items-center my-1 o_product_row" t-att-data-category_ids="product.public_categ_ids.ids">
             <div class="col-3 text-center">
                 <img class="img o_image_64_max" t-att-src="website.image_url(product, 'image_128')" alt="Product image"/>
             </div>
-            <div class="col-8 pl-2">
+            <div class="col-8 ps-2">
                 <h6>
                     <a t-att-href="product.website_url"><t t-esc="combination_info['display_name']" /></a><br/>
                     <del t-attf-class="text-danger mr8 {{'' if combination_info['has_discounted_price'] else 'd-none'}}" style="white-space: nowrap;" t-esc="combination_info['list_price']" t-options="{'widget': 'monetary', 'display_currency': website.currency_id}" />
                     <span t-esc="combination_info['price']" t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"></span>
                 </h6>
             </div>
-            <div class="col-1 text-right">
+            <div class="col-1 text-end">
                 <a href='#' class="o_remove" title="Remove" t-att-data-product_product_id="product.id">
                     <i class="fa fa-trash" role="img" aria-label="Remove"></i>
                 </a>
diff --git a/addons/website_sale_delivery/views/website_sale_delivery_templates.xml b/addons/website_sale_delivery/views/website_sale_delivery_templates.xml
index 04df661a90a..e8edf6fe15d 100644
--- a/addons/website_sale_delivery/views/website_sale_delivery_templates.xml
+++ b/addons/website_sale_delivery/views/website_sale_delivery_templates.xml
@@ -4,8 +4,8 @@
     <template id="cart_delivery" name="Delivery Costs" inherit_id="website_sale.total">
         <xpath expr="//tr[@id='order_total_untaxed']" position="before">
             <tr id="order_delivery" t-if="website_sale_order and website_sale_order.carrier_id">
-              <td class="text-right border-0 text-muted"  title="Delivery will be updated after choosing a new delivery method">Delivery:</td>
-              <td class="text-xl-right border-0 text-muted" >
+              <td class="text-end border-0 text-muted"  title="Delivery will be updated after choosing a new delivery method">Delivery:</td>
+              <td class="text-xl-end border-0 text-muted" >
                    <span t-field="website_sale_order.amount_delivery" class="monetary_field" style="white-space: nowrap;" t-options='{
                       "widget": "monetary",
                       "display_currency": website_sale_order.currency_id,
@@ -18,7 +18,7 @@
     <template id="payment_delivery_methods">
         <input t-att-value="delivery.id" t-att-id="'delivery_%i' % delivery.id" type="radio" name="delivery_type" t-att-checked="order.carrier_id and order.carrier_id.id == delivery.id and 'checked' or False" t-att-class="'d-none' if delivery_nb == 1 else ''"/>
         <label class="label-optional" t-field="delivery.name"/>
-        <t t-set='badge_class' t-value="(delivery_nb != 1 and 'float-right ' or '') + 'badge badge-secondary'" />
+        <t t-set='badge_class' t-value="(delivery_nb != 1 and 'float-end ' or '') + 'badge text-bg-secondary'" />
         <t t-if="delivery.delivery_type == 'fixed'">
           <span t-if="delivery.fixed_price > 0.0" t-att-class="badge_class">
             <t t-esc="delivery.rate_shipment(website_sale_order)['price'] if delivery.free_over else delivery.fixed_price"
diff --git a/addons/website_sale_delivery_mondialrelay/static/src/xml/website_sale_delivery_mondialrelay.xml b/addons/website_sale_delivery_mondialrelay/static/src/xml/website_sale_delivery_mondialrelay.xml
index cf69a0b0aaa..94050584ad5 100644
--- a/addons/website_sale_delivery_mondialrelay/static/src/xml/website_sale_delivery_mondialrelay.xml
+++ b/addons/website_sale_delivery_mondialrelay/static/src/xml/website_sale_delivery_mondialrelay.xml
@@ -6,9 +6,7 @@
                 <div class="modal-content">
                     <div class="modal-header">
                         <div class="h5 modal-title">Choose your Parcel Point</div>
-                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                            <span>×</span>
-                        </button>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                     </div>
                     <div class="modal-body">
                         <div class="w-100" id="o_zone_widget">
@@ -17,7 +15,7 @@
                     </div>
                     <footer class="modal-footer">
                         <button type="button" id="btn_confirm_relay" class="btn btn-primary disabled" aria-label="Choose this Parcel Point">Send to this Parcel Point</button>
-                        <button type="button" class="btn" data-dismiss="modal" aria-label="Cancel">Cancel</button>
+                        <button type="button" class="btn" data-bs-dismiss="modal" aria-label="Cancel">Cancel</button>
                     </footer>
                 </div>
             </div>
diff --git a/addons/website_sale_delivery_mondialrelay/views/templates.xml b/addons/website_sale_delivery_mondialrelay/views/templates.xml
index 79fdfdde676..20f674950f0 100644
--- a/addons/website_sale_delivery_mondialrelay/views/templates.xml
+++ b/addons/website_sale_delivery_mondialrelay/views/templates.xml
@@ -17,7 +17,7 @@
         <template id="website_sale_delivery_mondialrelay_address_kanban" inherit_id="website_sale.address_kanban">
             <xpath expr="//t[@t-esc='contact']" position="before">
                 <t t-if="contact.is_mondialrelay">
-                    <img class="float-right" title="Mondial Relay" height="20px" src="/website_sale_delivery_mondialrelay/static/src/img/logo.png" />
+                    <img class="float-end" title="Mondial Relay" height="20px" src="/website_sale_delivery_mondialrelay/static/src/img/logo.png" />
                 </t>
             </xpath>
         </template>
diff --git a/addons/website_sale_digital/views/website_sale_digital.xml b/addons/website_sale_digital/views/website_sale_digital.xml
index 622f3443be1..b7c4ff25711 100644
--- a/addons/website_sale_digital/views/website_sale_digital.xml
+++ b/addons/website_sale_digital/views/website_sale_digital.xml
@@ -5,7 +5,7 @@
             <t t-if="digital_attachments" t-set="attachments" t-value="digital_attachments.get(line.product_id.id)"/>
             <t t-if="attachments">
                 <span class="dropdown">
-                    <button class="btn btn-sm btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
+                    <button class="btn btn-sm btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-bs-toggle="dropdown">
                         Downloads
                     </button>
                     <div class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
diff --git a/addons/website_sale_loyalty/views/website_sale_templates.xml b/addons/website_sale_loyalty/views/website_sale_templates.xml
index 9187cd0200d..816654ea381 100644
--- a/addons/website_sale_loyalty/views/website_sale_templates.xml
+++ b/addons/website_sale_loyalty/views/website_sale_templates.xml
@@ -20,7 +20,7 @@
     <template id="modify_code_form" inherit_id="website_sale.total" name="Loyalty, coupon, gift card">
         <xpath expr="//div[@id='cart_total']//table/tr[last()]" position="after">
             <tr t-if="not hide_promotions" class="oe_website_sale_gift_card">
-                <td colspan="3" class="text-center text-xl-right border-0">
+                <td colspan="3" class="text-center text-xl-end border-0">
                     <span class=''>
                         <t t-set='force_gift_card' t-value="request.params.get('gift_card_error')"/>
                         <t t-if="not force_gift_card">
@@ -30,17 +30,17 @@
                             <t t-call="website_sale_loyalty.pay_with_gift_card_form"/>
                         </div>
                         <t t-if="request.params.get('code_not_available')">
-                            <div class="alert alert-danger text-left mt16" role="alert">
+                            <div class="alert alert-danger text-start mt16" role="alert">
                                 Invalid or expired promo code.
                             </div>
                         </t>
                         <t t-if="website_sale_order.get_promo_code_error(delete=False)">
-                            <div class="alert alert-danger text-left mt16" role="alert">
+                            <div class="alert alert-danger text-start mt16" role="alert">
                                 <t t-esc="website_sale_order.get_promo_code_error()"/>
                             </div>
                         </t>
                         <t t-if="website_sale_order and website_sale_order.get_promo_code_success_message(delete=False)">
-                            <div class="alert alert-success text-left mt16" role="alert">
+                            <div class="alert alert-success text-start mt16" role="alert">
                                 You have successfully applied the following code: <strong t-esc="website_sale_order.get_promo_code_success_message()"/>
                             </div>
                         </t>
@@ -51,7 +51,7 @@
                                         method="post" name="claim_reward">
                                         <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
                                         <input type="hidden" name="reward" t-att-value="reward.id"/>
-                                        <div class="alert alert-success text-left mt16" role="alert">
+                                        <div class="alert alert-success text-start mt16" role="alert">
                                             <div class="row">
                                                 <div class="col-8">
                                                     <strong t-esc="reward.description"/>
@@ -109,8 +109,8 @@
     <template id="cart_discount" name="Show Discount in Subtotal" active="False" inherit_id="website_sale.total">
         <xpath expr="//tr[@id='order_total_untaxed']" position="before">
             <tr t-if="website_sale_order and website_sale_order.reward_amount">
-            <td class="text-right border-0 text-muted" title="Discounted amount">Discount:</td>
-            <td class="text-xl-right border-0 text-muted">
+            <td class="text-end border-0 text-muted" title="Discounted amount">Discount:</td>
+            <td class="text-xl-end border-0 text-muted">
                 <span t-field="website_sale_order.reward_amount" style="white-space: nowrap;"
                     class="monetary_field"
                     t-options='{
diff --git a/addons/website_sale_slides/static/src/xml/website_slides_unsubscribe.xml b/addons/website_sale_slides/static/src/xml/website_slides_unsubscribe.xml
index 1cadfbbf67d..7b671599e9e 100644
--- a/addons/website_sale_slides/static/src/xml/website_slides_unsubscribe.xml
+++ b/addons/website_sale_slides/static/src/xml/website_slides_unsubscribe.xml
@@ -5,7 +5,7 @@
         <t t-jquery="p:last" t-operation="after">
             <t t-if="widget.enroll === 'payment'">
                 <p class="alert alert-warning">
-                    <i class="fa fa-exclamation-triangle fa-3x float-left mr-3"></i>
+                    <i class="fa fa-exclamation-triangle fa-3x float-start me-3"></i>
                     This course is paid.<br/>
                     Leaving the course and re-enrolling afterwards means that you'll be charged again.
                 </p>
diff --git a/addons/website_sale_slides/views/slide_channel_views.xml b/addons/website_sale_slides/views/slide_channel_views.xml
index 8724780df8e..70cfc88a810 100644
--- a/addons/website_sale_slides/views/slide_channel_views.xml
+++ b/addons/website_sale_slides/views/slide_channel_views.xml
@@ -42,7 +42,7 @@
         <field name="arch" type="xml">
             <xpath expr="//div[@name='info_total_time']" position="after">
                 <div class="d-flex" attrs="{'invisible': [('enroll', '!=', 'payment')]}">
-                    <span class="mr-auto"><label for="product_sale_revenues" class="mb0">Sales</label></span>
+                    <span class="me-auto"><label for="product_sale_revenues" class="mb0">Sales</label></span>
                     <field name="product_sale_revenues" widget="monetary" options="{'currency_field': 'currency_id'}"/>
                     <field name="currency_id" attrs="{'invisible': True}"/>
                 </div>
diff --git a/addons/website_sale_slides/views/website_sale_templates.xml b/addons/website_sale_slides/views/website_sale_templates.xml
index fe4deadc1b5..0b54bdd6e8c 100644
--- a/addons/website_sale_slides/views/website_sale_templates.xml
+++ b/addons/website_sale_slides/views/website_sale_templates.xml
@@ -23,14 +23,14 @@
                 </div>
                 <div class="col-7">
                     <a t-attf-href="/slides/#{slug(course)}"><h3 t-out="course.name" class="m-2"/></a>
-                    <div t-out="course.description_short" class="font-weight-light o_wslides_desc_truncate_2 ml-2"/>
-                    <div class="font-weight-light ml-2 mt-2">
+                    <div t-out="course.description_short" class="fw-light o_wslides_desc_truncate_2 ms-2"/>
+                    <div class="fw-light ms-2 mt-2">
                         <t t-out="course.total_time" t-options="{'widget': 'duration', 'unit': 'hour', 'round': 'minute'}"/>
                         <t t-if="course.total_slides">
                            <t t-if="course.total_time"> - </t><t t-out="course.total_slides"/> step(s)
                         </t>
                     </div>
-                    <a role="button" class="btn btn-primary ml-2 my-2" t-attf-href="/slides/#{slug(course)}">
+                    <a role="button" class="btn btn-primary ms-2 my-2" t-attf-href="/slides/#{slug(course)}">
                         Start Learning
                     </a>
                 </div>
diff --git a/addons/website_sale_slides/views/website_slides_templates.xml b/addons/website_sale_slides/views/website_slides_templates.xml
index 1bb4d2541c8..c7b6bf50d97 100644
--- a/addons/website_sale_slides/views/website_slides_templates.xml
+++ b/addons/website_sale_slides/views/website_slides_templates.xml
@@ -16,7 +16,7 @@
 <template name="Buy Course To Download Resource" id="slide_aside_training_category_buy_course" inherit_id="website_slides.slide_aside_training_category">
     <xpath expr="//div[hasclass('o_wslides_js_course_join') and hasclass('o_wslides_no_access')]" position="inside">
         <li t-elif="aside_slide.channel_id.enroll == 'payment'" class="text-decoration-none small">
-            <i class="fa fa-download mr-1"/>
+            <i class="fa fa-download me-1"/>
             <t t-call="website_sale_slides.course_buy_course_link">
                 <t t-set="slide" t-value="aside_slide"/>
             </t>
@@ -26,7 +26,7 @@
 
 <template name="Buy Course To Download Resource Slide Detail" id="slide_content_detailed_buy_course" inherit_id="website_slides.slide_content_detailed">
     <xpath expr="//div[hasclass('o_wslides_js_course_join') and hasclass('o_wslides_no_access')]" position="inside">
-        <span t-elif="slide.channel_id.enroll == 'payment'" class="text-muted mr-auto border-left pl-3">
+        <span t-elif="slide.channel_id.enroll == 'payment'" class="text-muted me-auto border-start ps-3">
             <t t-call="website_sale_slides.course_buy_course_link"/>
         </span>
     </xpath>
@@ -61,7 +61,7 @@
 <template name="Buy Course To Download Resource Fullscreen" id="slide_fullscreen_sidebar_category_buy_course" inherit_id="website_slides.slide_fullscreen_sidebar_category">
     <xpath expr="//div[hasclass('o_wslides_js_course_join') and hasclass('o_wslides_no_access')]" position="inside">
         <li t-elif="slide.channel_id.enroll == 'payment'" class="o_wslides_fs_slide_link mb-1">
-            <i class="fa fa-download mr-1"/>
+            <i class="fa fa-download me-1"/>
             <t t-call="website_sale_slides.course_buy_course_link"/>
         </li>
     </xpath>
@@ -100,7 +100,7 @@
         <div t-attf-class="text-center d-flex align-items-center text-center pb-1 #{'justify-content-between' if product_info['has_discounted_price'] else 'justify-content-around'}">
             <div class="css_editable_mode_hidden">
                 <!-- real price -->
-                <div class="oe_price font-weight-bold text-nowrap h2 my-2"
+                <div class="oe_price fw-bold text-nowrap h2 my-2"
                      t-esc="product_info['price']"
                      t-options="{'widget': 'monetary', 'display_currency': product_info['currency_id']}"/>
                 <span itemprop="price" style="display:none;" t-esc="product_info['price']"/>
@@ -110,7 +110,7 @@
                      t-esc="product_info['list_price']"
                      t-options="{'widget': 'monetary', 'display_currency': product_info['currency_id']}"/>
             </div>
-            <div class="css_non_editable_mode_hidden decimal_precision oe_price font-weight-bold text-nowrap h2 my-2"
+            <div class="css_non_editable_mode_hidden decimal_precision oe_price fw-bold text-nowrap h2 my-2"
                  t-att-data-precision="str(product_info['currency_id'].decimal_places)">
                 <span t-field="channel.product_id.list_price" t-options="{'widget': 'monetary', 'display_currency': product_info['currency_id']}"/>
             </div>
diff --git a/addons/website_sale_stock/static/src/xml/website_sale_stock_product_availability.xml b/addons/website_sale_stock/static/src/xml/website_sale_stock_product_availability.xml
index 62f6cf143fe..89fb1911994 100644
--- a/addons/website_sale_stock/static/src/xml/website_sale_stock_product_availability.xml
+++ b/addons/website_sale_stock/static/src/xml/website_sale_stock_product_availability.xml
@@ -4,11 +4,11 @@
     <t t-name="website_sale_stock.product_availability">
         <t t-if="product_type == 'product'">
             <!-- show out_of_stock_message whatever the show_availability - pde's spec-->
-            <div id="out_of_stock_message" t-if="free_qty lte 0 and !cart_qty" t-attf-class="availability_message_#{product_template} text-danger font-weight-bold">
+            <div id="out_of_stock_message" t-if="free_qty lte 0 and !cart_qty" t-attf-class="availability_message_#{product_template} text-danger fw-bold">
                 <t t-if='has_out_of_stock_message' t-out='out_of_stock_message'/>
                 <t t-elif="!allow_out_of_stock_order">Out of Stock</t>
             </div>
-            <div id="threshold_message" t-elif="show_availability and free_qty lte available_threshold" t-attf-class="availability_message_#{product_template} text-warning font-weight-bold">
+            <div id="threshold_message" t-elif="show_availability and free_qty lte available_threshold" t-attf-class="availability_message_#{product_template} text-warning fw-bold">
                 Only <t t-esc='free_qty'/> <t t-esc="uom_name" /> left in stock.
             </div>
 
diff --git a/addons/website_sale_stock_wishlist/static/src/xml/product_availability.xml b/addons/website_sale_stock_wishlist/static/src/xml/product_availability.xml
index f8eb9b8ee2a..4f01c7b03a9 100644
--- a/addons/website_sale_stock_wishlist/static/src/xml/product_availability.xml
+++ b/addons/website_sale_stock_wishlist/static/src/xml/product_availability.xml
@@ -12,16 +12,16 @@
                 t-att-data-product-product-id="product_id"
                 data-action="o_wishlist"
                 title="Add to wishlist">
-                    <i class="fa fa-heart-o mr-2" role="img" aria-label="Add to wishlist"/>
+                    <i class="fa fa-heart-o me-2" role="img" aria-label="Add to wishlist"/>
                     Save for later
             </button>
             <small t-if="!wish" class="text-muted m-2">
                 Add to your wishlist to be notified when it's back in stock.
             </small>
             <div t-if="wish" class="alert alert-info mb-0" role="alert">
-                <h6 class="alert-heading"><i class="fa fa-check-square-o mr-2"/>Added to your wishlist</h6>
+                <h6 class="alert-heading"><i class="fa fa-check-square-o me-2"/>Added to your wishlist</h6>
                 You'll be notified as soon as the product will be available again.
-                <div class="text-right mt-2">
+                <div class="text-end mt-2">
                     <a class="alert-link" href="/shop/wishlist" title="My wishlist">
                         <small>Check my wishlist <i class="fa fa-angle-right"></i></small>
                     </a>
diff --git a/addons/website_sale_wishlist/views/website_sale_wishlist_template.xml b/addons/website_sale_wishlist/views/website_sale_wishlist_template.xml
index d51d2fa03dd..b62dfdc4fac 100644
--- a/addons/website_sale_wishlist/views/website_sale_wishlist_template.xml
+++ b/addons/website_sale_wishlist/views/website_sale_wishlist_template.xml
@@ -18,7 +18,7 @@
             <t t-nocache="The wishlist depends on the user and must not be shared with other users. The product come from the controller.">
                 <t t-set="product_variant" t-value="product_variant or product._create_first_product_variant()"/>
                 <t t-set="in_wish" t-value="product_variant and product_variant._is_in_wishlist()"/>
-                <button t-if="product_variant" type="button" role="button" class="btn btn-link px-0 pr-3 o_add_wishlist_dyn" t-att-disabled='in_wish or None' t-att-data-product-template-id="product.id" t-att-data-product-product-id="product_variant.id" data-action="o_wishlist" title="Add to wishlist"><i class="fa fa-heart-o mr-2" role="img" aria-label="Add to wishlist"/>Add to wishlist</button>
+                <button t-if="product_variant" type="button" role="button" class="btn btn-link px-0 pe-3 o_add_wishlist_dyn" t-att-disabled='in_wish or None' t-att-data-product-template-id="product.id" t-att-data-product-product-id="product_variant.id" data-action="o_wishlist" title="Add to wishlist"><i class="fa fa-heart-o me-2" role="img" aria-label="Add to wishlist"/>Add to wishlist</button>
             </t>
         </xpath>
     </template>
@@ -35,7 +35,7 @@
                 <a href="/shop/wishlist" t-attf-class="#{_link_class}">
                     <i t-if="_icon" class="fa fa-1x fa-heart"/>
                     <span t-if="_text">Wishlist</span>
-                    <sup t-esc="wishcount" t-attf-class="my_wish_quantity o_animate_blink badge badge-primary"/>
+                    <sup t-esc="wishcount" t-attf-class="my_wish_quantity o_animate_blink badge text-bg-primary"/>
                 </a>
             </li>
         </t>
@@ -54,7 +54,7 @@
         <xpath expr="//t[@t-call='website_sale.header_cart_link']" position="after">
             <t t-call="website_sale_wishlist.header_wishlist_link">
                 <t t-set="_icon" t-value="True"/>
-                <t t-set="_item_class" t-value="'nav-item mr-lg-3'"/>
+                <t t-set="_item_class" t-value="'nav-item me-lg-3'"/>
                 <t t-set="_link_class" t-value="'nav-link'"/>
             </t>
         </xpath>
@@ -74,7 +74,7 @@
         <xpath expr="//t[@t-call='website_sale.header_cart_link']" position="after">
             <t t-call="website_sale_wishlist.header_wishlist_link">
                 <t t-set="_icon" t-value="True"/>
-                <t t-set="_item_class" t-value="'nav-item ml-lg-3'"/>
+                <t t-set="_item_class" t-value="'nav-item ms-lg-3'"/>
                 <t t-set="_link_class" t-value="'nav-link'"/>
             </t>
         </xpath>
@@ -95,7 +95,7 @@
         <xpath expr="//t[@t-call='website_sale.header_cart_link']" position="after">
             <t t-call="website_sale_wishlist.header_wishlist_link">
                 <t t-set="_icon" t-value="True"/>
-                <t t-set="_item_class" t-value="'nav-item ml-lg-3'"/>
+                <t t-set="_item_class" t-value="'nav-item ms-lg-3'"/>
                 <t t-set="_link_class" t-value="'nav-link'"/>
             </t>
         </xpath>
@@ -105,7 +105,7 @@
         <xpath expr="//t[@t-call='website_sale.header_cart_link']" position="after">
             <t t-call="website_sale_wishlist.header_wishlist_link">
                 <t t-set="_icon" t-value="True"/>
-                <t t-set="_item_class" t-value="'nav-item ml-lg-3'"/>
+                <t t-set="_item_class" t-value="'nav-item ms-lg-3'"/>
                 <t t-set="_link_class" t-value="'nav-link'"/>
             </t>
         </xpath>
@@ -115,7 +115,7 @@
         <xpath expr="//t[@t-call='website_sale.header_cart_link']" position="after">
             <t t-call="website_sale_wishlist.header_wishlist_link">
                 <t t-set="_text" t-value="True"/>
-                <t t-set="_item_class" t-value="'nav-item ml-lg-3'"/>
+                <t t-set="_item_class" t-value="'nav-item ms-lg-3'"/>
                 <t t-set="_link_class" t-value="'nav-link'"/>
             </t>
         </xpath>
@@ -125,7 +125,7 @@
         <xpath expr="//t[@t-call='website_sale.header_cart_link']" position="after">
             <t t-call="website_sale_wishlist.header_wishlist_link">
                 <t t-set="_icon" t-value="True"/>
-                <t t-set="_item_class" t-value="'nav-item ml-1'"/>
+                <t t-set="_item_class" t-value="'nav-item ms-1'"/>
                 <t t-set="_link_class" t-value="'nav-link'"/>
             </t>
         </xpath>
@@ -135,7 +135,7 @@
         <xpath expr="//t[@t-call='website_sale.header_cart_link']" position="after">
             <t t-call="website_sale_wishlist.header_wishlist_link">
                 <t t-set="_icon" t-value="True"/>
-                <t t-set="_item_class" t-value="'nav-item ml-lg-2'"/>
+                <t t-set="_item_class" t-value="'nav-item ms-lg-2'"/>
                 <t t-set="_link_class" t-value="'nav-link'"/>
             </t>
         </xpath>
@@ -145,7 +145,7 @@
         <xpath expr="//t[@t-call='website_sale.header_cart_link']" position="after">
             <t t-call="website_sale_wishlist.header_wishlist_link">
                 <t t-set="_icon" t-value="True"/>
-                <t t-set="_item_class" t-value="'nav-item ml-lg-2'"/>
+                <t t-set="_item_class" t-value="'nav-item ms-lg-2'"/>
                 <t t-set="_link_class" t-value="'nav-link'"/>
             </t>
         </xpath>
@@ -183,7 +183,7 @@
                                                 <img t-attf-src="/web/image/product.product/#{wish.product_id.id}/image_128" class="img img-fluid" style="margin:auto;" alt="Product image"/>
                                             </a>
                                         </td>
-                                        <td class='text-left align-middle'>
+                                        <td class='text-start align-middle'>
                                             <strong><a t-att-href="wish.product_id.website_url"><t t-esc="wish.product_id.display_name" /></a></strong>
                                             <small class='d-none d-md-block'><p t-field="wish.product_id.description_sale" class="text-muted"/></small>
                                             <button type="button" class="btn btn-link o_wish_rm no-decoration"><small><i class='fa fa-trash-o'></i> Remove</small></button>
diff --git a/addons/website_slides/static/src/js/slides_course_fullscreen_player.js b/addons/website_slides/static/src/js/slides_course_fullscreen_player.js
index ef71a35d35a..32433f09a60 100644
--- a/addons/website_slides/static/src/js/slides_course_fullscreen_player.js
+++ b/addons/website_slides/static/src/js/slides_course_fullscreen_player.js
@@ -386,7 +386,7 @@
             var input = form.find('input');
             var slideID = form.find('button').data('slide-id');
             if (input.val() && input[0].checkValidity()) {
-                form.removeClass('o_has_error').find('.form-control, .custom-select').removeClass('is-invalid');
+                form.removeClass('o_has_error').find('.form-control, .form-select').removeClass('is-invalid');
                 this._rpc({
                     route: '/slides/slide/send_share_email',
                     params: {
@@ -398,7 +398,7 @@
                     form.html('<div class="alert alert-info" role="alert">' + _t('<strong>Thank you!</strong> Mail has been sent.') + '</div>');
                 });
             } else {
-                form.addClass('o_has_error').find('.form-control, .custom-select').addClass('is-invalid');
+                form.addClass('o_has_error').find('.form-control, .form-select').addClass('is-invalid');
                 input.focus();
             }
         },
diff --git a/addons/website_slides/static/src/js/slides_course_quiz_finish.js b/addons/website_slides/static/src/js/slides_course_quiz_finish.js
index f43729e1e40..a6384bb50bb 100644
--- a/addons/website_slides/static/src/js/slides_course_quiz_finish.js
+++ b/addons/website_slides/static/src/js/slides_course_quiz_finish.js
@@ -78,7 +78,7 @@ var SlideQuizFinishModal = Dialog.extend({
      */
     _animateProgressBar: function () {
         var self = this;
-        this.$('[data-toggle="tooltip"]').tooltip({
+        this.$('[data-bs-toggle="tooltip"]').tooltip({
             trigger: 'manual',
             container: '.progress-bar-tooltip',
         }).tooltip('show');
@@ -91,7 +91,7 @@ var SlideQuizFinishModal = Dialog.extend({
                 duration: this.quiz.rankProgress.level_up ? 1700 : 800,
                 step: function (newKarma) {
                     self.$('.tooltip-inner').text(Math.ceil(newKarma));
-                    self.$('[data-toggle="tooltip"]').tooltip('update');
+                    self.$('[data-bs-toggle="tooltip"]').tooltip('update');
                 }
             }
         );
diff --git a/addons/website_slides/static/src/js/slides_course_slides_list.js b/addons/website_slides/static/src/js/slides_course_slides_list.js
index 4c7f7275f4b..d9d20b8d26b 100644
--- a/addons/website_slides/static/src/js/slides_course_slides_list.js
+++ b/addons/website_slides/static/src/js/slides_course_slides_list.js
@@ -63,7 +63,7 @@ publicWidget.registry.websiteSlidesCourseSlidesList = SlideCoursePage.extend({
             var $emptyFlag = $emptyFlagContainer.find('small');
             if (categorySlideCount === 0 && $emptyFlag.length === 0){
                 $emptyFlagContainer.append($('<small>', {
-                    'class': "ml-1 text-muted font-weight-bold",
+                    'class': "ms-1 text-muted fw-bold",
                     text: _t("(empty)")
                 }));
             } else if (categorySlideCount > 0 && $emptyFlag.length > 0){
diff --git a/addons/website_slides/static/src/js/slides_course_unsubscribe.js b/addons/website_slides/static/src/js/slides_course_unsubscribe.js
index be611d82720..14a98a3fe55 100644
--- a/addons/website_slides/static/src/js/slides_course_unsubscribe.js
+++ b/addons/website_slides/static/src/js/slides_course_unsubscribe.js
@@ -58,7 +58,7 @@ var SlideUnsubscribeDialog = Dialog.extend({
         if (state === '_subscription') {
             btnList.push({text: _t("Save"), classes: "btn-primary", click: this._onClickSubscriptionSubmit.bind(this)});
             btnList.push({text: _t("Discard"), close: true});
-            btnList.push({text: _t("or Leave the course"), classes: "btn-danger ml-auto", click: this._onClickLeaveCourse.bind(this)});
+            btnList.push({text: _t("or Leave the course"), classes: "btn-danger ms-auto", click: this._onClickLeaveCourse.bind(this)});
         } else if (state === '_leave') {
             btnList.push({text: _t("Leave the course"), classes: "btn-danger", click: this._onClickLeaveCourseSubmit.bind(this)});
             btnList.push({text: _t("Discard"), click: this._onClickLeaveCourseCancel.bind(this)});
diff --git a/addons/website_slides/static/src/js/slides_embed.js b/addons/website_slides/static/src/js/slides_embed.js
index 5f8473fde55..52356ce5d56 100644
--- a/addons/website_slides/static/src/js/slides_embed.js
+++ b/addons/website_slides/static/src/js/slides_embed.js
@@ -228,7 +228,7 @@ $(function () {
             var input = widget.find('input');
             var slideID = widget.find('button').data('slide-id');
             if (input.val() && input[0].checkValidity()) {
-                widget.removeClass('o_has_error').find('.form-control, .custom-select').removeClass('is-invalid');
+                widget.removeClass('o_has_error').find('.form-control, .form-select').removeClass('is-invalid');
                 $.ajax({
                     type: "POST",
                     dataType: 'json',
@@ -243,7 +243,7 @@ $(function () {
                     },
                 });
             } else {
-                widget.addClass('o_has_error').find('.form-control, .custom-select').addClass('is-invalid');
+                widget.addClass('o_has_error').find('.form-control, .form-select').addClass('is-invalid');
                 input.focus();
             }
         });
diff --git a/addons/website_slides/static/src/js/slides_share.js b/addons/website_slides/static/src/js/slides_share.js
index 2218af4c021..e5f8966dc0a 100644
--- a/addons/website_slides/static/src/js/slides_share.js
+++ b/addons/website_slides/static/src/js/slides_share.js
@@ -21,7 +21,7 @@ var ShareMail = publicWidget.Widget.extend({
         var input = this.$('input');
         var slideID = this.$('button').data('slide-id');
         if (input.val() && input[0].checkValidity()) {
-            this.$el.removeClass('o_has_error').find('.form-control, .custom-select').removeClass('is-invalid');
+            this.$el.removeClass('o_has_error').find('.form-control, .form-select').removeClass('is-invalid');
             this._rpc({
                 route: '/slides/slide/send_share_email',
                 params: {
@@ -32,7 +32,7 @@ var ShareMail = publicWidget.Widget.extend({
                 self.$el.html($('<div class="alert alert-info" role="alert">' + _t('<strong>Thank you!</strong> Mail has been sent.') + '</div>'));
             });
         } else {
-            this.$el.addClass('o_has_error').find('.form-control, .custom-select').addClass('is-invalid');
+            this.$el.addClass('o_has_error').find('.form-control, .form-select').addClass('is-invalid');
             input.focus();
         }
     },
diff --git a/addons/website_slides/static/src/js/slides_slide_archive.js b/addons/website_slides/static/src/js/slides_slide_archive.js
index ea0d0ca4563..22c34095105 100644
--- a/addons/website_slides/static/src/js/slides_slide_archive.js
+++ b/addons/website_slides/static/src/js/slides_slide_archive.js
@@ -36,7 +36,7 @@ var SlideArchiveDialog = Dialog.extend({
             var $emptyFlag = $emptyFlagContainer.find('small');
             if (categorySlideCount === 0 && $emptyFlag.length === 0){
                 $emptyFlagContainer.append($('<small>', {
-                    'class': "ml-1 text-muted font-weight-bold",
+                    'class': "ms-1 text-muted fw-bold",
                     text: _t("(empty)")
                 }));
             }
diff --git a/addons/website_slides/static/src/scss/slides_slide_fullscreen.scss b/addons/website_slides/static/src/scss/slides_slide_fullscreen.scss
index d809982624f..689e0bf33d7 100644
--- a/addons/website_slides/static/src/scss/slides_slide_fullscreen.scss
+++ b/addons/website_slides/static/src/scss/slides_slide_fullscreen.scss
@@ -83,7 +83,7 @@
             line-height: 1.3;
 
             &.active {
-                box-shadow: inset 2px 0 0 theme-color('primary');
+                box-shadow: inset 2px 0 0 map-get($theme-colors, 'primary');
                 background-color: rgba($o-wslides-color-dark3, 0.5);
 
                 &, a {
diff --git a/addons/website_slides/static/src/scss/website_slides.scss b/addons/website_slides/static/src/scss/website_slides.scss
index 19b046d1325..bd597b622a4 100644
--- a/addons/website_slides/static/src/scss/website_slides.scss
+++ b/addons/website_slides/static/src/scss/website_slides.scss
@@ -35,7 +35,8 @@ $truncate-limits: 2, 3, 10;
 // **************************************************
 
 .o_wslides_course_pict {
-    @include size(100%);
+    width: 100%;
+    height: 100%;
     object-fit: cover;
 
     @include media-breakpoint-up(md)  {
@@ -187,7 +188,8 @@ $truncate-limits: 2, 3, 10;
 
         &:before, &:after {
             content: "";
-            @include size(6px);
+            width: 6px;
+            height: 6px;
             display: block;
             border-radius: 100%;
             background-color: inherit;
@@ -473,7 +475,8 @@ $truncate-limits: 2, 3, 10;
 
             &:before, &:after {
                 content: "";
-                @include size(6px);
+                width: 6px;
+                height: 6px;
                 display: block;
                 border-radius: 100%;
                 background-color: inherit;
@@ -512,7 +515,7 @@ $truncate-limits: 2, 3, 10;
                 }
 
                 &.active {
-                    box-shadow:inset 2px 0 theme-color('primary');
+                    box-shadow:inset 2px 0 map-get($theme-colors, 'primary');
                 }
             }
             .o_wslides_button_complete {
diff --git a/addons/website_slides/static/src/xml/slide_course_join.xml b/addons/website_slides/static/src/xml/slide_course_join.xml
index d65dd756fe0..701eaba285c 100644
--- a/addons/website_slides/static/src/xml/slide_course_join.xml
+++ b/addons/website_slides/static/src/xml/slide_course_join.xml
@@ -3,7 +3,7 @@
     <t t-name="slide.course.join">
         <div>
             <a role="button"
-                class="btn btn-primary o_wslides_js_course_join_link text-uppercase font-weight-bold"
+                class="btn btn-primary o_wslides_js_course_join_link text-uppercase fw-bold"
                 title="Join the Course" aria-label="Join the Course"
                 href="#">
                 <t t-if="widget.channel.channelEnroll == 'public'" t-esc="widget.joinMessage"/>
diff --git a/addons/website_slides/static/src/xml/slide_quiz.xml b/addons/website_slides/static/src/xml/slide_quiz.xml
index a3383d9a4a6..ff5d2304219 100644
--- a/addons/website_slides/static/src/xml/slide_quiz.xml
+++ b/addons/website_slides/static/src/xml/slide_quiz.xml
@@ -16,7 +16,7 @@
                                 t-att-data-text="answer.text_value"
                                 t-attf-class="o_wslides_quiz_answer list-group-item d-flex align-items-center list-group-item-action #{widget.slide.completed  &amp;&amp; answer.is_correct ? 'list-group-item-success' : '' }">
 
-                                <label class="my-0 d-flex align-items-center justify-content-center mr-2">
+                                <label class="my-0 d-flex align-items-center justify-content-center me-2">
                                     <input type="radio"
                                         t-att-name="question.id"
                                         t-att-value="answer.id"
@@ -50,12 +50,12 @@
                         <b>This course is private.
                             <span t-if="widget.publicUser">
                                 Please
-                                <a t-att-href="'/web/login?redirect=' + widget.redirectURL" class="font-weight-bold">
+                                <a t-att-href="'/web/login?redirect=' + widget.redirectURL" class="fw-bold">
                                     sign in
                                 </a>
                                 to enroll.
                             </span>
-                            <a t-else="" href="#" class="font-weight-bold o_wslides_js_channel_enroll"
+                            <a t-else="" href="#" class="fw-bold o_wslides_js_channel_enroll"
                                t-att-data-channel-id="widget.channel.channelId">
                                 <span t-if="widget.channel.channelRequestedAccess" class="text-success">
                                     Responsible already contacted.
@@ -66,7 +66,7 @@
                             </a>
                         </b>
                         <span class="my-0 h4">
-                            <span title="Succeed and gain karma" aria-label="Succeed and gain karma" class="badge badge-pill bg-warning text-white font-weight-bold ml-3 px-2 py-1">
+                            <span title="Succeed and gain karma" aria-label="Succeed and gain karma" class="badge rounded-pill bg-warning text-white fw-bold ms-3 px-2 py-1">
                                 + <t t-esc="widget.quiz.quizKarmaGain"/> XP
                             </span>
                         </span>
@@ -83,39 +83,39 @@
                             </span>
                         </b>
                         <span class="my-0 h4">
-                            <span title="Succeed and gain karma" aria-label="Succeed and gain karma" class="badge badge-pill bg-warning text-white font-weight-bold ml-3 px-2 py-1">
+                            <span title="Succeed and gain karma" aria-label="Succeed and gain karma" class="badge rounded-pill bg-warning text-white fw-bold ms-3 px-2 py-1">
                                 + <t t-esc="widget.quiz.quizKarmaGain"/> XP
                             </span>
                         </span>
-                        <div class="o_wslides_join_course_widget float-right"/>
+                        <div class="o_wslides_join_course_widget float-end"/>
                     </div>
                 </div>
                 <span t-if="widget.publicUser &amp;&amp; widget.channel.signupAllowed" class="d-block mt-2">
                     <span>Don't have an account ?</span>
-                    <a class="font-weight-bold" t-att-href="'/web/signup?redirect=' + widget.redirectURL">Sign Up !</a>
+                    <a class="fw-bold" t-att-href="'/web/signup?redirect=' + widget.redirectURL">Sign Up !</a>
                 </span>
             </div>
             <div t-else="" class="d-md-flex align-items-center justify-content-between">
                 <div t-att-class="'d-flex align-items-center' + (widget.slide.completed ? ' alert alert-success my-0 py-1 px-3' : '')">
                     <button t-if="! widget.slide.completed" role="button" title="Check answers" aria-label="Check answers"
-                        class="btn btn-primary text-uppercase font-weight-bold o_wslides_js_lesson_quiz_submit">Check your answers</button>
+                        class="btn btn-primary text-uppercase fw-bold o_wslides_js_lesson_quiz_submit">Check your answers</button>
                     <b t-else="" class="my-0 h5">Done !</b>
                     <span class="my-0 h5" style="line-height: 1">
-                        <span role="button" title="Succeed and gain karma" aria-label="Succeed and gain karma" class="badge badge-pill bg-warning text-white font-weight-bold ml-3 px-2">
+                        <span role="button" title="Succeed and gain karma" aria-label="Succeed and gain karma" class="badge rounded-pill bg-warning text-white fw-bold ms-3 px-2">
                             + <t t-if="!widget.slide.completed" t-esc="widget.quiz.quizKarmaGain"/><t t-else="" t-esc="widget.quiz.quizKarmaWon"/> XP
                         </span>
                     </span>
-                    <div class="ml-3 d-none text-danger o_wslides_js_quiz_submit_error">
-                        <i class="fa fa-close mr-1"/>
+                    <div class="ms-3 d-none text-danger o_wslides_js_quiz_submit_error">
+                        <i class="fa fa-close me-1"/>
                         <span class="o_wslides_js_quiz_submit_error_text"></span>
                     </div>
                 </div>
-                <div class="ml-auto mt-3 mt-md-0">
+                <div class="ms-auto mt-3 mt-md-0">
                     <button t-if="widget.quiz.quizAttemptsCount > 0 &amp;&amp; widget.slide.channelCanUpload" class="btn btn-light border o_wslides_js_lesson_quiz_reset">
                         Reset
                     </button>
                     <button t-if="widget.slide.completed &amp;&amp; widget.slide.hasNext" class="btn btn-primary o_wslides_quiz_continue">
-                        Continue <i class="fa fa-chevron-right ml-1"/>
+                        Continue <i class="fa fa-chevron-right ms-1"/>
                     </button>
                 </div>
             </div>
@@ -124,17 +124,17 @@
 
     <t t-name="slide.slide.quiz.finish">
         <div>
-            <button type="button" class="o_wslides_quiz_modal_close_btn btn-close position-absolute" data-dismiss="modal" aria-label="Close"></button>
+            <button type="button" class="o_wslides_quiz_modal_close_btn btn-close position-absolute" data-bs-dismiss="modal" aria-label="Close"></button>
             <div class="o_wslides_quiz_success_image d-none d-md-flex flex-shrink-0">
                 <img class="o_wslides_quiz_modal_hero" src="/website_slides/static/src/img/quiz_modal_success.svg" alt=""/>
             </div>
-            <div class="d-flex flex-column flex-grow-1 justify-content-between pl-md-5 p-3 overflow-auto">
+            <div class="d-flex flex-column flex-grow-1 justify-content-between ps-md-5 p-3 overflow-auto">
                 <div>
-                    <h1 class="o_wslides_quiz_modal_title mt-3 display-4 font-weight-bold">Amazing!</h1>
+                    <h1 class="o_wslides_quiz_modal_title mt-3 display-4 fw-bold">Amazing!</h1>
                     <div class="pb-3">
                         <h4 class="o_wslides_quiz_modal_xp_gained pb-2 d-flex fade">
                             <t t-if="widget.quiz.quizKarmaWon > 0">
-                                You gained <span class="badge badge-pill badge-success text-white font-weight-bold ml-2 mr-1"><t t-esc="widget.quiz.quizKarmaWon"/> XP</span> !
+                                You gained <span class="badge rounded-pill text-bg-success text-white fw-bold ms-2 me-1"><t t-esc="widget.quiz.quizKarmaWon"/> XP</span> !
                             </t>
                             <t t-else="">You did it!</t>
                         </h4>
@@ -142,12 +142,12 @@
                             <div class="progress">
                                 <div class="progress-bar" role="progressbar" t-att-aria-valuenow="widget.quiz.rankProgress.previous_rank.progress" aria-valuemin="0" aria-valuemax="100"
                                     t-attf-style="width: #{widget.quiz.rankProgress.previous_rank.progress}%"/>
-                                <div class="progress-bar-tooltip" data-toggle="tooltip" data-placement="top" t-att-title="widget.quiz.rankProgress.new_rank.karma" />
+                                <div class="progress-bar-tooltip" data-bs-toggle="tooltip" data-bs-placement="top" t-att-title="widget.quiz.rankProgress.new_rank.karma" />
                             </div>
-                            <small class="float-left text-primary font-weight-bold o_wslides_quiz_modal_rank_lower_bound">
+                            <small class="float-start text-primary fw-bold o_wslides_quiz_modal_rank_lower_bound">
                                 <t t-esc="widget.quiz.rankProgress.previous_rank.lower_bound"/>
                             </small>
-                            <small t-if="widget.quiz.rankProgress.previous_rank.upper_bound" class="float-right font-weight-bold o_wslides_quiz_modal_rank_upper_bound">
+                            <small t-if="widget.quiz.rankProgress.previous_rank.upper_bound" class="float-end fw-bold o_wslides_quiz_modal_rank_upper_bound">
                                 <t t-esc="widget.quiz.rankProgress.previous_rank.upper_bound"/>
                             </small>
                         </div>
diff --git a/addons/website_slides/static/src/xml/slide_quiz_create.xml b/addons/website_slides/static/src/xml/slide_quiz_create.xml
index 49a3cb6089b..d6cae2fddcc 100644
--- a/addons/website_slides/static/src/xml/slide_quiz_create.xml
+++ b/addons/website_slides/static/src/xml/slide_quiz_create.xml
@@ -4,7 +4,7 @@
     <t t-name="slide.quiz.question.input">
         <div t-attf-class="o_wsildes_quiz_question_input mt-3 #{!widget.update ? 'col' : ''}" t-att-data-id="widget.question.id || ''">
             <form class="mb-3">
-                <div class="o_wslides_quiz_question row align-items-center mr-0 mb-2">
+                <div class="o_wslides_quiz_question row align-items-center me-0 mb-2">
                     <div class="input-group">
                         <span class="input-group-text o_wslides_quiz_question_sequence"><t t-esc="widget.sequence"/></span>
                         <input type="text" name="question-name" class="form-control col-11" placeholder='e.g. "Which animal cannot fly?"'
@@ -30,8 +30,8 @@
             <div>
                 <t t-if="widget.update" t-call="slide.quiz.update.buttons"/>
                 <t t-else="" t-call="slide.quiz.create.buttons"/>
-                <div class="ml-2 d-none text-danger o_wslides_js_quiz_validation_error">
-                    <i class="fa fa-close mr-1"/>
+                <div class="ms-2 d-none text-danger o_wslides_js_quiz_validation_error">
+                    <i class="fa fa-close me-1"/>
                     <span class="o_wslides_js_quiz_validation_error_text"></span>
                 </div>
             </div>
@@ -40,7 +40,7 @@
 
     <t t-name="slide.quiz.answer.line">
         <div class="o_wslides_js_quiz_answer row align-items-center mb-1" t-attf-data-answer-id="#{answer ? answer.id : ''}" >
-            <div class="col ml-3 ml-md-5">
+            <div class="col ms-3 ms-md-5">
                 <div class="row align-items-center">
                     <div class="col-9 p-0">
                         <div class="input-group">
@@ -56,7 +56,7 @@
                             </div>
                         </div>
                     </div>
-                    <i t-attf-class="o_wslides_js_quiz_icon o_wslides_js_quiz_comment_answer fa fa-lg fa-info-circle col-auto p-md-2 py-2 pl-2 pr-1 #{answer &amp;&amp; answer.comment ? 'text-primary' : 'text-muted'}" title="Add comment on this answer" />
+                    <i t-attf-class="o_wslides_js_quiz_icon o_wslides_js_quiz_comment_answer fa fa-lg fa-info-circle col-auto p-md-2 py-2 ps-2 pe-1 #{answer &amp;&amp; answer.comment ? 'text-primary' : 'text-muted'}" title="Add comment on this answer" />
                     <i class="o_wslides_js_quiz_icon o_wslides_js_quiz_add_answer fa fa-lg fa-plus-circle col-auto p-md-2 py-2 px-1 text-muted" title="Add an answer below this one" />
                     <i class="o_wslides_js_quiz_icon o_wslides_js_quiz_remove_answer fa fa-lg fa-trash-o col-auto p-md-2 py-2 px-1 text-muted" title="Remove this answer" />
                 </div>
diff --git a/addons/website_slides/static/src/xml/website_slides_fullscreen.xml b/addons/website_slides/static/src/xml/website_slides_fullscreen.xml
index a4415789b97..eb7b56f84c8 100644
--- a/addons/website_slides/static/src/xml/website_slides_fullscreen.xml
+++ b/addons/website_slides/static/src/xml/website_slides_fullscreen.xml
@@ -2,7 +2,7 @@
 
     <t t-name="website.slides.fullscreen.content">
         <t t-if="widget.get('slide').category === 'document'">
-            <div class="embed-responsive h-100">
+            <div class="ratio h-100">
                 <iframe t-att-src="widget.get('slide').embedUrl" class="o_wslides_iframe_viewer" allowFullScreen="true" frameborder="0"/>
             </div>
         </t>
@@ -14,19 +14,19 @@
     </t>
 
     <t t-name="website.slides.fullscreen.video.google_drive">
-        <div class="player embed-responsive embed-responsive-16by9 embed-responsive-item h-100">
+        <div class="player ratio ratio-16x9 embed-responsive-item h-100">
             <iframe t-att-src="widget.get('slide').embedUrl" allowFullScreen="true" frameborder="0" autoplay="1" allow="autoplay"></iframe>
         </div>
     </t>
 
     <t t-name="website.slides.fullscreen.video.youtube">
-        <div class="player embed-responsive embed-responsive-16by9 embed-responsive-item h-100">
+        <div class="player ratio ratio-16x9 embed-responsive-item h-100">
             <iframe t-att-id="'youtube-player' + widget.slide.id" t-att-src="widget.slide.embedUrl" allowFullScreen="true" frameborder="0" enablejsapi="1" autoplay="1" allow="autoplay"></iframe>
         </div>
     </t>
 
     <t t-name="website.slides.fullscreen.video.vimeo">
-        <div class="player embed-responsive embed-responsive-16by9 embed-responsive-item h-100">
+        <div class="player ratio ratio-16x9 embed-responsive-item h-100">
             <t t-out="widget.slide.embedCode"/>
         </div>
     </t>
diff --git a/addons/website_slides/static/src/xml/website_slides_share.xml b/addons/website_slides/static/src/xml/website_slides_share.xml
index fd6fd289420..7116b070db5 100644
--- a/addons/website_slides/static/src/xml/website_slides_share.xml
+++ b/addons/website_slides/static/src/xml/website_slides_share.xml
@@ -20,7 +20,7 @@
                 <h5 class="mt-0 mb-2">Share Link</h5>
                 <div class="input-group">
                     <input type="text" class="form-control o_wslides_js_share_link" t-att-value="widget.slide.websiteShareUrl" readonly="readonly" onClick="this.select();" />
-                    <button class="btn btn-sm btn-primary o_clipboard_button" style="border-top-right-radius: 4px;border-bottom-right-radius: 4px;" >
+                    <button class="btn btn-sm btn-primary o_clipboard_button" style="border-top-end-radius: 4px;border-bottom-end-radius: 4px;" >
                         <span class="fa fa-clipboard"> Copy Link</span>
                     </button>
                 </div>
@@ -40,14 +40,14 @@
                     <button class="btn btn-primary" type="button"
                         data-loading-text="Sending..."
                         t-attf-data-slide-id="#{widget.slide.id}"
-                        style="border-top-right-radius: 4px;border-bottom-right-radius: 4px;">
+                        style="border-top-end-radius: 4px;border-bottom-end-radius: 4px;">
                         <i class="fa fa-envelope-o"/> Send Email
                     </button>
                 </div>
             </form>
         </div>
         <div t-if="widget.session.is_website_user" class="alert alert-info d-inline-block">
-            <p class="mb-0">Please <a t-attf-href="/web?redirect=#{window.location.href}" class="font-weight-bold"> login </a> to share this <t t-esc="widget.slide.category"/> by email.</p>
+            <p class="mb-0">Please <a t-attf-href="/web?redirect=#{window.location.href}" class="fw-bold"> login </a> to share this <t t-esc="widget.slide.category"/> by email.</p>
         </div>
     </t>
 
diff --git a/addons/website_slides/static/src/xml/website_slides_unsubscribe.xml b/addons/website_slides/static/src/xml/website_slides_unsubscribe.xml
index 660c520dbcd..5fbcafa478e 100644
--- a/addons/website_slides/static/src/xml/website_slides_unsubscribe.xml
+++ b/addons/website_slides/static/src/xml/website_slides_unsubscribe.xml
@@ -13,7 +13,7 @@
         <form class="clearfix">
             <div class="controls mt8">
                 <input id="subscribed" name="subscribed" type="checkbox"/>
-                <label for="subscribed" class="col-form-label font-weight-normal">Be notified when a new content is added.</label>
+                <label for="subscribed" class="col-form-label fw-normal">Be notified when a new content is added.</label>
             </div>
         </form>
     </t>
diff --git a/addons/website_slides/static/src/xml/website_slides_upload.xml b/addons/website_slides/static/src/xml/website_slides_upload.xml
index bae7eaf5329..04f2d897be0 100644
--- a/addons/website_slides/static/src/xml/website_slides_upload.xml
+++ b/addons/website_slides/static/src/xml/website_slides_upload.xml
@@ -89,15 +89,15 @@
                     <div id="o_wslides_js_slide_upload_left_column" class="col-md-6">
                         <div class="form-group">
                             <label for="source_type" class="col-form-label">Document Source</label><br/>
-                            <div class="form-check ml-2">
+                            <div class="form-check ms-2">
                                 <input class="form-check-input" type="radio" name="source_type" id="source_type_local_file" data-value="local_file" checked="checked"/>
-                                <label class="form-check-label font-weight-normal" for="source_type_local_file">
+                                <label class="form-check-label fw-normal" for="source_type_local_file">
                                     Upload from Device
                                 </label>
                             </div>
-                            <div class="form-check ml-2">
+                            <div class="form-check ms-2">
                                 <input class="form-check-input" type="radio" name="source_type" id="source_type_external" data-value="external"/>
-                                <label class="form-check-label font-weight-normal" for="source_type_external">
+                                <label class="form-check-label fw-normal" for="source_type_external">
                                     Retrieve from Google Drive
                                 </label>
                             </div>
@@ -144,7 +144,7 @@
                                         <span>Then, go into the file permissions and set it as "Anyone with the link".</span><br/>
                                         <span>The Google Drive link to use here can be obtained by clicking the "Share" button in the Google interface.</span><br/>
                                         <span>It should look similar to
-                                        <span class="font-italic">https://drive.google.com/file/d/ABC/view?usp=sharing</span></span>
+                                        <span class="fst-italic">https://drive.google.com/file/d/ABC/view?usp=sharing</span></span>
                                     </div>
                                 </div>
                             </div>
@@ -165,15 +165,15 @@
                     <div id="o_wslides_js_slide_upload_left_column" class="col-md-6">
                         <div class="form-group">
                             <label for="source_type" class="col-form-label">Image Source</label><br/>
-                            <div class="form-check ml-2">
+                            <div class="form-check ms-2">
                                 <input class="form-check-input" type="radio" name="source_type" id="source_type_local_file" data-value="local_file" checked="checked"/>
-                                <label class="form-check-label font-weight-normal" for="source_type_local_file">
+                                <label class="form-check-label fw-normal" for="source_type_local_file">
                                     Upload from Device
                                 </label>
                             </div>
-                            <div class="form-check ml-2">
+                            <div class="form-check ms-2">
                                 <input class="form-check-input" type="radio" name="source_type" id="source_type_external" data-value="external"/>
-                                <label class="form-check-label font-weight-normal" for="source_type_external">
+                                <label class="form-check-label fw-normal" for="source_type_external">
                                     Retrieve from Google Drive
                                 </label>
                             </div>
@@ -198,7 +198,7 @@
                                     <span>You can either upload a file from your computer or insert a Google Drive link.</span><br/>
                                     <span>The Google Drive link can be obtained by using the 'share' button in the Google interface.</span><br/>
                                     <span>It should look similar to
-                                    <span class="font-italic">https://drive.google.com/file/d/ABC/view?usp=sharing</span></span>
+                                    <span class="fst-italic">https://drive.google.com/file/d/ABC/view?usp=sharing</span></span>
                                 </div>
                             </div>
                             <div class="o_slide_preview d-none h-100 flex-column justify-content-center">
@@ -262,9 +262,9 @@
                                     <span><a href="https://vimeo.zendesk.com/hc/en-us/articles/224819527-Changing-the-privacy-settings-of-your-videos" target="_blank" >Change video privacy settings</a></span><br/><br/>
                                     <span>The video link to input here can be obtained by using the 'share' button in the Vimeo interface.</span><br/>
                                     <span>It should look similar to</span>
-                                    <span class="font-italic">https://vimeo.com/558907333/30da9ff3d8</span>
+                                    <span class="fst-italic">https://vimeo.com/558907333/30da9ff3d8</span>
                                     <span>for 'Private' videos and similar to</span>
-                                    <span class="font-italic">https://vimeo.com/558907555</span>
+                                    <span class="fst-italic">https://vimeo.com/558907555</span>
                                     <span>for public ones.</span>
                                 </div>
                                 <br/>
@@ -272,7 +272,7 @@
                                 <div>
                                     <span>The Google Drive link can be obtained by using the 'share' button in the Google interface.</span><br/>
                                     <span>It should look similar to
-                                    <span class="font-italic">https://drive.google.com/file/d/ABC/view?usp=sharing</span></span>
+                                    <span class="fst-italic">https://drive.google.com/file/d/ABC/view?usp=sharing</span></span>
                                 </div>
                             </div>
                             <div class="o_slide_preview d-none h-100 flex-column justify-content-center">
diff --git a/addons/website_slides/views/res_config_settings_views.xml b/addons/website_slides/views/res_config_settings_views.xml
index ff640c692c0..31840eb10e6 100644
--- a/addons/website_slides/views/res_config_settings_views.xml
+++ b/addons/website_slides/views/res_config_settings_views.xml
@@ -33,7 +33,7 @@
                     <h2>eLearning</h2>
                     <div class="row mt16 o_settings_container" id="website_slides_selection_settings">
                         <group>
-                            <div class="o_setting_box mr-auto" id="website_slide_install_website_slides_survey">
+                            <div class="o_setting_box me-auto" id="website_slide_install_website_slides_survey">
                                 <div class="o_setting_left_pane">
                                     <field name="module_website_slides_survey"/>
                                 </div>
@@ -68,13 +68,13 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="o_setting_box mr-auto" id="website_slide_install_website_slides_forum">
+                            <div class="o_setting_box me-auto" id="website_slide_install_website_slides_forum">
                                 <div class="o_setting_left_pane">
                                     <field name="module_website_slides_forum"/>
                                 </div>
                                 <div class="o_setting_right_pane">
                                     <label for="module_website_slides_forum"/>
-                                    <div class="text-muted mr-auto">
+                                    <div class="text-muted me-auto">
                                         Create a community and let Attendees answer each others' questions.
                                     </div>
                                 </div>
diff --git a/addons/website_slides/views/slide_channel_views.xml b/addons/website_slides/views/slide_channel_views.xml
index 4d3f23cbd51..1354db37116 100644
--- a/addons/website_slides/views/slide_channel_views.xml
+++ b/addons/website_slides/views/slide_channel_views.xml
@@ -245,7 +245,7 @@
                         <t t-name="kanban-box">
                             <div t-attf-class="oe_kanban_color_#{kanban_getcolor(record.color.raw_value)} oe_kanban_card oe_kanban_global_click">
                                 <div class="o_dropdown_kanban dropdown">
-                                    <a role="button" class="dropdown-toggle o-no-caret btn" data-toggle="dropdown" href="#" aria-label="Dropdown menu" title="Dropdown menu">
+                                    <a role="button" class="dropdown-toggle o-no-caret btn" data-bs-toggle="dropdown" href="#" aria-label="Dropdown menu" title="Dropdown menu">
                                         <span class="fa fa-ellipsis-v" aria-hidden="false"/>
                                     </a>
                                     <div class="o_kanban_card_manage_pane dropdown-menu" role="menu">
@@ -271,7 +271,7 @@
                                 <div class="o_kanban_card_header">
                                     <div class="o_kanban_card_header_title mb16">
                                         <div class="o_primary">
-                                            <a type="edit" class="mr-auto">
+                                            <a type="edit" class="me-auto">
                                                 <span><field name="name" class="o_primary"/></span>
                                             </a>
                                         </div>
@@ -287,35 +287,35 @@
                                         </div>
                                         <div class="col-6 o_kanban_primary_right">
                                             <div class="d-flex" t-if="record.rating_count.raw_value">
-                                                <a name="action_view_ratings" type="object" class="mr-auto"><field name="rating_count"/> Reviews</a>
+                                                <a name="action_view_ratings" type="object" class="me-auto"><field name="rating_count"/> Reviews</a>
                                                 <span><field name="rating_avg_stars"/> / 5</span>
                                             </div>
                                             <div class="d-flex">
-                                                <span class="mr-auto"><label for="total_views" class="mb0">Views</label></span>
+                                                <span class="me-auto"><label for="total_views" class="mb0">Views</label></span>
                                                 <field name="total_views"/>
                                             </div>
                                             <div class="d-flex" name="info_total_time">
-                                                <span class="mr-auto"><label for="total_time" class="mb0">Duration</label></span>
+                                                <span class="me-auto"><label for="total_time" class="mb0">Duration</label></span>
                                                 <field name="total_time" widget="float_time"/>
                                             </div>
                                         </div>
                                     </div>
                                     <div class="row mt3">
-                                        <div class="col-5 border-right">
+                                        <div class="col-5 border-end">
                                             <a name="action_view_slides" type="object" class="d-flex flex-column align-items-center">
-                                                <span class="font-weight-bold"><field name="total_slides"/></span>
+                                                <span class="fw-bold"><field name="total_slides"/></span>
                                                 <span class="text-muted">Published Contents</span>
                                             </a>
                                         </div>
-                                        <div class="col-3 border-right">
+                                        <div class="col-3 border-end">
                                             <a name="action_redirect_to_members" type="object" class="d-flex flex-column align-items-center">
-                                                <span class="font-weight-bold"><field name="members_count"/></span>
+                                                <span class="fw-bold"><field name="members_count"/></span>
                                                 <span class="text-muted">Attendees</span>
                                             </a>
                                         </div>
                                         <div class="col-3">
                                             <a name="action_redirect_to_done_members" type="object" class="d-flex flex-column align-items-center">
-                                                <span class="font-weight-bold"><field name="members_done_count"/></span>
+                                                <span class="fw-bold"><field name="members_done_count"/></span>
                                                 <span name="done_members_count_label" class="text-muted">Finished</span>
                                             </a>
                                         </div>
diff --git a/addons/website_slides/views/slide_slide_views.xml b/addons/website_slides/views/slide_slide_views.xml
index 52c7120e2ee..871de748a44 100644
--- a/addons/website_slides/views/slide_slide_views.xml
+++ b/addons/website_slides/views/slide_slide_views.xml
@@ -61,19 +61,19 @@
                             <button disabled="1" icon="fa-thumbs-up" class="oe_stat_button oe_read_only"
                                 attrs="{'invisible': ['|', ('channel_type', '=', 'training'), ('likes', '=', 0)]}">
                                 <span class="o_stat_value" >
-                                    <field class="ml-1" name="likes" widget="statinfo" nolabel="1"/> Likes
+                                    <field class="ms-1" name="likes" widget="statinfo" nolabel="1"/> Likes
                                 </span>
                              </button>
                              <button disabled="1" icon="fa-thumbs-down" class="oe_stat_button oe_read_only"
                                 attrs="{'invisible': ['|', ('channel_type', '=', 'training'), ('dislikes', '=', 0)]}">
                                  <span class="o_stat_value">
-                                    <field class="ml-1" name="dislikes" widget="statinfo" nolabel="1"/> Dislikes
+                                    <field class="ms-1" name="dislikes" widget="statinfo" nolabel="1"/> Dislikes
                                  </span>
                              </button>
                              <button disabled="1" icon="fa-comments" class="oe_stat_button oe_read_only"
                                  attrs="{'invisible': ['|', ('channel_allow_comment', '!=', True), ('comments_count','=', 0)]}">
                                 <span class="o_stat_value">
-                                    <field class="ml-1" name="comments_count" widget="statinfo" nolabel="1"/> Comments
+                                    <field class="ms-1" name="comments_count" widget="statinfo" nolabel="1"/> Comments
                                 </span>
                             </button>
                             <button name="action_view_embeds" class="oe_stat_button" type="object" icon="fa-share-alt"
@@ -83,18 +83,18 @@
                                     <span class="o_stat_text">Embed Views</span>
                                 </div>
                             </button>
-                            <field name="is_published" class="ml-1" widget="website_redirect_button"
+                            <field name="is_published" class="ms-1" widget="website_redirect_button"
                                    attrs="{'invisible': ['|',('is_category', '=', True), ('channel_id', '=', False)]}"/>
                         </div>
                         <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                         <field name="image_1920" widget="image" class="oe_avatar" options='{"preview_image": "image_256"}'
                             attrs="{'invisible': [('is_category', '=', True)]}"/>
-                        <div class="oe_title pr-xl-0">
+                        <div class="oe_title pe-xl-0">
                             <div>
                                 <label for="name" string="Content Title"/>
                             </div>
                             <h1>
-                                <field name="name" default_focus="1" placeholder="e.g. Setting up your computer" class="mr-0"/>
+                                <field name="name" default_focus="1" placeholder="e.g. Setting up your computer" class="me-0"/>
                                 <field name="is_category" invisible="1"/>
                             </h1>
                             <field name="tag_ids" attrs="{'invisible': [('is_category', '=', True)]}" widget="many2many_tags" placeholder="Tags..."/>
@@ -260,28 +260,28 @@
                                     <div class="o_kanban_record_bottom mt-auto d-flex justify-content-between align-items-end">
                                         <span>
                                             <t t-if="record.slide_category.raw_value == 'infographic'">
-                                                <i class="fa fa-file-image-o mr-2" aria-label="Infographic" role="img" title="Infographic"/>
+                                                <i class="fa fa-file-image-o me-2" aria-label="Infographic" role="img" title="Infographic"/>
                                             </t>
                                             <t t-elif="record.slide_category.raw_value == 'article'">
-                                                <i class="fa fa-file-code-o mr-2" aria-label="article" role="img" title="Article"/>
+                                                <i class="fa fa-file-code-o me-2" aria-label="article" role="img" title="Article"/>
                                             </t>
                                             <t t-elif="record.slide_category.raw_value == 'video'">
-                                                <i class="fa fa-file-video-o mr-2" aria-label="Video" role="img" title="Video"/>
+                                                <i class="fa fa-file-video-o me-2" aria-label="Video" role="img" title="Video"/>
                                             </t>
                                             <t t-elif="record.slide_category.raw_value == 'quiz'">
-                                                <i class="fa fa-flag mr-2" aria-label="Quiz" role="img" title="Quiz"/>
+                                                <i class="fa fa-flag me-2" aria-label="Quiz" role="img" title="Quiz"/>
                                             </t>
-                                            <t t-else=""><i class="fa fa-file-pdf-o mr-2" aria-label="Document" role="img" title="Document"/></t>
+                                            <t t-else=""><i class="fa fa-file-pdf-o me-2" aria-label="Document" role="img" title="Document"/></t>
                                             <field name="slide_category"/>
                                         </span>
                                         <span>
-                                            <i class="fa fa-clock-o mr-2" aria-label="Duration" role="img" title="Duration"/><field name="completion_time" widget="float_time"/>
+                                            <i class="fa fa-clock-o me-2" aria-label="Duration" role="img" title="Duration"/><field name="completion_time" widget="float_time"/>
                                         </span>
                                         <span>
-                                            <i class="fa fa-question mr-2" aria-label="Number of Questions" role="img" title="Number of Questions"/><field name="questions_count"/>
+                                            <i class="fa fa-question me-2" aria-label="Number of Questions" role="img" title="Number of Questions"/><field name="questions_count"/>
                                         </span>
                                         <span>
-                                            <i class="fa fa-eye mr-2" aria-label="Views" role="img" title="Views"/><field name="total_views"/>
+                                            <i class="fa fa-eye me-2" aria-label="Views" role="img" title="Views"/><field name="total_views"/>
                                         </span>
                                         <field name="user_id" widget="many2one_avatar_user"/>
                                     </div>
diff --git a/addons/website_slides/views/website_slides_templates_course.xml b/addons/website_slides/views/website_slides_templates_course.xml
index 67cff2ece4a..8cfe88ee3e2 100644
--- a/addons/website_slides/views/website_slides_templates_course.xml
+++ b/addons/website_slides/views/website_slides_templates_course.xml
@@ -8,12 +8,12 @@
             <div class="row align-items-center justify-content-between">
                 <!-- Desktop Mode -->
                 <nav aria-label="breadcrumb" class="col-md-8 d-none d-md-flex">
-                    <ol class="breadcrumb bg-transparent mb-0 pl-0 py-0">
+                    <ol class="breadcrumb bg-transparent mb-0 ps-0 py-0">
                         <li class="breadcrumb-item">
                             <a href="/slides">Courses</a>
                         </li>
-                        <t t-set="breadcrumb_class" t-value="'breadcrumb-item %s' % ('font-weight-bold' if not slide else '')" />
-                        <li t-att-class="'breadcrumb-item %s' % ('font-weight-bold' if not search_category and not search_tag and not search_slide_category and not slide else '')">
+                        <t t-set="breadcrumb_class" t-value="'breadcrumb-item %s' % ('fw-bold' if not slide else '')" />
+                        <li t-att-class="'breadcrumb-item %s' % ('fw-bold' if not search_category and not search_tag and not search_slide_category and not slide else '')">
                             <a t-att-href="'/slides/%s' % slug(channel)"><span t-esc="channel.name"/></a>
                         </li>
                         <li t-att-class="breadcrumb_class" t-att-aria-current="'page' and search_category" t-if="search_category">
@@ -28,7 +28,7 @@
                         <li t-att-class="breadcrumb_class" t-att-aria-current="'page' and search_slide_category" t-if="search_slide_category">
                             <a t-att-href="'/slides/%s?slide_category=%s' % (slug(channel), search_slide_category)"><span t-esc="slide_categories[search_slide_category]"/></a>
                         </li>
-                        <li t-if="slide" class="breadcrumb-item font-weight-bold">
+                        <li t-if="slide" class="breadcrumb-item fw-bold">
                             <a t-att-href="'/slides/slide/%s' % slug(slide)"><span t-esc="slide.name"/></a>
                         </li>
                     </ol>
@@ -37,9 +37,9 @@
                 <div class="col-md-4 d-none d-md-flex flex-row align-items-center justify-content-end">
                     <!-- search -->
                     <t t-call="website.website_search_box_input">
-                        <t t-set="_classes" t-valuef="o_wslides_course_nav_search ml-1 position-relative"/>
+                        <t t-set="_classes" t-valuef="o_wslides_course_nav_search ms-1 position-relative"/>
                         <t t-set="_input_classes" t-valuef="border-0 rounded-0 bg-transparent"/>
-                        <t t-set="_submit_classes" t-valuef="btn-link rounded-0 pr-1"/>
+                        <t t-set="_submit_classes" t-valuef="btn-link rounded-0 pe-1"/>
                         <t t-set="search_type" t-valuef="slides"/>
                         <t t-set="action" t-valuef="/slides/all"/>
                         <t t-set="display_description" t-valuef="true"/>
@@ -53,35 +53,35 @@
                 <div class="col d-md-none py-1">
                     <div class="btn-group w-100 position-relative" role="group" aria-label="Mobile sub-nav">
                         <div class="btn-group w-100">
-                            <a class="btn bg-black-25 text-white dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Nav</a>
+                            <a class="btn bg-black-25 text-white dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Nav</a>
 
                             <div class="dropdown-menu">
                                 <a class="dropdown-item" href="/slides">Home</a>
                                 <t t-set="dropdown_class" t-value="'dropdown-item %s' % ('active' if not slide else '')"/>
                                 <a t-att-class="'dropdown-item %s' % ('active' if not search_category and not search_tag and not search_slide_category else '')" t-att-href="'/slides/%s' % slug(channel)">
-                                    &#9492;<span class="ml-1" t-esc="channel.name"/>
+                                    &#9492;<span class="ms-1" t-esc="channel.name"/>
                                 </a>
                                 <a t-att-class="dropdown_class" t-att-aria-current="'page' and search_category" t-if="search_category" t-att-href="'/slides/%s/category/%s' % (slug(channel), slug(search_category))">
-                                    &#9492;<span class="ml-1" t-esc="search_category.name"/>
+                                    &#9492;<span class="ms-1" t-esc="search_category.name"/>
                                 </a>
                                 <a t-att-class="dropdown_class" t-att-aria-current="'page' and search_tag" t-if="search_tag" t-att-href="'/slides/%s/tag/%s' % (slug(channel), slug(search_tag))">
-                                    &#9492;<span class="ml-1" t-esc="search_tag.name"/>
+                                    &#9492;<span class="ms-1" t-esc="search_tag.name"/>
                                 </a>
                                 <a t-att-class="dropdown_class" t-att-aria-current="'page' and search_uncategorized" t-if="search_uncategorized" t-att-href="'/slides/%s?search_uncategorized=1' % (slug(channel))">
-                                    &#9492;<span class="ml-1">Uncategorized</span>
+                                    &#9492;<span class="ms-1">Uncategorized</span>
                                 </a>
                                 <a t-att-class="dropdown_class" t-att-aria-current="'page' and search_slide_category" t-if="search_slide_category" t-att-href="'/slides/%s?slide_category=%s' % (slug(channel), search_slide_category)">
-                                    &#9492;<span class="ml-1" t-esc="slide_categories[search_slide_category]"/>
+                                    &#9492;<span class="ms-1" t-esc="slide_categories[search_slide_category]"/>
                                 </a>
                                  <a t-if="slide" class="dropdown-item active" t-att-href="'/slides/slide/%s' % (slug(slide))">
-                                    &#9492;<span class="ml-1" t-esc="slide.name"/>
+                                    &#9492;<span class="ms-1" t-esc="slide.name"/>
                                 </a>
                             </div>
                         </div>
 
-                        <div class="btn-group ml-1 position-static">
-                            <a class="btn bg-black-25 text-white dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-search"></i></a>
-                            <div class="dropdown-menu dropdown-menu-right w-100" style="right: 10px;">
+                        <div class="btn-group ms-1 position-static">
+                            <a class="btn bg-black-25 text-white dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-search"></i></a>
+                            <div class="dropdown-menu dropdown-menu-end w-100" style="right: 10px;">
                                 <t t-call="website.website_search_box_input">
                                     <t t-set="_classes" t-valuef="px-3"/>
                                     <t t-set="search_type" t-valuef="slides"/>
@@ -137,9 +137,9 @@
                                     <div class="mb-0 mb-xl-3" t-field="channel.description"/>
 
                                     <div t-if="channel.channel_type == 'documentation'" class="d-flex mb-md-5">
-                                        <button role="button" class="btn text-white pl-0" title="Share Channel"
+                                        <button role="button" class="btn text-white ps-0" title="Share Channel"
                                             aria-label="Share Channel"
-                                            data-toggle="modal" t-att-data-target="'#slideChannelShareModal_%s' % channel.id">
+                                            data-bs-toggle="modal" t-att-data-bs-target="'#slideChannelShareModal_%s' % channel.id">
                                             <i class="fa fa-share-square"></i> Share
                                         </button>
                                     </div>
@@ -187,14 +187,14 @@
                             <ul class="nav nav-tabs o_wslides_nav_tabs flex-nowrap" role="tablist" id="profile_extra_info_tablist">
                                 <li class="nav-item">
                                     <a t-att-class="'nav-link %s' % ('active' if active_tab == 'home' else '')"
-                                        id="home-tab" data-toggle="pill" href="#home" role="tab" aria-controls="home"
+                                        id="home-tab" data-bs-toggle="pill" href="#home" role="tab" aria-controls="home"
                                         t-att-aria-selected="'true' if active_tab == 'home' else 'false'">
                                         <i class="fa fa-home"/> Course
                                     </a>
                                 </li>
                                 <li t-if="channel.allow_comment" class="nav-item o_wslides_course_header_nav_review">
                                     <a t-att-class="'nav-link %s' % ('active' if active_tab == 'review' else '')"
-                                        id="review-tab" data-toggle="pill" href="#review" role="tab" aria-controls="review"
+                                        id="review-tab" data-bs-toggle="pill" href="#review" role="tab" aria-controls="review"
                                         t-att-aria-selected="'true' if active_tab == 'review' else 'false'">
                                         Reviews<t t-if="rating_count"> (<t t-esc="rating_count"/>)</t>
                                     </a>
@@ -205,7 +205,7 @@
                                 <div t-att-class="'tab-pane fade %s' % ('show active' if active_tab == 'home' else '')" id="home" role="tabpanel" aria-labelledby="home-tab">
                                     <!-- ==== Error notification ==== -->
                                     <div t-if="access_error == 'course_content'" class="alert alert-danger alert-dismissable mb-1" role="alert">
-                                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">×</button>
+                                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                         You need to join this course to access &quot;<t t-out="access_error_content_name"/>&quot;.
                                     </div>
                                     <div t-if="channel.channel_type == 'training' and (channel_frontend_tags or channel.can_upload)"
@@ -216,7 +216,7 @@
                                             </t>
                                         </t>
                                         <a t-if="channel.can_upload"
-                                            class="o_wslides_js_channel_tag_add border badge badge-light font-weight-normal py-1 m-1 o_not_editable"
+                                            class="o_wslides_js_channel_tag_add border badge text-bg-light fw-normal py-1 m-1 o_not_editable"
                                             role="button"
                                             aria-label="Add Tag"
                                             href="#"
@@ -257,7 +257,7 @@
 
         <div class="o_wslides_sidebar_top d-flex justify-content-between">
             <t t-call="website_slides.course_join"/>
-            <button t-attf-class="btn d-md-none bg-white ml-1 border #{'alert' if channel.is_member else ''} #{'align-self-start' if channel.is_member or channel.enroll == 'invite' else 'align-self-end'}" type="button" data-toggle="collapse" data-target="#o_wslides_sidebar_collapse" aria-expanded="false" aria-controls="o_wslides_sidebar_collapse">More info</button>
+            <button t-attf-class="btn d-md-none bg-white ms-1 border #{'alert' if channel.is_member else ''} #{'align-self-start' if channel.is_member or channel.enroll == 'invite' else 'align-self-end'}" type="button" data-bs-toggle="collapse" data-bs-target="#o_wslides_sidebar_collapse" aria-expanded="false" aria-controls="o_wslides_sidebar_collapse">More info</button>
         </div>
 
         <div id="o_wslides_sidebar_collapse" class="collapse d-md-block">
@@ -272,7 +272,7 @@
                 </tr>
                 <tr t-if="channel.total_time">
                     <th class="border-top-0">Completion Time</th>
-                    <td class="border-top-0"><t class="font-weight-bold" t-esc="channel.total_time" t-options="{'widget': 'duration', 'unit': 'hour', 'round': 'minute'}"/></td>
+                    <td class="border-top-0"><t class="fw-bold" t-esc="channel.total_time" t-options="{'widget': 'duration', 'unit': 'hour', 'round': 'minute'}"/></td>
                 </tr>
                 <tr>
                     <th>Members</th>
@@ -283,7 +283,7 @@
             <div class="mt-3 d-grid o_not_editable">
                 <button role="button" class="btn btn-link" title="Share Channel"
                     aria-label="Share Channel"
-                    data-toggle="modal" t-att-data-target="'#slideChannelShareModal_%s' % channel.id">
+                    data-bs-toggle="modal" t-att-data-bs-target="'#slideChannelShareModal_%s' % channel.id">
                     <i class="fa fa-share-square fa-fw"/> Share
                 </button>
             </div>
@@ -331,7 +331,7 @@
                     t-att-data-is-follower="channel.message_is_follower"
                     t-att-data-enroll="channel.enroll">
                 <t t-call="website_slides.slides_misc_user_image">
-                    <t t-set="img_class" t-value="'rounded-circle mr-1'"/>
+                    <t t-set="img_class" t-value="'rounded-circle me-1'"/>
                     <t t-set="img_style" t-value="'width: 1.4em; height: 1.4em; object-fit: cover;'"/>
                 </t>
                 <h6 class="d-flex flex-grow-1 my-0">You're enrolled</h6>
@@ -339,14 +339,14 @@
                 <i class="fa fa-times"/>
             </button>
             <div class="d-flex align-items-center pt-3">
-                <span t-attf-class="o_wslides_channel_completion_completed badge badge-pill badge-success py-1 px-2 mx-auto #{'d-none' if not channel.completed else ''}">
+                <span t-attf-class="o_wslides_channel_completion_completed badge rounded-pill text-bg-success py-1 px-2 mx-auto #{'d-none' if not channel.completed else ''}">
                     <i class="fa fa-check"/> Completed
                 </span>
                 <div t-attf-class="o_wslides_channel_completion_progressbar #{'d-none' if channel.completed else 'd-flex'} w-100 align-items-center">
                     <div class="progress flex-grow-1 bg-black-50" style="height: 6px;">
                         <div class="progress-bar" role="progressbar" t-attf-style="width: #{channel.completion}%" t-att-aria-valuenow="channel.completion" aria-valuemin="0" aria-valuemax="100"></div>
                     </div>
-                    <div class="ml-3 small">
+                    <div class="ms-3 small">
                         <span class="o_wslides_progress_percentage" t-esc="channel.completion"/> %
                     </div>
                 </div>
@@ -366,16 +366,16 @@
                 <li t-if="category['total_slides'] or channel.can_publish" t-att-class="'o_wslides_slide_list_category o_wslides_js_list_item mb-2' if category_id else 'mt-1'" t-att-data-slide-id="category_id" t-att-data-category-id="category_id">
                     <div t-att-data-category-id="category_id"
                          t-att-class="'o_wslides_slide_list_category_header position-relative d-flex justify-content-between align-items-center mt8 %s %s' % ('bg-white shadow-sm border-bottom-0' if category_id else 'border-0', 'o_wslides_js_category py-0' if channel.can_upload else 'py-2')">
-                        <div t-att-class="'d-flex align-items-center pl-3 %s' % ('o_wslides_slides_list_drag' if channel.can_publish else '')">
-                            <div t-if="channel.can_publish and category_id" class="o_wslides_slides_list_drag py-2 pr-3">
+                        <div t-att-class="'d-flex align-items-center ps-3 %s' % ('o_wslides_slides_list_drag' if channel.can_publish else '')">
+                            <div t-if="channel.can_publish and category_id" class="o_wslides_slides_list_drag py-2 pe-3">
                                 <i class="fa fa-bars"/>
                             </div>
                             <span t-if="category_id" t-field="category['category'].name"/>
-                            <small t-if="not category['total_slides'] and category_id" class="ml-1 text-muted"><b>(empty)</b></small>
+                            <small t-if="not category['total_slides'] and category_id" class="ms-1 text-muted"><b>(empty)</b></small>
                         </div>
-                        <div t-if="category_id" class="d-flex border-left o_not_editable">
+                        <div t-if="category_id" class="d-flex border-start o_not_editable">
                             <a  t-if="channel.can_publish"
-                                class="o_text_link text-danger o_wslides_js_category_delete px-3 py-2 border-right"
+                                class="o_text_link text-danger o_wslides_js_category_delete px-3 py-2 border-end"
                                 role="button"
                                 aria-label="Delete Category"
                                 href="#"
@@ -392,7 +392,7 @@
                                 t-att-data-category-id="category_id"
                                 t-att-data-can-upload="channel.can_upload"
                                 t-att-data-can-publish="channel.can_publish">
-                                <i class="fa fa-plus mr-1"/> <span class="d-none d-md-inline-block">Add Content</span>
+                                <i class="fa fa-plus me-1"/> <span class="d-none d-md-inline-block">Add Content</span>
                             </a>
                         </div>
                     </div>
@@ -409,7 +409,7 @@
             </t>
         </ul>
         <div t-if="channel.can_upload" class="o_wslides_content_actions o_not_editable btn-group">
-            <a  class="o_wslides_js_slide_upload mr-1 border btn btn-primary"
+            <a  class="o_wslides_js_slide_upload me-1 border btn btn-primary"
                 role="button"
                 aria-label="Upload Document"
                 href="#"
@@ -417,10 +417,10 @@
                 t-att-data-modules-to-install="modules_to_install"
                 t-att-data-channel-id="channel.id"
                 t-att-data-can-upload="channel.can_upload"
-                t-att-data-can-publish="channel.can_publish"><i class="fa fa-plus mr-1"/><span>Add Content</span></a>
+                t-att-data-can-publish="channel.can_publish"><i class="fa fa-plus me-1"/><span>Add Content</span></a>
             <a class="o_wslides_js_slide_section_add border btn btn-light bg-white" t-attf-channel_id="#{channel.id}"
                 href="#" role="button"
-                groups="website_slides.group_website_slides_officer"><i class="fa fa-folder-o mr-1"/><span>Add Section</span></a>
+                groups="website_slides.group_website_slides_officer"><i class="fa fa-folder-o me-1"/><span>Add Section</span></a>
         </div>
         <t t-if="not channel.slide_ids and channel.can_publish">
             <t t-call="website_slides.course_slides_list_sample"/>
@@ -433,67 +433,67 @@
     <ul class="list-unstyled mt-3" style="opacity: 50%;">
         <li class="o_wslides_slide_list_category mb-2">
             <div class="o_wslides_slide_list_category_header position-relative d-flex justify-content-between align-items-center mt8 bg-white shadow-sm border-bottom-0 py-2">
-                <div class="d-flex align-items-center pl-3">
+                <div class="d-flex align-items-center ps-3">
                     <span class="text-muted">Common tasks for a computer scientist</span>
                 </div>
             </div>
             <ul class="list-unstyled pb-1 border-top card">
                 <div class="h5 o_ribbon_right bg-primary text-uppercase">Sample</div>
-                <li class="o_wslides_slides_list_slide bg-white-50 border-top-0 d-flex align-items-center pl-2 py-1 pr-2">
+                <li class="o_wslides_slides_list_slide bg-white-50 border-top-0 d-flex align-items-center ps-2 py-1 pe-2">
                     <i class="fa fa-file-text py-2 mx-2"/>
-                    <div class="text-truncate mr-auto">
+                    <div class="text-truncate me-auto">
                         <span>Asking Question</span>
                     </div>
                     <div class="d-flex flex-row">
-                        <span class="badge font-weight-bold px-2 py-1 m-1 badge-warning">
+                        <span class="badge fw-bold px-2 py-1 m-1 text-bg-warning">
                             <i class="fa fa-fw fa-flag"/> 10 xp
                         </span>
                     </div>
                 </li>
-                <li class="o_wslides_slides_list_slide bg-white-50 border-top-0 d-flex align-items-center pl-2 py-1 pr-2">
+                <li class="o_wslides_slides_list_slide bg-white-50 border-top-0 d-flex align-items-center ps-2 py-1 pe-2">
                     <i class="fa fa-question-circle py-2 mx-2"/>
-                    <div class="text-truncate mr-auto">
+                    <div class="text-truncate me-auto">
                         <span>Asking the right question</span>
                     </div>
                 </li>
-                <li class="o_wslides_slides_list_slide bg-white-50 border-top-0 d-flex align-items-center pl-2 py-1 pr-2">
+                <li class="o_wslides_slides_list_slide bg-white-50 border-top-0 d-flex align-items-center ps-2 py-1 pe-2">
                     <i class="fa fa-file-pdf-o py-2 mx-2"/>
-                    <div class="text-truncate mr-auto">
+                    <div class="text-truncate me-auto">
                         <span>Answering Questions</span>
                     </div>
                     <div class="d-flex flex-row">
-                        <span class="badge badge-info badge-arrow-right font-weight-normal px-2 py-1 m-1">New</span>
+                        <span class="badge text-bg-info badge-arrow-right fw-normal px-2 py-1 m-1">New</span>
                     </div>
                 </li>
             </ul>
         </li>
         <li class="o_wslides_slide_list_category mb-2">
             <div class="o_wslides_slide_list_category_header position-relative d-flex justify-content-between align-items-center mt8 bg-white shadow-sm border-bottom-0 py-2">
-                <div class="d-flex align-items-center pl-3">
+                <div class="d-flex align-items-center ps-3">
                     <span class="text-muted">Parts of computer science</span>
                 </div>
             </div>
             <ul class="list-unstyled pb-1 border-top card">
                 <div class="h5 o_ribbon_right bg-primary text-uppercase">Sample</div>
-                <li class="o_wslides_slides_list_slide bg-white-50 border-top-0 d-flex align-items-center pl-2 py-1 pr-2">
+                <li class="o_wslides_slides_list_slide bg-white-50 border-top-0 d-flex align-items-center ps-2 py-1 pe-2">
                     <i class="fa fa-file-pdf-o py-2 mx-2"/>
-                    <div class="text-truncate mr-auto">
+                    <div class="text-truncate me-auto">
                         <span>Mathematics</span>
                     </div>
                 </li>
-                <li class="o_wslides_slides_list_slide bg-white-50 border-top-0 d-flex align-items-center pl-2 py-1 pr-2">
+                <li class="o_wslides_slides_list_slide bg-white-50 border-top-0 d-flex align-items-center ps-2 py-1 pe-2">
                     <i class="fa fa-file-pdf-o py-2 mx-2"/>
-                    <div class="text-truncate mr-auto">
+                    <div class="text-truncate me-auto">
                         <span>Science</span>
                     </div>
                 </li>
-                <li class="o_wslides_slides_list_slide bg-white-50 border-top-0 d-flex align-items-center pl-2 py-1 pr-2">
+                <li class="o_wslides_slides_list_slide bg-white-50 border-top-0 d-flex align-items-center ps-2 py-1 pe-2">
                     <i class="fa fa-play py-2 mx-2"/>
-                    <div class="text-truncate mr-auto">
+                    <div class="text-truncate me-auto">
                         <span>Logic</span>
                     </div>
                     <div class="d-flex flex-row">
-                        <span class="badge badge-success font-weight-normal px-2 py-1 m-1">Preview</span>
+                        <span class="badge text-bg-success fw-normal px-2 py-1 m-1">Preview</span>
                     </div>
                 </li>
             </ul>
@@ -502,14 +502,14 @@
 </template>
 
 <template id="course_slides_list_slide" name="Slide template for a training channel">
-    <li t-att-index="j" t-att-data-slide-id="slide.id" t-att-data-category-id="category_id" t-attf-class="o_wslides_slides_list_slide o_wslides_js_list_item bg-white-50 border-top-0 d-flex align-items-center pl-2 #{'py-1 pr-2' if not channel.can_upload else ''}">
+    <li t-att-index="j" t-att-data-slide-id="slide.id" t-att-data-category-id="category_id" t-attf-class="o_wslides_slides_list_slide o_wslides_js_list_item bg-white-50 border-top-0 d-flex align-items-center ps-2 #{'py-1 pe-2' if not channel.can_upload else ''}">
         <div t-if="channel.can_publish" class=" o_wslides_slides_list_drag m-2 o_not_editable">
             <i class="fa fa-sort"></i>
         </div>
         <t t-call="website_slides.slide_icon">
             <t t-set="icon_class" t-value="'py-2 mx-2'"/>
         </t>
-        <div class="text-truncate mr-auto">
+        <div class="text-truncate me-auto">
             <a t-if="slide.is_preview or channel.is_member or channel.can_publish" class="o_wslides_js_slides_list_slide_link" t-attf-href="/slides/slide/#{slug(slide)}">
                 <span t-field="slide.name"/>
             </a>
@@ -520,25 +520,25 @@
 
         <div class="d-flex flex-row o_not_editable">
             <a name="o_wslides_list_slide_add_quizz" t-if="channel.can_upload and not slide.question_ids" t-attf-href="/slides/slide/#{slug(slide)}?quiz_quick_create">
-                <span class="badge badge-light badge-hide border font-weight-normal px-2 py-1 m-1">Add Quiz</span>
+                <span class="badge text-bg-light badge-hide border fw-normal px-2 py-1 m-1">Add Quiz</span>
             </a>
             <a t-if="channel.can_upload" href="#" name="o_wslides_slide_toggle_is_preview">
-                <span t-att-data-slide-id="slide.id" t-attf-class="o_wslides_js_slide_toggle_is_preview badge #{'badge-success' if slide.is_preview else 'badge-light badge-hide border'} font-weight-normal px-2 py-1 m-1"><span>Preview</span></span>
+                <span t-att-data-slide-id="slide.id" t-attf-class="o_wslides_js_slide_toggle_is_preview badge #{'text-bg-success' if slide.is_preview else 'text-bg-light badge-hide border'} fw-normal px-2 py-1 m-1"><span>Preview</span></span>
             </a>
             <t t-elif="slide.is_preview and not channel.is_member">
-                <span class="badge badge-success font-weight-normal px-2 py-1 m-1"><span>Preview</span></span>
+                <span class="badge text-bg-success fw-normal px-2 py-1 m-1"><span>Preview</span></span>
             </t>
-            <span t-if="slide.is_new_slide and not channel_progress[slide.id].get('completed')" class="badge badge-info badge-arrow-right font-weight-normal px-2 py-1 m-1">
+            <span t-if="slide.is_new_slide and not channel_progress[slide.id].get('completed')" class="badge text-bg-info badge-arrow-right fw-normal px-2 py-1 m-1">
                 New
             </span>
-            <span t-if="slide.question_ids" t-att-class="'badge font-weight-bold px-2 py-1 m-1 %s' % ('badge-success' if channel_progress[slide.id].get('completed') else 'badge-warning')">
+            <span t-if="slide.question_ids" t-att-class="'badge fw-bold px-2 py-1 m-1 %s' % ('text-bg-success' if channel_progress[slide.id].get('completed') else 'text-bg-warning')">
                 <i t-attf-class="fa fa-fw #{'fa-check' if channel_progress[slide.id].get('completed') else 'fa-flag'}"/>
                 <t t-esc="channel_progress[slide.id].get('quiz_karma_won', 0) if channel_progress[slide.id].get('completed') else channel_progress[slide.id].get('quiz_karma_gain', 0)"/> xp
             </span>
-            <span class="badge badge-danger font-weight-normal px-2 py-1 m-1" t-if="not slide.website_published">Unpublished</span>
+            <span class="badge text-bg-danger fw-normal px-2 py-1 m-1" t-if="not slide.website_published">Unpublished</span>
         </div>
 
-        <div t-if="channel.is_member or channel.can_publish" class="pt-2 pb-2 border-left ml-2 mr-2 pl-2 d-flex flex-row align-items-center o_wslides_slides_list_slide_controls o_not_editable">
+        <div t-if="channel.is_member or channel.can_publish" class="pt-2 pb-2 border-start ms-2 me-2 ps-2 d-flex flex-row align-items-center o_wslides_slides_list_slide_controls o_not_editable">
             <t t-call="website_slides.slide_sidebar_done_button">
                 <t t-set="is_member" t-value="channel.is_member"/>
                 <t t-set="slide_completed" t-value="channel_progress[slide.id].get('completed')"/>
@@ -575,7 +575,7 @@
 
                     <div t-if="slide_promoted.tag_ids" class="border-top mt-2 pt-1">
                         <t t-foreach="slide_promoted.tag_ids" t-as="tag">
-                            <a t-att-href="'/slides/%s/tag/%s' % (slug(slide_promoted.channel_id), slug(tag))" class="badge badge-light" t-esc="tag.name"/>
+                            <a t-att-href="'/slides/%s/tag/%s' % (slug(slide_promoted.channel_id), slug(tag))" class="badge text-bg-light" t-esc="tag.name"/>
                         </t>
                     </div>
                     <div class="o_wslides_desc_truncate_10 mt-3" t-field="slide_promoted.description"/>
@@ -592,37 +592,37 @@
                 <nav class="navbar navbar-expand-lg navbar-light bg-transparent col">
                     <a class="navbar-brand d-lg-none" href="#">Filter &amp; order</a>
 
-                    <div class="form-inline ml-auto d-lg-none" t-if="search_slide_category or search">
-                        <a t-att-href="'/slides/%s' % (slug(channel))" class="btn btn-info mr-3">
-                            <i class="fa fa-eraser mr-1"/>Clear filters
+                    <div class="form-inline ms-auto d-lg-none" t-if="search_slide_category or search">
+                        <a t-att-href="'/slides/%s' % (slug(channel))" class="btn btn-info me-3">
+                            <i class="fa fa-eraser me-1"/>Clear filters
                         </a>
                     </div>
 
-                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                         <span class="navbar-toggler-icon"></span>
                     </button>
 
                     <div class="collapse navbar-collapse row" id="navbarSupportedContent">
                         <div class="col-12">
-                            <ul class="navbar-nav mr-lg-auto align-items-lg-center">
+                            <ul class="navbar-nav me-lg-auto align-items-lg-center">
 
                                 <t t-set="slide_category_keys" t-value="slide_categories.keys()"/>
                                 <t t-foreach="slide_category_keys" t-as="slide_category_key">
                                     <t t-if="search_category">
                                         <li t-if="search_category['nbr_%s' % slide_category_key] > 0" class="nav-item">
                                             <a t-att-href="'/slides/%s/category/%s?%s' % (slug(channel), slug(search_category), keep_query(slide_category=slide_category_key))"
-                                               t-att-class="'nav-link d-flex align-items-center justify-content-between mr-1 %s' % ('active' if search_slide_category == slide_category_key else '')">
+                                               t-att-class="'nav-link d-flex align-items-center justify-content-between me-1 %s' % ('active' if search_slide_category == slide_category_key else '')">
                                                <t t-esc="slide_categories[slide_category_key]"/>
-                                               <span t-attf-class="badge badge-pill ml-1 #{'badge-info' if search_slide_category == slide_category_key else 'bg-400'}" t-esc="search_category['nbr_%s' % slide_category_key]"/>
+                                               <span t-attf-class="badge rounded-pill ms-1 #{'text-bg-info' if search_slide_category == slide_category_key else 'bg-400'}" t-esc="search_category['nbr_%s' % slide_category_key]"/>
                                             </a>
                                         </li>
                                     </t>
                                     <t t-else="">
                                         <li t-if="channel['nbr_%s' % slide_category_key] > 0" class="nav-item">
                                             <a t-att-href="'/slides/%s?%s' % (slug(channel), keep_query(slide_category=slide_category_key))"
-                                               t-att-class="'nav-link d-flex align-items-center justify-content-between mr-1 %s' % ('active' if search_slide_category == slide_category_key else '')">
+                                               t-att-class="'nav-link d-flex align-items-center justify-content-between me-1 %s' % ('active' if search_slide_category == slide_category_key else '')">
                                                <t t-esc="slide_categories[slide_category_key]"/>
-                                               <span t-attf-class="badge badge-pill ml-1 #{'badge-info' if search_slide_category == slide_category_key else 'bg-400'}" t-esc="channel['nbr_%s' % slide_category_key]"/>
+                                               <span t-attf-class="badge rounded-pill ms-1 #{'text-bg-info' if search_slide_category == slide_category_key else 'bg-400'}" t-esc="channel['nbr_%s' % slide_category_key]"/>
                                             </a>
                                         </li>
                                     </t>
@@ -631,10 +631,10 @@
                         </div>
 
                         <div class="col-12 d-flex align-items-start">
-                            <ul class="navbar-nav mr-auto">
-                                <li class="nav-item dropdown ml-lg-auto">
+                            <ul class="navbar-nav me-auto">
+                                <li class="nav-item dropdown ms-lg-auto">
                                     <a class="nav-link dropdown-toggle dropdown-toggle align-items-center d-flex" type="button" id="slidesChannelDropdownSort"
-                                       data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="#">
+                                       data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="#">
                                         <b>Order by</b>
                                         <span class="d-none d-xl-inline">:
                                             <t t-if="sorting == 'most_voted'">Most Voted</t>
@@ -654,9 +654,9 @@
                                 </li>
                             </ul>
 
-                            <div class="form-inline mr-3 d-none d-lg-inline-block">
-                                <a t-if="search_slide_category or search" t-att-href="'/slides/%s' % (slug(channel))" class="btn btn-sm btn-info ml-1">
-                                    <i class="fa fa-eraser mr-1"/>Clear filters
+                            <div class="form-inline me-3 d-none d-lg-inline-block">
+                                <a t-if="search_slide_category or search" t-att-href="'/slides/%s' % (slug(channel))" class="btn btn-sm btn-info ms-1">
+                                    <i class="fa fa-eraser me-1"/>Clear filters
                                 </a>
                             </div>
 
@@ -677,14 +677,14 @@
 
     <div class="container">
         <div class="row">
-            <div class="mb-2 pt-1 text-left col">
+            <div class="mb-2 pt-1 text-start col">
                 <t t-if="channel_frontend_tags">
                     <t t-foreach="channel_frontend_tags" t-as="channel_tag">
                         <span t-attf-class="badge o_wslides_channel_tag #{'o_tag_color_'+str(channel_tag.color)}" t-esc="channel_tag.name"/>
                     </t>
                 </t>
                 <a t-if="channel.can_upload"
-                    class="o_wslides_js_channel_tag_add border badge badge-light font-weight-normal py-1 m-1"
+                    class="o_wslides_js_channel_tag_add border badge text-bg-light fw-normal py-1 m-1"
                     role="button"
                     aria-label="Add Tag"
                     href="#"
@@ -694,20 +694,20 @@
                 </a>
             </div>
 
-            <div t-if="channel.can_upload" class="text-right pb-2 col-auto">
+            <div t-if="channel.can_upload" class="text-end pb-2 col-auto">
                 <a class="btn btn-primary py-1 o_wslides_js_slide_upload"
                     title="Upload Document" role="button"
                     aria-label="Upload Document" href="#"
                     t-att-data-channel-id="channel.id"
                     t-att-data-can-upload="channel.can_upload"
                     t-att-data-can-publish="channel.can_publish">
-                    <i class="fa fa-cloud-upload mr-1"/>Add Content
+                    <i class="fa fa-cloud-upload me-1"/>Add Content
                 </a>
                 <a class="btn btn-secondary py-1 o_wslides_js_slide_section_add"
                     title="Add Section" role="button"
                     aria-label="Add Section" href="#"
                     t-att-channel_id="channel.id">
-                    <i class="fa fa-folder-o mr-1"/>Add a section
+                    <i class="fa fa-folder-o me-1"/>Add a section
                 </a>
             </div>
         </div>
@@ -724,7 +724,7 @@
                 <t t-set="search_results_number" t-value="search_results_number + category['total_slides']"/>
             </t>
             <div t-if="search_results_number == 0" class="alert alert-info mt-4 mb-5 text-center">
-                No content was found using your search <span class="font-weight-bold" t-esc="search"/>.
+                No content was found using your search <span class="fw-bold" t-esc="search"/>.
             </div>
         </t>
 
@@ -783,35 +783,35 @@
             <span t-else="" class="card-title h5 mb-2 o_wslides_desc_truncate_2 text-muted" t-esc="slide.name"/>
             <div class="card-subtitle mb-2 text-muted" t-if="slide.is_preview or (not slide.is_published and user.has_group('website_slides.group_website_slides_officer'))">
                 <t t-if="slide.is_preview">
-                    <span class="badge badge-info">Preview</span>
+                    <span class="badge text-bg-info">Preview</span>
                 </t>
                 <t t-if="not slide.is_published and channel.can_publish">
-                    <span class="badge badge-danger">Unpublished</span>
+                    <span class="badge text-bg-danger">Unpublished</span>
                 </t>
             </div>
             <div class="card-text pt-2">
-                <div class="o_wslides_desc_truncate_3 font-weight-light oe_no_empty" t-field="slide.description"/>
+                <div class="o_wslides_desc_truncate_3 fw-light oe_no_empty" t-field="slide.description"/>
             </div>
             <div class="mt-auto">
                 <div t-if="slide.tag_ids" class="o_wslides_desc_truncate_2 my-2">
                     <t t-foreach="slide.tag_ids" t-as="tag">
-                        <a t-att-href="'/slides/%s/tag/%s' % (slug(slide.channel_id), slug(tag))" class="badge badge-light" t-esc="tag.name"/>
+                        <a t-att-href="'/slides/%s/tag/%s' % (slug(slide.channel_id), slug(tag))" class="badge text-bg-light" t-esc="tag.name"/>
                     </t>
                 </div>
                 <t t-if="channel.is_member and channel_progress[slide.id].get('completed')">
-                    <span class="badge badge-pill badge-success"><i class="fa fa-check"/> Completed</span>
+                    <span class="badge rounded-pill text-bg-success"><i class="fa fa-check"/> Completed</span>
                 </t>
             </div>
         </div>
         <div class="card-footer bg-white text-600">
             <div class="d-flex align-items-center small">
-                <span class="font-weight-bold mr-auto" t-field="slide.completion_time" t-options='{"widget": "float_time"}'/>
+                <span class="fw-bold me-auto" t-field="slide.completion_time" t-options='{"widget": "float_time"}'/>
                 <div class="o_wslides_js_slide_like">
-                    <span t-attf-class="d-inline-block text-center o_wslides_js_slide_like_up #{'disabled' if not channel.can_vote else ''}" tabindex="0" data-toggle="popover" t-att-data-slide-id="slide.id" t-att-data-user-vote="slide.user_vote">
+                    <span t-attf-class="d-inline-block text-center o_wslides_js_slide_like_up #{'disabled' if not channel.can_vote else ''}" tabindex="0" data-bs-toggle="popover" t-att-data-slide-id="slide.id" t-att-data-user-vote="slide.user_vote">
                         <i t-attf-class="fa fa-1x #{'fa-thumbs-up' if slide.user_vote == 1 else 'fa-thumbs-o-up'}" role="img" aria-label="Likes" title="Like"></i>
                         <span t-field="slide.likes" t-options="{'format_decimalized_number': True}"/>
                     </span>
-                    <span t-attf-class="d-inline-block text-center ml-1 o_wslides_js_slide_like_down #{'disabled' if not channel.can_vote else ''}" tabindex="0" data-toggle="popover" t-att-data-slide-id="slide.id" t-att-data-user-vote="slide.user_vote">
+                    <span t-attf-class="d-inline-block text-center ms-1 o_wslides_js_slide_like_down #{'disabled' if not channel.can_vote else ''}" tabindex="0" data-bs-toggle="popover" t-att-data-slide-id="slide.id" t-att-data-user-vote="slide.user_vote">
                         <i t-attf-class="fa fa-1x #{'fa-thumbs-down' if slide.user_vote == -1 else 'fa-thumbs-o-down'}" role="img" aria-label="Dislikes" title="Dislike"></i>
                         <span t-field="slide.dislikes" t-options="{'format_decimalized_number': True}"/>
                     </span>
@@ -822,7 +822,7 @@
 </template>
 
 <template id="slide_icon">
-    <t t-set="icon_class" t-value="icon_class if icon_class else 'mr-2 text-muted'"/>
+    <t t-set="icon_class" t-value="icon_class if icon_class else 'me-2 text-muted'"/>
     <i t-if="slide.slide_type == 'pdf'" t-att-class="'fa fa-file-pdf-o %s' % icon_class"></i>
     <i t-if="slide.slide_type == 'sheet'" t-att-class="'fa fa-file-excel-o %s' % icon_class"></i>
     <i t-if="slide.slide_type == 'doc'" t-att-class="'fa fa-file-word-o %s' % icon_class"></i>
diff --git a/addons/website_slides/views/website_slides_templates_homepage.xml b/addons/website_slides/views/website_slides_templates_homepage.xml
index a021e8d26fb..ed623342d3b 100644
--- a/addons/website_slides/views/website_slides_templates_homepage.xml
+++ b/addons/website_slides/views/website_slides_templates_homepage.xml
@@ -32,13 +32,13 @@
                         <t t-set="placeholder">Search courses</t>
                     </t>
                     <button class="navbar-toggler px-2 order-1" type="button"
-                        data-toggle="collapse" data-target="#navbarSlidesHomepage"
+                        data-bs-toggle="collapse" data-bs-target="#navbarSlidesHomepage"
                         aria-controls="navbarSlidesHomepage" aria-expanded="false" aria-label="Toggle navigation">
                         <span class="navbar-toggler-icon"/>
                     </button>
                     <div class="collapse navbar-collapse order-2" id="navbarSlidesHomepage">
                         <div class="navbar-nav pt-3 pt-lg-0">
-                            <a class="nav-link nav-link mr-md-2 o_wslides_home_all_slides" href="/slides/all"><i class="fa fa-graduation-cap mr-1"/>All courses</a>
+                            <a class="nav-link nav-link me-md-2 o_wslides_home_all_slides" href="/slides/all"><i class="fa fa-graduation-cap me-1"/>All courses</a>
                         </div>
                     </div>
                 </nav>
@@ -60,7 +60,7 @@
                         <div t-if="has_side_column" class="col-lg-3 order-3 order-lg-2">
                             <div class="row">
                                 <div class="col-12 col-md-5 col-lg-12">
-                                    <div class="pl-md-5 pl-lg-0">
+                                    <div class="ps-md-5 ps-lg-0">
                                         <t t-call="website_slides.slides_home_users_small"/>
                                     </div>
                                 </div>
@@ -73,34 +73,34 @@
                             <div class="o_wslides_home_aside_title">
                                 <div class="d-flex align-items-center">
                                     <t t-call="website_slides.slides_misc_user_image">
-                                        <t t-set="img_class" t-value="'rounded-circle mr-1'"/>
+                                        <t t-set="img_class" t-value="'rounded-circle me-1'"/>
                                         <t t-set="img_style" t-value="'width: 22px; height: 22px; object-fit: cover;'"/>
                                     </t>
                                     <h5 t-esc="user.name" class="d-flex flex-grow-1 mb-0"/>
                                     <a class="d-none d-lg-block" t-att-href="'/profile/user/%s' % user.id">View</a>
-                                    <a class="d-lg-none btn btn-sm bg-white border" href="#" data-toggle="collapse" data-target="#o_wslides_home_aside_content">More info</a>
+                                    <a class="d-lg-none btn btn-sm bg-white border" href="#" data-bs-toggle="collapse" data-bs-target="#o_wslides_home_aside_content">More info</a>
                                 </div>
                                 <hr class="d-none d-lg-block mt-2 mb-2 mb-1"/>
                             </div>
                             <div id="o_wslides_home_aside_content" class="collapse d-lg-block">
-                                <div class="row no-gutters mb-5 mt-3 mt-lg-0">
+                                <div class="row g-0 mb-5 mt-3 mt-lg-0">
                                     <div class="col-12 col-sm-6 col-lg-12">
                                         <t t-call="website_slides.slides_home_user_profile_small"/>
                                     </div>
-                                    <div class="col-12 col-sm-6 col-lg-12 pl-md-5 pl-lg-0 mt-lg-4">
+                                    <div class="col-12 col-sm-6 col-lg-12 ps-md-5 ps-lg-0 mt-lg-4">
                                         <t t-call="website_slides.slides_home_user_achievements_small"/>
                                     </div>
-                                    <div class="col-12 col-md-7 col-lg-12 pl-md-5 pl-lg-0 mt-lg-4 mb-3">
+                                    <div class="col-12 col-md-7 col-lg-12 ps-md-5 ps-lg-0 mt-lg-4 mb-3">
                                         <t t-call="website_slides.slides_home_achievements_small"/>
                                     </div>
-                                    <div class="col-12 col-sm-6 col-lg-12 pl-md-5 pl-lg-0 mt-lg-4">
+                                    <div class="col-12 col-sm-6 col-lg-12 ps-md-5 ps-lg-0 mt-lg-4">
                                         <t t-call="website_slides.slides_home_users_small"/>
                                     </div>
                                 </div>
                             </div>
                         </div>
                     </div>
-                    <div t-att-class="'col-lg-9 pr-lg-5 order-lg-1' if has_side_column else 'col-lg pr-lg'">
+                    <div t-att-class="'col-lg-9 pe-lg-5 order-lg-1' if has_side_column else 'col-lg pr-lg'">
                         <div class="o_wslides_home_content_section mb-3"
                             t-if="not channels_popular">
                             <p class="h2">No Course created yet.</p>
@@ -111,7 +111,7 @@
                             <div class="o_wslides_home_content_section mb-3">
                                 <div class="row o_wslides_home_content_section_title align-items-center">
                                     <div class="col">
-                                        <a href="/slides/all?my=1" class="float-right">View all</a>
+                                        <a href="/slides/all?my=1" class="float-end">View all</a>
                                         <h5 class="m-0">My courses</h5>
                                         <hr class="mt-2 mb-2"/>
                                     </div>
@@ -129,7 +129,7 @@
                             t-if="channels_popular">
                             <div class="row o_wslides_home_content_section_title align-items-center">
                                 <div class="col">
-                                    <a href="slides/all" class="float-right">View all</a>
+                                    <a href="slides/all" class="float-end">View all</a>
                                     <h5 class="m-0">Most popular courses</h5>
                                     <hr class="mt-2 mb-2"/>
                                 </div>
@@ -146,7 +146,7 @@
                             t-if="channels_newest">
                             <div class="row o_wslides_home_content_section_title align-items-center">
                                 <div class="col">
-                                    <a href="slides/all" class="float-right">View all</a>
+                                    <a href="slides/all" class="float-end">View all</a>
                                     <h5 class="m-0">Newest courses</h5>
                                     <hr class="mt-2 mb-2"/>
                                 </div>
@@ -193,13 +193,13 @@
             </div>
             <div class="container mt16 o_wslides_home_nav position-relative">
                 <!-- Navbar dynamically composed using displayed channel tag groups. -->
-                <nav class="navbar navbar-expand-md navbar-light shadow-sm pl-0" style="background: white!important">
-                    <div class="navbar-nav border-right">
+                <nav class="navbar navbar-expand-md navbar-light shadow-sm ps-0" style="background: white!important">
+                    <div class="navbar-nav border-end">
                         <a class="nav-link nav-item px-3" href="/slides"><i class="fa fa-chevron-left"/></a>
                     </div>
                     <!-- Clear filtering (mobile)-->
-                    <div class="form-inline text-nowrap ml-auto d-md-none" t-if="search_slide_category or search_my or search_tags">
-                        <a href="/slides/all" class="btn btn-info mr-2" role="button" title="Clear filters">
+                    <div class="form-inline text-nowrap ms-auto d-md-none" t-if="search_slide_category or search_my or search_tags">
+                        <a href="/slides/all" class="btn btn-info me-2" role="button" title="Clear filters">
                             <i class="fa fa-eraser"/> Clear filters
                         </a>
                     </div>
@@ -216,7 +216,7 @@
                         <input t-if="search_slide_category" type="hidden" name="slide_category" t-att-value="search_slide_category" />
                     </t>
                     <button class="navbar-toggler px-1" type="button"
-                        data-toggle="collapse" data-target="#navbarTagGroups"
+                        data-bs-toggle="collapse" data-bs-target="#navbarTagGroups"
                         aria-controls="navbarTagGroups" aria-expanded="false" aria-label="Toggle navigation">
                         <span class="navbar-toggler-icon small"/>
                     </button>
@@ -228,8 +228,8 @@
                                 <li class="nav-item dropdown ml16" t-if="group_frontend_tags">
                                     <a t-att-class="'nav-link dropdown-toggle %s' % ('active' if tag_group in search_tag_groups else '')"
                                         href="/slides/all"
-                                        t-att-data-target="'#navToogleTagGroup%s' % tag_group.id"
-                                        role="button" data-toggle="dropdown"
+                                        t-att-data-bs-target="'#navToogleTagGroup%s' % tag_group.id"
+                                        role="button" data-bs-toggle="dropdown"
                                         aria-haspopup="true" aria-expanded="false"
                                         t-esc="tag_group.name"/>
                                     <div class="dropdown-menu" t-att-id="'navToogleTagGroup%s' % tag_group.id">
@@ -243,8 +243,8 @@
                             </t>
                         </ul>
                         <!-- Clear filtering (desktop)-->
-                        <div class="form-inline ml-auto d-none d-md-flex" t-if="search_slide_category or search_my or search_tags">
-                            <a href="/slides/all" class="btn btn-info text-nowrap mr-2" role="button" title="Clear filters">
+                        <div class="form-inline ms-auto d-none d-md-flex" t-if="search_slide_category or search_my or search_tags">
+                            <a href="/slides/all" class="btn btn-info text-nowrap me-2" role="button" title="Clear filters">
                                 <i class="fa fa-eraser"/> Clear filters
                             </a>
                         </div>
@@ -271,22 +271,22 @@
                 </div>
                 <!-- Display tags -->
                 <t t-if="search_my">
-                      <span class="align-items-baseline border d-inline-flex pl-2 rounded mb-2">
-                      <i class="fa fa-tag mr-2 text-muted"/>
+                      <span class="align-items-baseline border d-inline-flex ps-2 rounded mb-2">
+                      <i class="fa fa-tag me-2 text-muted"/>
                       My Courses
                       <a t-att-href="slide_query_url(tag=slugify_tags(search_tags.ids), search=search_term)" class="btn border-0 py-1 post_link" t-att-rel="search_tags and 'nofollow'">&#215;</a>
                     </span>
                 </t>
                 <t t-if="search_term">
-                      <span class="align-items-baseline border d-inline-flex pl-2 rounded mb-2">
-                      <i class="fa fa-tag mr-2 text-muted"/>
+                      <span class="align-items-baseline border d-inline-flex ps-2 rounded mb-2">
+                      <i class="fa fa-tag me-2 text-muted"/>
                       <t t-esc="search_term"/>
                       <a t-att-href="slide_query_url(tag=slugify_tags(search_tags.ids), my=search_my, slide_category=search_slide_category)" class="btn border-0 py-1 post_link" t-att-rel="search_tags and 'nofollow'">&#215;</a>
                     </span>
                 </t>
                 <t t-foreach="search_tags" t-as="tag">
-                    <span class="align-items-baseline border d-inline-flex pl-2 rounded mb-2">
-                        <i class="fa fa-tag mr-2 text-muted"/>
+                    <span class="align-items-baseline border d-inline-flex ps-2 rounded mb-2">
+                        <i class="fa fa-tag me-2 text-muted"/>
                         <t t-esc="tag.display_name"/>
                         <a t-att-href='slide_query_url(tag=slugify_tags(search_tags.ids, tag.id), my=search_my, search=search_term, slide_category=search_slide_category)' class="btn border-0 py-1 post_link" t-att-rel="search_tags and 'nofollow'">&#215;</a>
                     </span>
@@ -336,18 +336,18 @@
             <t t-if="channel.partner_has_new_content" t-call="website_slides.course_card_information"/> 
             <div t-if="channel.image_1024" class="card-img-top" t-attf-style="padding-top: 50%; background-image: url(#{course_image}); background-size: cover; background-position:center"/>
             <div t-else="" class="o_wslides_card_default_background card-img-top position-relative" style="padding-top: 50%; opacity: 0.8">
-                <i class="fa fa-graduation-cap fa-2x mr-3 mb-3 position-absolute text-white-75" style="right:0; bottom: 0"/>
+                <i class="fa fa-graduation-cap fa-2x me-3 mb-3 position-absolute text-white-75" style="right:0; bottom: 0"/>
             </div>
         </a>
         <div class="card-body p-3">
             <a class="card-title h5 mb-2 o_wslides_desc_truncate_2" t-attf-href="/slides/#{slug(channel)}" t-esc="channel.name"/>
-            <span t-if="not channel.is_published" class="badge badge-danger p-1">Unpublished</span>
+            <span t-if="not channel.is_published" class="badge text-bg-danger p-1">Unpublished</span>
             <div class="card-text mt-1">
-                <div class="font-weight-light o_wslides_desc_truncate_3" t-field="channel.description_short"/>
+                <div class="fw-light o_wslides_desc_truncate_3" t-field="channel.description_short"/>
                 <div t-if="channel_frontend_tags" class="mt-2 pt-1 o_wslides_desc_truncate_2">
                     <t t-foreach="channel_frontend_tags" t-as="tag">
                         <t t-if="search_tags">
-                            <a t-att-href="slide_query_url(tag=slugify_tags(search_tags.ids, toggle_tag_id=tag.id), my=search_my, search=search_term, slide_category=search_slide_category)" t-attf-class="badge post_link #{'badge-primary' if tag in search_tags else 'o_wslides_channel_tag o_tag_color_0'}" t-att-rel="search_tags and 'nofollow'" t-esc="tag.name"/>
+                            <a t-att-href="slide_query_url(tag=slugify_tags(search_tags.ids, toggle_tag_id=tag.id), my=search_my, search=search_term, slide_category=search_slide_category)" t-attf-class="badge post_link #{'text-bg-primary' if tag in search_tags else 'o_wslides_channel_tag o_tag_color_0'}" t-att-rel="search_tags and 'nofollow'" t-esc="tag.name"/>
                         </t>
                         <t t-else="">
                             <a t-att-href="slide_query_url(tag=slugify_tags(search_tags.ids, toggle_tag_id=tag.id), my=search_my, search=search_term, slide_category=search_slide_category)" t-attf-class="badge post_link o_wslides_channel_tag #{'o_tag_color_'+str(tag.color)}" t-att-rel="search_tags and 'nofollow'" t-esc="tag.name"/>
@@ -358,10 +358,10 @@
         </div>
         <div class="card-footer bg-white text-600 px-3">
             <div class="d-flex justify-content-between align-items-center">
-                <small t-if="channel.total_time" class="font-weight-bold" t-esc="channel.total_time" t-options="{'widget': 'duration', 'unit': 'hour', 'round': 'minute'}"/>
+                <small t-if="channel.total_time" class="fw-bold" t-esc="channel.total_time" t-options="{'widget': 'duration', 'unit': 'hour', 'round': 'minute'}"/>
                 <div class="d-flex flex-grow-1 justify-content-end">
                     <t t-if="channel.is_member and channel.completed">
-                        <span class="badge badge-pill badge-success pull-right py-1 px-2"><i class="fa fa-check"/> Completed</span>
+                        <span class="badge rounded-pill text-bg-success pull-right py-1 px-2"><i class="fa fa-check"/> Completed</span>
                     </t>
                     <div t-elif="channel.is_member and channel.channel_type != 'documentation'" class="progress w-50" style="height: 6px">
                         <div class="progress-bar" role="progressbar" t-att-aria-valuenow="channel.completion" aria-valuemin="0" aria-valuemax="100" t-attf-style="width:#{channel.completion}%;"/>
@@ -411,12 +411,12 @@
 </template>
 
 <template id='achievement_card' name="Achivement Card">
-    <div class="d-flex no-gutters mt8 align-items-center">
+    <div class="d-flex g-0 mt8 align-items-center">
         <t t-call="website_slides.slides_misc_user_image">
             <t t-set="user" t-value="achievement.user_id"/>
         </t>
         <div style="line-height: 1.3">
-            <span class="font-weight-bold" t-esc="achievement.user_id.name"/> achieved <span class="font-weight-bold" t-esc="achievement.badge_id.name"/>
+            <span class="fw-bold" t-esc="achievement.user_id.name"/> achieved <span class="fw-bold" t-esc="achievement.badge_id.name"/>
         </div>
     </div>
 </template>
@@ -430,7 +430,7 @@
     <xpath expr="//div[hasclass('o_wslides_home_aside')]" position="inside">
         <div class="row o_wslides_home_aside_title">
             <div class="col">
-                <a t-if="users" href="/profile/users" class="float-right">View all</a>
+                <a t-if="users" href="/profile/users" class="float-end">View all</a>
                 <h5 class="m-0">Leaderboard</h5>
                 <hr class="mt-2 mb-2"/>
             </div>
@@ -452,14 +452,14 @@
 
 <template id='user_quickkarma_card' name="User QuickKarma Card">
     <div class="d-flex mb-3 align-items-center">
-        <b class="mr-2 text-muted" t-esc="counter"/>
+        <b class="me-2 text-muted" t-esc="counter"/>
         <t t-call="website_slides.slides_misc_user_image"/>
         <div style="line-height:1.3">
-            <span class="font-weight-bold" t-esc="user.name"/>
+            <span class="fw-bold" t-esc="user.name"/>
             <div class="d-flex align-items-center">
                 <t t-esc="user.rank_id.name"/>
                 <span class="text-500 mx-2">&#8226;</span>
-                <span class="badge badge-success"><t t-esc="user.karma"/> xp</span>
+                <span class="badge text-bg-success"><t t-esc="user.karma"/> xp</span>
             </div>
         </div>
     </div>
@@ -468,12 +468,12 @@
 <template id='slides_home_user_profile_small' name="User Profile">
     <div class="o_wslides_home_aside">
         <div t-if="user.rank_id" class="d-flex align-items-center">
-            <span class="font-weight-bold text-muted mr-2">Current rank:</span>
-            <img t-att-src="website.image_url(user.rank_id, 'image_128')" width="16" height="16" alt="" class="o_object_fit_cover mr-1"/>
+            <span class="fw-bold text-muted me-2">Current rank:</span>
+            <img t-att-src="website.image_url(user.rank_id, 'image_128')" width="16" height="16" alt="" class="o_object_fit_cover me-1"/>
             <a href="/profile/ranks_badges" t-field="user.rank_id"/>
         </div>
         <t t-set="next_rank_id" t-value="user._get_next_rank()"/>
-        <div t-if="next_rank_id" class="font-weight-bold text-muted mt-1">Next rank:</div>
+        <div t-if="next_rank_id" class="fw-bold text-muted mt-1">Next rank:</div>
         <t t-if="next_rank_id or user.rank_id" t-call="website_profile.profile_next_rank_card">
             <t t-set="bg_class" t-valuef="bg-200"/>
             <t t-set="img_max_width" t-value="'50%'"/>
@@ -487,7 +487,7 @@
     <div class="o_wslides_home_aside flex-grow-1">
         <div class="row o_wslides_home_aside_title">
             <div class="col">
-                <a href="/profile/ranks_badges?badge_category=slides" class="float-right">View all</a>
+                <a href="/profile/ranks_badges?badge_category=slides" class="float-end">View all</a>
                 <h5 class="m-0">Badges</h5>
                 <hr class="mt-2 mt-2"/>
             </div>
@@ -495,7 +495,7 @@
         <t t-foreach="challenges" t-as="challenge">
             <t t-set="challenge_done" t-value="challenge in challenges_done if challenges_done else False"/>
             <div t-attf-class="d-flex mb-3 align-items-center #{'o_wslides_entry_muted' if not challenge_done else ''}">
-                <img class="mr-2"
+                <img class="me-2"
                     style="max-height: 36px;"
                     t-att-src="website.image_url(challenge.reward_id, 'image_128') if challenge.reward_id.image_1920 else
                                '/website_profile/static/src/img/badge_%s.svg' % (challenge.reward_id.level)"
@@ -511,7 +511,7 @@
 </template>
 
 <template id='slides_misc_user_image' name="User Avatar">
-    <img t-att-class="img_class if img_class else 'rounded-circle float-left'"
+    <img t-att-class="img_class if img_class else 'rounded-circle float-start'"
         t-att-style="img_style if img_style else 'width: 32px; height: 32px; object-fit: cover;'"
         t-att-src="'/profile/avatar/%s?field=avatar_128' % user.id"
         t-att-alt="user.name"/>
diff --git a/addons/website_slides/views/website_slides_templates_lesson.xml b/addons/website_slides/views/website_slides_templates_lesson.xml
index a46a9360718..edfc27f4f06 100644
--- a/addons/website_slides/views/website_slides_templates_lesson.xml
+++ b/addons/website_slides/views/website_slides_templates_lesson.xml
@@ -19,27 +19,27 @@
                     <div class="container o_wslides_lesson_header_container mt-5 mt-md-3 mt-xl-4">
                         <div class="row align-items-md-stretch">
                             <div t-attf-class="col-12 col-sm-9 d-flex flex-column #{'col-lg-6 offset-lg-3' if slide.channel_id.channel_type == 'training' else ''}">
-                                <h2 class="font-weight-medium w-100">
+                                <h2 class="fw-medium w-100">
                                     <a t-att-href="'/slides/%s' % (slug(slide.channel_id))" class="text-white text-decoration-none" t-field="slide.channel_id.name"/>
                                 </h2>
                                 <div t-if="slide.channel_id.channel_type == 'documentation'" class="mb-3 small">
-                                    <span class="font-weight-normal">Last update:</span>
+                                    <span class="fw-normal">Last update:</span>
                                     <t t-esc="slide.date_published" t-options="{'widget': 'date'}"/>
                                 </div>
                                 <div t-else="" t-attf-class="o_wslides_channel_completion_progressbar #{'d-none' if slide.channel_id.completed else 'd-flex'} align-items-center pb-3">
                                     <div class="progress w-50 bg-black-25" style="height: 10px;">
-                                        <div class="progress-bar rounded-left" role="progressbar"
+                                        <div class="progress-bar rounded-start" role="progressbar"
                                             t-att-aria-valuenow="slide.channel_id.completion" aria-valuemin="0" aria-valuemax="100"
                                             t-attf-style="width: #{slide.channel_id.completion}%;">
                                         </div>
                                     </div>
-                                    <i class="fa fa-trophy m-0 ml-2 p-0 text-black-50"></i>
-                                    <small class="ml-2 text-white-50"><span class="o_wslides_progress_percentage" t-esc="slide.channel_id.completion"/> %</small>
+                                    <i class="fa fa-trophy m-0 ms-2 p-0 text-black-50"></i>
+                                    <small class="ms-2 text-white-50"><span class="o_wslides_progress_percentage" t-esc="slide.channel_id.completion"/> %</small>
                                 </div>
                             </div>
                             <div t-attf-class="o_wslides_channel_completion_completed col-12 col-sm-3 #{'d-none' if not slide.channel_id.completed else ''}">
                                 <h2>
-                                    <small><span class="badge badge-pill badge-success font-weight-normal"><i class="fa fa-check"/> Completed</span></small>
+                                    <small><span class="badge rounded-pill text-bg-success fw-normal"><i class="fa fa-check"/> Completed</span></small>
                                 </h2>
                             </div>
                         </div>
@@ -65,8 +65,8 @@
 <template id="slide_aside_documentation" name="Slide: Sidebar in Documentation">
     <div class="o_wslides_lesson_aside_doc position-relative bg-white pb-1 my-3 border-bottom">
         <ul class="nav nav-tabs nav-fill" role="tablist">
-            <li class="nav-item"><a aria-controls="related" href="#related" class="nav-link rounded-0 border-top-0 border-left-0 py-2 active" data-toggle="tab">Related</a></li>
-            <li class="nav-item"><a aria-controls="most_viewed" href="#most_viewed" class="nav-link rounded-0 border-top-0 border-right-0 py-2" data-toggle="tab">Most Viewed</a></li>
+            <li class="nav-item"><a aria-controls="related" href="#related" class="nav-link rounded-0 border-top-0 border-start-0 py-2 active" data-bs-toggle="tab">Related</a></li>
+            <li class="nav-item"><a aria-controls="most_viewed" href="#most_viewed" class="nav-link rounded-0 border-top-0 border-end-0 py-2" data-bs-toggle="tab">Most Viewed</a></li>
         </ul>
         <div class="tab-content">
             <div role="tabpanel" id="related" class="tab-pane active bg-100">
@@ -100,8 +100,8 @@
     <a class="list-group-item list-group-item-action d-flex align-items-start px-2" t-att-href="'/slides/slide/%s' % (slug(aside_slide))">
         <t t-set="slide_image" t-value="website.image_url(aside_slide, 'image_1024')"/>
 
-        <div t-if="aside_slide.image_1024" class="flex-shrink-0 mr-1 border" t-attf-style="width: 20%; padding-top: 20%; background-image: url(#{slide_image}); background-size: cover; background-position:center"/>
-        <div t-else="" class="o_wslides_card_default_background flex-shrink-0 mr-1" t-attf-style="width: 20%; padding-top: 20%;"/>
+        <div t-if="aside_slide.image_1024" class="flex-shrink-0 me-1 border" t-attf-style="width: 20%; padding-top: 20%; background-image: url(#{slide_image}); background-size: cover; background-position:center"/>
+        <div t-else="" class="o_wslides_card_default_background flex-shrink-0 me-1" t-attf-style="width: 20%; padding-top: 20%;"/>
         <div class="overflow-hidden d-flex flex-column justify-content-start">
             <h6 t-esc="aside_slide.name" class="o_wslides_desc_truncate_2 mb-1" style="line-height: 1.15"/>
             <small class="text-600">
@@ -116,7 +116,7 @@
     <div class="o_wslides_lesson_aside_list position-relative bg-white border-bottom mt-4">
         <div class="bg-100 text-600 h6 my-0 text-decoration-none border-bottom d-flex align-items-center justify-content-between">
             <span class="p-2">Course content</span>
-            <a href="#collapse_slide_aside" data-toggle="collapse" class="d-lg-none p-2 text-decoration-none o_wslides_lesson_aside_collapse">
+            <a href="#collapse_slide_aside" data-bs-toggle="collapse" class="d-lg-none p-2 text-decoration-none o_wslides_lesson_aside_collapse">
                 <i class="fa fa-chevron-down d-lg-none"/>
             </a>
         </div>
@@ -134,8 +134,8 @@
 <template id="slide_aside_training_category" name="Category item for the slide detailed view list">
     <t t-if="category" t-set="category" t-value="category.get('category')"/>
     <li class="o_wslides_fs_sidebar_section mt-2">
-        <a t-att-href="('#collapse-%s') % (category.id if category else 0)" data-toggle="collapse" role="button" aria-expanded="true"
-            class="o_wslides_lesson_aside_list_link pl-2 text-600 text-uppercase text-decoration-none p-1 small d-block"
+        <a t-att-href="('#collapse-%s') % (category.id if category else 0)" data-bs-toggle="collapse" role="button" aria-expanded="true"
+            class="o_wslides_lesson_aside_list_link ps-2 text-600 text-uppercase text-decoration-none p-1 small d-block"
             t-att-aria-controls="('collapse-%s') % (category.id if category else 0)">
             <t t-if="category">
                 <b t-field="category.name"/>
@@ -159,15 +159,15 @@
                             <t t-set="slide_completed" t-value="channel_progress[aside_slide.id].get('completed')"/>
                         </t>
                         <a t-att-href="'/slides/slide/%s' % (slug(aside_slide)) if can_access else '#'"
-                            t-attf-class="d-flex align-items-center text-decoration-none mw-100 overflow-hidden ml-2">
+                            t-attf-class="d-flex align-items-center text-decoration-none mw-100 overflow-hidden ms-2">
                             <t t-call="website_slides.slide_icon">
                                 <t t-set="slide" t-value="aside_slide"/>
                             </t>
                             <div class="o_wslides_lesson_link_name text-truncate" t-att-title="aside_slide.name">
-                                <span t-esc="aside_slide.name" class="mr-2 text-truncate"/>
+                                <span t-esc="aside_slide.name" class="me-2 text-truncate"/>
                             </div>
-                            <div class="ml-auto" t-if="aside_slide.question_ids">
-                                <span t-att-class="'badge badge-pill %s' % ('badge-success' if channel_progress[aside_slide.id].get('completed') else 'badge-light text-600')">
+                            <div class="ms-auto" t-if="aside_slide.question_ids">
+                                <span t-att-class="'badge rounded-pill %s' % ('text-bg-success' if channel_progress[aside_slide.id].get('completed') else 'text-bg-light text-600')">
                                     <t t-esc="channel_progress[aside_slide.id].get('quiz_karma_won') if channel_progress[aside_slide.id].get('completed') else channel_progress[aside_slide.id].get('quiz_karma_gain')"/> xp
                                 </span>
                             </div>
@@ -176,27 +176,27 @@
                     <ul t-if="aside_slide._has_additional_resources() or aside_slide.question_ids" class="list-group px-2 mb-1 list-unstyled">
                         <t t-if="can_access_channel">
                             <t t-foreach="aside_slide.slide_resource_ids" t-as="resource" t-if="resource.resource_type == 'url'">
-                                <li class="pl-4">
+                                <li class="ps-4">
                                     <a t-if="can_access" t-att-href="resource.link" target="new" class="text-decoration-none small">
-                                        <i class="fa fa-link mr-1"/><span t-field="resource.name"/>
+                                        <i class="fa fa-link me-1"/><span t-field="resource.name"/>
                                     </a>
                                 </li>
                             </t>
-                            <div class="o_wslides_js_course_join pl-4" t-if="aside_slide._has_additional_resources()">
+                            <div class="o_wslides_js_course_join ps-4" t-if="aside_slide._has_additional_resources()">
                                 <li t-foreach="aside_slide.slide_resource_ids" t-as="resource" t-if="resource.resource_type == 'file'">
                                     <a t-attf-href="/web/content/slide.slide.resource/#{resource.id}/data?download=true" class="text-decoration-none small">
-                                        <i class="fa fa-download mr-1"/><span t-field="resource.name"/>
+                                        <i class="fa fa-download me-1"/><span t-field="resource.name"/>
                                     </a>
                                 </li>
                             </div>
                         </t>
                         <div t-else="" class="o_wslides_js_course_join o_wslides_no_access">
                             <li t-if="aside_slide.channel_id.enroll == 'public'" class="text-decoration-none small">
-                                <i class="fa fa-download mr-1"/>
+                                <i class="fa fa-download me-1"/>
                                 <t t-call="website_slides.join_course_link"/>
                             </li>
                         </div>
-                        <li t-if="aside_slide.question_ids and aside_slide.slide_category != 'quiz'" class="pl-4">
+                        <li t-if="aside_slide.question_ids and aside_slide.slide_category != 'quiz'" class="ps-4">
                             <a t-if="can_access" t-att-href="'/slides/slide/%s#lessonQuiz' % (slug(aside_slide))"
                                 class="o_wslides_lesson_aside_list_link text-decoration-none small text-600">
                                 <i class="fa fa-flag text-warning"/> Quiz
@@ -220,7 +220,7 @@
             <div class="d-flex align-items-start">
                 <h1 class="h4 my-0 d-flex flex_row">
                     <t t-call="website_slides.slide_icon">
-                        <t t-set="icon_class" t-valuef="mr-2"/>
+                        <t t-set="icon_class" t-valuef="me-2"/>
                     </t>
                     <span t-field="slide.name"/>
                 </h1>
@@ -230,7 +230,7 @@
             <t t-set="quiz_karma_won" t-value="channel_progress[slide.id].get('quiz_karma_won', 0)"/>
             <t t-set="quiz_karma_gain" t-value="channel_progress[slide.id].get('quiz_karma_gain', 0)"/>
             <span t-if="slide.question_ids and (slide_completed or quiz_karma_gain)"
-                t-attf-class="mx-2 badge #{'badge-success' if slide_completed else 'badge-info'}">
+                t-attf-class="mx-2 badge #{'text-bg-success' if slide_completed else 'text-bg-info'}">
                 <span t-if="slide_completed">
                     <i class="fa fa-check-circle"/>
                     <t t-if="quiz_karma_won">
@@ -244,30 +244,30 @@
                 </t>
             </span>
             <div class="btn-group flex-grow-1 flex-sm-0" role="group" aria-label="Lesson Nav">
-                <a t-attf-class="o_wslides_nav_button btn btn-light border #{'disabled' if not previous_slide else ''} mr-2"
+                <a t-attf-class="o_wslides_nav_button btn btn-light border #{'disabled' if not previous_slide else ''} me-2"
                     role="button" t-att-aria-disabled="'disabled' if not previous_slide else None"
                     t-att-href="'/slides/slide/%s' % (slug(previous_slide)) if previous_slide else '#'">
-                    <i class="fa fa-chevron-left mr-2"></i> <span class="d-none d-sm-inline-block">Prev</span>
+                    <i class="fa fa-chevron-left me-2"></i> <span class="d-none d-sm-inline-block">Prev</span>
                 </a>
                 <t t-if="slide.channel_id.channel_type == 'documentation' and slide.channel_id.is_member">
                     <t t-set="is_quiz" t-value="slide.slide_category == 'quiz' or slide.question_ids"/>
                     <a t-if="slide_completed and slide.can_self_mark_uncompleted" role="button"
-                        class="o_wslides_undone_button btn btn-light border mr-2"
+                        class="o_wslides_undone_button btn btn-light border me-2"
                         t-attf-href="/slides/slide/#{slide.id}/set_uncompleted">
                         Mark To Do
                     </a>
                     <a t-elif="not slide_completed and is_quiz" role="button"
-                        class="o_wslides_done_button btn btn-primary border text-white mr-2"
+                        class="o_wslides_done_button btn btn-primary border text-white me-2"
                         href="#quiz_container">
                         Take Quiz
                     </a>
                     <a t-else="not slide_completed and slide.can_self_mark_completed" role="button"
-                        class="o_wslides_done_button btn btn-primary border text-white mr-2"
+                        class="o_wslides_done_button btn btn-primary border text-white me-2"
                         t-attf-href="/slides/slide/#{slide.id}/set_completed?next_slide_id=#{next_slide.id if next_slide else ''}">
                         Mark Done
                     </a>
                 </t>
-                <div t-if="slide.channel_id.channel_type == 'documentation' and not slide.channel_id.is_member" class="mr-2">
+                <div t-if="slide.channel_id.channel_type == 'documentation' and not slide.channel_id.is_member" class="me-2">
                     <t t-call="website_slides.course_join">
                         <t t-set="channel" t-value="slide.channel_id"/>
                     </t>
@@ -275,27 +275,27 @@
                 <a t-attf-class="o_wslides_nav_button btn btn-light border #{'disabled' if not next_slide else ''}"
                     role="button" t-att-aria-disabled="'disabled' if not next_slide else None"
                     t-att-href="'/slides/slide/%s' % (slug(next_slide)) if next_slide else '#'">
-                    <span class="d-none d-sm-inline-block">Next</span> <i class="fa fa-chevron-right ml-2"></i>
+                    <span class="d-none d-sm-inline-block">Next</span> <i class="fa fa-chevron-right ms-2"></i>
                 </a>
             </div>
-            <a class="btn btn-light border ml-2" role="button" t-att-href="'/slides/slide/%s?fullscreen=1' % (slug(slide))">
-                <i class="fa fa-desktop mr-2"/>
+            <a class="btn btn-light border ms-2" role="button" t-att-href="'/slides/slide/%s?fullscreen=1' % (slug(slide))">
+                <i class="fa fa-desktop me-2"/>
                 <span class="d-none d-sm-inline-block">Fullscreen</span>
             </a>
         </div>
     </div>
     <div t-if="slide.tag_ids" class="pb-2">
         <t t-foreach="slide.tag_ids" t-as="tag">
-            <a t-att-href="'/slides/%s/tag/%s' % (slug(slide.channel_id), slug(tag))" class="badge badge-info py-1 px-2" t-esc="tag.name"/>
+            <a t-att-href="'/slides/%s/tag/%s' % (slug(slide.channel_id), slug(tag))" class="badge text-bg-info py-1 px-2" t-esc="tag.name"/>
         </t>
     </div>
     <div class="o_wslides_lesson_content_type">
         <img t-if="slide.slide_category == 'infographic'"
             t-att-src="website.image_url(slide, 'image_1024')" class="img-fluid" style="width:100%" t-att-alt="slide.name"/>
-        <div t-if="slide.slide_category == 'document'" class="embed-responsive embed-responsive-4by3 embed-responsive-item mb8" style="height: 600px;">
+        <div t-if="slide.slide_category == 'document'" class="ratio ratio-4x3 embed-responsive-item mb8" style="height: 600px;">
             <t t-out="slide.embed_code"/>
         </div>
-        <div t-if="slide.slide_category == 'video'" class="embed-responsive embed-responsive-16by9 embed-responsive-item mb8">
+        <div t-if="slide.slide_category == 'video'" class="ratio ratio-16x9 embed-responsive-item mb8">
             <t t-out="slide.embed_code"/>
         </div>
         <div t-if="slide.slide_category == 'article'">
@@ -311,22 +311,22 @@
     <div class="mb-5">
         <ul class="nav nav-tabs o_wslides_lesson_nav" role="tablist">
             <li class="nav-item">
-                <a href="#about" aria-controls="about" class="nav-link active" role="tab" data-toggle="tab">
+                <a href="#about" aria-controls="about" class="nav-link active" role="tab" data-bs-toggle="tab">
                     <i class="fa fa-home"></i> About
                 </a>
             </li>
             <li t-if="slide.channel_id.allow_comment" class="nav-item">
-                <a href="#discuss" aria-controls="discuss" class="nav-link" role="tab" data-toggle="tab">
+                <a href="#discuss" aria-controls="discuss" class="nav-link" role="tab" data-bs-toggle="tab">
                     <i class="fa fa-comments"></i> Comments (<span t-esc="slide.comments_count"/>)
                 </a>
             </li>
             <li class="nav-item">
-                <a href="#statistic" aria-controls="statistic" class="nav-link" role="tab" data-toggle="tab">
+                <a href="#statistic" aria-controls="statistic" class="nav-link" role="tab" data-bs-toggle="tab">
                     <i class="fa fa-bar-chart"></i> Statistics
                 </a>
             </li>
             <li class="nav-item">
-                <a href="#share" aria-controls="share" class="nav-link" role="tab" data-toggle="tab">
+                <a href="#share" aria-controls="share" class="nav-link" role="tab" data-bs-toggle="tab">
                     <i class="fa fa-share-alt"></i> Share
                 </a>
             </li>
@@ -335,14 +335,14 @@
             <div role="tabpanel" t-att-class="not comments and 'tab-pane fade in show active' or 'tab-pane fade'" id="about">
                 <div t-field="slide.description"/>
                 <div t-if="slide.channel_id.allow_comment" class="d-flex">
-                    <span class="text-muted font-weight-bold mr-3">Rating</span>
-                    <div class="text-muted border-left pl-3">
-                        <div class="o_wslides_js_slide_like mr-2">
-                            <span t-attf-class="o_wslides_js_slide_like_up #{'disabled' if not slide.channel_id.can_vote else ''}" tabindex="0" data-toggle="popover" t-att-data-slide-id="slide.id" t-att-data-user-vote="slide.user_vote">
+                    <span class="text-muted fw-bold me-3">Rating</span>
+                    <div class="text-muted border-start ps-3">
+                        <div class="o_wslides_js_slide_like me-2">
+                            <span t-attf-class="o_wslides_js_slide_like_up #{'disabled' if not slide.channel_id.can_vote else ''}" tabindex="0" data-bs-toggle="popover" t-att-data-slide-id="slide.id" t-att-data-user-vote="slide.user_vote">
                                 <i t-attf-class="fa fa-1x #{'fa-thumbs-up' if slide.user_vote == 1 else 'fa-thumbs-o-up'}" role="img" aria-label="Likes" title="Like"/>
                                 <span t-field="slide.likes" t-options="{'format_decimalized_number': True}"/>
                             </span>
-                            <span t-attf-class="o_wslides_js_slide_like_down ml-3 #{'disabled' if not slide.channel_id.can_vote else ''}" tabindex="0" data-toggle="popover" t-att-data-slide-id="slide.id" t-att-data-user-vote="slide.user_vote">
+                            <span t-attf-class="o_wslides_js_slide_like_down ms-3 #{'disabled' if not slide.channel_id.can_vote else ''}" tabindex="0" data-bs-toggle="popover" t-att-data-slide-id="slide.id" t-att-data-user-vote="slide.user_vote">
                                 <i t-attf-class="fa fa-1x #{'fa-thumbs-down' if slide.user_vote == -1 else 'fa-thumbs-o-down'}" role="img" aria-label="Dislikes" title="Dislike"/>
                                 <span t-field="slide.dislikes" t-options="{'format_decimalized_number': True}"/>
                             </span>
@@ -434,8 +434,8 @@
             <t t-if="can_access_channel">
                 <t t-set="links" t-value="slide.slide_resource_ids.filtered(lambda res: res.resource_type == 'url')"/>
                 <div class="col-12 col-md d-flex align-items-start mb-4 mb-md-0" t-if="links">
-                    <span class="text-muted font-weight-bold mr-3">External sources</span>
-                    <div class="text-muted mr-auto border-left pl-3">
+                    <span class="text-muted fw-bold me-3">External sources</span>
+                    <div class="text-muted me-auto border-start ps-3">
                         <t t-foreach="links" t-as="link">
                             <a t-att-href="link.link" t-esc="link.name"/><br />
                         </t>
@@ -444,10 +444,10 @@
                 <group>
                     <t t-set="files" t-value="slide.slide_resource_ids.filtered(lambda res: res.resource_type == 'file' and res.data)"/>
                     <div class="col-12 col-md d-flex align-items-start mb-4 mb-md-0 o_wslides_js_course_join" t-if="files">
-                        <span class="text-muted font-weight-bold mr-3">
+                        <span class="text-muted fw-bold me-3">
                             Additional Resources
                         </span>
-                        <div class="text-muted mr-auto border-left pl-3">
+                        <div class="text-muted me-auto border-start ps-3">
                             <t t-foreach="slide.slide_resource_ids" t-as="resource" t-if="resource.resource_type == 'file' and resource.data">
                                 <a t-attf-href="/web/content/slide.slide.resource/#{resource.id}/data?download=true" t-esc="resource.name"/><br />
                             </t>
@@ -456,11 +456,11 @@
                 </group>
             </t>
             <t t-else="">
-                <span t-if="slide.is_preview or slide.channel_id.enroll in ['private', 'payment']" class="text-muted font-weight-bold mr-3">
+                <span t-if="slide.is_preview or slide.channel_id.enroll in ['private', 'payment']" class="text-muted fw-bold me-3">
                     Additional Resources
                 </span>
                 <div class="o_wslides_js_course_join o_wslides_no_access">
-                    <div t-if="slide.channel_id.enroll == 'public'" class="text-muted mr-auto border-left pl-3">
+                    <div t-if="slide.channel_id.enroll == 'public'" class="text-muted me-auto border-start ps-3">
                         <t t-call="website_slides.join_course_link"/>
                     </div>
                 </div>
@@ -506,13 +506,13 @@
         <div class="row d-flex mb-2 mx-0">
             <div class="h4">
                 <small class="text-muted">
-                    <i class="o_wslides_js_quiz_icon o_wslides_js_quiz_sequence_handler fa fa-bars mr-1 text-muted" t-if="slide.channel_id.can_upload and not slide_completed" />
+                    <i class="o_wslides_js_quiz_icon o_wslides_js_quiz_sequence_handler fa fa-bars me-1 text-muted" t-if="slide.channel_id.can_upload and not slide_completed" />
                     <t t-if="question_index != NoneType"><span class="o_wslides_quiz_question_sequence" t-esc="question_index+1"/>.</t>
                     <t t-else=""><span class="o_wslides_quiz_question_sequence" t-esc="question['sequence']"/>.</t>
                 </small>
                 <span t-esc="question['question']"/>
             </div>
-            <div class="ml-auto o_wslides_js_quiz_edit_del" t-if="slide.channel_id.can_upload and not slide_completed" >
+            <div class="ms-auto o_wslides_js_quiz_edit_del" t-if="slide.channel_id.can_upload and not slide_completed" >
                 <i class="o_wslides_js_quiz_icon o_wslides_js_quiz_edit_question fa fa-pencil-square-o p-1 text-muted"></i>
                 <i class="o_wslides_js_quiz_icon o_wslides_js_quiz_delete_question fa fa-trash p-1 text-muted"></i>
             </div>
@@ -522,7 +522,7 @@
                 <a t-att-data-answer-id="answer['id']" href="#"
                     t-att-data-text="answer['text_value']" t-att-data-is-correct="answer['is_correct']" t-att-data-comment="answer['comment']"
                     t-att-class="'o_wslides_quiz_answer list-group-item list-group-item-action d-flex align-items-center %s' % ('list-group-item-success' if slide_completed and answer['is_correct'] else '')">
-                    <label class="my-0 d-flex align-items-center justify-content-center mr-2">
+                    <label class="my-0 d-flex align-items-center justify-content-center me-2">
                         <input type="radio"
                             t-att-name="question['id']"
                             t-att-value="answer['id']"
@@ -546,11 +546,11 @@
 <template id="lesson_content_quiz_add_buttons" name="Lesson: Quiz Add Buttons template">
     <div class="o_wslides_js_lesson_quiz_new_question mt-3">
         <a t-attf-class="o_wslides_js_quiz_add o_wslides_js_quiz_add_quiz btn btn-light border #{'d-none ' if slide.question_ids else ''}" role="button">
-            <i class="fa fa-plus mr-2"/>
+            <i class="fa fa-plus me-2"/>
             <span>Add Quiz</span>
         </a>
-        <a t-attf-class="o_wslides_js_quiz_add o_wslides_js_quiz_add_question btn btn-light border ml-3 #{'' if slide.question_ids else 'd-none '}" role="button">
-            <i class="fa fa-plus mr-2"/>
+        <a t-attf-class="o_wslides_js_quiz_add o_wslides_js_quiz_add_question btn btn-light border ms-3 #{'' if slide.question_ids else 'd-none '}" role="button">
+            <i class="fa fa-plus me-2"/>
             <span>Add Question</span>
         </a>
     </div>
@@ -566,7 +566,7 @@
                 <button class="btn btn-primary" type="button"
                     data-loading-text="Sending..."
                     t-attf-data-slide-id="#{slide.id}"
-                    style="border-top-right-radius: 4px;border-bottom-right-radius: 4px;">
+                    style="border-top-end-radius: 4px;border-bottom-end-radius: 4px;">
                     <i class="fa fa-envelope"/> Send Email
                 </button>
             </div>
@@ -574,7 +574,7 @@
         </form>
     </div>
     <div t-if="is_public_user" class="alert alert-info d-inline-block">
-        <p class="mb-0">Please <a t-attf-href="/web?redirect=#{request.httprequest.url}" class="font-weight-bold"> login </a> to share this <t t-esc="slide.slide_category"/> by email.</p>
+        <p class="mb-0">Please <a t-attf-href="/web?redirect=#{request.httprequest.url}" class="fw-bold"> login </a> to share this <t t-esc="slide.slide_category"/> by email.</p>
     </div>
 </template>
 
diff --git a/addons/website_slides/views/website_slides_templates_lesson_embed.xml b/addons/website_slides/views/website_slides_templates_lesson_embed.xml
index 6a8251f04d0..55c47fa46bf 100644
--- a/addons/website_slides/views/website_slides_templates_lesson_embed.xml
+++ b/addons/website_slides/views/website_slides_templates_lesson_embed.xml
@@ -28,7 +28,7 @@
                                         </div>
                                     </div>
                                     <div class="col flex-grow-0 d-flex text-nowrap small">
-                                        <a class="oe_slide_js_embed_option_link" href="#" data-toggle="modal" t-attf-data-target="#slideChannelShareModal_{{slide.id}}">
+                                        <a class="oe_slide_js_embed_option_link" href="#" data-bs-toggle="modal" t-attf-data-bs-target="#slideChannelShareModal_{{slide.id}}">
                                             <i class="fa fa-share-alt" aria-label="Share" title="Share"/>
                                             Share
                                         </a>
@@ -55,7 +55,7 @@
                                     <t t-foreach="related_slides" t-as="suggest_slide">
                                         <div class="col-6 col-md-4 col-lg-3 oe_slides_suggestion_media">
                                             <div class="card mb-3">
-                                                <a t-att-href="suggest_slide.website_url" target="_new" class="card-img-top embed-responsive embed-responsive-16by9">
+                                                <a t-att-href="suggest_slide.website_url" target="_new" class="card-img-top ratio ratio-16x9">
                                                     <img t-att-src="website.image_url(suggest_slide, 'image_1024')" class="card-img-top embed-responsive-item" t-att-alt="suggest_slide.name"/>
                                                 </a>
                                                 <div class="card-body">
@@ -75,7 +75,7 @@
                                 <div id="PDFViewerLoader" class="oe_slides_loader mt-3 mx-2 w-100">
                                     <div class="toast show mx-auto">
                                         <div class="toast-header">
-                                            <i class="fa fa-circle-o-notch fa-spin mr-2"/><b>Loading...</b>
+                                            <i class="fa fa-circle-o-notch fa-spin me-2"/><b>Loading...</b>
                                         </div>
                                         <div class="toast-body p-0">
                                             <img class="img-fluid w-100" t-att-src="website.image_url(slide, 'image_256')"/>
@@ -97,7 +97,7 @@
                                             <input type="number" class="form-control text-center" id="page_number" style="min-width: 60px"/>
                                             <span class="input-group-text" id="page_count"/>
                                         </div>
-                                        <span id="zoomout" class="d-none d-sm-inline ml-2 mr-2" title="Zoom out" aria-label="Zoom out" role="button">
+                                        <span id="zoomout" class="d-none d-sm-inline ms-2 me-2" title="Zoom out" aria-label="Zoom out" role="button">
                                             <i class="fa fa-search-minus" />
                                         </span>
                                         <span id="zoomin" class="d-none d-sm-inline" title="Zoom in" aria-label="Zoom in" role="button">
@@ -105,17 +105,17 @@
                                         </span>
                                     </div>
                                     <div class="col text-center">
-                                        <span id="first" class="mr-1 mr-sm-2" title="First slide" aria-label="First slide" role="button"><i class="fa fa-step-backward"/></span>
+                                        <span id="first" class="me-1 me-sm-2" title="First slide" aria-label="First slide" role="button"><i class="fa fa-step-backward"/></span>
                                         <span id="previous" class="mx-1 mx-sm-2" title="Previous slide" aria-label="Previous slide" role="button"><i class="fa fa-arrow-circle-left"/></span>
                                         <span id="next" class="mx-1 mx-sm-2" title="Next slide" aria-label="Next slide" role="button"><i class="fa fa-arrow-circle-right"/></span>
                                         <span id="last" class="mx-1 mx-sm-2" title="Last slide" aria-label="Last slide" role="button"><i class="fa fa-step-forward"/></span>
                                         <a t-if="slide.slide_resource_downloadable" id="download" t-attf-href="/web/content/slide.slide/#{slide.id}/binary_content?download=true"
-                                           class="ml-1 ml-sm-2" title="Download Content" aria-label="Download" role="button">
+                                           class="ms-1 ms-sm-2" title="Download Content" aria-label="Download" role="button">
                                             <i class="fa fa-download" />
                                         </a>
                                     </div>
-                                    <div class="col-3 text-right flex-grow-0">
-                                        <span id="fullscreen" class="ml-1 ml-sm-2"
+                                    <div class="col-3 text-end flex-grow-0">
+                                        <span id="fullscreen" class="ms-1 ms-sm-2"
                                            title="View fullscreen" aria-label="Fullscreen" role="button">
                                             <i class="fa fa-arrows-alt"/>
                                         </span>
diff --git a/addons/website_slides/views/website_slides_templates_lesson_fullscreen.xml b/addons/website_slides/views/website_slides_templates_lesson_fullscreen.xml
index 9b9b6eb4f75..9d31944a93d 100644
--- a/addons/website_slides/views/website_slides_templates_lesson_fullscreen.xml
+++ b/addons/website_slides/views/website_slides_templates_lesson_fullscreen.xml
@@ -7,7 +7,7 @@
         <link rel="canonical" t-att-href="slide.website_url" />
     </t>
     <t t-call="website.layout">
-        <div class="o_wslides_fs_main d-flex flex-column font-weight-light"
+        <div class="o_wslides_fs_main d-flex flex-column fw-light"
             t-att-data-channel-id="slide.channel_id.id"
             t-att-data-channel-enroll="slide.channel_id.enroll"
             t-att-data-signup-allowed="signup_allowed"
@@ -16,7 +16,7 @@
             <div class="o_wslides_slide_fs_header d-flex flex-shrink-0 text-white">
                 <div class="d-flex">
                     <a class="o_wslides_fs_toggle_sidebar d-flex align-items-center px-3" href="#" title="Lessons">
-                        <i class="fa fa-bars"/><span class="d-none d-md-inline-block ml-1">Lessons</span>
+                        <i class="fa fa-bars"/><span class="d-none d-md-inline-block ms-1">Lessons</span>
                     </a>
                     <a class="o_wslides_fs_review d-flex align-items-center" title="Reviews" t-if="slide.channel_id.allow_comment">
                         <t t-call="portal_rating.rating_stars_static_popup_composer">
@@ -32,22 +32,22 @@
                             <t t-set="default_attachment_ids" t-value="last_message_attachment_ids"/>
                             <t t-set="force_submit_url" t-value="'/slides/mail/update_comment' if last_message_id else False"/>
                             <t t-set="disable_composer" t-value="not channel.can_review"/>
-                            <t t-set="_link_btn_classes" t-value="'d-inline-block text-white font-weight-light shadow-none'"/>
+                            <t t-set="_link_btn_classes" t-value="'d-inline-block text-white fw-light shadow-none'"/>
                             <t t-set="icon" t-value="'fa fa-pencil'"/>
                             <t t-set="_text_classes" t-value="'d-none d-md-inline-block'"/>
                             <t t-set="hide_rating_avg" t-value="True"/>
                         </t>
                     </a>
                     <a class="o_wslides_fs_share d-flex align-items-center px-3" href="#" title="Share">
-                        <i class="fa fa-share-alt"/><span class="d-none d-md-inline-block ml-1">Share</span>
+                        <i class="fa fa-share-alt"/><span class="d-none d-md-inline-block ms-1">Share</span>
                     </a>
                 </div>
-                <div class="d-flex ml-auto">
+                <div class="d-flex ms-auto">
                     <a class="d-flex align-items-center px-3 o_wslides_fs_exit_fullscreen" t-attf-href="/slides/slide/#{slug(slide)}">
-                        <i class="fa fa-sign-out"/><span class="d-none d-md-inline-block ml-1">Exit Fullscreen</span>
+                        <i class="fa fa-sign-out"/><span class="d-none d-md-inline-block ms-1">Exit Fullscreen</span>
                     </a>
                     <a class="d-flex align-items-center px-3" t-attf-href="/slides/#{slug(slide.channel_id)}">
-                        <i class="fa fa-home"/><span class="d-none d-md-inline-block ml-1">Back to course</span>
+                        <i class="fa fa-home"/><span class="d-none d-md-inline-block ms-1">Back to course</span>
                     </a>
                 </div>
             </div>
@@ -62,14 +62,14 @@
                                 <span t-field="slide.channel_id.name"/>
                             </a>
                             <div t-if="not is_public_user">
-                                <span t-attf-class="o_wslides_channel_completion_completed badge badge-pill badge-success py-1 px-2 #{'d-none' if not slide.channel_id.completed else ''}">
+                                <span t-attf-class="o_wslides_channel_completion_completed badge rounded-pill text-bg-success py-1 px-2 #{'d-none' if not slide.channel_id.completed else ''}">
                                     <i class="fa fa-check"/> Completed
                                 </span>
                                 <div t-attf-class="o_wslides_channel_completion_progressbar #{'d-none' if slide.channel_id.completed else 'd-flex'} w-100 align-items-center">
                                     <div class="progress flex-grow-1 bg-black-50" style="height: 6px;">
                                         <div class="progress-bar" role="progressbar" t-attf-style="width: #{slide.channel_id.completion}%" t-att-aria-valuenow="slide.channel_id.completion" aria-valuemin="0" aria-valuemax="100"></div>
                                     </div>
-                                    <div class="ml-3 small">
+                                    <div class="ms-3 small">
                                         <span class="o_wslides_progress_percentage" t-esc="slide.channel_id.completion"/> %
                                     </div>
                                 </div>
@@ -97,7 +97,7 @@
 <template id="slide_fullscreen_sidebar_category" name="Slides category template for fullscreen view side bar">
     <t t-if="category" t-set="category" t-value="category.get('category')"/>
     <li class="o_wslides_fs_sidebar_section py-2 px-3">
-        <a t-if="category" class="text-uppercase text-500 py-1 small d-block" t-attf-id="category-collapse-#{category.id if category else 0}" data-toggle="collapse" role="button" aria-expanded="true" t-att-href="('#collapse-%s') % (category.id if category else 0)" t-attf-aria-controls="collapse-#{category.id if category else 0}">
+        <a t-if="category" class="text-uppercase text-500 py-1 small d-block" t-attf-id="category-collapse-#{category.id if category else 0}" data-bs-toggle="collapse" role="button" aria-expanded="true" t-att-href="('#collapse-%s') % (category.id if category else 0)" t-attf-aria-controls="collapse-#{category.id if category else 0}">
             <b t-field="category.name"/>
         </a>
         <ul class="o_wslides_fs_sidebar_section_slides collapse show position-relative px-0 pb-1 my-0 mx-n3" t-att-id="('collapse-%s') % (category.id if category else 0)">
@@ -123,17 +123,17 @@
                     t-att-data-session-answers="session_answers"
                     t-att-data-website-share-url="slide.website_share_url">
                     <t t-call="website_slides.slide_sidebar_done_button"/>
-                    <div class="ml-2">
+                    <div class="ms-2">
                         <a t-if="can_access" class="d-block" href="#">
                             <div class="d-flex ">
-                                <t t-set="icon_class" t-value="'mr-2'"/>
+                                <t t-set="icon_class" t-value="'me-2'"/>
                                 <t t-call="website_slides.slide_icon"/>
                                 <div class="o_wslides_fs_slide_name" t-esc="slide.name"/>
                             </div>
                         </a>
                         <span t-else="" class="d-block" href="#">
                             <div class="d-flex ">
-                                <t t-set="icon_class" t-value="'mr-2 text-600'"/>
+                                <t t-set="icon_class" t-value="'me-2 text-600'"/>
                                 <t t-call="website_slides.slide_icon"/>
                                 <div class="o_wslides_fs_slide_name text-600" t-esc="slide.name"/>
                             </div>
@@ -141,27 +141,27 @@
                         <ul class="list-unstyled w-100 pt-2 small" t-if="slide._has_additional_resources() or (slide.question_ids and not slide.slide_category =='quiz')" >
                             <t t-if="can_access_channel">
                                 <t t-set="links" t-value="slide.slide_resource_ids.filtered(lambda res: res.resource_type == 'url')"/>
-                                <li t-foreach="links" t-as="link" class="pl-0 mb-1">
+                                <li t-foreach="links" t-as="link" class="ps-0 mb-1">
                                     <a t-if="can_access" class="o_wslides_fs_slide_link" t-att-href="link.link" target="_blank">
-                                        <i class="fa fa-link mr-2"/><span t-esc="link.name"/>
+                                        <i class="fa fa-link me-2"/><span t-esc="link.name"/>
                                     </a>
                                 </li>
-                                <div class="o_wslides_js_course_join pl-0" t-if="slide._has_additional_resources('file')">
+                                <div class="o_wslides_js_course_join ps-0" t-if="slide._has_additional_resources('file')">
                                     <t t-set="resources" t-value="slide.slide_resource_ids.filtered(lambda res: res.resource_type == 'file')"/>
                                     <li t-foreach="resources" t-as="resource" class="mb-1">
                                         <a class="o_wslides_fs_slide_link" t-attf-href="/web/content/slide.slide.resource/#{resource.id}/data?download=true">
-                                            <i class="fa fa-download mr-2"/><span t-esc="resource.name"/>
+                                            <i class="fa fa-download me-2"/><span t-esc="resource.name"/>
                                         </a>
                                     </li>
                                 </div>
                             </t>
-                            <div t-else="" class="o_wslides_js_course_join o_wslides_no_access pl-0">
+                            <div t-else="" class="o_wslides_js_course_join o_wslides_no_access ps-0">
                                 <li t-if="slide.channel_id.enroll == 'public'" class="o_wslides_fs_slide_link mb-1">
-                                    <i class="fa fa-download mr-1"/>
+                                    <i class="fa fa-download me-1"/>
                                     <t t-call="website_slides.join_course_link"/>
                                 </li>
                             </div>
-                            <li class="o_wslides_fs_sidebar_list_item pl-0 mb-1" t-if="slide.question_ids and not slide.slide_category == 'quiz'"
+                            <li class="o_wslides_fs_sidebar_list_item ps-0 mb-1" t-if="slide.question_ids and not slide.slide_category == 'quiz'"
                                 t-att-data-id="slide.id"
                                 t-att-data-can-access="can_access"
                                 t-att-data-video-source-type="slide.video_source_type"
@@ -177,10 +177,10 @@
                                 t-att-data-session-answers="session_answers"
                                 t-att-data-website-share-url="slide.website_share_url">
                                 <a t-if="can_access" class="o_wslides_fs_slide_quiz o_wslides_fs_slide_name" href="#" t-att-index="i">
-                                    <i class="fa fa-flag-checkered text-warning mr-2"/>Quiz
+                                    <i class="fa fa-flag-checkered text-warning me-2"/>Quiz
                                 </a>
                                 <span t-else="" class="text-600">
-                                    <i class="fa fa-flag-checkered text-warning mr-2"/>Quiz
+                                    <i class="fa fa-flag-checkered text-warning me-2"/>Quiz
                                 </span>
                             </li>
                         </ul>
diff --git a/addons/website_slides/views/website_slides_templates_profile.xml b/addons/website_slides/views/website_slides_templates_profile.xml
index 6a9247dcdd5..9c11eab76cf 100644
--- a/addons/website_slides/views/website_slides_templates_profile.xml
+++ b/addons/website_slides/views/website_slides_templates_profile.xml
@@ -18,8 +18,8 @@
                         <t t-set="courses" t-value="courses_completed"></t>
                     </t>
                     <div t-else="" class="text-muted d-inline-block">No completed courses yet!</div>
-                    <div class="text-right d-inline-block pull-right">
-                        <a href="/slides/all" class="btn btn-link btn-sm"><i class="fa fa-arrow-right mr-1"/>All Courses</a>
+                    <div class="text-end d-inline-block pull-right">
+                        <a href="/slides/all" class="btn btn-link btn-sm"><i class="fa fa-arrow-right me-1"/>All Courses</a>
                     </div>
                 </div>
                 <div class="mb32">
@@ -40,9 +40,9 @@
                     <div class="card-body o_wprofile_slides_course_card_body p-0 d-flex"
                         t-attf-onclick="location.href='/slides/#{slug(course.channel_id)}';">
 
-                        <div t-if="course.channel_id.image_1024" class="pl-5 pr-4 rounded-left" t-attf-style="background-image: url(#{website.image_url(course.channel_id, 'image_1024')}); background-size: cover; background-position: center"/>
-                        <div t-else="" class="o_wslides_card_default_background pl-5 pr-4 rounded-left position-relative" style="opacity: 0.8">
-                            <i class="fa fa-graduation-cap fa-fw mr-2 mt-3 position-absolute text-white-75" style="right:0; top: 0"/>
+                        <div t-if="course.channel_id.image_1024" class="ps-5 pe-4 rounded-start" t-attf-style="background-image: url(#{website.image_url(course.channel_id, 'image_1024')}); background-size: cover; background-position: center"/>
+                        <div t-else="" class="o_wslides_card_default_background ps-5 pe-4 rounded-start position-relative" style="opacity: 0.8">
+                            <i class="fa fa-graduation-cap fa-fw me-2 mt-3 position-absolute text-white-75" style="right:0; top: 0"/>
                         </div>
 
                         <div class="p-2 w-100">
@@ -58,7 +58,7 @@
                                 <div class="progress flex-grow-1" style="height:0.5em">
                                     <div class="progress-bar bg-primary" t-att-style="'width: '+ str(course.completion)+'%'"/>
                                 </div>
-                                <small class="font-weight-bold pl-2"><span t-esc="course.completion"/> %</small>
+                                <small class="fw-bold ps-2"><span t-esc="course.completion"/> %</small>
                             </div>
                         </div>
                     </div>
diff --git a/addons/website_slides/views/website_slides_templates_utils.xml b/addons/website_slides/views/website_slides_templates_utils.xml
index dfc2a4e463b..5843fcc84d6 100644
--- a/addons/website_slides/views/website_slides_templates_utils.xml
+++ b/addons/website_slides/views/website_slides_templates_utils.xml
@@ -40,9 +40,7 @@
         <h5 class="modal-title" id="slideChannelShareModalLabel">
             Share
         </h5>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-            <span>×</span>
-        </button>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
     </div>
 </template>
 
diff --git a/addons/website_slides_forum/views/website_slides_forum_templates.xml b/addons/website_slides_forum/views/website_slides_forum_templates.xml
index a8c8e9d93e9..8c958134ad7 100644
--- a/addons/website_slides_forum/views/website_slides_forum_templates.xml
+++ b/addons/website_slides_forum/views/website_slides_forum_templates.xml
@@ -8,17 +8,17 @@
                         <ul class="nav nav-tabs o_wprofile_nav_tabs mt-0 flex-nowrap" role="tablist" id="profile_extra_info_tablist">
                             <li class="nav-item">
                                 <a t-att-href="'/slides/%s%s' % (slug(forum.slide_channel_id), '/%s' % slug(category) if category else '')"
-                                    t-att-class="'nav-link o_wprofile_navlink'" style="border-left: 0px">
+                                    t-att-class="'nav-link o_wprofile_navlink'" style="border-start: 0px">
                                     <i class="fa fa-home"/> Course</a>
                             </li>
                             <li t-if="forum.slide_channel_id.allow_comment" class="nav-item">
                                 <a t-att-href="'/slides/%s?active_tab=review' % (slug(forum.slide_channel_id))"
-                                    t-att-class="'nav-link o_wprofile_navlink'" style="border-left: 0px">
+                                    t-att-class="'nav-link o_wprofile_navlink'" style="border-start: 0px">
                                     Reviews<t t-if="forum.slide_channel_id.rating_count"> (<t t-esc="forum.slide_channel_id.rating_count"/>)</t>
                                 </a>
                             </li>
                             <li class="nav-item">
-                                <a t-att-href="'/forum/%s' % (slug(forum))" t-att-class="'nav-link active o_wprofile_navlink'" style="border-left: 0px">Forum</a>
+                                <a t-att-href="'/forum/%s' % (slug(forum))" t-att-class="'nav-link active o_wprofile_navlink'" style="border-start: 0px">Forum</a>
                             </li>
                         </ul>
                     </div>
@@ -66,7 +66,7 @@
 
                 <div class="d-flex border-bottom pb-1 pt-3 mb-3">
                     <h2 class="h4 mb-0 text-muted">Courses Discussions</h2>
-                    <div class="flex-grow-1 text-right">
+                    <div class="flex-grow-1 text-end">
                         <a href="/slides" title="See all Courses">Check our Courses <i class="fa fa-chevron-right"/></a>
                     </div>
                 </div>
diff --git a/addons/website_slides_forum/views/website_slides_templates.xml b/addons/website_slides_forum/views/website_slides_templates.xml
index bd915e85c04..978c5a72b12 100644
--- a/addons/website_slides_forum/views/website_slides_templates.xml
+++ b/addons/website_slides_forum/views/website_slides_templates.xml
@@ -13,7 +13,7 @@
     <template id="slide_fullscreen" inherit_id="website_slides.slide_fullscreen">
         <xpath expr="//a[hasclass('o_wslides_fs_review')]" position="after">
             <a t-if="slide.channel_id.forum_id" id="fullscreen_forum_button" class="d-flex align-items-center px-3" t-attf-href="/forum/#{slug(slide.channel_id.forum_id)}" target="new">
-                <i class="fa fa-comments"/><span class="ml-1 d-none d-md-inline-block">New Post</span>
+                <i class="fa fa-comments"/><span class="ms-1 d-none d-md-inline-block">New Post</span>
             </a>
         </xpath>
     </template>
diff --git a/addons/website_slides_survey/static/src/scss/website_slides_survey.scss b/addons/website_slides_survey/static/src/scss/website_slides_survey.scss
index a1d994e27ea..9f3eeec19af 100644
--- a/addons/website_slides_survey/static/src/scss/website_slides_survey.scss
+++ b/addons/website_slides_survey/static/src/scss/website_slides_survey.scss
@@ -4,7 +4,8 @@ $o_wss_color_2 : #485761;
 // General
 // **************************************************
 .o_wss_certification_icon {
-    @include size(1.4em, auto);
+    width: 1.4em;
+    height: auto;
 }
 
 // Course page
diff --git a/addons/website_slides_survey/static/src/xml/website_slides_fullscreen.xml b/addons/website_slides_survey/static/src/xml/website_slides_fullscreen.xml
index 7cac7d460c2..2771c902232 100644
--- a/addons/website_slides_survey/static/src/xml/website_slides_fullscreen.xml
+++ b/addons/website_slides_survey/static/src/xml/website_slides_fullscreen.xml
@@ -18,7 +18,7 @@
             </div>
             <div t-if="widget.get('slide').category === 'certification' &amp;&amp; widget.get('slide').canUpload" class="mt-3 h6">
                 <a t-att-href="'/web#id=' + widget.get('slide').certificationId + '&amp;model=survey.survey&amp;view_type=form'">
-                    <i class="fa fa-arrow-right mr-1"/>Add Questions to this Survey
+                    <i class="fa fa-arrow-right me-1"/>Add Questions to this Survey
                 </a>
             </div>
         </div>
@@ -26,7 +26,7 @@
 
     <t t-extend="website.slides.fullscreen.title">
         <t t-jquery=".o_wslides_fs_slide_title_span" t-operation="before">
-            <i t-if="widget.get('slide').category === 'certification'" class="fa fa-trophy mr-2 text"></i>
+            <i t-if="widget.get('slide').category === 'certification'" class="fa fa-trophy me-2 text"></i>
         </t>
     </t>
 </templates>
diff --git a/addons/website_slides_survey/views/survey_survey_views.xml b/addons/website_slides_survey/views/survey_survey_views.xml
index 12cd27c8685..e5954b80757 100644
--- a/addons/website_slides_survey/views/survey_survey_views.xml
+++ b/addons/website_slides_survey/views/survey_survey_views.xml
@@ -62,7 +62,7 @@
                     <a t-if="record.slide_channel_count.raw_value"
                        type="object"
                        name="action_survey_view_slide_channels"
-                       class="font-weight-bold">
+                       class="fw-bold">
                         <field name="slide_channel_count"/><br />
                         <span class="text-muted">Courses</span>
                     </a>
diff --git a/addons/website_slides_survey/views/survey_templates.xml b/addons/website_slides_survey/views/survey_templates.xml
index 49c08d93bd5..5e40a93a298 100644
--- a/addons/website_slides_survey/views/survey_templates.xml
+++ b/addons/website_slides_survey/views/survey_templates.xml
@@ -4,7 +4,7 @@
         <template id="survey_fill_form_done_inherit_website_slides" inherit_id="survey.survey_fill_form_done">
             <xpath expr="//div[hasclass('o_survey_finished')]//a[hasclass('btn-primary')][1]" position="after">
                 <t t-if="channel_id">
-                    <a role="button" class="mr-2 mt-2 mt-md-0 btn btn-secondary btn-lg" href="#" data-toggle="modal" t-attf-data-target="#slideChannelShareModal_{{channel_id.id}}">
+                    <a role="button" class="me-2 mt-2 mt-md-0 btn btn-secondary btn-lg" href="#" data-bs-toggle="modal" t-attf-data-bs-target="#slideChannelShareModal_{{channel_id.id}}">
                         <i class="fa fa-share-alt" aria-label="Share certification" title="Share certification"/>
                         Share your certification
                     </a>
diff --git a/addons/website_slides_survey/views/website_profile.xml b/addons/website_slides_survey/views/website_profile.xml
index 23de1351193..a9d580617ea 100644
--- a/addons/website_slides_survey/views/website_profile.xml
+++ b/addons/website_slides_survey/views/website_profile.xml
@@ -17,16 +17,16 @@
                <div class="col-12 col-lg-6" t-foreach="certificates" t-as="certificate">
                     <div class="card mb-2">
                         <div class="card-body o_wprofile_slides_course_card_body p-0 d-flex" t-attf-onclick="location.href='/slides/#{slug(certificate.slide_id.channel_id)}';">
-                            <div class="pl-5 pr-4 rounded-left" t-attf-style="background-image: url(#{website.image_url(certificate.slide_id, 'image_128')}); background-position: center"/>
+                            <div class="ps-5 pe-4 rounded-start" t-attf-style="background-image: url(#{website.image_url(certificate.slide_id, 'image_128')}); background-position: center"/>
                             <div class="p-2 w-100">
                                 <h5 class="mt-0 mb-1" t-esc="certificate.survey_id.title"/>
                                 <div t-if="user.id == uid">
-                                    <small class="font-weight-bold">Score : <span t-esc="certificate.scoring_percentage"/> %</small>
-                                    <div class="float-right">
-                                        <a role="button" class="float-right" t-att-href="'/survey/%s/get_certification' % certificate.survey_id.id">
+                                    <small class="fw-bold">Score : <span t-esc="certificate.scoring_percentage"/> %</small>
+                                    <div class="float-end">
+                                        <a role="button" class="float-end" t-att-href="'/survey/%s/get_certification' % certificate.survey_id.id">
                                             <i class="fa fa-download" aria-label="Download certification" title="Download Certification"/>
                                         </a>
-                                        <a role="button" class="mr-2" href="#"
+                                        <a role="button" class="me-2" href="#"
                                              t-attf-onclick="event.stopPropagation(); $('#slideChannelShareModal_#{certificate.slide_id.channel_id.id}').modal('show');">
                                             <i class="fa fa-share-alt" aria-label="Share" title="Share"/>
                                         </a>
@@ -44,8 +44,8 @@
         <t t-else="">
             <div class="text-muted d-inline-block">No certifications yet!</div>
         </t>
-        <div class="text-right d-inline-block pull-right">
-            <a href="/slides/all?slide_category=certification" class="btn btn-link btn-sm"><i class="fa fa-arrow-right mr-1"/>All Certifications</a>
+        <div class="text-end d-inline-block pull-right">
+            <a href="/slides/all?slide_category=certification" class="btn btn-link btn-sm"><i class="fa fa-arrow-right me-1"/>All Certifications</a>
         </div>
     </template>
 
@@ -57,8 +57,8 @@
 
     <template id="all_user_card" inherit_id="website_profile.all_user_card">
         <xpath expr="//td[hasclass('all_user_badge_count')]" position="after">
-            <td class="align-middle text-right pr-3 text-nowrap all_user_certification_count">
-                <b t-esc="user['certification_count']"/> <span class="text-muted small font-weight-bold">Certifications</span>
+            <td class="align-middle text-end pe-3 text-nowrap all_user_certification_count">
+                <b t-esc="user['certification_count']"/> <span class="text-muted small fw-bold">Certifications</span>
             </td>
         </xpath>
     </template>
@@ -82,7 +82,7 @@
                             <div class="col-6">
                                 <span t-field="badge.description"/>
                             </div>
-                            <div class="col-3 text-right">
+                            <div class="col-3 text-end">
                                 <b t-esc="badge.granted_users_count"/>
                                 <i class="text-muted"> awarded users</i>
                             </div>
diff --git a/addons/website_slides_survey/views/website_slides_templates_course.xml b/addons/website_slides_survey/views/website_slides_templates_course.xml
index 4f00d2940f3..e2804bd1823 100644
--- a/addons/website_slides_survey/views/website_slides_templates_course.xml
+++ b/addons/website_slides_survey/views/website_slides_templates_course.xml
@@ -12,7 +12,7 @@
                     <div>Begin your <b>certification</b> today!</div>
 
                     <a t-attf-href="#{'/slides_survey/slide/get_certification_url?slide_id=%s' %(first_slide.id) if first_slide.slide_category == 'certification' and channel.total_slides == 1 else '/slides/slide/%s?fullscreen=1' %(slug(first_slide))}" class="btn btn-success mt-2 mt-sm-0">
-                        <span>Start Now</span><i class="fa fa-chevron-right ml-2 align-middle"/>
+                        <span>Start Now</span><i class="fa fa-chevron-right ms-2 align-middle"/>
                     </a>
                 </div>
             </xpath>
diff --git a/addons/website_slides_survey/views/website_slides_templates_homepage.xml b/addons/website_slides_survey/views/website_slides_templates_homepage.xml
index 4c0875de564..3ed44e5bfce 100644
--- a/addons/website_slides_survey/views/website_slides_templates_homepage.xml
+++ b/addons/website_slides_survey/views/website_slides_templates_homepage.xml
@@ -5,7 +5,7 @@
             <xpath expr="//a[hasclass('o_wslides_home_all_slides')]" position="after">
                 <a class="nav-link nav-link d-flex" href="/slides/all?slide_category=certification">
                     <t t-call="website_slides_survey.o_wss_certification_icon"/>
-                    <span class="ml-1">Certifications</span>
+                    <span class="ms-1">Certifications</span>
                 </a>
             </xpath>
         </template>
diff --git a/addons/website_slides_survey/views/website_slides_templates_lesson.xml b/addons/website_slides_survey/views/website_slides_templates_lesson.xml
index f760936715c..ec4c8d7e021 100644
--- a/addons/website_slides_survey/views/website_slides_templates_lesson.xml
+++ b/addons/website_slides_survey/views/website_slides_templates_lesson.xml
@@ -22,21 +22,21 @@
                 </div>
                 <div t-if="slide.slide_category == 'certification' and slide.channel_id.can_upload" class="col mb8 d-flex justify-content-center">
                     <a class="my-4" t-att-href="'/web#id=' + str(slide.survey_id.id)  + '&amp;model=survey.survey&amp;view_type=form'">
-                        <i class="fa fa-arrow-right mr-1"/>Add Questions to this Survey
+                        <i class="fa fa-arrow-right me-1"/>Add Questions to this Survey
                     </a>
                 </div>
             </xpath>
             <xpath expr="//a[hasclass('o_wslides_done_button')][1]" position="after">
                 <a t-elif="not slide_completed and slide.slide_category == 'certification'"
                     role="button"
-                    t-attf-class="o_wslides_done_button btn btn-primary border text-white mr-2"
+                    t-attf-class="o_wslides_done_button btn btn-primary border text-white me-2"
                     href="#start_certification">
                     Take Quiz
                 </a>
             </xpath>
             <xpath expr="//a[hasclass('o_wslides_undone_button')][1]" position="after">
                 <a t-elif="slide_completed and slide.slide_category == 'certification'"
-                    class="o_wslides_undone_button btn btn-primary border text-white mr-2 disabled"
+                    class="o_wslides_undone_button btn btn-primary border text-white me-2 disabled"
                     aria-disabled="true" title="Certifications you have passed cannot be marked as not done">
                     Mark To Do
                 </a>
diff --git a/addons/website_twitter/views/res_config_settings_views.xml b/addons/website_twitter/views/res_config_settings_views.xml
index d5ef26bdc0a..b45925aa1d9 100644
--- a/addons/website_twitter/views/res_config_settings_views.xml
+++ b/addons/website_twitter/views/res_config_settings_views.xml
@@ -21,7 +21,7 @@
                                 <label class="col-lg-3 o_light_label" string="API secret" for="twitter_api_secret"/>
                                 <field name="twitter_api_secret" class="oe_inline"/>
                             </div>
-                            <a data-toggle="collapse" href="#" data-target="#twitter_tutorial" aria-label="Twitter tutorial">
+                            <a data-bs-toggle="collapse" href="#" data-bs-target="#twitter_tutorial" aria-label="Twitter tutorial">
                                 <i class="fa fa-arrow-right"/>
                                 Show me how to obtain the Twitter API key and Twitter API secret
                             </a>
diff --git a/odoo/addons/base/report/corporate_odt_header.xml b/odoo/addons/base/report/corporate_odt_header.xml
index b27eeda8ccb..b5ca4bafd96 100644
--- a/odoo/addons/base/report/corporate_odt_header.xml
+++ b/odoo/addons/base/report/corporate_odt_header.xml
@@ -58,11 +58,11 @@
 		</style:style>
 		<style:style style:name="Table_20_Heading" style:display-name="Table Heading" style:family="paragraph" style:parent-style-name="Table_20_Contents" style:class="extra">
 			<style:paragraph-properties fo:text-align="center" style:justify-single-word="false" text:number-lines="false" text:line-number="0"/>
-			<style:text-properties fo:font-weight="bold" style:font-weight-asian="bold" style:font-weight-complex="bold"/>
+			<style:text-properties fo:font-weight="bold" style:fw-asian="bold" style:fw-complex="bold"/>
 		</style:style>
 		<style:style style:name="Caption" style:family="paragraph" style:parent-style-name="Standard" style:class="extra">
 			<style:paragraph-properties fo:margin-top="0.212cm" fo:margin-bottom="0.212cm" text:number-lines="false" text:line-number="0"/>
-			<style:text-properties style:font-name="Times" fo:font-size="12pt" fo:font-style="italic" style:font-size-asian="12pt" style:font-style-asian="italic" style:font-size-complex="12pt" style:font-style-complex="italic"/>
+			<style:text-properties style:font-name="Times" fo:font-size="12pt" fo:font-style="italic" style:font-size-asian="12pt" style:fst-asian="italic" style:font-size-complex="12pt" style:fst-complex="italic"/>
 		</style:style>
 		<style:style style:name="Index" style:family="paragraph" style:parent-style-name="Standard" style:class="index">
 			<style:paragraph-properties text:number-lines="false" text:line-number="0"/>
@@ -120,7 +120,7 @@
 			<style:table-column-properties style:column-width="12.764cm" style:rel-column-width="49206*"/>
 		</style:style>
 		<style:style style:name="Table2.A1" style:family="table-cell">
-			<style:table-cell-properties style:vertical-align="bottom" fo:padding="0.097cm" fo:border-left="none" fo:border-right="none" fo:border-top="none" fo:border-bottom="0.018cm solid #000000"/>
+			<style:table-cell-properties style:vertical-align="bottom" fo:padding="0.097cm" fo:border-start="none" fo:border-end="none" fo:border-top="none" fo:border-bottom="0.018cm solid #000000"/>
 		</style:style>
 		<style:style style:name="Table3" style:family="table">
 			<style:table-properties style:width="7.936cm" table:align="left"/>
@@ -135,7 +135,7 @@
 			<style:table-cell-properties style:vertical-align="bottom" fo:padding="0.097cm" fo:border="none"/>
 		</style:style>
 		<style:style style:name="Table3.A2" style:family="table-cell">
-			<style:table-cell-properties style:vertical-align="bottom" fo:padding="0.097cm" fo:border-left="none" fo:border-right="none" fo:border-top="none" fo:border-bottom="0.018cm solid #000000"/>
+			<style:table-cell-properties style:vertical-align="bottom" fo:padding="0.097cm" fo:border-start="none" fo:border-end="none" fo:border-top="none" fo:border-bottom="0.018cm solid #000000"/>
 		</style:style>
 		<style:style style:name="Table1" style:family="table">
 			<style:table-properties style:width="16.999cm" table:align="margins"/>
@@ -144,7 +144,7 @@
 			<style:table-column-properties style:column-width="16.999cm" style:rel-column-width="65535*"/>
 		</style:style>
 		<style:style style:name="Table1.A1" style:family="table-cell">
-			<style:table-cell-properties fo:background-color="transparent" fo:padding="0.097cm" fo:border-left="none" fo:border-right="none" fo:border-top="0.018cm solid #000000" fo:border-bottom="none">
+			<style:table-cell-properties fo:background-color="transparent" fo:padding="0.097cm" fo:border-start="none" fo:border-end="none" fo:border-top="0.018cm solid #000000" fo:border-bottom="none">
 			<style:background-image/>
 			</style:table-cell-properties>
 		</style:style>
diff --git a/odoo/addons/base/report/corporate_sxw_header.xml b/odoo/addons/base/report/corporate_sxw_header.xml
index 2705f870372..d9da031c090 100644
--- a/odoo/addons/base/report/corporate_sxw_header.xml
+++ b/odoo/addons/base/report/corporate_sxw_header.xml
@@ -52,10 +52,10 @@
             <style:properties text:number-lines="false" text:line-number="0"/>
         </style:style>
         <style:style style:name="Table Heading" style:family="paragraph" style:parent-style-name="Table Contents" style:class="extra">
-            <style:properties fo:text-align="center" style:justify-single-word="false" text:number-lines="false" text:line-number="0" fo:font-weight="bold" style:font-weight-asian="bold" style:font-weight-complex="bold"/>
+            <style:properties fo:text-align="center" style:justify-single-word="false" text:number-lines="false" text:line-number="0" fo:font-weight="bold" style:fw-asian="bold" style:fw-complex="bold"/>
         </style:style>
         <style:style style:name="Caption" style:family="paragraph" style:parent-style-name="Standard" style:class="extra">
-            <style:properties fo:margin-top="0.212cm" fo:margin-bottom="0.212cm" text:number-lines="false" text:line-number="0" style:font-name="Times" fo:font-size="12pt" fo:font-style="italic" style:font-size-asian="12pt" style:font-style-asian="italic" style:font-size-complex="12pt" style:font-style-complex="italic"/>
+            <style:properties fo:margin-top="0.212cm" fo:margin-bottom="0.212cm" text:number-lines="false" text:line-number="0" style:font-name="Times" fo:font-size="12pt" fo:font-style="italic" style:font-size-asian="12pt" style:fst-asian="italic" style:font-size-complex="12pt" style:fst-complex="italic"/>
         </style:style>
         <style:style style:name="Index" style:family="paragraph" style:parent-style-name="Standard" style:class="index">
             <style:properties text:number-lines="false" text:line-number="0" style:font-name="Times" style:font-size-asian="12pt"/>
@@ -112,7 +112,7 @@
             <style:properties style:column-width="12.764cm" style:rel-column-width="49206*"/>
         </style:style>
         <style:style style:name="Table2.A1" style:family="table-cell">
-            <style:properties fo:vertical-align="bottom" fo:padding="0.097cm" fo:border-left="none" fo:border-right="none" fo:border-top="none" fo:border-bottom="0.018cm solid #000000"/>
+            <style:properties fo:vertical-align="bottom" fo:padding="0.097cm" fo:border-start="none" fo:border-end="none" fo:border-top="none" fo:border-bottom="0.018cm solid #000000"/>
         </style:style>
         <style:style style:name="Table3" style:family="table">
             <style:properties style:width="7.936cm" table:align="left"/>
@@ -127,7 +127,7 @@
             <style:properties fo:vertical-align="bottom" fo:padding="0.097cm" fo:border="none"/>
         </style:style>
         <style:style style:name="Table3.A2" style:family="table-cell">
-            <style:properties fo:vertical-align="bottom" fo:padding="0.097cm" fo:border-left="none" fo:border-right="none" fo:border-top="none" fo:border-bottom="0.018cm solid #000000"/>
+            <style:properties fo:vertical-align="bottom" fo:padding="0.097cm" fo:border-start="none" fo:border-end="none" fo:border-top="none" fo:border-bottom="0.018cm solid #000000"/>
         </style:style>
         <style:style style:name="Table1" style:family="table">
             <style:properties style:width="16.999cm" table:align="margins"/>
@@ -136,7 +136,7 @@
             <style:properties style:column-width="16.999cm" style:rel-column-width="65535*"/>
         </style:style>
         <style:style style:name="Table1.A1" style:family="table-cell">
-            <style:properties fo:background-color="transparent" fo:padding="0.097cm" fo:border-left="none" fo:border-right="none" fo:border-top="0.018cm solid #000000" fo:border-bottom="none">
+            <style:properties fo:background-color="transparent" fo:padding="0.097cm" fo:border-start="none" fo:border-end="none" fo:border-top="0.018cm solid #000000" fo:border-bottom="none">
                 <style:background-image/>
             </style:properties>
         </style:style>
diff --git a/odoo/addons/base/static/src/js/res_config_settings.js b/odoo/addons/base/static/src/js/res_config_settings.js
index efb3833290d..5de8b7521a8 100644
--- a/odoo/addons/base/static/src/js/res_config_settings.js
+++ b/odoo/addons/base/static/src/js/res_config_settings.js
@@ -33,7 +33,7 @@ var BaseSettingRenderer = FormRenderer.extend({
         return this._super.apply(this, arguments).then(function () {
             if (!self.$(".o_dirty_warning").length) {
                 self.$('.o_statusbar_buttons')
-                    .append($('<span/>', {text: _t("Unsaved changes"), class: 'text-muted ml-2 o_dirty_warning'}))
+                    .append($('<span/>', {text: _t("Unsaved changes"), class: 'text-muted ms-2 o_dirty_warning'}))
             }
         });
     },
diff --git a/odoo/addons/base/views/ir_module_views.xml b/odoo/addons/base/views/ir_module_views.xml
index b06ce6adef6..baae3cdaede 100644
--- a/odoo/addons/base/views/ir_module_views.xml
+++ b/odoo/addons/base/views/ir_module_views.xml
@@ -70,14 +70,14 @@
                             By <field name="author" class="oe_inline" placeholder="Author Name"/>
                         </h3>
                         <div>
-                            <button name="button_immediate_install" string="Install" attrs="{'invisible': ['|', ('to_buy','=',True), ('state','!=', 'uninstalled')]}" type="object" class="btn btn-primary mr-1"/>
-                            <a href="https://odoo.com/pricing?utm_source=db&amp;utm_medium=module#hosting=on_premise" target="_blank" class="btn btn-primary mr-1"
+                            <button name="button_immediate_install" string="Install" attrs="{'invisible': ['|', ('to_buy','=',True), ('state','!=', 'uninstalled')]}" type="object" class="btn btn-primary me-1"/>
+                            <a href="https://odoo.com/pricing?utm_source=db&amp;utm_medium=module#hosting=on_premise" target="_blank" class="btn btn-primary me-1"
                                attrs="{'invisible': ['|', ('to_buy','=',False), ('state', 'not in', ('uninstalled', 'uninstallable'))]}" role="button">Upgrade</a>
-                            <button name="button_immediate_upgrade" states="installed" string="Upgrade" type="object" class="btn btn-primary mr-1"/>
-                            <button name="button_uninstall_wizard" states="installed" string="Uninstall" type="object"  class="btn btn-secondary mr-1"/>
-                            <button name="button_uninstall_cancel" states="to remove" string="Cancel Uninstall" type="object" class="btn btn-secondary mr-1"/>
-                            <button name="button_upgrade_cancel" states="to upgrade" string="Cancel Upgrade" type="object" class="btn btn-secondary mr-1"/>
-                            <button name="button_install_cancel" states="to install" string="Cancel Install" type="object" class="btn btn-secondary mr-1"/>
+                            <button name="button_immediate_upgrade" states="installed" string="Upgrade" type="object" class="btn btn-primary me-1"/>
+                            <button name="button_uninstall_wizard" states="installed" string="Uninstall" type="object"  class="btn btn-secondary me-1"/>
+                            <button name="button_uninstall_cancel" states="to remove" string="Cancel Uninstall" type="object" class="btn btn-secondary me-1"/>
+                            <button name="button_upgrade_cancel" states="to upgrade" string="Cancel Upgrade" type="object" class="btn btn-secondary me-1"/>
+                            <button name="button_install_cancel" states="to install" string="Cancel Install" type="object" class="btn btn-secondary me-1"/>
                         </div>
                         <h6 class="text-muted mt-2" attrs="{'invisible': [('has_iap', '=', False)]}">Contains In-App Purchases</h6>
                     </div>
@@ -197,11 +197,11 @@
                             <code groups="base.group_no_one"><field name="name"/></code>
                           </p>
                           <div class="oe_module_action">
-                            <a t-att-href="record.website.raw_value" target="_blank" attrs="{'invisible':[('website', '=', '')]}" class="btn btn-sm btn-secondary float-right o-hidden-ios" role="button">Learn More</a>
-                            <a type="edit" class="btn btn-secondary btn-sm float-right" role="button" attrs="{'invisible': [('website', '&lt;&gt;', '')]}">Module Info</a>
+                            <a t-att-href="record.website.raw_value" target="_blank" attrs="{'invisible':[('website', '=', '')]}" class="btn btn-sm btn-secondary float-end o-hidden-ios" role="button">Learn More</a>
+                            <a type="edit" class="btn btn-secondary btn-sm float-end" role="button" attrs="{'invisible': [('website', '&lt;&gt;', '')]}">Module Info</a>
                             <button type="object" class="btn btn-primary btn-sm" name="button_immediate_install" states="uninstalled" t-if="! record.to_buy.raw_value">Install</button>
                             <a href="https://odoo.com/pricing?utm_source=db&amp;utm_medium=module#hosting=on_premise" target="_blank" class="btn btn-info btn-sm" states="uninstalled,uninstallable" t-if="record.to_buy.raw_value" role="button">Upgrade</a>
-                            <div t-if="installed" class="text-muted float-left">Installed</div>
+                            <div t-if="installed" class="text-muted float-start">Installed</div>
                             <button states="to remove" type="object" class="btn btn-sm btn-primary" name="button_uninstall_cancel">Cancel Uninstall</button>
                             <button states="to install" type="object" class="btn btn-sm btn-primary" name="button_install_cancel">Cancel Install</button>
                           </div>
diff --git a/odoo/addons/base/views/ir_rule_views.xml b/odoo/addons/base/views/ir_rule_views.xml
index 782a6461d89..5aa67fc5bb1 100644
--- a/odoo/addons/base/views/ir_rule_views.xml
+++ b/odoo/addons/base/views/ir_rule_views.xml
@@ -25,7 +25,7 @@
                         <field name="global"/>
                         <field name="groups" nolabel="1" colspan="4"/>
                     </group>
-                    <i class="fa fa-info fa-3x text-info float-left" role="img" aria-label="Info" title="Info"/>
+                    <i class="fa fa-info fa-3x text-info float-start" role="img" aria-label="Info" title="Info"/>
                     <h3>Interaction between rules</h3>
                     <div>
                       <p>
diff --git a/odoo/addons/base/views/onboarding_views.xml b/odoo/addons/base/views/onboarding_views.xml
index bb9fa4fe385..b47b0282246 100644
--- a/odoo/addons/base/views/onboarding_views.xml
+++ b/odoo/addons/base/views/onboarding_views.xml
@@ -6,18 +6,18 @@
                 <div class="modal-content">
                     <div class="modal-header">
                         <h5 class="modal-title">Remove Configuration Tips</h5>
-                        <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                     </div>
                     <div class="modal-body">
                         <p>Do you want to remove this configuration panel?</p>
                     </div>
                     <div class="modal-footer">
-                        <a type="action" class="btn btn-primary" data-dismiss="modal"
+                        <a type="action" class="btn btn-primary" data-bs-dismiss="modal"
                         data-o-hide-banner="true"
                         t-att-data-model="close_model" t-att-data-method="close_method">
                             Remove
                         </a>
-                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Discard</button>
+                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Discard</button>
                     </div>
                 </div>
             </div>
@@ -28,19 +28,19 @@
                  t-att-style="'background-image:url(' + bg_image + ')'">
 
                 <div class="o_onboarding_wrap py-5">
-                    <a href="#" data-toggle="modal" data-target=".o_onboarding_modal" class="o_onboarding_btn_close position-absolute top-0 end-0 py-2 px-3 h2 text-white" title="Close the onboarding panel"><i class="oi oi-close"/></a>
+                    <a href="#" data-bs-toggle="modal" data-bs-target=".o_onboarding_modal" class="o_onboarding_btn_close position-absolute top-0 end-0 py-2 px-3 h2 text-white" title="Close the onboarding panel"><i class="oi oi-close"/></a>
 
                     <div class="o_onboarding_steps d-flex" t-out="0"/>
 
                     <div t-if="state.get('onboarding_state') in ('done', 'just_done')"
                          t-att-state="state.get('onboarding_state')"
-                         class="o_onboarding_completed_message position-absolute end-0 bottom-0 left-0 border-bottom py-4 bg-white d-flex align-items-center justify-content-center">
+                         class="o_onboarding_completed_message position-absolute end-0 bottom-0 start-0 border-bottom py-4 bg-white d-flex align-items-center justify-content-center">
                         <span class="h3 m-0">
                             <i class="fa fa-check text-success me-3" />
                             <t t-if="text_completed" t-out="text_completed" />
                             <t t-else="">Nice work! Your configuration is done.</t>
                         </span>
-                        <a type="action" class="btn btn-primary ms-4" data-toggle="collapse" href=".o_onboarding_container" t-att-data-model="close_model" t-att-data-method="close_method">
+                        <a type="action" class="btn btn-primary ms-4" data-bs-toggle="collapse" href=".o_onboarding_container" t-att-data-model="close_model" t-att-data-method="close_method">
                             Close
                         </a>
                     </div>
diff --git a/odoo/addons/base/views/res_company_views.xml b/odoo/addons/base/views/res_company_views.xml
index 4418ccbacaf..f52bba23f85 100644
--- a/odoo/addons/base/views/res_company_views.xml
+++ b/odoo/addons/base/views/res_company_views.xml
@@ -39,7 +39,7 @@
                                     <field name="website" string="Website" widget="url" placeholder="e.g. https://www.odoo.com"/>
                                     <field name="parent_id"  groups="base.group_multi_company"/>
                                     <field name="sequence" invisible="1"/>
-                                    <field name="favicon" widget="image" class="float-left oe_avatar" groups="base.group_no_one"/>
+                                    <field name="favicon" widget="image" class="float-start oe_avatar" groups="base.group_no_one"/>
                                 </group>
                                 <group name="social_media"/>
                             </group>
diff --git a/odoo/addons/base/views/res_currency_views.xml b/odoo/addons/base/views/res_currency_views.xml
index 9f9efa2953e..7261e899bca 100644
--- a/odoo/addons/base/views/res_currency_views.xml
+++ b/odoo/addons/base/views/res_currency_views.xml
@@ -112,10 +112,10 @@
                                         <h3><t t-esc="record.name.value"/></h3>
                                     </div>
                                     <div class="col-5">
-                                        <span class="badge badge-pill"><t t-esc="record.symbol.value"/></span>
+                                        <span class="badge rounded-pill"><t t-esc="record.symbol.value"/></span>
                                     </div>
-                                    <div class="col-5 text-right">
-                                        <t t-if="! record.active.raw_value"><span class="badge badge-pill bg-light border">inactive</span></t>
+                                    <div class="col-5 text-end">
+                                        <t t-if="! record.active.raw_value"><span class="badge rounded-pill bg-light border">inactive</span></t>
                                     </div>
                                 </div>
                                 <div class="row">
diff --git a/odoo/addons/base/views/res_partner_views.xml b/odoo/addons/base/views/res_partner_views.xml
index 99638f989ef..d9224540baf 100644
--- a/odoo/addons/base/views/res_partner_views.xml
+++ b/odoo/addons/base/views/res_partner_views.xml
@@ -191,7 +191,7 @@
                     <group>
                         <group>
                             <span class="o_form_label o_td_label" name="address_name">
-                                <field name="type" attrs="{'invisible': [('is_company','=', True)], 'required': [('is_company','!=', True)], 'readonly': [('user_ids', '!=', [])]}" class="font-weight-bold"/>
+                                <field name="type" attrs="{'invisible': [('is_company','=', True)], 'required': [('is_company','!=', True)], 'readonly': [('user_ids', '!=', [])]}" class="fw-bold"/>
                                 <b attrs="{'invisible': [('is_company', '=', False)]}">Address</b>
                             </span>
                             <div class="o_address_format">
diff --git a/odoo/addons/base/views/res_users_views.xml b/odoo/addons/base/views/res_users_views.xml
index ccbe124555e..23cfb9eff48 100644
--- a/odoo/addons/base/views/res_users_views.xml
+++ b/odoo/addons/base/views/res_users_views.xml
@@ -204,7 +204,7 @@
                                 '&amp;', ('active', '=', True), ('active_partner', '=', False),
                             ]}"
                             role="alert">
-                          <a class="close" data-dismiss="alert" href="#">x</a>
+                          <a class="close" data-bs-dismiss="alert" href="#">x</a>
                           <div>
                             <strong>The contact linked to this user is still active</strong>
                           </div>
@@ -299,12 +299,12 @@
                                 </div>
                                 <div class="oe_kanban_details">
                                     <ul>
-                                        <li class="text-success float-right mb4" t-if="record.active.raw_value"><i class="fa fa-circle" role="img" aria-label="Ok" title="Ok"></i></li>
-                                        <li class="text-danger float-right mb4" t-if="!record.active.raw_value"><i class="fa fa-circle" role="img" aria-label="Invalid" title="Invalid"></i></li>
+                                        <li class="text-success float-end mb4" t-if="record.active.raw_value"><i class="fa fa-circle" role="img" aria-label="Ok" title="Ok"></i></li>
+                                        <li class="text-danger float-end mb4" t-if="!record.active.raw_value"><i class="fa fa-circle" role="img" aria-label="Invalid" title="Invalid"></i></li>
                                         <li class="mb4">
                                             <strong><field name="name"/></strong>
                                         </li>
-                                        <li class="badge badge-pill float-right mb4" t-if="record.lang.raw_value"><field name="lang"/></li>
+                                        <li class="badge rounded-pill float-end mb4" t-if="record.lang.raw_value"><field name="lang"/></li>
                                         <li class="mb4" t-if="record.login.raw_value" title="Login"><i class="fa fa-envelope" role="img" aria-label="Login"/> <field name="login"/></li>
                                     </ul>
                                 </div>
@@ -377,7 +377,7 @@
             <field name="arch" type="xml">
                 <form>
                     <sheet>
-                    <h3 class="font-weight-bold">
+                    <h3 class="fw-bold">
                         Name your key
                     </h3>
                     <p>Enter a description of and purpose for the key.</p>
@@ -402,7 +402,7 @@
             <field name="arch" type="xml">
                 <form>
                     <sheet>
-                        <h3 class="font-weight-bold">
+                        <h3 class="fw-bold">
                             Write down your key
                         </h3>
                         <p>
diff --git a/odoo/addons/base/wizard/base_language_install_views.xml b/odoo/addons/base/wizard/base_language_install_views.xml
index 6fecdbb482f..bd8146086ec 100644
--- a/odoo/addons/base/wizard/base_language_install_views.xml
+++ b/odoo/addons/base/wizard/base_language_install_views.xml
@@ -16,7 +16,7 @@
                     </group>
                     <footer>
                         <button name="reload" string="Close" type="object" class="btn-primary" data-hotkey="q"/>
-                        <button name="switch_lang" type="object" class="btn-primary ml-1" data-hotkey="w">
+                        <button name="switch_lang" type="object" class="btn-primary ms-1" data-hotkey="w">
                             Switch to <field name="first_lang_id" class="text-white" style="pointer-events: none;"/> &amp; Close
                         </button>
                     </footer>
diff --git a/odoo/addons/test_main_flows/static/tests/tours/main_flow.js b/odoo/addons/test_main_flows/static/tests/tours/main_flow.js
index 5496d3c55af..ca2156e2ff5 100644
--- a/odoo/addons/test_main_flows/static/tests/tours/main_flow.js
+++ b/odoo/addons/test_main_flows/static/tests/tours/main_flow.js
@@ -42,15 +42,15 @@ tour.stepUtils.openBuggerMenu("li.breadcrumb-item.active:contains('Quotations')"
     content: _t('Go to inventory tab'),
     position: 'top',
 }, {
-    trigger: '.o_field_widget[name=route_ids] .custom-checkbox > label:contains("Manufacture")',
+    trigger: '.o_field_widget[name=route_ids] .form-check > label:contains("Manufacture")',
     content: _t('Check Manufacture'),
     position: 'right',
 }, {
-    trigger: '.o_field_widget[name=route_ids] .custom-checkbox > label:contains("Buy")',
+    trigger: '.o_field_widget[name=route_ids] .form-check > label:contains("Buy")',
     content: _t('Uncheck Buy'),
     position: 'right',
 }, {
-    trigger: '.o_field_widget[name=route_ids] .custom-checkbox > label:contains("Replenish on Order (MTO)")',
+    trigger: '.o_field_widget[name=route_ids] .form-check > label:contains("Replenish on Order (MTO)")',
     content: _t('Uncheck  Replenish on Order (MTO)'),
     position: 'right',
 }, {
@@ -130,7 +130,7 @@ tour.stepUtils.autoExpandMoreButtons('.o_form_readonly'),
     content: _t('Go to inventory tab'),
     position: 'top',
 }, {
-    trigger: '.o_field_widget[name=route_ids] .custom-checkbox > label:contains("Replenish on Order (MTO)")',
+    trigger: '.o_field_widget[name=route_ids] .form-check > label:contains("Replenish on Order (MTO)")',
     content: _t('Check Replenish on Order (MTO)'),
     position: 'right',
 }, {
diff --git a/odoo/addons/test_new_api/static/tests/tours/x2many.js b/odoo/addons/test_new_api/static/tests/tours/x2many.js
index e303a847663..0211b89d298 100644
--- a/odoo/addons/test_new_api/static/tests/tours/x2many.js
+++ b/odoo/addons/test_new_api/static/tests/tours/x2many.js
@@ -60,7 +60,7 @@ odoo.define('web.test.x2many', function (require) {
         run: function () {}, // it's a check
     }, { // add ourself as participant
         content: "change tab to Participants",
-        trigger: '[data-toggle="tab"]:contains(Participants)'
+        trigger: '[data-bs-toggle="tab"]:contains(Participants)'
     }, {
         content: "click to add participants",
         trigger: '.o_form_sheet .tab-pane:eq(2).active .o_field_x2many_list_row_add a'
@@ -148,7 +148,7 @@ odoo.define('web.test.x2many', function (require) {
         extra_trigger: 'textarea[name="body"]:first:propValue(c)',
     }, { // add participants
         content: "change tab to Participants",
-        trigger: '[data-toggle="tab"]:contains(Participants)',
+        trigger: '[data-bs-toggle="tab"]:contains(Participants)',
         extra_trigger: '.tab-pane:eq(0) .o_field_widget tbody .o_data_row:eq(2)',
     }, {
         content: "click to add participants",
@@ -183,12 +183,12 @@ odoo.define('web.test.x2many', function (require) {
         trigger: 'button.o_form_button_edit',
     }, {
         content: "change tab to Messages",
-        trigger: '[data-toggle="tab"]:contains(Messages)',
+        trigger: '[data-bs-toggle="tab"]:contains(Messages)',
         extra_trigger: '.o_form_editable',
     }, { // add message d
         content: "create new message d",
         trigger: '.tab-pane:eq(0) .o_field_x2many_list_row_add a',
-        extra_trigger: 'a[data-toggle="tab"].active:contains(Messages)',
+        extra_trigger: 'a[data-bs-toggle="tab"].active:contains(Messages)',
     }, {
         content: "insert body",
         trigger: 'textarea[name="body"]:first',
@@ -427,7 +427,7 @@ odoo.define('web.test.x2many', function (require) {
     }, { // add message eee
         content: "create new message eee",
         trigger: '.tab-pane:eq(0) .o_field_x2many_list_row_add a',
-        extra_trigger: '.o_form_editable a[data-toggle="tab"].active:contains(Messages)',
+        extra_trigger: '.o_form_editable a[data-bs-toggle="tab"].active:contains(Messages)',
     }, {
         content: "change text value",
         trigger: 'textarea[name="body"]:first',