Change the X button on Bootstrap's Modal to left

Question

i'm trying to build a new website and I'm pretty new to HTML CSS and etc.. so i'm getting some help from Bootstrap , but right now I've encountered some problem . The language of the website I'm making right now is Hebrew , and when i open a modal in Bootstrap i can't seem to change the X's position to the left side.

I've already tried giving it a float of left , and tried to inline style it , but it doesn't seem to work .

<!-- 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>

I expect the Modal Title to be on the right side while the X is on the left side of the window . I would love some help .

Does [bootstrap-rtl](https://github.com/morteza/bootstrap-rtl) from [this question](https://stackoverflow.com/questions/19730598/right-to-left-support-for-twitter-bootstrap-3) move the X to the left? Or maybe use built-in class `pull-left` on the X button. — TheWandererLee, Jul 09 '19 at 19:17
Haven't tried bootstrap-rtl , i'll check it out . as u can see in the code i tried to use the built-in class `pull-left` on the X button. — Liran Sarel, Jul 09 '19 at 19:24

score 7 · Accepted Answer · answered Jul 09 '19 at 19:25

You can do this by changing the order of the button and h5 element and changing the auto margin for modal-header .close.

As @daryll commented using bootstrap-rtl is a more robust option: 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>

Change the X button on Bootstrap's Modal to left

1 Answers1