Bootstrap 5 (and before) allows overriding Sass variables by declaring them before actually importing Bootstrap. That’s the meaning of the !default declaration in _variables.scss.
// Override whatever Bootstrap variable you want right here @import "variables"; // Then have Bootstrap do it's magic with these new values @import "../node_modules/bootstrap/scss/bootstrap";
Like this, in the latest v4.5 version, overriding theme colors is easy. You declare them in your own variables.scss file e.g. like this:
$theme-colors: ( primary: #25408f, // override some or all base color definitions secondary: #8f5325, success: #3e8d63, dark: #343a40, facebook: #3b5998, // you can add as many 'custom' colors as you like twitter: #55acee, linkedin: #007bb5, gmail: #dd5347, whatsapp: #12af0a );
//Bootstrap 4.5.3 $theme-colors: () !default; $theme-colors: map-merge( ( "primary": $primary, "secondary": $secondary, "success": $success, "info": $info, "warning": $warning, "danger": $danger, "light": $light, "dark": $dark ), $theme-colors ); //Bootstrap 5.0.0 $theme-colors: ( "primary": $primary, "secondary": $secondary, "success": $success, "info": $info, "warning": $warning, "danger": $danger, "light": $light, "dark": $dark ) !default;
With the merge command, the keys in the second map (your own definitions) take priority over the keys in the first map. That is, in case they are identical.
Without this merge command, default Bootstrap variables are left out of the resulting $theme-colors map. Thus, make sure to include also the defaults when you override $theme-colors in v5.0.0-beta2. That is, if you need those defaults of course.Steven
We illustrate with an example below. Many more similar declarations are present in _variables.scss.
//Bootstrap v4.5.3 $link-color: theme-color("primary") !default; //Bootstrap v5 $link-color: $primary !default;
So you override the $theme-colors map, only to find out that also the individual default variables are used directly in the toolkit.
In order to make sure the toolkit always works with your custom colors, a somewhat overhead definition is needed:
// First override some or all individual color variables $primary: #25408f; $secondary: #8f5325; $success: #3e8d63; $info: #13101c; $warning: #945707; $danger: #d62518; $light: #f8f9fa; $dark: #343a40; // Then add them to your custom theme-colors map, together with any additional colors you might need $theme-colors: ( primary: $primary, secondary: $secondary, success: $success, info: $info, warning: $warning, danger: $danger, light: $light, dark: $dark, // add any additional color below );
Only this way, the Bootstrap 5 toolkit will utilize your custom colors in a consistent manner throughout the complete stylesheet.
Below additional background information on the Bootstrap github discussion board:
The most confusing thing when you inspect responsive images is the fact that the browser takes into account the DPR (Device Pixel Ratio) in order to download the most appropriate image size. Find out here how to serve your visitors responsive images.
Bootstrap v5 has reached beta status. That means no more new features or breaking changes in the future releases of the V5 branch. We're testing it out on this website.