"Doctor Profile"
Bootstrap 4.1.1 Snippet by copperclick

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
<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>
</head>
<body>
<hr class="">
<div class="container target">
<div class="row">
<div class="col-sm-10">
<h1 class="">DOCTOR</h1>
<button type="button" class="btn btn-warning">Return to Profile</button> <button type="button" class="btn btn-success">Access Calendar</button>
<br>
</div>
<div class="col-sm-2"><a href="/users" class="pull-sright"><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> Joaquin Buenaobra</li>
<li class="list-group-item text-right"><span class="pull-left"><strong class="">Medical License Number: </strong></span> MNL09-F1SK5</li>
<li class="list-group-item text-right"><span class="pull-left"><strong class="">Address: </strong></span> Ermita, Manila</li>
<li class="list-group-item text-right"><span class="pull-left"><strong class="">Email: </strong></span> "jwbuenaobra@hotmail.com"</li>
<li class="list-group-item text-right"><span class="pull-left"><strong class="">Birthday: </strong></span>3 May 1981</li>
<li class="list-group-item text-right"><span class="pull-left"><strong class="">Age: </strong></span>37</li>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
8<html>
<head>
<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>
</head>
<body>
<hr class="">
<div class="container target">
<div class="row">
<div class="col-sm-10">
<h1 class="">DOCTOR</h1>
<button type="button" class="btn btn-warning">Edit Profile</button> <button type="button" class="btn btn-success">Access Calendar</button>
<br>
</div>
<div class="col-sm-2"><a href="/users" class="pull-sright"><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> Joaquin Buenaobra</li>
<li class="list-group-item text-right"><span class="pull-left"><strong class="">Medical License Number: </strong></span> MNL09-F1SK5</li>
<li class="list-group-item text-right"><span class="pull-left"><strong class="">Address: </strong></span> Ermita, Manila</li>
<li class="list-group-item text-right"><span class="pull-left"><strong class="">Email: </strong></span> "jwbuenaobra@hotmail.com"</li>
<li class="list-group-item text-right"><span class="pull-left"><strong class="">Birthday: </strong></span>3 May 1981</li>
<li class="list-group-item text-right"><span class="pull-left"><strong class="">Age: </strong></span>37</li>
<li class="list-group-item text-right"><span class="pull-left"><strong class="">Sex: </strong></span>M</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>·······514-1132</li>
<li class="list-group-item text-right"><span class="pull-left"><strong class="">Cellphone Number: </strong></span>09159092245</li>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
<b>Gender:</b><br>
<input type="radio" class="form-control" name="sex" value="male" id="sex" checked/><center><i>Male</i></center>
<input type="radio" class="form-control" name="sex" value="female" id="sex"/><center><i>Female</i></center>
<b>Birthday:</b><br>
<input type="date" class="form-control input-sm" name="birthday" id="birthday" placeholder="Birthday"/>
0
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Navbar With Icons
FB-like profile box
Profile Card
User Profile Sidebar

Questions / Comments: