##### Form Validation

##### Custom Bootstrap Form Validation

For custom Bootstrap form validation messages, you’ll need to add the `novalidate` boolean attribute to your form. For server side validation read full documentation.

First name
Looks good!
Last name
Looks good!
Username
@
Please choose a username.
City
Please provide a valid city.
State
Please provide a valid state.
Zip
Please provide a valid zip.
Agree to terms and conditions
You must agree before submitting.

##### Browser defaults

Not interested in custom validation feedback messages or writing JavaScript to change form behaviors? All good, you can use the browser defaults. Try submitting the form below.

First name
Last name
Username
@
City
State
Zip
Agree to terms and conditions

##### Server side

We recommend using client side validation, but in case you require server side, you can indicate invalid and valid form fields with `.is-invalid` and `.is-valid`. Note that `.invalid-feedback` is also supported with these classes.

First name
Looks good!
Last name
Looks good!
Username
@
Please choose a username.
City
Please provide a valid city.
State
Please provide a valid state.
Zip
Please provide a valid zip.
Agree to terms and conditions
You must agree before submitting.

##### Supported elements

Form validation styles are also available for bootstrap custom form controls.

Textarea
Please enter a message in the textarea.
Check this checkbox
Example invalid feedback text
Toggle this radio
Or toggle this other radio
More example invalid feedback text
Example invalid select feedback
Example invalid form file feedback

##### Tooltips

You can swap the `.{valid|invalid}-feedback` classes for `.{valid|invalid}-tooltip` classes to display validation feedback in a styled tooltip.

First name
Looks good!
Last name
Looks good!
Username
Please choose a unique and valid username.
City
Please provide a valid city.
State
Please provide a valid state.
Zip
Please provide a valid zip.

##### Layout

###### Choose your layout

##### Vertical

##### Horizontal

##### Two Column

##### RTL Mode

###### Change Language Direction.

checkbox

##### Color Scheme

###### Choose Light or Dark Scheme.

##### Blue

##### Light

##### Dark

##### Orange

##### Brink Pink

##### Green

##### Layout Width

###### Choose Fluid or Boxed layout.

##### Fluid

##### Boxed

##### Layout Position

###### Choose Fixed or Scrollable Layout Position.

Fixed Scrollable

##### Topbar Color

###### Choose Light or Dark Topbar Color.

##### Light

##### Dark