<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section class="vh-100 bg-image" <div class="mask d-flex align-items-center h-100 gradient-custom-3"> <div class="container h-100"> <div class="row d-flex justify-content-center align-items-center h-100"> <div class="col-12 col-md-9 col-lg-7 col-xl-6"> <div class="card" style="border-radius: 15px;"> <div class="card-body p-5"> <h2 class="text-uppercase text-center mb-5">Login</h2> <form> <div class="form-outline mb-4"> <input type="email" id="form3Example3cg" class="form-control form-control-lg" /> <label class="form-label" for="form3Example3cg">Your Email</label> </div> <div class="form-outline mb-4"> <input type="password" id="form3Example4cg" class="form-control form-control-lg" /> <label class="form-label" for="form3Example4cg">Password</label> </div> <div class="d-flex justify-content-center"> <button type="button" class="btn btn-success btn-block btn-lg">Login</button> </div> <p class="text-center text-muted mt-5 mb-0">Don't have an account? <a href="#!" class="fw-bold text-body"><u>Register here</u></a></p> </form> </div> </div> </div> </div> </div> </div> </section>