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

To start working with Dynamic Steppers see "Getting Started" tab on this page.

All the steppers labeled as MDB Pro component require a simple, additional setup. Have a look at "Getting Started" tab on this page or follow our video tutorial .

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.



        <!-- 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

1 First step
2 Second step
Third step

HTML



        <!-- 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 -->

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

HTML




        <!-- 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 -->

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

Your e-mail
Step 2

Your password
Step 3

Finish!

HTML
JavaScript



        <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>



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

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

Your e-mail
Step 2

Your password
Step 3

Finish!

HTML
JavaScript



        <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>


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

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

Your e-mail
Step 2

Your password
Step 3

Finish!

HTML
JavaScript



        <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>


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

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

Email
Step 2

Your password
Step 3

Finish!

HTML
JavaScript



        <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>


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

        function someFunction21() {
        setTimeout(function () {
        $('#horizontal-stepper').nextStep();
        }, 2000);
        }

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:

HTML
JavaScript



        <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

Your e-mail
Step 2

Your password
Step 3

Finish!

HTML
JavaScript



        <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>



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

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

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

Your e-mail
Step 2

Your password
Step 3

Finish!

HTML
JavaScript



        <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>



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

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

Stepper with shadow MDB Pro component

Step 1

Your e-mail
Step 2

Your password
Step 3

Finish!

HTML
JavaScript



        <div class="z-depth-1 m-2">
          <div class="p-4">
            <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>



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

Horizontal Stepper with a long content MDB Pro component

If you would like to have long content in your horizontal stepper you have to add new class horizontal-fix to your stepper.

Step 1

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.
Button

Email
Step 2

Your password
Step 3

Finish!

HTML
CSS
JavaScript



        <ul class="stepper horizontal horizontal-fix" id="horizontal-stepper-fix">
          <li class="step active">
            <div class="step-title waves-effect waves-dark">Step 1</div>
            <div class="step-new-content">
              <div class="row">
                <!-- Card -->
                <div class="card m-3">

                  <!-- Card image -->
                  <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/images/43.jpg" alt="Card image cap">

                  <!-- Card content -->
                  <div class="card-body">

                    <!-- Title -->
                    <h4 class="card-title"><a>Card title</a></h4>
                    <!-- Text -->
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the
                      card's content.</p>
                    <!-- Button -->
                    <a href="#" class="btn btn-primary">Button</a>

                  </div>

                </div>
                <!-- Card -->
                <!-- Card -->
                <div class="card m-3">

                  <!-- Card image -->
                  <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/images/43.jpg" alt="Card image cap">

                  <!-- Card content -->
                  <div class="card-body">

                    <!-- Title -->
                    <h4 class="card-title"><a>Card title</a></h4>
                    <!-- Text -->
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the
                      card's content.</p>
                    <!-- Button -->
                    <a href="#" class="btn btn-primary">Button</a>

                  </div>

                </div>
                <!-- Card -->
              </div>
              <div class="row">
                <div class="md-form col-12 ml-auto">
                  <input id="email-horizontal-fix" type="email" class="validate form-control" required>
                  <label for="email-horizontal-fix">Email</label>
                </div>
              </div>
              <div class="step-actions">
                <button class="waves-effect waves-dark btn btn-sm btn-primary next-step" data-feedback="someFunction22">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-fix" type="password" class="validate form-control" required>
                  <label for="password-horizontal-fix">Your password</label>
                </div>
              </div>
              <div class="step-actions">
                <button class="waves-effect waves-dark btn btn-sm btn-primary next-step" data-feedback="someFunction22">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>


        ul.horizontal-fix li a {
        padding: .84rem 2.14rem;
        }


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

        function someFunction22() {
        setTimeout(function () {
        $('#horizontal-stepper-fix').nextStep();
        }, 2000);
        }

Bootstrap steppers - getting started : download & setup

Download

All the free 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

Steppers Pro Setup

After downloading and extracting MDB package, open index.html file.

Then, below the linked CSS files add Stepper file.


<!-- MDBootstrap Steppers Pro  -->
<link href="css/addons-pro/stepper.min.css" rel="stylesheet">

Next, below the linked JavaScript files add Steppers file.


<!-- MDBootstrap Steppers Pro  -->
<script type="text/javascript" src="js/addons-pro/stepper.min.js"></script>

Note:Do not forget about initializing Steppers Pro.

JavaScript


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

If you need additional help, have a look at the video tutorial below.

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