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 step
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
  • This is the second step
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
  • This is the last step
    Duis 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>