10

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 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

  • React + Bootstrap + RTL? or React + some CSS framework + RTL?

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).

Milad R
  • 1,854
  • 9
  • 25
  • 36

2 Answers2

1

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.

Ashkan AHB
  • 11
  • 1
1

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

M.Ali El-Sayed
  • 1,608
  • 20
  • 23