<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">Create an account</h2> <form> <div class="form-outline mb-4"> <input type="text" id="form3Example1cg" class="form-control form-control-lg" /> <label class="form-label" for="form3Example1cg">Your First Name</label> </div> <div class="form-outline mb-4"> <input type="text" id="form3Example1cg" class="form-control form-control-lg" /> <label class="form-label" for="form3Example1cg">Your Last Name</label> </div> <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="form-outline mb-4"> <input type="password" id="form3Example4cdg" class="form-control form-control-lg" /> <label class="form-label" for="form3Example4cdg">Confirm password</label> </div> <div class="form-check d-flex justify-content-center mb-5"> <div class="form-check d-flex justify-content-left mb-5"> <input class="form-check-input me-2" type="checkbox" value="" id="form2Example3cg" /> </div> <label class="form-check-label" for="form2Example3g"> I agree all statements in <a href="#!" class="text-body"><u>Terms of service</u></a> </label> </div> <div class="d-flex justify-content-center"> <button type="button" class="btn btn-success btn-block btn-lg">Register</button> </div> <p class="text-center text-muted mt-5 mb-0">Have already an account? <a href="#!" class="fw-bold text-body"><u>Login here</u></a></p> </form> </div> </div> </div> </div> </div> </div> </section>