When to Use Bootstrap Variables

Bootstrap variables are predefined variables provided by Bootstrap, which can be used to customize and theme the Bootstrap framework.

Use Bootstrap variables when:

• You want to modify the default Bootstrap styles.
• You need consistency across your project by leveraging Bootstrap's theming system.
• You are customizing the color scheme, typography, spacing, or any other aspect of Bootstrap components.

When to Use Sass Variables

Sass variables are custom variables that you define in your Sass files.

Use Sass variables when:

• You need to create custom styles that are not covered by Bootstrap variables.
• You want to maintain DRY (Don't Repeat Yourself) principles by reusing values throughout your custom styles.
• You need to manage design tokens and other reusable values specific to your project.

Usage

If you want to change a variable, first try to change it in theme.css. If the variable isn't defined there and there is no Bootstrap variable that can be accessed, make use of the _custom-variables.scss file. There you can directly override existing Sass variables or create your own.