I've encountered an issue with the bootstrap button. Whenever I insert 2 elements like div or span inside it, the little arrow within the button ends up below the button text. It seems to be caused by a float attribute which then arranges the elements vertically.
<!--HTML Part-->
<div class="btn-group">
<button type="button" class="btn btn-outline-white dropdown-toggle" data-toggle="dropdown>
<span class="english">Site Language</span><span class="farsi">زبان سایت</span>
</button>
/*CSS Part*/
.english {display: none !important;}
.farsi {
display: none !important;
direction: rtl;
font-family: 'Lalezar';
text-align: right;
}
.english:lang(en), .farsi:lang(fa) {
display: block !important;
}
-
//JS Part
<script>
function changelang2fa() {
document.getElementsByTagName("HTML")[0].setAttribute("lang", "fa");
}
function changelang2en() {
document.getElementsByTagName("HTML")[0].setAttribute("lang", "en");
}
</script>
Usually, the button appears as:
https://i.sstatic.net/MrItd.png
But when there's a span tag inside, the style becomes deformed:
https://i.sstatic.net/FF4CN.png
P.S. : I plan on making my website bilingual (English and Farsi)