Modal close button without title is left aligned

Hello,

if you create a modal without a title, the close button is not aligned right but left.

<div class="modal fade">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

For testing, you could just remove the title from the modals on the example page via the browser inspector: http://v4-alpha.getbootstrap.com/components/modal/#examples

[PurvaA]

@bembelimen, I faced same problem. To fix this issue I modified few classes in Modal component. Here is the list of classes:

.modal-header { display: block!important; } .modal-title { float: left; } .modal-header .close { float: right; }

With these adjustments, my issue is fixed. You can check my fiddle https://jsfiddle.net/ue89kxmg/. Click on ‘Launch demo modal’ button to get the Modal

[shankara-subramani]

Hey @Johann-S , I think adding ml-auto to button.close should fix the issue. I had issues in running npm in my machine (strange). But this should fix the issue => https://github.com/shankariyerr/bootstrap/blob/22616/scss/_close.scss#L28

Should I raise a PR? I’m planning to squash some bugs in the coming days. Let me know guys.