<form class="form"> <div class="card-body"> <div class="form-group"> <label class="form-control-label" >Input with success</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</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</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</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" >Left Addon</label> <div class="input-group"> <div class="input-group-prepend"><span class="input-group-text" ><i class="la la-bar-chart "></i></span></div> <input type="text" class="form-control is-valid" placeholder="Email" /> </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" >Right Addon</label> <div class="input-group"> <input type="text" class="form-control is-invalid" value="4444a" placeholder="Email" /> <div class="input-group-append"><span class="input-group-text" >USD</span></div> </div> <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 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>
<form class="form"> <div class="card-body"> <div class="form-group validated"> <label class="form-control-label" >Left Icon</label> <div class="input-group"> <div class="input-group-prepend"><span class="input-group-text" ><i class="la la-map-marker "></i></span></div> <input type="text" class="form-control is-valid" placeholder="Email"/> </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" >Right Icon</label> <div class="input-group"> <input type="text" class="form-control is-invalid" placeholder="Email"/> <div class="input-group-append"><span class="input-group-text" ><i class="la la-unlock-alt "></i></span></div> </div> <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-primary font-weight-bold mr-2">Submit</button> <button type="submit" class="btn btn-light-primary font-weight-bold">Cancel</button> </div> </form>