" Doctors list"
Bootstrap 4.1.1 Snippet by zahedbri

Post to Facebook Tweet this

<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 ----------> <html> <head> <meta charset="utf-8"> <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-3.2.1/min.js"></script> </head> <body> <hr class=""> <div class="container target"> <div class="row"> <div class="col-sm-10"> <h1 class="">PATIENT</h1> <button type="button" class="btn btn-warning">Edit Profile</button> <button type="button" class="btn btn-info">Access Calendar</button> <br> </div> <div class="col-sm-2"><a href="/users" class="pull-right"><img title="profile image" class="img-circle img-responsive" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTBG685vI07-3MsuqJxjCfzIabfFJJG-8yM-ppvjjNpD5QNtWNE4A"></a> </div> </div> <br> <div class="row"> <div class="col-sm-3"> <!--left col--> <ul class="list-group"> <li class="list-group-item text-muted" contenteditable="false">Profile</li> <li class="list-group-item text-right"><span class="pull-left"><strong class="">Name: </strong></span> Justine Tan</li> <li class="list-group-item text-right"><span class="pull-left"><strong class="">Home Address: </strong></span>Central Signal Village, Taguig</li> <li class="list-group-item text-right"><span class="pull-left"><strong class="">Email: </strong></span> justineeetaaan@yahoo.com</li> <li class="list-group-item text-right"><span class="pull-left"><strong class="">Birthday: </strong></span>24 December 1992</li> <li class="list-group-item text-right"><span class="pull-left"><strong class="">Age: </strong></span>25</li> <li class="list-group-item text-right"><span class="pull-left"><strong class="">Sex: </strong></span>Female</li> <li class="list-group-item text-muted" contenteditable="false">Contact Details</li> <li class="list-group-item text-right"><span class="pull-left"><strong class="">Telephone Number: </strong></span>N/A</li> <li class="list-group-item text-right"><span class="pull-left"><strong class="">Cellphone Number: </strong></span>09278140304</li> </ul> <div class="panel panel-default"> <div class="panel-heading">Reminders: </div> <div class="panel-body"><i style="color:green" class="fa fa-check-square-o"></i> Upcoming consultation @ __________ </div> </div> <div class="panel panel-default"> <div class="panel-heading">NOTIFICATIONS <i class="fa fa-link fa-1x"></i> </div> <div class="panel-body"><button type="button" class="btn btn-basic">Check Status of Uploads </div> </div> <ul class="list-group"> <li class="list-group-item text-muted">Attending Doctors:<i class="fa fa-dashboard fa-1x"></i> </li> <li class="list-group-item text-right"><span class="pull-left"><strong class="">Joaquin Buenabora </strong></span>A</li> <li class="list-group-item text-right"><span class="pull-left"><strong class="">Michael Yi </strong></span>B</li> <li class="list-group-item text-right"><span class="pull-left"><strong class="">Camille Uy </strong></span> C</li> <br><button type="button" class="btn btn-info">Append Doctor Access</span> </ul> <div class="panel panel-default"> <div class="panel-heading">UPLOADED MEDICAL-RELATED DOCUMENTS</div> <div class="panel-body"><button type="button" class="btn btn-warning">Upload Document <br><button type="button" class="btn btn-success">View Uploads </div> </div> </div> <!--/col-3--> <div class="col-sm-9" style="" contenteditable="false"> <div class="panel panel-default"> <div class="panel-heading"><b>Update your profile credentials here:</b></div> <div class="panel-body"> <i class="fa fa-envelope fa" aria-hidden="true"></i> <div class="col-xs-4"> <input type="text" class="form-control input-sm" name="givenName" id="givenName" placeholder="Given Name"/> </div> <div class="col-xs-4"> <input type="text" class="form-control input-sm" name="middleName" id="middleName" placeholder="Middle Name"/> </div> <div class="col-xs-4"> <input type="text" class="form-control input-sm" name="lastName" id="lastName" placeholder="Last Name"/> </div> <div class="col-xs-8"> <input type="text" class="form-control input-sm" name="homeAddress" id="homeAddress" placeholder="Home Address"/> </div> <div class="col-xs-4"> <input type="email" class="form-control input-sm" name="email" id="email" placeholder="Email Address"/> </div> <div class="col-xs-3"> <input type="tel" class="form-control input-sm" name="telNumber" id="telNumber" placeholder="Tel. No."/> </div> <div class="col-xs-3"> <input type="text" class="form-control input-sm" name="cellNumber" id="cellNumber" placeholder="Cellphone Number"/> </div> <div class="col-xs-2"> <input type="number" class="form-control input-sm" name="age" id="age" min =0 placeholder="Age"/> </div> <div class="col-xs-4"> <b> Birthday:</b> <input type="date" class="form-control input-sm" name="birthday" id="birthday" placeholder="Birthday"/> </div> <b>    Gender:</b><br> <div class="col-xs-1"> <input type="radio" class="form-control" name="sex" value="male" id="sex" checked/><center><i>Male</i></center> </div> <div class="col-xs-1"> <input type="radio" class="form-control" name="sex" value="female" id="sex"/><center><i>Female</i></center> </div> </div> <center> <button type="button" class="btn btn-primary"> Update</button> <button type="button" class="btn btn-secondary">Clear</button> </div>< </div></div> <script src="/plugins/bootstrap-pager.js"></script> </div> </body> </html>
<input type="checkbox"name="a"value="a"> Medication A  <input type="checkbox"name="a"value="a"> Medication B  <input type="checkbox"name="a"value="a"> Medication C  <input type="checkbox"name="a"value="a"> Medication D

Related: See More

Vuetify Material Dashboard
Video list thumbnails
Accordion Multi Level List Group Menu
Watch card / Artist Profile / Youtube list

Questions / Comments: