How can I enable RTL builds and switch direction at runtime?

Asked on Jul 29, 2025

1 Answer

Bootstrap 5.3+ supports RTL (Right-to-Left) builds, allowing you to switch text directions dynamically. To enable RTL and switch directions at runtime, you can use the following approach.

<!-- BEGIN COPY / PASTE -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.rtl.min.css" rel="stylesheet" id="bootstrap-rtl">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-ltr" disabled>

        <button id="toggleDirection" class="btn btn-primary">Toggle Direction</button>

        <script>
            document.getElementById('toggleDirection').addEventListener('click', function() {
                var rtlLink = document.getElementById('bootstrap-rtl');
                var ltrLink = document.getElementById('bootstrap-ltr');
                if (rtlLink.disabled) {
                    rtlLink.disabled = false;
                    ltrLink.disabled = true;
                } else {
                    rtlLink.disabled = true;
                    ltrLink.disabled = false;
                }
            });
        </script>
        <!-- END COPY / PASTE -->

Additional Comment:

Include both RTL and LTR Bootstrap CSS files in your HTML, with one initially disabled.
Use a button to toggle the `disabled` attribute on the link elements to switch between RTL and LTR.
Ensure that the script is placed after the button in the HTML to ensure the DOM is fully loaded before attaching the event listener.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions