Edit these docs Rate these docs

Blog component

Bootstrap blog component

Bootstrap blog components is a set of components which are dedicated to building a blog or any other content-oriented website.


Author Box v.1

About the author

Generic placeholder image
Danny Newman
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod consectetur accusamus velit nostrum et magnam.


        <!--Section: Author Box-->
        <section class="my-5">

          <!-- Card header -->
          <div class="card-header border-0 font-weight-bold d-flex justify-content-between">
            <p class="mr-4 mb-0">About the author</p>
            <ul class="list-unstyled list-inline mb-0">
              <li class="list-inline-item"><a href="" class="mr-3"><i class="fas fa-envelope mr-1"></i>Send message</a></li>
              <li class="list-inline-item"><a href="" class="mr-3"><i class="fas fa-user mr-1"></i>See profile</a></li>
              <li class="list-inline-item"><a href="" class="mr-3"><i class="fas fa-rss mr-1"></i>Follow</a></li>
            </ul>
          </div>

          <div class="media mt-4 px-1">
            <img class="card-img-100 d-flex z-depth-1 mr-3" src="https://mdbootstrap.com/img/Photos/Avatars/img%20(8).jpg"
              alt="Generic placeholder image">
            <div class="media-body">
              <h5 class="font-weight-bold mt-0">
                <a href="">Danny Newman</a>
              </h5>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod consectetur accusamus velit nostrum et
              magnam.
            </div>
          </div>

        </section>
        <!--Section: Author Box-->

      

Author Box v.2

About the author

Generic placeholder image
Danny Newman
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod consectetur accusamus velit nostrum et magnam.


        <!--Section: Author Box-->
        <section class="my-5">

          <!-- Card header -->
          <div class="card-header border-0 font-weight-bold d-flex justify-content-between">
            <p class="mr-4 mb-0">About the author</p>
            <ul class="list-unstyled list-inline mb-0">
              <li class="list-inline-item"><a href="" class="text-default mr-3"><i class="fas fa-envelope mr-1"></i>Send
                  message</a></li>
              <li class="list-inline-item"><a href="" class="text-default mr-3"><i class="fas fa-user mr-1"></i>See
                  profile</a></li>
              <li class="list-inline-item"><a href="" class="text-default mr-3"><i class="fas fa-rss mr-1"></i>Follow</a></li>
            </ul>
          </div>

          <div class="media mt-4 px-1">
            <img class="card-img-100 rounded-circle d-flex z-depth-1 mr-3" src="https://mdbootstrap.com/img/Photos/Avatars/img%20(8).jpg"
              alt="Generic placeholder image">
            <div class="media-body">
              <h5 class="font-weight-bold mt-0">
                <a class="text-default" href="">Danny Newman</a>
              </h5>
              <ul class="list-unstyled list-inline mb-2 pt-1">
                <li class="list-inline-item">
                  <a class="grey-text mr-1"><i class="fab fa-lg fa-facebook"> </i></a>
                </li>
                <li class="list-inline-item">
                  <a class="grey-text mr-1"><i class="fab fa-lg fa-twitter"> </i></a>
                </li>
                <li class="list-inline-item">
                  <a class="grey-text mr-1"><i class="fab fa-lg fa-google-plus"> </i></a>
                </li>
                <li class="list-inline-item">
                  <a class="grey-text mr-1"><i class="fab fa-lg fa-linkedin"> </i></a>
                </li>
                <li class="list-inline-item">
                  <a class="grey-text mr-1"><i class="fab fa-lg fa-instagram"> </i></a>
                </li>
              </ul>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod consectetur accusamus velit nostrum et
              magnam.
            </div>
          </div>

        </section>
        <!--Section: Author Box-->

      

Comments List v.1

