I am using the bootstrap-sass
gem (Bootstrap 3.0) by Thomas McDonald. I've followed the Bootstrap and Rails tutorial by Daniel Kehoe.
I have application.css.scss
which has the following at the top:
/* *= require_self *= require_tree . */
And I have framework_and_overrides.css.scss
which has this line in it:
@import "bootstrap";
Now I tried overriding bootstrap variables ($body-bg: #f00;
) I found here and placing them in either of these two files but nothing changes. What am I doing wrong?
Override Variables Bootstrap has its own “_variables. scss” in the “scss” folder, which contains all variables used in Bootstrap. Now, add the “abstracts” name folder in your scss folder and create “_custom-variables. scss” in that folder.
In your custom. scss , you'll import Bootstrap's source Sass files. You have two options: include all of Bootstrap, or pick the parts you need. We encourage the latter, though be aware there are some requirements and dependencies across our components.
bootstrap-sass is a Sass-powered version of Bootstrap 3, ready to drop right into your Sass powered applications. This is Bootstrap 3. For Bootstrap 4 use the Bootstrap rubygem if you use Ruby, and the main repo otherwise.
You can override variables by simply redefining the variable before the @import
directive.
For example:
$navbar-default-bg: #312312; $light-orange: #ff8c00; $navbar-default-color: $light-orange; @import "bootstrap";
see the execution cycle. in the bootstrap file, files rendering in this manner such us "get variable > and apply in navbar" this really happen when started to execute the bootstrap file. Its present inside of the bootstrap, look the sequential flow of importing . , the variable are getting from bootstrap/variables and setting up the vavbar color in bootstrap/navbar, this applying the color in navbar with the variable navbar-default-bg
.
what actually programmers are doing is trying to setup the variable value after setting up the color in navbar. (before or after "@importing bootstrap" statement,the variable changes will not make changes in the navbar color, need to edit in the bootstrap file)
look into the code below if you want to change the color you have to do the following.
inside bootstrap file
// Core variables and mixins
@import "bootstrap/variables";
// Components
@import "bootstrap/navs";
$navbar-default-bg:red; // initialize the $navbar-default-bg (after importing bootstrap/variables)
@import "bootstrap/navbar"; here the color setting is performing"
this will work fine, analyze the execution cycle.
but I am suggesting use the other manual classes for applying the bg-color instead of over riding bootstrap variable.
Ref : https://github.com/RailsApps/rails-bootstrap/issues/12
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With