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"
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'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.
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;
in html:
<ion-content class="bg-style">
in variables.scss:
.bg-style {
background-color: #f5f0eb;
}
the above codes do not work,but it can work in other tags like <a> <div> and so on,and when I put the style file(.scss,such as test.scss) in the same path as the html file,it can work well also.I do not know if my question is clear,thank you for help.
use app.scss file instead of variables.scss.
app.scss
.bg-style {
background: #f5f0eb;
}
I would recommend you to override the ionic variables
$background-color: #f5f0eb !default;
$background-ios-color: #f5f0eb !default;
$background-md-color: #f5f0eb !default;
Check this url for more details - link
in the app.scss file add a style
.fixed-content{
background-color: #f5f0eb;
}
it will apply to all pages, and you don't have to add a class to every ion-content
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.