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

user_6452878 0
Viewed 582

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.

twitter-bootstrap sass
3 Answers

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.

user_31160420

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.

user_136890050

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.

user_60874220
Related