CODEWITHSUNDEEP
twitter-bootstrapsass
SVE
SVE

Reputation: 1655

How to use both rtl and ltr bootstrap 5 sass styles in a project?

I'm using bootstrap5 scss.

I include styles for ltr as standard: @import "~ bootstrap / scss / bootstrap";

Question: how to connect or enable rtl bootstrap 5 scss styles?

From the instructions, nothing is clear, except how to connect via link in the standard way, but it is necessary in scss.

Upvotes: 12

Views: 2441

Answers (5)

Rafea Fhaily
Rafea Fhaily

Reputation: 1

It works with me:

@import "../vendors/bootstrap/scss/bootstrap";

$direction: rtl;

@mixin direction {
    @if $direction == rtl {
        @content;
    }
}

[dir=rtl]{
    .ms-auto {
        @include direction {
            margin-left: unset !important;
        }
    }
}

Upvotes: 0

Zahema
Zahema

Reputation: 1415

Updated answer:

What I think is missing from the documents is the fact that if you are importing the scss version, then you need to have postcss installed and configured. AND you also need an rtl plugin. I had success with postcss-rtlcss.

So just install postcss & postcss-rtlcss:

npm i -D postcss postcss-rtlcss

Then in your project root (or in the app dir if you are using nx) add this config file named postcss.config.js:

module.exports = {
  plugins: ['postcss-rtlcss']
};

And now you just run your project and should have rtl working perfectly!

Old answer (don't use, not that great):

Import normal bootstrap & import rtl with an rtl selector:

@import '~bootstrap/scss/bootstrap';

[dir='rtl'] {
  @import '~bootstrap/dist/css/bootstrap-utilities.rtl.min';
}

NOTE: If you import bootstrap.rtl.min it will override your color variables (beacuse it's the compiled css with the values already baked)

NOTE#2: I still don't think this is how bootstrap intended rtl to be used. because right now if you have me-2 on an element in ltr it will have 2 margin on the right but in rtl it will have margins on both right and left ! as the rtl code just added the rtl and didn't change the rtl instruction.

Idealy we would have a full version of rtl bootstrap BUT in SCSS which would fix most of our problems. I will update this answer as soon as I find out more.

I found that just importing utilities handles most of my rtl needs. I think you can import other files as you see fit just keep the overriding in mind.

Upvotes: 7

Mohand GK
Mohand GK

Reputation: 41

We can setup with react bootstrap 5 as below steps.

Setup 1: npm install scss

Setup 2: create file main.scss

Setup 3: in main.scss file

  1. add @import "../node_modules/bootstrap/scss/bootstrap-utilities";
  2. copy all style from ../node_modules/bootstrap/dis/css/bootstrap.rtl.css
  3. add [dir="rtl"] { paste all style here}
  4. add [dir="ltr"] {@import "../node_modules/bootstrap/scss/bootstrap";}
  5. save the file

Setup 4: import "./main.scss" in index.tsx or App.tsx

Upvotes: 3

adampweb
adampweb

Reputation: 1469

IMPORTANT INFO: I copied this section from official Bootstrap docs:

LTR and RTL at the same time

Need both LTR and RTL on the same page? Thanks to RTLCSS String Maps, this is pretty straightforward. Wrap your @imports with a class, and set a custom rename rule for RTLCSS:

/* rtl:begin:options: {
    "autoRename": true,
    "stringMap":[ {
        "name": "ltr-rtl",
        "priority": 100,
        "search": ["ltr"],
        "replace": ["rtl"],
        "options": {
            "scope": "*",
            "ignoreCase": false
        }
    } ]
} */
.ltr {
    @import "../node_modules/bootstrap/scss/bootstrap";
}
/*rtl:end:options*/

Edge cases and known limitations While this approach is understandable, please pay attention to the following:

When switching .ltr and .rtl, make sure you add dir and lang attributes accordingly. Loading both files can be a real performance bottleneck: consider some optimization, and maybe try to load one of those files asynchronously. Nesting styles this way will prevent our form-validation-state() mixin from working as intended, thus require you tweak it a bit by yourself. See #31223.

Upvotes: 1

Arthur Lomakin
Arthur Lomakin

Reputation: 66

You're not supposed to use both CSS files in the same page, as mentioned in our docs. You may have a look at our starter template in that page, using a single CSS file.

If you need RTL and LTR at the same time, you'll need to use Sass and tweak your build a bit. But our official build (thus releases available through a CDN) won't work with both directions in the same page.

We plan to add an example template with some bidi contents in #32330 — but it's not done yet. I close this issue since it works as intended.

We'd be pleased to get any insights or suggestions you'd have to help us improve our docs or template example, though. :)

Edit: I see the code you shared doesn't reflect what happens in the CodePen you provided. Please update your CodePen with the code you tried if you need any support.

This is answer from GitHub issue.

Upvotes: 1

Related Questions