Toggle navigation
Bootsnipp
Bootstrap
For
CSS Frameworks
Bootstrap
Foundation
Semantic UI
Materialize
Pure
Bulma
References
CSS Reference
Tools
Community
Page Builder
Form Builder
Button Builder
Icon Search
Dan's Tools
Diff / Merge
Color Picker
Keyword Tool
Web Fonts
.htaccess Generator
Favicon Generator
Site Speed Test
Snippets
Featured
Tags
By Bootstrap Version
4.1.1
4.0.0
3.3.0
3.2.0
3.1.0
3.0.3
3.0.1
3.0.0
2.3.2
Register
Login
"Passport Information"
Bootstrap 3.3.0 Snippet by
mmarj
3.3.0
Preview
HTML
CSS
View Full Screen
Forked from
Fork
Fork this
Parent
400
 
0 Fav
Post to Facebook
Tweet this
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-10"> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span class="glyphicon glyphicon-file"> </span>Student Information - Summary</a> </h4> <img class="headshottitle" src="images/students/2016-001.jpeg" /> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body"> <div class="well well-sm well-primary"> <div class="row"> <div class="col-xs-3 bold">Name:</div> <div class="col-xs-3">BOO SREY MOM</div> <div class="col-xs-3 bold">JPA Class of:</div> <div class="col-xs-3">2016</div> </div> <div class="row"> <div class="col-xs-3 bold">JPA JATS Id number:</div> <div class="col-xs-3">2016-001</div> <div class="col-xs-3 bold">Status:</div> <div class="col-xs-3">Year 12 - Application</div> </div> <div class="row"> <div class="col-xs-3 bold">Date of Birth:</div> <div class="col-xs-3">15 January 1998</div> <div class="col-xs-3 bold">Gender:</div> <div class="col-xs-3">Female</div> </div> <div class="row"> <div class="col-xs-3 bold">JPA Student ID:</div> <div class="col-xs-3">945</div> <div class="col-xs-3 bold">JPA Gradebook ID:</div> <div class="col-xs-3">1157</div> </div> </div> <div class="well well-sm well-primary"> <div class="row"> <div class="col-xs-3 bold">Passport Number:</div> <div class="col-xs-3">CMB253 654 697</div> <div class="col-xs-3 bold">Full Khmer Name:</div> <div class="col-xs-3">ប៊ូ ស្រីមុំ</div> </div> <div class="row"> <div class="col-xs-3 bold">Passport Issue Date::</div> <div class="col-xs-3">15/01/2016</div> <div class="col-xs-3 bold">Passport Expiry Date:</div> <div class="col-xs-3">14/01/2026</div> </div> <div class="row"> <div class="col-xs-3 bold">Passport Place of Issue:</div> <div class="col-xs-3">Phnom Penh, Cambodia.</div> <div class="col-xs-3 bold">Official Passport Name:</div> <div class="col-xs-3">BOO SREY MOM ប៊ូ ស្រ</div> </div> <div class="row"> <div class="col-xs-3 bold">Parents Name:</div> <div class="col-xs-3">Father - ប៊ូ សៀឺត</div> <div class="col-xs-3 bold">Parents Name:</div> <div class="col-xs-3">Mother - ធឿន ជាdi</div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><span class="glyphicon glyphicon-globe"> </span>Passport - Information / Application / Status</a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> <div class="well well-sm well-primary"> <div class="row"> <div class="col-xs-3 bold">Passport Number:</div> <div class="col-xs-3">CMB253 654 697</div> <div class="col-xs-3 bold">Full Khmer Name:</div> <div class="col-xs-3">ប៊ូ ស្រីមុំ</div> </div> <div class="row"> <div class="col-xs-3 bold">Passport Issue Date::</div> <div class="col-xs-3">15/01/2016</div> <div class="col-xs-3 bold">Passport Expiry Date:</div> <div class="col-xs-3">14/01/2026</div> </div> <div class="row"> <div class="col-xs-3 bold">Passport Place of Issue:</div> <div class="col-xs-3">Phnom Penh, Cambodia.</div> <div class="col-xs-3 bold">Official Passport Name:</div> <div class="col-xs-3">BOO SREY MOM ប៊ូ ស្រ</div> </div> <div class="row"> <div class="col-xs-3 bold">Parents Name:</div> <div class="col-xs-3">Father - ប៊ូ សៀឺត</div> <div class="col-xs-3 bold">Parents Name:</div> <div class="col-xs-3">Mother - ធឿន ជាdi</div> </div> </div> <div class="well well-sm well-primary"> <div class="row"> <div class="col-xs-3 bold">Name:</div> <div class="col-xs-3">BOO SREY MOM</div> <div class="col-xs-3 bold">JPA Class of:</div> <div class="col-xs-3">2016</div> </div> <div class="row"> <div class="col-xs-3 bold">JPA JATS Id number:</div> <div class="col-xs-3">2016-001</div> <div class="col-xs-3 bold">Status:</div> <div class="col-xs-3">Year 12 - Application</div> </div> <div class="row"> <div class="col-xs-3 bold">Date of Birth:</div> <div class="col-xs-3">15 January 1998</div> <div class="col-xs-3 bold">Gender:</div> <div class="col-xs-3">Female</div> </div> <div class="row"> <div class="col-xs-3 bold">JPA Student ID:</div> <div class="col-xs-3">945</div> <div class="col-xs-3 bold">JPA Gradebook ID:</div> <div class="col-xs-3">1157</div> </div> </div> <div class="well well-sm well-primary"> <div class="row"> <div class="col-xs-3 bold">Current Address:</div> <div class="col-xs-3">Cambodia - Home</div> <div class="col-xs-3 bold">Current Phone:</div> <div class="col-xs-3">Cambodia - Personal</div> </div> <div class="row"> <div class="col-xs-3 bold">Current Email Address:</div> <div class="col-xs-3">JPA - boosreymom@jpa.org.kh</div> <div class="col-xs-3 bold">Facebook Name:</div> <div class="col-xs-3">SreyMom Kampuchea 45</div> </div> <div class="row"> <div class="col-xs-3 bold">Emergency Cambodia:</div> <div class="col-xs-3">Parents</div> <div class="col-xs-3 bold">Emergency School:</div> <div class="col-xs-3">Guidance Counciller - Berea</div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label for="grantor">Change Current Address</label> <select class="form-control" id="grantor"> <option>Select New Address</option> <option>Cambodia - Home</option> <option>Cambodia - School</option> <option>Overseas - JPA Boarding</option> <option>Overseas - Personal Housing</option> <option>Overseas - School Housing</option> <option>Overseas - Temporary</option> <option>Add New Address</option> </select> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="grantor">Change Current Phone</label> <select class="form-control" id="grantor"> <option>Select New Phone Number</option> <option>Cambodia - Personal</option> <option>Cambodia - Home</option> <option>Cambodia - School</option> <option>Cambodia - Parent - Father</option> <option>Cambodia - Parent - Mother</option> <option>Cambodia - Other</option> <option>Overseas - Personal</option> <option>Overseas - School Admin</option> <option>Overseas - School Emergency</option> <option>Overseas - School Housing</option> <option>Overseas - School Finance</option> <option>Overseas - School Other</option> <option>Add New Phone</option> </select> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label for="grantor">Change Current Email</label> <select class="form-control" id="grantor"> <option>Select New Email Address</option> <option>JPA - boosreymom@jpa.org.kh</option> <option>Gmail - boosreymom@gmail.com</option> <option>Berea - boosreymom@berea.edu</option> <option>Facebook - boosreymom@facebook.com</option> <option>Add New Email Address</option> </select> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="grantor">Change Emergency</label> <select class="form-control" id="grantor"> <option>Select New Emergency Contact</option> <option>Cambodia - Personal</option> <option>Cambodia - Home</option> <option>Cambodia - School</option> <option>Cambodia - Parent - Father</option> <option>Cambodia - Parent - Mother</option> <option>Cambodia - Other</option> <option>Overseas - Personal</option> <option>Overseas - School Admin</option> <option>Overseas - School Emergency</option> <option>Overseas - School Housing</option> <option>Overseas - School Finance</option> <option>Overseas - School Other</option> <option>Add New Emergency Contact</option> </select> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label for="grantor" class=addressheading>Current Address:</label> <p class=address1>KPassport Photos Digital Images for Visas Transcripts: From JPA, Boarding Schools, Colleges, Certification companies, other Certificates VISA Scan Passport ID page scan Acceptance letters Flight Ticket Pdfs Photographs of the student Essays or submission pieces of work Passport Scan Vaccines Certificates Health book SIgned Parental Agreement (y/n) Other (country differences etc.) </p> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="grantor" class="addressheading">Current Phone:</label> <p class=address1>From Cambodia:<br /> 0977 555 698<br /> From Overseas:<br /> +855 977 555 698 </p> </div> </div> </div> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"><span class="glyphicon glyphicon-th-list"> </span>Grades, Activities, and Clubs</a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse"> <div class="panel-body"> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label for="grantor">Grades</label> <select class="form-control" id="grantor"> <option></option> <option>Additional NIDCR Oversight</option> <option>PI/PO Oversight</option> </select> </div> </div> </div> <div class="well well-sm well-primary"> <div class="row"> <div class="col-xs-3">Study Oversight Reasons:</div> <div class="col-xs-3">--</div> <div class="col-xs-3">GMethod of Additional Oversight:</div> <div class="col-xs-3">--</div> </div> <div class="row"> <div class="col-xs-3">GMethod of Additional Oversight - Other, Specify:</div> <div class="col-xs-3">--</div> <div class="col-xs-3">PO Study-level Comments::</div> <div class="col-xs-3">--</div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label for="monitor">Mdical Monitor Comments on Risk:</label> <input type="text" class="form-control" id='monitor' /> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="date">Date Enrollment Data Most Recently Uptated:</label> <input type="text" class="form-control" id='date' /> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="consented">Subjects Consented:</label> <input type="text" class="form-control" id='consented' /> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="entered">Subjects entered:</label> <input type="text" class="form-control" id='entered' /> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="completed">Subjects completed:</label> <input type="text" class="form-control" id='completed' /> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="status">Status:</label> <select class="form-control" id="status"> <option>Active</option> <option>Complete</option> <option>Data Analysis</option> <option>In Development</option> <option>Withdrawn</option> </select> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="discontinued">Subjects Discontinued:</label> <input type="text" class="form-control" id='discontinued' /> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="recruitment">Recruitment Status:</label> <select class="form-control" id="recruitment"> <option>Closed</option> <option>Not Yet Recruiting</option> <option>Open</option> <option>Suspended</option> <option>Terminated</option> </select> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="sites3">Number of Sites (Anticipated):</label> <input type="text" class="form-control" id='sites3' /> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="enrollment">Subject enrollment (Anticipated):</label> <input type="text" class="form-control" id='enrollment' /> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="Duration2">Proposed Duration:</label> <input type="text" class="form-control" id='Duration2' /> </div> </div> <div class="col-md-6"> <div class="form-group"> <label class="control-label" for="risk">Risk Approved</label> <div class="controls"> <label class="radio" for="risk-0"> <input type="radio" name="risk" id="risk-0" value="True" checked="checked"> True </label> <label class="radio" for="risk-1"> <input type="radio" name="risk" id="risk-1" value="False"> False </label> </div> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="risk2">Risk Level:</label> <select class="form-control" id="risk2"> <option>Closed</option> <option>Minimul Risk Level</option> <option>More than Minimul Risk Level</option> </select> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="date4">Protocol Approval Date:</label> <input type="date" class="form-control" id='date4' /> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="version">Protocol Version-Most Recently Approved:</label> <input type="text" class="form-control" id='version' /> </div> </div> </div> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour"><span class="glyphicon glyphicon-th-list"> </span>Application Dates</a> </h4> </div> <div id="collapseFour" class="panel-collapse collapse"> <div class="panel-body"> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label for="fld-193" title="Date of the first subject's first study visit">Date: First Subject First Visit (FSFV):</label> <input type="date" class="form-control" id="fld-193" name="fld-193" value="" placeholder="YYYY-MM-DD" /> <label for="fld-199" title="Date the report from PI to NIDCR_Reports is due. Every 6-months unless otherwise specified.">Date: Next QM Report Due: :</label> <input type="date" class="form-control" id="fld-199" name="fld-199" value="" placeholder="YYYY-MM-DD" /> <label for="fld-200" title="Date of last QM report">Date: Last QM Report Received:</label> <input type="date" class="form-control" id="fld-200" name="fld-200" value="" placeholder="YYYY-MM-DD" /> <label for="fld-118" title="Date of next Safety Oversight Meeting">Safety Oversight: Date of Next Meeting:</label> <input type="date" class="form-control" id="fld-118" name="fld-118" value="" placeholder="YYYY-MM-DD" /> <label for="fld-120" title="Date of last IND Annual Report to the FDA">FDA: Date of Last IND Annual Report:</label> <input type="date" class="form-control" id="fld-120" name="fld-120" value="" placeholder="YYYY-MM-DD" /> <label for="fld-121" title="Date next IND Annual Report is due to the FDA">FDA: Due Date of Next IND Annual Report:</label> <input type="date" class="form-control" id="fld-121" name="fld-121" value="" placeholder="YYYY-MM-DD" /> <label for="fld-122" title="Date of last orphan drug annual report to the FDA">FDA: Date of Last Orphan Drug Annual Report:</label> <input type="date" class="form-control" id="fld-122" name="fld-122" value="" placeholder="YYYY-MM-DD" /> <label for="fld-123" title="Date next Orphan Drug Annual Report is Due to the FDA">FDA: Due Date of Next Orphan Drug Annual Report:</label> <input type="date" class="form-control" id="fld-123" name="fld-123" value="" placeholder="YYYY-MM-DD" /> <label for="fld-165" title="Date Most Recent Protocol Deviation Report Received">Date Most Recent Protocol Deviation Report Received:</label> <input type="date" class="form-control" id="fld-165" name="fld-165" value="" placeholder="YYYY-MM-DD" /> <label for="fld-166" title="Date that CROMS most recently followed up with a site re: protocol deviation reporting">Date CROMS Follow-up on Protocol Deviations:</label> <input type="date" class="form-control" id="fld-166" name="fld-166" value="" placeholder="YYYY-MM-DD" /> <label for="fld-179" title="Approximate date after which no additional CROMS services have been performed.">Date: CROMS Services Complete:</label> <input type="date" class="form-control" id="fld-179" name="fld-179" value="" placeholder="YYYY-MM-DD" /> </div> </div> <div class="col-md-6"> <label for="startDate" title="Study Start Date (Date of first site activation)">Date: Study Start:</label> <input type="date" class="form-control" id="startDate" name="startDate" value="2001-01-01" placeholder="YYYY-MM-DD" /> <label for="endDate" title="Study End Date (Date of last subject, last visit)">Date: Study End:</label> <input type="date" class="form-control" id="endDate" name="endDate" value="" placeholder="YYYY-MM-DD" /> <label for="fld-49" title="Anticipated study start date (CToA)">Date: Study Start (Anticipated):</label> <input type="date" class="form-control" id="fld-49" name="fld-49" value="" placeholder="YYYY-MM-DD" /> <label for="fld-50" title="Date PO approved the study for funding (CToA)">Date: PO CToA Approval Date:</label> <input type="date" class="form-control" id="fld-50" name="fld-50" value="" placeholder="YYYY-MM-DD" /> <label for="fld-52" title="Date relevant documents were requested by PO (CToA)">Date: Relevant Documents Requested:</label> <input type="date" class="form-control" id="fld-52" name="fld-52" value="" placeholder="YYYY-MM-DD" /> <label for="fld-57" title="Date of last Safety Oversight Committee Meeting">Safety Oversight: Date of Last Meeting:</label> <input type="date" class="form-control" id="fld-57" name="fld-57" value="" placeholder="YYYY-MM-DD" /> <label for="fld-170" title="Date of the DOCRA or planning call.">Date: DOCRA Call:</label> <input type="date" class="form-control" id="fld-170" name="fld-170" value="" placeholder="YYYY-MM-DD" /> <label for="fld-174" title="Date that at least one member of the study team attended a QM General Training call.">Date: QM General Training:</label> <input type="date" class="form-control" id="fld-174" name="fld-174" value="" placeholder="YYYY-MM-DD" /> <label for="fld-188" title="Frequency that PI sends reports to Medical Monitor. May be annually, biannually, or some other specified time interval.">MMOR Frequency:</label> <select id="fld-188" name="fld-188"> <option value=""></option> <option value="1145" title="Annual">Annual</option> <option value="1147" title="Other">Other</option> <option value="1146" title="Twice Annually">Twice Annually</option> </select> <label for="fld-185" title="Date the report from PI to Medical Monitor is due. Every 6-months unless otherwise specified.">Date: Next MM Oversight Report Due:</label> <input type="date" class="form-control" id="fld-185" name="fld-185" value="" placeholder="YYYY-MM-DD" /> <label for="fld-187" title="Date the most recent report from PI to Medical Monitor was received.">Date: Last MM Oversight Report Received:</label> <input type="date" class="form-control" id="fld-187" name="fld-187" value="" placeholder="YYYY-MM-DD" /> </div> </div> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseFive"><span class="glyphicon glyphicon-th-list"> </span>Administration</a> </h4> </div> <div id="collapseFive" class="panel-collapse collapse"> <div class="panel-body"> <div class="well well-sm well-primary"> <div class="row"> <div class="col-xs-3">Name:</div> <div class="col-xs-3">BOO SREY MOM</div> <div class="col-xs-3">JPA Class of:</div> <div class="col-xs-3">2016</div> </div> <div class="row"> <div class="col-xs-3">JPA Student Id number:</div> <div class="col-xs-3">2016-001</div> <div class="col-xs-3">Status:</div> <div class="col-xs-3">Year 12 - Application</div> </div> </div> <div class="well well-sm well-primary"> <div class="row"> <div class="col-xs-3">Current Address:</div> <div class="col-xs-3">Cambodia - Home</div> <div class="col-xs-3">Current Phone:</div> <div class="col-xs-3">Cambodia - Personal</div> </div> <div class="row"> <div class="col-xs-3">Emergency Contact Cambodia:</div> <div class="col-xs-3">Parents</div> <div class="col-xs-3">Emergency Contact School:</div> <div class="col-xs-3">Guidance Counciller - Berea</div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label for="grantor">Current Address</label> <select class="form-control" id="grantor"> <option>Select Current Address Listed Above</option> <option>Cambodia - Home</option> <option>Cambodia - School</option> <option>Overseas - JPA Boarding</option> <option>Overseas - Personal Housing</option> <option>Overseas - School Housing</option> <option>Overseas - Temporary</option> <option>Other Information</option> </select> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="grantor">Current Password</label> <select class="form-control" id="grantor"> <option>Select Current Password Listed Above</option> <option>Cambodia - JPA</option> <option>Cambodia - Gradebook</option> <option>Cambodia - Gmail</option> <option>Cambodia - CommonApp</option> <option>Cambodia - Zeemee</option> <option>Cambodia - Issuu</option> <option>Cambodia - Bank</option> <option>Overseas - School</option> <option>Overseas - School Grades</option> <option>Overseas - School Housing</option> <option>Overseas - School Finance</option> <option>Overseas - School Other</option> <option>Other Information</option> </select> </div> </div> </div> </div> </div> </div> </div> </div> </div>
.form-inline .form-group { margin-right:10px; } .well-primary { color: rgb(255, 255, 255); background-color: rgb(66, 139, 202); border-color: rgb(53, 126, 189); } .glyphicon { margin-right:5px; }
Related:
See More
Free Template
Vue Now UI Kit
172.4K
55
Information Cards
102.5K
194
Information Card
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76