Bootstrap social sections

Enhance your project with a variety of Social sections such as news feed, comments, and post cards.

Social Newsfeed V.1 Premium component

John Doe added you as a friend

1 hour ago

5 likes

Anna Smith added 2 new illustrations

4 hours ago

18 likes

Danny Moore added you as a friend

7 hours ago

11 likes

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.

7 likes

Kate Harrison added 2 new photos of you

3 days ago

53 likes

<!--Section: Social Newsfeed-->
<section>

    <!--First row-->
    <div class="row">

        <!--First column-->
        <div class="col-md-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">
                            <a><img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(2).jpg" class="z-depth-1"></a>
                            <a><img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(36).jpg" class="z-depth-1"></a>
                        </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">
                            <a><img src="https://mdbootstrap.com/img/Photos/Horizontal/People/4-col/img%20(113).jpg" class="z-depth-1"></a>
                            <a><img src="https://mdbootstrap.com/img/Photos/Horizontal/People/4-col/img%20(119).jpg" class="z-depth-1"></a>
                        </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>
        <!--/First column-->

    </div>
    <!--/First row-->

</section>
<!--/Section: Social Newsfeed-->

Social Newsfeed V.2 Premium component

John Doe added you as a friend

1 hour ago

Comment · 7

Add comment

Reply Cancel

Anna Smith added 2 new illustrations

4 hours ago

Comment · 31

Add comment

Reply Cancel

Danny Moore added you as a friend

7 hours ago

Comment · 12

Add comment

Reply Cancel

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.

Comment · 25

Add comment

Reply Cancel

Kate Harrison added 2 new photos of you

3 days ago

Comment · 47

Add comment

Reply Cancel

<!--Section: Social Newsfeed V.2-->
<section>

    <!--First row-->
    <div class="row">

        <!--First column-->
        <div class="col-md-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> &middot; 
                            <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-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>
                                    <button type="button" class="btn btn-primary float-right" data-toggle="collapse" data-target="#collapseExample-1" aria-expanded="false" aria-controls="collapseExample-1">Reply</button>
                                    <button type="button" class="btn-flat waves-effect float-right" data-toggle="collapse" data-target="#collapseExample-1" aria-expanded="false" aria-controls="collapseExample-1">Cancel</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">
                            <a><img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(2).jpg" class="z-depth-1"></a>
                            <a><img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(36).jpg" class="z-depth-1"></a>
                        </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> &middot; 
                            <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-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>
                                    <button type="button" class="btn btn-primary float-right" data-toggle="collapse" data-target="#collapseExample-2" aria-expanded="false" aria-controls="collapseExample-2">Reply</button>
                                    <button type="button" class="btn-flat waves-effect float-right" data-toggle="collapse" data-target="#collapseExample-2" aria-expanded="false" aria-controls="collapseExample-2">Cancel</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> &middot; 
                            <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-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>
                                    <button type="button" class="btn btn-primary float-right" data-toggle="collapse" data-target="#collapseExample-3" aria-expanded="false" aria-controls="collapseExample-3">Reply</button>
                                    <button type="button" class="btn-flat waves-effect float-right" data-toggle="collapse" data-target="#collapseExample-3" aria-expanded="false" aria-controls="collapseExample-3">Cancel</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> &middot; 
                            <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-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>
                                    <button type="button" class="btn btn-primary float-right" data-toggle="collapse" data-target="#collapseExample-4" aria-expanded="false" aria-controls="collapseExample-4">Reply</button>
                                    <button type="button" class="btn-flat waves-effect float-right" data-toggle="collapse" data-target="#collapseExample-4" aria-expanded="false" aria-controls="collapseExample-4">Cancel</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">
                            <a><img src="https://mdbootstrap.com/img/Photos/Horizontal/People/4-col/img%20(113).jpg" class="z-depth-1 waves-effect"></a>
                            <a><img src="https://mdbootstrap.com/img/Photos/Horizontal/People/4-col/img%20(119).jpg" class="z-depth-1"></a>
                        </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> &middot; 
                            <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-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>
                                    <button type="button" class="btn btn-primary float-right" data-toggle="collapse" data-target="#collapseExample-5" aria-expanded="false" aria-controls="collapseExample-5">Reply</button>
                                    <button type="button" class="btn-flat waves-effect float-right" data-toggle="collapse" data-target="#collapseExample-5" aria-expanded="false" aria-controls="collapseExample-5">Cancel</button>
                                </div>
                              </div>
                            </div>
                        </div>

                    </div>

                </div>
                <!--/Fifth news-->

            </div>
            <!--/Newsfeed-->

        </div>
        <!--/First column-->

    </div>
    <!--/First row-->

</section>
<!--/Section: Social Newsfeed V.2--> 

Personal Card Premium component

Clara

Joined in 2013

Clara is an photographer living in Madrid.

---

22 Friends

<!--Card-->
<div class="card card-personal">

    <!--Card image-->
    <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Avatars/img%20(15).jpg" alt="Card image cap">
    <!--/.Card image-->

    <!--Card content-->
    <div class="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-->

Social News Card Premium component

14 h

Kate

25 likes

13 comments

---

<!--Card-->
<div class="card news-card">

    <!--Heading-->  
    <div class="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" src="https://mdbootstrap.com/img/Photos/Avatars/img%20(21).jpg" alt="Card image cap">

    <!--Card content-->
    <div class="card-block">

        <!--Social meta-->
        <div class="social-meta">
            <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-->

Group of Social Cards Premium component

Anna

Friends

Anna is a web designer living in New York.

---

83 Friends

Joined in 2012

Marie

Coworker

Marie is a copywriter living in Seattle.

---

48 Friends

Joined in 2015

Sara

Coworker

Sara is a video maker living in Tokyo.

---

127 Friends

Joined in 2014

<!--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(24).jpg" alt="Card image cap">
            <a href="#!">
                <div class="mask waves-effect waves-light"></div>
            </a>
        </div>
        <!--/.Card image-->

        <!--Card content-->
        <div class="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"><i class="fa fa-user"></i>83 Friends</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(22).jpg" alt="Card image cap">
            <a href="#!">
                <div class="mask waves-effect waves-light"></div>
            </a>
        </div>
        <!--/.Card image-->

        <!--Card content-->
        <div class="card-block">
            <!--Title-->
            <a><h4 class="card-title">Marie</h4></a>
            <a class="card-meta">Coworker</a>

            <!--Text-->
            <p class="card-text">Marie is a copywriter living in Seattle.</p>
            <hr>
            <a class="card-meta"><i class="fa fa-user"></i>48 Friends</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(23).jpg" alt="Card image cap">
            <a href="#!">
                <div class="mask waves-effect waves-light"></div>
            </a>
        </div>
        <!--/.Card image-->

        <!--Card content-->
        <div class="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"><i class="fa fa-user"></i>127 Friends</a>
            <p class="card-meta float-right">Joined in 2014</p>
        </div>
        <!--/.Card content-->

    </div>
    <!--/.Card-->

</div>
<!--/Card group-->