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 :

<nav class="navbar " role="navigation" aria-label="main navigation">
 <div class="navbar-brand">
  <a class="navbar-item" href="https://bulma.io">
  <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
  </a>

  <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data- 
   target="navbarBasicExample">
   <span aria-hidden="true"></span>
   <span aria-hidden="true"></span>
   <span aria-hidden="true"></span>
  </a>
 </div>

 <div id="navbarBasicExample" class="navbar-menu">
  <div class="navbar-start">
    <a class="navbar-item">
      Home
    </a>

   <a class="navbar-item">
    Documentation
   </a>

   <div class="navbar-item has-dropdown is-hoverable">
    <a class="navbar-link">
      More
    </a>

    <div class="navbar-dropdown">
      <a class="navbar-item">
        About
      </a>
      <a class="navbar-item">
        Jobs
      </a>
      <a class="navbar-item">
        Contact
      </a>
      <hr class="navbar-divider">
      <a class="navbar-item">
        Report an issue
      </a>
    </div>
  </div>
</div>

<div class="navbar-end">
  <div class="navbar-item">
    <div class="buttons">
      <a class="button is-primary">
        <strong>Sign up</strong>
      </a>
      <a class="button is-light">
        Log in
       </a>
     </div>
   </div>
  </div>
 </div>
</nav>
<nav class="navbar is-dark " role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
  <a class="navbar-item" href="https://bulma.io">
    <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
  </a>

   <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data- 
    target="navbarBasicExample">
     <span aria-hidden="true"></span>
     <span aria-hidden="true"></span>
     <span aria-hidden="true"></span>
    </a>
 </div>

 <div id="navbarBasicExample" class="navbar-menu">
  <div class="navbar-start">
    <a class="navbar-item">
       Home
   </a>

   <a class="navbar-item">
     Documentation
   </a>

   <div class="navbar-item has-dropdown is-hoverable">
     <a class="navbar-link">
       More
     </a>

     <div class="navbar-dropdown">
       <a class="navbar-item">
         About
       </a>
       <a class="navbar-item">
         Jobs
       </a>
       <a class="navbar-item">
         Contact
       </a>
       <hr class="navbar-divider">
       <a class="navbar-item">
        Report an issue
       </a>
     </div>
   </div>
 </div>

 <div class="navbar-end">
   <div class="navbar-item">
     <div class="buttons">
       <a class="button is-primary">
         <strong>Sign up</strong>
       </a>
       <a class="button is-light">
         Log in
       </a>
      </div>
     </div>
    </div>
  </div>
 </nav>

Answer 1

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.

EDIT 2025:

Since the release of v1, the main version also works in RTL contexts, thanks to the use of logical properties. As a result, no separate RTL version of Bulma is developed anymore. just use dir=rtl

Example on codepen

Answer 2

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

<div class="columns is-mobile">
  <div class="card">
    <div class="card-content">
      <div class="content is-large">

        <p dir="rtl">
          یه متن به زبان فارسی
        </p>

      </div>
    </div>
  </div>
</div>