The Stepper component serves as a container for organizing and presenting sequential steps of a process.
<!-- stepper -->
<div id="stepperForm" class="bs-stepper">
<!-- Stepper Button -->
<div class="bs-stepper-header p-0 bg-transparent mb-4" role="tablist">
<div class="step"
data-target="#test-l-1">
<button type="button" class="step-trigger" role="tab"
id="stepperFormtrigger1" aria-controls="test-l-1">
<span class="bs-stepper-circle me-2 d-flex
align-items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-users"
width="20"
height="20"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none"
d="M0 0h24v24H0z" fill="none"
/>
<path d="M9 7m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" />
<path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
<path d="M16 3.13a4 4 0 0 1 0 7.75" />
<path d="M21 21v-2a4 4 0 0 0 -3 -3.85" />
</svg>
</span>
<span class="bs-stepper-label">Email</span>
</button>
</div>
<div class="bs-stepper-line"></div>
<!-- Stepper Button -->
<div class="step"
data-target="#test-l-2">
<button type="button" class="step-trigger" role="tab"
id="stepperFormtrigger2" aria-controls="test-l-2">
<span class="bs-stepper-circle me-2 d-flex
align-items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-shopping-bag"
width="20"
height="20"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none"
d="M0 0h24v24H0z" fill="none"
/>
<path d="M6.331 8h11.339a2 2 0 0 1 1.977 2.304l-1.255 8.152a3
3 0 0 1 -2.966 2.544h-6.852a3 3 0 0 1 -2.965 -2.544l-1.255 -8.152a2 2 0 0 1 1.977
-2.304z" />
<path d="M9 11v-5a3 3 0 0 1 6 0v5" />
</svg>
</span>
<span class="bs-stepper-label">Password</span>
</button>
</div>
<div class="bs-stepper-line"></div>
<!-- Stepper Button -->
<div class="step"
data-target="#test-l-3">
<button type="button" class="step-trigger" role="tab"
id="stepperFormtrigger3" aria-controls="test-l-3">
<span class="bs-stepper-circle me-2 d-flex
align-items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-credit-card"
width="20"
height="20"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none"
d="M0 0h24v24H0z" fill="none"></path>
<path d="M3 5m0 3a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v8a3 3 0 0 1
-3 3h-12a3 3 0 0 1 -3 -3z"></path>
<path d="M3 10l18 0"></path>
<path d="M7 15l.01 0"></path>
<path d="M11 15l2 0"></path>
</svg>
</span>
<span class="bs-stepper-label">Validate</span>
</button>
</div>
</div>
<!-- card -->
<div class="card card-lg">
<div class="card-body px-6 py-5">
<!-- Stepper content -->
<div class="bs-stepper-content">
<form onSubmit="return false">
<!-- Content one -->
<div id="test-l-1" role="tabpanel" class="bs-stepper-pane fade" aria-labelledby="stepperFormtrigger1">
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email"
class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" />
<div id="emailHelp" class="form-text">We'll never share your email with anyone
else.</div>
</div>
<!-- Button -->
<div class="d-flex justify-content-end">
<button class="btn btn-primary" onclick="stepperForm.next()">Next</button>
</div>
</div>
<!-- Content two -->
<div id="test-l-2" role="tabpanel" class="bs-stepper-pane fade" aria-labelledby="stepperFormtrigger2">
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" />
</div>
<!-- Button -->
<div class="d-md-flex justify-content-between mt-4">
<button class="btn btn-outline-primary mb-2 mb-md-0" onclick="stepperForm.previous()">Back</button>
<!-- Button -->
<button class="btn btn-primary" onclick="stepperForm.next()">Continue</button>
</div>
</div>
<!-- Content three -->
<div id="test-l-3" role="tabpanel" class="bs-stepper-pane fade" aria-labelledby="stepperFormtrigger3">
<p class="text-center fs-4">Form Submit</p>
<!-- Button -->
<div class="d-flex justify-content-between">
<!-- Button -->
<button class="btn btn-outline-primary mt-3" onclick="stepperForm.previous()">Back</button>
<!-- Button -->
<button type="submit" class="btn btn-primary mt-3" onclick="
location.href='#!' ">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>