How can I customize Bootstrap's default colors without using SCSS?

Question

This question explores Bootstrap and addresses practical considerations related to: How can I customize Bootstrap's default colors without using SCSS?

Q&A Network · Accepted Answer

You can customize Bootstrap's default colors by overriding the CSS variables in your own stylesheet. This method doesn't require SCSS and allows you to change colors globally.

:root {
                --bs-primary: #ff5733; /* Custom primary color */
                --bs-secondary: #33c1ff; /* Custom secondary color */
                --bs-success: #28a745; /* Custom success color */
                --bs-danger: #dc3545; /* Custom danger color */
                --bs-warning: #ffc107; /* Custom warning color */
                --bs-info: #17a2b8; /* Custom info color */
                --bs-light: #f8f9fa; /* Custom light color */
                --bs-dark: #343a40; /* Custom dark color */
            }

ADDITIONAL COMMENT:

Place the  block after the Bootstrap CSS link in your HTML to ensure your customizations take effect.
Use valid HEX, RGB, or HSL color values to customize the colors.
This method allows you to quickly change theme colors without recompiling Bootstrap's SCSS.
Ensure that your custom styles are loaded after the Bootstrap CSS file to override the default values.

✅

Ask any question about Bootstrap here... and get an instant response.

How can I customize Bootstrap's default colors without using SCSS?

Asked on Apr 20, 2026

Answer