Rate this docs

Steppers

Bootstrap Steps (stepper)

Bootstrap stepper is a component that displays content as a process with defined by user milestones. Following steps are separated and connected by buttons.

This is a great solution for a variety of registration forms, where you don't want to scare the user with loads of fields and questions.

Stepper can be aligned vertically as well as horizontally.

Examples of Bootstrap steps use:

  • Registration form
  • Payment gateway
  • Tutorial with steps

See the following Bootstrap stepper examples:


How it works

Older version MDB PRO

PRO steppers are available from 4.5.12 version. This steppers will not work with older version.

When you are use our basic steppers you need to copy and paste code HTML to your HTML file and you will have static horizontal or vertical stepper.

If you want to use our PRO version of steppers you have to load JavaScript code and CSS styles. We have 2 types of files like minified and unminified.

CSS code of steppers is located in css/addons-pro. JavaScript code of steppers is located in js/addons-pro.

Paths and initialization code:



        <!-- Stepper CSS -->
        <link href="css/addons-pro/stepper.css" rel="stylesheet">
        <!-- Stepper CSS - minified-->
        <link href="css/addons-pro/stepper.min.css" rel="stylesheet">

        <!-- Stepper JavaScript -->
        <script type="text/javascript" src="js/addons-pro/stepper.js"></script>
        <!-- Stepper JavaScript - minified -->
        <script type="text/javascript" src="js/addons-pro/stepper.min.js"></script>
      


        $(document).ready(function () {
         $('.stepper').mdbStepper();
        })

      

Basic horizontal steppers


        <div class="card">
          <div class="card-body">

            <!-- Horizontal Steppers -->
            <div class="row">
              <div class="col-md-12">

                <!-- Stepers Wrapper -->
                <ul class="stepper stepper-horizontal">

                  <!-- First Step -->
                  <li class="completed">
                    <a href="#!">
                      <span class="circle">1</span>
                      <span class="label">First step</span>
                    </a>
                  </li>

                  <!-- Second Step -->
                  <li class="active">
                    <a href="#!">
                      <span class="circle">2</span>
                      <span class="label">Second step</span>
                    </a>
                  </li>

                  <!-- Third Step -->
                  <li class="warning">
                    <a href="#!">
                      <span class="circle"><i class="fa fa-warning"></i></span>
                      <span class="label">Third step</span>
                    </a>
                  </li>

                </ul>
                <!-- /.Stepers Wrapper -->

              </div>
            </div>
            <!-- /.Horizontal Steppers -->

          </div>
        </div>
      

Basic vertical steppers

  • 1 First step
  • 2 Second step

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse cupiditate voluptate facere iusto quaerat vitae excepturi, accusantium ut aliquam repellat atque nesciunt nostrum similique. Inventore nostrum ut, nobis porro sapiente.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore error excepturi veniam nemo repellendus, distinctio soluta vitae at sit saepe. Optio eaque quia excepturi adipisci pariatur totam, atque odit fugiat.

    Deserunt voluptatem illum quae nisi soluta eum perferendis nesciunt asperiores tempore saepe reiciendis, vero quod a dolor corporis natus qui magni quas fuga rem excepturi laboriosam. Quisquam expedita ab fugiat.

  • Third step
  • 4 Fourth step


        <div class="card m-3">
          <div class="card-body">
            <!-- Vertical Steppers -->
            <div class="row mt-1">
              <div class="col-md-12">

                <!-- Stepers Wrapper -->
                <ul class="stepper stepper-vertical">

                  <!-- First Step -->
                  <li class="completed">
                    <a href="#!">
                      <span class="circle">1</span>
                      <span class="label">First step</span>
                    </a>
                  </li>

                  <!-- Second Step -->
                  <li class="active">

                    <!--Section Title -->
                    <a href="#!">
                      <span class="circle">2</span>
                      <span class="label">Second step</span>
                    </a>

                    <!-- Section Description -->
                    <div class="step-content grey lighten-3">
                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse cupiditate voluptate facere
                        iusto
                        quaerat
                        vitae excepturi, accusantium ut aliquam repellat atque nesciunt nostrum similique. Inventore
                        nostrum
                        ut,
                        nobis porro sapiente.</p>
                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore error excepturi veniam nemo
                        repellendus, distinctio soluta vitae at sit saepe. Optio eaque quia excepturi adipisci pariatur
                        totam,
                        atque odit fugiat.</p>
                      <p>Deserunt voluptatem illum quae nisi soluta eum perferendis nesciunt asperiores tempore saepe
                        reiciendis,
                        vero quod a dolor corporis natus qui magni quas fuga rem excepturi laboriosam. Quisquam
                        expedita ab
                        fugiat.</p>
                    </div>
                  </li>

                  <!-- Third Step -->
                  <li class="warning">
                    <a href="#!">
                      <span class="circle"><i class="fa fa-warning"></i></span>
                      <span class="label">Third step</span>
                    </a>
                  </li>

                  <!-- Fourth Step -->
                  <li>
                    <a href="#!">
                      <span class="circle">4</span>
                      <span class="label">Fourth step</span>
                    </a>
                  </li>

                </ul>
                <!-- /.Stepers Wrapper -->

              </div>
            </div>

            <!-- Steppers Navigation -->
            <div class="row mt-1">
              <div class="col-md-12 text-right">
                <button class="btn btn-flat btn-sm">Cancel</button>
                <button class="btn btn-primary btn-sm">Next</button>
              </div>
            </div>
            <!-- /.Vertical Steppers -->
          </div>
        </div>

      

