I am currently in the process of building a new website and I am still learning HTML, CSS, and other related technologies. I am utilizing Bootstrap to assist me, but I have run into a problem. The website I am working on is in Hebrew and I am struggling to move the X button in the Bootstrap modal to the left side of the window.
I have attempted to use the float property with a value of left and also tried inline styling, but neither approach seems to be working.
<!-- Sign In Button -->
<div class="container buttons">
<a class="btn btn-light download " data-toggle="modal" data-target="#Sign-In-Modal">התחברו</a>
<!-- Sign In Button Modal -->
<div class="modal fade" id="Sign-In-Modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">התחברות</h5>
<button type="button" class="close pull-left" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" style="text-align: right;">
.הכנס שם משתמש וסיסמא בכדי להתחבר
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" style="float: left;" data-dismiss="modal">סגור</button>
<button type="button" class="btn btn-light" style="background-color: #e3f2fd; float: left;">התחבר</button>
</div>
</div>
</div>
</div>
My desired outcome is to have the Modal Title on the right side while the X button is on the left side of the window. Any assistance would be greatly appreciated.