4 comments
Generic placeholder image
Miley Steward
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Generic placeholder image
Tommy Smith
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Generic placeholder image
Sylvester the Cat
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Generic placeholder image
Caroline Horwitz
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa officia deserunt mollitia animi, id est laborum et dolorum fuga.


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

          <!-- Card header -->
          <div class="card-header border-0 font-weight-bold">4 comments</div>

          <div class="media d-block d-md-flex mt-4">
            <img class="card-img-64 d-flex mx-auto mb-3" src="https://mdbootstrap.com/img/Photos/Avatars/img (20).jpg"
              alt="Generic placeholder image">
            <div class="media-body text-center text-md-left ml-md-3 ml-0">
              <h5 class="font-weight-bold mt-0">
                <a href="">Miley Steward</a>
                <a href="" class="pull-right">
                  <i class="fas fa-reply"></i>
                </a>
              </h5>
              Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
              Excepteur sint occaecat
              cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
              <div class="media d-block d-md-flex mt-4">
                <img class="card-img-64 d-flex mx-auto mb-3" src="https://mdbootstrap.com/img/Photos/Avatars/img (27).jpg"
                  alt="Generic placeholder image">
                <div class="media-body text-center text-md-left ml-md-3 ml-0">
                  <h5 class="font-weight-bold mt-0">
                    <a href="">Tommy Smith</a>
                    <a href="" class="pull-right">
                      <i class="fas fa-reply"></i>
                    </a>
                  </h5>
                  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
                  totam rem aperiam, eaque
                  ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
                </div>
              </div>

              <!-- Quick Reply -->
              <div class="form-group mt-4">
                <label for="quickReplyFormComment">Your comment</label>
                <textarea class="form-control" id="quickReplyFormComment" rows="5"></textarea>

                <div class="text-center my-4">
                  <button class="btn btn-primary btn-sm" type="submit">Post</button>
                </div>
              </div>

              <div class="media d-block d-md-flex mt-3">
                <img class="card-img-64 d-flex mx-auto mb-3" src="https://mdbootstrap.com/img/Photos/Avatars/img (21).jpg"
                  alt="Generic placeholder image">
                <div class="media-body text-center text-md-left ml-md-3 ml-0">
                  <h5 class="font-weight-bold mt-0">
                    <a href="">Sylvester the Cat</a>
                    <a href="" class="pull-right">
                      <i class="fas fa-reply"></i>
                    </a>
                  </h5>
                  Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed
                  quia non numquam eius modi
                  tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
                </div>
              </div>
            </div>
          </div>
          <div class="media d-block d-md-flex mt-3">
            <img class="card-img-64 d-flex mx-auto mb-3" src="https://mdbootstrap.com/img/Photos/Avatars/img (30).jpg"
              alt="Generic placeholder image">
            <div class="media-body text-center text-md-left ml-md-3 ml-0">
              <h5 class="font-weight-bold mt-0">
                <a href="">Caroline Horwitz</a>
                <a href="" class="pull-right">
                  <i class="fas fa-reply"></i>
                </a>
              </h5>
              At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti
              atque corrupti
              quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
              officia deserunt mollitia animi, id est laborum et dolorum fuga.
            </div>
          </div>

          <!--Pagination -->
          <nav class="d-flex justify-content-center mt-5">
            <ul class="pagination pg-blue mb-0">

              <!--First-->
              <li class="page-item disabled">
                <a class="page-link">First</a>
              </li>

              <!--Arrow left-->
              <li class="page-item disabled">
                <a class="page-link" aria-label="Previous">
                  <span aria-hidden="true">&laquo;</span>
                  <span class="sr-only">Previous</span>
                </a>
              </li>

              <!--Numbers-->
              <li class="page-item active">
                <a class="page-link">1</a>
              </li>
              <li class="page-item">
                <a class="page-link">2</a>
              </li>
              <li class="page-item">
                <a class="page-link">3</a>
              </li>
              <li class="page-item">
                <a class="page-link">4</a>
              </li>
              <li class="page-item">
                <a class="page-link">5</a>
              </li>

              <!--Arrow right-->
              <li class="page-item">
                <a class="page-link" aria-label="Next">
                  <span aria-hidden="true">&raquo;</span>
                  <span class="sr-only">Next</span>
                </a>
              </li>

              <!--Last-->
              <li class="page-item">
                <a class="page-link">Last</a>
              </li>

            </ul>
          </nav>
          <!--Pagination -->

        </section>
        <!--Section: Comments-->

      

Comments List v.2 MDB Pro component

