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

Question

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.

Orissa

Answer 1

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.

Shameful

Answer 2

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

Newt

Answer 3

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.

Archeozoic

those. at the moment there is no such possibility ... – Orissa

Answer 4

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.

Harmful

Answer 5

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;
        }
    }
}

Landry

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Ruthful