web
mobile
Edit these docs Rate these docs

Modal Form

Bootstrap Modal Form

Bootstrap modal forms are displayed-on-action pop-up forms that are used for gathering data from website visitors and to register or log users.

Using them alongside valuable content might bring a lot of business value to your project.

However, you should remember that using them in a spammy manner might have a completely different outcome - a drop in UX quality and frustration of your users.

Examples of Bootstrap modal form use:

  • Email signup
  • Register modal
  • Contact form

See also: Modal Core Documentation, Modal Styles and Modal Templates.


Simple modal login



        <div class="modal fade" id="modalLoginForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
          aria-hidden="true">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header text-center">
                <h4 class="modal-title w-100 font-weight-bold">Sign in</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body mx-3">
                <div class="md-form mb-5">
                  <i class="fas fa-envelope prefix grey-text"></i>
                  <input type="email" id="defaultForm-email" class="form-control validate">
                  <label data-error="wrong" data-success="right" for="defaultForm-email">Your email</label>
                </div>

                <div class="md-form mb-4">
                  <i class="fas fa-lock prefix grey-text"></i>
                  <input type="password" id="defaultForm-pass" class="form-control validate">
                  <label data-error="wrong" data-success="right" for="defaultForm-pass">Your password</label>
                </div>

              </div>
              <div class="modal-footer d-flex justify-content-center">
                <button class="btn btn-default">Login</button>
              </div>
            </div>
          </div>
        </div>

        <div class="text-center">
          <a href="" class="btn btn-default btn-rounded mb-4" data-toggle="modal" data-target="#modalLoginForm">Launch
            Modal Login Form</a>
        </div>

      

Simple modal register



        <div class="modal fade" id="modalRegisterForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
          aria-hidden="true">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header text-center">
                <h4 class="modal-title w-100 font-weight-bold">Sign up</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body mx-3">
                <div class="md-form mb-5">
                  <i class="fas fa-user prefix grey-text"></i>
                  <input type="text" id="orangeForm-name" class="form-control validate">
                  <label data-error="wrong" data-success="right" for="orangeForm-name">Your name</label>
                </div>
                <div class="md-form mb-5">
                  <i class="fas fa-envelope prefix grey-text"></i>
                  <input type="email" id="orangeForm-email" class="form-control validate">
                  <label data-error="wrong" data-success="right" for="orangeForm-email">Your email</label>
                </div>

                <div class="md-form mb-4">
                  <i class="fas fa-lock prefix grey-text"></i>
                  <input type="password" id="orangeForm-pass" class="form-control validate">
                  <label data-error="wrong" data-success="right" for="orangeForm-pass">Your password</label>
                </div>

              </div>
              <div class="modal-footer d-flex justify-content-center">
                <button class="btn btn-deep-orange">Sign up</button>
              </div>
            </div>
          </div>
        </div>

        <div class="text-center">
          <a href="" class="btn btn-default btn-rounded mb-4" data-toggle="modal" data-target="#modalRegisterForm">Launch
            Modal Register Form</a>
        </div>

      

Simple modal subscription



        <div class="modal fade" id="modalSubscriptionForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
          aria-hidden="true">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header text-center">
                <h4 class="modal-title w-100 font-weight-bold">Subscribe</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body mx-3">
                <div class="md-form mb-5">
                  <i class="fas fa-user prefix grey-text"></i>
                  <input type="text" id="form3" class="form-control validate">
                  <label data-error="wrong" data-success="right" for="form3">Your name</label>
                </div>

                <div class="md-form mb-4">
                  <i class="fas fa-envelope prefix grey-text"></i>
                  <input type="email" id="form2" class="form-control validate">
                  <label data-error="wrong" data-success="right" for="form2">Your email</label>
                </div>

              </div>
              <div class="modal-footer d-flex justify-content-center">
                <button class="btn btn-indigo">Send <i class="fas fa-paper-plane-o ml-1"></i></button>
              </div>
            </div>
          </div>
        </div>

        <div class="text-center">
          <a href="" class="btn btn-default btn-rounded mb-4" data-toggle="modal" data-target="#modalSubscriptionForm">Launch
            Modal Subscription Form</a>
        </div>

      

