Social sections

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
Anna Smith added 2 new illustrations
4 hours 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.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.jpg" 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">
                        <i class="fa fa-heart"></i>
                        <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.jpg" 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.jpg" class="z-depth-1 rounded mb-md-0 mb-2">
                      <img src="https://mdbootstrap.com/img/Photos/Others/images/74.jpg" class="z-depth-1 rounded">
                    </div>

                    <!-- Feed footer -->
                    <div class="feed-footer">
                      <a class="like">
                        <i class="fa fa-heart"></i>
                        <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.jpg" 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">
                        <i class="fa fa-heart"></i>
                        <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.jpg" 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">
                        <i class="fa fa-heart"></i>
                        <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.jpg" 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.jpg" class="z-depth-1 rounded mb-md-0 mb-2">
                      <img src="https://mdbootstrap.com/img/Photos/Others/images/31.jpg" class="z-depth-1 rounded">
                    </div>

                    <!-- Feed footer -->
                    <div class="feed-footer">
                      <a class="like">
                        <i class="fa fa-heart"></i>
                        <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
· 7
Anna Smith added 2 new illustrations
4 hours ago
· 31
Danny Moore added you as a friend
7 hours ago
· 12
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.
· 25
Kate Harrison added 2 new photos of you
3 days ago
· 47 


        <!-- 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.jpg" 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> &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="form-control md-textarea" rows="3"></textarea>
                            <label for="form7">Add comment</label>
                          </div>
                          <div class="d-flex justify-content-end">
                            <button type="button" class="btn 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>
                    <!-- 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.jpg" 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.jpg" class="z-depth-1 rounded mb-md-0 mb-2">
                      <img src="https://mdbootstrap.com/img/Photos/Others/images/52.jpg" 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> &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="form-control md-textarea" rows="3"></textarea>
                            <label for="form7">Add comment</label>
                          </div>
                          <div class="d-flex justify-content-end">
                            <button type="button" class="btn 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>
                    <!-- 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.jpg" 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> &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="form-control md-textarea" rows="3"></textarea>
                            <label for="form7">Add comment</label>
                          </div>
                          <div class="d-flex justify-content-end">
                            <button type="button" class="btn 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>
                    <!-- 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.jpg" 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> &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="form-control md-textarea" rows="3"></textarea>
                            <label for="form7">Add comment</label>
                          </div>
                          <div class="d-flex justify-content-end">
                            <button type="button" class="btn 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>

                  <!-- 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.jpg" class="z-depth-1 rounded mb-md-0 mb-2">
                      <img src="https://mdbootstrap.com/img/Photos/Others/images/86.jpg" 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> &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="form-control md-textarea" rows="3"></textarea>
                            <label for="form7">Add comment</label>
                          </div>
                          <div class="d-flex justify-content-end">
                            <button type="button" class="btn 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>
                    <!-- 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

Card image cap

Clara

Joined in 2013

Clara is an photographer living in Madrid.

22 Friends 


        <!-- Section: Personal card -->
        <section class="my-5">

          <!-- 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="card-img-top" 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
Kate
Card image cap 


        <!-- Section: Social news card -->
        <section class="my-5">

          <!-- 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="card-img-top" 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
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 -->
              <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="form555" class="form-control">
                  </div>

                </div>
                <!-- Card content -->

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

            </div>
            <!-- Grid column -->

          </div>
          <!-- Grid row -->

        </section>
        <!-- Section: Social card with video-->

Group of personal card MDB Pro component

Card image cap

Anna

 Friends

Anna is a web designer living in New York.

83 Friends

Joined in 2012

Card image cap

John

 Coworker

John is a copywriter living in Seattle.

48 Friends

Joined in 2015

Card image cap

Sara

 Coworker

Sara is a video maker living in Tokyo.

127 Friends

Joined in 2014



        <!-- 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 -->
                <div class="card 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).jpg" alt="Card image cap">
                    <a href="#!">
                      <div class="mask rgba-white-slight"></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-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).jpg" alt="Card image cap">
                    <a href="#!">
                      <div class="mask rgba-white-slight"></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-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).jpg" alt="Card image cap">
                    <a href="#!">
                      <div class="mask rgba-white-slight"></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 -->

Getting started : download & setup

Download

All the components and features are part of MDBootstrap package.

MDBootstrap (Material Design for Bootstrap) is a free (MIT Licensed) framework combining Material Design and the newest Bootstrap 4.