4 comments
Generic placeholder image
Miley Steward
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Generic placeholder image
Tommy Smith
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Generic placeholder image
Sylvester the Cat
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Generic placeholder image
Caroline Horwitz
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa officia deserunt mollitia animi, id est laborum et dolorum fuga.


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

          <!-- Card header -->
          <div class="card-header border-0 font-weight-bold">4 comments</div>

          <div class="media d-block d-md-flex mt-4">
            <img class="card-img-64 rounded-circle z-depth-1 d-flex mx-auto mb-3" src="https://mdbootstrap.com/img/Photos/Avatars/img (20).jpg"
              alt="Generic placeholder image">
            <div class="media-body text-center text-md-left ml-md-3 ml-0">
              <h5 class="font-weight-bold mt-0">
                <a class="text-default" href="">Miley Steward</a>
                <a href="" class="pull-right text-default">
                  <i class="fas fa-reply"></i>
                </a>
              </h5>
              Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
              Excepteur sint occaecat
              cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
              <div class="media d-block d-md-flex mt-4">
                <img class="card-img-64 rounded-circle z-depth-1 d-flex mx-auto mb-3" src="https://mdbootstrap.com/img/Photos/Avatars/img (27).jpg"
                  alt="Generic placeholder image">
                <div class="media-body text-center text-md-left ml-md-3 ml-0">
                  <h5 class="font-weight-bold mt-0">
                    <a class="text-default" href="">Tommy Smith</a>
                    <a href="" class="pull-right text-default">
                      <i class="fas fa-reply"></i>
                    </a>
                  </h5>
                  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
                  totam rem aperiam, eaque
                  ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
                </div>
              </div>

              <!-- Quick Reply -->
              <div class="md-form mt-4">
                <label for="quickReplyFormComment">Your comment</label>
                <textarea class="form-control md-textarea" id="quickReplyFormComment" rows="3"></textarea>

                <div class="text-center my-4">
                  <button class="btn btn-default btn-sm btn-rounded" type="submit">Post</button>
                </div>
              </div>

              <div class="media d-block d-md-flex mt-3">
                <img class="card-img-64 rounded-circle z-depth-1 d-flex mx-auto mb-3" src="https://mdbootstrap.com/img/Photos/Avatars/img (21).jpg"
                  alt="Generic placeholder image">
                <div class="media-body text-center text-md-left ml-md-3 ml-0">
                  <h5 class="font-weight-bold mt-0">
                    <a class="text-default" href="">Sylvester the Cat</a>
                    <a href="" class="pull-right text-default">
                      <i class="fas fa-reply"></i>
                    </a>
                  </h5>
                  Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed
                  quia non numquam eius modi
                  tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
                </div>
              </div>
            </div>
          </div>
          <div class="media d-block d-md-flex mt-3">
            <img class="card-img-64 rounded-circle z-depth-1 d-flex mx-auto mb-3" src="https://mdbootstrap.com/img/Photos/Avatars/img (30).jpg"
              alt="Generic placeholder image">
            <div class="media-body text-center text-md-left ml-md-3 ml-0">
              <h5 class="font-weight-bold mt-0">
                <a class="text-default" href="">Caroline Horwitz</a>
                <a href="" class="pull-right text-default">
                  <i class="fas fa-reply"></i>
                </a>
              </h5>
              At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti
              atque corrupti
              quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
              officia deserunt mollitia animi, id est laborum et dolorum fuga.
            </div>
          </div>

          <!--Pagination -->
          <nav class="d-flex justify-content-center mt-5">
            <ul class="pagination pagination-circle pg-teal mb-0">

              <!--First-->
              <li class="page-item disabled">
                <a class="page-link">First</a>
              </li>

              <!--Arrow left-->
              <li class="page-item disabled">
                <a class="page-link" aria-label="Previous">
                  <span aria-hidden="true">&laquo;</span>
                  <span class="sr-only">Previous</span>
                </a>
              </li>

              <!--Numbers-->
              <li class="page-item active">
                <a class="page-link">1</a>
              </li>
              <li class="page-item">
                <a class="page-link">2</a>
              </li>
              <li class="page-item">
                <a class="page-link">3</a>
              </li>
              <li class="page-item">
                <a class="page-link">4</a>
              </li>
              <li class="page-item">
                <a class="page-link">5</a>
              </li>

              <!--Arrow right-->
              <li class="page-item">
                <a class="page-link" aria-label="Next">
                  <span aria-hidden="true">&raquo;</span>
                  <span class="sr-only">Next</span>
                </a>
              </li>

              <!--Last-->
              <li class="page-item">
                <a class="page-link">Last</a>
              </li>

            </ul>
          </nav>
          <!--Pagination -->

        </section>

      

