"FB-like profile box"
Bootstrap 3.3.0 Snippet by rudiecnuada

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<div class="container">
<div class="fb-profile">
<img align="left" class="fb-image-lg" src="http://lorempixel.com/850/280/nightlife/5/" alt="Profile image example"/>
<img align="left" class="fb-image-profile thumbnail" src="http://lorempixel.com/180/180/people/9/" alt="Profile image example"/>
<div class="fb-profile-text">
<h1>Eli Macy</h1>
<p>Girls just wanna go fun.</p>
</div>
</div>
</div> <!-- /container -->
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
/* ==========================================================================
Author's custom styles
========================================================================== */
body
{
font-family: 'Open Sans', sans-serif;
}
.fb-profile img.fb-image-lg{
z-index: 0;
width: 100%;
margin-bottom: 10px;
}
.fb-image-profile
{
margin: -90px 10px 0px 50px;
z-index: 9;
width: 20%;
}
@media (max-width:768px)
{
.fb-profile-text>h1{
font-weight: 700;
font-size:16px;
}
.fb-image-profile
{
margin: -45px 10px 0px 25px;
z-index: 9;
width: 20%;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Light Bootstrap Dashboard PRO React
FB-like profile box
Profile Card
User Profile Sidebar

Questions / Comments: