<form class="form">
       <div class="card-body">
        <div class="form-group">
         <label class="form-control-label" >Input with success <span class="text-danger">*</span></label>
         <input type="text" class="form-control is-valid" />
         <div class="valid-feedback">Success! You've done it.</div>
         <span class="form-text text-muted">Example help text that remains unchanged.</span>
        </div>
        <div class="form-group">
         <label class="form-control-label" >Input with error <span class="text-danger">*</span></label>
         <input type="text" class="form-control is-invalid" />
         <div class="invalid-feedback">Shucks, check the formatting of that and try again.</div>
         <span class="form-text text-muted">Example help text that remains unchanged.</span>
        </div>
       </div>
       <div class="card-footer">
        <button type="submit" class="btn btn-success font-weight-bold mr-2">Submit</button>
        <button type="submit" class="btn btn-light-success font-weight-bold">Cancel</button>
       </div>
      </form>
      

      <form class="form">
      <div class="card-body">
       <div class="form-group row ">
        <label class="col-form-label col-lg-3" >Input with success <span class="text-danger">*</span></label>
        <div class="col-lg-9">
         <input type="text" class="form-control is-valid" />
         <div class="valid-feedback">Success! You've done it.</div>
         <span class="form-text text-muted">Example help text that remains unchanged.</span>
        </div>
       </div>
       <div class="form-group row ">
        <label class="col-form-label col-lg-3" >Input with error <span class="text-danger">*</span></label>
        <div class="col-lg-9">
         <input type="text" class="form-control is-invalid" />
         <div class="invalid-feedback">Shucks, check the formatting of that and try again.</div>
         <span class="form-text text-muted">Example help text that remains unchanged.</span>
        </div>
       </div>
      </div>
      <div class="card-footer">
       <div class="row">
        <div class="col-lg-9 ml-lg-auto">
         <button type="submit" class="btn btn-primary font-weight-bold mr-2">Submit</button>
         <button type="submit" class="btn btn-light-primary font-weight-bold">Cancel</button>
        </div>
       </div>
      </div>
     </form>
     

      <form class="form">
       <div class="card-body">
        <div class="form-group validated">
         <label class="form-control-label" >Checkboxes</label>
         <div class="checkbox-list">
          <label class="checkbox">
           <input type="checkbox"/>
           <span></span>
           Option 1
          </label>
          <label class="checkbox">
           <input type="checkbox"/>
           <span></span>
           Option 2
          </label>
          <label class="checkbox">
           <input type="checkbox"/>
           <span></span>
           Option 3
          </label>
         </div>
         <div class="valid-feedback">Success! You've done it.</div>
         <span class="form-text text-muted">Example help text that remains unchanged.</span>
        </div>
        <div class="form-group validated">
         <label class="form-control-label" >Inline Checkboxes</label>
         <div class="checkbox-inline">
          <label class="checkbox checkbox-outline">
           <input type="checkbox"/>
           <span></span>
           Option 1
          </label>
          <label class="checkbox checkbox-outline">
           <input type="checkbox"/>
           <span></span>
           Option 2
          </label>
          <label class="checkbox checkbox-outline">
           <input type="checkbox"/>
           <span></span>
           Option 3
          </label>
         </div>
         <div class="invalid-feedback">Success! You've done it.</div>
         <span class="form-text text-muted">Example help text that remains unchanged.</span>
        </div>
        <div class="form-group validated">
         <label class="form-control-label" >Radios</label>
         <div class="radio-list">
          <label class="radio radio-outline">
           <input type="radio"/>
           <span></span>
           Option 1
          </label>
          <label class="radio radio-outline">
           <input type="radio"/>
           <span></span>
           Option 2
          </label>
          <label class="radio radio-outline">
           <input type="radio"/>
           <span></span>
           Option 3
          </label>
         </div>
         <div class="valid-feedback">Success! You've done it.</div>
         <span class="form-text text-muted">Example help text that remains unchanged.</span>
        </div>
        <div class="form-group validated">
         <label class="form-control-label" >Inline Radios</label>
         <div class="radio-inline">
          <label class="radio">
           <input type="radio"/>
           <span></span>
           Option 1
          </label>
          <label class="radio">
           <input type="radio"/>
           <span></span>
           Option 2
          </label>
          <label class="radio">
           <input type="radio"/>
           <span></span>
           Option 3
          </label>
         </div>
         <div class="invalid-feedback">Success! You've done it.</div>
         <span class="form-text text-muted">Example help text that remains unchanged.</span>
        </div>
       </div>
       <div class="card-footer">
        <button type="submit" class="btn btn-success font-weight-bold mr-2">Submit</button>
        <button type="submit" class="btn btn-light-success font-weight-bold">Cancel</button>
       </div>
      </form>