Измените кнопку X на модале Bootstrap влево

Question

Я пытаюсь создать новый веб-сайт, и я довольно плохо знаком с HTML CSS и т. Д., Поэтому я получаю некоторую помощь от Bootstrap, но сейчас я столкнулся с некоторой проблемой. Язык веб-сайта, который я сейчас создаю, - иврит, и когда я открываю модал в Bootstrap, я не могу изменить положение X с левой стороны.

Я уже пытался присвоить ему float left и пытался встроить его в стиль, но, похоже, это не сработало.

<!-- 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">&times;</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>

Я ожидаю, что Модальное Заголовок будет справа, а Х - в левой части окна. Я хотел бы помочь.

Answer 1

Это можно сделать, изменив порядок элементов button и h5 и изменив автоматическое поле для modal-header .close.

Как отметил @daryll, использование bootstrap-rtl является более надежным вариантом: https://bootstrap.rtlcss.com

.modal-header .close {
    padding: 1rem 1rem;
    margin: -1rem auto -1rem -1rem;
}

<h5 class="modal-title order-2" id="exampleModalLabel">התחברות</h5>
<button type="button" class="close order-1" data-dismiss="modal" aria-label="Close">
   <span aria-hidden="true">×</span>
</button>