From 09f40036b9c14161db90c6128861369c91c8c64e Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Mon, 16 Jul 2018 16:49:25 +0200
Subject: [PATCH] [REF] *: BS4, review the 'nav' and 'navbar' components

Now the nav structure is more declarative: the 'nav-item' and 'nav-link'
classes have to be put on related nav item and links. Also, the 'active'
class has to be put on links instead of items.

Same as for the navbar component:
- The navbar structure was simplified and meant to be more declarative.
- The navbar colors are also now handled by a different set of classes.

The 'nav-stacked' class was removed and replaced by flex utilities.

The set of classes for colors and nav styles also changed.
---
 .../static/src/xml/web_kanban_activity.xml    |   4 +-
 addons/portal/static/src/scss/portal.scss     |  27 ++---
 addons/portal/views/portal_templates.xml      |  51 ++++-----
 addons/survey/views/survey_result.xml         |  28 ++---
 .../static/src/js/views/form/form_renderer.js |  18 +--
 .../static/src/scss/bootstrap_overridden.scss |   3 -
 addons/web/static/src/scss/webclient.scss     |   2 +-
 addons/web/static/src/xml/kanban.xml          |   6 +-
 addons/web/static/tests/views/form_tests.js   |  40 +++----
 addons/web/views/webclient_templates.xml      |  30 +++--
 addons/web_editor/static/src/xml/editor.xml   |  12 +-
 addons/website/static/src/js/content/menu.js  |   2 +-
 addons/website/static/src/scss/website.scss   |   3 +-
 .../static/src/xml/website.pageProperties.xml |   4 +-
 addons/website/views/website_templates.xml    |  30 +++--
 .../views/website_blog_templates.xml          |  34 +++---
 .../website_crm_partner_assign_templates.xml  |  18 +--
 .../views/website_customer_templates.xml      |  26 +++--
 .../website_event/views/event_templates.xml   |  22 ++--
 .../views/event_track_templates.xml           |   8 +-
 addons/website_forum/views/website_forum.xml  | 105 +++++++++---------
 .../website_forum_doc/views/website_doc.xml   |   4 +-
 .../website_hr_recruitment_templates.xml      |  26 +++--
 .../views/website_links_graphs.xml            |   6 +-
 .../views/website_links_template.xml          |   6 +-
 .../views/website_mail_channel_templates.xml  |  34 +++---
 .../views/website_membership_templates.xml    |  20 ++--
 .../views/website_quote_templates.xml         |   2 +-
 addons/website_sale/views/templates.xml       |  42 +++----
 .../views/website_sale_wishlist_template.xml  |   4 +-
 .../static/src/scss/website_slides.scss       |   4 +-
 .../website_slides/views/website_slides.xml   |  49 ++++----
 odoo/addons/base/tests/test_translate.py      |   8 +-
 .../test_new_api/static/tests/x2many.js       |   4 +-
 34 files changed, 345 insertions(+), 337 deletions(-)

diff --git a/addons/mail/static/src/xml/web_kanban_activity.xml b/addons/mail/static/src/xml/web_kanban_activity.xml
index 65ece45d865..3e31d5c4bd5 100644
--- a/addons/mail/static/src/xml/web_kanban_activity.xml
+++ b/addons/mail/static/src/xml/web_kanban_activity.xml
@@ -24,12 +24,12 @@
         <ul class="nav o_activity_log" role="menu">
             <t t-foreach="_.keys(records)" t-as="key">
                 <t t-set="logs" t-value="records[key]" />
-                <li role="menuitem" class="o_activity_label">
+                <li role="menuitem" class="nav-item o_activity_label">
                     <strong t-attf-class="o_activity_color_#{key}">
                         <t t-esc="selection[key]" /> (<t t-esc="logs.length"/>)
                     </strong>
                 </li>
-                <li role="menuitem" t-foreach="logs" t-as="log" t-att-data-activity-id="log.id" class="o_schedule_activity">
+                <li t-foreach="logs" t-as="log" t-att-data-activity-id="log.id" class="nav-item o_schedule_activity" role="menuitem">
                     <div class="o_activity_title pull-left">
                         <span t-attf-class="fa #{log.icon} fa-fw" role="img" aria-label="Log" title="Log"/>
                         <strong>
diff --git a/addons/portal/static/src/scss/portal.scss b/addons/portal/static/src/scss/portal.scss
index 178e37b1907..e6eba2d7d4c 100644
--- a/addons/portal/static/src/scss/portal.scss
+++ b/addons/portal/static/src/scss/portal.scss
@@ -3,10 +3,10 @@
 /// rules.
 ///
 