Linear Stepper MDB Pro component

Linear stepper is a compontent which is the most common.

When you are working with this stepper you have to put a correct values to do more steps.

We are using Validiate Jquery Plugin every step will be analyse with compatibility with entered data.

  • Step 1
  • Step 2
  • Step 3
    Finish!


        <div class="card">
          <div class="card-body">
            <ul class="stepper linear">
              <li class="step active">
                <div data-step-label="Type something" class="step-title waves-effect waves-dark">Step 1</div>
                <div class="step-new-content">
                  <div class="row">
                    <div class="md-form col-12 ml-auto">
                      <input id="email-linear" type="email" class="form-control validate" required>
                      <label for="email-linear">Your e-mail</label>
                    </div>
                  </div>
                  <div class="step-actions">
                    <button class="waves-effect waves-dark btn btn-sm btn-primary next-step">CONTINUE</button>
                  </div>
                </div>
              </li>
              <li class="step">
                <div class="step-title waves-effect waves-dark">Step 2</div>
                <div class="step-new-content">
                  <div class="row">
                    <div class="md-form col-12 ml-auto">
                      <input id="password-linear" type="password" class="form-control validate" required>
                      <label for="password-linear">Your password</label>
                    </div>
                  </div>
                  <div class="step-actions">
                    <button class="waves-effect waves-dark btn btn-sm btn-primary next-step">CONTINUE</button>
                    <button class="waves-effect waves-dark btn btn-sm btn-secondary previous-step">BACK</button>
                  </div>
                </div>
              </li>
              <li class="step">
                <div class="step-title waves-effect waves-dark">Step 3</div>
                <div class="step-new-content">
                  Finish!
                  <div class="step-actions">
                    <button class="waves-effect waves-dark btn btn-sm btn-primary m-0 mt-4" type="button">SUBMIT</button>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>

      

Non-linear Stepper MDB Pro component

Non linear stepper you can navigate freely between every steps. If you want check validation you have to use buttons to do that.

  • Step 1
  • Step 2
  • Step 3
    Finish!


        <div class="card m-3">
          <div class="card-body">
            <ul class="stepper">
              <li class="step active">
                <div data-step-label="Just add a data-step-label!" class="step-title waves-effect waves-dark">Step 1</div>
                <div class="step-new-content">
                  <div class="row">
                    <div class="md-form col-12 ml-auto">
                      <input id="email-non" type="email" class="form-control validate" required>
                      <label for="email-non" class="ml-auto">Your e-mail</label>
                    </div>
                  </div>
                  <div class="step-actions">
                    <button class="waves-effect waves-dark btn btn-sm btn-primary next-step">CONTINUE</button>
                  </div>
                </div>
              </li>
              <li class="step">
                <div class="step-title waves-effect waves-dark">Step 2</div>
                <div class="step-new-content">
                  <div class="row">
                    <div class="md-form col-12 ml-auto">
                      <input id="password-non" type="password" class="form-control validate" required>
                      <label for="password-non">Your password</label>
                    </div>
                  </div>
                  <div class="step-actions">
                    <button class="waves-effect waves-dark btn btn-sm btn-primary next-step">CONTINUE</button>
                    <button class="waves-effect waves-dark btn btn-sm btn-secondary previous-step">BACK</button>
                  </div>
                </div>
              </li>
              <li class="step">
                <div class="step-title waves-effect waves-dark">Step 3</div>
                <div class="step-new-content">
                  Finish!
                  <div class="step-actions">
                    <button class="waves-effect waves-dark btn btn-sm btn-primary m-0 mt-4" type="button">SUBMIT</button>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>

      

Parallel Stepper MDB Pro component

