<ul class="stepper" data-mdb-stepper-init data-mdb-stepper-linear="true">

  <li class="stepper-step stepper-active">

    <div class="stepper-head">

      <span class="stepper-head-icon">1</span>

      <span class="stepper-head-text">step1</span>

    </div>

    <div class="stepper-content py-3">

        <div class="form-outline" data-mdb-input-init>

          <input type="text" id="events-input-1" class="form-control" />

          <label class="form-label" for="events-input-1">step 1</label>

        </div>

    </div>

  </li>

  <li class="stepper-step">

    <div class="stepper-head">

      <span class="stepper-head-icon">2</span>

      <span class="stepper-head-text">step2</span>

    </div>

    <div class="stepper-content py-3">

        <div class="form-outline" data-mdb-input-init>

          <input type="text" id="events-input-2" class="form-control" />

          <label class="form-label" for="events-input-2">step 2</label>

        </div>

    </div>

  </li>

  <li class="stepper-step">

    <div class="stepper-head">

      <span class="stepper-head-icon">3</span>

      <span class="stepper-head-text">step3</span>

    </div>

    <div class="stepper-content py-3">

        <div class="form-outline" data-mdb-input-init>

          <input type="text" id="events-input-3" class="form-control" />

          <label class="form-label" for="events-input-3">step 3</label>

        </div>

    </div>

  </li>

</ul>