When dealing with this specific scenario, a simple CSS
adjustment is necessary as opposed to tinkering with the Html
layout.
Below are the styles to be implemented when converting your html page into an Arabic version:
.form-check {
direction: rtl;
}
This styling also serves its purpose when the <html>
tag includes `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;
}
The following code snippet provides a live demonstration of the concept elucidated above.
.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>