Steppers

Bootstrap Steps (stepper)

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

A 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 the "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

When you are using our basic steppers you will need to copy and paste HTML code to your HTML file and you will have a 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.

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

Paths and initialization code are below:

Show code Edit in sandbox

HTML

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

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

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

Basic horizontal steppers

You can automatically initialize the stepper component using .stepper and .stepper-horizontal classes.

Show code Edit in sandbox

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="fas fa-exclamation"></i></span>
          <span class="label">Third step</span>
        </a>
      </li>

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

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

Basic vertical steppers

Add .stepper-vertical class to use the vertical view.

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

Show code Edit in sandbox

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="fas fa-exclamation"></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

A Linear stepper is a component which is very commonly used.

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

We are using Validate jQuery Plugin, so every step will be analysed to ensure compatibility with entered data.

Show code Edit in sandbox

HTML

<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

With a Non-linear stepper you can navigate freely between every step. That said, if you want check validation you have to use buttons to do that.

Show code Edit in sandbox

HTML

<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

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

Show code Edit in sandbox

HTML

<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

A 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 the resolution is smaller than 992px, a horizontal stepper is changed to a vertical stepper.

Show code Edit in sandbox

HTML

<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 a data-feedback attribute in your next button.

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

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

Show code Edit in sandbox

HTML

<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);
}

Show code Edit in sandbox

HTML

<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 may 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's behavior.

Show code Edit in sandbox

HTML

<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="validationFunction">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="validationFunction">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

Stepper can also be used with shadow to add depth to an element on a page.

Show code Edit in sandbox

HTML

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

Show code Edit in sandbox

HTML

<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.webp" 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.webp" 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>0
            <!-- 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);
}