How to override the Bootstrap navbar-default-bg variable?

[rceee]

When building a custom app with Rails Composer, and selecting Bootstrap 3 (which presently installs 3.0.3.0), overrides are not working straight out of the box the way it does with version 2 (substituting the new variable names), though https://github.com/thomas-mcdonald/bootstrap-sass says it should retain the same behavior. E.g., putting the Bootstrap $variables ahead of the framework @import.

framework_and_overrides.css.scss

$navbar-default-color: #FFFFFF;
$navbar-default-bg: #3C006C;


// import the CSS framework
@import "bootstrap";
… Other custom overrides added by Composer

I did not see any issues related to this under the specific gem (bootstrap-sass); so I'm wondering if it's a composer configuration issue.

[danecjensen]

I'm also having this issue. Have you found a work around yet?

[rceee]

@danecjensen At the time, no, I wasn't able to find a way around it, so I reverted to 2.3. I don't know what's up with it. Strange that it's still broken.

[DanielKehoe]

Try this:

// framework_and_overrides.css.scss
$navbar-inverse-bg: gray;
// import the CSS framework
@import "bootstrap";
… mixins added by the rails_layout gem

It works for me. Note that the rails_layout gem sets up a navigation partial that uses the navbar-inverse class from Bootstrap.

Here's a list of all the Bootstrap variables. It's not easy to figure out how each is used.

[DanielKehoe]

As noted above, I can override the $navbar-inverse-bg color.

In principle, if I remove the navbar-inverse class from the navigation partial, I should be able to set:

$navbar-default-bg: gray;
// import the CSS framework
@import "bootstrap";

But it doesn't work. So I'm wondering why it is possible to override some variables and not others.

This is not really the right place to report the issue, as I don't believe it has anything to do with Rails Composer. I have opened an issue for the rails-bootstrap example app. Maybe it's best to open an issue on bootstrap-sass.

[DanielKehoe]

I'm closing the issue here since it's now an open issue elsewhere: RailsApps/rails-bootstrap#12

[errakeshpd]

hi , 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 actualy programmers are doing is trying to setup the variable value after setting up the color in navbar ,

look into the code below if you want to change the color you have to do the following.

// Core variables and mixins
@import "bootstrap/variables";
// Components
@import "bootstrap/navs";
$navbar-default-bg:red; //////// variable initializing
@import "bootstrap/navbar";

this will work fine , analyze the execution cycle.

but i am suggesting use the other class for applying the bg-color instead of over riding.
hi DanielKehoe what is your opinion ?

[DanielKehoe]

Discussion of the open issue is here:
RailsApps/rails-bootstrap#12