Menu
I want to build react UI with right to left direction. So far I've tested bootstrap className="pull-right" or manually overriding CSS properties with *{direction:rtl;} and .float-right:{float:right;} on react-bootstrap components. However this seems to be a broken approach as it doesn't work on some elements such as this 
drop down button that loses its default padding and shape or some items will still have their previous orders relative to each other.
Is there any react framework for having RTL direction? In other words, there are frameworks for React + Bootstrap and Bootstrap + RTL. Is there anything like
I was thinking about using bootstrap-rtl instead of bootstrap-react components and wrap those HTML/CSS components with my react components; However boostrap needs jQuery library and I read that, one needs to be cautious when thinking about this combination (react + jquery).
527
The class dropdown-menu-right will align right the dropdown menu to that of the parent. Unless that li item stretches to the end of the navbar container, the contribute dropdown won't move.
By default, all the card elements are aligned vertically one after the other as in the DOM. You can achieve the element to align horizontally as well by adding the class e-card-horizontal in the root card element.
Maybe this can help:
https://github.com/MahdiMajidzadeh/bootstrap-v4-rtl
As it said, simply add rtl class to any element you want to be right to left.
59
Its not the best implemnation but it will work for u
go to package.json and in dependencies add the line
"bootstrap-v4.5-rtl":"*",
and in index.js add
import 'bootstrap-v4.5-rtl/css/rtl/bootstrap.rtl.min.css';
and change index.html second line to to
<html lang="ar" dir="rtl">
also you can use
bootstrap-v4-rtl but not everything is implemented with bootstrap-v4-rtl you should use
import 'bootstrap-v4-rtl/dist/css/bootstrap-rtl.min.css';
until writing this answer there is no v5 implementation for RTL
40
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
