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>