css - horizontal line in bootstrap modal footer exceeds window

Question

I want to make a mini-form in a Bootstrap 4 modal, but the modal's footer's border-top seems to extend beyond the modal width for some reason. How can I make the footer's border-top stay at the right width? I found this topic which explains how to completely remove it, but ideally I'd not remove it but simply have it at the correct width.

JsFiddle: https://jsfiddle.net/3qp82myL/

  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#loginModal">
    Open modal
  </button>
  <div class="modal fade" id="loginModal" data-backdrop="static">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form action="#">
                    <div class="modal-header"><h4 class="modal-title">That Page Needs Logging In</h4><button type="button" class="close" data-dismiss="modal">&times;</button></div>
                    <div class="modal-body">
                        <div class="form-group"><input name='email' type="text" class="form-control" placeholder="Email"></div>
                        <div class="form-group"><input name='password' type="password" class="form-control" placeholder="Password"></div>
                    </div>
                    <div class="modal-footer row align-items-center justify-content-center">
                        <input type="submit" class="btn btn-primary btn-lg btn-shadow-blue d-inline" value="Log In" id="login-modal-submit">
                        <input type="button" class="btn btn-outline-primary btn-lg btn-shadow-blue d-inline" data-dismiss="modal" value="Cancel" id="login-modal-cancel">
                    </div>
                </form>
            </div>
        </div>
    </div>

question from:https://stackoverflow.com/questions/65648154/horizontal-line-in-bootstrap-modal-footer-exceeds-window

Answer 1

just remove row class from modal-footer div.

Fixed html :

  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#loginModal">
    Open modal
  </button>
  <div class="modal fade" id="loginModal" data-backdrop="static">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form action="#">
                    <div class="modal-header"><h4 class="modal-title">That Page Needs Logging In</h4><button type="button" class="close" data-dismiss="modal">&times;</button></div>
                    <div class="modal-body">
                        <div class="form-group"><input name='email' type="text" class="form-control" placeholder="Email"></div>
                        <div class="form-group"><input name='password' type="password" class="form-control" placeholder="Password"></div>
                    </div>
                    <div class="modal-footer align-items-center justify-content-center">
                        <input type="submit" class="btn btn-primary btn-lg btn-shadow-blue d-inline" value="Log In" id="login-modal-submit">
                        <input type="button" class="btn btn-outline-primary btn-lg btn-shadow-blue d-inline" data-dismiss="modal" value="Cancel" id="login-modal-cancel">
                    </div>
                </form>
            </div>
        </div>
    </div>