RTL alignment problems: navbar-nav and navbar-brand

[ibleaman]

I came across some alignment problems when adding a navbar to a multilingual website, where some of the pages have dir="rtl" specified in the root. Here are minimal examples:

• LTR example - works as intended
• RTL example - RTL direction is specified in root; problematic alignments
• RTL example - manually fixed

Bootstrap 5.3.3 defines .ms-auto (and other .ms- values) based on margin-left. Also, .navbar-brand is defined with a margin-right property.

[TommasoAllegretti]

Hi @ibleaman, from my understanding of what is explained in Bootstrap's documentation, if you want to enable RTL in Bootstrap-powered pages you need to include the RTL version of the CSS.

I have tried replacing the stylesheet link in the fiddle you shared with the RTL version and the result seems to be the same as the fixed version of the fiddle.

Here's the link tag:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.rtl.min.css" integrity="sha384-dpuaG1suU0eT09tx5plTaGMLBsfDLzUCCUXOY2j/LSvXYuG6Bqs43ALlhIqAJVRb" crossorigin="anonymous">

Hope I was of any help!

[ibleaman]

@TommasoAllegretti Thank you for your quick response! Yes, I did overlook that step on the RTL documentation page.

Using the RTL version of Bootstrap fixes the problem in my jsfiddle link 2. However, it creates the same alignment problem if you use it in link 1, because .ms-auto is now defined as:

.ms-auto {
  margin-right: auto !important;
}

So: Is there no way to use a single Bootstrap 5 CSS file on a multilingual website, whether the original version or the RTL version, so that it works across all pages regardless of their direction? The documentation on spacing suggests that this is exactly what .ms- is supposed to accomplish:

s - (start) for classes that set margin-left or padding-left in LTR, margin-right or padding-right in RTL

The RTL documentation page also suggests that start/end are what's used in the CSS, not left/right. But both the original and the RTL versions of Bootstrap 5 still use left and right here.

I thought this was supposed to be an improvement over Bootstrap 4, which used ml instead of ms.

[TommasoAllegretti]

I am not sure what the evolution of Bootstrap regarding this feature is, but according to "LTR and RTL at the same time", the solution to your problem should be RTLCSS String Maps.
I am not aware of your project's details but I hope that can be helpful in solving your issue.

[ibleaman]

I'm closing this issue, as importing the RTL version of Bootstrap 5 is good enough for my use case.

Thanks again @TommasoAllegretti !