diff --git a/addons/survey/views/survey_templates.xml b/addons/survey/views/survey_templates.xml
index 1ff77a6ca1e..23b27336629 100644
--- a/addons/survey/views/survey_templates.xml
+++ b/addons/survey/views/survey_templates.xml
@@ -13,7 +13,7 @@
 
         <t t-call="web._assets_frontend_helpers"/>
         <link href="/web/static/lib/nvd3/nv.d3.css" rel="stylesheet" type="text/css"></link>
-        <link rel="stylesheet" type="text/less" href="/web/static/src/scss/import_bootstrap.scss"/>
+        <t t-call="web._assets_bootstrap"/>
         <link rel="stylesheet" type="text/less" href="/web/static/src/scss/fonts.scss" />
         <!-- Some helper classes (like mt- mb-) are required for survey templates  -->
         <link rel="stylesheet" type="text/less" href="/web_editor/static/src/scss/web_editor.common.scss"/>
diff --git a/addons/web/static/src/scss/bootstrap_overridden_frontend.scss b/addons/web/static/src/scss/bootstrap_overridden_frontend.scss
index e69de29bb2d..19ced6c9d8f 100644
--- a/addons/web/static/src/scss/bootstrap_overridden_frontend.scss
+++ b/addons/web/static/src/scss/bootstrap_overridden_frontend.scss
@@ -0,0 +1,3 @@
+
+$black: black;
+$white: white;
diff --git a/addons/web/static/src/scss/bs_mixins_overrides.scss b/addons/web/static/src/scss/bs_mixins_overrides.scss
new file mode 100644
index 00000000000..fd08c94a217
--- /dev/null
+++ b/addons/web/static/src/scss/bs_mixins_overrides.scss
@@ -0,0 +1,38 @@
+//------------------------------------------------------------------------------
+// Bootstrap Mixins and Functions Extensions
+// Those will affect the way bootstrap is generated wherever bootstrap is used
+//------------------------------------------------------------------------------
+
+// Override background utilities so that they come with a default contrasted
+// color (especially useful in the frontend editor for example). Also modifies
+// the way .text-muted elements are rendered in those environments.
+@mixin bg-variant($parent, $color, $text-color: null) {
+    #{$parent} {
+        $-yiq-color: if($text-color, $text-color, color-yiq($color));
+        background-color: $color !important;
+        color: $-yiq-color; // not important so that text utilities still work
+
+        .text-muted {
+            color: rgba($-yiq-color, 0.4) !important;
+        }
+    }
+    a#{$parent},
+    button#{$parent} {
+        $-darken-color: darken($color, 10%);
+        @include hover-focus {
+            background-color: $-darken-color !important;
+            color: if($text-color, $text-color, color-yiq($-darken-color));
+        }
+    }
+}
+@mixin bg-gradient-variant($parent, $color, $text-color: null) {
+    #{$parent} {
+        $-yiq-color: if($text-color, $text-color, color-yiq($color));
+        background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important;
+        color: $-yiq-color;
+
+        .text-muted {
+            color: rgba($-yiq-color, 0.4) !important;
+        }
+    }
+}
diff --git a/addons/web/static/src/scss/import_bootstrap.scss b/addons/web/static/src/scss/import_bootstrap.scss
deleted file mode 100644
index cbd46a7afcf..00000000000
--- a/addons/web/static/src/scss/import_bootstrap.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import "bootstrap";
diff --git a/addons/web/static/src/scss/import_bootstrap_part1.scss b/addons/web/static/src/scss/import_bootstrap_part1.scss
new file mode 100644
index 00000000000..09f4d3579ac
--- /dev/null
+++ b/addons/web/static/src/scss/import_bootstrap_part1.scss
@@ -0,0 +1,11 @@
+
+// This file is importing bootstrap. While a simple "import "bootstrap";"
+// should be enough, this does not allow overridding mixins. Overridding mixins
+// is necessary for some of our need and allow to generate more efficient CSS
+// than adding more rules. This file instead copies the first part of the
+// content of the "bootstrap.scss" files to allow adding mixin overrides in
+// between.
+
+@import "functions";
+@import "variables";
+@import "mixins";
diff --git a/addons/web/static/src/scss/import_bootstrap_part2.scss b/addons/web/static/src/scss/import_bootstrap_part2.scss
new file mode 100644
index 00000000000..c15793019ad
--- /dev/null
+++ b/addons/web/static/src/scss/import_bootstrap_part2.scss
@@ -0,0 +1,40 @@
+
+// This file is importing bootstrap. While a simple "import "bootstrap";"
+// should be enough, this does not allow overridding mixins. Overridding mixins
+// is necessary for some of our need and allow to generate more efficient CSS
+// than adding more rules. This file instead copies the second part of the
+// content of the "bootstrap.scss" files to allow adding mixin overrides in
+// between.
+
+@import "root";
+@import "reboot";
+@import "type";
+@import "images";
+@import "code";
+@import "grid";
+@import "tables";
+@import "forms";
+@import "buttons";
+@import "transitions";
+@import "dropdown";
+@import "button-group";
+@import "input-group";
+@import "custom-forms";
+@import "nav";
+@import "navbar";
+@import "card";
+@import "breadcrumb";
+@import "pagination";
+@import "badge";
+@import "jumbotron";
+@import "alert";
+@import "progress";
+@import "media";
+@import "list-group";
+@import "close";
+@import "modal";
+@import "tooltip";
+@import "popover";
+@import "carousel";
+@import "utilities";
+@import "print";
diff --git a/addons/web/views/report_templates.xml b/addons/web/views/report_templates.xml
index 6acea265082..3782a58435f 100644
--- a/addons/web/views/report_templates.xml
+++ b/addons/web/views/report_templates.xml
@@ -5,7 +5,7 @@
     <template id="report_assets_common">
         <t t-call="web._assets_helpers"/>
 