Reply Form v.1

Leave a reply



        <!-- Reply section -->
        <section class="my-5">

          <!-- Leave a reply -->
          <div class="card-header border-0 font-weight-bold">Leave a reply</div>

          <!-- Default form reply -->
          <form class="px-1 mt-4">

            <!-- Comment -->
            <div class="form-group">
              <label for="replyFormComment">Your comment</label>
              <textarea class="form-control" id="replyFormComment" rows="5"></textarea>
            </div>

            <!-- Name -->
            <label for="replyFormName">Your name</label>
            <input type="email" id="replyFormName" class="form-control">

            <br>

            <!-- Email -->
            <label for="replyFormEmail">Your e-mail</label>
            <input type="email" id="replyFormEmail" class="form-control">

            <div class="text-center mt-4">
              <button class="btn btn-primary btn-md" type="submit">Post</button>
            </div>

          </form>
          <!-- Default form reply -->

        </section>
        <!-- Reply section -->

      

Reply Form v.2 MDB Pro component

Leave a reply


        <!-- Reply section -->
        <section class="my-5">

          <!-- Leave a reply -->
          <div class="card-header border-0 font-weight-bold">Leave a reply</div>

          <!-- Default form reply -->
          <form class="px-1 mt-4">

            <!-- Comment -->
            <div class="md-form">
              <label for="replyFormComment">Your comment</label>
              <textarea class="form-control md-textarea" id="replyFormComment" rows="4"></textarea>
            </div>

            <!-- Name -->
            <div class="md-form mt-5">
              <label for="replyFormName">Your name</label>
              <input type="email" id="replyFormName" class="form-control">
            </div>

            <!-- Email -->
            <div class="md-form mt-5">
              <label for="replyFormEmail">Your e-mail</label>
              <input type="email" id="replyFormEmail" class="form-control">
            </div>

            <div class="text-center mt-4">
              <button class="btn btn-default btn-rounded btn-md" type="submit">Post</button>
            </div>

          </form>
          <!-- Default form reply -->

        </section>
        <!-- Reply section -->

      

Reply Form v.3

Leave a reply
1
2
3


        <!-- Reply section -->
        <section class="my-5">

          <!-- Leave a reply -->
          <div class="card-header border-0 font-weight-bold">Leave a reply</div>

          <!-- Reply form -->
          <form class="mt-4">

            <div class="d-md-flex flex-md-fill">

              <div class="input-group input-group-md px-2 mb-4">
                <div class="input-group-prepend">
                  <span class="input-group-text white grey-text" id="basic-addon9">1</span>
                </div>
                <input type="text" class="form-control mt-0 black-border rgba-white-strong" placeholder="Username"
                  aria-describedby="basic-addon9">
              </div>
              <div class="input-group input-group-md px-2 mb-4">
                <div class="input-group-prepend">
                  <span class="input-group-text white grey-text" id="basic-addon10">2</span>
                </div>
                <input type="text" class="form-control mt-0 black-border rgba-white-strong" placeholder="Email"
                  aria-describedby="basic-addon10">
              </div>
              <div class="input-group input-group-md px-2 mb-4">
                <div class="input-group-prepend">
                  <span class="input-group-text white grey-text" id="basic-addon101">3</span>
                </div>
                <input type="text" class="form-control mt-0 black-border rgba-white-strong" placeholder="Website"
                  aria-describedby="basic-1">
              </div>

            </div>

            <div class="form-group px-2">
              <textarea class="form-control pl-3 pt-3" id="exampleFormControlTextarea1" rows="6" placeholder="Write something here..."></textarea>
            </div>

            <div class="text-center mt-4">
              <button class="btn btn-primary btn-md">Submit</button>
            </div>

          </form>
          <!-- Reply form -->

        </section>
        <!-- Reply section -->

      

