Search code examples
laravelnpmlocalizationbootstrap-5direction

RTL does to not order checkbox well

I have a Laravel project with bootstrap ui, the project is localized with

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" dir="{{ LaravelLocalization::getCurrentLocaleDirection() }}">

so it accepts to directions depends on the language, but when I added --auth scaffolding with Laravel, the checkbox in

                        <div class="row mb-3">
                            <div class="col-md-8 offset-md-4">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
                                    <label class="form-check-label" for="remember">
                                        {{ __('app.rememberMe') }}
                                    </label>
                                </div>
                            </div>
                        </div>

is to the left in all ways, like this: An image of the problem

I tried to reorder the label before the checkbox, but it didn't help

Note that I'm using compiled bootstrap with npm, and CDN for RTL bootstrap. I thought bootstrap's classes would be overridden by one of them, but both of them added the functionality for both direction at the same time, like this for me (margin start) example for margin start

Solution

  • That's might happed because overlapping with this class "form-check" in bootstrap try to remove this class to "form-control" like this :

     <div class="row mb-3">
    <div class="col-md-8 offset-md-4">
        <div class="form-control">
            <input class="form-check-input" type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
            <label class="form-check-label" for="remember">
                {{ __('app.rememberMe') }}
            </label>
        </div>
    </div>
</div>