# RTL Support
Bootstrap Vue does not have RTL support, but it is possible to add RTL support to your Builderall Vue Ui application just by
inserting the document direction in the html
tag and informing if you want your application to behave in RTL when using the library (you can use the dir
attribute itself for that)
index.html
<html dir="rtl">
<html dir="ltr">
app.js
Vue.use(BuilderallVueUi, {
rtl: document.documentElement.dir == 'rtl'
})
Note: This library offers RTL support only to its own components and to Bootstrap vue components with custom CSS. To customize other things, you can add necessary CSS within the selector html[dir=rtl]
# RTL Spacing Helper
Bootstrap Vue provides us with some fantastic spacing helper classes (opens new window)! However, if we want a specific spacing only when the application is in RTL, for example, this is not possible.
Therefore, the Builderall Vue UI includes some classes of add-ons that determine the spacing to be used only in specific directions!
For example, ml-rtl-3
, will add a margin to the left of 1rem for a given element, only when in RTL.
The complete syntax is:
${property}${side}-${dir}-${size}
Expand to examples
- ml-ltr-1
- ml-ltr-2
- ml-ltr-3
- ml-ltr-4
- ml-ltr-5
- ml-ltrn-1
- ml-ltrn-2
- ml-ltrn-3
- ml-ltrn-4
- ml-ltrn-5
- mr-ltr-1
- mr-ltr-2
- mr-ltr-3
- mr-ltr-4
- mr-ltr-5
- mr-ltrn-1
- mr-ltrn-2
- mr-ltrn-3
- mr-ltrn-4
- mr-ltrn-5
- pl-ltr-1
- pl-ltr-2
- pl-ltr-3
- pl-ltr-4
- pl-ltr-5
- pr-ltr-1
- pr-ltr-2
- pr-ltr-3
- pr-ltr-4
- pr-ltr-5
If you change ltr
tortl
in the above classes, everything will work the same way. But only when the document direction is rtl
# RTL mirror helper
It is also possible to use the rtl-mirror
class to mirror components when in rtl
# RTL display helper
d-rtl-none
- to hide content in RTL dird-ltr-none
- to hide content in non RTL dirs