<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script> <div class="container"> <div id="accordion"> <div class="row"> <div class="col-lg-12"> <div class="text-center"> <h3>High School Admission Recommendation Form</h3> </div> </div> </div> <div class="card card-default"> <div class="card-header"> <h4 class="card-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse1"> <i class="glyphicon glyphicon-search text-gold"></i> <b>SECTION I: TO BE COMPLETED BY APPLICANT</b> </a> </h4> </div> <div id="collapse1" class="collapse show"> <div class="card-body"> <div class="row"> <div class="col-md-3 col-lg-4"> <div class="form-group"> <label class="control-label">Last Name</label> <input type="text" class="form-control" /> </div> </div> <div class="col-md-1 col-lg-4"> <div class="form-group"> <label class="control-label">First Name</label> <input type="text" class="form-control" /> </div> </div> <div class="col-md-1 col-lg-1"> <div class="form-group"> <label class="control-label">Middle.I</label> <input class="form-control" type="text" /> </div> </div> <div class="col-md-2 col-lg-3"> <div class="form-group"> <label class="control-label">Date Of Birth</label> <div class="input-group date"> <input class="form-control" type="text" /> <span class="input-group-append"> <button class="btn btn-outline-secondary" type="button"> <i class="fa fa-calendar"></i> </button></span> </div> </div> </div> </div> <div class="row"> <div class="col-md-4 col-lg-4"> <div class="form-group"> <label class="control-label">Mailing Address</label> <input type="text" class="form-control" /> </div> </div> <div class="col-md-2 col-lg-3"> <div class="form-group"> <label class="control-label">City</label> <input type="text" class="form-control" /> </div> </div> <div class="col-md-3 col-lg-3"> <div class="form-group"> <label class="control-label">State</label> <input type="text" class="form-control" /> </div> </div> <div class="col-md-3 col-lg-2"> <div class="form-group"> <label class="control-label">Zip Code</label> <input type="text" class="form-control" /> </div> </div> </div> <div class="row"> <div class="col-md-3 col-lg-12"> <div class="form-group"> <label class="control-label">High School College/Name</label> <input type="text" class="form-control" /> </div> </div> </div> </div>` </div> </div> <div class="card card-default"> <div class="card-header"> <h4 class="card-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse2"> <i class="glyphicon glyphicon-lock text-gold"></i> <b>SECTION II: TO BE COMPLETED BY TEACHER OR INSTRUCTOR</b> </a> </h4> </div> <div id="collapse2" class="collapse show"> <div class="card-body"> <div class="row"> <div class="col-lg-12"> <p>As a part of the admissions process at the University of University Name School of the Arts, all applicants are asked to submit this recommendation form. We appreciate any comments and evaluations that you would like to offer about this candidate. Feel free to attach comments or descriptions. A prompt reply is requested.</p> </div> </div> <div class="row"> <div class="col-md-3 col-lg-4"> <div class="form-group"> <label class="control-label">Last Name</label> <input type="text" class="form-control" /> </div> </div> <div class="col-md-4 col-lg-4"> <div class="form-group"> <label class="control-label">first</label> <input type="text" class="form-control" /> </div> </div> <div class="col-md-3 col-lg-4"> <div class="form-group"> <label class="control-label">Middle</label> <input type="text" class="form-control" /> </div> </div> </div> <div class="row"> <div class="col-md-2 col-lg-3"> <div class="form-group"> <label class="control-label">Position</label> <input type="text" class="form-control" /> </div> </div> <div class="col-md-3 col-lg-3"> <div class="form-group"> <label class="control-label">Department</label> <input type="text" class="form-control" /> </div> </div> <div class="col-md-4 col-lg-6"> <div class="form-group"> <label class="control-label">School/Organization</label> <input type="text" class="form-control" /> </div> </div> </div> <div class="row"> <div class="col-md-3 col-lg-4"> <div class="form-group"> <label class="control-label">School/Organization Address</label> <input type="text" class="form-control" /> </div> </div> <div class="col-md-5 col-lg-3"> <div class="form-group"> <label class="control-label">City</label> <input type="text" class="form-control" /> </div> </div> <div class="col-md-4 col-lg-3"> <div class="form-group"> <label class="control-label">State</label> <input type="text" class="form-control" /> </div> </div> <div class="col-md-4 col-lg-2"> <div class="form-group"> <label class="control-label">Zip Code</label> <input type="text" class="form-control" /> </div> </div> </div> <div class="row"> <div class="col-md-4 col-lg-5"> <div class="form-group"> <label class="control-label">Contact Information:(Phone Number)</label> <input type="text" class="phone form-control" /> </div> </div> <div class="col-md-4 col-lg-3"> <div class="form-group"> <label class="control-label">Fax Number</label> <input type="text" class="form-control" /> </div> </div> <div class="col-md-4 col-lg-4"> <label class="control-label">Email</label> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span> <input type="text" class="form-control" /> </div> </div> </div> <div class="row"> <div class="col-lg-12"> <label class="control-label">Please mark the appropriate box that best describes this candidate:</label> <table class="table table-primary"> <thead> <tr> <th> </th> <th> EXCELLENT </th> <th> GOOD </th> <th> AVERAGE </th> <th> BELOW AVERAGE </th> </tr> </thead> <tbody> <tr> <td> Academic Background </td> <td> <label class="control-label"> <input type="checkbox"> </label> </td> <td> <label class="control-label"> <input type="checkbox"> </label> </td> <td> <label class="control-label"> <input type="checkbox"> </label> </td> <td> <label class="control-label"> <input type="checkbox"> </label> </td> </tr> <tr> <td> Artistic Skill </td> <td> <input type="checkbox"> </td> <td> <label class="control-label"> <input type="checkbox"> </label> </td> <td> <label class="control-label"> <input type="checkbox"> </label> </td> <td> <label class="control-label"> <input type="checkbox"> </label> </td> </tr> <tr> <td> Character </td> <td> <label class="control-label"> <input type="checkbox"> </label> </td> <td> <label class="control-label"> <input type="checkbox"> </label> </td> <td> <label class="control-label"> <input type="checkbox"> </label> </td> <td> <label class="control-label"> <input type="checkbox"> </label> </td> </tr> <tr> <td> Ambition </td> <td> <label class="control-label"> <input type="checkbox"> </label> </td> <td> <label class="control-label"> <input type="checkbox"> </label> </td> <td> <label class="control-label"> <input type="checkbox"> </label> </td> <td> <label class="control-label"> <input type="checkbox"> </label> </td> </tr> <tr> <td> Emotional Stability </td> <td> <label class="control-label"> <input type="checkbox"> </label> </td> <td> <label class="control-label"> <input type="checkbox"> </label> </td> <td> <label class="control-label"> <input type="checkbox"> </label> </td> <td> <label class="control-label"> <input type="checkbox"> </label> </td> </tr> <tr> <td> Ability To work with Others </td> <td> <label class="control-label"> <input type="checkbox"> </label> </td> <td> <label class="control-label"> <input type="checkbox"> </label> </td> <td> <label class="control-label"> <input type="checkbox"> </label> </td> <td> <label class="control-label"> <input type="checkbox"> </label> </td> </tr> <tr> <td> Communication Skills </td> <td> <label class="control-label"> <input type="checkbox"> </label> </td> <td> <label class="control-label"> <input type="checkbox"> </label> </td> <td> <label class="control-label"> <input type="checkbox"> </label> </td> <td> <label class="control-label"> <input type="checkbox"> </label> </td> </tr> </tbody> </table> <label class="control-label">Comments (please feel free toattach a letter or other documentation):</label> <textarea rows="6" class="form-control"></textarea> </div> </div> <br /> <div class="row"> <div class="col-lg-12"> <label class="control-label">I recommend this candidate:</label> <label class="control-label"> <input type="checkbox" > With Reservation </label> <label class="control-label"> <input type="checkbox" > Failry Strongly </label> <label class="control-label"> <input type="checkbox"> Strongly </label> <label class="control-label"> <input type="checkbox"> Enthusiastically </label> </div> <hr /> </div> </div> </div> </div> <br /> </div> <div class="row"> <div class="col-lg-12"> <div class="pull-right"> <a href="#" class="btn btn-success btn-lg" id="btnSubmit"><i class="fa fa-save"></i> Save</a> <a class="btn btn-warning btn-lg" href="#" id="btnToTop"><i class="fa fa-arrow-up"></i> Top</a> </div> </div> </div> </div> <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>

.card-default { color: #333; background: linear-gradient(#fff,#ebebeb) repeat scroll 0 0 transparent; font-weight: 600; border-radius: 6px; }

$(function () { $(".date").datepicker({ autoclose: true, todayHighlight: true }); });