-        <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/import_bootstrap.scss"/>
+        <t t-call="web._assets_bootstrap"/>
         <link href="/base/static/src/css/description.css" rel="stylesheet" type="text/css"/>
 
         <link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/web_editor.common.scss"/>
diff --git a/addons/web/views/webclient_templates.xml b/addons/web/views/webclient_templates.xml
index 57a580e0f13..de7dd3198f9 100644
--- a/addons/web/views/webclient_templates.xml
+++ b/addons/web/views/webclient_templates.xml
@@ -4,6 +4,7 @@
         <link rel="stylesheet" type="text/scss" href="/web/static/lib/bootstrap/scss/_functions.scss"/>
         <link rel="stylesheet" type="text/scss" href="/web/static/lib/bootstrap/scss/_mixins.scss"/>
         <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/utils.scss"/>
+        <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/bs_mixins_overrides.scss"/>
     </template>
 
     <template id="_assets_primary_variables">
@@ -35,6 +36,12 @@
         <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/bootstrap_overridden_frontend.scss"/>
     </template>
 
+    <template id="_assets_bootstrap">
+        <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/import_bootstrap_part1.scss"/>
+        <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/bs_mixins_overrides.scss"/>
+        <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/import_bootstrap_part2.scss"/>
+    </template>
+
     <template id="assets_common" name="Common Assets (used in backend interface and website)">
         <t t-call="web._assets_helpers"/>
 
@@ -128,7 +135,7 @@
     <template id="assets_backend" name="Backend Assets (used in backend interface)">
         <t t-call="web._assets_backend_helpers"/>
 
-        <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/import_bootstrap.scss"/>
+        <t t-call="web._assets_bootstrap"/>
         <link rel="stylesheet" type="text/scss" href="/web/static/lib/tempusdominus/tempusdominus.scss"/>
 
         <link rel="stylesheet" type="text/css" href="/base/static/src/css/modules.css"/>
@@ -294,7 +301,7 @@
     <template id="web.assets_frontend" name="Website Assets">
         <t t-call="web._assets_frontend_helpers"/>
 
-        <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/import_bootstrap.scss"/>
+        <t t-call="web._assets_bootstrap"/>
         <link rel="stylesheet" type="text/scss" href="/web/static/lib/tempusdominus/tempusdominus.scss"/>
 
         <script type="text/javascript" src="/web/static/src/js/services/session.js"></script>
diff --git a/addons/web_editor/controllers/main.py b/addons/web_editor/controllers/main.py
index 22a1e514d88..7dbc3415f21 100644
--- a/addons/web_editor/controllers/main.py
+++ b/addons/web_editor/controllers/main.py
@@ -285,7 +285,7 @@ class Web_Editor(http.Controller):
         if get_scss:
             # Compile regex outside of the loop
             # This will used to exclude library scss files from the result
