diff --git a/src/pydata_sphinx_theme/assets/styles/pydata-sphinx-theme.scss b/src/pydata_sphinx_theme/assets/styles/pydata-sphinx-theme.scss
index ff20f0e4a..1afad574b 100644
--- a/src/pydata_sphinx_theme/assets/styles/pydata-sphinx-theme.scss
+++ b/src/pydata_sphinx_theme/assets/styles/pydata-sphinx-theme.scss
@@ -1,4 +1,9 @@
-// Import all of Bootstrap scss
+// IMPORTANT: our Bootstrap variable overrides must be imported before the
+// Bootstrap files that reference those variables; otherwise our overrides will
+// have no effect.
+@import "variables/bootstrap";
+
+// Import all of Bootstrap scss.
 @import "~bootstrap/scss/bootstrap";
 
 // Import FontAwesome from _node_modules
@@ -8,7 +13,6 @@
 @import "~@fortawesome/fontawesome-free/scss/brands";
 
 // Variables
-@import "variables/bootstrap";
 @import "variables/layout";
 @import "variables/fonts";
 @import "variables/icons";