Simple modal contact



        <div class="modal fade" id="modalContactForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
          aria-hidden="true">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header text-center">
                <h4 class="modal-title w-100 font-weight-bold">Write to us</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body mx-3">
                <div class="md-form mb-5">
                  <i class="fas fa-user prefix grey-text"></i>
                  <input type="text" id="form34" class="form-control validate">
                  <label data-error="wrong" data-success="right" for="form34">Your name</label>
                </div>

                <div class="md-form mb-5">
                  <i class="fas fa-envelope prefix grey-text"></i>
                  <input type="email" id="form29" class="form-control validate">
                  <label data-error="wrong" data-success="right" for="form29">Your email</label>
                </div>

                <div class="md-form mb-5">
                  <i class="fas fa-tag prefix grey-text"></i>
                  <input type="text" id="form32" class="form-control validate">
                  <label data-error="wrong" data-success="right" for="form32">Subject</label>
                </div>

                <div class="md-form">
                  <i class="fas fa-pencil prefix grey-text"></i>
                  <textarea type="text" id="form8" class="md-textarea form-control" rows="4"></textarea>
                  <label data-error="wrong" data-success="right" for="form8">Your message</label>
                </div>

              </div>
              <div class="modal-footer d-flex justify-content-center">
                <button class="btn btn-unique">Send <i class="fas fa-paper-plane-o ml-1"></i></button>
              </div>
            </div>
          </div>
        </div>

        <div class="text-center">
          <a href="" class="btn btn-default btn-rounded mb-4" data-toggle="modal" data-target="#modalContactForm">Launch
            Modal Contact Form</a>
        </div>

      

Cascading modal register / login MDB Pro component



        <!--Modal: Login / Register Form-->
        <div class="modal fade" id="modalLRForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog cascading-modal" role="document">
            <!--Content-->
            <div class="modal-content">

              <!--Modal cascading tabs-->
              <div class="modal-c-tabs">

                <!-- Nav tabs -->
                <ul class="nav nav-tabs md-tabs tabs-2 light-blue darken-3" role="tablist">
                  <li class="nav-item">
                    <a class="nav-link active" data-toggle="tab" href="#panel7" role="tab"><i class="fas fa-user mr-1"></i>
                      Login</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#panel8" role="tab"><i class="fas fa-user-plus mr-1"></i>
                      Register</a>
                  </li>
                </ul>

                <!-- Tab panels -->
                <div class="tab-content">
                  <!--Panel 7-->
                  <div class="tab-pane fade in show active" id="panel7" role="tabpanel">

                    <!--Body-->
                    <div class="modal-body mb-1">
                      <div class="md-form form-sm mb-5">
                        <i class="fas fa-envelope prefix"></i>
                        <input type="email" id="modalLRInput10" class="form-control form-control-sm validate">
                        <label data-error="wrong" data-success="right" for="modalLRInput10">Your email</label>
                      </div>

                      <div class="md-form form-sm mb-4">
                        <i class="fas fa-lock prefix"></i>
                        <input type="password" id="modalLRInput11" class="form-control form-control-sm validate">
                        <label data-error="wrong" data-success="right" for="modalLRInput11">Your password</label>
                      </div>
                      <div class="text-center mt-2">
                        <button class="btn btn-info">Log in <i class="fas fa-sign-in ml-1"></i></button>
                      </div>
                    </div>
                    <!--Footer-->
                    <div class="modal-footer">
                      <div class="options text-center text-md-right mt-1">
                        <p>Not a member? <a href="#" class="blue-text">Sign Up</a></p>
                        <p>Forgot <a href="#" class="blue-text">Password?</a></p>
                      </div>
                      <button type="button" class="btn btn-outline-info waves-effect ml-auto" data-dismiss="modal">Close</button>
                    </div>

                  </div>
                  <!--/.Panel 7-->

                  <!--Panel 8-->
                  <div class="tab-pane fade" id="panel8" role="tabpanel">

                    <!--Body-->
                    <div class="modal-body">
                      <div class="md-form form-sm mb-5">
                        <i class="fas fa-envelope prefix"></i>
                        <input type="email" id="modalLRInput12" class="form-control form-control-sm validate">
                        <label data-error="wrong" data-success="right" for="modalLRInput12">Your email</label>
                      </div>

                      <div class="md-form form-sm mb-5">
                        <i class="fas fa-lock prefix"></i>
                        <input type="password" id="modalLRInput13" class="form-control form-control-sm validate">
                        <label data-error="wrong" data-success="right" for="modalLRInput13">Your password</label>
                      </div>

                      <div class="md-form form-sm mb-4">
                        <i class="fas fa-lock prefix"></i>
                        <input type="password" id="modalLRInput14" class="form-control form-control-sm validate">
                        <label data-error="wrong" data-success="right" for="modalLRInput14">Repeat password</label>
                      </div>

                      <div class="text-center form-sm mt-2">
                        <button class="btn btn-info">Sign up <i class="fas fa-sign-in ml-1"></i></button>
                      </div>

                    </div>
                    <!--Footer-->
                    <div class="modal-footer">
                      <div class="options text-right">
                        <p class="pt-1">Already have an account? <a href="#" class="blue-text">Log In</a></p>
                      </div>
                      <button type="button" class="btn btn-outline-info waves-effect ml-auto" data-dismiss="modal">Close</button>
                    </div>
                  </div>
                  <!--/.Panel 8-->
                </div>

              </div>
            </div>
            <!--/.Content-->
          </div>
        </div>
        <!--Modal: Login / Register Form-->

        <div class="text-center">
          <a href="" class="btn btn-default btn-rounded my-3" data-toggle="modal" data-target="#modalLRForm">Launch
            Modal LogIn/Register</a>
        </div>

      

