I'm just starting with Bootstrap 4 and Sass. I can't for the life of me figure out how to override the default .alert-[whatever] styles.
If I have:
<div class="alert alert-success">Hello!</div>
It creates an alert with the default light shade of green that ships with Bootstrap 4. The only way I can override it is with my own custom CSS style for .alert-success. I'd rather use a built in variable to override it like I'm doing with my other colors, but I have no idea if that's an option?
In my .scss file I have:
$blue: #3498db;
$green: #37bf91;
$theme-colors: (
"primary": $blue,
"success": $green,
);
I assumed that .alert-success would just use the $green I've specified in my .scss file, but that doesn't seem to be the case.
I've tried to do $alert-success: $green;which also doesn't change anything.
What's the correct way to go about this?
This is similar to: How to change the bootstrap primary color? Make sure you import Bootstrap after the overrides, and I will answer as it related to alerts.
/* custom.scss */
/* import the necessary Bootstrap files */
#import "bootstrap/functions";
#import "bootstrap/variables";
/* -------begin customization-------- */
$blue: #3498db;
$green: #37bf91;
$theme-colors: (
primary: $blue,
success: $green,
);
/* -------end customization-------- */
/* finally, import Bootstrap to set the changes! */
#import "bootstrap";
Demo: https://www.codeply.com/go/NCfqvU3Upe
For the alerts, the bg and text colors are derived using the SASS darken function on the theme color. The defaults are:
$alert-bg-level: -10 !default;
$alert-border-level: -9 !default;
$alert-color-level: 6 !default;
The negative numbers lighten the original theme color, the positive numbers darken the color. So, for example if you want to make the success alert bg closer to the actual $green color, you'd adjust the alert variables:
$alert-bg-level:0; // this negates the darken function
$alert-border-level:1;
$alert-color-level:-10;
I updated the demo to show this.
Related
I want to define my own theme color so the standard bootstrap elemets are overriden and also use the value later for my own components. Here is the code I use in a scss file:
$theme-colors: (
"primary": #611fe6,
"secondary": #ffbd58,
"dark": #000000
);
#import "node_modules/bootstrap/scss/bootstrap";
#import "node_modules/bootstrap/scss/functions";
#import "node_modules/bootstrap/scss/variables";
#import "node_modules/bootstrap/scss/mixins";
.fa-li {
color: $primary;
}
.fa-li then has the original primary color of bootstrap and not my own.
"How to access a theme color in bootstrap 5?"
Short answer, use map-get...
.fa-li {
color: map-get($theme-colors,"primary")
}
Demo
"I want to define my own theme color so the standard bootstrap elements
are overridden and also use the value later for my own components"
Full answer, For your theme changes it would be better to redefine the value of $primary. Then you won't have to use map-get. Simply reference $primary...
$primary: #611fe6;
$secondary: #ffbd58;
$dark: #000000;
#import "bootstrap";
.fa-li {
color: $primary
}
Demo
Also see: Overriding Bootstrap SCSS Variables
I am trying to override the btn-lg padding on left and right by using sass pre-defined variables but unable to find the variable. All I could find was
.btn-lg {
#include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
}
How can I change the left/right padding of btn-lg in bootstrap 4 by overriding sass variable in my custom SCSS file?
You can find Bootstrap's variable defaults in _variables.scss file. The default variables used for .btn-lg is:
$btn-padding-y-lg: $input-btn-padding-y-lg !default;
$btn-padding-x-lg: $input-btn-padding-x-lg !default;
$btn-font-size-lg: $input-btn-font-size-lg !default;
$btn-line-height-lg: $input-btn-line-height-lg !default;
$input-btn-padding-y-lg: .5rem !default;
$input-btn-padding-x-lg: 1rem !default;
To change the padding of .btn-lg, you need to override the default values of $input-btn-padding-y-lg and $input-btn-padding-x-lg in your custom.scss file. Remember that your overrides must come before you import Bootstrap's Sass files.
For example, to reduce the padding of .btn-lg, I would put this in my custom.scss file:
// Variable overrides
$input-btn-padding-y-lg: 0.2rem;
$input-btn-padding-x-lg: 0.5rem;
// Import Bootstrap and its defaults
#import "../bootstrap/scss/bootstrap"
I have setup Bootstrap 4 theme variables as follows:
// custom-theme.scss
$primary: green;
$secondary: purple;
Then custom variables like:
// custom-variables.scss
#import "~bootstrap/scss/functions";
#import "~bootstrap/scss/variables";
$idi-primary-12: theme-color-level(primary, -12);
Then importing all as follows:
//main.scss,
#import "./bootstrap-theme";
#import "./custom-variables";
#import '~bootstrap/scss/bootstrap';
This updates bootstrap classes like btn-primary and text-secondary AS EXPECTED (nice);
But the custom variable ($idi-primary-12) based on my $primary doesn't work. I was using the theme-color-level SASS function as given here in the official documentation.
When I use this in my component,
// myComponent.scss
#import "../custom-variables";
.myUserInfo {
background-color: $idi-primary-12;
color: color-yiq($idi-primary-12);
}
I get BLUE shade (which is the default in the bootstrap/scss/variables.scss). Github source instead of my override (green - as set above)
Question: How do I use theme-color-level function, to use my $primary (green) variable to generate a lighter version of that green? (and not the default blue).
Additional info:
official documentation for SASS functions
theme-color-level uses theme-color
theme-color extracts from object $theme-colors by key (I am using primary)
$theme-colors primary key is set to $primary (Github for $theme-colors)
$primary is set to blue (Github for $primary)
This should have be overridden by my $primary = green; from custom-theme.scss. That is why btn-primary is working. (shown as green). But why isn't it using that same overridden variable to create my $idi-primary-12 variable?
AFAIK theme-color-level function in Bootstrap will take 2 parameters, color-name from the theme in string (eg, 'primary', 'info') and level in number as shown below:
// Request a theme color level
#function theme-color-level($color-name: "primary", $level: 0) {
$color: theme-color($color-name);
$color-base: if($level > 0, $black, $white);
$level: abs($level);
#return mix($color-base, $color, $level * $theme-color-interval);
}
and if we want to use this function for some colors other then the theme colors (eg. 'primary'), maybe we can write another function for that, eg:
#function custom-color-level($color: pink, $level: 0) {
$color-base: if($level > 0, $black, $white);
$level: abs($level);
#return mix($color-base, $color, $level * $theme-color-interval);
}
with this custom function, we can pass the first param as color (eg. #007bff, orange)
I think you have a typo, $primary instead of primary
$idi-primary-12: theme-color-level($primary, -12);
theme-color-level surprisingly is not internally using the overridden $primary value. Instead it is taking the default $primary value (blue).
I was able to use other function, which directly works on my overridden $primary value.
// custom.scss
$primary: green;
darken($primary, 10% )
lighten($primary, 10% )
Reference
Here is my _custom.scss:
// Bootstrap overrides
//
// Copy variables from `_variables.scss` to this file to override default values
// without modifying source files.
//$body-bg: $gray-dark;
//$body-color: $gray-light;
$blue: #363636;
$component-active-bg: #484545;
$dropdown-bg: $brand-primary;
$dropdown-link-color: #c3c3c3;
$dropdown-link-hover-color: darken(#c3c3c3, 5%);
and bootstrap.scss:
// Core variables and mixins
#import "variables";
#import "mixins";
#import "_custom";
I am compiling it with the provided Gruntfile.js.
The resultant css file has no effect. Everything looks just like with the original css.
How can I test whether I am getting compilation process actually working?
Thanks
From the format of boostrap.scss I think you should have:
#import "custom";
Next, when you make your changes in _custom.scss, leave off the "!default" tag. For example:
// _variables.css
$blue: #0275d8 !default;
/// _custom.css
$blue: #002b5b;
I'm attempting to integrate scss with the .net theming functionality.
Ideally most scss would be in a dedicated directory, but each theme would have its own scss page containing exclusively the variable values for that particular theme.
The problem I'm encountering is that I need to pass placeholder variables to the _layout.scss sheet, and then have their values updated by the theme scss sheets. Currently the original null values are outputted.
SCSS Files
Resources/SCSS/_variables.scss
$theme_color: null;
Resources/SCSS/_layout.scss
#import "variables";
div {
color: $theme_color;
}
Themes/Blue/blue.scss
$theme_color: #0000ff !default;
#import '../../Resources/SCSS/layout';
Themes/Red/red.scss
$theme_color: #ff0000 !default;
#import '../../Resources/SCSS/layout';
Desired CSS Output Files
blue.css
div {
color: #0000ff;
}
red.css
div {
color: #ff0000;
}
You have it backwards. The !default flag tells Sass that this is the value to use if it doesn't a previous declaration doesn't exist.
$foo: red;
$foo: blue !default;
#debug $foo; // red
$bar: red !default;
$bar: blue;
#debug $bar; // blue
You need to place the !default flag on the default null values, not the theme values.