-            excluded_url_matcher = re.compile("^(.+/lib/.+)|(.+import_bootstrap.scss)$")
+            excluded_url_matcher = re.compile("^(.+/lib/.+)|(.+import_bootstrap.+\.scss)$")
 
             # Load already customized scss files attachments
             custom_attachments = request.env["ir.attachment"].search([("url", "=like", self._make_custom_scss_file_url("%%.%%", "%%"))])
diff --git a/addons/web_editor/static/src/scss/web_editor.common.bootstrap.scss b/addons/web_editor/static/src/scss/web_editor.common.bootstrap.scss
new file mode 100644
index 00000000000..b7ad30b1bc4
--- /dev/null
+++ b/addons/web_editor/static/src/scss/web_editor.common.bootstrap.scss
@@ -0,0 +1,28 @@
+
+// Automatically extend bootstrap to create theme background/text/button classes
+$theme-colors: () !default;
+$theme-colors: map-merge((
+    'alpha': $color-alpha,
+    'beta': $color-beta,
+    'gamma': $color-gamma,
+    'delta': $color-delta,
+    'epsilon': $color-epsilon,
+), $theme-colors);
+
+// Extend grays with transparent ones (for some reason, BS4 create black-50 and
+// white-50 but does not allow overridding that with variables). Also add black
+// and white ones too as they were also not added by BS4...
+$grays: () !default;
+$grays: map-merge((
+    'black-25': $color-black-25,
+    'black-50': $color-black-50,
+    'black-75': $color-black-75,
+    'white-25': $color-white-25,
+    'white-50': $color-white-50,
+    'white-75': $color-white-75,
+
+    // Note: those two needs to be redefined before bootstrap, otherwise they
+    // do not exist yet
+    'black': $black,
+    'white': $white,
+), $grays);
diff --git a/addons/web_editor/static/src/scss/web_editor.common.scss b/addons/web_editor/static/src/scss/web_editor.common.scss
index 31ae70b766c..11fa94cd010 100644
--- a/addons/web_editor/static/src/scss/web_editor.common.scss
+++ b/addons/web_editor/static/src/scss/web_editor.common.scss
@@ -229,40 +229,8 @@ a.o_underline {
     }
 }
 
-// Create classes for theme colors...
-@include o-create-color-classes(alpha, $color-alpha);
-@include o-create-color-classes(beta, $color-beta);
-@include o-create-color-classes(gamma, $color-gamma);
-@include o-create-color-classes(delta, $color-delta);
-@include o-create-color-classes(epsilon, $color-epsilon);
-
-// ... and button classes
-@include o-create-color-btn-classes(alpha, $color-alpha);
-@include o-create-color-btn-classes(beta, $color-beta);
-@include o-create-color-btn-classes(gamma, $color-gamma);
-@include o-create-color-btn-classes(delta, $color-delta);
-@include o-create-color-btn-classes(epsilon, $color-epsilon);
-
-// Create classes for UI colors // FIXME
-@include o-create-color-classes(primary, theme-color('primary'));
-// @include o-create-color-classes(success, $state-success-bg, $content-color: $state-success-text);
-// @include o-create-color-classes(info, $state-info-bg, $content-color: $state-info-text);
-// @include o-create-color-classes(warning, $state-warning-bg, $content-color: $state-warning-text);
-// @include o-create-color-classes(danger, $state-danger-bg, $content-color: $state-danger-text);
-
-// Create classes for greyscale colors
-@include o-create-color-classes('black', $black);
-@include o-create-color-classes('gray-darker', gray('900')); // FIXME
-@include o-create-color-classes('gray-dark', gray('900'));
-@include o-create-color-classes('gray', gray('700'));
-@include o-create-color-classes('gray-light', gray('600'));
-@include o-create-color-classes('gray-lighter', gray('200'));
-@include o-create-color-classes('white', $white);
-
-// Create classes for greyscale transparent colours
-@include o-create-color-classes('black-25', $color-black-25);
-@include o-create-color-classes('black-50', $color-black-50);
-@include o-create-color-classes('black-75', $color-black-75);
-@include o-create-color-classes('white-25', $color-white-25);
-@include o-create-color-classes('white-50', $color-white-50);
-@include o-create-color-classes('white-75', $color-white-75);
+// Extend bootstrap to create background and text utilities for gray colors too
+@each $color, $value in $grays {
+    @include bg-variant(".bg-#{$color}", $value);
+    @include text-emphasis-variant(".text-#{$color}", $value);
+}
diff --git a/addons/web_editor/static/src/scss/web_editor.variables.scss b/addons/web_editor/static/src/scss/web_editor.variables.scss
index 552e4dfe262..203b27fc886 100644
--- a/addons/web_editor/static/src/scss/web_editor.variables.scss
+++ b/addons/web_editor/static/src/scss/web_editor.variables.scss
@@ -234,24 +234,6 @@ $color-white-25: rgba(white, 0.25) !default;
 $color-white-50: rgba(white, 0.5) !default;
 $color-white-75: rgba(white, 0.75) !default;
 
