We are using BS Stepper which is a powerful stepper for bootstrap.
Read the official BS Stepper Documentation for a full list of instructions and other options.
In order to use BS Stepper on your page, It is required to include the following vendors css in the "Vendors CSS" area from the page's header:
<link rel="stylesheet" href="assets/vendor/libs/bs-stepper/bs-stepper.css" />Include the following vendors script in the "Vendors JS" area from the page's footer:
<script src="assets/vendor/libs/bs-stepper/bs-stepper.js" />Horizontal
Using steps is really simple all you have to do is initialize it like this: new Stepper(YOUR_ELEMENT, {...options});. Horizontal is default orientation of the wizard.
<div class="bs-stepper wizard-numbered">
<div class="bs-stepper-header">
<div class="step" data-target="#account-details">
<button type="button" class="step-trigger">
<span class="bs-stepper-circle"><i class="ri-check-line"></i></span>
<span class="bs-stepper-label">
<span class="bs-stepper-number">01</span>
<span class="d-flex flex-column gap-1 ms-2">
<span class="bs-stepper-title">Account Details</span>
<span class="bs-stepper-subtitle">Setup Account Details</span>
</span>
</span>
</button>
</div>
<div class="line"></div>
<div class="step" data-target="#personal-info">
<button type="button" class="step-trigger">
<span class="bs-stepper-circle"><i class="ri-check-line"></i></span>
<span class="bs-stepper-label">
<span class="bs-stepper-number">02</span>
<span class="d-flex flex-column gap-1 ms-2">
<span class="bs-stepper-title">Personal Info</span>
<span class="bs-stepper-subtitle">Add personal info</span>
</span>
</span>
</button>
</div>
<div class="line"></div>
<div class="step" data-target="#social-links">
<button type="button" class="step-trigger">
<span class="bs-stepper-circle"><i class="ri-check-line"></i></span>
<span class="bs-stepper-label">
<span class="bs-stepper-number">03</span>
<span class="d-flex flex-column gap-1 ms-2">
<span class="bs-stepper-title">Social Links</span>
<span class="bs-stepper-subtitle">Add social links</span>
</span>
</span>
</button>
</div>
</div>
<div class="bs-stepper-content">
<form onSubmit="return false">
<!-- Account Details -->
<div id="account-details" class="content">
<div class="content-header mb-4">
<h6 class="mb-0">Account Details</h6>
<small>Enter Your Account Details.</small>
</div>
<div class="row g-5">
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<input type="text" id="username" class="form-control" placeholder="johndoe" />
<label for="username">Username</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<input type="email" id="email" class="form-control" placeholder="john.doe@email.com" aria-label="john.doe" />
<label for="email">Email</label>
</div>
</div>
<div class="col-sm-6 form-password-toggle">
<div class="input-group input-group-merge">
<div class="form-floating form-floating-outline">
<input type="password" id="password" class="form-control" placeholder="············" aria-describedby="password2" />
<label for="password">Password</label>
</div>
<span class="input-group-text cursor-pointer" id="password2"><i class="ri-eye-off-line"></i></span>
</div>
</div>
<div class="col-sm-6 form-password-toggle">
<div class="input-group input-group-merge">
<div class="form-floating form-floating-outline">
<input type="password" id="confirm-password" class="form-control" placeholder="············" aria-describedby="confirm-password2" />
<label for="confirm-password">Confirm Password</label>
</div>
<span class="input-group-text cursor-pointer" id="confirm-password2"><i class="ri-eye-off-line"></i></span>
</div>
</div>
<div class="col-12 d-flex justify-content-between">
<button class="btn btn-outline-secondary btn-prev" disabled> <i class="ri-arrow-left-line me-sm-1 me-0"></i>
<span class="align-middle d-sm-inline-block d-none">Previous</span>
</button>
<button class="btn btn-primary btn-next"> <span class="align-middle d-sm-inline-block d-none me-sm-1">Next</span> <i class="ri-arrow-right-line"></i></button>
</div>
</div>
</div>
<!-- Personal Info -->
<div id="personal-info" class="content">
<div class="content-header mb-4">
<h6 class="mb-0">Personal Info</h6>
<small>Enter Your Personal Info.</small>
</div>
<div class="row g-5">
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<input type="text" id="first-name" class="form-control" placeholder="John" />
<label for="first-name">First Name</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<input type="text" id="last-name" class="form-control" placeholder="Doe" />
<label for="last-name">Last Name</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<select class="select2" id="country">
<option label=" "></option>
<option>UK</option>
<option>USA</option>
<option>Spain</option>
<option>France</option>
<option>Italy</option>
<option>Australia</option>
</select>
<label for="country">Country</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<select class="selectpicker w-auto" id="language" data-style="btn-transparent" data-tick-icon="ri-check-line text-white" multiple>
<option>English</option>
<option>French</option>
<option>Spanish</option>
</select>
<label for="language">Language</label>
</div>
</div>
<div class="col-12 d-flex justify-content-between">
<button class="btn btn-outline-secondary btn-prev"> <i class="ri-arrow-left-line me-sm-1 me-0"></i>
<span class="align-middle d-sm-inline-block d-none">Previous</span>
</button>
<button class="btn btn-primary btn-next"> <span class="align-middle d-sm-inline-block d-none me-sm-1">Next</span> <i class="ri-arrow-right-line"></i></button>
</div>
</div>
</div>
<!-- Social Links -->
<div id="social-links" class="content">
<div class="content-header mb-4">
<h6 class="mb-0">Social Links</h6>
<small>Enter Your Social Links.</small>
</div>
<div class="row g-5">
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<input type="text" id="twitter" class="form-control" placeholder="https://twitter.com/abc" />
<label for="twitter">Twitter</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<input type="text" id="facebook" class="form-control" placeholder="https://facebook.com/abc" />
<label for="facebook">Facebook</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<input type="text" id="google" class="form-control" placeholder="https://plus.google.com/abc" />
<label for="google">Google+</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<input type="text" id="linkedin" class="form-control" placeholder="https://linkedin.com/abc" />
<label for="linkedin">LinkedIn</label>
</div>
</div>
<div class="col-12 d-flex justify-content-between">
<button class="btn btn-outline-secondary btn-prev"> <i class="ri-arrow-left-line me-sm-1 me-0"></i>
<span class="align-middle d-sm-inline-block d-none">Previous</span>
</button>
<button class="btn btn-primary btn-submit">Submit</button>
</div>
</div>
</div>
</form>
</div>
</div>const wizardNumbered = document.querySelector(".wizard-numbered");
if (typeof wizardNumbered !== undefined && wizardNumbered !== null) {
const wizardNumberedBtnNextList = [].slice.call(wizardNumbered.querySelectorAll('.btn-next')),
wizardNumberedBtnPrevList = [].slice.call(wizardNumbered.querySelectorAll('.btn-prev')),
wizardNumberedBtnSubmit = wizardNumbered.querySelector('.btn-submit');
const numberedStepper = new Stepper(wizardNumbered, {
linear: false
});
if (wizardNumberedBtnNextList) {
wizardNumberedBtnNextList.forEach(wizardNumberedBtnNext => {
wizardNumberedBtnNext.addEventListener('click', event => {
numberedStepper.next();
});
});
}
if (wizardNumberedBtnPrevList) {
wizardNumberedBtnPrevList.forEach(wizardNumberedBtnPrev => {
wizardNumberedBtnPrev.addEventListener('click', event => {
numberedStepper.previous();
});
});
}
if (wizardNumberedBtnSubmit) {
wizardNumberedBtnSubmit.addEventListener('click', event => {
alert('Submitted..!!');
});
}
}
Vertical
Use class .vertical to create a vertical wizard.
<div class="bs-stepper wizard-vertical vertical">
<div class="bs-stepper-header gap-lg-2">
<div class="step" data-target="#account-details-1">
<button type="button" class="step-trigger">
<span class="bs-stepper-circle"><i class="ri-check-line"></i></span>
<span class="bs-stepper-label">
<span class="bs-stepper-number">01</span>
<span class="d-flex flex-column gap-1 ms-2">
<span class="bs-stepper-title">Account Details</span>
<span class="bs-stepper-subtitle">Setup Account Details</span>
</span>
</span>
</button>
</div>
<div class="line"></div>
<div class="step" data-target="#personal-info-1">
<button type="button" class="step-trigger">
<span class="bs-stepper-circle"><i class="ri-check-line"></i></span>
<span class="bs-stepper-label">
<span class="bs-stepper-number">02</span>
<span class="d-flex flex-column gap-1 ms-2">
<span class="bs-stepper-title">Personal Info</span>
<span class="bs-stepper-subtitle">Add personal info</span>
</span>
</span>
</button>
</div>
<div class="line"></div>
<div class="step" data-target="#social-links-1">
<button type="button" class="step-trigger">
<span class="bs-stepper-circle"><i class="ri-check-line"></i></span>
<span class="bs-stepper-label">
<span class="bs-stepper-number">03</span>
<span class="d-flex flex-column gap-1 ms-2">
<span class="bs-stepper-title">Social Links</span>
<span class="bs-stepper-subtitle">Add social links</span>
</span>
</span>
</button>
</div>
</div>
<div class="bs-stepper-content">
<form onSubmit="return false">
<!-- Account Details -->
<div id="account-details-1" class="content">
<div class="content-header mb-4">
<h6 class="mb-0">Account Details</h6>
<small>Enter Your Account Details.</small>
</div>
<div class="row g-5">
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<input type="text" id="username-vertical" class="form-control" placeholder="johndoe" />
<label for="username-vertical">Username</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<input type="email" id="email-vertical" class="form-control" placeholder="john.doe@email.com" aria-label="john.doe" />
<label for="email-vertical">Email</label>
</div>
</div>
<div class="col-sm-6 form-password-toggle">
<div class="input-group input-group-merge">
<div class="form-floating form-floating-outline">
<input type="password" id="password-vertical" class="form-control" placeholder="············" aria-describedby="password2-vertical" />
<label for="password-vertical">Password</label>
</div>
<span class="input-group-text cursor-pointer" id="password2-vertical"><i class="ri-eye-off-line"></i></span>
</div>
</div>
<div class="col-sm-6 form-password-toggle">
<div class="input-group input-group-merge">
<div class="form-floating form-floating-outline">
<input type="password" id="confirm-password-vertical" class="form-control" placeholder="············" aria-describedby="confirm-password-vertical2" />
<label for="confirm-password-vertical">Confirm Password</label>
</div>
<span class="input-group-text cursor-pointer" id="confirm-password-vertical2"><i class="ri-eye-off-line"></i></span>
</div>
</div>
<div class="col-12 d-flex justify-content-between">
<button class="btn btn-outline-secondary btn-prev" disabled> <i class="ri-arrow-left-line me-sm-1 me-0"></i>
<span class="align-middle d-sm-inline-block d-none">Previous</span>
</button>
<button class="btn btn-primary btn-next"> <span class="align-middle d-sm-inline-block d-none me-sm-1">Next</span> <i class="ri-arrow-right-line"></i></button>
</div>
</div>
</div>
<!-- Personal Info -->
<div id="personal-info-1" class="content">
<div class="content-header mb-4">
<h6 class="mb-0">Personal Info</h6>
<small>Enter Your Personal Info.</small>
</div>
<div class="row g-5">
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<input type="text" id="first-name-vertical" class="form-control" placeholder="John" />
<label for="first-name-vertical">First Name</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<input type="text" id="last-name-vertical" class="form-control" placeholder="Doe" />
<label for="last-name-vertical">Last Name</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<select class="select2" id="country-vertical">
<option label=" "></option>
<option>UK</option>
<option>USA</option>
<option>Spain</option>
<option>France</option>
<option>Italy</option>
<option>Australia</option>
</select>
<label for="country-vertical">Country</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<select class="selectpicker w-auto" id="language-vertical" data-style="btn-transparent" data-tick-icon="ri-check-line text-white" multiple>
<option>English</option>
<option>French</option>
<option>Spanish</option>
</select>
<label for="language-vertical">Language</label>
</div>
</div>
<div class="col-12 d-flex justify-content-between">
<button class="btn btn-outline-secondary btn-prev"> <i class="ri-arrow-left-line me-sm-1 me-0"></i>
<span class="align-middle d-sm-inline-block d-none">Previous</span>
</button>
<button class="btn btn-primary btn-next"> <span class="align-middle d-sm-inline-block d-none me-sm-1">Next</span> <i class="ri-arrow-right-line"></i></button>
</div>
</div>
</div>
<!-- Social Links -->
<div id="social-links-1" class="content">
<div class="content-header mb-4">
<h6 class="mb-0">Social Links</h6>
<small>Enter Your Social Links.</small>
</div>
<div class="row g-5">
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<input type="text" id="twitter-vertical" class="form-control" placeholder="https://twitter.com/abc" />
<label for="twitter-vertical">Twitter</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<input type="text" id="facebook-vertical" class="form-control" placeholder="https://facebook.com/abc" />
<label for="facebook-vertical">Facebook</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<input type="text" id="google-vertical" class="form-control" placeholder="https://plus.google.com/abc" />
<label for="google-vertical">Google+</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<input type="text" id="linkedin-vertical" class="form-control" placeholder="https://linkedin.com/abc" />
<label for="linkedin-vertical">LinkedIn</label>
</div>
</div>
<div class="col-12 d-flex justify-content-between">
<button class="btn btn-outline-secondary btn-prev"> <i class="ri-arrow-left-line me-sm-1 me-0"></i>
<span class="align-middle d-sm-inline-block d-none">Previous</span>
</button>
<button class="btn btn-primary btn-submit">Submit</button>
</div>
</div>
</div>
</form>
</div>
</div>const wizardVertical = document.querySelector(".wizard-vertical");
if (typeof wizardVertical !== undefined && wizardVertical !== null) {
const wizardVerticalBtnNextList = [].slice.call(wizardVertical.querySelectorAll('.btn-next')),
wizardVerticalBtnPrevList = [].slice.call(wizardVertical.querySelectorAll('.btn-prev')),
wizardVerticalBtnSubmit = wizardVertical.querySelector('.btn-submit');
const numberedVerticalStepper = new Stepper(wizardVertical, {
linear: false
});
if (wizardVerticalBtnNextList) {
wizardVerticalBtnNextList.forEach(wizardVerticalBtnNext => {
wizardVerticalBtnNext.addEventListener('click', event => {
numberedVerticalStepper.next();
});
});
}
if (wizardVerticalBtnPrevList) {
wizardVerticalBtnPrevList.forEach(wizardVerticalBtnPrev => {
wizardVerticalBtnPrev.addEventListener('click', event => {
numberedVerticalStepper.previous();
});
});
}
if (wizardVerticalBtnSubmit) {
wizardVerticalBtnSubmit.addEventListener('click', event => {
alert('Submitted..!!');
});
}
}Horizontal icons
Use class .wizard-icons to create a wizard with icons. Refer example below for more info.
<div class="bs-stepper wizard-icons wizard-icons-example mt-2">
<div class="bs-stepper-header">
<div class="step" data-target="#account-details">
<button type="button" class="step-trigger">
<span class="bs-stepper-icon">
<svg viewBox="0 0 54 54">
<use xlink:href='assets/svg/icons/form-wizard-account.svg#wizardAccount'></use>
</svg>
</span>
<span class="bs-stepper-label">Account Details</span>
</button>
</div>
<div class="line">
<i class="ri-arrow-right-s-line"></i>
</div>
<div class="step" data-target="#personal-info-icon">
<button type="button" class="step-trigger">
<span class="bs-stepper-icon">
<svg viewBox="0 0 58 54">
<use xlink:href='assets/svg/icons/form-wizard-personal.svg#wizardPersonal'></use>
</svg>
</span>
<span class="bs-stepper-label">Personal Info</span>
</button>
</div>
<div class="line">
<i class="ri-arrow-right-s-line"></i>
</div>
<div class="step" data-target="#address">
<button type="button" class="step-trigger">
<span class="bs-stepper-icon">
<svg viewBox="0 0 54 54">
<use xlink:href='assets/svg/icons/form-wizard-address.svg#wizardAddress'></use>
</svg>
</span>
<span class="bs-stepper-label">Address</span>
</button>
</div>
<div class="line">
<i class="ri-arrow-right-s-line"></i>
</div>
<div class="step" data-target="#social-links">
<button type="button" class="step-trigger">
<span class="bs-stepper-icon">
<svg viewBox="0 0 54 54">
<use xlink:href='assets/svg/icons/form-wizard-social-link.svg#wizardSocialLink'></use>
</svg>
</span>
<span class="bs-stepper-label">Social Links</span>
</button>
</div>
<div class="line">
<i class="ri-arrow-right-s-line"></i>
</div>
<div class="step" data-target="#review-submit">
<button type="button" class="step-trigger">
<span class="bs-stepper-icon">
<svg viewBox="0 0 54 54">
<use xlink:href='assets/svg/icons/form-wizard-submit.svg#wizardSubmit'></use>
</svg>
</span>
<span class="bs-stepper-label">Review & Submit</span>
</button>
</div>
</div>
<div class="bs-stepper-content">
<form onSubmit="return false">
<!-- Account Details -->
<div id="account-details" class="content">
<div class="content-header mb-4">
<h6 class="mb-0">Account Details</h6>
<small>Enter Your Account Details.</small>
</div>
<div class="row g-5">
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<input type="text" id="username" class="form-control" placeholder="johndoe" />
<label for="username">Username</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<input type="email" id="email" class="form-control" placeholder="john.doe@email.com" aria-label="john.doe" />
<label for="email">Email</label>
</div>
</div>
<div class="col-sm-6 form-password-toggle">
<div class="input-group input-group-merge">
<div class="form-floating form-floating-outline">
<input type="password" id="password" class="form-control" placeholder="············" aria-describedby="password2" />
<label for="password">Password</label>
</div>
<span class="input-group-text cursor-pointer" id="password2"><i class="ri-eye-off-line"></i></span>
</div>
</div>
<div class="col-sm-6 form-password-toggle">
<div class="input-group input-group-merge">
<div class="form-floating form-floating-outline">
<input type="password" id="confirm-password" class="form-control" placeholder="············" aria-describedby="confirm-password2" />
<label for="confirm-password">Confirm Password</label>
</div>
<span class="input-group-text cursor-pointer" id="confirm-password2"><i class="ri-eye-off-line"></i></span>
</div>
</div>
<div class="col-12 d-flex justify-content-between">
<button class="btn btn-outline-secondary btn-prev" disabled> <i class="ri-arrow-left-line me-sm-1"></i>
<span class="align-middle d-sm-inline-block d-none">Previous</span>
</button>
<button class="btn btn-primary btn-next"> <span class="align-middle d-sm-inline-block d-none me-sm-1">Next</span> <i class="ri-arrow-right-line"></i></button>
</div>
</div>
</div>
<!-- Personal Info -->
<div id="personal-info-icon" class="content">
<div class="content-header mb-4">
<h6 class="mb-0">Personal Info</h6>
<small>Enter Your Personal Info.</small>
</div>
<div class="row g-5">
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<input type="text" id="first-name" class="form-control" placeholder="John" />
<label for="first-name">First Name</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<input type="text" id="last-name" class="form-control" placeholder="Doe" />
<label for="last-name">Last Name</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<select class="select2" id="country">
<option label=" "></option>
<option>UK</option>
<option>USA</option>
<option>Spain</option>
<option>France</option>
<option>Italy</option>
<option>Australia</option>
</select>
<label for="country">Country</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<select class="selectpicker w-auto" id="language" data-style="btn-transparent" data-tick-icon="ri-check-line text-white" multiple>
<option>English</option>
<option>French</option>
<option>Spanish</option>
</select>
<label for="language">Language</label>
</div>
</div>
<div class="col-12 d-flex justify-content-between">
<button class="btn btn-outline-secondary btn-prev"> <i class="ri-arrow-left-line me-sm-1"></i>
<span class="align-middle d-sm-inline-block d-none">Previous</span>
</button>
<button class="btn btn-primary btn-next"> <span class="align-middle d-sm-inline-block d-none me-sm-1">Next</span> <i class="ri-arrow-right-line"></i></button>
</div>
</div>
</div>
<!-- Address -->
<div id="address" class="content">
<div class="content-header mb-4">
<h6 class="mb-0">Address</h6>
<small>Enter Your Address.</small>
</div>
<div class="row g-5">
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<input type="text" class="form-control" id="address-input" placeholder="98 Borough bridge Road, Birmingham">
<label for="address-input">Address</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<input type="text" class="form-control" id="landmark" placeholder="Borough bridge">
<label for="landmark">Landmark</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<input type="text" class="form-control" id="pincode" placeholder="658921">
<label for="pincode">Pincode</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<input type="text" class="form-control" id="city" placeholder="Birmingham">
<label for="city">City</label>
</div>
</div>
<div class="col-12 d-flex justify-content-between">
<button class="btn btn-outline-secondary btn-prev"> <i class="ri-arrow-left-line me-sm-1"></i>
<span class="align-middle d-sm-inline-block d-none">Previous</span>
</button>
<button class="btn btn-primary btn-next"> <span class="align-middle d-sm-inline-block d-none me-sm-1">Next</span> <i class="ri-arrow-right-line"></i></button>
</div>
</div>
</div>
<!-- Social Links -->
<div id="social-links" class="content">
<div class="content-header mb-4">
<h6 class="mb-0">Social Links</h6>
<small>Enter Your Social Links.</small>
</div>
<div class="row g-5">
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<input type="text" id="twitter" class="form-control" placeholder="https://twitter.com/abc" />
<label for="twitter">Twitter</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<input type="text" id="facebook" class="form-control" placeholder="https://facebook.com/abc" />
<label for="facebook">Facebook</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<input type="text" id="google" class="form-control" placeholder="https://plus.google.com/abc" />
<label for="google">Google+</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<input type="text" id="linkedin" class="form-control" placeholder="https://linkedin.com/abc" />
<label for="linkedin">Linkedin</label>
</div>
</div>
<div class="col-12 d-flex justify-content-between">
<button class="btn btn-outline-secondary btn-prev"> <i class="ri-arrow-left-line me-sm-1"></i>
<span class="align-middle d-sm-inline-block d-none">Previous</span>
</button>
<button class="btn btn-primary btn-next"> <span class="align-middle d-sm-inline-block d-none me-sm-1">Next</span> <i class="ri-arrow-right-line"></i></button>
</div>
</div>
</div>
<!-- Review -->
<div id="review-submit" class="content">
<p class="fw-medium mb-2">Account</p>
<ul class="list-unstyled">
<li>Username</li>
<li>exampl@email.com</li>
</ul>
<hr>
<p class="fw-medium mb-2">Personal Info</p>
<ul class="list-unstyled">
<li>First Name</li>
<li>Last Name</li>
<li>Country</li>
<li>Language</li>
</ul>
<hr>
<p class="fw-medium mb-2">Address</p>
<ul class="list-unstyled">
<li>Address</li>
<li>Landmark</li>
<li>Pincode</li>
<li>City</li>
</ul>
<hr>
<p class="fw-medium mb-2">Social Links</p>
<ul class="list-unstyled">
<li>https://twitter.com/abc</li>
<li>https://facebook.com/abc</li>
<li>https://plus.google.com/abc</li>
<li>https://linkedin.com/abc</li>
</ul>
<div class="col-12 d-flex justify-content-between">
<button class="btn btn-outline-secondary btn-prev"> <i class="ri-arrow-left-line me-sm-1"></i>
<span class="align-middle d-sm-inline-block d-none">Previous</span>
</button>
<button class="btn btn-primary btn-submit">Submit</button>
</div>
</div>
</form>
</div>
</div>const wizardIcons = document.querySelector('.wizard-icons-example');
if (typeof wizardIcons !== undefined && wizardIcons !== null) {
const wizardIconsBtnNextList = [].slice.call(wizardIcons.querySelectorAll('.btn-next')),
wizardIconsBtnPrevList = [].slice.call(wizardIcons.querySelectorAll('.btn-prev')),
wizardIconsBtnSubmit = wizardIcons.querySelector('.btn-submit');
const iconsStepper = new Stepper(wizardIcons, {
linear: false
});
if (wizardIconsBtnNextList) {
wizardIconsBtnNextList.forEach(wizardIconsBtnNext => {
wizardIconsBtnNext.addEventListener('click', event => {
iconsStepper.next();
});
});
}
if (wizardIconsBtnPrevList) {
wizardIconsBtnPrevList.forEach(wizardIconsBtnPrev => {
wizardIconsBtnPrev.addEventListener('click', event => {
iconsStepper.previous();
});
});
}
if (wizardIconsBtnSubmit) {
wizardIconsBtnSubmit.addEventListener('click', event => {
alert('Submitted..!!');
});
}
}
Vertical icons
Use class .vertical and .wizard-vertical-icons to create a wizard with icons. Refer example below for more info.
<div class="bs-stepper wizard-vertical vertical wizard-vertical-icons-example wizard-vertical-icons mt-2">
<div class="bs-stepper-header">
<div class="step" data-target="#account-details-1">
<button type="button" class="step-trigger">
<span class="avatar">
<span class="avatar-initial rounded-2">
<i class="ri-contacts-fill ri-24px"></i>
</span>
</span>
<span class="bs-stepper-label flex-column align-items-start gap-1 ms-2">
<span class="bs-stepper-title">Account Details</span>
<span class="bs-stepper-subtitle">Setup Account Details</span>
</span>
</button>
</div>
<div class="step" data-target="#personal-info-1">
<button type="button" class="step-trigger">
<span class="avatar">
<span class="avatar-initial rounded-2">
<i class="ri-user-3-line ri-24px"></i>
</span>
</span>
<span class="bs-stepper-label flex-column align-items-start gap-1 ms-2">
<span class="bs-stepper-title">Personal Info</span>
<span class="bs-stepper-subtitle">Add personal info</span>
</span>
</button>
</div>
<div class="step" data-target="#social-links-1">
<button type="button" class="step-trigger">
<span class="avatar">
<span class="avatar-initial rounded-2">
<i class="ri-instagram-line ri-24px"></i>
</span>
</span>
<span class="bs-stepper-label flex-column align-items-start gap-1 ms-2">
<span class="bs-stepper-title">Social Links</span>
<span class="bs-stepper-subtitle">Add social links</span>
</span>
</button>
</div>
</div>
<div class="bs-stepper-content">
<form onSubmit="return false">
<!-- Account Details -->
<div id="account-details-1" class="content">
<div class="content-header mb-4">
<h6 class="mb-0">Account Details</h6>
<small>Enter Your Account Details.</small>
</div>
<div class="row g-4">
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<input type="text" id="username-vertical" class="form-control" placeholder="johndoe" />
<label for="username-vertical">Username</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<input type="email" id="email-vertical" class="form-control" placeholder="john.doe@email.com" aria-label="john.doe" />
<label for="email-vertical">Email</label>
</div>
</div>
<div class="col-sm-6 form-password-toggle">
<div class="input-group input-group-merge">
<div class="form-floating form-floating-outline">
<input type="password" id="password-vertical" class="form-control" placeholder="············" aria-describedby="password2-vertical" />
<label for="password-vertical">Password</label>
</div>
<span class="input-group-text cursor-pointer" id="password2-vertical"><i class="ri-eye-off-line"></i></span>
</div>
</div>
<div class="col-sm-6 form-password-toggle">
<div class="input-group input-group-merge">
<div class="form-floating form-floating-outline">
<input type="password" id="confirm-password-vertical" class="form-control" placeholder="············" aria-describedby="confirm-password-vertical2" />
<label for="confirm-password-vertical">Confirm Password</label>
</div>
<span class="input-group-text cursor-pointer" id="confirm-password-vertical2"><i class="ri-eye-off-line"></i></span>
</div>
</div>
<div class="col-12 d-flex justify-content-between">
<button class="btn btn-outline-secondary btn-prev" disabled> <i class="ri-arrow-left-line me-sm-1 me-0"></i>
<span class="align-middle d-sm-inline-block d-none">Previous</span>
</button>
<button class="btn btn-primary btn-next"> <span class="align-middle d-sm-inline-block d-none me-sm-1">Next</span> <i class="ri-arrow-right-line"></i></button>
</div>
</div>
</div>
<!-- Personal Info -->
<div id="personal-info-1" class="content">
<div class="content-header mb-4">
<h6 class="mb-0">Personal Info</h6>
<small>Enter Your Personal Info.</small>
</div>
<div class="row g-4">
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<input type="text" id="first-name-vertical" class="form-control" placeholder="John" />
<label for="first-name-vertical">First Name</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<input type="text" id="last-name-vertical" class="form-control" placeholder="Doe" />
<label for="last-name-vertical">Last Name</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<select class="select2" id="country-vertical">
<option label=" "></option>
<option>UK</option>
<option>USA</option>
<option>Spain</option>
<option>France</option>
<option>Italy</option>
<option>Australia</option>
</select>
<label for="country-vertical">Country</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<select class="selectpicker w-auto" id="language-vertical" data-style="btn-transparent" data-tick-icon="ri-check-line text-white" multiple>
<option>English</option>
<option>French</option>
<option>Spanish</option>
</select>
<label for="language-vertical">Language</label>
</div>
</div>
<div class="col-12 d-flex justify-content-between">
<button class="btn btn-outline-secondary btn-prev"> <i class="ri-arrow-left-line me-sm-1 me-0"></i>
<span class="align-middle d-sm-inline-block d-none">Previous</span>
</button>
<button class="btn btn-primary btn-next"> <span class="align-middle d-sm-inline-block d-none me-sm-1">Next</span> <i class="ri-arrow-right-line"></i></button>
</div>
</div>
</div>
<!-- Social Links -->
<div id="social-links-1" class="content">
<div class="content-header mb-4">
<h6 class="mb-0">Social Links</h6>
<small>Enter Your Social Links.</small>
</div>
<div class="row g-4">
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<input type="text" id="twitter-vertical" class="form-control" placeholder="https://twitter.com/abc" />
<label for="twitter-vertical">Twitter</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<input type="text" id="facebook-vertical" class="form-control" placeholder="https://facebook.com/abc" />
<label for="facebook-vertical">Facebook</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<input type="text" id="google-vertical" class="form-control" placeholder="https://plus.google.com/abc" />
<label for="google-vertical">Google+</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<input type="text" id="linkedin-vertical" class="form-control" placeholder="https://linkedin.com/abc" />
<label for="linkedin-vertical">LinkedIn</label>
</div>
</div>
<div class="col-12 d-flex justify-content-between">
<button class="btn btn-outline-secondary btn-prev"> <i class="ri-arrow-left-line me-sm-1 me-0"></i>
<span class="align-middle d-sm-inline-block d-none">Previous</span>
</button>
<button class="btn btn-primary btn-submit">Submit</button>
</div>
</div>
</div>
</form>
</div>
</div>const wizardIconsVertical = document.querySelector('.wizard-vertical-icons-example');
if (typeof wizardIconsVertical !== undefined && wizardIconsVertical !== null) {
const wizardIconsVerticalBtnNextList = [].slice.call(wizardIconsVertical.querySelectorAll('.btn-next')),
wizardIconsVerticalBtnPrevList = [].slice.call(wizardIconsVertical.querySelectorAll('.btn-prev')),
wizardIconsVerticalBtnSubmit = wizardIconsVertical.querySelector('.btn-submit');
const verticalIconsStepper = new Stepper(wizardIconsVertical, {
linear: false
});
if (wizardIconsVerticalBtnNextList) {
wizardIconsVerticalBtnNextList.forEach(wizardIconsVerticalBtnNext => {
wizardIconsVerticalBtnNext.addEventListener('click', event => {
verticalIconsStepper.next();
});
});
}
if (wizardIconsVerticalBtnPrevList) {
wizardIconsVerticalBtnPrevList.forEach(wizardIconsVerticalBtnPrev => {
wizardIconsVerticalBtnPrev.addEventListener('click', event => {
verticalIconsStepper.previous();
});
});
}
if (wizardIconsVerticalBtnSubmit) {
wizardIconsVerticalBtnSubmit.addEventListener('click', event => {
alert('Submitted..!!');
});
}
}Horizontal
Use class .wizard-modern to apply modern styles to the wizard.
<div class="bs-stepper wizard-modern wizard-modern-example">
<div class="bs-stepper-header">
<div class="step" data-target="#account-details-modern">
<button type="button" class="step-trigger">
<span class="bs-stepper-circle"><i class="ri-check-line"></i></span>
<span class="bs-stepper-label">
<span class="bs-stepper-number">01</span>
<span class="d-flex flex-column gap-1 ms-2">
<span class="bs-stepper-title">Account Details</span>
<span class="bs-stepper-subtitle">Setup Account Details</span>
</span>
</span>
</button>
</div>
<div class="line"></div>
<div class="step" data-target="#personal-info-modern">
<button type="button" class="step-trigger">
<span class="bs-stepper-circle"><i class="ri-check-line"></i></span>
<span class="bs-stepper-label">
<span class="bs-stepper-number">02</span>
<span class="d-flex flex-column gap-1 ms-2">
<span class="bs-stepper-title">Personal Info</span>
<span class="bs-stepper-subtitle">Add personal info</span>
</span>
</span>
</button>
</div>
<div class="line"></div>
<div class="step" data-target="#social-links-modern">
<button type="button" class="step-trigger">
<span class="bs-stepper-circle"><i class="ri-check-line"></i></span>
<span class="bs-stepper-label">
<span class="bs-stepper-number">03</span>
<span class="d-flex flex-column gap-1 ms-2">
<span class="bs-stepper-title">Social Links</span>
<span class="bs-stepper-subtitle">Add social links</span>
</span>
</span>
</button>
</div>
</div>
<div class="bs-stepper-content">
<form onSubmit="return false">
<!-- Account Details -->
<div id="account-details-modern" class="content">
<div class="content-header mb-4">
<h6 class="mb-0">Account Details</h6>
<small>Enter Your Account Details.</small>
</div>
<div class="row g-5">
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<input type="text" id="username-modern" class="form-control" placeholder="johndoe" />
<label for="username-modern">Username</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<input type="email" id="email-modern" class="form-control" placeholder="john.doe@email.com" aria-label="john.doe" />
<label for="email-modern">Email</label>
</div>
</div>
<div class="col-sm-6 form-password-toggle">
<div class="input-group input-group-merge">
<div class="form-floating form-floating-outline">
<input type="password" id="password-modern" class="form-control" placeholder="············" aria-describedby="password2-modern" />
<label for="password-modern">Password</label>
</div>
<span class="input-group-text cursor-pointer" id="password2-modern"><i class="ri-eye-off-line"></i></span>
</div>
</div>
<div class="col-sm-6 form-password-toggle">
<div class="input-group input-group-merge">
<div class="form-floating form-floating-outline">
<input type="password" id="confirm-password-modern" class="form-control" placeholder="············" aria-describedby="confirm-password-modern2" />
<label for="confirm-password-modern">Confirm Password</label>
</div>
<span class="input-group-text cursor-pointer" id="confirm-password-modern2"><i class="ri-eye-off-line"></i></span>
</div>
</div>
<div class="col-12 d-flex justify-content-between">
<button class="btn btn-outline-secondary btn-prev" disabled> <i class="ri-arrow-left-line me-sm-1 me-0"></i>
<span class="align-middle d-sm-inline-block d-none">Previous</span>
</button>
<button class="btn btn-primary btn-next"> <span class="align-middle d-sm-inline-block d-none me-sm-1">Next</span> <i class="ri-arrow-right-line"></i></button>
</div>
</div>
</div>
<!-- Personal Info -->
<div id="personal-info-modern" class="content">
<div class="content-header mb-4">
<h6 class="mb-0">Personal Info</h6>
<small>Enter Your Personal Info.</small>
</div>
<div class="row g-5">
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<input type="text" id="first-name-modern" class="form-control" placeholder="John" />
<label for="first-name-modern">First Name</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<input type="text" id="last-name-modern" class="form-control" placeholder="Doe" />
<label for="last-name-modern">Last Name</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<select class="select2" id="country-modern">
<option label=" "></option>
<option>UK</option>
<option>USA</option>
<option>Spain</option>
<option>France</option>
<option>Italy</option>
<option>Australia</option>
</select>
<label for="country-modern">Country</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<select class="selectpicker w-auto" id="language-modern" data-style="btn-transparent" data-tick-icon="ri-check-line text-white" multiple>
<option>English</option>
<option>French</option>
<option>Spanish</option>
</select>
<label for="language-modern">Language</label>
</div>
</div>
<div class="col-12 d-flex justify-content-between">
<button class="btn btn-outline-secondary btn-prev"> <i class="ri-arrow-left-line me-sm-1 me-0"></i>
<span class="align-middle d-sm-inline-block d-none">Previous</span>
</button>
<button class="btn btn-primary btn-next"> <span class="align-middle d-sm-inline-block d-none me-sm-1">Next</span> <i class="ri-arrow-right-line"></i></button>
</div>
</div>
</div>
<!-- Social Links -->
<div id="social-links-modern" class="content">
<div class="content-header mb-4">
<h6 class="mb-0">Social Links</h6>
<small>Enter Your Social Links.</small>
</div>
<div class="row g-5">
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<input type="text" id="twitter-modern" class="form-control" placeholder="https://twitter.com/abc" />
<label for="twitter-modern">Twitter</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<input type="text" id="facebook-modern" class="form-control" placeholder="https://facebook.com/abc" />
<label for="facebook-modern">Facebook</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<input type="text" id="google-modern" class="form-control" placeholder="https://plus.google.com/abc" />
<label for="google-modern">Google+</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<input type="text" id="linkedin-modern" class="form-control" placeholder="https://linkedin.com/abc" />
<label for="linkedin-modern">LinkedIn</label>
</div>
</div>
<div class="col-12 d-flex justify-content-between">
<button class="btn btn-outline-secondary btn-prev"> <i class="ri-arrow-left-line me-sm-1 me-0"></i>
<span class="align-middle d-sm-inline-block d-none">Previous</span>
</button>
<button class="btn btn-primary btn-submit">Submit</button>
</div>
</div>
</div>
</form>
</div>
</div>const wizardModern = document.querySelector('.wizard-modern-example');
if (typeof wizardModern !== undefined && wizardModern !== null) {
const wizardModernBtnNextList = [].slice.call(wizardModern.querySelectorAll('.btn-next')),
wizardModernBtnPrevList = [].slice.call(wizardModern.querySelectorAll('.btn-prev')),
wizardModernBtnSubmit = wizardModern.querySelector('.btn-submit');
const modernStepper = new Stepper(wizardModern, {
linear: false
});
if (wizardModernBtnNextList) {
wizardModernBtnNextList.forEach(wizardModernBtnNext => {
wizardModernBtnNext.addEventListener('click', event => {
modernStepper.next();
});
});
}
if (wizardModernBtnPrevList) {
wizardModernBtnPrevList.forEach(wizardModernBtnPrev => {
wizardModernBtnPrev.addEventListener('click', event => {
modernStepper.previous();
});
});
}
if (wizardModernBtnSubmit) {
wizardModernBtnSubmit.addEventListener('click', event => {
alert('Submitted..!!');
});
}
}Vertical
Use .wizard-modern.vertical to apply modern styles to vertical wizard.
<div class="bs-stepper vertical wizard-modern wizard-modern-vertical">
<div class="bs-stepper-header gap-lg-2">
<div class="step" data-target="#account-details-modern-vertical">
<button type="button" class="step-trigger">
<span class="bs-stepper-circle"><i class="ri-check-line"></i></span>
<span class="bs-stepper-label">
<span class="bs-stepper-number">01</span>
<span class="d-flex flex-column gap-1 ms-2">
<span class="bs-stepper-title">Account Details</span>
<span class="bs-stepper-subtitle">Setup Account Details</span>
</span>
</span>
</button>
</div>
<div class="line"></div>
<div class="step" data-target="#personal-info-modern-vertical">
<button type="button" class="step-trigger">
<span class="bs-stepper-circle"><i class="ri-check-line"></i></span>
<span class="bs-stepper-label">
<span class="bs-stepper-number">02</span>
<span class="d-flex flex-column gap-1 ms-2">
<span class="bs-stepper-title">Personal Info</span>
<span class="bs-stepper-subtitle">Add personal info</span>
</span>
</span>
</button>
</div>
<div class="line"></div>
<div class="step" data-target="#social-links-modern-vertical">
<button type="button" class="step-trigger">
<span class="bs-stepper-circle"><i class="ri-check-line"></i></span>
<span class="bs-stepper-label">
<span class="bs-stepper-number">03</span>
<span class="d-flex flex-column gap-1 ms-2">
<span class="bs-stepper-title">Social Links</span>
<span class="bs-stepper-subtitle">Add social links</span>
</span>
</span>
</button>
</div>
</div>
<div class="bs-stepper-content">
<form onSubmit="return false">
<!-- Account Details -->
<div id="account-details-modern-vertical" class="content">
<div class="content-header mb-4">
<h6 class="mb-0">Account Details</h6>
<small>Enter Your Account Details.</small>
</div>
<div class="row g-5">
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<input type="text" id="username-modern-vertical" class="form-control" placeholder="johndoe" />
<label for="username-modern-vertical">Username</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<input type="email" id="email-modern-vertical" class="form-control" placeholder="john.doe@email.com" aria-label="john.doe" />
<label for="email-modern-vertical">Email</label>
</div>
</div>
<div class="col-sm-6 form-password-toggle">
<div class="input-group input-group-merge">
<div class="form-floating form-floating-outline">
<input type="password" id="password-modern-vertical" class="form-control" placeholder="············" aria-describedby="password2-modern-vertical" />
<label for="password-modern-vertical">Password</label>
</div>
<span class="input-group-text cursor-pointer" id="password2-modern-vertical"><i class="ri-eye-off-line"></i></span>
</div>
</div>
<div class="col-sm-6 form-password-toggle">
<div class="input-group input-group-merge">
<div class="form-floating form-floating-outline">
<input type="password" id="confirm-password-modern-vertical" class="form-control" placeholder="············" aria-describedby="confirm-password-modern-vertical2" />
<label for="confirm-password-modern-vertical">Confirm Password</label>
</div>
<span class="input-group-text cursor-pointer" id="confirm-password-modern-vertical2"><i class="ri-eye-off-line"></i></span>
</div>
</div>
<div class="col-12 d-flex justify-content-between">
<button class="btn btn-outline-secondary btn-prev" disabled> <i class="ri-arrow-left-line me-sm-1 me-0"></i>
<span class="align-middle d-sm-inline-block d-none">Previous</span>
</button>
<button class="btn btn-primary btn-next"> <span class="align-middle d-sm-inline-block d-none me-sm-1">Next</span> <i class="ri-arrow-right-line"></i></button>
</div>
</div>
</div>
<!-- Personal Info -->
<div id="personal-info-modern-vertical" class="content">
<div class="content-header mb-4">
<h6 class="mb-0">Personal Info</h6>
<small>Enter Your Personal Info.</small>
</div>
<div class="row g-5">
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<input type="text" id="first-name-modern-vertical" class="form-control" placeholder="John" />
<label for="first-name-modern-vertical">First Name</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<input type="text" id="last-name-modern-vertical" class="form-control" placeholder="Doe" />
<label for="last-name-modern-vertical">Last Name</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<select class="select2" id="country-modern-vertical">
<option label=" "></option>
<option>UK</option>
<option>USA</option>
<option>Spain</option>
<option>France</option>
<option>Italy</option>
<option>Australia</option>
</select>
<label for="country-modern-vertical">Country</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<select class="selectpicker w-auto" id="language-modern-vertical" data-style="btn-transparent" data-tick-icon="ri-check-line text-white" multiple>
<option>English</option>
<option>French</option>
<option>Spanish</option>
</select>
<label for="language-modern-vertical">Language</label>
</div>
</div>
<div class="col-12 d-flex justify-content-between">
<button class="btn btn-outline-secondary btn-prev"> <i class="ri-arrow-left-line me-sm-1 me-0"></i>
<span class="align-middle d-sm-inline-block d-none">Previous</span>
</button>
<button class="btn btn-primary btn-next"> <span class="align-middle d-sm-inline-block d-none me-sm-1">Next</span> <i class="ri-arrow-right-line"></i></button>
</div>
</div>
</div>
<!-- Social Links -->
<div id="social-links-modern-vertical" class="content">
<div class="content-header mb-4">
<h6 class="mb-0">Social Links</h6>
<small>Enter Your Social Links.</small>
</div>
<div class="row g-5">
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<input type="text" id="twitter-modern-vertical" class="form-control" placeholder="https://twitter.com/abc" />
<label for="twitter-modern-vertical">Twitter</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<input type="text" id="facebook-modern-vertical" class="form-control" placeholder="https://facebook.com/abc" />
<label for="facebook-modern-vertical">Facebook</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<input type="text" id="google-modern-vertical" class="form-control" placeholder="https://plus.google.com/abc" />
<label for="google-modern-vertical">Google+</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<input type="text" id="linkedin-modern-vertical" class="form-control" placeholder="https://linkedin.com/abc" />
<label for="linkedin-modern-vertical">LinkedIn</label>
</div>
</div>
<div class="col-12 d-flex justify-content-between">
<button class="btn btn-outline-secondary btn-prev"> <i class="ri-arrow-left-line me-sm-1 me-0"></i>
<span class="align-middle d-sm-inline-block d-none">Previous</span>
</button>
<button class="btn btn-primary btn-submit">Submit</button>
</div>
</div>
</div>
</form>
</div>
</div>const wizardModernVertical = document.querySelector('.wizard-modern-vertical');
if (typeof wizardModernVertical !== undefined && wizardModernVertical !== null) {
const wizardModernVerticalBtnNextList = [].slice.call(wizardModernVertical.querySelectorAll('.btn-next')),
wizardModernVerticalBtnPrevList = [].slice.call(wizardModernVertical.querySelectorAll('.btn-prev')),
wizardModernVerticalBtnSubmit = wizardModernVertical.querySelector('.btn-submit');
const modernVerticalStepper = new Stepper(wizardModernVertical, {
linear: false
});
if (wizardModernVerticalBtnNextList) {
wizardModernVerticalBtnNextList.forEach(wizardModernVerticalBtnNext => {
wizardModernVerticalBtnNext.addEventListener('click', event => {
modernVerticalStepper.next();
});
});
}
if (wizardModernVerticalBtnPrevList) {
wizardModernVerticalBtnPrevList.forEach(wizardModernVerticalBtnPrev => {
wizardModernVerticalBtnPrev.addEventListener('click', event => {
modernVerticalStepper.previous();
});
});
}
if (wizardModernVerticalBtnSubmit) {
wizardModernVerticalBtnSubmit.addEventListener('click', event => {
alert('Submitted..!!');
});
}
}Vertical icons
Use class .vertical.wizard-modern and .wizard-vertical-icons to create a wizard with icons. Refer example below for more info.
<div class="bs-stepper vertical wizard-modern wizard-vertical-icons wizard-modern-vertical-icons-example mt-2">
<div class="bs-stepper-header">
<div class="step" data-target="#account-details-vertical-modern">
<button type="button" class="step-trigger">
<span class="avatar">
<span class="avatar-initial rounded-2">
<i class="ri-contacts-line ri-24px"></i>
</span>
</span>
<span class="bs-stepper-label flex-column align-items-start gap-1 ms-4">
<span class="bs-stepper-title">Account Details</span>
<span class="bs-stepper-subtitle">Setup Account Details</span>
</span>
</button>
</div>
<div class="step" data-target="#personal-info-vertical-modern">
<button type="button" class="step-trigger">
<span class="avatar">
<span class="avatar-initial rounded-2">
<i class="ri-user-3-line ri-24px"></i>
</span>
</span>
<span class="bs-stepper-label flex-column align-items-start gap-1 ms-4">
<span class="bs-stepper-title">Personal Info</span>
<span class="bs-stepper-subtitle">Add personal info</span>
</span>
</button>
</div>
<div class="step" data-target="#social-links-vertical-modern">
<button type="button" class="step-trigger">
<span class="avatar">
<span class="avatar-initial rounded-2">
<i class="ri-instagram-line ri-24px"></i>
</span>
</span>
<span class="bs-stepper-label flex-column align-items-start gap-1 ms-4">
<span class="bs-stepper-title">Social Links</span>
<span class="bs-stepper-subtitle">Add social links</span>
</span>
</button>
</div>
</div>
<div class="bs-stepper-content">
<form onSubmit="return false">
<!-- Account Details -->
<div id="account-details-vertical-modern" class="content">
<div class="content-header mb-4">
<h6 class="mb-0">Account Details</h6>
<small>Enter Your Account Details.</small>
</div>
<div class="row g-5">
<div class="col-sm-6">
<label class="form-label" for="username-modern-vertical">Username</label>
<input type="text" id="username-modern-vertical" class="form-control" placeholder="john.doe" />
</div>
<div class="col-sm-6">
<label class="form-label" for="email-modern-vertical">Email</label>
<input type="text" id="email-modern-vertical" class="form-control" placeholder="john.doe" aria-label="john.doe" />
</div>
<div class="col-sm-6 form-password-toggle">
<label class="form-label" for="password-modern-vertical">Password</label>
<div class="input-group input-group-merge">
<input type="password" id="password-modern-vertical" class="form-control" placeholder="············" aria-describedby="password-modern-vertical1" />
<span class="input-group-text cursor-pointer" id="password-modern-vertical1"><i class="ri-eye-off-line"></i></span>
</div>
</div>
<div class="col-sm-6 form-password-toggle">
<label class="form-label" for="confirm-password-modern-vertical2">Confirm Password</label>
<div class="input-group input-group-merge">
<input type="password" id="confirm-password-modern-vertical2" class="form-control" placeholder="············" aria-describedby="confirm-password-modern-vertical3" />
<span class="input-group-text cursor-pointer" id="confirm-password-modern-vertical3"><i class="ri-eye-off-line"></i></span>
</div>
</div>
<div class="col-12 d-flex justify-content-between">
<button class="btn btn-outline-secondary btn-prev" disabled> <i class="ri-arrow-left-line me-sm-1"></i>
<span class="align-middle d-sm-inline-block d-none">Previous</span>
</button>
<button class="btn btn-primary btn-next"> <span class="align-middle d-sm-inline-block d-none me-sm-1">Next</span> <i class="ri-arrow-right-line"></i></button>
</div>
</div>
</div>
<!-- Personal Info -->
<div id="personal-info-vertical-modern" class="content">
<div class="content-header mb-4">
<h6 class="mb-0">Personal Info</h6>
<small>Enter Your Personal Info.</small>
</div>
<div class="row g-5">
<div class="col-sm-6">
<label class="form-label" for="first-name-modern-vertical">First Name</label>
<input type="text" id="first-name-modern-vertical" class="form-control" placeholder="John" />
</div>
<div class="col-sm-6">
<label class="form-label" for="last-name-modern-vertical">Last Name</label>
<input type="text" id="last-name-modern-vertical" class="form-control" placeholder="Doe" />
</div>
<div class="col-sm-6">
<label class="form-label" for="country-vertical-modern">Country</label>
<select class="select2" id="country-vertical-modern">
<option>UK</option>
<option>USA</option>
<option>Spain</option>
<option>France</option>
<option>Italy</option>
<option>Australia</option>
</select>
</div>
<div class="col-sm-6">
<label class="form-label" for="language-vertical-modern">Language</label>
<select class="selectpicker w-auto" id="language-vertical-modern" data-style="btn-default" data-tick-icon="ri-check-line text-white" multiple>
<option>English</option>
<option>French</option>
<option>Spanish</option>
</select>
</div>
<div class="col-12 d-flex justify-content-between">
<button class="btn btn-outline-secondary btn-prev"> <i class="ri-arrow-left-line me-sm-1"></i>
<span class="align-middle d-sm-inline-block d-none">Previous</span>
</button>
<button class="btn btn-primary btn-next"> <span class="align-middle d-sm-inline-block d-none me-sm-1">Next</span> <i class="ri-arrow-right-line"></i></button>
</div>
</div>
</div>
<!-- Social Links -->
<div id="social-links-vertical-modern" class="content">
<div class="content-header mb-4">
<h6 class="mb-0">Social Links</h6>
<small>Enter Your Social Links.</small>
</div>
<div class="row g-5">
<div class="col-sm-6">
<label class="form-label" for="twitter-vertical-modern">Twitter</label>
<input type="text" id="twitter-vertical-modern" class="form-control" placeholder="https://twitter.com/abc" />
</div>
<div class="col-sm-6">
<label class="form-label" for="facebook-vertical-modern">Facebook</label>
<input type="text" id="facebook-vertical-modern" class="form-control" placeholder="https://facebook.com/abc" />
</div>
<div class="col-sm-6">
<label class="form-label" for="google-vertical-modern">Google+</label>
<input type="text" id="google-vertical-modern" class="form-control" placeholder="https://plus.google.com/abc" />
</div>
<div class="col-sm-6">
<label class="form-label" for="linkedin-vertical-modern">Linkedin</label>
<input type="text" id="linkedin-vertical-modern" class="form-control" placeholder="https://linkedin.com/abc" />
</div>
<div class="col-12 d-flex justify-content-between">
<button class="btn btn-outline-secondary btn-prev"> <i class="ri-arrow-left-line me-sm-1"></i>
<span class="align-middle d-sm-inline-block d-none">Previous</span>
</button>
<button class="btn btn-primary btn-submit">Submit</button>
</div>
</div>
</div>
</form>
</div>
</div>const wizardIconsModernVertical = document.querySelector('.wizard-modern-vertical-icons-example');
if (typeof wizardIconsModernVertical !== undefined && wizardIconsModernVertical !== null) {
const wizardIconsModernVerticalBtnNextList = [].slice.call(wizardIconsModernVertical.querySelectorAll('.btn-next')),
wizardIconsModernVerticalBtnPrevList = [].slice.call(wizardIconsModernVertical.querySelectorAll('.btn-prev')),
wizardIconsModernVerticalBtnSubmit = wizardIconsModernVertical.querySelector('.btn-submit');
const verticalModernIconsStepper = new Stepper(wizardIconsModernVertical, {
linear: false
});
if (wizardIconsModernVerticalBtnNextList) {
wizardIconsModernVerticalBtnNextList.forEach(wizardIconsModernVerticalBtnNext => {
wizardIconsModernVerticalBtnNext.addEventListener('click', event => {
verticalModernIconsStepper.next();
});
});
}
if (wizardIconsModernVerticalBtnPrevList) {
wizardIconsModernVerticalBtnPrevList.forEach(wizardIconsModernVerticalBtnPrev => {
wizardIconsModernVerticalBtnPrev.addEventListener('click', event => {
verticalModernIconsStepper.previous();
});
});
}
if (wizardIconsModernVerticalBtnSubmit) {
wizardIconsModernVerticalBtnSubmit.addEventListener('click', event => {
alert('Submitted..!!');
});
}
}Materialize use FormValidation for wizard validation. Refer below mentioned example for more info.
<div id="wizard-validation" class="bs-stepper">
<div class="bs-stepper-header">
<div class="step" data-target="#account-details-validation">
<button type="button" class="step-trigger flex-lg-wrap gap-lg-2 px-lg-0">
<span class="bs-stepper-circle"><i class="ri-check-line"></i></span>
<span class="bs-stepper-label ms-lg-0">
<span class="d-flex flex-column gap-1 text-lg-center">
<span class="bs-stepper-title">Account Details</span>
<span class="bs-stepper-subtitle">Setup Account Details</span>
</span>
</span>
</button>
</div>
<div class="line mt-lg-n4 mb-lg-4"></div>
<div class="step" data-target="#personal-info-validation">
<button type="button" class="step-trigger flex-lg-wrap gap-lg-2 px-lg-0">
<span class="bs-stepper-circle"><i class="ri-check-line"></i></span>
<span class="bs-stepper-label ms-lg-0">
<span class="d-flex flex-column gap-1 text-lg-center">
<span class="bs-stepper-title">Personal Info</span>
<span class="bs-stepper-subtitle">Add personal info</span>
</span>
</span>
</button>
</div>
<div class="line mt-lg-n4 mb-lg-4"></div>
<div class="step" data-target="#social-links-validation">
<button type="button" class="step-trigger flex-lg-wrap gap-lg-2 px-lg-0">
<span class="bs-stepper-circle"><i class="ri-check-line"></i></span>
<span class="bs-stepper-label ms-lg-0">
<span class="d-flex flex-column gap-1 text-lg-center">
<span class="bs-stepper-title">Social Links</span>
<span class="bs-stepper-subtitle">Add social links</span>
</span>
</span>
</button>
</div>
</div>
<div class="bs-stepper-content">
<form id="wizard-validation-form" onSubmit="return false">
<!-- Account Details -->
<div id="account-details-validation" class="content">
<div class="content-header mb-4">
<h6 class="mb-0">Account Details</h6>
<small>Enter Your Account Details.</small>
</div>
<div class="row g-5">
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<input type="text" name="formValidationUsername" id="formValidationUsername" class="form-control" placeholder="johndoe" />
<label for="formValidationUsername">Username</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<input type="email" name="formValidationEmail" id="formValidationEmail" class="form-control" placeholder="john.doe@email.com" aria-label="john.doe" />
<label for="formValidationEmail">Email</label>
</div>
</div>
<div class="col-sm-6 form-password-toggle">
<div class="input-group input-group-merge">
<div class="form-floating form-floating-outline">
<input type="password" id="formValidationPass" name="formValidationPass" class="form-control" placeholder="············" aria-describedby="formValidationPass2" />
<label for="formValidationPass">Password</label>
</div>
<span class="input-group-text cursor-pointer" id="formValidationPass2"><i class="ri-eye-off-line"></i></span>
</div>
</div>
<div class="col-sm-6 form-password-toggle">
<div class="input-group input-group-merge">
<div class="form-floating form-floating-outline">
<input type="password" id="formValidationConfirmPass" name="formValidationConfirmPass" class="form-control" placeholder="············" aria-describedby="formValidationConfirmPass2" />
<label for="formValidationConfirmPass">Confirm Password</label>
</div>
<span class="input-group-text cursor-pointer" id="formValidationConfirmPass2"><i class="ri-eye-off-line"></i></span>
</div>
</div>
<div class="col-12 d-flex justify-content-between">
<button class="btn btn-outline-secondary btn-prev" disabled> <i class="ri-arrow-left-line me-sm-1 me-0"></i>
<span class="align-middle d-sm-inline-block d-none">Previous</span>
</button>
<button class="btn btn-primary btn-next"> <span class="align-middle d-sm-inline-block d-none me-sm-1">Next</span> <i class="ri-arrow-right-line"></i></button>
</div>
</div>
</div>
<!-- Personal Info -->
<div id="personal-info-validation" class="content">
<div class="content-header mb-4">
<h6 class="mb-0">Personal Info</h6>
<small>Enter Your Personal Info.</small>
</div>
<div class="row g-5">
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<input type="text" id="formValidationFirstName" name="formValidationFirstName" class="form-control" placeholder="John" />
<label for="formValidationFirstName">First Name</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<input type="text" id="formValidationLastName" name="formValidationLastName" class="form-control" placeholder="Doe" />
<label for="formValidationLastName">Last Name</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<select class="select2" id="formValidationCountry" name="formValidationCountry">
<option label=" "></option>
<option>UK</option>
<option>USA</option>
<option>Spain</option>
<option>France</option>
<option>Italy</option>
<option>Australia</option>
</select>
<label for="formValidationCountry">Country</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<select class="selectpicker w-auto" id="formValidationLanguage" data-style="btn-transparent" data-tick-icon="ri-check-line text-white" name="formValidationLanguage" multiple>
<option>English</option>
<option>French</option>
<option>Spanish</option>
</select>
<label for="formValidationLanguage">Language</label>
</div>
</div>
<div class="col-12 d-flex justify-content-between">
<button class="btn btn-outline-secondary btn-prev"> <i class="ri-arrow-left-line me-sm-1 me-0"></i>
<span class="align-middle d-sm-inline-block d-none">Previous</span>
</button>
<button class="btn btn-primary btn-next"> <span class="align-middle d-sm-inline-block d-none me-sm-1">Next</span> <i class="ri-arrow-right-line"></i></button>
</div>
</div>
</div>
<!-- Social Links -->
<div id="social-links-validation" class="content">
<div class="content-header mb-4">
<h6 class="mb-0">Social Links</h6>
<small>Enter Your Social Links.</small>
</div>
<div class="row g-5">
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<input type="text" name="formValidationTwitter" id="formValidationTwitter" class="form-control" placeholder="https://twitter.com/abc" />
<label for="formValidationTwitter">Twitter</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<input type="text" name="formValidationFacebook" id="formValidationFacebook" class="form-control" placeholder="https://facebook.com/abc" />
<label for="formValidationFacebook">Facebook</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<input type="text" name="formValidationGoogle" id="formValidationGoogle" class="form-control" placeholder="https://plus.google.com/abc" />
<label for="formValidationGoogle">Google+</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-floating form-floating-outline">
<input type="text" name="formValidationLinkedIn" id="formValidationLinkedIn" class="form-control" placeholder="https://linkedin.com/abc" />
<label for="formValidationLinkedIn">LinkedIn</label>
</div>
</div>
<div class="col-12 d-flex justify-content-between">
<button class="btn btn-outline-secondary btn-prev"> <i class="ri-arrow-left-line me-sm-1 me-0"></i>
<span class="align-middle d-sm-inline-block d-none">Previous</span>
</button>
<button class="btn btn-primary btn-next btn-submit">Submit</button>
</div>
</div>
</div>
</form>
</div>
</div>const select2 = $('.select2'),
selectPicker = $('.selectpicker');
const wizardValidation = document.querySelector('#wizard-validation');
if (typeof wizardValidation !== undefined && wizardValidation !== null) {
// Wizard form
const wizardValidationForm = wizardValidation.querySelector('#wizard-validation-form');
// Wizard steps
const wizardValidationFormStep1 = wizardValidationForm.querySelector('#account-details-validation');
const wizardValidationFormStep2 = wizardValidationForm.querySelector('#personal-info-validation');
const wizardValidationFormStep3 = wizardValidationForm.querySelector('#social-links-validation');
// Wizard next prev button
const wizardValidationNext = [].slice.call(wizardValidationForm.querySelectorAll('.btn-next'));
const wizardValidationPrev = [].slice.call(wizardValidationForm.querySelectorAll('.btn-prev'));
let validationStepper = new Stepper(wizardValidation, {
linear: true
});
// Account details
const FormValidation1 = FormValidation.formValidation(wizardValidationFormStep1, {
fields: {
formValidationUsername: {
validators: {
notEmpty: {
message: 'The name is required'
},
stringLength: {
min: 6,
max: 30,
message: 'The name must be more than 6 and less than 30 characters long'
},
regexp: {
regexp: /^[a-zA-Z0-9 ]+$/,
message: 'The name can only consist of alphabetical, number and space'
}
}
},
formValidationEmail: {
validators: {
notEmpty: {
message: 'The Email is required'
},
emailAddress: {
message: 'The value is not a valid email address'
}
}
},
formValidationPass: {
validators: {
notEmpty: {
message: 'The password is required'
}
}
},
formValidationConfirmPass: {
validators: {
notEmpty: {
message: 'The Confirm Password is required'
},
identical: {
compare: function() {
return wizardValidationFormStep1.querySelector('[name="formValidationPass"]').value;
},
message: 'The password and its confirm are not the same'
}
}
}
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap5: new FormValidation.plugins.Bootstrap5({
// Use this for enabling/changing valid/invalid class
// eleInvalidClass: '',
eleValidClass: ''
}),
autoFocus: new FormValidation.plugins.AutoFocus(),
submitButton: new FormValidation.plugins.SubmitButton()
}
init: instance => {
instance.on('plugins.message.placed', function(e) {
//* Move the error message out of the `input-group` element
if (e.element.parentElement.classList.contains('input-group')) {
e.element.parentElement.insertAdjacentElement('afterend', e.messageElement);
}
});
}
}).on('core.form.valid', function() {
// Jump to the next step when all fields in the current step are valid
validationStepper.next();
});
// Personal info
const FormValidation2 = FormValidation.formValidation(wizardValidationFormStep2, {
fields: {
formValidationFirstName: {
validators: {
notEmpty: {
message: 'The first name is required'
}
}
},
formValidationLastName: {
validators: {
notEmpty: {
message: 'The last name is required'
}
}
},
formValidationCountry: {
validators: {
notEmpty: {
message: 'The Country is required'
}
}
},
formValidationLanguage: {
validators: {
notEmpty: {
message: 'The Languages is required'
}
}
}
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap5: new FormValidation.plugins.Bootstrap5({
// Use this for enabling/changing valid/invalid class
// eleInvalidClass: '',
eleValidClass: ''
}),
autoFocus: new FormValidation.plugins.AutoFocus(),
submitButton: new FormValidation.plugins.SubmitButton()
}
}).on('core.form.valid', function() {
// Jump to the next step when all fields in the current step are valid
validationStepper.next();
});
// Bootstrap Select (i.e Language select)
if (selectPicker.length) {
selectPicker.each(function() {
var $this = $(this);
$this.selectpicker().on('change', function() {
FormValidation2.revalidateField('formValidationLanguage');
});
});
}
// Select 2 (i.e Country select)
if (select2.length) {
select2
.select2({
placeholder: 'Select an country'
})
.on('change.select2', function() {
// Revalidate the color field when an option is chosen
FormValidation2.revalidateField('formValidationCountry');
});
}
// Social links
const FormValidation3 = FormValidation.formValidation(wizardValidationFormStep3, {
fields: {
formValidationTwitter: {
validators: {
notEmpty: {
message: 'The Twitter URL is required'
},
uri: {
message: 'The URL is not proper'
}
}
},
formValidationFacebook: {
validators: {
notEmpty: {
message: 'The Facebook URL is required'
},
uri: {
message: 'The URL is not proper'
}
}
},
formValidationGoogle: {
validators: {
notEmpty: {
message: 'The Google URL is required'
},
uri: {
message: 'The URL is not proper'
}
}
},
formValidationLinkedIn: {
validators: {
notEmpty: {
message: 'The LinkedIn URL is required'
},
uri: {
message: 'The URL is not proper'
}
}
}
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap5: new FormValidation.plugins.Bootstrap5({
// Use this for enabling/changing valid/invalid class
// eleInvalidClass: '',
eleValidClass: ''
}),
autoFocus: new FormValidation.plugins.AutoFocus(),
submitButton: new FormValidation.plugins.SubmitButton()
}
}).on('core.form.valid', function() {
// You can submit the form
// wizardValidationForm.submit()
// or send the form data to server via an Ajax request
// To make the demo simple, I just placed an alert
alert('Submitted..!!');
});
wizardValidationNext.forEach(item => {
item.addEventListener('click', event => {
// When click the Next button, we will validate the current step
switch (validationStepper._currentIndex) {
case 0:
FormValidation1.validate();
break;
case 1:
FormValidation2.validate();
break;
case 2:
FormValidation3.validate();
break;
default:
break;
}
});
});
wizardValidationPrev.forEach(item => {
item.addEventListener('click', event => {
switch (validationStepper._currentIndex) {
case 2:
validationStepper.previous();
break;
case 1:
validationStepper.previous();
break;
case 0:
default:
break;
}
});
});
}We have created useful examples form wizard by keeping UX in mind. Materialize provides three advanced form wizard examples which you can use in a real-life application. Advanced form wizard use BS Stepper, Custom inputs, Select2, Bootstrap Select, CleaveJS and Formvalidation.