"User Detail Panel"
Bootstrap 3.1.0 Snippet by sisodiakaran

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="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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-sm-4 col-md-4 user-details">
<div class="user-image">
<img src="http://www.gravatar.com/avatar/2ab7b2009d27ec37bffee791819a090c?s=100&d=mm&r=g" alt="Karan Singh Sisodia" title="Karan Singh Sisodia" class="img-circle">
</div>
<div class="user-info-block">
<div class="user-heading">
<h3>Karan Singh Sisodia</h3>
<span class="help-block">Chandigarh, IN</span>
</div>
<ul class="navigation">
<li class="active">
<a data-toggle="tab" href="#information">
<span class="glyphicon glyphicon-user"></span>
</a>
</li>
<li>
<a data-toggle="tab" href="#settings">
<span class="glyphicon glyphicon-cog"></span>
</a>
</li>
<li>
<a data-toggle="tab" href="#email">
<span class="glyphicon glyphicon-envelope"></span>
</a>
</li>
<li>
<a data-toggle="tab" href="#events">
<span class="glyphicon glyphicon-calendar"></span>
</a>
</li>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
body {background: #EAEAEA;}
.user-details {position: relative; padding: 0;}
.user-details .user-image {position: relative; z-index: 1; width: 100%; text-align: center;}
.user-image img { clear: both; margin: auto; position: relative;}
.user-details .user-info-block {width: 100%; position: absolute; top: 55px; background: rgb(255, 255, 255); z-index: 0; padding-top: 35px;}
.user-info-block .user-heading {width: 100%; text-align: center; margin: 10px 0 0;}
.user-info-block .navigation {float: left; width: 100%; margin: 0; padding: 0; list-style: none; border-bottom: 1px solid #428BCA; border-top: 1px solid #428BCA;}
.navigation li {float: left; margin: 0; padding: 0;}
.navigation li a {padding: 20px 30px; float: left;}
.navigation li.active a {background: #428BCA; color: #fff;}
.user-info-block .user-body {float: left; padding: 5%; width: 90%;}
.user-body .tab-content > div {float: left; width: 100%;}
.user-body .tab-content h4 {width: 100%; margin: 10px 0; color: #333;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

e

xhat007 (1) - 3 years ago - Reply 0


How to remove the floating in medium device? I tried this but to no avail. @media (min-width: 768px) and (max-width: 979px) {
.clearFix{
clear: both;
}
}

digong doging digong () - 10 years ago - Reply 0


e

xhat007 (1) - 3 years ago - Reply 0


Could we remove the little box when clicked?

anon () - 11 years ago - Reply 0


e

xhat007 (1) - 3 years ago - Reply 0


I mean the little dotted one..

Anon () - 11 years ago - Reply 0


e

xhat007 (1) - 3 years ago - Reply 0


Just add outline: 0 to .navigation li a

Primo () - 10 years ago - Reply 0


e

xhat007 (1) - 3 years ago - Reply 0