Reply Form v.4 MDB Pro component

Leave a reply


        <!-- Reply section -->
        <section class="my-5">

          <!-- Leave a reply -->
          <div class="card-header border-0 font-weight-bold">Leave a reply</div>

          <!-- Reply form -->
          <form>

            <div class="d-md-flex flex-md-fill">

              <div class="md-form input-group input-group-md px-2 mb-4">
                <div class="input-group-prepend">
                  <span class="input-group-text md-addon pr-4" id="basic-addon9"><i class="fas fa-user"></i></span>
                </div>
                <input type="text" class="form-control mt-0 pl-0" placeholder="Username" aria-describedby="basic-addon9">
              </div>
              <div class="md-form input-group input-group-md px-2 mb-4">
                <div class="input-group-prepend">
                  <span class="input-group-text md-addon pr-4" id="basic-addon10"><i class="fas fa-at"></i></span>
                </div>
                <input type="text" class="form-control mt-0 pl-0" placeholder="Email" aria-describedby="basic-addon10">
              </div>
              <div class="md-form input-group input-group-md px-2 mb-4">
                <div class="input-group-prepend">
                  <span class="input-group-text md-addon pr-4" id="basic-addon101"><i class="fas fa-code"></i></span>
                </div>
                <input type="text" class="form-control mt-0 pl-0" placeholder="Website" aria-describedby="basic-1">
              </div>

            </div>

            <div class="md-form input-group mt-0 px-2">
              <div class="input-group-prepend">
                <span class="input-group-text align-items-start md-addon pr-4"><i class="fas fa-pencil-alt"></i></span>
              </div>
              <textarea class="form-control md-textarea pl-0" rows="5" placeholder="Write something here"
                aria-describedby="with-textarea"></textarea>
            </div>

            <div class="text-center mt-4">
              <button class="btn btn-default btn-rounded btn-md">Submit</button>
            </div>

          </form>
          <!-- Reply form -->

        </section>
        <!-- Reply section -->

      

Reply Form (logged in user) v.1

Leave a reply (logged in user)
avatar


        <!-- Reply section (logged in user) -->
        <section class="my-5">

          <div class="card-header border-0 font-weight-bold">Leave a reply (logged in user)</div>

          <div class="d-md-flex flex-md-fill mt-4 px-1">
            <div class="d-flex justify-content-center mr-md-5">
              <img class="card-img-100 z-depth-1 mb-4" src="https://mdbootstrap.com/img/Photos/Avatars/img (32).jpg"
                alt="avatar">
            </div>
            <textarea class="form-control pl-3 pt-3" id="exampleFormControlTextarea1" rows="6" placeholder="Write something here..."></textarea>
          </div>
          <div class="text-center mt-4">
            <button class="btn btn-primary btn-md">Submit</button>
          </div>

        </section>
        <!-- Reply section (logged in user) -->

      

Reply Form (logged in user) v.2 MDB Pro component

Leave a reply (logged in user)
avatar


        <!-- Reply section (logged in user) -->
        <section class="my-5">

          <div class="card-header border-0 font-weight-bold">Leave a reply (logged in user)</div>

          <div class="d-md-flex flex-md-fill px-1">
            <div class="d-flex justify-content-center mr-md-5 mt-md-5 mt-4">
              <img class="card-img-100 z-depth-1 rounded-circle" src="https://mdbootstrap.com/img/Photos/Avatars/img (32).jpg"
                alt="avatar">
            </div>
            <div class="md-form w-100">
              <textarea class="form-control md-textarea pt-0" id="exampleFormControlTextarea1" rows="5" placeholder="Write something here..."></textarea>
            </div>
          </div>
          <div class="text-center">
            <button class="btn btn-default btn-rounded btn-md">Submit</button>
          </div>

        </section>
        <!-- Reply section (logged in user) -->

      
Edit these docs Rate these docs

Getting started : download & setup


Download

All 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 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 5,000 components, dozens of plugins and much more cool features.

Click the button below to learn more about 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, 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!

Sign up now