<div class="card p-4 mt-3 my-2">

<div class="card-body">

  <h5 class="card-title mb-3">FORM RESET</h5>

  <form id="user-info" enctype="multipart/form-data" method="post" action="/Dev/Test">

  <div class="form-row">

   <div class="form-group col-6">

     <label for="first-name">First Name</label>

      <input type="text" id="first-name" class="form-control form-control-sm">

    </div>

    <div class="form-group col-6">

      <label for="last-name">Last Name</label>

      <input type="text" id="last-name" class="form-control form-control-sm">

    </div>

    <div class="col-4">

      <label class="mb-0">Gender</label>

      <select class="mdb-select">

        <option value="M">Male</option>

        <option value="F">Female</option>

      </select>

    </div>  

  </div>

  <div class="d-flex justify-content-center">

    <button type="reset" class="btn btn-sm btn-danger waves-effect waves-light">Reset</button>

    <button id="reset-btn" type="reset" class="btn btn-sm btn-warning waves-effect waves-light">Reset from js</button>

  </div>

  <small class="text-muted">After pressing reset the wrapper of the 'Gender' select will by multiplied</small>

  </form>

</div>

</div>