-@mixin o-create-color-classes($name, $color, $complementary: o-get-most-contrast($color, $body-color, #FFF), $content-color: $color) {
-    .bg-#{$name} {
-        background-color: $color;
-        color: $complementary;
-        .text-muted {
-            color: rgba($complementary, 0.4);
-        }
-    }
-    body .text-#{$name} { // body to make the rules more important that bg-* ones
-        color: $content-color;
-    }
-}
-@mixin o-create-color-btn-classes($name, $color, $complementary: o-get-most-contrast($color, $body-color, #FFF), $border-color: darken($color, 5%)) {
-    .btn-#{$name} {
-        @include button-variant($complementary, $color, $border-color);
-    }
-}
-
 // Translations
 $o-we-content-to-translate-color: rgb(255, 255, 90) !default;
 $o-we-translated-content-color: rgb(120, 215, 110) !default;
diff --git a/addons/web_editor/views/editor.xml b/addons/web_editor/views/editor.xml
index 3d7d36f18a9..9fa14472206 100644
--- a/addons/web_editor/views/editor.xml
+++ b/addons/web_editor/views/editor.xml
@@ -66,6 +66,12 @@
     </xpath>
 </template>
 
+<template id="_assets_backend_helpers" inherit_id="web._assets_backend_helpers">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/web_editor.common.bootstrap.scss"/>
+    </xpath>
+</template>
+
 <template id="assets_backend" inherit_id="web.assets_backend" name="Web Editor Backend Assets (used in backend interface)">
     <xpath expr="link[last()]" position="after">
         <link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/web_editor.common.scss"/> <!-- not in common because compiled differently with context -->
@@ -76,6 +82,12 @@
     </xpath>
 </template>
 
+<template id="_assets_frontend_helpers" inherit_id="web._assets_frontend_helpers">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/web_editor.common.bootstrap.scss"/>
+    </xpath>
+</template>
+
 <template id="assets_frontend" inherit_id="web.assets_frontend" name="Web Editor Frontend Assets (used in public odoo)" priority="15">
     <xpath expr="//link[last()]" position="after">
         <link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/web_editor.common.scss"/> <!-- not in common because compiled differently with context -->
@@ -149,11 +161,9 @@
         </div>
         <div class="o_colorpicker_section" data-name="grayscale" data-icon-class="fa fa-database">
             <button data-color="white">White</button>
-            <button data-color="gray-lighter">Gray Lighter</button>
-            <button data-color="gray-light">Gray Light</button>
-            <button data-color="gray">Gray</button>
-            <button data-color="gray-dark">Gray Dark</button>
-            <button data-color="gray-darker">Gray Darker</button>
+            <t t-foreach="[100, 200, 300, 400, 500, 600, 700, 800, 900]" t-as="gray">
+                <button t-att-data-color="gray">Gray <t t-esc="gray"/></button>
+            </t>
             <button data-color="black">Black</button>
         </div>
         <div class="o_colorpicker_section" data-name="ui" data-icon-class="fa fa-paint-brush">
diff --git a/addons/website_slides/views/website_slides_embed.xml b/addons/website_slides/views/website_slides_embed.xml
index e55d1a06a8f..f25bd8a1c94 100644
--- a/addons/website_slides/views/website_slides_embed.xml
+++ b/addons/website_slides/views/website_slides_embed.xml
@@ -3,7 +3,7 @@
     <data>
         <!-- Bundle (minimal) for embedded slide iframe -->
         <template id="website_slides.slide_embed_assets" name="Website slides embed assets">
-            <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/import_bootstrap.scss"/>
+            <t t-call="web._assets_bootstrap"/>
             <link rel="stylesheet" type="text/scss" href="/website_slides/static/src/scss/website_slides.scss" t-ignore="true"/>
 
             <t t-call="web.pdf_js_lib"></t>