Problem with change direction to rtl in Bulma

Question

good evening everyone

recently i have use Bulma framework and now i want to try design my theme in RTL mode , I've install all the required thing like bulma rtl and ... , but when i try to use it export that show in browser is like the below image , I've tried use body direction but it doesn't work, and one more thing i use laravel and install all of this with npm

and here is my code :


 
  
  
  

  
   
   
   
  
 

 
  
    
      Home
    

   
    Documentation
   

   
    
      More
    

    
      
        About
      
      
        Jobs
      
      
        Contact
      
      
      
        Report an issue
      
    
  



  
    
      
        Sign up
      
      
        Log in
       
     
   
  
 


  
  
    
  

   
     
     
     
    
 

 
  
    
       Home
   

   
     Documentation
   

   
     
       More
     

     
       
         About
       
       
         Jobs
       
       
         Contact
       
       
       
        Report an issue
       
     
   
 

 
   
     
       
         Sign up
       
       
         Log in

user_4016922 · Answer

Now Bulma framework (from version : 0.9.0) supports RTL languages.

You do not need to do anything special.

Just download new version of Bulma and use Bulma-rtl.css file.

Example on codepen

user_8680517 · Answer

after apply bulma-rtl, you have to make this class and add that to your navbar,navbarBasicExample and navbar-start classes.

.flex-direction-row{
    flex-direction: row;
};

like this

hope help you.

user_12119940 · Answer

If you are using ReactJs

Check Bluma framework version . Your version >= 0.90

In the Index.js file imports you must use bluma-rtl.min.css :

By default :

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import 'bulma/css/bulma.min.css';

ReactDOM.render(  , document.getElementById('root') );

Change to:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import 'bulma/css/bulma-rtl.min.css';

ReactDOM.render(  , document.getElementById('root') );

user_7958330 · Answer

add dir="rtl" to the innermost html tag that includes RTL text example:


  
    
      

        
          یه متن به زبان فارسی

Problem with change direction to rtl in Bulma

4 Answers