Basic form

The template uses the components and validations of the bootstrap form. Also, the template includes the validation class .has-error.

By design .has-error class is applicable only for .form-group.

Field name is required.
Field email is invalid.
Maximum 255 characters.
Source code
<div class="card">
  <div class="card-body">
    <div class="row">
      <div class="col-12 col-md-4 col-lg-4">
        <div class="form-group has-error">
          <label>Name</label>
          <input type="text" class="form-control">
          <small class="text-danger">Field name is required.</small>
        </div>
      </div>
      <div class="col-12 col-md-4 col-lg-4">
        <div class="form-group has-error">
          <label>Email</label>
          <input type="text" class="form-control">
          <small class="text-danger">Field email is invalid.</small>
        </div>
      </div>
      <div class="col-12 col-md-4 col-lg-4">
        <div class="form-group">
          <label>
            Company <small class="text-muted">(optional)</small>
          </label>
          <input type="text" class="form-control">
        </div>
      </div>
    </div>
    <div>
      <label>
        Notes <small class="text-muted">(optional)</small>
      </label>
      <textarea rows="3" class="form-control"></textarea>
      <small class="text-muted">Maximum 255 characters.</small>
    </div>
  </div>
</div>
<div class="form-group">
  <button type="submit" class="btn btn-success">
    Save
  </button>
  <button type="button" class="btn btn-outline-secondary">
    Cancel
  </button>
</div>