<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 ----------> <div class="card"> <header class="card-header"> <a href="" class="float-right btn btn-outline-primary mt-1">Log in</a> <h4 class="card-title mt-2">Sign up</h4> </header> <article class="card-body"> <form wtx-context="C8FD46AD-6CC3-4A3B-86E0-6B2C1268CAE8"> <div class="form-row"> <div class="col form-group"> <label>First name</label> <input class="form-control" placeholder="" wtx-context="D6C26990-D7DD-4131-8451-F41B7BB97B04" type="text"> </div> <!-- form-group end.// --> <div class="col form-group"> <label>Last name</label> <input class="form-control" placeholder="" wtx-context="413582BA-D017-4F85-A8B5-AE5371CFF9EC" type="text"> </div> <!-- form-group end.// --> </div> <!-- form-row end.// --> <div class="form-group"> <label>Email address</label> <input class="form-control" placeholder="" wtx-context="EBCC65A2-14D5-4F4A-94B5-7BA88B8520B3" type="email"> <small class="form-text text-muted">We'll never share your email with anyone else.</small> </div> <!-- form-group end.// --> <div class="form-group"> <label class="form-check form-check-inline"> <input class="form-check-input" name="gender" value="option1" wtx-context="0A63259E-F5CA-4BAD-9FD8-4F4E79F90628" wtx-rule-v3="{{myInfo.Gender}}" type="radio"> <span class="form-check-label"> Male </span> </label> <label class="form-check form-check-inline"> <input class="form-check-input" name="gender" value="option2" wtx-context="CA7E84E4-8570-48E5-BDC2-4148603ED2DB" wtx-rule-v3="{{myInfo.Gender}}" type="radio"> <span class="form-check-label"> Female</span> </label> </div> <!-- form-group end.// --> <div class="form-row"> <div class="form-group col-md-6"> <label>City</label> <input class="form-control" wtx-context="DAA517E4-51FB-4F0F-82C4-05B75933B790" type="text"> </div> <!-- form-group end.// --> <div class="form-group col-md-6"> <label>Country</label> <select id="inputState" class="form-control" wtx-context="4127415D-4A1B-480A-9BCE-D6E28A93EE43"> <option> Choose...</option> <option>Uzbekistan</option> <option>Russia</option> <option selected="">United States</option> <option>India</option> <option>Afganistan</option> </select> </div> <!-- form-group end.// --> </div> <!-- form-row.// --> <div class="form-group"> <label>Create password</label> <input class="form-control" wtx-context="F77C950F-99A6-4F56-8FF4-A115CD9DA9E5" type="password"> </div> <!-- form-group end.// --> <div class="form-group"> <button type="submit" class="btn btn-primary btn-block"> Register </button> </div> <!-- form-group// --> <small class="text-muted">By clicking the 'Sign Up' button, you confirm that you accept our <br> Terms of use and Privacy Policy.</small> </form> </article> <!-- card-body end .// --> <div class="border-top card-body text-center">Have an account? <a href="">Log In</a></div> </div> <!-- card.// -->