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 034378dbaa4..f973d776b56 100644
--- a/addons/web_editor/static/src/scss/web_editor.common.scss
+++ b/addons/web_editor/static/src/scss/web_editor.common.scss
@@ -610,6 +610,15 @@ blockquote {
     font-style: italic;
 }
 
+// Extend bootstrap to create background and text utilities for some colors
+// outside of the $theme-colors too (but not btn-, alert-, etc).
+@for $index from 1 through 5 {
+    $-color-name: 'o-color-#{$index}';
+    $-color: color($-color-name);
+    @include bg-variant(".bg-#{$-color-name}", $-color);
+    @include text-emphasis-variant(".text-#{$-color-name}", $-color);
+}
+
 // Bg/text color classes generation
 .o_cc {
     #{$o-color-extras-nesting-selector} {
@@ -748,15 +757,6 @@ blockquote {
     }
 }
 
-// Extend bootstrap to create background and text utilities for some colors
-// outside of the $theme-colors too (but not btn-, alert-, etc).
-@for $index from 1 through 5 {
-    $-color-name: 'o-color-#{$index}';
-    $-color: color($-color-name);
-    @include bg-variant(".bg-#{$-color-name}", $-color);
-    @include text-emphasis-variant(".text-#{$-color-name}", $-color);
-}
-
 // Base snippet rules
 %o-we-background-layer-parent {
     &, & > * {