Styles

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

Rounded Input

Square Input

Horizontal Input

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

First Name

Last Name

Input with Icons

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

Left Icon

Right Icon

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.

Valid State

This is valid state.

Invalid State

This is invalid state.

Validation States with Tooltips (Template Driven Form)

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

Validation States with Tooltips (Reactive Form)