Add Bootstrap 5 RTL support with the RTLCSS tool and complete bootstrap base switching between LTR and RTL

Problem/Motivation

Bootstrap 5 has a completely a new way for styling RTL ( Right to Left ) sites

RTL · Bootstrap v5.0

Approach

Our approach to building RTL support into Bootstrap comes with two important decisions that impact how we write and use our CSS:

1. First, we decided to build it with the RTLCSS project. This gives us some powerful features for managing changes and overrides when moving from LTR to RTL. It also allows us to build two versions of Bootstrap from one codebase.

2. Second, we’ve renamed a handful of directional classes to adopt a logical properties approach. Most of you have already interacted with logical properties thanks to our flex utilities—they replace direction properties like left and right in favor start and end. That makes the class names and values appropriate for LTR and RTL without any overhead.

For example, instead of .ml-3 for margin-left, use .ms-3.

Working with RTL, through our source Sass or compiled CSS, shouldn’t be much different from our default LTR though.

Proposed resolution

Add RTLCSS with gulp-rtlcss and gulp-rename for the css/base/bootstrap.base.css and postcss the file and rename as css/rtl/base/bootstrap-rtl.base.css
Have the vartheme_bs5/framework and vartheme_bs5/framework-rtl
Switch between the LTR library and the RTL library in the html.html.twig template file using the html_attributes['dir']

Remaining tasks

• ✅ File an issue about this project
• ✅ Addition/Change/Update/Fix to this project
• ✅ Testing to ensure no regression
• ➖ Automated unit/functional testing coverage
• ➖ Developer Documentation support on feature change/addition
• ➖ User Guide Documentation support on feature change/addition
• ➖ Update Release Notes and Update Helper on new feature change/addition
• ✅ Code review from 1 Varbase core team member
• ✅ Full testing and approval
• ✅ Credit contributors
• ✅ Review with the product owner
• ❌ Release varbase-9.1.0-beta1, vartheme_bs5-1.0.0-beta1

Varbase update type:

• ✅ No Update
• ➖ Optional Update
• ➖ Forced Update
• ➖ Forced Update if Unchanged

User interface changes

RTL Homepage with testing demo data

RTL Blog site section with testing demo data

API changes

• N/A

Data model changes

• N/A