Find helper text here for given textbox.


Use .round or .sqaure along with .form-control for round/square bordered input.

Horizontal Input

Add .col-form-label to your <label> so that they’re vertically centered with their associated form controls.

File Input

Input with Icons

Use .position-relative with .form-group and use .has-icon-{left/right} for icon on left/right side.


Use .form-control-{lg/sm} for large/small input box.

Validation States

You can indicate invalid and valid form fields with .is-invalid and .is-valid. Note that .invalid-feedback is also supported with these classes.

This is valid state.
This is invalid state.

Validation States with Tooltips

Use form.needs-validation and swap .{valid/invalid}-feedback with .{valid/invalid}-tooltip to display validation feedback in a styled tooltip.

Looks good!
Looks good!
Please provide a valid city.