diff --git a/addons/web/static/src/scss/bootstrap_review.scss b/addons/web/static/src/scss/bootstrap_review.scss
index a74d326cd9a..4b71db02fef 100644
--- a/addons/web/static/src/scss/bootstrap_review.scss
+++ b/addons/web/static/src/scss/bootstrap_review.scss
@@ -9,10 +9,19 @@
     clear: both;
 }
 
+// Extend bootstrap to create background and text utilities for gray colors too
+// Note: the card-body rule below needs those grays utilities to be defined
+// before so that the related o-bg-color text-muted rules work.
+@each $color, $value in $grays {
+    @include bg-variant(".bg-#{$color}", $value);
+    @include text-emphasis-variant(".text-#{$color}", $value);
+}
+
 .card-body {
     // BS4 colored cards do not have a very popular design. This will reset them
     // to a BS3-like one: only the header and footer are colored and the body
     // will use the color of a default card background with a light opacity.
+    // Limitation: bg-* utilities cannot be used on card-body elements anymore.
     @include o-bg-color(rgba($card-bg, $o-card-body-bg-opacity));
 }
 
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 648d76b2aec..c082e823cc0 100644
--- a/addons/web_editor/static/src/scss/web_editor.common.scss
+++ b/addons/web_editor/static/src/scss/web_editor.common.scss
@@ -228,9 +228,3 @@ a.o_underline {
         text-decoration: underline;
     }
 }
-
-// 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);
-}