Inputs
Basic
Styles
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.
Sizes
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.