Parallel stepper is a combination with linear and non-linear stepper. You can freely between every step and also every steps will be check by custom validation and as well as regular validation entered data with plugin.

  • Step 1
  • Step 2
  • Step 3
    Finish!


        <div class="card">
          <div class="card-body">
            <ul class="stepper parallel">
              <li class="step active">
                <div data-step-label="Just add a data-step-label!" class="step-title waves-effect waves-dark">Step 1</div>
                <div class="step-new-content">
                  <div class="row">
                    <div class="md-form col-12 ml-auto">
                      <input id="email-parallel" name="email" type="email" class="form-control validate" required>
                      <label for="email-parallel">Your e-mail</label>
                    </div>
                  </div>
                  <div class="step-actions">
                    <button class="waves-effect waves-dark btn btn-sm btn-primary next-step">CONTINUE</button>
                  </div>
                </div>
              </li>
              <li class="step">
                <div class="step-title waves-effect waves-dark">Step 2</div>
                <div class="step-new-content">
                  <div class="row">
                    <div class="md-form col-12 ml-auto">
                      <input id="password-parallel" type="password" class="form-control validate" required>
                      <label for="password-parallel">Your password</label>
                    </div>
                  </div>
                  <div class="step-actions">
                    <button class="waves-effect waves-dark btn-sm btn btn-primary next-step">CONTINUE</button>
                    <button class="waves-effect waves-dark btn-sm btn btn-secondary previous-step">BACK</button>
                  </div>
                </div>
              </li>
              <li class="step">
                <div class="step-title waves-effect waves-dark">Step 3</div>
                <div class="step-new-content">
                  Finish!
                  <div class="step-actions">
                    <button class="waves-effect waves-dark btn-sm  btn btn-primary m-0 mt-4" type="button">SUBMIT</button>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>

      

Horizontal Stepper MDB Pro component

Horizontal stepper is a stepper with a horizontal orientation. If you want use it you need to add class horizontal to your main ul.

Horizontal steppers are fully responsive. When the size of resolution is smaller than 992px, horizontal stepper is changing to vertical stepper.

  • Step 1
  • Step 2
  • Step 3
    Finish!


        <div class="card">
          <div class="card-body">
            <ul class="stepper horizontal" id="horizontal-stepper">
              <li class="step active">
                <div class="step-title waves-effect waves-dark">Step 1</div>
                <div class="step-new-content">
                  <div class="row">
                    <div class="md-form col-12 ml-auto">
                      <input id="email-horizontal" type="email" class="validate form-control" required>
                      <label for="email-horizontal">Email</label>
                    </div>
                  </div>
                  <div class="step-actions">
                    <button class="waves-effect waves-dark btn btn-sm btn-primary next-step" data-feedback="someFunction21">CONTINUE</button>
                  </div>
                </div>
              </li>
              <li class="step">
                <div class="step-title waves-effect waves-dark">Step 2</div>
                <div class="step-new-content">
                  <div class="row">
                    <div class="md-form col-12 ml-auto">
                      <input id="password-horizontal" type="password" class="validate form-control" required>
                      <label for="password-horizontal">Your password</label>
                    </div>
                  </div>
                  <div class="step-actions">
                    <button class="waves-effect waves-dark btn btn-sm btn-primary next-step" data-feedback="someFunction21">CONTINUE</button>
                    <button class="waves-effect waves-dark btn btn-sm btn-secondary previous-step">BACK</button>
                  </div>
                </div>
              </li>
              <li class="step">
                <div class="step-title waves-effect waves-dark">Step 3</div>
                <div class="step-new-content">
                  Finish!
                  <div class="step-actions">
                    <button class="waves-effect waves-dark btn-sm btn btn-primary m-0 mt-4" type="button">SUBMIT</button>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>

      

Feedback Step MDB Pro component

If you want, for example, to check if an e-mail exists in your DB, you can define a feedback function with data-feedback attribute in your next button.

When the user try to move forward, a loading screen will overlay the active step until you trigger .nextStep manually.

