-mini.webp){kind=avatar}
Kate
Angular Bootstrap Social sections
Angular social sections - Bootstrap 4 & Material Design
Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5.
While we'll continue to support for the transition period, we encourage you to migrate to
MDB5. We're offering a 50% discount on MDB5 PRO to help with your transition,
enabling you to leverage the full potential of the latest version. You can find more information here.
get 50% discount on MDB5 PRO
Enhance your project with a variety of Social sections such as news feed, comments, and post cards.
Required styles import
Starting with MDB Angular 8, using the following components requires importing an additional stylesheet. Add the following imports to the global
styles.scssstylesheet file.
@import "~ng-uikit-pro-standard/assets/scss/core/colors";
@import "~ng-uikit-pro-standard/assets/scss/sections-pro/_social-pro.scss";
Social newsfeed v.1 MDB Pro component
John Doe added you as a friend
1 hour ago
-mini.webp)
Danny Moore added you as a friend
7 hours ago
-mini.webp)
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.webp)
<!-- Section: Social newsfeed v.1 -->
<section class="my-5">
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-12">
<!-- 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.webp" class="rounded-circle z-depth-1-half">
</div>
<!-- Excerpt -->
<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">
<mdb-icon fas icon="heart"></mdb-icon>
<span>5 likes</span>
</a>
</div>
</div>
<!-- Excerpt -->
</div>
<!-- First news -->
<!-- Second news -->
<div class="news">
<!-- Label -->
<div class="label">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(17)-mini.webp" class="rounded-circle z-depth-1-half">
</div>
<!-- Excerpt -->
<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/Others/images/71.webp" class="z-depth-1 rounded mb-md-0 mb-2">
<img src="https://mdbootstrap.com/img/Photos/Others/images/74.webp" class="z-depth-1 rounded">
</div>
<!-- Feed footer -->
<div class="feed-footer">
<a class="like">
<mdb-icon fas icon="heart"></mdb-icon>
<span>18 likes</span>
</a>
</div>
</div>
<!-- Excerpt -->
</div>
<!-- Second news -->
<!-- Third news -->
<div class="news">
<!-- Label -->
<div class="label">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(9)-mini.webp" class="rounded-circle z-depth-1-half">
</div>
<!-- Excerpt -->
<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">
<mdb-icon fas icon="heart"></mdb-icon>
<span>11 likes</span>
</a>
</div>
</div>
<!-- Excerpt -->
</div>
<!-- Third news -->
<!-- Fourth news -->
<div class="news">
<!-- Label -->
<div class="label">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(18)-mini.webp" class="rounded-circle z-depth-1-half">
</div>
<!-- Excerpt -->
<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">
<mdb-icon fas icon="heart"></mdb-icon>
<span>7 likes</span>
</a>
</div>
</div>
<!-- Excerpt -->
</div>
<!-- Fourth news -->
<!-- Fifth news -->
<div class="news">
<!-- Label -->
<div class="label">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(20)-mini.webp" class="rounded-circle z-depth-1-half">
</div>
<!-- Excerpt -->
<div class="excerpt mb-0">
<!-- 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/Others/images/29.webp" class="z-depth-1 rounded mb-md-0 mb-2">
<img src="https://mdbootstrap.com/img/Photos/Others/images/31.webp" class="z-depth-1 rounded">
</div>
<!-- Feed footer -->
<div class="feed-footer">
<a class="like">
<mdb-icon fas icon="heart"></mdb-icon>
<span>53 likes</span>
</a>
</div>
</div>
<!-- Excerpt -->
</div>
<!-- Fifth news -->
</div>
<!-- Newsfeed -->
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</section>
<!-- Section: Social newsfeed v.1 -->
Social newsfeed v.2 MDB Pro component
John Doe added you as a friend
1 hour ago
Danny Moore added you as a friend
7 hours ago
Lili Rose posted on his page
2 days ago
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero inventore, iste
quas libero eius? Vitae sint neque animi alias sunt dolor, accusantium ducimus, non placeat voluptate.
<!-- Section: Social newsfeed v.2 -->
<section class="my-5">
<!-- 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.webp" class="rounded-circle z-depth-1-half">
</div>
<!-- Excerpt -->
<div class="excerpt">
<!-- Brief -->
<div class="brief">
<a class="name">John Doe</a> added you as a friend
<div class="date">1 hour ago</div>
</div>
<!-- Feed footer -->
<div class="feed-footer">
<a class="comment" data-toggle="collapse" href="#collapseExample-1" aria-expanded="false"
aria-controls="collapseExample-1">Comment</a> ·
<span>
<a>7</a>
</span>
<a class="thumbs" data-toggle="tooltip" data-placement="top" title="I like it">
<mdb-icon fas icon="thumbs-up"></mdb-icon>
</a>
<a class="thumbs" data-toggle="tooltip" data-placement="top" title="I don't like it">
<mdb-icon fas icon="thumbs-down"></mdb-icon>
</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="form-control md-textarea" rows="3"></textarea>
<label for="form7">Add comment</label>
</div>
<div class="d-flex justify-content-end">
<button type="button" mdbBtn flat="true" class="waves-effect" data-toggle="collapse" data-target="#collapseExample-1"
aria-expanded="false" aria-controls="collapseExample-1">Cancel</button>
<button type="button" mdbBtn color="primary" data-toggle="collapse" data-target="#collapseExample-1"
aria-expanded="false" aria-controls="collapseExample-1">Reply</button>
</div>
</div>
</div>
</div>
<!-- Feed footer -->
</div>
<!-- Excerpt -->
</div>
<!-- First news -->
<!-- Second news -->
<div class="news">
<!-- Label -->
<div class="label">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(17)-mini.webp" class="rounded-circle z-depth-1-half">
</div>
<!-- Excerpt -->
<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/Others/images/50.webp" class="z-depth-1 rounded mb-md-0 mb-2">
<img src="https://mdbootstrap.com/img/Photos/Others/images/52.webp" class="z-depth-1 rounded">
</div>
<!-- Feed footer -->
<div class="feed-footer">
<a class="comment" data-toggle="collapse" href="#collapseExample-2" aria-expanded="false"
aria-controls="collapseExample-2">Comment</a> ·
<span>
<a>31</a>
</span>
<a class="thumbs" data-toggle="tooltip" data-placement="top" title="I like it">
<mdb-icon fas icon="thumbs-up"></mdb-icon>
</a>
<a class="thumbs" data-toggle="tooltip" data-placement="top" title="I don't like it">
<mdb-icon fas icon="thumbs-down"></mdb-icon>
</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="form-control md-textarea" rows="3"></textarea>
<label for="form7">Add comment</label>
</div>
<div class="d-flex justify-content-end">
<button type="button" mdbBtn flat="true" class="waves-effect" data-toggle="collapse" data-target="#collapseExample-2"
aria-expanded="false" aria-controls="collapseExample-2">Cancel</button>
<button type="button" mdbBtn color="primary" data-toggle="collapse" data-target="#collapseExample-2"
aria-expanded="false" aria-controls="collapseExample-2">Reply</button>
</div>
</div>
</div>
</div>
<!-- Feed footer -->
</div>
<!-- Excerpt -->
</div>
<!-- Second news -->
<!-- Third news -->
<div class="news">
<!-- Label -->
<div class="label">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(9)-mini.webp" class="rounded-circle z-depth-1-half">
</div>
<!-- Excerpt -->
<div class="excerpt">
<!-- Brief -->
<div class="brief">
<a class="name">Danny Moore</a> added you as a friend
<div class="date">7 hours ago</div>
</div>
<!-- Feed footer -->
<div class="feed-footer">
<a class="comment" data-toggle="collapse" href="#collapseExample-3" aria-expanded="false"
aria-controls="collapseExample-3">Comment</a> ·
<span>
<a>12</a>
</span>
<a class="thumbs" data-toggle="tooltip" data-placement="top" title="I like it">
<mdb-icon fas icon="thumbs-up"></mdb-icon>
</a>
<a class="thumbs" data-toggle="tooltip" data-placement="top" title="I don't like it">
<mdb-icon fas icon="thumbs-down"></mdb-icon>
</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="form-control md-textarea" rows="3"></textarea>
<label for="form7">Add comment</label>
</div>
<div class="d-flex justify-content-end">
<button type="button" mdbBtn flat="true" class="waves-effect" data-toggle="collapse" data-target="#collapseExample-3"
aria-expanded="false" aria-controls="collapseExample-3">Cancel</button>
<button type="button" mdbBtn color="primary" data-toggle="collapse" data-target="#collapseExample-3"
aria-expanded="false" aria-controls="collapseExample-3">Reply</button>
</div>
</div>
</div>
</div>
<!-- Feed footer -->
</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.webp" class="rounded-circle z-depth-1-half">
</div>
<!-- Excerpt -->
<div class="excerpt">
<!-- Brief -->
<div class="brief">
<a class="name">Lili Rose</a> posted on his page
<div class="date">2 days ago</div>
</div>
<!-- Added text -->
<div class="added-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero inventore,
iste quas libero eius? Vitae sint neque animi alias sunt dolor, accusantium ducimus, non placeat
voluptate.</div>
<!-- Feed footer -->
<div class="feed-footer">
<a class="comment" data-toggle="collapse" href="#collapseExample-4" aria-expanded="false"
aria-controls="collapseExample-4">Comment</a> ·
<span>
<a>25</a>
</span>
<a class="thumbs" data-toggle="tooltip" data-placement="top" title="I like it">
<mdb-icon fas icon="thumbs-up"></mdb-icon>
</a>
<a class="thumbs" data-toggle="tooltip" data-placement="top" title="I don't like it">
<mdb-icon fas icon="thumbs-down"></mdb-icon>
</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="form-control md-textarea" rows="3"></textarea>
<label for="form7">Add comment</label>
</div>
<div class="d-flex justify-content-end">
<button type="button" mdbBtn flat="true" class="waves-effect" data-toggle="collapse" data-target="#collapseExample-4"
aria-expanded="false" aria-controls="collapseExample-4">Cancel</button>
<button type="button" mdbBtn color="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.webp" class="rounded-circle z-depth-1-half">
</div>
<!-- Excerpt -->
<div class="excerpt mb-0">
<!-- 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/Others/images/81.webp" class="z-depth-1 rounded mb-md-0 mb-2">
<img src="https://mdbootstrap.com/img/Photos/Others/images/86.webp" class="z-depth-1 rounded">
</div>
<!-- Feed footer -->
<div class="feed-footer">
<a class="comment" data-toggle="collapse" href="#collapseExample-5" aria-expanded="false"
aria-controls="collapseExample-5">Comment</a> ·
<span>
<a>47</a>
</span>
<a class="thumbs" data-toggle="tooltip" data-placement="top" title="I like it">
<mdb-icon fas icon="thumbs-up"></mdb-icon>
</a>
<a class="thumbs" data-toggle="tooltip" data-placement="top" title="I don't like it">
<mdb-icon fas icon="thumbs-down"></mdb-icon>
</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="form-control md-textarea" rows="3"></textarea>
<label for="form7">Add comment</label>
</div>
<div class="d-flex justify-content-end">
<button type="button" mdbBtn flat="true" class="waves-effect" data-toggle="collapse" data-target="#collapseExample-5"
aria-expanded="false" aria-controls="collapseExample-5">Cancel</button>
<button type="button" mdbBtn color="primary" data-toggle="collapse" data-target="#collapseExample-5"
aria-expanded="false" aria-controls="collapseExample-5">Reply</button>
</div>
</div>
</div>
</div>
<!-- Feed footer -->
</div>
<!-- Excerpt -->
</div>
<!-- Fifth news -->
</div>
<!-- Newsfeed -->
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</section>
<!-- Section: Social newsfeed v.2 -->
Personal card MDB Pro component
.webp)
<!-- Section: Personal card -->
<section class="my-5">
<!-- 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).webp"></mdb-card-img>
<!-- Card image-->
<!-- Card content -->
<mdb-card-body class="card-body">
<!-- Title-->
<mdb-card-title>
<a>
<h4 class="card-title title-one">Clara</h4>
</a>
</mdb-card-title>
<p class="card-meta">Joined in 2013</p>
<!-- Text -->
<mdb-card-text>
Clara is an photographer living in Madrid.
</mdb-card-text>
<!-- <p class="card-text"></p> -->
<hr>
<a class="card-meta"><span><mdb-icon fas icon="user"></mdb-icon>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="my-5">
<!-- 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>
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(17)-mini.webp" class="rounded-circle avatar-img z-depth-1-half">Kate
</div>
</mdb-card-body>
<!-- Card image-->
<mdb-card-img src="https://mdbootstrap.com/img/Photos/Others/girl1.webp"></mdb-card-img>
<!-- Card content -->
<mdb-card-body>
<!-- Social meta-->
<div class="social-meta">
<p>Another great adventure! </p>
<span><mdb-icon far icon="heart"></mdb-icon>25 likes</span>
<p><mdb-icon fas icon="comment"></mdb-icon>13 comments</p>
</div>
<hr>
<!-- Comment input -->
<div class="md-form">
<mdb-icon far icon="heart" class="prefix"></mdb-icon>
<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
.webp){kind=avatar}
Tony
<!-- Section: Social card with video-->
<section class="my-5">
<!-- 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).webp" 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><mdb-icon far icon="heart"></mdb-icon>265 likes</span>
<p><mdb-icon far icon="comment"></mdb-icon>89 comments</p>
</div>
<hr>
<!-- Comment input -->
<div class="md-form ">
<mdb-icon far icon="heart" class="prefix"></mdb-icon>
<input placeholder="Add Comment..." type="text" id="form555" 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 card MDB Pro component
.webp)
.webp)
.webp)
<!-- Section: Group of personal cards -->
<section class="my-5">
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-12">
<!-- Card group-->
<div class="card-group">
<!-- Card -->
<mdb-card class="card-personal mb-md-0 mb-4">
<!-- Card image-->
<div class="view overlay">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Avatars/img%20(26).webp" alt="Card image cap">
<a href="#!">
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!-- Card image-->
<!-- Card content -->
<mdb-card-body>
<!-- Title-->
<mdb-card-title>
<a>
<h4 class="card-title">Anna</h4>
</a>
</mdb-card-title>
<a class="card-meta">Friends</a>
<!-- Text -->
<mdb-card-text>Anna is a web designer living in New York.</mdb-card-text>
<hr>
<a class="card-meta"><span><mdb-icon fas icon="user"></mdb-icon>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 mb-md-0 mb-4">
<!-- Card image-->
<div class="view overlay">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Avatars/img%20(27).webp" alt="Card image cap">
<a href="#!">
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!-- Card image-->
<!-- Card content -->
<mdb-card-body>
<!-- Title-->
<mdb-card-title>
<a>
<h4 class="card-title">John</h4>
</a>
</mdb-card-title>
<a class="card-meta">Coworker</a>
<!-- Text -->
<mdb-card-text>John is a copywriter living in Seattle.</mdb-card-text>
<hr>
<a class="card-meta"><span><mdb-icon fas icon="user"></mdb-icon> 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 mb-md-0 mb-4">
<!-- Card image-->
<div class="view overlay">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Avatars/img%20(28).webp" alt="Card image cap">
<a href="#!">
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!-- Card image-->
<!-- Card content -->
<mdb-card-body>
<!-- Title-->
<mdb-card-title>
<a>
<h4 class="card-title">Sara</h4>
</a>
</mdb-card-title>
<a class="card-meta">Coworker</a>
<!-- Text -->
<mdb-card-text class="card-text">Sara is a video maker living in Tokyo.</mdb-card-text>
<hr>
<a class="card-meta"><span><mdb-icon fas icon="user"></mdb-icon>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 -->
Angular social - API
In this section you will find informations about required modules and available inputs, outputs, methods and events of Angular social sections.
Modules used
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.
import { CardsFreeModule, WavesModule, ButtonsModule } from 'ng-uikit-pro-standard'