The code requires the following external files:
  • https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css
  • *https://code.jquery.com/jquery-3.2.1.slim.min.js
  • https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js
  • https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js

* - while the slim version is required, the full-blown library would work just as well.

Markup:
HTML Code:
<!-- modal -->
<div class="modal fade" id="frmForgotPassword" 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">Forgot Password</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form class="modal-body">
        <div class="form-group">
          <label class="control-label" for="txtForgotEmail">Email Address</label>
          <input class="form-control" id="txtForgotEmail" name="email" type="email" />
        </div>
        <div class="form-group">
          <input class="form-control btn btn-primary" id="btnForgotSubmit" type="submit" value="Reset" />
        </div>
      </form>
    </div>
  </div>
</div>

<!-- main -->
<div class="container-fluid">
  <div class="row justify-content-md-center justify-content-lg-center">
    <form class="col-md-8 col-lg-7 align-self-center mt-5" method="post" role="form">
      <fieldset>
        <legend class="text-center border border-primary border-left-0 border-right-0">Account Login</legend>
        <div class="alert alert-danger alert-dismissible fade show text-center d-none" role="alert">
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          Invalid username and/or password.
        </div>
        <div class="form-group">
          <label class="control-label" for="txtLoginEmail">Email Address</label>
          <input class="form-control" id="txtLoginEmail" name="email" type="email" required="required" />
        </div>
        <div class="form-group">
          <label class="control-label" for="txtLoginPassword">Password</label>
          <input class="form-control" id="txtLoginPassword" name="password" type="password" required="required" />
        </div>
        <div class="form-group">
          <input class="btn btn-lg btn-primary btn-block" id="btnLoginSubmit" type="submit" value="Log In" />
        </div>
      </fieldset>
      <nav class="nav flex-row justify-content-between">
        <a class="nav-link" href="#" data-toggle="modal" data-target="#frmForgotPassword">Forgot Password?</a>
        <a class="nav-link" href="#">Register</a>
      </nav>
    </form>
  </div>
</div>
Fiddle: Live Demo