Проблема с изменением направления на RTL в Булме

Question

добрый вечер всем

недавно я использовал Bulma Framework и теперь я хочу попробовать разработать мою тему в режиме RTL, я установил все необходимые вещи, такие как bulma rtl и ..., но когда я попробуйте использовать его, чтобы экспорт в браузере был похож на изображение ниже, я попытался использовать направление тела, но оно не работает, и еще одну вещь я использую laravel и устанавливаю все это с npm

и вот мой код:

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