-// Resize and vertically align navbar’s items relative to $navbar-height
-@mixin o-w-fill-navbar($ratio: 0.8) {
-    height: round($navbar-height * $ratio);
-    margin-top: round($navbar-height * (1 - $ratio) / 2);
+// Resize and vertically align navbar’s items relative to navbar
+@mixin o-w-fill-navbar($ratio: 1) {
+    height: round($nav-link-height * $ratio * 100) / 100;
+    margin-top: round($nav-link-height * (1 - $ratio) / 2 * 100) / 100;
 }
 
 // Frontend general
@@ -26,20 +26,21 @@
 }
 
 header {
-    a.navbar-brand.logo {
-        padding: 0 15px;
+    .navbar-brand.logo {
+        padding-top: 0;
+        padding-bottom: 0;
 
         img {
             @include o-w-fill-navbar;
         }
     }
 }
-.navbar.navbar-static-top {
+.navbar {
     margin-bottom: 0;
     ul.nav > li {
         &.divider {
             @include o-w-fill-navbar;
-            border-right: 1px solid $navbar-default-link-disabled-color;
+            border-right: 1px solid $nav-divider-color;
             @include media-breakpoint-down(sm) {
                 display: none;
             }
@@ -55,7 +56,7 @@ header {
         }
     }
 }
-ul.nav-stacked > li > a {
+ul.flex-column > li > a {
     padding: 2px 15px;
 }
 
@@ -284,7 +285,7 @@ img.o_we_custom_image {
             margin: 0;
 
             @include media-breakpoint-up(md) {
-                padding: $navbar-padding-vertical $navbar-padding-horizontal 0 0;
+                padding: $navbar-padding-y $navbar-padding-x 0 0;
             }
         }
 
@@ -293,7 +294,7 @@ img.o_we_custom_image {
             margin-bottom: 8px;
 
             .navbar-brand {
-                padding: $navbar-padding-vertical $navbar-padding-horizontal 0 0;
+                padding: $navbar-padding-y $navbar-padding-x 0 0;
             }
 
             .navbar-header .dropdown-menu {
@@ -305,7 +306,7 @@ img.o_we_custom_image {
                 margin-right: 0;
                 margin-bottom: 0;
                 background-color: $table-bg-active;
-                padding: 6px 10px $navbar-padding-vertical;
+                padding: 6px 10px $navbar-padding-y;
                 border-width: 1px 1px 0 1px;
                 border-bottom-left-radius: 0;
                 border-bottom-right-radius: 0;
@@ -401,7 +402,7 @@ img.o_we_custom_image {
         position: relative;
         width: 100%;
         border-radius: 5px;
-        background-color: $navbar-default-bg;
+        background-color: $light;
     }
     .o_portal_contact_img {
         width: 3.7em;
diff --git a/addons/portal/views/portal_templates.xml b/addons/portal/views/portal_templates.xml
index da0ca7f5f2c..3ca4a611a0b 100644
--- a/addons/portal/views/portal_templates.xml
+++ b/addons/portal/views/portal_templates.xml
@@ -24,27 +24,20 @@
 
             <div id="wrapwrap" t-att-class="pageName or ''">
                 <header>
-                    <div class="navbar navbar-default navbar-static-top">
+                    <nav class="navbar navbar-expand-md navbar-light bg-light">
                         <div class="container">
-                            <div class="navbar-header">
-                                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-top-collapse">
-                                    <span class="sr-only">Toggle navigation</span>
-                                    <span class="icon-bar"></span>
-                                    <span class="icon-bar"></span>
-                                    <span class="icon-bar"></span>
-                                </button>
-                                <a href="/" class="navbar-brand logo">
-                                    <span t-field="res_company.logo" t-options="{'widget': 'image'}" t-att-alt="'Logo of %s' % res_company.name" t-att-title="res_company.name"/>
-                                </a>
-                            </div>
-                            <div class="collapse navbar-collapse navbar-top-collapse">
-                                <!-- Note: pull-right instead of navbar-right for two reasons: -->
-                                <!-- 1) We want menu to open to the right by default (except cases handled in JS) -->
-                                <!-- 2) navbar-right combined will navbar-static-top misaligns contained elements -->
-                                <ul class="nav navbar-nav pull-right" id="top_menu">
-                                    <li class="divider" t-ignore="true" t-if="not user_id._is_public()"/>
-                                    <li class="dropdown" t-ignore="true" t-if="not user_id._is_public()">
-                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+                            <a href="/" class="navbar-brand logo">
+                                <span t-field="res_company.logo" t-options="{'widget': 'image'}" t-att-alt="'Logo of %s' % res_company.name" t-att-title="res_company.name"/>
+                            </a>
+                            <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#top_menu_collapse">
+                                <span class="navbar-toggler-icon"/>
+                            </button>
+                            <div class="collapse navbar-collapse" id="top_menu_collapse">
+                                <!-- FIXME We want menu to open to the right by default (except cases handled in JS) -->
+                                <ul class="nav navbar-nav ml-auto" id="top_menu">
+                                    <li class="nav-item divider" t-ignore="true" t-if="not user_id._is_public()"/>
+                                    <li class="nav-item dropdown" t-ignore="true" t-if="not user_id._is_public()">
+                                        <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">
                                             <b>
                                                 <span t-esc="user_id.name[:23] + '...' if user_id.name and len(user_id.name) &gt; 25 else user_id.name"/>
                                             </b>
@@ -56,7 +49,7 @@
                                 </ul>
                             </div>
                         </div>
-                    </div>
+                    </nav>
                 </header>
                 <main>
                     <t t-raw="0"/>
@@ -118,9 +111,9 @@
 
     <template id="portal_show_sign_in" inherit_id="portal.frontend_layout" name="Show Sign In">
         <xpath expr="//ul[@id='top_menu']" position="inside">
-            <li class="divider" groups="base.group_public"/>
-            <li groups="base.group_public">
-                <a t-attf-href="/web/login">
+            <li class="nav-item divider" groups="base.group_public"/>
+            <li groups="base.group_public" class="nav-item">
+                <a t-attf-href="/web/login" class="nav-link">
                     <b>Sign in</b>
                 </a>
             </li>
@@ -258,16 +251,16 @@
 
     <template id="portal_archive_groups" name="Portal Archive Groups">
         <h3 class="page-header">Archives</h3>
-        <ul class="nav nav-pills nav-stacked">
+        <ul class="nav nav-pills flex-column">
             <t t-foreach="archive_groups" t-as="group">
                 <t t-if="group['date_begin'] == date">
-                    <li class="active">
-                        <a t-att-href="default_url" t-ignore="True"><t t-esc="group['name']"/><span class="pull-right badge" t-esc="group['item_count']"/></a>
+                    <li class="nav-item">
+                        <a t-att-href="default_url" class="nav-link active" t-ignore="True"><t t-esc="group['name']"/><span class="pull-right badge" t-esc="group['item_count']"/></a>
                     </li>
                 </t>
                 <t t-if="group['date_begin'] != date">
-                    <li>
-                        <a t-ignore="True" t-attf-href="#{default_url}?date_begin=#{group['date_begin']}&amp;date_end=#{group['date_end']}"><t t-esc="group['name']"/><span class="pull-right badge" t-esc="group['item_count']"/></a>
+                    <li class="nav-item">
+                        <a t-ignore="True" t-attf-href="#{default_url}?date_begin=#{group['date_begin']}&amp;date_end=#{group['date_end']}" class="nav-link"><t t-esc="group['name']"/><span class="pull-right badge" t-esc="group['item_count']"/></a>
                     </li>
                 </t>
             </t>
diff --git a/addons/survey/views/survey_result.xml b/addons/survey/views/survey_result.xml
index c8c30561fce..01e64128d56 100644
--- a/addons/survey/views/survey_result.xml
+++ b/addons/survey/views/survey_result.xml
@@ -136,18 +136,18 @@
         <div>
             <!-- Tabs -->
             <ul class="nav nav-tabs d-print-none" role="tablist">
-                <li class="active" t-if="question.type != 'simple_choice'">
-                    <a t-att-href="'#graph_question_%d' % question.id" t-att-aria-controls="'graph_question_%d' % question.id" data-toggle="tab" role="tab">
+                <li class="nav-item" t-if="question.type != 'simple_choice'">
+                    <a t-att-href="'#graph_question_%d' % question.id" t-att-aria-controls="'graph_question_%d' % question.id" class="nav-link active" data-toggle="tab" role="tab">
                         <i class="fa fa-bar-chart-o"></i> Graph
                     </a>
                 </li>
-                <li class="active" t-if="question.type == 'simple_choice'">
-                    <a t-att-href="'#graph_question_%d' % question.id" t-att-aria-controls="'graph_question_%d' % question.id" data-toggle="tab" role="tab">
+                <li class="nav-item" t-if="question.type == 'simple_choice'">
+                    <a t-att-href="'#graph_question_%d' % question.id" t-att-aria-controls="'graph_question_%d' % question.id" class="nav-link active" data-toggle="tab" role="tab">
                         <i class="fa fa-bar-chart-o"></i> Pie Chart
                     </a>
                 </li>
-                <li>
-                    <a t-att-href="'#data_question_%d' % question.id" t-att-aria-controls="'data_question_%d' % question.id" data-toggle="tab" role="tab">
+                <li class="nav-item">
+                    <a t-att-href="'#data_question_%d' % question.id" t-att-aria-controls="'data_question_%d' % question.id" class="nav-link" data-toggle="tab" role="tab">
                         <i class="fa fa-list-alt"></i> Data
                     </a>
                 </li>
@@ -200,14 +200,14 @@
         <t t-set="matrix_result" t-value="prepare_result"/>
         <!-- Tabs -->
         <ul class="nav nav-tabs d-print-none" role="tablist">
-            <li class="active">
-                <a t-att-href="'#graph_question_%d' % question.id" t-att-aria-controls="'graph_question_%d' % question.id" data-toggle="tab" role="tab">
+            <li class="nav-item">
+                <a t-att-href="'#graph_question_%d' % question.id" t-att-aria-controls="'graph_question_%d' % question.id" class="nav-link active" data-toggle="tab" role="tab">
                     <i class="fa fa-bar-chart"></i>
                     Graph
                 </a>
             </li>
-            <li>
-                <a t-att-href="'#data_question_%d' % question.id" t-att-aria-controls="'data_question_%d' % question.id" data-toggle="tab" role="tab">
+            <li class="nav-item">
+                <a t-att-href="'#data_question_%d' % question.id" t-att-aria-controls="'data_question_%d' % question.id" class="nav-link" data-toggle="tab" role="tab">
                     <i class="fa fa-list-alt"></i>
                     Data
                 </a>
@@ -262,14 +262,14 @@
             <span class="label label-default only_left_radius">Average </span> <span class="label label-warning only_right_radius" t-esc="number_result['average']"></span>
         </span>
         <ul class="nav nav-tabs d-print-none" role="tablist">
-            <li class="active">
-                <a t-att-href="'#most_common_%d' % question.id" t-att-aria-controls="'most_common_%d' % question.id" data-toggle="tab" role="tab">
+            <li class="nav-item">
+                <a t-att-href="'#most_common_%d' % question.id" t-att-aria-controls="'most_common_%d' % question.id" class="nav-link active" data-toggle="tab" role="tab">
                     <i class="fa fa-list-ol"></i>
                     Most Common <span t-esc="len(number_result['most_common'])"></span>
                 </a>
             </li>
-            <li>
-                <a t-att-href="'#data_question_%d' % question.id" t-att-aria-controls="'data_question_%d' % question.id" data-toggle="tab" role="tab">
+            <li class="nav-item">
+                <a t-att-href="'#data_question_%d' % question.id" t-att-aria-controls="'data_question_%d' % question.id" class="nav-link" data-toggle="tab" role="tab">
                     <i class="fa fa-list-alt"></i>
                     All Data
                 </a>
diff --git a/addons/web/static/src/js/views/form/form_renderer.js b/addons/web/static/src/js/views/form/form_renderer.js
index a0bb82d569f..779c6a48c17 100644
--- a/addons/web/static/src/js/views/form/form_renderer.js
+++ b/addons/web/static/src/js/views/form/form_renderer.js
@@ -181,7 +181,7 @@ var FormRenderer = BasicRenderer.extend({
             var $notebook = $(this);
             var name = $notebook.data('name');
             var index = -1;
-            $notebook.find('li').each(function (i) {
+            $notebook.find('.nav-link').each(function (i) {
                 if ($(this).hasClass('active')) {
                     index = i;
                 }
@@ -612,10 +612,11 @@ var FormRenderer = BasicRenderer.extend({
             'data-toggle': 'tab',
             disable_anchor: 'true',
             href: '#' + page_id,
+            class: 'nav-link',
             role: 'tab',
             text: page.attrs.string,
         });
-        return $('<li>').append($a);
+        return $('<li>', {class: 'nav-item'}).append($a);
     },
     /**
      * @private
@@ -761,7 +762,7 @@ var FormRenderer = BasicRenderer.extend({
     _renderTagNotebook: function (node) {
         var self = this;
         var $headers = $('<ul class="nav nav-tabs">');
-        var $pages = $('<div class="tab-content nav nav-tabs">');
+        var $pages = $('<div class="tab-content">');
         var autofocusTab = -1;
         // renderedTabs is used to aggregate the generated $headers and $pages
         // alongside their node, so that their modifiers can be registered once
@@ -785,7 +786,7 @@ var FormRenderer = BasicRenderer.extend({
         });
         if (renderedTabs.length) {
             var tabToFocus = renderedTabs[Math.max(0, autofocusTab)];
-            tabToFocus.$header.addClass('active');
+            tabToFocus.$header.find('.nav-link').addClass('active');
             tabToFocus.$page.addClass('active');
         }
         // register the modifiers for each tab
@@ -793,12 +794,13 @@ var FormRenderer = BasicRenderer.extend({
             self._registerModifiers(tab.node, self.state, tab.$header, {
                 callback: function (element, modifiers) {
                     // if the active tab is invisible, activate the first visible tab instead
-                    if (modifiers.invisible && element.$el.hasClass('active')) {
-                        element.$el.removeClass('active');
+                    var $link = element.$el.find('.nav-link');
+                    if (modifiers.invisible && $link.hasClass('active')) {
+                        $link.removeClass('active');
                         tab.$page.removeClass('active');
-                        var $firstVisibleTab = $headers.find('li:not(.o_invisible_modifier):first()');
+                        var $firstVisibleTab = $headers.find('li:not(.o_invisible_modifier):first() > a');
                         $firstVisibleTab.addClass('active');
-                        $pages.find($firstVisibleTab.find('a').attr('href')).addClass('active');
+                        $pages.find($firstVisibleTab.attr('href')).addClass('active');
                     }
                 },
             });
diff --git a/addons/web/static/src/scss/bootstrap_overridden.scss b/addons/web/static/src/scss/bootstrap_overridden.scss
index 20c99bf341b..9c26fa886eb 100644
--- a/addons/web/static/src/scss/bootstrap_overridden.scss
+++ b/addons/web/static/src/scss/bootstrap_overridden.scss
@@ -101,9 +101,6 @@ $dropdown-link-hover-bg: $gray-200;
 
 // Navs
 
-$nav-link-padding-y: 10px;
-$nav-link-padding-x: 15px;
-
 $nav-tabs-link-active-bg: $white;
 
 $nav-pills-border-radius: 0;
diff --git a/addons/web/static/src/scss/webclient.scss b/addons/web/static/src/scss/webclient.scss
index cb122b084f2..b90b6f5fee5 100644
--- a/addons/web/static/src/scss/webclient.scss
+++ b/addons/web/static/src/scss/webclient.scss
@@ -17,7 +17,7 @@
     width: 300px;
     max-width: 100%;
 
-    @include o-position-absolute($navbar-height, 0px);
+    @include o-position-absolute($nav-link-height, 0);
     z-index: 1100; // Bootstrap modal z-index is 1050
 
     .o_notification {
diff --git a/addons/web/static/src/xml/kanban.xml b/addons/web/static/src/xml/kanban.xml
index 4fc71cd6074..881babbda23 100644
--- a/addons/web/static/src/xml/kanban.xml
+++ b/addons/web/static/src/xml/kanban.xml
@@ -124,10 +124,10 @@
 <!-- Note: this dialog isn't responsive, but it is not accessible on mobile -->
 <div t-name="KanbanView.ExamplesDialog" class="o_kanban_examples_dialog">
     <div class="o_kanban_examples_dialog_nav">
-        <ul class="nav nav-pills nav-stacked">
+        <ul class="nav nav-pills flex-column">
             <t t-foreach="examples" t-as="example">
-                <li t-att-class="example_index == 0 and 'active' or None">
-                    <a t-attf-aria-controls="example_#{example_index}" data-toggle="tab" role="tab" t-attf-href="#example_#{example_index}"> <t t-esc="example.name"/> </a>
+                <li class="nav-item">
+                    <a t-attf-aria-controls="example_#{example_index}" data-toggle="tab" role="tab" 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>
diff --git a/addons/web/static/tests/views/form_tests.js b/addons/web/static/tests/views/form_tests.js
index dc80d6440b3..ce8b1f33ef4 100644
--- a/addons/web/static/tests/views/form_tests.js
+++ b/addons/web/static/tests/views/form_tests.js
@@ -504,20 +504,20 @@ QUnit.module('Views', {
         });
 
         form.$buttons.find('.o_form_button_edit').click();
-        assert.ok(form.$('.o_notebook .nav li:first()').hasClass('active'),
+        assert.ok(form.$('.o_notebook .nav .nav-link:first()').hasClass('active'),
             'first tab should be active');
-        assert.ok(!form.$('.o_notebook .nav li:first()').hasClass('o_invisible_modifier'),
+        assert.ok(!form.$('.o_notebook .nav .nav-item:first()').hasClass('o_invisible_modifier'),
             'first tab should be visible');
 
         // set a value on the m2o
         var $dropdown = form.$('.o_field_many2one input').autocomplete('widget');
         form.$('.o_field_many2one input').click();
         $dropdown.find('li:first()').click();
-        assert.ok(!form.$('.o_notebook .nav li:first()').hasClass('active'),
+        assert.ok(!form.$('.o_notebook .nav .nav-link:first()').hasClass('active'),
             'first tab should not be active');
-        assert.ok(form.$('.o_notebook .nav li:first()').hasClass('o_invisible_modifier'),
+        assert.ok(form.$('.o_notebook .nav .nav-item:first()').hasClass('o_invisible_modifier'),
             'first tab should be invisible');
-        assert.ok(form.$('.o_notebook .nav li:nth(1)').hasClass('active'),
+        assert.ok(form.$('.o_notebook .nav .nav-link:nth(1)').hasClass('active'),
             'second tab should be active');
         assert.ok(form.$('.o_notebook .tab-content .tab-pane:nth(1)').hasClass('active'),
             'second page should be active');
@@ -547,9 +547,9 @@ QUnit.module('Views', {
             res_id: 1,
         });
 
-        assert.notOk(form.$('.o_notebook .nav li:first()').is(':visible'),
+        assert.notOk(form.$('.o_notebook .nav .nav-item:first()').is(':visible'),
             'first tab should be invisible');
-        assert.ok(form.$('.o_notebook .nav li:nth(1)').hasClass('active'),
+        assert.ok(form.$('.o_notebook .nav .nav-link:nth(1)').hasClass('active'),
             'second tab should be active');
 
         form.destroy();
@@ -578,9 +578,9 @@ QUnit.module('Views', {
             res_id: 1,
         });
 
-        assert.notOk(form.$('.o_notebook .nav li:first()').hasClass('active'),
+        assert.notOk(form.$('.o_notebook .nav .nav-link:first()').hasClass('active'),
             'first tab should not active');
-        assert.ok(form.$('.o_notebook .nav li:nth(1)').hasClass('active'),
+        assert.ok(form.$('.o_notebook .nav .nav-link:nth(1)').hasClass('active'),
             'second tab should be active');
 
         form.destroy();
@@ -2583,19 +2583,19 @@ QUnit.module('Views', {
         });
 
         // click on second page tab
-        form.$('.o_notebook li:eq(1) a').click();
+        form.$('.o_notebook .nav-link:eq(1)').click();
 
-        assert.notOk(form.$('.o_notebook li:eq(0)').hasClass('active'),
+        assert.notOk(form.$('.o_notebook .nav-link:eq(0)').hasClass('active'),
             "first tab should not be active");
-        assert.ok(form.$('.o_notebook li:eq(1)').hasClass('active'),
+        assert.ok(form.$('.o_notebook .nav-link:eq(1)').hasClass('active'),
             "second tab should be active");
 
         // click on the pager to switch to the next record
         form.pager.$('.o_pager_next').click();
 
-        assert.notOk(form.$('.o_notebook li:eq(0)').hasClass('active'),
+        assert.notOk(form.$('.o_notebook .nav-link:eq(0)').hasClass('active'),
             "first tab should not be active");
-        assert.ok(form.$('.o_notebook li:eq(1)').hasClass('active'),
+        assert.ok(form.$('.o_notebook .nav-link:eq(1)').hasClass('active'),
             "second tab should be active");
         form.destroy();
     });
@@ -5152,23 +5152,23 @@ QUnit.module('Views', {
             res_id: 1,
         });
 
-        assert.strictEqual(form.$('.o_notebook ul li:not(.o_invisible_modifier)').length, 2,
+        assert.strictEqual(form.$('.o_notebook .nav-item:not(.o_invisible_modifier)').length, 2,
             "both tabs should be visible");
-        assert.ok(form.$('.o_notebook ul li:first').hasClass('active'),
+        assert.ok(form.$('.o_notebook .nav-link:first').hasClass('active'),
             "first tab should be active");
 
         // click on the pager to switch to the next record
         form.pager.$('.o_pager_next').click();
-        assert.strictEqual(form.$('.o_notebook ul li:not(.o_invisible_modifier)').length, 1,
+        assert.strictEqual(form.$('.o_notebook .nav-item:not(.o_invisible_modifier)').length, 1,
             "only the second tab should be visible");
-        assert.ok(form.$('.o_notebook ul li:not(.o_invisible_modifier)').hasClass('active'),
+        assert.ok(form.$('.o_notebook .nav-item:not(.o_invisible_modifier) .nav-link').hasClass('active'),
             "the visible tab should be active");
 
         // click on the pager to switch back to the previous record
         form.pager.$('.o_pager_previous').click();
-        assert.strictEqual(form.$('.o_notebook ul li:not(.o_invisible_modifier)').length, 2,
+        assert.strictEqual(form.$('.o_notebook .nav-item:not(.o_invisible_modifier)').length, 2,
             "both tabs should be visible again");
-        assert.ok(form.$('.o_notebook ul li:nth(1)').hasClass('active'),
+        assert.ok(form.$('.o_notebook .nav-link:nth(1)').hasClass('active'),
             "second tab should be active");
 
         form.destroy();
diff --git a/addons/web/views/webclient_templates.xml b/addons/web/views/webclient_templates.xml
index 1224accd6cb..2039acc7bdc 100644
--- a/addons/web/views/webclient_templates.xml
+++ b/addons/web/views/webclient_templates.xml
@@ -394,17 +394,17 @@
 
     <template id="web.menu">
         <ul class="nav navbar-nav navbar-left oe_application_menu_placeholder" style="display: none;" role="menu">
-            <li t-foreach="menu_data['children']" t-as="menu">
+            <li t-foreach="menu_data['children']" t-as="menu" class="nav-item">
                 <t t-call="web.menu_link"/>
             </li>
-            <li id="menu_more_container" class="dropdown" style="display: none;">
-                <a role="menuitem" aria-haspopup="true" href="#" class="dropdown-toggle" data-toggle="dropdown" id="more_menu_button">More</a>
-                <div id="menu_more" class="dropdown-menu" role="menu"/>
+            <li id="menu_more_container" class="nav-item dropdown" style="display: none;">
+                <a role="menuitem" href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" id="more_menu_button">More</a>
+                <div id="menu_more" class="dropdown-menu" role="menu"></div>
             </li>
         </ul>
 
-        <ul class="nav navbar-nav navbar-right oe_user_menu_placeholder" style="display: none;"/>
-        <ul class="nav navbar-nav navbar-right oe_systray" style="display: none;"/>
+        <ul class="nav navbar-nav ml-auto oe_systray" style="display: none;"/>
+        <ul class="nav navbar-nav oe_user_menu_placeholder" style="display: none;"/>
     </template>
     <template id="web.menu_secondary">
         <a class="o_sub_menu_logo" t-att-href="'/web/?debug' if debug else '/web'">
@@ -429,8 +429,8 @@
         </div>
     </template>
     <template id="web.menu_secondary_submenu">
-        <ul t-if="menu['children']" class="oe_secondary_submenu nav nav-pills nav-stacked">
-            <li t-foreach="menu['children']" t-as="menu">
+        <ul t-if="menu['children']" class="oe_secondary_submenu nav nav-pills flex-column">
+            <li t-foreach="menu['children']" t-as="menu" class="nav-item">
                 <t t-call="web.menu_link"/>
                 <t t-call="web.menu_secondary_submenu"/>
             </li>
@@ -440,7 +440,7 @@
         <t t-set="debug_param" t-value="'?&amp;debug=' if debug else ''"/>
         <a t-att-href="'/web%s#menu_id=%s&amp;action=%s' % (debug_param, menu['id'], menu['action'] and menu['action'].split(',')[1] or '')"
             role="menuitem"
-            t-att-class="'oe_menu_toggler' if menu.get('children') else 'oe_menu_leaf'"
+            t-attf-class="nav-link #{'oe_menu_toggler' if menu.get('children') else 'oe_menu_leaf'}"
             t-att-data-menu="menu['id']"
             t-att-data-menu-xmlid="menu.get('xmlid')"
             t-att-data-action-model="menu['action'] and menu['action'].split(',')[0] or None"
@@ -701,14 +701,10 @@
             <t t-set="body_classname" t-value="'o_web_client'"/>
 
             <header id="oe_main_menu_navbar">
-                <nav class="navbar navbar-inverse" groups="base.group_user,base.group_portal">
-                    <div class="navbar-header">
-                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
-                            <span class="icon-bar"></span>
-                            <span class="icon-bar"></span>
-                            <span class="icon-bar"></span>
-                        </button>
-                    </div>
+                <nav class="navbar navbar-expand-md navbar-dark bg-dark" groups="base.group_user,base.group_portal">
+                    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">
+                        <span class="navbar-toggler-icon"/>
+                    </button>
                     <div class="navbar-collapse collapse">
                         <t t-call="web.menu"/>
                     </div>
diff --git a/addons/web_editor/static/src/xml/editor.xml b/addons/web_editor/static/src/xml/editor.xml
index 651cd60f883..3cfa54937b6 100644
--- a/addons/web_editor/static/src/xml/editor.xml
+++ b/addons/web_editor/static/src/xml/editor.xml
@@ -47,11 +47,11 @@
     <!-- Media Dialog (allows to choose an img/pictogram/video) -->
     <div t-name="web_editor.dialog.media">
         <ul class="nav nav-tabs" role="tablist">
-            <li class="active"><a role="tab" href="#editor-media-image" aria-controls="editor-media-image" data-toggle="tab" t-att-class="widget.noImages ? 'd-none' : ''">Image</a></li>
-            <li><a role="tab" href="#editor-media-document" aria-controls="editor-media-document" data-toggle="tab" t-att-class="widget.noDocuments ? 'd-none' : ''">Document</a></li>
-            <li><a role="tab" href="#editor-media-icon" aria-controls="editor-media-icon" data-toggle="tab" t-att-class="widget.noIcons ? 'd-none' : ''">Pictogram</a></li>
-            <li><a role="tab" href="#editor-media-video" aria-controls="editor-media-video" data-toggle="tab" t-att-class="widget.noVideos ? 'd-none' : ''">Video</a></li>
-            <li class="search pull-right">
+            <li class="nav-item"><a role="tab" href="#editor-media-image" aria-controls="editor-media-image" data-toggle="tab" t-attf-class="nav-link active#{widget.noImages ? ' d-none' : ''}">Image</a></li>
+            <li class="nav-item"><a role="tab" href="#editor-media-document" aria-controls="editor-media-document" data-toggle="tab" t-attf-class="nav-link#{widget.noDocuments ? ' d-none' : ''}">Document</a></li>
+            <li class="nav-item"><a role="tab" href="#editor-media-icon" aria-controls="editor-media-icon" data-toggle="tab" t-attf-class="nav-link#{widget.noIcons ? ' d-none' : ''}">Pictogram</a></li>
+            <li class="nav-item"><a role="tab" href="#editor-media-video" aria-controls="editor-media-video" data-toggle="tab" t-attf-class="nav-link#{widget.noVideos ? ' d-none' : ''}">Video</a></li>
+            <li class="nav-item search pull-right">
                 <ul class="pager mb0 mt0">
                     <li class="previous">
                         <a role="button" class="btn btn-secondary disabled" href="#"><i class="fa fa-angle-left"/>&#32;Previous</a>
@@ -61,7 +61,7 @@
                     </li>
                 </ul>
             </li>
-            <li class="search pull-right">
+            <li class="nav-item search pull-right">
                 <div class="form-group">
                     <input class="form-control" id="icon-search" type="search"/>
                     <span class="fa fa-search" title="Search" role="img" aria-label="Search"/>
diff --git a/addons/website/static/src/js/content/menu.js b/addons/website/static/src/js/content/menu.js
index 9a5f393c0f6..f1bb3651d26 100644
--- a/addons/website/static/src/js/content/menu.js
+++ b/addons/website/static/src/js/content/menu.js
@@ -179,7 +179,7 @@ sAnimation.registry.menuDirection = sAnimation.Class.extend({
      * @override
      */
     start: function () {
-        this.defaultAlignment = this.$el.is('.navbar-right') ? 'right' : 'left';
+        this.defaultAlignment = this.$el.is('.ml-auto, .ml-auto ~ *') ? 'right' : 'left';
         return this._super.apply(this, arguments);
     },
 
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index 9100155d9f6..aea9e6a5716 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -504,8 +504,7 @@ div.carousel {
     @include o-position-absolute(0, 0, auto, 0);
     position: fixed;
     z-index: $zindex-modal - 20;
-    background: $navbar-default-bg;
-    border-bottom: $navbar-default-border;
+    background: $light;
 
     margin-top: -200px;
     transition: margin-top 500ms ease 0s;
diff --git a/addons/website/static/src/xml/website.pageProperties.xml b/addons/website/static/src/xml/website.pageProperties.xml
index 61c0c507cf4..2e5f29b9bea 100644
--- a/addons/website/static/src/xml/website.pageProperties.xml
+++ b/addons/website/static/src/xml/website.pageProperties.xml
@@ -41,8 +41,8 @@
 <div t-name="website.pagesMenu.page_info" class="o_page_management_info">
     <form class="form-horizontal">
         <ul class="nav nav-tabs" role="tablist">
-            <li class="active"><a aria-controls="basic_page_info" data-toggle="tab" href="#basic_page_info" role="tab">Name</a></li>
-            <li><a aria-controls="advances_page_info" data-toggle="tab" href="#advances_page_info" role="tab">Publish</a></li>
+            <li class="nav-item"><a aria-controls="basic_page_info" role="tab" data-toggle="tab" class="nav-link active" href="#basic_page_info">Name</a></li>
+            <li class="nav-item"><a aria-controls="advances_page_info" role="tab" data-toggle="tab" class="nav-link" href="#advances_page_info">Publish</a></li>
         </ul>
         <div class="tab-content mt16">
             <div role="tabpanel" id="basic_page_info" class="tab-pane fade in active">
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index f18abdf667a..09dcf44df59 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -67,23 +67,27 @@
 
 <!-- Layout -->
 <template id="submenu" name="Submenu">
-    <li t-if="submenu.is_visible and not submenu.child_id.filtered(lambda menu: menu.is_visible)" t-att-class="
-        'active' if submenu.clean_url() and unslug_url(request.httprequest.path) == unslug_url(submenu.clean_url()) else None
-        ">
-        <a role="menuitem" t-att-href="submenu.clean_url()" t-ignore="true" t-att-target="'_blank' if submenu.new_window else None">
+    <li t-if="submenu.is_visible and not submenu.child_id.filtered(lambda menu: menu.is_visible)" class="nav-item">
+        <a t-att-href="submenu.clean_url()"
+            t-attf-class="nav-link#{' active' if submenu.clean_url() and unslug_url(request.httprequest.path) == unslug_url(submenu.clean_url()) else ''}"
+            role="menuitem"
+            t-ignore="true"
+            t-att-target="'_blank' if submenu.new_window else None">
             <span t-field="submenu.name"/>
         </a>
     </li>
-    <li t-if="submenu.child_id.filtered(lambda menu: menu.is_visible)" t-attf-class="dropdown #{
+    <li t-if="submenu.child_id.filtered(lambda menu: menu.is_visible)" t-attf-class="#{('%s-item ' % submenu_type) if submenu_type else ''}dropdown #{
         (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'
         }">
-        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+        <a t-attf-class="#{('%s-link ' % submenu_type) if submenu_type else ''}dropdown-toggle" data-toggle="dropdown" href="#">
             <span t-field="submenu.name"/>
         </a>
         <div class="dropdown-menu" role="menu">
             <t t-foreach="submenu.child_id" t-as="submenu">
-                <t t-call="website.submenu"/>
+                <t t-call="website.submenu">
+                    <t t-set="submenu_type" t-value="'dropdown'"/>
+                </t>
             </t>
         </div>
     </li>
@@ -184,7 +188,9 @@
     </xpath>
     <xpath expr="//header//ul[@id='top_menu']/li[hasclass('divider')]" position="before">
         <t t-foreach="website.menu_id.child_id" t-as="submenu">
-            <t t-call="website.submenu"/>
+            <t t-call="website.submenu">
+                <t t-set="submenu_type" t-value="'nav'"/>
+            </t>
         </t>
     </xpath>
     <xpath expr="//div[@id='wrapwrap']" position="after">
@@ -758,12 +764,12 @@
 
             <div id="wrapwrap">
                 <header>
-                    <div class="navbar navbar-default navbar-static-top">
+                    <div class="navbar navbar-expand-md navbar-light bg-light">
                         <div class="container">
                             <div class="collapse navbar-collapse navbar-top-collapse">
-                                <ul class="nav navbar-nav pull-right" id="top_menu">
-                                    <li><a href="/">Home</a></li>
-                                    <li><a href="javascript: window.history.back()">Back</a></li>
+                                <ul class="navbar-nav ml-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>
                             </div>
                         </div>
diff --git a/addons/website_blog/views/website_blog_templates.xml b/addons/website_blog/views/website_blog_templates.xml
index 1aa02994a5a..1d4b707ab52 100644
--- a/addons/website_blog/views/website_blog_templates.xml
+++ b/addons/website_blog/views/website_blog_templates.xml
@@ -393,8 +393,8 @@
             <div t-if='not hide_title' class='text-muted mt8'><i class='fa fa-tag' role="img" aria-label="Tag category" title="Tag category"/> <t t-esc='categ_title' /></div>
             <t t-foreach="tags" t-as="tag">
                 <t t-if="tag.post_ids">
-                    <li t-att-class="tag.id in active_tag_ids and 'active' or None">
-                        <a t-attf-href="#{blog_url(tag=tags_list(active_tag_ids, tag.id))}">
+                    <li class="nav-item">
+                        <a t-attf-href="#{blog_url(tag=tags_list(active_tag_ids, tag.id))}" t-attf-class="nav-link#{tag.id in active_tag_ids and ' active' or ''}">
                             <span t-field="tag.name"/>
                         </a>
                     </li>
@@ -436,18 +436,18 @@
     <xpath expr="//div[@id='blog_right_column']" position="inside">
         <section class="mt32">
         <h4>Archives</h4>
-        <ul class="nav nav-pills nav-stacked">
+        <ul class="nav nav-pills flex-column">
             <t t-foreach="nav_list" t-as="year">
-                <li data-toggle="collapse" t-att-data-target="'#' + year" aria-expanded="false" class="blog_post_year_collapse mt8">
+                <li data-toggle="collapse" t-att-data-target="'#' + year" aria-expanded="false" class="nav-item blog_post_year_collapse mt8">
                     <i t-attf-class="fa #{'fa-chevron-down' if not date and year_index == 0 else 'fa-chevron-right'} mr4" role="img" aria-label="Next year" title="Next year"/><span t-esc="year"/>
                 </li>
-                <ul t-attf-class="blog_post_year collapse nav nav-pills nav-stacked #{not date and year_index == 0 and 'in'}" t-att-id="year" role="menu">
+                <ul t-attf-class="blog_post_year collapse nav nav-pills flex-column #{not date and year_index == 0 and 'in'}" t-att-id="year" role="menu">
                     <t t-foreach="nav_list[year]" t-as="months">
-                        <li t-if="months['date_begin'] == date" class="active">
-                            <a role="menuitem" t-ignore="True" t-attf-href="#{blog_url(date_begin=False, date_end=False)}"><t t-esc="months['month']"/><span class="pull-right badge" t-esc="months['post_date_count']"/></a>
+                        <li t-if="months['date_begin'] == date" class="nav-item">
+                            <a role="menuitem" t-ignore="True" t-attf-href="#{blog_url(date_begin=False, date_end=False)}" class="nav-link active"><t t-esc="months['month']"/><span class="pull-right badge" t-esc="months['post_date_count']"/></a>
                         </li>
-                        <li t-else="1">
-                            <a role="menuitem" t-ignore="True" t-attf-href="#{blog_url(date_begin=months['date_begin'], date_end=months['date_end'])}"><t t-esc="months['month']"/><span class="pull-right badge" t-esc="months['post_date_count']"/></a>
+                        <li t-else="1" class="nav-item">
+                            <a role="menuitem" t-ignore="True" t-attf-href="#{blog_url(date_begin=months['date_begin'], date_end=months['date_end'])}" class="nav-link"><t t-esc="months['month']"/><span class="pull-right badge" t-esc="months['post_date_count']"/></a>
                         </li>
                     </t>
                 </ul>
@@ -514,13 +514,13 @@
     <xpath expr="//div[@id='blog_right_column']" position="inside">
         <section class="mt32 mb32" groups="website.group_website_designer">
         <h4>Status</h4>
-        <ul class="nav nav-pills nav-stacked">
+        <ul class="nav nav-pills flex-column">
             <t t-set="state" t-value="state_info['state']"/>
-            <li t-attf-class="#{state == 'published' and 'active' or ''}">
-                <a t-attf-href="#{state == 'published' and blog_url(state='') or blog_url(state='published')}">Published <span class="pull-right badge" t-esc="state_info['published']" /></a>
+            <li class="nav-item">
+                <a t-attf-href="#{state == 'published' and blog_url(state='') or blog_url(state='published')}" t-attf-class="nav-link#{state == 'published' and ' active' or ''}">Published <span class="pull-right badge" t-esc="state_info['published']" /></a>
             </li>
-            <li t-attf-class="#{state == 'unpublished' and 'active' or ''}">
-                <a t-attf-href="#{state == 'unpublished' and blog_url(state='') or blog_url(state='unpublished')}">Unpublished <span class="pull-right badge" t-esc="state_info['unpublished']" /></a>
+            <li class="nav-item">
+                <a t-attf-href="#{state == 'unpublished' and blog_url(state='') or blog_url(state='unpublished')}" t-attf-class="nav-link#{state == 'unpublished' and ' active' or ''}">Unpublished <span class="pull-right badge" t-esc="state_info['unpublished']" /></a>
             </li>
         </ul>
         </section>
@@ -536,10 +536,10 @@
     <xpath expr="//div[@id='blog_right_column']" position="inside">
         <section class="mt32 mb32">
         <h4>Our Blogs</h4>
-        <ul class="nav nav-pills nav-stacked">
+        <ul class="nav nav-pills flex-column">
             <t t-foreach="blogs" t-as="nav_blog">
-                <li t-att-class="nav_blog.id == blog.id and 'active' or None">
-                    <a t-attf-href="#{blog_url(blog=nav_blog, tag=False, date_begin=False, date_end=False)}">
+                <li class="nav-item">
+                    <a t-attf-href="#{blog_url(blog=nav_blog, tag=False, date_begin=False, date_end=False)}" t-attf-class="nav-link#{nav_blog.id == blog.id and ' active' or ''}">
                         <span t-field="nav_blog.name"/>
                     </a>
                 </li>
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 a4b1fd48dd0..d04c77be334 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
@@ -30,11 +30,12 @@
 
             <div class="col-md-3 mb32" id="partner_left">
 
-                <ul id="reseller_grades" class="nav nav-pills nav-stacked mt16">
-                    <li class="nav-header"><h3>Filter by Level</h3></li>
+                <ul id="reseller_grades" class="nav nav-pills flex-column mt16">
+                    <li class="nav-header nav-item"><h3>Filter by Level</h3></li>
                     <t t-foreach="grades" t-as="grade">
-                        <li t-att-class="grade['active'] and 'active' or None">
-                            <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 '') }">
+                        <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 '') }"
+                               t-attf-class="nav-link#{grade['active'] and ' active' or ''}">
                                 <span class="badge pull-right" t-esc="grade['grade_id_count'] or ''"/>
                                 <t t-esc="grade['grade_id'][1]"/>
                             </a>
@@ -42,11 +43,12 @@
                     </t>
                 </ul>
 
-                <ul id="reseller_countries" class="nav nav-pills nav-stacked mt16">
-                    <li class="nav-header"><h3>Filter by Country</h3></li>
+                <ul id="reseller_countries" class="nav nav-pills flex-column mt16">
+                    <li class="nav-header nav-item"><h3>Filter by Country</h3></li>
                     <t t-foreach="countries" t-as="country">
-                        <li t-if="country['country_id']" t-att-class="country['active'] and 'active' or None">
-                            <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 '')}">
+                        <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 pull-right" t-esc="country['country_id_count'] or ''"/>
                                 <t t-esc="country['country_id'][1]"/>
                             </a>
diff --git a/addons/website_customer/views/website_customer_templates.xml b/addons/website_customer/views/website_customer_templates.xml
index da543a6ab83..58563e612f6 100644
--- a/addons/website_customer/views/website_customer_templates.xml
+++ b/addons/website_customer/views/website_customer_templates.xml
@@ -90,11 +90,12 @@
 <template id="opt_industry_list" inherit_id="website_customer.index" customize_show="True" name="Filter on Industry" priority="20">
     <xpath expr="//div[@id='ref_left_column']" position="inside">
         <h3>References by Sectors of Activity</h3>
-        <ul class="nav nav-pills nav-stacked mt16 mb32">
+        <ul class="nav nav-pills flex-column mt16 mb32">
             <t t-foreach="industries" t-as="industry_dict">
                 <t t-if="industry_dict['industry_id']">
-                    <li t-att-class="industry_dict['industry_id'][0] == current_industry_id and 'active' or None">
-                        <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 }">
+                    <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 pull-right" t-esc="industry_dict['industry_id_count'] or '0'"/>
                             <t t-esc="industry_dict['industry_id'][1]"/>
                         </a>
@@ -108,11 +109,12 @@
 <template id="opt_country_list" inherit_id="website_customer.index" customize_show="True" name="Filter on Countries" priority="30">
     <xpath expr="//div[@id='ref_left_column']" position="inside">
         <h3>References by Country</h3>
-        <ul class="nav nav-pills nav-stacked mt16 mb32">
+        <ul class="nav nav-pills flex-column mt16 mb32">
             <t t-foreach="countries" t-as="country_dict">
                 <t t-if="country_dict['country_id']">
-                    <li t-att-class="country_dict['country_id'][0] == current_country_id and 'active' or None">
-                        <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 }">
+                    <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 pull-right" t-esc="country_dict['country_id_count'] or '0'"/>
                             <t t-esc="country_dict['country_id'][1]"/>
                         </a>
@@ -128,13 +130,13 @@
     <xpath expr="//div[@id='ref_left_column']" position="inside">
 
         <h3 t-if="len(tags)">References by Tag</h3>
-        <ul class="nav nav-pills nav-stacked mt16 mb32" t-if="len(tags)">
-            <a class="mr8" t-attf-href="/customers/#{ current_industry_id and 'industry/%s/' % slug(current_industry) or '' }#{ current_country_id and 'country/%s' % slug(current_country) or '' }">
-                <span class="fa fa-1x fa-tags"/> All </a>
-            <t t-foreach="tags" t-as="o_tag">
-                <a t-attf-class="label label-#{o_tag.classname}" t-esc="o_tag.name" t-att-style="tag and tag.id==o_tag.id and 'text-decoration: underline'"
+        <ul class="nav nav-pills flex-column mt16 mb32" t-if="len(tags)">
+            <li class="nav-item"><a class="nav-link mr8" t-attf-href="/customers/#{ current_industry_id and 'industry/%s/' % slug(current_industry) or '' }#{ current_country_id and 'country/%s' % slug(current_country) or '' }">
+                <span class="fa fa-1x fa-tags"/> All </a></li>
+            <li t-foreach="tags" t-as="o_tag" class="nav-item">
+                <a t-attf-class="nav-link label label-#{o_tag.classname}" t-esc="o_tag.name" t-att-style="tag and tag.id==o_tag.id and 'text-decoration: underline'"
                     t-attf-href="/customers/#{ current_industry_id and 'industry/%s/' % slug(current_industry) or '' }#{ current_country_id and 'country/%s' % slug(current_country) or '' }?tag_id=#{slug(o_tag)}"/>
-            </t>
+            </li>
         </ul>
     </xpath>
 </template>
diff --git a/addons/website_event/views/event_templates.xml b/addons/website_event/views/event_templates.xml
index eea982d496f..a07558c588a 100644
--- a/addons/website_event/views/event_templates.xml
+++ b/addons/website_event/views/event_templates.xml
@@ -146,10 +146,10 @@
     </xpath>
     <xpath expr="//div[@id='middle_column']" position="before">
         <div class="col-md-3 css_noprint" id="left_column">
-            <ul class="nav nav-pills nav-stacked">
+            <ul class="nav nav-pills flex-column">
                 <t t-foreach="dates" t-as="date">
-                    <li t-att-class="searches.get('date') == date[0] and 'active' or None" t-if="date[3] or (date[0] in ('old','all'))">
-                        <a t-attf-href="/event?{{ keep_query('country', 'type', date=date[0]) }}"><t t-esc="date[1]"/>
+                    <li class="nav-item" t-if="date[3] or (date[0] in ('old','all'))">
+                        <a t-attf-href="/event?{{ keep_query('country', 'type', date=date[0]) }}" t-attf-class="nav-link#{searches.get('date') == date[0] and ' active' or ''}"><t t-esc="date[1]"/>
                             <span t-if="date[3]" class="badge pull-right"><t t-esc="date[3]"/></span>
                         </a>
                     </li>
@@ -161,11 +161,11 @@
 
 <template id="event_category" inherit_id="website_event.event_left_column" active="False" customize_show="True" name="Filter by Category">
     <xpath expr="//div[@id='left_column']" position="inside">
-        <ul class="nav nav-pills nav-stacked mt32">
+        <ul class="nav nav-pills flex-column mt32">
             <t t-foreach="types" t-as="type">
                 <li t-if="type['event_type_id']"
-                    t-att-class="searches.get('type') == str(type['event_type_id'] and type['event_type_id'][0]) and 'active' or None">
-                    <a t-attf-href="/event?{{ keep_query('country', 'date', type=type['event_type_id'][0]) }}"><t t-esc="type['event_type_id'][1]"/>
+                    class="nav-item">
+                    <a t-attf-href="/event?{{ keep_query('country', 'date', type=type['event_type_id'][0]) }}" t-attf-class="nav-link#{searches.get('type') == str(type['event_type_id'] and type['event_type_id'][0]) and ' active' or ''}"><t t-esc="type['event_type_id'][1]"/>
                         <span class="badge pull-right"><t t-esc="type['event_type_id_count']"/></span>
                     </a>
                 </li>
@@ -176,15 +176,15 @@
 
 <template id="event_location" inherit_id="website_event.event_left_column" active="False" customize_show="True" name="Filter by Country">
     <xpath expr="//div[@id='left_column']" position="inside">
-        <ul class="nav nav-pills nav-stacked mt32">
+        <ul class="nav nav-pills flex-column mt32">
             <t t-foreach="countries" t-as="country">
-                <li t-if="country['country_id']" t-att-class="searches.get('country') == str(country['country_id'] and country['country_id'][0]) and 'active' or None">
-                    <a t-attf-href="/event?{{ keep_query('type', 'date', country=country['country_id'][0]) }}"><t t-esc="country['country_id'][1]"/>
+                <li t-if="country['country_id']" class="nav-item">
+                    <a t-attf-href="/event?{{ keep_query('type', 'date', country=country['country_id'][0]) }}" t-attf-class="nav-link#{searches.get('country') == str(country['country_id'] and country['country_id'][0]) and ' active' or ''}"><t t-esc="country['country_id'][1]"/>
                         <span class="badge pull-right"><t t-esc="country['country_id_count']"/></span>
                     </a>
                 </li>
-                <li t-if="not country['country_id']" t-att-class="searches.get('country') == 'online' and 'active' or None">
-                    <a t-attf-href="/event?{{ keep_query('type', 'date', country='online') }}">
+                <li t-if="not country['country_id']" class="nav-item">
+                    <a t-attf-href="/event?{{ keep_query('type', 'date', country='online') }}" t-attf-class="nav-link#{searches.get('country') == 'online' and ' active' or ''}">
                         <span>Online Events</span>
                         <span class="badge pull-right"><t t-esc="country['country_id_count']"/></span>
                     </a>
diff --git a/addons/website_event_track/views/event_track_templates.xml b/addons/website_event_track/views/event_track_templates.xml
index 312bdfee556..01ddd035357 100644
--- a/addons/website_event_track/views/event_track_templates.xml
+++ b/addons/website_event_track/views/event_track_templates.xml
@@ -160,11 +160,11 @@
 
 <template id="tracks_filter" inherit_id="website_event_track.tracks" customize_show="True" name="Filter on Tags">
     <xpath expr="//div[@id='left_column']" position="inside">
-        <ul class="nav nav-pills nav-stacked">
-            <li t-att-class="'' if searches.get('tag') else 'active'"><a t-attf-href="/event/#{ slug(event) }/track">All Tags</a></li>
+        <ul class="nav nav-pills flex-column">
+            <li class="nav-item"><a t-attf-href="/event/#{ slug(event) }/track" t-attf-class="nav-link#{'' if searches.get('tag') else ' active'}">All Tags</a></li>
             <t t-foreach="tags" t-as="tag">
-                <li t-att-class="searches.get('tag') == tag.id and 'active' or None">
-                    <a t-attf-href="/event/#{ slug(event) }/track/tag/#{ slug(tag) }">
+                <li class="nav-item">
+                    <a t-attf-href="/event/#{ slug(event) }/track/tag/#{ slug(tag) }" t-attf-class="nav-link#{searches.get('tag') == tag.id and ' active' or ''}">
                         <t t-esc="tag.name"/>
                     </a>
                 </li>
diff --git a/addons/website_forum/views/website_forum.xml b/addons/website_forum/views/website_forum.xml
index 7e5c4c3c4f3..ef38108f7d3 100644
--- a/addons/website_forum/views/website_forum.xml
+++ b/addons/website_forum/views/website_forum.xml
@@ -48,56 +48,55 @@
         </div>
 
         <div class="container mt16 website_forum">
-            <div class="navbar navbar-default">
-                <div class="navbar-header">
-                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#oe-help-navbar-collapse">
-                        <span class="sr-only">Toggle navigation</span>
-                        <span class="icon-bar"></span>
-                        <span class="icon-bar"></span>
-                    </button>
-                    <a class="navbar-brand" t-attf-href="/forum/#{slug(forum)}">
-                        <span t-field="forum.name"/>
-                    </a>
-                </div>
+            <div class="navbar navbar-expand-md navbar-light bg-light">
+                <a class="navbar-brand" t-attf-href="/forum/#{slug(forum)}">
+                    <span t-field="forum.name"/>
+                </a>
+                <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#oe-help-navbar-collapse">
+                    <span class="navbar-toggler-icon"/>
+                </button>
                 <div class="collapse navbar-collapse" id="oe-help-navbar-collapse">
-                    <ul class="nav navbar-nav">
-                        <li t-att-class="sorting == 'relevancy desc' and 'active' or None ">
-                            <a t-attf-href="/forum/#{ slug(forum) }?{{ keep_query( 'search', 'post_type', 'filters', sorting='relevancy desc') }}">Trending</a>
+                    <ul class="navbar-nav">
+                        <li class="nav-item">
+                            <a t-attf-href="/forum/#{ slug(forum) }?{{ keep_query( 'search', 'post_type', 'filters', sorting='relevancy desc') }}"
+                                t-attf-class="nav-link#{sorting == 'relevancy desc' and ' active' or ''}">Trending</a>
                         </li>
-                        <li t-att-class="sorting == 'create_date desc' and 'active' or None ">
-                            <a t-attf-href="/forum/#{ slug(forum) }?{{ keep_query( 'search', 'post_type', 'filters', sorting='create_date desc') }}">Newest</a>
+                        <li class="nav-item">
+                            <a t-attf-href="/forum/#{ slug(forum) }?{{ keep_query( 'search', 'post_type', 'filters', sorting='create_date desc') }}"
+                                t-attf-class="nav-link#{sorting == 'create_date desc' and ' active' or ''}">Newest</a>
                         </li>
-                        <li t-att-class="searches.get('users') and 'active' or None ">
-                            <a t-attf-href="/forum/#{ slug(forum) }/users">People</a>
+                        <li class="nav-item">
+                            <a t-attf-href="/forum/#{ slug(forum) }/users"
+                                t-attf-class="nav-link#{searches.get('users') and ' active' or ''}">People</a>
                         </li>
-                        <li t-att-class="searches.get('tags') and 'active' or None ">
-                            <a t-attf-href="/forum/#{ slug(forum) }/tag">Tags</a>
+                        <li class="nav-item">
+                            <a t-attf-href="/forum/#{ slug(forum) }/tag"
+                                t-attf-class="nav-link#{searches.get('tags') and ' active' or ''}">Tags</a>
                         </li>
-                        <li t-att-class="searches.get('badges') and 'active' or None ">
-                            <a t-attf-href="/forum/#{ slug(forum) }/badge">Badges</a>
+                        <li class="nav-item">
+                            <a t-attf-href="/forum/#{ slug(forum) }/badge"
+                                t-attf-class="nav-link#{searches.get('badges') and ' active' or ''}">Badges</a>
                         </li>
                     </ul>
-                    <ul class="nav navbar-nav navbar-right">
-                        <li t-if="not is_public_user" t-att-class="searches.get('my_profile') and 'active' or None ">
-                            <a t-attf-href="/forum/#{ slug(forum) }/user/#{uid}">
+                    <ul class="navbar-nav ml-auto">
+                        <li t-if="not is_public_user" class="nav-item">
+                            <a t-attf-href="/forum/#{ slug(forum) }/user/#{uid}" t-attf-class="nav-link#{searches.get('my_profile') and ' active' or ''}">
                                 <span t-field="user_id.name"/> (k: <t t-esc="user_id.karma"/>)
                             </a>
                         </li>
-                        <li>
-                            <form class="navbar-form" role="search" t-attf-action="/forum/#{ slug(forum) }" method="get">
-                                <t t-call="website.website_search_box"/>
-                                <span class="dropdown" groups="base.group_erp_manager">
-                                    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
-                                        <i class="fa fa-cog" role="img" aria-label="Dropdown menu" title="Dropdown menu"/>
-                                    </button>
-                                    <div class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
-                                        <a role="menuitem" tabindex="-1" t-attf-href="/forum/#{slug(forum)}/edit_welcome_message?enable_editor=1" class="dropdown-item">Design Welcome Message</a>
-                                        <a role="menuitem" tabindex="-1" t-attf-href="/web#id=#{forum.id}&amp;view_type=form&amp;model=forum.forum" class="dropdown-item">Forum Settings</a>
-                                    </div>
-                                </span>
-                            </form>
-                        </li>
                     </ul>
+                    <form class="form-inline ml-1" role="search" t-attf-action="/forum/#{ slug(forum) }" method="get">
+                        <t t-call="website.website_search_box"/>
+                        <div class="dropdown ml-1" groups="base.group_erp_manager">
+                            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
+                                <i class="fa fa-cog" role="img" aria-label="Dropdown menu" title="Dropdown menu"/>
+                            </button>
+                            <div class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
+                                <a role="menuitem" tabindex="-1" t-attf-href="/forum/#{slug(forum)}/edit_welcome_message?enable_editor=1" class="dropdown-item">Design Welcome Message</a>
+                                <a role="menuitem" tabindex="-1" t-attf-href="/web#id=#{forum.id}&amp;view_type=form&amp;model=forum.forum" class="dropdown-item">Forum Settings</a>
+                            </div>
+                        </div>
+                    </form>
                 </div>
             </div>
         </div>
@@ -1427,26 +1426,26 @@
         </div>
 
         <ul class="nav nav-tabs" role="tablist">
-            <li class="active">
-                <a role="tab" aria-controls="questions" href="#questions" data-toggle="tab"><t t-esc="count_questions"/> Questions</a>
+            <li class="nav-item">
+                <a role="tab" aria-controls="questions" href="#questions" class="nav-link active" data-toggle="tab"><t t-esc="count_questions"/> Questions</a>
             </li>
-            <li>
-                <a role="tab" aria-controls="answers" href="#answers" data-toggle="tab"><t t-esc="count_answers"/> Answers</a>
+            <li class="nav-item">
+                <a role="tab" aria-controls="answers" href="#answers" class="nav-link" data-toggle="tab"><t t-esc="count_answers"/> Answers</a>
             </li>
-            <li t-if="uid == user.id">
-                <a role="tab" aria-controls="favourite_question" href="#favourite_question" data-toggle="tab"><t t-esc="len(favourite)"/> Favourite Questions</a>
+            <li t-if="uid == user.id" class="nav-item">
+                <a role="tab" aria-controls="favourite_question" href="#favourite_question" class="nav-link" data-toggle="tab"><t t-esc="len(favourite)"/> Favourite Questions</a>
             </li>
-            <li t-if="uid == user.id">
-                <a role="tab" aria-controls="followed_question" href="#followed_question" data-toggle="tab"><t t-esc="len(followed)"/> Followed Questions</a>
+            <li t-if="uid == user.id" class="nav-item">
+                <a role="tab" aria-controls="followed_question" href="#followed_question" class="nav-link" data-toggle="tab"><t t-esc="len(followed)"/> Followed Questions</a>
             </li>
-            <li t-if="uid == user.id">
-                <a role="tab" aria-controls="activity" href="#activity" data-toggle="tab">Activity</a>
+            <li t-if="uid == user.id" class="nav-item">
+                <a role="tab" aria-controls="activity" href="#activity" class="nav-link" data-toggle="tab">Activity</a>
             </li>
-            <li>
-                <a role="tab" aria-controls="badges" href="#badges" data-toggle="tab">Badges</a>
+            <li class="nav-item">
+                <a role="tab" aria-controls="badges" href="#badges" class="nav-link" data-toggle="tab">Badges</a>
             </li>
-            <li t-if="uid == user.id">
-                <a role="tab" aria-controls="votes" href="#votes" data-toggle="tab">Votes</a>
+            <li t-if="uid == user.id" class="nav-item">
+                <a role="tab" aria-controls="votes" href="#votes" class="nav-link" data-toggle="tab">Votes</a>
             </li>
         </ul>
         <div class="tab-content mt16">
diff --git a/addons/website_forum_doc/views/website_doc.xml b/addons/website_forum_doc/views/website_doc.xml
index 590975fa063..c241ef8ef76 100644
--- a/addons/website_forum_doc/views/website_doc.xml
+++ b/addons/website_forum_doc/views/website_doc.xml
@@ -59,7 +59,7 @@
                             </ol>
                         </div>
                         <div class="col-sm-4 text-right">
-                            <form class="navbar-form navbar-right mt0" role="search" t-attf-action="/forum/#{ slug(forum) }" method="get">
+                            <form class="navbar-form ml-auto mt0" role="search" t-attf-action="/forum/#{ slug(forum) }" method="get">
                                 <div class="form-group">
                                     <input type="search" class="form-control"
                                         name="search" placeholder="Search..."
@@ -98,7 +98,7 @@
                             </ol>
                         </div>
                         <div class="col-sm-4 text-right" t-if="forum">
-                            <form class="navbar-form navbar-right mt0" role="search" t-attf-action="/forum/#{ slug(forum) }" method="get">
+                            <form class="navbar-form ml-auto mt0" role="search" t-attf-action="/forum/#{ slug(forum) }" method="get">
                                 <div class="form-group">
                                     <input type="search" class="form-control"
                                         name="search" placeholder="Search..."
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 9206577c5d8..b1ca407e8ef 100644
--- a/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml
+++ b/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml
@@ -444,11 +444,12 @@
 
 <template id="job_countries" inherit_id="website_hr_recruitment.index" active="False" customize_show="True" name="Filter by Countries">
     <xpath expr="//div[@id='jobs_grid_left']" position="inside">
-        <ul class="nav nav-pills nav-stacked mb32">
-            <li t-att-class=" '' if country_id else 'active' "><a t-attf-href="/jobs#{ '/department/%s' % slug(department_id) if department_id else '' }#{ '/office/%s' % office_id if office_id else '' }?all_countries=1">All Countries</a></li>
+        <ul class="nav nav-pills flex-column mb32">
+            <li class="nav-item"><a t-attf-href="/jobs#{ '/department/%s' % slug(department_id) if department_id else '' }#{ '/office/%s' % office_id if office_id else '' }?all_countries=1" t-attf-class="nav-link#{'' if country_id else ' active'}">All Countries</a></li>
             <t t-foreach="countries" t-as="country">
-                <li t-att-class="'active' if country_id and country_id.id == country.id else None">
-                    <a t-attf-href="/jobs/country/#{ slug(country) }#{ '/department/%s' % slug(department_id) if department_id else '' }#{ '/office/%s' % office_id if office_id else '' }" ><span t-field="country.name"/></a>
+                <li class="nav-item">
+                    <a t-attf-href="/jobs/country/#{ slug(country) }#{ '/department/%s' % slug(department_id) if department_id else '' }#{ '/office/%s' % office_id if office_id else '' }"
+                        t-attf-class="nav-link#{' active' if country_id and country_id.id == country.id else ''}"><span t-field="country.name"/></a>
                 </li>
             </t>
         </ul>
@@ -463,11 +464,11 @@
 
 <template id="job_departments" inherit_id="website_hr_recruitment.index" active="False" customize_show="True" name="Filter by Departments">
     <xpath expr="//div[@id='jobs_grid_left']" position="inside">
-        <ul class="nav nav-pills nav-stacked mb32">
-            <li t-att-class=" '' if department_id else 'active' "><a t-attf-href="/jobs#{ '/country/%s' % slug(country_id) if country_id else '' }#{ '/office/%s' % office_id if office_id else '' }">All Departments</a></li>
+        <ul class="nav nav-pills flex-column mb32">
+            <li class="nav-item"><a t-attf-href="/jobs#{ '/country/%s' % slug(country_id) if country_id else '' }#{ '/office/%s' % office_id if office_id else ''}" t-attf-class="nav-link#{'' if department_id else ' active'}">All Departments</a></li>
             <t t-foreach="departments" t-as="department">
-                <li t-att-class="'active' if department_id and department_id.id == department.id else None">
-                    <a t-attf-href="/jobs#{ '/country/%s' % slug(country_id) if country_id else '' }/department/#{ slug(department) }#{ '/office/%s' % office_id if office_id else '' }" ><span t-field="department.name"/></a>
+                <li class="nav-item">
+                    <a t-attf-href="/jobs#{ '/country/%s' % slug(country_id) if country_id else '' }/department/#{ slug(department) }#{ '/office/%s' % office_id if office_id else '' }" t-attf-class="nav-link#{' active' if department_id and department_id.id == department.id else ''}"><span t-field="department.name"/></a>
                 </li>
             </t>
         </ul>
@@ -482,11 +483,12 @@
 
 <template id="job_offices" inherit_id="website_hr_recruitment.index" active="False" customize_show="True" name="Filter by Offices">
     <xpath expr="//div[@id='jobs_grid_left']" position="inside">
-        <ul class="nav nav-pills nav-stacked mb32">
-            <li t-att-class=" '' if office_id else 'active' "><a t-attf-href="/jobs#{ '/country/%s' % slug(country_id) if country_id else '' }#{ '/department/%s' % slug(department_id) if department_id else '' }">All Offices</a></li>
+        <ul class="nav nav-pills flex-column mb32">
+            <li class="nav-item"><a t-attf-href="/jobs#{ '/country/%s' % slug(country_id) if country_id else '' }#{ '/department/%s' % slug(department_id) if department_id else '' }" t-attf-class="nav-link#{'' if office_id else ' active'}">All Offices</a></li>
             <t t-foreach="offices" t-as="thisoffice">
-                <li t-att-class=" 'active' if office_id == thisoffice.id else None ">
-                    <a t-attf-href="/jobs#{ '/country/%s' % slug(country_id) if country_id else '' }#{ '/department/%s' % slug(department_id) if department_id else '' }/office/#{ thisoffice.id }" >
+                <li class="nav-item">
+                    <a t-attf-href="/jobs#{ '/country/%s' % slug(country_id) if country_id else '' }#{ '/department/%s' % slug(department_id) if department_id else '' }/office/#{ thisoffice.id }"
+                        t-attf-class="nav-link#{' active' if office_id == thisoffice.id else ''}">
                         <span t-field="thisoffice.city"/><t t-if="thisoffice.country_id">,
                             <span t-field="thisoffice.country_id.name"/>
                         </t>
diff --git a/addons/website_links/views/website_links_graphs.xml b/addons/website_links/views/website_links_graphs.xml
index 63d9752c116..c58569829d4 100644
--- a/addons/website_links/views/website_links_graphs.xml
+++ b/addons/website_links/views/website_links_graphs.xml
@@ -107,9 +107,9 @@
                         <h1 class="page-header">Statistics
                             <small class="pull-right d-none d-md-block mt16" id="filters">
                                 <ul class="nav nav-tabs nav-tabs-inline graph-tabs" role="tablist">
-                                    <li class="active"><a aria-controls="all_time_charts" href="#all_time_charts" role="tab" data-toggle="tab">All Time</a></li>
-                                    <li><a aria-controls="last_month_charts" href="#last_month_charts" role="tab" data-toggle="tab">Last Month</a></li>
-                                    <li><a aria-controls="last_week_charts" href="#last_week_charts" 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-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>
                                 </ul>
                             </small>
                         </h1>
diff --git a/addons/website_links/views/website_links_template.xml b/addons/website_links/views/website_links_template.xml
index 3c7b329db56..04614feb8eb 100644
--- a/addons/website_links/views/website_links_template.xml
+++ b/addons/website_links/views/website_links_template.xml
@@ -88,9 +88,9 @@
                     <h2 class="page-header">Your tracked links
                         <small class="pull-right d-none d-md-block mt16" id="filters">
                             <ul class="nav nav-tabs nav-tabs-inline graph-tabs" role="tablist">
-                                <li class="active"><a aria-controls="filter-newest-links" href="#" id="filter-newest-links" role="tab" data-toggle="tab">Newest</a></li>
-                                <li><a aria-controls="filter-most-clicked-links" href="#" id="filter-most-clicked-links" role="tab" data-toggle="tab">Most Clicked</a></li>
-                                <li><a aria-controls="filter-recently-used-links" href="#" 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-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>
                             </ul>
                         </small>
                     </h2>
diff --git a/addons/website_mail_channel/views/website_mail_channel_templates.xml b/addons/website_mail_channel/views/website_mail_channel_templates.xml
index b4bd07bc451..64cee98faf1 100644
--- a/addons/website_mail_channel/views/website_mail_channel_templates.xml
+++ b/addons/website_mail_channel/views/website_mail_channel_templates.xml
@@ -103,16 +103,17 @@
                 </div>
                 <div class="col-md-3">
                     <h2>Archives</h2>
-                    <ul class="nav nav-pills nav-stacked" id="group_mode">
-                        <li t-attf-class="#{mode=='thread' and 'active' or ''}">
-                            <a t-attf-href="/groups/#{ slug(group) }?mode=thread">By thread</a>
+                    <ul class="nav nav-pills flex-column" id="group_mode">
+                        <li class="nav-item">
+                            <a t-attf-href="/groups/#{ slug(group) }?mode=thread" t-attf-class="nav-link#{mode=='thread' and ' active' or ''}">By thread</a>
                         </li>
-                        <li t-attf-class="#{mode=='date' and not date_begin and 'active' or ''}">
-                            <a t-attf-href="/groups/#{ slug(group) }?mode=date">By date</a>
-                            <ul class="nav nav-pills nav-stacked" style="margin-left: 8px;">
+                        <li class="nav-item">
+                            <a t-attf-href="/groups/#{ slug(group) }?mode=date" t-attf-class="nav-link#{mode=='date' and not date_begin and ' active' or ''}">By date</a>
+                            <ul class="nav nav-pills flex-column" style="margin-left: 8px;">
                                 <t t-foreach="archives" t-as="month_archive">
-                                <li t-att-class="month_archive['date_begin'] == date_begin and 'active' or None">
-                                    <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']}">
+                                <li class="nav-item">
+                                    <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="nav-link#{month_archive['date_begin'] == date_begin and ' active' or ''}">
                                         <t t-esc="month_archive['date']"/>
                                         <span class="pull-right badge" t-esc="month_archive['date_count']"/>
                                     </a>
@@ -164,16 +165,17 @@
             <div class="row">
                 <div class="col-md-3">
                     <h4>Browse archives</h4>
-                    <ul class="nav nav-pills nav-stacked" id="group_mode">
-                        <li t-attf-class="#{mode=='thread' and 'active' or ''}">
-                            <a t-attf-href="/groups/#{ slug(group) }?mode=thread">By thread</a>
+                    <ul class="nav nav-pills flex-column" id="group_mode">
+                        <li class="nav-item">
+                            <a t-attf-href="/groups/#{ slug(group) }?mode=thread" t-attf-class="nav-link#{mode=='thread' and ' active' or ''}">By thread</a>
                         </li>
-                        <li t-attf-class="#{mode=='date' and not date_begin and 'active' or ''}">
-                            <a t-attf-href="/groups/#{ slug(group) }?mode=date">By date</a>
-                            <ul class="nav nav-pills nav-stacked" style="margin-left: 8px;">
+                        <li class="nav-item">
+                            <a t-attf-href="/groups/#{ slug(group) }?mode=date" t-attf-class="nav-link#{mode=='date' and not date_begin and ' active' or ''}">By date</a>
+                            <ul class="nav nav-pills flex-column" style="margin-left: 8px;">
                                 <t t-foreach="archives" t-as="month_archive">
-                                <li t-att-class="month_archive['date_begin'] == date_begin and 'active' or None">
-                                    <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']}">
+                                <li class="nav-item">
+                                    <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="nav-link#{month_archive['date_begin'] == date_begin and ' active' or ''}">
                                         <t t-esc="month_archive['date']"/>
                                         <span class="pull-right badge" t-esc="month_archive['date_count']"/>
                                     </a>
diff --git a/addons/website_membership/views/website_membership_templates.xml b/addons/website_membership/views/website_membership_templates.xml
index 9f7663541a3..b8a527ddf5e 100644
--- a/addons/website_membership/views/website_membership_templates.xml
+++ b/addons/website_membership/views/website_membership_templates.xml
@@ -21,12 +21,13 @@
                 <div class="row">
 
             <div class="col-md-3 mb32" id="left_column">
-                <ul class="nav nav-pills nav-stacked mt16">
-                    <li class="nav-header"><h3>Associations</h3></li>
-                    <li t-att-class="'' if membership_id else 'active'"><a href="/members">All</a></li>
+                <ul class="nav nav-pills flex-column mt16">
+                    <li class="nav-header nav-item"><h3>Associations</h3></li>
+                    <li class="nav-item"><a href="/members" class="nav-link#{'' if membership_id else ' active'}">All</a></li>
                     <t t-foreach="memberships_data" t-as="membership_data">
-                        <li t-att-class="membership_id and membership_data['id'] == membership_id and 'active' or None">
-                            <a t-attf-href="/members/association/#{ membership_data['id'] }#{current_country and '/country/%s' % slug(current_country) or ''}#{ search }"><t t-esc="membership_data['name']"/></a>
+                        <li class="nav-item">
+                            <a t-attf-href="/members/association/#{ membership_data['id'] }#{current_country and '/country/%s' % slug(current_country) or ''}#{ search }"
+                                t-attf-class="nav-link#{membership_id and membership_data['id'] == membership_id and ' active' or ''}"><t t-esc="membership_data['name']"/></a>
                         </li>
                     </t>
                 </ul>
@@ -79,11 +80,12 @@
 <template id="opt_index_country" name="Location"
         customize_show="True" inherit_id="website_membership.index">
     <xpath expr="//div[@id='left_column']/ul[1]" position="after">
-        <ul class="nav nav-pills nav-stacked mt16">
-            <li class="nav-header"><h3>Location</h3></li>
+        <ul class="nav nav-pills flex-column mt16">
+            <li class="nav-header nav-item"><h3>Location</h3></li>
             <t t-foreach="countries" t-as="country">
-                <li t-if="country['country_id']" t-att-class="country['country_id'] and country['country_id'][0] == current_country_id and 'active' or None">
-                    <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 t-esc="country['country_id'][1]"/>
+                <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 pull-right"><t t-esc="country['country_id_count'] or '0'"/></span>
                     </a>
                 </li>
diff --git a/addons/website_quote/views/website_quote_templates.xml b/addons/website_quote/views/website_quote_templates.xml
index 3f423e6761d..60f43f024f9 100644
--- a/addons/website_quote/views/website_quote_templates.xml
+++ b/addons/website_quote/views/website_quote_templates.xml
@@ -594,7 +594,7 @@
   <template id="navigation_menu">
     <div class="navspy" t-ignore="true" role="complementary">
         <ul class="nav bs-sidenav" data-id="quote_sidebar">
-            <li><a href="#introduction">Introduction</a></li>
+            <li class="nav-item"><a href="#introduction" class="nav-link">Introduction</a></li>
         </ul>
     </div>
   </template>
diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index 9a863f4e481..40717653c87 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -40,9 +40,9 @@
     <template id="header" inherit_id="website.layout" name="Header Shop My Cart Link">
         <xpath expr="//header//ul[@id='top_menu']/li" position="before">
             <t t-set="website_sale_order" t-value="website.sale_get_order()" />
-            <li class="divider d-none"/> <!-- Make sure the cart and related menus are not folded (see autohideMenu) -->
-            <li id="my_cart" t-att-class="'' if website_sale_order and website_sale_order.cart_quantity else 'd-none'">
-                <a href="/shop/cart">
+            <li class="nav-item divider d-none"/> <!-- Make sure the cart and related menus are not folded (see autohideMenu) -->
+            <li id="my_cart" t-attf-class="nav-item#{'' if website_sale_order and website_sale_order.cart_quantity else ' d-none'}">
+                <a href="/shop/cart" class="nav-link">
                     <i class="fa fa-shopping-cart"></i>
                     My Cart <sup t-attf-class="my_cart_quantity label label-primary" t-esc="website_sale_order and website_sale_order.cart_quantity or ''" />
                 </a>
@@ -268,9 +268,9 @@
 
     <!-- Add to cart button-->
     <template id="categories_recursive" name="Category list">
-        <li t-att-class="'active' if c.id == int(category or 0) else None">
-            <a t-att-href="keep('/shop/category/' + slug(c), category=0)" t-field="c.name"></a>
-            <ul t-if="c.child_id" class="nav nav-pills nav-stacked nav-hierarchy">
+        <li class="nav-item">
+            <a t-att-href="keep('/shop/category/' + slug(c), category=0)" t-field="c.name" t-attf-class="nav-link#{' active' if c.id == int(category or 0) else ''}"></a>
+            <ul t-if="c.child_id" class="nav nav-pills flex-column nav-hierarchy">
                 <t t-foreach="c.child_id" t-as="c">
                     <t t-call="website_sale.categories_recursive" />
                 </t>
@@ -280,9 +280,9 @@
 
     <template id="products_categories" inherit_id="website_sale.products" active="False" customize_show="True" name="eCommerce Categories">
         <xpath expr="//div[@id='products_grid_before']" position="inside">
-            <ul class="nav nav-pills nav-stacked mt16">
-                <li t-att-class=" '' if category else 'active' ">
-                    <a t-att-href="keep('/shop',category=0)" class="o_not_editable">All Products</a>
+            <ul class="nav nav-pills flex-column mt16">
+                <li class="nav-item">
+                    <a t-att-href="keep('/shop',category=0)" t-attf-class="nav-link#{'' if category else ' active'} o_not_editable">All Products</a>
                 </li>
                 <t t-foreach="categories" t-as="c">
                     <t t-call="website_sale.categories_recursive" />
@@ -298,12 +298,12 @@
     </template>
 
     <template id="option_collapse_categories_recursive" name="Collapse Category Recursive">
-        <li t-att-class="'active' if categ.id == int(category or 0) else None">
+        <li class="nav-item">
             <i t-if="categ.child_id" t-attf-class="text-primary fa #{'fa-chevron-down' if categ.id in parent_category_ids else 'fa-chevron-right'}"
                t-attf-title="#{'Unfold' if categ.id in parent_category_ids else 'Fold'}"
                t-attf-aria-label="#{'Unfold' if categ.id in parent_category_ids else 'Fold'}" role="img"/>
-            <a t-att-href="keep('/shop/category/' + slug(categ), category=0)" t-field="categ.name"></a>
-            <ul t-if="categ.child_id" class="nav nav-pills nav-stacked nav-hierarchy" t-att-style="'display:block;' if categ.id in parent_category_ids else 'display:none;'">
+            <a t-att-href="keep('/shop/category/' + slug(categ), category=0)" t-attf-class="nav-link#{' active' if categ.id == int(category or 0) else ''}" t-field="categ.name"></a>
+            <ul t-if="categ.child_id" class="nav nav-pills flex-column nav-hierarchy" t-att-style="'display:block;' if categ.id in parent_category_ids else 'display:none;'">
                 <t t-foreach="categ.child_id" t-as="categ">
                     <t t-call="website_sale.option_collapse_categories_recursive" />
                 </t>
@@ -313,9 +313,9 @@
 
     <template id="option_collapse_products_categories" name="Collapsible Category List" inherit_id="website_sale.products_categories" active="False" customize_show="True">
         <xpath expr="//div[@id='products_grid_before']/ul" position="replace">
-            <ul class="nav nav-pills nav-stacked mt16" id="o_shop_collapse_category">
-                <li t-att-class=" '' if category else 'active' ">
-                    <a t-att-href="keep('/shop',category=0)" class="o_not_editable">All Products</a>
+            <ul class="nav nav-pills flex-column mt16" id="o_shop_collapse_category">
+                <li class="nav-item">
+                    <a t-att-href="keep('/shop',category=0)" t-attf-class="nav-link#{'' if category else ' active'} o_not_editable">All Products</a>
                 </li>
                 <t t-foreach="categories" t-as="categ">
                     <t t-call="website_sale.option_collapse_categories_recursive" />
@@ -328,9 +328,9 @@
         <xpath expr="//div[@id='products_grid_before']" position="inside">
             <form class="js_attributes" method="get">
                 <input type="hidden" name="search" t-att-value="search" />
-                <ul class="nav nav-pills nav-stacked mt16">
+                <ul class="nav nav-pills flex-column mt16">
                     <t t-foreach="attributes" t-as="a">
-                        <li t-if="a.value_ids and len(a.value_ids) &gt; 1">
+                        <li t-if="a.value_ids and len(a.value_ids) &gt; 1" class="nav-item">
                             <div>
                                 <strong t-field="a.name" />
                             </div>
@@ -343,10 +343,10 @@
                                 </select>
                             </t>
                             <t t-if="a.type == 'radio'">
-                                <ul class="nav nav-pills nav-stacked">
+                                <ul class="nav nav-pills flex-column">
                                     <t t-foreach="a.value_ids" t-as="v">
-                                        <li t-att-class="'active' if v.id in attrib_set else None">
-                                            <label style="margin: 0 20px;">
+                                        <li class="nav-item">
+                                            <label style="margin: 0 20px;" t-attf-class="nav-link#{' active' if v.id in attrib_set else ''}">
                                                 <input type="checkbox" name="attrib" t-att-value="'%s-%s' % (a.id,v.id)" t-att-checked="'checked' if v.id in attrib_set else None" />
                                                 <span style="font-weight: normal" t-field="v.name" />
                                             </label>
@@ -468,7 +468,7 @@
                                     <t t-placeholder="select">
                                         <input type="hidden" class="product_id" name="product_id" t-att-value="product.product_variant_id.id if len(product.product_variant_ids) == 1 else '0'" />
                                         <t t-call="website_sale.variants">
-                                            <t t-set="ul_class" t-value="'nav-stacked'" />
+                                            <t t-set="ul_class" t-value="'flex-column'" />
                                         </t>
                                     </t>
                                     <t t-call="website_sale.product_price" />
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 ea92a3bbf97..7f8c824a26a 100644
--- a/addons/website_sale_wishlist/views/website_sale_wishlist_template.xml
+++ b/addons/website_sale_wishlist/views/website_sale_wishlist_template.xml
@@ -29,8 +29,8 @@
         <xpath expr="//header//ul[@id='top_menu']/li[@id='my_cart']" position="after">
             <t t-if="request.env.ref('website_sale_wishlist.add_to_wishlist').active">
                 <t t-set='wishcount' t-value="len(request.env['product.wishlist'].current())"/>
-                <li id="my_wish" t-att-style="not wishcount and 'display:none;'">
-                    <a href="/shop/wishlist">
+                <li id="my_wish" class="nav-item" t-att-style="not wishcount and 'display:none;'">
+                    <a href="/shop/wishlist" class="nav-link">
                         <i class="fa fa-heart"/>
                         Wishlist <sup t-attf-class="my_wish_quantity o_animate_blink label label-primary"><t t-esc='wishcount'/></sup>
                     </a>
diff --git a/addons/website_slides/static/src/scss/website_slides.scss b/addons/website_slides/static/src/scss/website_slides.scss
index 2bc4681d451..4e6e1b9fe7d 100644
--- a/addons/website_slides/static/src/scss/website_slides.scss
+++ b/addons/website_slides/static/src/scss/website_slides.scss
@@ -8,7 +8,7 @@ $panel-footer-bg: #f5f5f5 !default;
 $nav-link-hover-bg: #FFFFFF !default;
 $navbar-default-link-color: #777 !default;
 $navbar-default-link-hover-color: #333 !default;
-$navbar-default-bg: #f8f8f8 !default;
+$light: #f8f8f8 !default;
 $MAX-Z-INDEX : 2147483647 !default;
 
 @mixin top-covered-image {
@@ -17,7 +17,7 @@ $MAX-Z-INDEX : 2147483647 !default;
 }
 
 .oe_slides_panel_footer {
-    background-color: $navbar-default-bg;
+    background-color: $light;
 }
 
 .oe_slides_panel_footer .fa, .oe_slide_js_embed_option_link{
diff --git a/addons/website_slides/views/website_slides.xml b/addons/website_slides/views/website_slides.xml
index e0da8b660f7..5636f6882bc 100644
--- a/addons/website_slides/views/website_slides.xml
+++ b/addons/website_slides/views/website_slides.xml
@@ -123,26 +123,31 @@
                 <!-- Navigation -->
                 <div class="col-md-8 col-sm-12 col-xs-12">
                     <ul class="nav nav-tabs nav-tabs-border" role="tablist">
-                        <li t-attf-class="#{not slide_type and 'active' ''}">
-                            <a  t-attf-href="/slides/#{slug(channel)}#{category and '/category/' + slug(category) or ''}"> <i class="fa fa-home"/> Home</a>
+                        <li class="nav-item">
+                            <a t-attf-href="/slides/#{slug(channel)}#{category and '/category/' + slug(category) or ''}"
+                                t-attf-class="nav-link#{not slide_type and ' active' or ''}"> <i class="fa fa-home"/> Home</a>
                         </li>
-                        <li t-if="header_object.nbr_presentations" t-attf-class="#{slide_type == 'presentation' and 'active' ''}">
-                            <a t-attf-href="/slides/#{slug(channel)}#{category and '/category/' + slug(category) or ''}/presentation">
+                        <li t-if="header_object.nbr_presentations" class="nav-item">
+                            <a t-attf-href="/slides/#{slug(channel)}#{category and '/category/' + slug(category) or ''}/presentation"
+                                t-attf-class="nav-link#{slide_type == 'presentation' and ' active' or ''}">
                                 <span class="badge" t-esc="header_object.nbr_presentations"/> Presentations
                             </a>
                         </li>
-                        <li t-if="header_object.nbr_videos" t-attf-class="#{slide_type == 'video' and 'active' ''}">
-                            <a t-attf-href="/slides/#{slug(channel)}#{category and '/category/' + slug(category) or ''}/video">
+                        <li t-if="header_object.nbr_videos" class="nav-item">
+                            <a t-attf-href="/slides/#{slug(channel)}#{category and '/category/' + slug(category) or ''}/video"
+                                t-attf-class="nav-link#{slide_type == 'video' and ' active' or ''}">
                                 <span class="badge" t-esc="header_object.nbr_videos"/> Videos
                             </a>
                         </li>
-                        <li t-if="header_object.nbr_documents" t-attf-class="li #{slide_type == 'document' and 'active' ''}">
-                            <a t-attf-href="/slides/#{slug(channel)}#{category and '/category/' + slug(category) or ''}/document">
+                        <li t-if="header_object.nbr_documents" class="li nav-item">
+                            <a t-attf-href="/slides/#{slug(channel)}#{category and '/category/' + slug(category) or ''}/document"
+                                t-attf-class="nav-link#{slide_type == 'document' and ' active' or ''}">
                                 <span class="badge" t-esc="header_object.nbr_documents"/> Documents
                             </a>
                         </li>
-                        <li t-if="header_object.nbr_infographics" t-attf-class="#{slide_type == 'infographic' and 'active' ''}">
-                            <a t-attf-href="/slides/#{slug(channel)}#{category and '/category/' + slug(category) or ''}/infographic">
+                        <li t-if="header_object.nbr_infographics" class="nav-item">
+                            <a t-attf-href="/slides/#{slug(channel)}#{category and '/category/' + slug(category) or ''}/infographic"
+                                t-attf-class="nav-link#{slide_type == 'infographic' and ' active' or ''}">
                                 <span class="badge" t-esc="header_object.nbr_infographics"/> Infographics
                             </a>
                         </li>
@@ -477,28 +482,28 @@
                         </div>
                         <div class="mt8 mb32">
                             <ul class="nav nav-tabs" role="tablist">
-                                <li t-att-class="not comments and 'active' or None">
-                                    <a aria-controls="about" href="#about" role="tab" data-toggle="tab">
+                                <li class="nav-item">
+                                    <a href="#about" aria-controls="about" t-attf-class="nav-link#{not comments and ' active' or ''}" role="tab" data-toggle="tab">
                                         <i class="fa fa-home"></i> About
                                     </a>
                                 </li>
-                                <li>
-                                    <a aria-controls="share" href="#share" role="tab" data-toggle="tab">
+                                <li class="nav-item">
+                                    <a href="#share" aria-controls="share" class="nav-link" role="tab" data-toggle="tab">
                                         <i class="fa fa-share-alt"></i> Share
                                     </a>
                                 </li>
-                                <li t-att-class="comments and 'active' or None">
-                                    <a aria-controls="discuss" href="#discuss" role="tab" data-toggle="tab">
+                                <li class="nav-item">
+                                    <a href="#discuss" aria-controls="discuss" t-attf-class="nav-link#{comments and ' active' or ''}" role="tab" data-toggle="tab">
                                         <i class="fa fa-comments-o"></i> Comments
                                     </a>
                                 </li>
-                                <li>
-                                    <a aria-controls="transcript" href="#transcript" role="tab" data-toggle="tab">
+                                <li class="nav-item">
+                                    <a href="#transcript" aria-controls="transcript" class="nav-link" role="tab" data-toggle="tab">
                                         <i class="fa fa-align-justify"></i> Transcript
                                     </a>
                                 </li>
-                                <li>
-                                    <a aria-controls="statistic" href="#statistic" role="tab" data-toggle="tab">
+                                <li class="nav-item">
+                                    <a href="#statistic" aria-controls="statistic" class="nav-link" role="tab" data-toggle="tab">
                                         <i class="fa fa-bar-chart"></i> Statistics
                                     </a>
                                 </li>
@@ -623,8 +628,8 @@
                 </div>
                 <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                     <ul class="nav nav-tabs" role="tablist">
-                        <li class="active"><a aria-controls="related" href="#related" data-toggle="tab" role="tab">Related</a></li>
-                        <li><a aria-controls="most_viewed" href="#most_viewed" data-toggle="tab" role="tab">Most Viewed</a></li>
+                        <li class="nav-item"><a aria-controls="related" href="#related" class="nav-link active" data-toggle="tab">Related</a></li>
+                        <li class="nav-item"><a aria-controls="most_viewed" href="#most_viewed" class="nav-link" data-toggle="tab">Most Viewed</a></li>
                     </ul>
                     <div class="tab-content">
                         <div role="tabpanel" id="related" class="tab-pane active mt4">
diff --git a/odoo/addons/base/tests/test_translate.py b/odoo/addons/base/tests/test_translate.py
index a35ac6056ac..96cc3380c0a 100644
--- a/odoo/addons/base/tests/test_translate.py
+++ b/odoo/addons/base/tests/test_translate.py
@@ -158,13 +158,13 @@ class TranslationToolsTestCase(unittest.TestCase):
         terms = []
         source = """<t t-name="stuff">
                         <ul class="nav navbar-nav">
-                            <li>
-                                <a class="oe_menu_leaf" href="/web#menu_id=42&amp;action=54">
+                            <li class="nav-item">
+                                <a class="nav-link oe_menu_leaf" href="/web#menu_id=42&amp;action=54">
                                     <span class="oe_menu_text">Blah</span>
                                 </a>
                             </li>
-                            <li class="dropdown" id="menu_more_container" style="display: none;">
-                                <a class="dropdown-toggle" data-toggle="dropdown" href="#">More <b class="caret"/></a>
+                            <li class="nav-item dropdown" id="menu_more_container" style="display: none;">
+                                <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">More <b class="caret"/></a>
                                 <div class="dropdown-menu" id="menu_more"/>
                             </li>
                         </ul>
diff --git a/odoo/addons/test_new_api/static/tests/x2many.js b/odoo/addons/test_new_api/static/tests/x2many.js
index ecdab8317de..459df1c9311 100644
--- a/odoo/addons/test_new_api/static/tests/x2many.js
+++ b/odoo/addons/test_new_api/static/tests/x2many.js
@@ -179,7 +179,7 @@ odoo.define('web.test.x2many', function (require) {
     }, { // add message d
         content: "create new message d",
         trigger: '.tab-pane:eq(0) .o_field_x2many_list_row_add a',
-        extra_trigger: 'li.active a[data-toggle="tab"]:contains(Messages)',
+        extra_trigger: 'a[data-toggle="tab"].active:contains(Messages)',
     }, {
         content: "insert body",
         trigger: 'textarea[name="body"]:first',
@@ -432,7 +432,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: 'li.active a[data-toggle="tab"]:contains(Messages)',
+        extra_trigger: 'a[data-toggle="tab"].active:contains(Messages)',
     }, {
         content: "change text value",
         trigger: 'textarea[name="body"]:first',