BootstrapHow-ToBeginner · 3 min read

How to Override Bootstrap Variables Easily

To override Bootstrap variables, create a custom SCSS file where you set your new values before importing Bootstrap's SCSS files. This way, your variable values replace the defaults when Bootstrap compiles its styles.

📐

Syntax

Override Bootstrap variables by defining them before importing Bootstrap SCSS. The pattern is:

$variable-name: new-value; — set your custom value
Then import Bootstrap SCSS files with @import 'bootstrap';

This ensures your values replace Bootstrap's defaults during compilation.

scss

$primary: #ff5733;
@import 'bootstrap';

💻

Example

This example changes Bootstrap's primary color to a bright orange by overriding the $primary variable before importing Bootstrap SCSS.

scss

// custom.scss
$primary: #ff5733;
@import 'bootstrap';

Output

The compiled CSS will use #ff5733 as the primary color for buttons, links, and other components using $primary.

⚠️

Common Pitfalls

Common mistakes include:

Overriding variables after importing Bootstrap SCSS, which has no effect.
Not using SCSS compilation, so variable overrides are ignored.
Forgetting to install Bootstrap source SCSS files.

Always override variables before importing Bootstrap SCSS and compile with a SCSS compiler.

scss

// Wrong way (no effect):
@import 'bootstrap';
$primary: #ff5733;

// Right way:
$primary: #ff5733;
@import 'bootstrap';

📊

Quick Reference

Define variables before importing Bootstrap SCSS.
Use SCSS compiler to build CSS.
Customize variables like $primary, $font-size-base, $body-bg.
Do not override variables in plain CSS files.

✅

Key Takeaways

Always override Bootstrap variables before importing Bootstrap SCSS files.

Use a SCSS compiler to apply your custom variable values.

Overriding variables after importing Bootstrap SCSS has no effect.

Customize only the variables you need to change for easier maintenance.

Ensure Bootstrap source SCSS files are installed and accessible.