-mini.jpg){kind=avatar}
Kate
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
John Doe added you as a friend
1 hour ago
-mini.jpg)
Danny Moore added you as a friend
7 hours ago
-mini.jpg)
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.
-mini.jpg)
<!--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-->
Personal card MDB Pro component
.jpg)
<!--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-->
<mdb-card class="card-personal">
<!--Card image-->
<mdb-card-img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(29).jpg" alt="Card image cap"></mdb-card-img>
<!--Card image-->
<!--Card content-->
<mdb-card-body>
<!--Title-->
<a>
<mdb-card-title class="title-one h4">
Clara
</mdb-card-title>
</a>
<p class="card-meta">Joined in 2013</p>
<!--Text-->
<mdb-card-text>Clara is an photographer living in Madrid.</mdb-card-text>
<hr>
<a class="card-meta">
<span>
<i class="fa fa-user"></i>22 Friends</span>
</a>
</mdb-card-body>
<!--Card content-->
</mdb-card>
<!--Card-->
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<!--Section: Personal card-->
Social news card MDB Pro component
Kate
<!--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-->
<mdb-card class="news-card">
<!--Heading-->
<mdb-card-body>
<div class="content">
<div class="right-side-meta">14 h</div>
<mdb-card-img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(17)-mini.jpg" class="rounded-circle avatar-img z-depth-1-half"></mdb-card-img>Kate
</div>
</mdb-card-body>
<!--Card image-->
<mdb-card-img class="no-radius" src="https://mdbootstrap.com/img/Photos/Others/girl1.jpg" alt="Card image cap"></mdb-card-img>
<!--Card content-->
<mdb-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>
</mdb-card-body>
<!--Card content-->
</mdb-card>
<!--Card-->
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<!--Section: Social news card-->
Social card with video MDB Pro component
.jpg){kind=avatar}
Tony
<!--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-->
<mdb-card class="news-card">
<!--Heading-->
<mdb-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>
</mdb-card-body>
<!--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-->
<mdb-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>
</mdb-card-body>
<!--Card content-->
</mdb-card>
<!--Card-->
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<!--Section: Social card with video-->
Group of personal cards MDB Pro component
.jpg)
.jpg)
.jpg)
<!--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-->
<mdb-card class="card-personal">
<!--Card image-->
<div class="view overlay hm-white-slight waves-light" mdbWavesEffect>
<mdb-card-img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(26).jpg" alt="Card image cap"></mdb-card-img>
<a href="#!">
<div class="mask"></div>
</a>
</div>
<!--Card image-->
<!--Card content-->
<mdb-card-body>
<!--Title-->
<a>
<mdb-card-title class="card-title h4">Anna</mdb-card-title>
</a>
<p class="card-meta">Friends</p>
<!--Text-->
<mdb-card-text>Anna is a web designer living in New York.</mdb-card-text>
<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>
</mdb-card-body>
<!--Card content-->
</mdb-card>
<!--Card-->
<!--Card-->
<mdb-card class="card-personal">
<!--Card image-->
<div class="view overlay hm-white-slight waves-light" mdbWavesEffect>
<mdb-card-img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(27).jpg" alt="Card image cap"></mdb-card-img>
<a href="#!">
<div class="mask"></div>
</a>
</div>
<!--Card image-->
<!--Card content-->
<mdb-card-body>
<!--Title-->
<a>
<mdb-card-title class="card-title h4">John</mdb-card-title>
</a>
<p class="card-meta">Coworker</p>
<!--Text-->
<mdb-card-text class="card-text">John is a copywriter living in Seattle.</mdb-card-text>
<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>
</mdb-card-body>
<!--Card content-->
</mdb-card>
<!--Card-->
<!--Card-->
<mdb-card class="card-personal">
<!--Card image-->
<div class="view overlay hm-white-slight waves-light" mdbWavesEffect>
<mdb-card-img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(28).jpg" alt="Card image cap"></mdb-card-img>
<a href="#!">
<div class="mask"></div>
</a>
</div>
<!--Card image-->
<!--Card content-->
<mdb-card-body>
<!--Title-->
<a>
<mdb-card-title class="card-title h4">Sara</mdb-card-title>
</a>
<p class="card-meta">Coworker</p>
<!--Text-->
<mdb-card-text class="card-text">Sara is a video maker living in Tokyo.</mdb-card-text>
<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>
</mdb-card-body>
<!--Card content-->
</mdb-card>
<!--Card-->
</div>
<!--Card group-->
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<!--Section: Group of personal cards-->
API Reference:
In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.
API Reference for MDB Angular Social Sections:
// For MDB Angular Pro
import { WavesModule, ButtonsModule, CardsFreeModule } from 'ng-uikit-pro-standard'// For MDB Angular Free
import { WavesModule, ButtonsModule, CardsFreeModule } from 'angular-bootstrap-md'