HTML code
Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview selection
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<div class="container bootstrap snippet">
<di class="col-md-8">
<div class="col-sm-12">
<div class="panel panel-white post panel-shadow">
<div class="post-heading">
<div class="pull-left image">
<img src="https://bootdey.com/img/Content/user_1.jpg" class="img-circle avatar" alt="user profile image">
</div>
<div class="pull-left meta">
<div class="title h5">
<a href="#"><b>Brian cartelly</b></a>
uploaded a photo.
</div>
<h6 class="text-muted time">5 seconds ago</h6>
</div>
</div>
<div class="post-image">
<img src="https://lorempixel.com/400/200/city/2/" class="image" alt="image post">
</div>
<div class="post-description">
<h4>Foto title</h4>
<p>Put here your foto description</p>
<div class="stats">
<a href="#" class="btn btn-default stat-item">
<i class="fa fa-thumbs-up icon"></i>228
</a>
<a href="#" class="btn btn-default stat-item">
<i class="fa fa-share icon"></i>128
</a>
</div>
</div>
<div class="post-footer">
<div class="input-group">
<input class="form-control" placeholder="Add a comment" type="text">
<span class="input-group-addon">
<a href="#"><i class="fa fa-edit"></i></a>
</span>
</div>
<ul class="comments-list">
<li class="comment">
<a class="pull-left" href="#">
<img class="avatar" src="https://bootdey.com/img/Content/user_3.jpg" alt="avatar">
</a>
<div class="comment-body">
<div class="comment-heading">
<h4 class="user">Full name 1</h4>
<h5 class="time">7 minutes ago</h5>
</div>
<p>This is a comment bla bla bla</p>
</div>
</li>
<li class="comment">
<a class="pull-left" href="#">
<img class="avatar" src="https://bootdey.com/img/Content/user_2.jpg" alt="avatar">
</a>
<div class="comment-body">
<div class="comment-heading">
<h4 class="user">Full name 2</h4>
<h5 class="time">3 minutes ago</h5>
</div>
<p>This is another comment bla bla bla</p>
</div>
</li>
<li class="comment">
<a class="pull-left" href="#">
<img class="avatar" src="https://bootdey.com/img/Content/user_3.jpg" alt="avatar">
</a>
<div class="comment-body">
<div class="comment-heading">
<h4 class="user">Full name 1</h4>
<h5 class="time">10 seconds ago</h5>
</div>
<p>Wow! This is a comment</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</di>
</div>CSS code
Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview selection
.panel-shadow {
box-shadow: rgba(0, 0, 0, 0.3) 7px 7px 7px;
}
.panel-white {
border: 1px solid #dddddd;
}
.panel-white .panel-heading {
color: #333;
background-color: #fff;
border-color: #ddd;
}
.panel-white .panel-footer {
background-color: #fff;
border-color: #ddd;
}
.post .post-heading {
height: 95px;
padding: 20px 15px;
}
.post .post-heading .avatar {
width: 60px;
height: 60px;
display: block;
margin-right: 15px;
}
.post .post-heading .meta .title {
margin-bottom: 0;
}
.post .post-heading .meta .title a {
color: black;
}
.post .post-heading .meta .title a:hover {
color: #aaaaaa;
}
.post .post-heading .meta .time {
margin-top: 8px;
color: #999;
}
.post .post-image .image {
width: 100%;
height: auto;
}
.post .post-description {
padding: 15px;
}
.post .post-description p {
font-size: 14px;
}
.post .post-description .stats {
margin-top: 20px;
}
.post .post-description .stats .stat-item {
display: inline-block;
margin-right: 15px;
}
.post .post-description .stats .stat-item .icon {
margin-right: 8px;
}
.post .post-footer {
border-top: 1px solid #ddd;
padding: 15px;
}
.post .post-footer .input-group-addon a {
color: #454545;
}
.post .post-footer .comments-list {
padding: 0;
margin-top: 20px;
list-style-type: none;
}
.post .post-footer .comments-list .comment {
display: block;
width: 100%;
margin: 20px 0;
}
.post .post-footer .comments-list .comment .avatar {
width: 35px;
height: 35px;
}
.post .post-footer .comments-list .comment .comment-heading {
display: block;
width: 100%;
}
.post .post-footer .comments-list .comment .comment-heading .user {
font-size: 14px;
font-weight: bold;
display: inline;
margin-top: 0;
margin-right: 10px;
}
.post .post-footer .comments-list .comment .comment-heading .time {
font-size: 12px;
color: #aaa;
margin-top: 0;
display: inline;
}
.post .post-footer .comments-list .comment .comment-body {
margin-left: 50px;
}
.post .post-footer .comments-list .comment > .comments-list {
margin-left: 50px;
}
Similar snippets
About this snippet
Rated 5/5
based on 3 reviews