Bootstrap V5 LTR and RTL in Laravel 8

I'm trying to use the Bootstrap V5 LTR and RTL at the same time in my laravel 8 application when I switch to Arabic language (RTL) mode the design look terrible. I don't know why because I followed all the instructions mentioned there...

Here is my Codes :

resources/sass/app.scss

/* rtl:begin:options: {
  "autoRename": true,
  "stringMap":[
    "name": "ltr-rtl",
    "priority": 100,
    "search": ["ltr"],
    "replace": ["rtl"],
    "options": {
      "scope": "*",
      "ignoreCase": false
    }
  ]
} */
.ltr {
    @import "~bootstrap/scss/bootstrap";
}
/*rtl:end:options*/
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";

resources/views/example.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" dir="{{ (app()->isLocale('ar') ? 'rtl' : 'ltr') }}" class="ltr">
<head>
    ...
</head>
<body>
</html>