<form class="row g-3 needs-validation" novalidate="">
  <div class="col-md-4">
    <label class="form-label" for="validationCustom01">First name</label>
    <input class="form-control" id="validationCustom01" type="text" value="Mark" required="" />
    <div class="valid-feedback">Looks good!</div>
  </div>
  <div class="col-md-4">
    <label class="form-label" for="validationCustom02">Last name</label>
    <input class="form-control" id="validationCustom02" type="text" value="Otto" required="" />
    <div class="valid-feedback">Looks good!</div>
  </div>
  <div class="col-md-4">
    <label class="form-label" for="validationCustomUsername">Username</label>
    <div class="input-group has-validation">
      <span class="input-group-text" id="inputGroupPrepend">@</span>
      <input class="form-control" id="validationCustomUsername" type="text" aria-describedby="inputGroupPrepend" required="" />
      <div class="invalid-feedback">Please choose a username.</div>
    </div>
  </div>
  <div class="col-md-6">
    <label class="form-label" for="validationCustom03">City</label>
    <input class="form-control" id="validationCustom03" type="text" required="" />
    <div class="invalid-feedback">Please provide a valid city.</div>
  </div>
  <div class="col-md-3">
    <label class="form-label" for="validationCustom04">State</label>
    <select class="form-select" id="validationCustom04" required="">
      <option selected="" disabled="" value="">Choose...</option>
      <option>...</option>
    </select>
    <div class="invalid-feedback">Please select a valid state.</div>
  </div>
  <div class="col-md-3">
    <label class="form-label" for="validationCustom05">Zip</label>
    <input class="form-control" id="validationCustom05" type="text" required="" />
    <div class="invalid-feedback">Please provide a valid zip.</div>
  </div>
  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" id="invalidCheck" type="checkbox" value="" required="" />
      <label class="form-check-label mb-0" for="invalidCheck">Agree to terms and conditions</label>
      <div class="invalid-feedback mt-0">You must agree before submitting.</div>
    </div>
  </div>
  <div class="col-12">
    <button class="btn btn-primary" type="submit">Submit form</button>
  </div>
</form>

<form class="row g-3 needs-validation" novalidate="">
  <div class="col-md-4 position-relative">
    <label class="form-label" for="validationTooltip01">First name</label>
    <input class="form-control" id="validationTooltip01" type="text" value="Mark" required="" />
    <div class="valid-tooltip">Looks good!</div>
  </div>
  <div class="col-md-4 position-relative">
    <label class="form-label" for="validationTooltip02">Last name</label>
    <input class="form-control" id="validationTooltip02" type="text" value="Otto" required="" />
    <div class="valid-tooltip">Looks good!</div>
  </div>
  <div class="col-md-4 position-relative">
    <label class="form-label" for="validationTooltipUsername">Username</label>
    <div class="input-group">
      <span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
      <input class="form-control" id="validationTooltipUsername" type="text" aria-describedby="validationTooltipUsernamePrepend" required="" />
      <div class="invalid-tooltip">Please choose a unique and valid username.</div>
    </div>
  </div>
  <div class="col-md-6 position-relative">
    <label class="form-label" for="validationTooltip03">City</label>
    <input class="form-control" id="validationTooltip03" type="text" required="" />
    <div class="invalid-tooltip">Please provide a valid city.</div>
  </div>
  <div class="col-md-3 position-relative">
    <label class="form-label" for="validationTooltip04">State</label>
    <select class="form-select" id="validationTooltip04" required="">
      <option selected="" disabled="" value="">Choose...</option>
      <option>...</option>
    </select>
    <div class="invalid-tooltip">Please select a valid state.</div>
  </div>
  <div class="col-md-3 position-relative">
    <label class="form-label" for="validationTooltip05">Zip</label>
    <input class="form-control" id="validationTooltip05" type="text" required="" />
    <div class="invalid-tooltip">Please provide a valid zip.</div>
  </div>
  <div class="col-12">
    <button class="btn btn-primary" type="submit">Submit form</button>
  </div>
</form>