"Flat User Profile / Interface UI"
Bootstrap 3.3.0 Snippet by jessicarhawkins08

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/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 ---------->
<link href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" rel="stylesheet" media="screen">
<div class="container">
<div class="row user-menu-container square">
<div class="col-md-7 user-details">
<div class="row coralbg white">
<div class="col-md-6 no-pad">
<div class="user-pad">
<h3>Welcome back, Jessica</h3>
<h4 class="white"><i class="fa fa-check-circle-o"></i> San Antonio, TX</h4>
<h4 class="white"><i class="fa fa-twitter"></i> CoolesOCool</h4>
<button type="button" class="btn btn-labeled btn-info" href="#">
<span class="btn-label"><i class="fa fa-pencil"></i></span>Update</button>
</div>
</div>
<div class="col-md-6 no-pad">
<div class="user-image">
<img src="https://farm7.staticflickr.com/6163/6195546981_200e87ddaf_b.jpg" class="img-responsive thumbnail">
</div>
</div>
</div>
<div class="row overview">
<div class="col-md-4 user-pad text-center">
<h3>FOLLOWERS</h3>
<h4>2,784</h4>
</div>
<div class="col-md-4 user-pad text-center">
<h3>FOLLOWING</h3>
<h4>456</h4>
</div>
<div class="col-md-4 user-pad text-center">
<h3>APPRECIATIONS</h3>
<h4>4,901</h4>
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
.square, .btn {
border-radius: 0px!important;
}
/* -- color classes -- */
.coralbg {
background-color: #FA396F;
}
.coral {
color: #FA396f;
}
.turqbg {
background-color: #46D8D2;
}
.turq {
color: #46D8D2;
}
.white {
color: #fff!important;
}
/* -- The "User's Menu Container" specific elements. Custom container for the snippet -- */
div.user-menu-container {
z-index: 10;
background-color: #fff;
margin-top: 20px;
background-clip: padding-box;
opacity: 0.97;
filter: alpha(opacity=97);
-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
}
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
$(document).ready(function() {
var $btnSets = $('#responsive'),
$btnLinks = $btnSets.find('a');
$btnLinks.click(function(e) {
e.preventDefault();
$(this).siblings('a.active').removeClass("active");
$(this).addClass("active");
var index = $(this).index();
$("div.user-menu>div.user-menu-content").removeClass("active");
$("div.user-menu>div.user-menu-content").eq(index).addClass("active");
});
});
$( document ).ready(function() {
$("[rel='tooltip']").tooltip();
$('.view').hover(
function(){
$(this).find('.caption').slideDown(250); //.fadeIn(250)
},
function(){
$(this).find('.caption').slideUp(250); //.fadeOut(205)
}
);
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

Snippet on this site from some time began to be displayed incorrectly. What happened?

Ипполит Воробьянинов () - 7 years ago - Reply 0


should be change in bootstrap form builder layout

Suraj Suman () - 9 years ago - Reply 0


it ,s awesome

Suraj Suman () - 9 years ago - Reply 0


lovely.........

Anu Singh () - 10 years ago - Reply 0


waww...awesome.. :D

Septian Si Bhoechie () - 10 years ago - Reply 0


Awesome... clap clap clap... I loved this UI and now I integrated this into one my website :D

Chakrei () - 10 years ago - Reply 0


images / graphs dont show in latest chrome, apart from this: nice job!

frankis () - 10 years ago - Reply 0


nice !

sheratsuki () - 10 years ago - Reply 0