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:
<!-- 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.
<!-- 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
<!-- 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.
-
Step 1
-
Step 2
-
Step 3Finish!
<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.
-
Step 1
-
Step 2
-
Step 3Finish!
<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.
-
Step 1
-
Step 2
-
Step 3Finish!
<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.
-
Step 1
-
Step 2
-
Step 3Finish!
<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:
<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 3Finish!
<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.
-
Step 1
-
Step 2
-
Step 3Finish!
<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.
-
Step 1
-
Step 2
-
Step 3Finish!
<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 -
Step 2
-
Step 3Finish!
<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);
}