Click the button below to go to Download Page, where you can download MDBootstrap package.

MDBootstrap Download MDBootstrap About

MDB Pro

Using components and features labeled as MDB Pro component requires MDB Pro package.

Click the button below to learn more about MDBbootstrap Pro package

MDBootstrap Pro

Tutorials

If you need additional help to start, use our "5 min Quick Start" or "Full tutorial" resources.

5 min Quick Start Full Tutorial

Compilation

To reduce a weight of MDBootstrap package, you can compile your own, custom package containing only components and features you need.

Map of dependencies of SCSS files in MDBootstrap:


    Legend:

    '-->' means 'required'

    All free and pro files require files from 'core' catalog

    'none' means 'this component doesn't require anything except core files'

    A file wrapped by `< >` means that this file make the base component prettier but it isn't necessary for the proper working

    All PRO components require 'pro/_variables.scss' file

    scss/
    |
    |-- core/
    |   |
    |   |-- bootstrap/
    |   |	|-- _functions.scss
    |   |	|-- _variables.scss
    |   |
    |   |-- _colors.scss
    |   |-- _global.scss
    |   |-- _helpers.scss
    |   |-- _masks.scss
    |   |-- _mixins.scss
    |   |-- _typography.scss
    |   |-- _variables.scss
    |   |-- _waves.scss
    |
    |-- free/
    |   |-- _animations-basic.scss --> none
    |   |-- _animations-extended.scss --> _animations-basic.scss
    |   |-- _buttons.scss --> none
    |   |-- _cards.scss --> none <_buttons.scss>
    |   |-- _dropdowns.scss --> none <_buttons.scss>
    |   |-- _input-group.scss --> _forms.scss, _buttons.scss, _dropdowns.scss
    |   |-- _navbars.scss --> none <_buttons.scss, _forms.scss, _input-group.scss>
    |   |-- _pagination.scss --> none
    |   |-- _badges.scss --> none
    |   |-- _modals.scss --> _buttons.scss, _forms.scss (PRO --> _tabs.scss)
    |   |-- _carousels.scss --> <_buttons.scss>
    |   |-- _forms.scss --> none
    |   |-- _msc.scss --> none <_buttons.scss, _forms.scss, _cards.scss>
    |   |-- _footers.scss none <_buttons.scss> (PRO: )
    |   |-- _list-group.scss --> none
    |   |-- _tables.scss --> none (PRO: _material-select.scss, pro/_forms.scss, _checkbox.scss, pro/_buttons.scss, pro/_cards.scss, _pagination.scss, pro/_msc.scss)
    |   |-- _depreciated.scss
    |
    |-- pro/
    |   |
    |   |-- picker/
    |   |   |-- _default.scss --> none
    |   |   |-- _default-time.scss --> _default.scss, free/_forms.scss, free/_buttons.scss, pro/_buttons.scss, free/_cards.scss
    |   |   |-- _default-date.scss --> _default.scss, free/_forms.scss
    |   |
    |   |-- sections/
    |   |   |-- _templates.scss --> _sidenav.scss
    |   |   |-- _social.scss --> free/_cards.scss, free/ _forms.scss, free/_buttons.scss, pro/_buttons.scss,
    |   |   |-- _team.scss --> free/_buttons.scss, pro/_buttons.scss, free/_cards.scss, pro/_cards.scss
    |   |   |-- _testimonials.scss --> free/_carousels.scss, pro/_carousels.scss, free/_buttons.scss, pro/_buttons.scss
    |   |   |-- _magazine.scss --> _badges.scss
    |   |   |-- _pricing.scss --> free/_buttons.scss, pro/_buttons.scss
    |   |   |-- _contacts.scss --> free/_forms.scss, pro/_forms.scss, free/_buttons.scss, pro/_buttons.scss
    |   |
    |   |-- _variables.scss
    |   |-- _buttons.scss --> free/_buttons.scss, pro/_msc.scss, _checkbox.scss, _radio.scss
    |   |-- _social-buttons.scss --> free/_buttons.scss, pro/_buttons.scss
    |   |-- _tabs.scss --> _cards.scss
    |   |-- _cards.scss --> free/_cards.scss <_buttons.scss, _social-buttons.scss>
    |   |-- _dropdowns.scss --> free/_dropdowns.scss, free/_buttons.scss
    |   |-- _navbars.scss --> free/_navbars.scss  (PRO: )
    |   |-- _scrollspy.scss --> none
    |   |-- _lightbox.scss --> none
    |   |-- _chips.scss --> none
    |   |-- _msc.scss --> none
    |   |-- _forms.scss --> none
    |   |-- _radio.scss --> none
    |   |-- _checkbox.scss --> none
    |   |-- _material-select.scss --> none
    |   |-- _switch.scss --> none
    |   |-- _file-input.scss --> free/_forms.scss, free/_buttons.scss
    |   |-- _range.scss --> none
    |   |-- _input-group.scss --> free/_input-group.scss and the same what free input group, _checkbox.scss, _radio.scss
    |   |-- _autocomplete.scss --> free/_forms.scss
    |   |-- _accordion.scss --> pro/_animations.scss, free/_cards.scss
    |   |-- _parallax.scss --> none
    |   |-- _sidenav.scss --> free/_forms.scss, pro/_animations.scss, sections/_templates.scss
    |   |-- _ecommerce.scss --> free/_cards.scss, pro/_cards.scss, free/_buttons.scss, pro/_buttons.scss, pro/_msc.scss
    |   |-- _carousels.scss --> free/_carousels.scss, free/_cards.scss, free/_buttons.scss 
    |   |-- _steppers.scss --> free/_buttons.scss
    |   |-- _blog.scss --> none
    |   |-- _toasts.scss --> free/_buttons.scss
    |   |-- _animations.scss --> none
    |   |-- _charts.scss --> none
    |   |-- _progress.scss --> none
    |   |-- _scrollbar.scss --> none
    |   |-- _skins.scss --> none
    |   |-- _depreciated.scss
    |
    `-- _custom-skin.scss
    `-- _custom-styles.scss
    `-- _custom-variables.scss
    `-- mdb.scss

