Comments (11)
LyoNick
commented on September 7, 2024
good idea
from bootstrap-rtl.
asaf
commented on September 7, 2024
Hey,
I have a web site that requires both support for RTL/LTR,
If possible, can anyone give some guides how to flip dynamically between the two ?
Thanks.
from bootstrap-rtl.
afattahi54
commented on September 7, 2024
You can do it very easily. I do not know what is your server side language but the idea is simple. Always load bootstrap.css, if your site is in RTL mode, add bootstrap-rtl css
<link href="/styles/bootstrap.min.css" rel="stylesheet" type="text/css" media="all" />
<If the site is in RTL mode>
<link href="/styles/bootstrap-rtl.min.css" rel="stylesheet" type="text/css" media="all" />
</endif>
from bootstrap-rtl.
asaf
commented on September 7, 2024
@afattahi54 So I guess the answer is, if rtl.css is loaded, I can't switch back to LTR, right?
from bootstrap-rtl.
afattahi54
commented on September 7, 2024
Yes you can? If the page is reloaded from server you can only load bootstrap.css, if you want to switch page direction, with javascript you can remove the bootstrap-rtl.css with javascript as mentioned in http://stackoverflow.com/questions/24087152/remove-css-file-with-javascript
from bootstrap-rtl.
AlexYudaev
commented on September 7, 2024
@asaf
this is my way.
Adding to html dir="rtl" or "ltr" and then check by js
if(document.getElementsByTagName('html')[0].dir != "rtl"){
document.write('<link href="bootstrap.min.css" rel="stylesheet">');
} else {
document.write('<link href="bootstrap-rtl.min.css" rel="stylesheet">');
}from bootstrap-rtl.
afattahi54
commented on September 7, 2024
@AlexYudaev
I belive the bootstrap.min.css must always be loaded. OR the bootstrap-rtl should have bootstrap.css on top of it
from bootstrap-rtl.
AlexYudaev
commented on September 7, 2024
@afattahi54
you right. sorry, in my projects i just include bootstrap to bootstrap-rtl.
from bootstrap-rtl.
willi1s
commented on September 7, 2024
I use AngularJS, so use ng-if to pull in the relevant file:
<link rel="stylesheet" href="bower_components/bootstrap-rtl/dist/css/bootstrap-rtl.css" ng-if="getCurrentLanguage().rtl"/>I also use an ng-class on the body to add an rtl class:
<body ng-class="{rtl:getCurrentLanguage().rtl}">I then use css to set the text direction and override bootstrap classes rather than going around adding .flip mainually:
.rtl {
direction: rtl;
}
.rtl .pull-right {
float: left !important;
}
.rtl .pull-left {
float: right !important;
}
.rtl .dropdown-menu-right {
left: 0;
right: auto;
}
.rtl .dropdown-menu-left {
left: auto;
right: 0;
}from bootstrap-rtl.
asaf
commented on September 7, 2024
Thanks guys, I just wanted to ensure that while the rtl css loaded there's no way to revert back to LTR,
@willi1s Nice trick with the ng-if, Shame on Ember.js not having anything that completes with param level directives.
Thanks!
from bootstrap-rtl.
kirangottumukkala
commented on September 7, 2024
Though I agree this is dirty method, I am able to fix this issue with my asp.net MVC5 project with the help of Resource files. I added a resource setting with blank value inside default one and with value that is pointing to bootstrap-rtl.min.css. Then I added this into @Html.Raw which would print the css link tag either empty or tag.
Resource.resx
RtlStyleSheet : ""
Resource.ar.resx
RtlStyleSheet: <link rel='stylesheet' href='Content/bootstrap-rtl.min.css' />
Index.html
<head>
@Html.Raw(Resources.Resouce.RtlStyleSheet)
</head>
Hope this helps asp.net mvc guys.
from bootstrap-rtl.
Related Issues (20)
- Add to Nuget Packages HOT 1
- columns overflow horizontally because of missing .row HOT 2
- Some missing styles! HOT 2
- bootstrap-rtl min is missing navbar-right HOT 1
- Label
- drop menu problem HOT 1
- bootstrap core less files loaded insteed of bootstrap rtl in multi language website
- owl carousel dont work after your script HOT 2
- Bootstrap & Chrome HOT 10
- Bootstrap Input Group Add On right border color
- Facing problem with flexslider HOT 7
- The navbar is not flipping HOT 4
- Question/help: angular app with both rtl and ltr pages HOT 3
- input-group-addon within input-group is not flipped!
- Any plan for Bootstrap 4 RTL Feature ? When It will Release ? HOT 3
- float in in small screen
- Is it possible to disable the whole css for certain elements?
- Text within svg components seems to be transformed out of the box
- get confused with the bootstrap-flipped.css
- Push 3.4.0 to npm repository
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-rtl.