customize Bootstrap 5 rtl

[grahhal]

IIts not clear how to use customize bootstrap 5 RTL , I read the documentation on bootstrap & RTLCSS but it is still not clear, I am designing a pure frontend template, and I cant implement the RTL Bootstrap 5

1. I download bootstrap through NPM,
2. I used SCSS to customize the colors theme and generate main.css from main.scss file
3. I added the following to my main.scss body[dir='rtl']{ direction: rtl !important; }
4. I added RTL dir & lang Ar to my body tag

Still, the design is LTR when it comes to text-end & text-strat,,, ms & me it's not reversed, padding and margins, could you please assist and post clear steps on how to use it! I searched on Overstack Website all are asking the same and there is no clear way!

[ffoodd]

You don't need to add any CSS: once you compiled your main.scss file to main.css, you need another task running RTLCSS to generate main.rtl.css from main.css.

As seen in our default build, you need two separate CSS files for LTR and RTL.

Then in your RTL page markup, you simply need to switch main.css to main.rtl.css.

Does it help?

We may need to improve the docs regarding those steps, indeed.

[github-actions[bot]]

As the issue was labeled with awaiting-reply, but there has been no response in 14 days, this issue will be closed. If you have any questions, you can comment/reply.