Sign in


Sign up


Bootstrap social sections

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

Social newsfeed v.1 MDB Pro component

example avatar
John Doe added you as a friend
1 hour ago
example avatar
Danny Moore added you as a friend
7 hours ago
example avatar
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.
example avatar
Kate Harrison added 2 new photos of you
3 days ago
example avatar example avatar
            
<!--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

example avatar
John Doe added you as a friend
1 hour ago
example avatar
example avatar example avatar
example avatar
Danny Moore added you as a friend
7 hours ago
example avatar
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.
example avatar
Kate Harrison added 2 new photos of you
3 days ago
example avatar example avatar
            
<!--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> &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-body 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> &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-body 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> &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-body 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> &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-body 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> &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-body 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

Card image cap

Clara

Joined in 2013

Clara is an photographer living in Madrid.


22 Friends
            
<!--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">
                    <!--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

14 h
example avatarKate
Card image cap

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

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

2 h
example avatarTony

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

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

Anna

Friends

Anna is a web designer living in New York.


83 Friends

Joined in 2012

John

Coworker

John 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

            
<!--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 mb-r">

                    <!--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">
                        <!--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 mb-r">

                    <!--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">
                        <!--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 mb-r">

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