VP Speed - Bootstrap Customizer (Pro)

Because VP Speed compiles Bootstrap from its Sass sources, it can do something a plain stylesheet cannot: change Bootstrap's own variables before compiling. The Bootstrap Customizer lets you set brand colors, border radius and any custom SCSS from the plugin options — no template overrides and no build toolchain. PRO

How it works

Bootstrap is built on Sass variables — $primary, $secondary, $border-radius and hundreds more. Normally, changing them means setting up a Sass build pipeline or overriding compiled CSS with heavier, more specific rules. Since VP Speed already compiles Bootstrap on save, it can inject your overrides before compilation, so the values flow through every component naturally — exactly as if you had built Bootstrap yourself.

These options live in the Bootstrap customization (Pro) section of the Plugin tab, below the component selection. They take effect on save, when the bundle recompiles.

Quick variables

Three of the most common variables have dedicated fields:

  • Primary color ($primary) — your main brand color. It propagates to buttons, links, active states, focus rings and more.
  • Secondary color ($secondary) — the secondary accent.
  • Border radius ($border-radius) — the global corner rounding. Any valid CSS length works, for example 0.5rem or 0 for square corners.

Leave a field empty to keep Bootstrap's default. Set one, save, and the new value appears everywhere that variable is used.

Set $primary to your brand color and reload the front end — buttons, links and accents recolor across the whole site at once, without a single line of custom CSS. It's the fastest way to see the Customizer at work.

Custom SCSS

For anything beyond the quick fields, the Custom SCSS area accepts arbitrary SCSS that is appended after all Bootstrap imports. Because it compiles in the same pass, you have full access to Bootstrap's variables, maps and mixins.

You can override additional variables, use Bootstrap's mixins in your own rules, or add small custom styles that belong with your Bootstrap build. A few examples of what fits here: overriding $font-family-base, adjusting the spacing scale, or writing a utility with the media-breakpoint-up() mixin.

Custom SCSS is compiled, so a syntax error will cause the build to fail. If a save reports a compilation error, check the SCSS you just added — an unclosed brace or a misspelled variable is the usual cause. The previous working bundle keeps serving until a valid build succeeds.

Customizer vs. template overrides

If your template already provides its own color settings, you can use either — but not both for the same property, or they may compete. The Customizer is the better choice when your template offers no such options, or when you want brand changes to apply at the Bootstrap level so every component inherits them consistently.

Next step

The next article covers another Pro convenience that removes a render-blocking third-party request: serving Bootstrap Icons locally.