Override bootstrap css conditional from javascript

Question

I have to do internationalization in my app with some right to left (arabic/hebrew) languages. So i'd like to be able to override some bootstrap classes (like col) to be float right instead of left.

I use create-react-app (babel/webpack) , react-bootstrap.

You can't import conditionally so I did a conditional require

if (language.isLanguageLTR()) {
    console.log("REQUIRE RTL CSS");
    require("./rtl.css");
}

It works well when I'm in development mode, but when I build my application using create-react-app, the css file is imported even if the condition is set to false.

Is there a way (sure there is !) to override some css classes without inline css/specific classes everywhere I use bootstrap column ?

I think webpack loads it on deployment mode but I don't get why, and maybe there is a more proper way to conditionally override css.

My css just in case you'd like to understand better

.App {
  direction: rtl;
}
.col-sm-1 {
  float: right;
}
.col-sm-2 {
  float: right;
}
...

You could ajax the file, create a script tag, and apply it to head conditionally. I've done that numerous times with tampermonkey scripts. — roberto tomás, Jun 16 '17 at 10:12
why not use bootstrap RTL version ? https://github.com/morteza/bootstrap-rtl — Ismail Farooq, Jun 16 '17 at 10:37
@robertotomás, I may try this one, I'm not sure how webpack will react (lol) to this kind of usage once it is deployed — Nevosis, Jun 16 '17 at 11:56
@IsmailFarooq, I already have enough dependencies and I don't think bootstrap RTL justify a whole package. Juste setting float-right and direction RTL is enough to solve my problem — Nevosis, Jun 16 '17 at 11:57

score 0 · Accepted Answer · answered Jun 16 '17 at 12:44

I got it. When doing a conditional import/require, webpack will always insert the file (just in case it may be called). Of course when it was a css file, it overided everything. What I did was defining css using pure javascript (like this answer : https://stackoverflow.com/a/15494200) and it works like a charm (on chrome/ie/FF at least). I don't find it pretty, I would like to have it in a .css file, but it's already something.

    var style = document.createElement("style");
    style.appendChild(document.createTextNode(""));
    document.head.appendChild(style);

    style.sheet.insertRule(".App { direction:rtl; }", 0);
    style.sheet.insertRule(
        ".col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7,  .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12  {float: right;}",
        1
    );`

score -1 · Answer 2 · answered Jun 16 '17 at 10:55

I think the easiest way to achieve what you want is to have a float: right class that you can use jQuery to add that class when required. something like:

// CSS
.rtl {
    float: right !important;    
}

// Javascript
var ltr = true;
function ltr ( ltr ) {
    $( '.col-sm-1, col-sm-2' ).addClass( 'rtl' );
}

Override bootstrap css conditional from javascript

2 Answers2