Edit these docs

Social sections

Bootstrap social sections

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

Try our new Design Blocks - an impressive collection of 400+ HTML / CSS sections

Try new Design Blocks

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

HTML



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

Comment · 7

Add comment

Anna Smith added 2 new illustrations

4 hours ago

Comment · 31

Add comment

Danny Moore added you as a friend

7 hours ago

Comment · 12

Add comment

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.

Comment · 25

Add comment

Kate Harrison added 2 new photos of you

3 days ago

Comment · 47

Add comment

HTML



        <!-- 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="fas fa-thumbs-up"></i>
                      </a>
                      <a class="thumbs" data-toggle="tooltip" data-placement="top" title="I don't like it">
                        <i class="fas 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="fas fa-thumbs-up"></i>
                      </a>
                      <a class="thumbs" data-toggle="tooltip" data-placement="top" title="I don't like it">
                        <i class="fas 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="fas fa-thumbs-up"></i>
                      </a>
                      <a class="thumbs" data-toggle="tooltip" data-placement="top" title="I don't like it">
                        <i class="fas 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="fas fa-thumbs-up"></i>
                      </a>
                      <a class="thumbs" data-toggle="tooltip" data-placement="top" title="I don't like it">
                        <i class="fas 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="fas fa-thumbs-up"></i>
                      </a>
                      <a class="thumbs" data-toggle="tooltip" data-placement="top" title="I don't like it">
                        <i class="fas 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

Clara

Joined in 2013

Clara is a photographer living in Madrid.

22 Friends

HTML



        <!-- 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="fas fa-user"></i>22 Friends</span></a>
                </div>
                <!-- Card content -->

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

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

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

        </section>
        <!-- Section: Personal card -->

Social news cards MDB Pro component

14 h

Kate

HTML



        <!-- 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="far fa-heart"></i>25 likes</span>
                    <p><i class="fas fa-comment"></i>13 comments</p>
                  </div>
                  <hr>
                  <!-- Comment input -->
                  <div class="md-form">
                    <i class="far fa-heart 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 a video MDB Pro component

2 h

Tony

HTML



        <!-- 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="far fa-heart"></i>265 likes</span>
                    <p><i class="fas fa-comment "></i>89 comments</p>
                  </div>

                  <hr>

                  <!-- Comment input -->
                  <div class="md-form ">
                    <i class="far fa-heart 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 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

HTML



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

Edit these docs

Getting started: download & setup

Download

All of the components and features are a part of the MDBootstrap package.

MDBootstrap (Material Design for Bootstrap) is an MIT Licensed framework - free for personal & commercial use.

It combines the esthetic of Material Design and the functionalities of the newest Bootstrap.

Click on the button below to visit the Getting Started Page, where you can download the latest MDBootstrap package.

MDBootstrap Download MDBootstrap About

MDB Pro

Using components and features labeled as MDB Pro component requires the MDB Pro package - a powerful UI Kit containing over 10,000 components, dozens of plugins and much more cool features.

Click the button below to learn more about the MDBootstrap Pro package.

MDBootstrap Pro

Tutorials

If you need any additional help, use our "5 min Quick Start" guide or start full Bootstrap tutorial.

5 min Quick Start Full Bootstrap Tutorial

Compilation & Customization

To reduce the weight of MDBootstrap package even more, you can compile your own, custom package containing only those components and features that you need.

If you need additional help with compiling your custom package, please use our Compilation & Customization tutorial.

Compilation & Customization tutorial

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

Integrations with Angular, React or Vue

Apart from the standard Bootstrap integration (using jQuery), MDBootstrap also integrates with Angular, React and Vue.

About MDB Angular About MDB React About MDB Vue

Exclusive resources

MDBootstrap is a platform for web creators and MDB packages are only a part of it.

If you sign up you'll gain free access to other useful tools & resources including:

Community developed components & design projects
Technical support & community forum
CLI interface & free project hosting
Helpful articles & news agregators

...and much more!

Don't hesitate and sign up now!