Modal with avatar



        <!--Modal: Login with Avatar Form-->
        <div class="modal fade" id="modalLoginAvatar" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
          aria-hidden="true">
          <div class="modal-dialog cascading-modal modal-avatar modal-sm" role="document">
            <!--Content-->
            <div class="modal-content">

              <!--Header-->
              <div class="modal-header">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20%281%29.jpg" alt="avatar" class="rounded-circle img-responsive">
              </div>
              <!--Body-->
              <div class="modal-body text-center mb-1">

                <h5 class="mt-1 mb-2">Maria Doe</h5>

                <div class="md-form ml-0 mr-0">
                  <input type="password" type="text" id="form29" class="form-control form-control-sm validate ml-0">
                  <label data-error="wrong" data-success="right" for="form29" class="ml-0">Enter password</label>
                </div>

                <div class="text-center mt-4">
                  <button class="btn btn-cyan mt-1">Login <i class="fas fa-sign-in ml-1"></i></button>
                </div>
              </div>

            </div>
            <!--/.Content-->
          </div>
        </div>
        <!--Modal: Login with Avatar Form-->

        <div class="text-center">
          <a href="" class="btn btn-default btn-rounded" data-toggle="modal" data-target="#modalLoginAvatar">Launch
            Modal Login with Avatar</a>
        </div>

      

Subscription modal with an orange header



        <div class="modal fade" id="orangeModalSubscription" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
          aria-hidden="true">
          <div class="modal-dialog modal-notify modal-warning" role="document">
            <!--Content-->
            <div class="modal-content">
              <!--Header-->
              <div class="modal-header text-center">
                <h4 class="modal-title white-text w-100 font-weight-bold py-2">Subscribe</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true" class="white-text">&times;</span>
                </button>
              </div>

              <!--Body-->
              <div class="modal-body">
                <div class="md-form mb-5">
                  <i class="fas fa-user prefix grey-text"></i>
                  <input type="text" id="form3" class="form-control validate">
                  <label data-error="wrong" data-success="right" for="form3">Your name</label>
                </div>

                <div class="md-form">
                  <i class="fas fa-envelope prefix grey-text"></i>
                  <input type="email" id="form2" class="form-control validate">
                  <label data-error="wrong" data-success="right" for="form2">Your email</label>
                </div>
              </div>

              <!--Footer-->
              <div class="modal-footer justify-content-center">
                <a type="button" class="btn btn-outline-warning waves-effect">Send <i class="fas fa-paper-plane-o ml-1"></i></a>
              </div>
            </div>
            <!--/.Content-->
          </div>
        </div>

        <div class="text-center">
          <a href="" class="btn btn-default btn-rounded" data-toggle="modal" data-target="#orangeModalSubscription">Launch
            modal Subscription</a>
        </div>

      


        .modal-notify .modal-header {
          border-radius: 3px 3px 0 0;
      }
      .modal-notify .modal-content {
          border-radius: 3px;
      }

      

