Comments (4)
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/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-dpuaG1suU0eT09tx5plTaGMLBsfDLzUCCUXOY2j/LSvXYuG6Bqs43ALlhIqAJVRb" crossorigin="anonymous">
Hope I was of any help!
from bootstrap.
@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 setmargin-left
orpadding-left
in LTR,margin-right
orpadding-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
.
from bootstrap.
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.
from bootstrap.
I'm closing this issue, as importing the RTL version of Bootstrap 5 is good enough for my use case.
Thanks again @TommasoAllegretti !
from bootstrap.
Related Issues (20)
- projek
- Color theme setting ignored by the menu of a <select> element in mobile browsers
- Cheatsheet horizontal scrolling HOT 1
- Escape key is totally supressed in modal when data-bs-keyboard is false HOT 2
- Popover not closed on toggle after show HOT 4
- Bootstrap 4 not displaying the colour in Print review
- boo trap being used to I’m not exactly sure technically route my devices get me into adaptive web portal kind of relentlessly in person and digitally stalk. Me commit sex crimes involving girls that I know spying on me through the camera probably committing only God knows what a legal activities using the network that they’ve placed me in
- Request for Refund Support
- [Docs] Column order classes missing Sass variable name HOT 2
- Incorrect description for Tooltips getInstance method in documentation
- ScrollSpy Problem
- Add `:focus-within` class like `.form-control:focus`
- Deprecation Warning with sass 1.78 HOT 2
- go fuck yourself HOT 1
- `--#{$prefix}form-invalid-border-color` is compiling as `border: 1px solid...` HOT 1
- Outlined checks without IDs HOT 4
- Bootstrap 5 carousel will not autoplay if added to the DOM after page load. HOT 2
- Bootstrap 5 Carousel text only
- `.btn-group-sm` does not work with dropdown in Bootstrap 5.3.3 HOT 1
- Consider making warning text and backgrounds different color variables.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from bootstrap.