Feature: direction RTL support

[dharmeshpipariya-zz]

No description provided.

[mdo]

We definitely want to do this soon. The approach should be to generate a separate CSS file, built from bootstrap-rtl.scss with an ability to generate our other builds using the same approach if folks want it (no need to provide RTL builds for each one).

We'll need to hear from @Johann-S and @bardiharborow though to see if we need to adjust our JS plugins to account for the direction change. I dunno if Popper supports it off the top of my head.

@twbs/team I'd like this for v4.1 or v4.1—thoughts?

[XhmikosR]

Sounds good to me. Feel free to ping me if there are new tools we need to add.

[PascalPixel]

Popper does not support it currently cc @FezVrasta
Popper works in rtl, bootstrap's css just needs some tweaks so it anchors correctly (translate-3d messes up atm)

[FezVrasta]

@Superpencil what do you mean? What should Popper.js to to support RTL?

[kishorsathe]

Any tentative date , when it will be release ?

[PerseusTheGreat]

Hi,
@mdo, please consider these:

• Unofficial RTL-ized Bootstrap 4.x
• RTL-ized Bootstrap 4.x Examples

[prateem]

Hi, @mdo
Given that v4.1 is coming out soon and the ship list for it (#25375) doesn't include this issue, is there any update that can be provided about rtl support from the bootstrap team? I'd ideally like to not have to rely on third-party implementations.
Thanks!

[mdo]

No update to give other than this won't be in v4.1 :).

[DJafari]

@mdo rtl support is coming for v4.2 ? :-(

[alalm3i]

@mdo we need rtl support, is it coming in 4.2?

[mohamedragaey]

Hello @mdo
I have an approach for rtl-ltr support that i used on Bootstrap3 and now on bootstrap4
here in this repo you will find that i took only the scss core files for bootstrap 4 and updated for direction and added my direction.scss file
and in the build you will find 2 files bootstrap.css & bootstrap-rtl.css
https://mohamedragaey.github.io/bootstrap-scss-multi-dir/
and here is my build tool included in bootstrap-rtl as npm package
https://mohamedragaey.github.io/bootstrap4-playground/
if you find it interesting please let me know then i will make a pull request and then go for it .

[MERamadan]

4.1.2 is out and RTL is not included too. Can you please give this a priority in the next release, either 4.1.3 or 4.2? This is important for all RTL languages to get in bootstrap 4.

[SHxKM]

cast my vote, too.

[mkamensky]

Can someone summarise the RTL issues? I use bootstrap on a bidi site without any problems (flex utils solved most of the problems for me)

[PerseusTheGreat]

@mkamensky
In forked version that I am working on it, there are some issues on SCSS modules & mixins, I tagged those by //rtl inside *-rtl.scss files.

Changed SCSS module:
alert, button group, card, carousel, close, custom form, dropdown, input group, list group, modal, nav, navbar, pagination, popover, reboot, type, variables

Changed SCSS mixins:
caret, forms, grid, list, pagination, reset text

[mkamensky]

Thanks, I'll have a look

[mollaeian]

Sounds good to me

[saeed-m]

looking forward for rtl version

[parhamDA]

I am waiting for RTL version 👍 Thanks ...

[Kamalifar]

That's great. Thanks in advanced.

[IdanCo]

Just a small tip for those RTL pioneers out there -

when printing a page, the $print-body-min-width variable causes weird print issues unless you set direction: rtl for your html element (or dir="rtl" attribute in your tag). Sounds elementary, but until I started printing content, i was fine with setting just the body tag.

[MERamadan]

It is 4.3 now and we still don't see RTL support. We are understanding that the team is busy now to release version 5. Can you please include RTL support in version 5?

[shahabbbbb]

hi , please add support rtl .
thanks

[mRizvandi]

We Announce the AryaBootstrap:

AryaBootstrap is a bootstrap with dual layout align support and, used for LTR and RTL web design.

We always publish lastest version at:
https://github.com/mRizvandi/AryaBootstrap
and other older version also is exist for old projects
checkout the reference website at:
http://abs.aryavandidad.com

[pourmand1376]

Waiting eagerly to see bootstrap-rtl support.

[ahmdqader]

Guys we waiting the rtl version

[PerseusTheGreat]

@kishisland , @saeed-m , @parhamDA , @olegsv , @tornadofay , @abuassar , @MERamadan , @shahabbbbb , @pourmand1376 , @ahmdqader

Use >>>this<<< for now...

[tmorehouse]

Another option that might work is to run Bootstrap's CSS through postcss-rtl. I haven't tried it myself, but it might be an option. Note that it will generate a much larger final CSS file size.

[asaf]

I like bootstrap reverse as it is built as an extension rather bootstrap fork.

[meywd]

@MohammadYounes wouldn't rtlcss work for this?

[MohammadYounes]

@meywd Sure, It's been done long time ago!

• Repo: https://github.com/RTLCSS/bootstrap
• Preview: https://bootstrap.rtlcss.com/
• CDN: https://rtlcss.com/cdn/css-frameworks/bootstrap/

[suhailvs]

by using text-right class solved my problem.

<p dir="rtl" class="text-right"></p>

see this stackoverflow post

[1shaked]

When is the rtl will apply to the main freamworks like Vue, React?

[mrjelveh]

I'm not really into Bootstrap but i did it on my customized bootstrap fork named BootsDrac 🧛‍♂️:

without reversing and code overwriting
You can build both RTL / LTR and dark mode from same source code

just take a look and if it's helpful for Bootstrap, I will make PR and then we can improve it:
Demo
@mdo @fat