Bootstrap social section
Enhance your project with a variety of Social sections such as news feed, comments, and post cards.
Social newsfeed v.1 MDB Pro component
John Doe added you as a friend
1 hour ago
Danny Moore added you as a friend
7 hours ago
Lili Rose posted on his page
2 days ago
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero inventore, iste quas libero eius? Vitae sint neque animi alias sunt dolor, accusantium ducimus, non placeat voluptate.
<!--Section: Social newsfeed v.1-->
<section class="pt-5 pb-3">
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-lg-6">
<!--Newsfeed-->
<div class="mdb-feed">
<!--First news-->
<div class="news">
<!--Label-->
<div class="label">
<img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-1-mini.jpg" class="rounded-circle z-depth-1-half">
</div>
<!--Excert-->
<div class="excerpt">
<!--Brief-->
<div class="brief">
<a class="name">John Doe</a> added you as a friend<div class="date">1 hour ago</div>
</div>
<!--Feed footer-->
<div class="feed-footer">
<a class="like"><i class="fa fa-heart"></i><span>5 likes</span></a>
</div>
</div>
</div>
<!--First news-->
<!--Second news-->
<div class="news">
<!--Label-->
<div class="label">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(17)-mini.jpg" class="rounded-circle z-depth-1-half">
</div>
<!--Excert-->
<div class="excerpt">
<!--Brief-->
<div class="brief">
<a class="name">Anna Smith</a> added<a> 2 new illustrations</a><div class="date">4 hours ago</div>
</div>
<!--Added images-->
<div class="added-images">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(73).jpg" class="z-depth-1">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg" class="z-depth-1">
</div>
<!--Feed footer-->
<div class="feed-footer">
<a class="like"><i class="fa fa-heart"></i><span>18 likes</span></a>
</div>
</div>
</div>
<!--Second news-->
<!--Third news-->
<div class="news">
<!--Label-->
<div class="label">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(9)-mini.jpg" class="rounded-circle z-depth-1-half">
</div>
<!--Excert-->
<div class="excerpt">
<!--Brief-->
<div class="brief">
<a class="name">Danny Moore</a> added you as a friend<div class="date">7 hours ago</div>
</div>
<!--Feed footer-->
<div class="feed-footer">
<a class="like"><i class="fa fa-heart"></i><span>11 likes</span></a>
</div>
</div>
</div>
<!--Third news-->
<!--Fourth news-->
<div class="news">
<!--Label-->
<div class="label">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(18)-mini.jpg" class="rounded-circle z-depth-1-half">
</div>
<!--Excert-->
<div class="excerpt">
<!--Brief-->
<div class="brief">
<a class="name">Lili Rose</a> posted on his page<div class="date">2 days ago</div>
</div>
<!--Added text-->
<div class="added-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero inventore, iste quas libero eius? Vitae sint neque animi alias sunt dolor, accusantium ducimus, non placeat voluptate.</div>
<!--Feed footer-->
<div class="feed-footer">
<a class="like"><i class="fa fa-heart"></i><span>7 likes</span></a>
</div>
</div>
</div>
<!--Fourth news-->
<!--Fifth news-->
<div class="news">
<!--Label-->
<div class="label">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(20)-mini.jpg" class="rounded-circle z-depth-1-half">
</div>
<!--Excert-->
<div class="excerpt">
<!--Brief-->
<div class="brief">
<a class="name">Kate Harrison</a> added<a> 2 new photos</a> of you<div class="date">3 days ago</div>
</div>
<!--Added images-->
<div class="added-images">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/People/4-col/img%20(121).jpg" class="z-depth-1">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/People/4-col/img%20(26).jpg" class="z-depth-1">
</div>
<!--Feed footer-->
<div class="feed-footer">
<a class="like"><i class="fa fa-heart"></i><span>53 likes</span></a>
</div>
</div>
</div>
<!--Fifth news-->
</div>
<!--Newsfeed-->
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<!--Section: Social newsfeed v.1-->
Social newsfeed v.2 MDB Pro component
John Doe added you as a friend
1 hour ago
Danny Moore added you as a friend
7 hours ago
Lili Rose posted on his page
2 days ago
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero inventore, iste quas libero eius? Vitae sint neque animi alias sunt dolor, accusantium ducimus, non placeat voluptate.
<!--Section: Social newsfeed v.2-->
<section class="pt-5 pb-3">
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-lg-6">
<!--Newsfeed-->
<div class="mdb-feed">
<!--First news-->
<div class="news">
<!--Label-->
<div class="label">
<img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-1-mini.jpg" class="rounded-circle z-depth-1-half">
</div>
<!--Excert-->
<div class="excerpt">
<!--Brief-->
<div class="brief">
<a class="name">John Doe</a> added you as a friend<div class="date">1 hour ago</div>
</div>
<!--Feed footer-->
<div class="feed-footer">
<a class="comment" data-toggle="collapse" href="#collapseExample-1" aria-expanded="false" aria-controls="collapseExample-1">Comment</a> ·
<span><a>7</a></span>
<a class="thumbs" data-toggle="tooltip" data-placement="top" title="I like it"><i class="fa fa-thumbs-up"></i></a>
<a class="thumbs" data-toggle="tooltip" data-placement="top" title="I don't like it"><i class="fa fa-thumbs-down"></i></a>
<div class="collapse" id="collapseExample-1">
<div class="card card-body card-block mt-1">
<!--Add comment-->
<div class="md-form mt-1 mb-1">
<textarea type="text" id="form7" class="md-textarea"></textarea>
<label for="form7">Add comment</label>
</div>
<div class="d-flex justify-content-end">
<button type="button" class="btn-flat waves-effect" data-toggle="collapse" data-target="#collapseExample-1" aria-expanded="false" aria-controls="collapseExample-1">Cancel</button>
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#collapseExample-1" aria-expanded="false" aria-controls="collapseExample-1">Reply</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!--First news-->
<!--Second news-->
<div class="news">
<!--Label-->
<div class="label">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(17)-mini.jpg" class="rounded-circle z-depth-1-half">
</div>
<!--Excert-->
<div class="excerpt">
<!--Brief-->
<div class="brief">
<a class="name">Anna Smith</a> added<a> 2 new illustrations</a><div class="date">4 hours ago</div>
</div>
<!--Added images-->
<div class="added-images">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(132).jpg" class="z-depth-1">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(115).jpg" class="z-depth-1">
</div>
<!--Feed footer-->
<div class="feed-footer">
<a class="comment" data-toggle="collapse" href="#collapseExample-2" aria-expanded="false" aria-controls="collapseExample-2">Comment</a> ·
<span><a>31</a></span>
<a class="thumbs" data-toggle="tooltip" data-placement="top" title="I like it"><i class="fa fa-thumbs-up"></i></a>
<a class="thumbs" data-toggle="tooltip" data-placement="top" title="I don't like it"><i class="fa fa-thumbs-down"></i></a>
<div class="collapse" id="collapseExample-2">
<div class="card card-body card-block mt-1">
<!--Add comment-->
<div class="md-form mt-1 mb-1">
<textarea type="text" id="form7" class="md-textarea"></textarea>
<label for="form7">Add comment</label>
</div>
<div class="d-flex justify-content-end">
<button type="button" class="btn-flat waves-effect" data-toggle="collapse" data-target="#collapseExample-2" aria-expanded="false" aria-controls="collapseExample-2">Cancel</button>
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#collapseExample-2" aria-expanded="false" aria-controls="collapseExample-2">Reply</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Second news-->
<!--Third news-->
<div class="news">
<!--Label-->
<div class="label">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(9)-mini.jpg" class="rounded-circle z-depth-1-half">
</div>
<!--Excert-->
<div class="excerpt">
<!--Brief-->
<div class="brief">
<a class="name">Danny Moore</a> added you as a friend<div class="date">7 hours ago</div>
</div>
<!--Feed footer-->
<div class="feed-footer">
<a class="comment" data-toggle="collapse" href="#collapseExample-3" aria-expanded="false" aria-controls="collapseExample-3">Comment</a> ·
<span><a>12</a></span>
<a class="thumbs" data-toggle="tooltip" data-placement="top" title="I like it"><i class="fa fa-thumbs-up"></i></a>
<a class="thumbs" data-toggle="tooltip" data-placement="top" title="I don't like it"><i class="fa fa-thumbs-down"></i></a>
<div class="collapse" id="collapseExample-3">
<div class="card card-body card-block mt-1">
<!--Add comment-->
<div class="md-form mt-1 mb-1">
<textarea type="text" id="form7" class="md-textarea"></textarea>
<label for="form7">Add comment</label>
</div>
<div class="d-flex justify-content-end">
<button type="button" class="btn-flat waves-effect" data-toggle="collapse" data-target="#collapseExample-3" aria-expanded="false" aria-controls="collapseExample-3">Cancel</button>
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#collapseExample-3" aria-expanded="false" aria-controls="collapseExample-3">Reply</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Third news-->
<!--Fourth news-->
<div class="news">
<!--Label-->
<div class="label">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(18)-mini.jpg" class="rounded-circle z-depth-1-half">
</div>
<!--Excert-->
<div class="excerpt">
<!--Brief-->
<div class="brief">
<a class="name">Lili Rose</a> posted on his page<div class="date">2 days ago</div>
</div>
<!--Added text-->
<div class="added-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero inventore, iste quas libero eius? Vitae sint neque animi alias sunt dolor, accusantium ducimus, non placeat voluptate.</div>
<!--Feed footer-->
<div class="feed-footer">
<a class="comment" data-toggle="collapse" href="#collapseExample-4" aria-expanded="false" aria-controls="collapseExample-4">Comment</a> ·
<span><a>25</a></span>
<a class="thumbs" data-toggle="tooltip" data-placement="top" title="I like it"><i class="fa fa-thumbs-up"></i></a>
<a class="thumbs" data-toggle="tooltip" data-placement="top" title="I don't like it"><i class="fa fa-thumbs-down"></i></a>
<div class="collapse" id="collapseExample-4">
<div class="card card-body card-block mt-1">
<!--Add comment-->
<div class="md-form mt-1 mb-1">
<textarea type="text" id="form7" class="md-textarea"></textarea>
<label for="form7">Add comment</label>
</div>
<div class="d-flex justify-content-end">
<button type="button" class="btn-flat waves-effect" data-toggle="collapse" data-target="#collapseExample-4" aria-expanded="false" aria-controls="collapseExample-4">Cancel</button>
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#collapseExample-4" aria-expanded="false" aria-controls="collapseExample-4">Reply</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Fourth news-->
<!--Fifth news-->
<div class="news">
<!--Label-->
<div class="label">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(20)-mini.jpg" class="rounded-circle z-depth-1-half">
</div>
<!--Excert-->
<div class="excerpt">
<!--Brief-->
<div class="brief">
<a class="name">Kate Harrison</a> added<a> 2 new photos</a> of you<div class="date">3 days ago</div>
</div>
<!--Added images-->
<div class="added-images">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/People/4-col/img%20(113).jpg" class="z-depth-1">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/People/4-col/img%20(112).jpg" class="z-depth-1">
</div>
<!--Feed footer-->
<div class="feed-footer">
<a class="comment" data-toggle="collapse" href="#collapseExample-5" aria-expanded="false" aria-controls="collapseExample-5">Comment</a> ·
<span><a>47</a></span>
<a class="thumbs" data-toggle="tooltip" data-placement="top" title="I like it"><i class="fa fa-thumbs-up"></i></a>
<a class="thumbs" data-toggle="tooltip" data-placement="top" title="I don't like it"><i class="fa fa-thumbs-down"></i></a>
<div class="collapse" id="collapseExample-5">
<div class="card card-body card-block mt-1">
<!--Add comment-->
<div class="md-form mt-1 mb-1">
<textarea type="text" id="form7" class="md-textarea"></textarea>
<label for="form7">Add comment</label>
</div>
<div class="d-flex justify-content-end">
<button type="button" class="btn-flat waves-effect" data-toggle="collapse" data-target="#collapseExample-5" aria-expanded="false" aria-controls="collapseExample-5">Cancel</button>
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#collapseExample-5" aria-expanded="false" aria-controls="collapseExample-5">Reply</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Fifth news-->
</div>
<!--Newsfeed-->
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<!--Section: Social newsfeed v.2-->
Personal card MDB Pro component
<!--Section: Personal card-->
<section class="pt-5 mt-3 pb-3">
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-6 col-lg-4">
<!--Card-->
<div class="card card-personal">
<!--Card image-->
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Avatars/img%20(29).jpg" alt="Card image cap">
<!--Card image-->
<!--Card content-->
<div class="card-body card-block">
<!--Title-->
<a><h4 class="card-title title-one">Clara</h4></a>
<p class="card-meta">Joined in 2013</p>
<!--Text-->
<p class="card-text">Clara is an photographer living in Madrid.</p>
<hr>
<a class="card-meta"><span><i class="fa fa-user"></i>22 Friends</span></a>
</div>
<!--Card content-->
</div>
<!--Card-->
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<!--Section: Personal card-->
Social news card MDB Pro component
<!--Section: Social news card-->
<section class="pt-5 pb-3">
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-6 col-lg-4">
<!--Card-->
<div class="card news-card">
<!--Heading-->
<div class="card-body card-block">
<div class="content">
<div class="right-side-meta">14 h</div>
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(17)-mini.jpg" class="rounded-circle avatar-img z-depth-1-half">Kate
</div>
</div>
<!--Card image-->
<img class="img-fluid no-radius" src="https://mdbootstrap.com/img/Photos/Others/girl1.jpg" alt="Card image cap">
<!--Card content-->
<div class="card-body card-block">
<!--Social meta-->
<div class="social-meta">
<p>Another great adventure! 🐗 🐎 🐥</p>
<span><i class="fa fa-heart-o"></i>25 likes</span>
<p><i class="fa fa-comment"></i>13 comments</p>
</div>
<hr>
<!--Comment input-->
<div class="md-form">
<i class="fa fa-heart-o prefix"></i>
<input placeholder="Add Comment..." type="text" id="form5" class="form-control">
</div>
</div>
<!--Card content-->
</div>
<!--Card-->
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<!--Section: Social news card-->
Social card with video MDB Pro component
<!--Section: Social card with video-->
<section class="pt-5 pb-3">
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-6 col-lg-4">
<!--Card-->
<div class="card news-card">
<!--Heading-->
<div class="card-body card-block">
<div class="content">
<div class="right-side-meta">2 h</div>
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(3).jpg" class="rounded-circle avatar-img z-depth-1-half">Tony
</div>
</div>
<!--Card video-->
<div class="embed-responsive embed-responsive-1by1">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/37pwbUp8t1I" allowfullscreen></iframe>
</div>
<!--Card content-->
<div class="card-body card-block">
<!--Social meta-->
<div class="social-meta">
<p class="blue-text">#awesome #bboy #battle #breaking #cool</p>
<span><i class="fa fa-heart-o"></i>265 likes</span>
<p><i class="fa fa-comment"></i>89 comments</p>
</div>
<hr>
<!--Comment input-->
<div class="md-form">
<i class="fa fa-heart-o prefix"></i>
<input placeholder="Add Comment..." type="text" id="form5" class="form-control">
</div>
</div>
<!--Card content-->
</div>
<!--Card-->
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<!--Section: Social card with video-->
Group of personal cards MDB Pro component
<!--Section: Group of personal cards-->
<section class="pt-5 mt-3 pb-3">
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-12">
<!--Card group-->
<div class="card-group">
<!--Card-->
<div class="card card-personal">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Avatars/img%20(26).jpg" alt="Card image cap">
<a href="#!">
<div class="mask"></div>
</a>
</div>
<!--Card image-->
<!--Card content-->
<div class="card-body card-block">
<!--Title-->
<a><h4 class="card-title">Anna</h4></a>
<a class="card-meta">Friends</a>
<!--Text-->
<p class="card-text">Anna is a web designer living in New York.</p>
<hr>
<a class="card-meta"><span><i class="fa fa-user"></i>83 Friends</span></a>
<p class="card-meta float-right">Joined in 2012</p>
</div>
<!--Card content-->
</div>
<!--Card-->
<!--Card-->
<div class="card card-personal">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Avatars/img%20(27).jpg" alt="Card image cap">
<a href="#!">
<div class="mask"></div>
</a>
</div>
<!--Card image-->
<!--Card content-->
<div class="card-body card-block">
<!--Title-->
<a><h4 class="card-title">John</h4></a>
<a class="card-meta">Coworker</a>
<!--Text-->
<p class="card-text">John is a copywriter living in Seattle.</p>
<hr>
<a class="card-meta"><span><i class="fa fa-user"></i>48 Friends</span></a>
<p class="card-meta float-right">Joined in 2015</p>
</div>
<!--Card content-->
</div>
<!--Card-->
<!--Card-->
<div class="card card-personal">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Avatars/img%20(28).jpg" alt="Card image cap">
<a href="#!">
<div class="mask"></div>
</a>
</div>
<!--Card image-->
<!--Card content-->
<div class="card-body card-block">
<!--Title-->
<a><h4 class="card-title">Sara</h4></a>
<a class="card-meta">Coworker</a>
<!--Text-->
<p class="card-text">Sara is a video maker living in Tokyo.</p>
<hr>
<a class="card-meta"><span><i class="fa fa-user"></i>127 Friends</span></a>
<p class="card-meta float-right">Joined in 2014</p>
</div>
<!--Card content-->
</div>
<!--Card-->
</div>
<!--Card group-->
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<!--Section: Group of personal cards-->