Also if you want have validation you have to add data-feedback code to your button a JS code to your script tag or JS file:



        <div class="step-actions">
          <button class="btn btn-primary next-step" data-feedback="someFunction">CONTINUE</button>
        </div>
      


        function someFunction() {
        setTimeout(function () {
        $('#id-your-stepper').nextStep();
        }, 2000);
        }

      
  • Step 1
  • Step 2
  • Step 3
    Finish!


        <div class="card">
          <div class="card-body">
            <ul class="stepper" id="feedback-step">
              <li class="step active">
                <div data-step-label="It's just a second..." class="step-title waves-effect waves-dark">Step 1</div>
                <div class="step-new-content">
                  <div class="row">
                    <div class="md-form col-12 ml-auto">
                      <input id="email-feedback" type="email" class="validate form-control" required>
                      <label for="email-feedback">Your e-mail</label>
                    </div>
                  </div>
                  <div class="step-actions">
                    <button class="waves-effect waves-dark btn btn-sm btn-primary next-step" data-feedback="someFunction">CONTINUE</button>
                  </div>
                </div>
              </li>
              <li class="step">
                <div class="step-title waves-effect waves-dark">Step 2</div>
                <div class="step-new-content">
                  <div class="row">
                    <div class="md-form col-12 ml-auto">
                      <input id="password-feedback" type="password" class="form-control validate" required>
                      <label for="password-feedback">Your password</label>
                    </div>
                  </div>
                  <div class="step-actions">
                    <button class="waves-effect waves-dark btn btn-sm btn-primary next-step" data-feedback="someFunction">CONTINUE</button>
                    <button class="waves-effect waves-dark btn btn-sm btn-secondary previous-step">BACK</button>
                  </div>
                </div>
              </li>
              <li class="step">
                <div class="step-title waves-effect waves-dark">Step 3</div>
                <div class="step-new-content">
                  Finish!
                  <div class="step-actions">
                    <button class="waves-effect waves-dark btn btn-sm btn-primary m-0 mt-4" type="button">SUBMIT</button>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>

      


        function someFunction() {
        setTimeout(function () {
        $('#feedback-step').nextStep();
        }, 2000);
        }

      

Validation Step MDB Pro component

This function is mainly focused when using the Parallel Stepper. After checking the previous steps, you can add your own custom validation if jQuery validation is not enough.

After adding the HTML tag data-validator, the given function will be executed and it is expected to return a logical value. If the value is not a boolean value, unexpected behavior will most likely occur.

Tip: If you plan to use both custom validation and feedback, use the custom validation feature to validate and the feedback function to trigger the next step behavior.

  • Step 1
  • Step 2
  • Step 3
    Finish!


        <div class="card">
          <div class="card-body">
            <ul class="stepper parallel" id="custom-validation">
              <li class="step active">
                <div class="step-title waves-effect waves-dark">Step 1</div>
                <div class="step-new-content">
                  <div class="row">
                    <div class="md-form col-12 ml-auto">
                      <input id="email-validation" type="email" class="validate form-control" placeholder="This field is not required">
                      <label for="email-validation">Your e-mail</label>
                    </div>
                  </div>
                  <div class="step-actions">
                    <button class="waves-effect waves-dark btn btn-sm btn-primary next-step" data-feedback="someFunction1">CONTINUE</button>
                  </div>
                </div>
              </li>
              <li class="step">
                <div class="step-title waves-effect waves-dark">Step 2</div>
                <div class="step-new-content">
                  <div class="row">
                    <div class="md-form col-12 ml-auto">
                      <input id="password-validation" type="password" class="validate form-control" required>
                      <label for="password-validation">Your password</label>
                    </div>
                  </div>
                  <div class="step-actions">
                    <button class="waves-effect waves-dark btn btn-sm btn-primary next-step" data-feedback="someFunction1">CONTINUE</button>
                    <button class="waves-effect waves-dark btn btn-sm btn-secondary previous-step">BACK</button>
                  </div>
                </div>
              </li>
              <li class="step">
                <div class="step-title waves-effect waves-dark">Step 3</div>
                <div class="step-new-content">
                  Finish!
                  <div class="step-actions">
                    <button class="waves-effect waves-dark btn btn-sm btn-primary m-0 mt-4" type="button">SUBMIT</button>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>

      


        function validationFunction() {
        setTimeout(function () {
        $('#custom-validation').nextStep();
        }, 1600);
        }
        function someTrueFunction() {
        return true;
        }

      

Getting started : download & setup


Download

All the components and features are part of MDBootstrap package.

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

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

MDBootstrap Download MDBootstrap About

MDB Pro

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

Click the button below to learn more about MDBbootstrap Pro package

MDBootstrap Pro

Tutorials

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

5 min Quick Start Full Tutorial

Compilation

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

Map of dependencies of SCSS files in MDBootstrap:


    Legend:

    '-->' means 'required'

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

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

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

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

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

  

Map of dependencies of JavaScript modules in MDBootstrap:


    Legend:

    '-->' means 'required'

    All files require jQuery and bootstrap.js

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

Compilation & Customization tutorial

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

Compilation & Customization tutorial

Integrations with Angular, React or Vue

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

About MDB Angular About MDB React About MDB Vue