Map of dependencies of JavaScript modules in MDBootstrap:


    Legend:

    '-->' means 'required'

    All files require jQuery and bootstrap.js

    js/
    ├── dist/
    │   ├── buttons.js
    │   ├── cards.js
    │   ├── character-counter.js
    │   ├── chips.js
    │   ├── collapsible.js --> vendor/velocity.js
    │   ├── dropdown.js --> Popper.js, jquery.easing.js
    │   ├── file-input.js
    │   ├── forms-free.js
    │   ├── material-select.js --> dropdown.js
    │   ├── mdb-autocomplete.js
    │   ├── preloading.js
    │   ├── range-input.js --> vendor/velocity.js
    │   ├── scrolling-navbar.js
    │   ├── sidenav.js --> vendor/velocity.js, vendor/hammer.js, vendor/jquery.hammer.js
    │   └── smooth-scroll.js
    ├── _intro-mdb-pro.js
    ├── modules.js
    ├── src/
    │   ├── buttons.js
    │   ├── cards.js
    │   ├── character-counter.js
    │   ├── chips.js
    │   ├── collapsible.js --> vendor/velocity.js
    │   ├── dropdown.js --> Popper.js, jquery.easing.js
    │   ├── file-input.js
    │   ├── forms-free.js
    │   ├── material-select.js --> dropdown.js
    │   ├── mdb-autocomplete.js
    │   ├── preloading.js
    │   ├── range-input.js --> vendor/velocity.js
    │   ├── scrolling-navbar.js
    │   ├── sidenav.js --> vendor/velocity.js, vendor/hammer.js, vendor/jquery.hammer.js
    │   └── smooth-scroll.js
    └── vendor/
        ├── addons/
        │   ├── datatables.js
        │   └── datatables.min.js
        ├── chart.js
        ├── enhanced-modals.js
        ├── hammer.js
        ├── jarallax.js
        ├── jarallax-video.js --> vendor/jarallax.js
        ├── jquery.easing.js
        ├── jquery.easypiechart.js
        ├── jquery.hammer.js --> vendor/hammer.js
        ├── jquery.sticky.js
        ├── lightbox.js
        ├── picker-date.js --> vendor/picker.js
        ├── picker.js
        ├── picker-time.js --> vendor/picker.js
        ├── scrollbar.js
        ├── scrolling-navbar.js
        ├── toastr.js
        ├── velocity.js
        ├── waves.js
        └── wow.js

Compilation & Customization tutorial

If you need additional help to compile your custom package, use our Compilation & Customization tutorial

Compilation & Customization tutorial

Integrations with Angular, React or Vue

Apart from standard Bootstrap integration with jQuery, MDBootstrap provides integrations with Angular, React and Vue.

About MDB Angular About MDB React About MDB Vue