Default inputs

Default text fields.

Please enter your username
Please enter your email
Please enter your password

Floating labels

Use the .bmd-label-floating in the label element for custom floating labels.

Please enter your username
Please enter your password
Write something

Validation states

Use the .form-control-success, .form-control-warning and the .form-control-danger classes for custom validation states.

Example help text that remains unchanged.
Example help text that remains unchanged.
Example help text that remains unchanged.

Inline forms

Please enter your username
Please enter your password

Inline forms using floating labels

Please enter your username
Please enter your password

Inputs and labels using the primary color

Add the .form-primary class to the form element for primary color inputs and floating labels.

Please enter your username
Please enter your email

Inputs and labels using the secondary color

Add the .form-secondary class to the form element for secondary color inputs and floating labels.

Please enter your username
Please enter your email

Inputs and labels using the info color

Add the .form-info class to the form element for info color inputs and floating labels.

Please enter your username
Please enter your email

Inputs and labels using the success color

Add the .form-success class to the form element for success color inputs and floating labels.

Please enter your username
Please enter your email

Inputs and labels using the warning color

Add the .form-warning class to the form element for warning color inputs and floating labels.

Please enter your username
Please enter your email

Inputs and labels using the danger color

Add the .form-danger class to the form element for danger color inputs and floating labels.

Please enter your username
Please enter your email

Inputs and labels using the primary color

Add the .form-primary class to the form element for primary color inputs and floating labels.

Please enter your username
Please enter your email
Please enter your username
Please enter your email

Inputs and labels using the secondary color

Add the .form-secondary class to the form element for secondary color inputs and floating labels.

Please enter your username
Please enter your email
Please enter your username
Please enter your email

Inputs and labels using the info color

Add the .form-info class to the form element for info color inputs and floating labels.

Please enter your username
Please enter your email
Please enter your username
Please enter your email

Inputs and labels using the success color

Add the .form-success class to the form element for success color inputs and floating labels.

Please enter your username
Please enter your email
Please enter your username
Please enter your email

Inputs and labels using the warning color

Add the .form-warning class to the form element for warning color inputs and floating labels.

Please enter your username
Please enter your email
Please enter your username
Please enter your email

Inputs and labels using the danger color

Add the .form-danger class to the form element for danger color inputs and floating labels.

Please enter your username
Please enter your email
Please enter your username
Please enter your email