Add background-color classes bg-*

[moewe]

Hi guys,

I recently updated my webapplication to bootstrap 5 and all my background-colors were gone after having a look at it with IE11. The IE dev-tools and CANIUSE.com confirmed, that the var() command is not working in IE11.

You guys already fixed that text-* colors. Is it possible to fix the bg-* colors too?

Thank you very much!

[Christian Oliff]

Heya. It's working correctly here: https://coliff.github.io/bootstrap-ie11/tests/#background

I think you are missing the default bg-opacity variable or something? Compare to my screenshot below:

[moewe]

In your screenshot the style attribute is called -ieVar-!background-color: .... In my application it's just background-color: ...
Sorry I'm not really familiar with Sass. Where can i define the default bg-opacity variable?

I installed the bootstrap-ie11 package and added it to my styles.scss like this:

@import "../node_modules/bootstrap/scss/bootstrap.scss";
@import "../node_modules/bootstrap-ie11/scss/bootstrap-ie11.scss" 

[Christian Oliff]

Make sure you're loading the https://github.com/nuxodin/ie11CustomProperties polyfill. That's needed. When you inspect element you should see --ie - like in the screenshot.

Check my demo page for a working example and look at the source code:
https://coliff.github.io/bootstrap-ie11/tests/

[moewe]

Thanks! That fixed it!
Forgot to add the customProperties import.

<script>window.MSInputMethodContext && document.documentMode && document.write('<script src="https://cdn.jsdelivr.net/gh/nuxodin/ie11CustomProperties@4.1.0/ie11CustomProperties.min.js"><\/script>');</script>