For this situation Html
layout change won't work anymore. It should be fixed using only CSS
styles.
So apply below styles when you convert your html page arabic version.
.form-check {
direction: rtl;
}
This style also works when <html>
tag has `lang="ar".
<html lang="ar">
<body>
<div class="form-check" style="width: 49%;text-align: right;position: inherit;display: inline-block;">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1"> فيلا
<span class="circle">
<span class="check"></span>
</span>
</label>
</div>
</body>
</html>
html[lang="ar"] .form-check {
direction: rtl;
}
This code snippet shows live example.
.form-check {
direction: rtl;
}
<div class="form-check" style="width: 49%;text-align: right;position: inherit;display: inline-block;">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1"> فيلا
<span class="circle">
<span class="check"></span>
</span>
</label>
</div>
label
text to appear on the left, swap the order of the<input type='radio">
and the<label>
in the html. For any form field that includes text you can use<input type='text' dir='rtl' />
– Bryce Howitson Nov 18 '19 at 17:15