Stepper
Horizontal steppers are ideal when the contents of one step depend on an earlier step.
Avoid using long step names in horizontal steppers.
-
This is the first stepLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
-
This is the second stepUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
-
This is the last stepDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
<ul class="stepper" data-mdb-stepper="stepper">
<li class="stepper-step stepper-active">
<div class="stepper-head">
<span class="stepper-head-icon"></span>
<span class="stepper-head-text">This is the first step</span>
</div>
<div class="stepper-content py-3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua
</div>
</li>
<li class="stepper-step">
<div class="stepper-head">
<span class="stepper-head-icon"></span>
<span class="stepper-head-text">This is the second step</span>
</div>
<div class="stepper-content py-3">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat
</div>
</li>
<li class="stepper-step">
<div class="stepper-head">
<span class="stepper-head-icon"></span>
<span class="stepper-head-text">This is the last step</span>
</div>
<div class="stepper-content py-3">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur
</div>
</li>
</ul>