Elegant modal login MDB Pro component



        <!-- Modal -->
        <div class="modal fade" id="elegantModalForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
          aria-hidden="true">
          <div class="modal-dialog" role="document">
            <!--Content-->
            <div class="modal-content form-elegant">
              <!--Header-->
              <div class="modal-header text-center">
                <h3 class="modal-title w-100 dark-grey-text font-weight-bold my-3" id="myModalLabel"><strong>Sign in</strong></h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <!--Body-->
              <div class="modal-body mx-4">
                <!--Body-->
                <div class="md-form mb-5">
                  <input type="email" id="Form-email1" class="form-control validate">
                  <label data-error="wrong" data-success="right" for="Form-email1">Your email</label>
                </div>

                <div class="md-form pb-3">
                  <input type="password" id="Form-pass1" class="form-control validate">
                  <label data-error="wrong" data-success="right" for="Form-pass1">Your password</label>
                  <p class="font-small blue-text d-flex justify-content-end">Forgot <a href="#" class="blue-text ml-1">
                      Password?</a></p>
                </div>

                <div class="text-center mb-3">
                  <button type="button" class="btn blue-gradient btn-block btn-rounded z-depth-1a">Sign in</button>
                </div>
                <p class="font-small dark-grey-text text-right d-flex justify-content-center mb-3 pt-2"> or Sign in
                  with:</p>

                <div class="row my-3 d-flex justify-content-center">
                  <!--Facebook-->
                  <button type="button" class="btn btn-white btn-rounded mr-md-3 z-depth-1a"><i class="fab fa-facebook-f text-center"></i></button>
                  <!--Twitter-->
                  <button type="button" class="btn btn-white btn-rounded mr-md-3 z-depth-1a"><i class="fab fa-twitter"></i></button>
                  <!--Google +-->
                  <button type="button" class="btn btn-white btn-rounded z-depth-1a"><i class="fab fa-google-plus-g"></i></button>
                </div>
              </div>
              <!--Footer-->
              <div class="modal-footer mx-5 pt-3 mb-1">
                <p class="font-small grey-text d-flex justify-content-end">Not a member? <a href="#" class="blue-text ml-1">
                    Sign Up</a></p>
              </div>
            </div>
            <!--/.Content-->
          </div>
        </div>
        <!-- Modal -->

        <div class="text-center">
          <a href="" class="btn btn-default btn-rounded" data-toggle="modal" data-target="#elegantModalForm">Launch
            modal Login Form</a>
        </div>

      


        .form-elegant .font-small {
          font-size: 0.8rem; }

      .form-elegant .z-depth-1a {
          -webkit-box-shadow: 0 2px 5px 0 rgba(55, 161, 255, 0.26), 0 4px 12px 0 rgba(121, 155, 254, 0.25);
          box-shadow: 0 2px 5px 0 rgba(55, 161, 255, 0.26), 0 4px 12px 0 rgba(121, 155, 254, 0.25); }

      .form-elegant .z-depth-1-half,
      .form-elegant .btn:hover {
          -webkit-box-shadow: 0 5px 11px 0 rgba(85, 182, 255, 0.28), 0 4px 15px 0 rgba(36, 133, 255, 0.15);
          box-shadow: 0 5px 11px 0 rgba(85, 182, 255, 0.28), 0 4px 15px 0 rgba(36, 133, 255, 0.15); }

      .form-elegant .modal-header {
          border-bottom: none; }

      .modal-dialog .form-elegant .btn .fab {
          color: #2196f3!important; }

      .form-elegant .modal-body, .form-elegant .modal-footer {
          font-weight: 400; }

      

Dark modal register MDB Pro component



        <!-- Modal -->
        <div class="modal fade" id="darkModalForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
          aria-hidden="true">
          <div class="modal-dialog form-dark" role="document">
            <!--Content-->
            <div class="modal-content card card-image" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/pricing-table%20(7).jpg');">
              <div class="text-white rgba-stylish-strong py-5 px-5 z-depth-4">
                <!--Header-->
                <div class="modal-header text-center pb-4">
                  <h3 class="modal-title w-100 white-text font-weight-bold" id="myModalLabel"><strong>SIGN</strong> <a
                      class="green-text font-weight-bold"><strong> UP</strong></a></h3>
                  <button type="button" class="close white-text" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <!--Body-->
                <div class="modal-body">
                  <!--Body-->
                  <div class="md-form mb-5">
                    <input type="email" id="Form-email5" class="form-control validate white-text">
                    <label data-error="wrong" data-success="right" for="Form-email5">Your email</label>
                  </div>

                  <div class="md-form pb-3">
                    <input type="password" id="Form-pass5" class="form-control validate white-text">
                    <label data-error="wrong" data-success="right" for="Form-pass5">Your password</label>
                    <div class="form-group mt-4">
                      <input class="form-check-input" type="checkbox" id="checkbox624">
                      <label for="checkbox624" class="white-text form-check-label">Accept the<a href="#" class="green-text font-weight-bold">
                          Terms and Conditions</a></label>
                    </div>
                  </div>

                  <!--Grid row-->
                  <div class="row d-flex align-items-center mb-4">

                    <!--Grid column-->
                    <div class="text-center mb-3 col-md-12">
                      <button type="button" class="btn btn-success btn-block btn-rounded z-depth-1">Sign up</button>
                    </div>
                    <!--Grid column-->

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

                  <!--Grid row-->
                  <div class="row">

                    <!--Grid column-->
                    <div class="col-md-12">
                      <p class="font-small white-text d-flex justify-content-end">Have an account? <a href="#" class="green-text ml-1 font-weight-bold">
                          Log in</a></p>
                    </div>
                    <!--Grid column-->

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

                </div>
              </div>
            </div>
            <!--/.Content-->
          </div>
        </div>
        <!-- Modal -->

        <div class="text-center">
          <a href="" class="btn btn-default btn-rounded" data-toggle="modal" data-target="#darkModalForm">Launch modal
            register Form</a>
        </div>

      


        .form-dark .font-small {
          font-size: 0.8rem; }

        .form-dark [type="radio"] + label,
        .form-dark [type="checkbox"] + label {
          font-size: 0.8rem; }

        .form-dark [type="checkbox"] + label:before {
          top: 2px;
          width: 15px;
          height: 15px; }

        .form-dark .md-form label {
          color: #fff; }

        .form-dark input[type=email]:focus:not([readonly]) {
          border-bottom: 1px solid #00C851;
          -webkit-box-shadow: 0 1px 0 0 #00C851;
          box-shadow: 0 1px 0 0 #00C851; }

        .form-dark input[type=email]:focus:not([readonly]) + label {
          color: #fff; }

        .form-dark input[type=password]:focus:not([readonly]) {
          border-bottom: 1px solid #00C851;
          -webkit-box-shadow: 0 1px 0 0 #00C851;
          box-shadow: 0 1px 0 0 #00C851; }

        .form-dark input[type=password]:focus:not([readonly]) + label {
          color: #fff; }

        .form-dark input[type="checkbox"] + label:before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 17px;
          height: 17px;
          z-index: 0;
          border: 1.5px solid #fff;
          border-radius: 1px;
          margin-top: 2px;
          -webkit-transition: 0.2s;
          transition: 0.2s; }

        .form-dark input[type="checkbox"]:checked + label:before {
          top: -4px;
          left: -3px;
          width: 12px;
          height: 22px;
          border-style: solid;
          border-width: 2px;
          border-color: transparent #00c851 #00c851 transparent;
          -webkit-transform: rotate(40deg);
          -ms-transform: rotate(40deg);
          transform: rotate(40deg);
          -webkit-backface-visibility: hidden;
          -webkit-transform-origin: 100% 100%;
          -ms-transform-origin: 100% 100%;
          transform-origin: 100% 100%; }

        .form-dark .modal-header {
            border-bottom: none;
        }

      
Edit these docs Rate 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 5,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!

Sign up now