Türker Yıldırım

RTL as a separate stylesheet, built from the same source

Note2 min read

Bootstrap 5 builds a right-to-left stylesheet with RTLCSS, so direction handling is a build output rather than a set of overrides.

<html dir="rtl" lang="ar">
<link rel="stylesheet" href="/css/bootstrap.rtl.min.css">

<!-- and the naming that makes it work: logical properties.
     .ms-3 is margin-start, not margin-left.
     .text-start, not .text-left. -->

<!-- custom CSS with `left:` or `margin-left:` is NOT
     flipped unless it goes through the same build. -->

The rename from ml to ms and left to start across every utility is the breaking change that makes the RTL build possible, and it is a large mechanical diff on any existing project. The part that catches people is custom CSS: it is only flipped if it passes through RTLCSS, so a project with its own stylesheet needs the same pipeline or it produces a page that is half mirrored.