"Facebook post style with comments box"
Bootstrap 3.3.0 Snippet by bayudarmantra

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 ---------->
<div class="container">
<div class="col-md-5">
<div class="panel panel-default">
<div class="panel-body">
<section class="post-heading">
<div class="row">
<div class="col-md-11">
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object photo-profile" src="http://0.gravatar.com/avatar/38d618563e55e6082adf4c8f8c13f3e4?s=40&d=mm&r=g" width="40" height="40" alt="...">
</a>
</div>
<div class="media-body">
<a href="#" class="anchor-username"><h4 class="media-heading">Bayu Darmantra</h4></a>
<a href="#" class="anchor-time">51 mins</a>
</div>
</div>
</div>
<div class="col-md-1">
<a href="#"><i class="glyphicon glyphicon-chevron-down"></i></a>
</div>
</div>
</section>
<section class="post-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
turpis sem, dictum id bibendum eget, malesuada ut massa. Ut scel
erisque nulla sed luctus dapibus. Nulla sit amet mi vitae purus sol
licitudin venenatis. Praesent et sem urna. Integer vitae lectus nis
l. Fusce sapien ante, tristique efficitur lorem et, laoreet ornare lib
ero. Nam fringilla leo orci. Vivamus semper quam nunc, sed ornare magna dignissim sed. Etiam interdum justo quis risus
efficitur dictum. Nunc ut pulvinar quam. N
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
/*-- Global Selectors --*/
a{
color:#47649F;
}
body{
font-family:'helvetica';
}
/*-- Bootstrap Override Style --*/
/*-- Content Style --*/
.post-footer-option li{
float:left;
margin-right:50px;
padding-bottom:15px;
}
.post-footer-option li a{
color:#AFB4BD;
font-weight:500;
font-size:1.3rem;
}
.photo-profile{
border:1px solid #DDD;
}
.anchor-username h4{
font-weight:bold;
}
.anchor-time{
color:#ADB2BB;
font-size:1.2rem;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: