Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.
<script src="../assets/plugins/jquery-steps/build/jquery.steps.min.js"></script>
Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.
<script>
// Initialization
$("#step-forms").steps();
</script>
You can utilize .step-form{-sm|-md|-lg|-xl} classes to change when they are horizontally aligned.
This example is horizontally aligned above -md resolution and vertically below. Resize the window to see it in action.
<div id="step-forms-basic" class="step-forms step-form-md">
<!-- start step 01 -->
<h3>Personal Info</h3>
<section>
<div class="row">
<div class="col-md-6 col-xl-4 mb-3">
<label for="">First name</label>
<input type="text" class="form-control">
</div>
<div class="col-md-6 col-xl-4 mb-3">
<label for="">Middle name</label>
<input type="text" class="form-control">
</div>
<div class="col-md-6 col-xl-4 mb-3">
<label for="">Last name</label>
<input type="text" class="form-control">
</div>
<div class="col-md-6 col-xl-4 mb-3">
<label for="">Email Id</label>
<input type="text" class="form-control">
</div>
<div class="col-md-6 col-xl-4 mb-3">
<label for="">Mobile number</label>
<input type="text" class="form-control">
</div>
<div class="col-md-6 col-xl-4">
<label for="">Country</label>
<select name="" id="" class="form-select">
<option value="">Select country</option>
<option value="1">India</option>
<option value="2">UK</option>
<option value="3">USA</option>
</select>
</div>
</div>
</section>
<!-- end step 01 -->
<!-- start step 02 -->
<h3>User Settings</h3>
<section>
<div class="row">
<div class="col-md-6 col-xl-4 mb-3">
<label for="">Username</label>
<input type="text" class="form-control">
</div>
<div class="col-md-6 col-xl-4 mb-3">
<label for="">Password</label>
<input type="text" class="form-control">
</div>
<div class="col-md-6 col-xl-4">
<label for="">Confirm password</label>
<input type="text" class="form-control">
</div>
</div>
</section>
<!-- end step 02 -->
<!-- start step 03 -->
<h3>Payment Info</h3>
<section>
<div class="row">
<div class="col-md-6 col-xl-6 mb-3">
<label for="">Payment mode</label>
<select name="" id="" class="form-select">
<option value="">Select mode</option>
<option value="1">COD</option>
<option value="2">Online</option>
<option value="3">Other</option>
</select>
</div>
<div class="col-md-6 col-xl-6">
<label for="">Amount</label>
<input type="text" value="$50" disabled class="form-control">
</div>
</div>
</section>
<!-- end step 03 -->
</div>
<script>
$("#step-forms-basic").steps({
headerTag: "h3",
bodyTag: "section",
transitionEffect: "slideLeft",
autoFocus: true
});
</script>