<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 ----------> <nav class="navbar navbar-expand-lg navbar-light bg-dark"> <div class="container d-flex flex-column flex-md-row justify-content-between"> <a class="py-2" href="#"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="d-block mx-auto"><circle cx="12" cy="12" r="10"></circle><line x1="14.31" y1="8" x2="20.05" y2="17.94"></line><line x1="9.69" y1="8" x2="21.17" y2="8"></line><line x1="7.38" y1="12" x2="13.12" y2="2.06"></line><line x1="9.69" y1="16" x2="3.95" y2="6.06"></line><line x1="14.31" y1="16" x2="2.83" y2="16"></line><line x1="16.62" y1="12" x2="10.88" y2="21.94"></line></svg> </a> <a class="py-2 d-none d-md-inline-block" href="#"></a> <a class="py-2 d-none d-md-inline-block" href="#"></a> <a class="py-2 d-none d-md-inline-block" href="#"></a> <a class="py-2 d-none d-md-inline-block" href="#"></a> <a class="py-2 d-none d-md-inline-block" href="#"></a> <a class="py-2 d-none d-md-inline-block" href="#"></a> <a class="py-2 d-none d-md-inline-block" href="#"></a> <a class="py-2 d-none d-md-inline-block" href="#"></a> <a class="py-2 d-none d-md-inline-block" href="#"></a> <a class="py-2 d-none d-md-inline-block" href="#"></a> <a class="py-2 d-none d-md-inline-block" href="#"></a> <a class="py-2 d-none d-md-inline-block" href="#"></a> <a class="py-2 d-none d-md-inline-block" href="#"></a> <a class="py-2 d-none d-md-inline-block" href="#"></a> <a class="py-2 d-none d-md-inline-block" href="#"></a> <a class="py-2 d-none d-md-inline-block" href="#"></a> <a class="py-2 d-none d-md-inline-block" href="#"></a> <a class="py-2 d-none d-md-inline-block" href="#"></a> <a class="py-2 d-none d-md-inline-block" href="#"></a> <a class="py-2 d-none d-md-inline-block" href="#"></a> <a class="py-2 d-none d-md-inline-block" href="#"></a> <a class="py-2 d-none d-md-inline-block" href="#"></a> <a class="py-2 d-none d-md-inline-block" href="#"></a> <a class="py-2 d-none d-md-inline-block" href="#"></a> <a class="py-2 d-none d-md-inline-block" href="#"></a> <a class="py-2 d-none d-md-inline-block" href="#"></a> <a class="py-2 d-none d-md-inline-block" href="#"></a> <a class="py-2 d-none d-md-inline-block" href="#"></a> <a class="py-2 d-none d-md-inline-block" href="#"></a> <a class="py-2 d-none d-md-inline-block" href="#"></a> <a class="py-2 d-none d-md-inline-block" href="#"></a> <a class="py-2 d-none d-md-inline-block" href="#"></a> <a class="py-2 d-none d-md-inline-block" href="#"></a><a class="py-2 d-none d-md-inline-block" href="#"></a><a class="py-2 d-none d-md-inline-block" href="#"></a><a class="py-2 d-none d-md-inline-block" href="#"></a><a class="py-2 d-none d-md-inline-block" href="#"></a><a class="py-2 d-none d-md-inline-block" href="#"></a><a class="py-2 d-none d-md-inline-block" href="#" style="font-weight: 700;">Login</a> <button type="button" class="btn btn-primary" style="font-weight: 700;">Sign-Up</button></div> </nav> <br> <div class="container"> <div class="row justify-content-center"> <div class="col-12 col-lg-10 col-xl-8 mx-auto"> <div class="my-4"> <form> <div class="row mt-5 align-items-center"> <div class="col"> <div class="row align-items-center"> <div class="col-md-7"> <h4 class="mb-1">Welcome back, User!</h4> </div> </div> <div class="row mb-4"> </div> </div> </div> <hr class="my-4" /> <div class="form-row"> <div class="form-group col-md-6"> <label for="firstname">First name</label> <input type="text" id="firstname" class="form-control" placeholder="" /> </div> <div class="form-group col-md-6"> <label for="lastname">Last name</label> <input type="text" id="lastname" class="form-control" placeholder="" /> </div> </div> <div class="form-group"> <label for="inputEmail4">Email</label> <input type="email" class="form-control" id="inputEmail4" placeholder="" /> </div> <hr class="my-4" /> <div class="row mb-4"> <div class="col-md-6"> <div class="form-group"> <label for="inputPassword4">Old Password</label> <input type="password" class="form-control" id="inputPassword5" /> </div> <div class="form-group"> <label for="inputPassword5">New Password</label> <input type="password" class="form-control" id="inputPassword5" /> </div> <div class="form-group"> <label for="inputPassword6">Confirm Password</label> <input type="password" class="form-control" id="inputPassword6" /> </div> </div> <div class="col-md-6"> <p class="mb-2">Password requirements</p> <p class="small text-muted mb-2">To create a new password, you have to meet all of the following requirements:</p> <ul class="small text-muted pl-4 mb-0"> <li>Minimum 8 character</li> <li>At least one special character</li> <li>At least one number</li> <li>Can’t be the same as a previous password</li> </ul> </div> </div> <button type="submit" class="btn btn-primary">Save Change</button> </form> </div> </div> </div> </div>