Login with:


Or:


Not a member? Sign Up

Forgot Password?

Signup with:


Or:


Already have an account? Log in

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
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.
Kate Harrison added 2 new photos of you
3 days ago

<!--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
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.
Kate Harrison added 2 new photos of you
3 days ago

<!--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

Card image cap

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
Card image cap


<!--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-->