Forms

Email address

Example select 1 2 3 4 5

Example multiple select 1 2 3 4 5

Example textarea

Example file input

Forms - Sizing

Large select

Default select

Small select

Readonly

If you want to have <input readonly> elements in your form styled as plain text, use the .form-control-plaintext class to remove the default form field styling and preserve the correct margin and padding.

Email

Forms - Checkboxes (Stacked)

Default checkbox

Disabled checkbox

Forms - Checkboxes (Inline)

1

2

3 (disabled)

Forms - Radios (Stacked)

Default radio

Second default radio

Disabled radio

Forms - Radios (Inline)

1

2

3 (disabled)

Forms - Checkboxes & Radio (Without labels)

Forms - Layouts - Default

Example label

Another label

Forms - Layouts - Grid

Type 1

Type 2

Forms - Layouts - Horizontal Form

Email

Password

Radios

First radio

Second radio

Third disabled radio

Checkbox

Example checkbox

Sign in

Forms - Layouts - Horizontal Form (Sizing)

Be sure to use .col-form-label-sm or .col-form-label-lg to your <label>s or <legend>s to correctly follow the size of .form-control-lg and .form-control-sm.

Email

Email

Email

Forms - Layouts - Horizontal Form (Auto-sizing)

Name

Username

@

Remember me

Submit

Forms - Inline

Name Username

@

Remember me

Submit

Forms - Help Text

Password Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.

Password Must be 8-20 characters long.

Forms - Disabled

Disabled input

Disabled select menu Disabled select

Can't check this

Submit

Forms - Validation

Type 1

Type 2

Requires a form container with class needs-validation and was-validated. See code for more.

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.

Submit form

Forms - Custom (Checkbox)

Custom Checkbox

Custom Checkbox with Error Handling

Example invalid feedback text

Forms - Custom (Radio)

Toggle this custom radio

Or toggle this other custom radio

More example invalid feedback text

Toggle this custom radio

Or toggle this other custom radio

More example invalid feedback text

Forms - Custom (Others)

Open this select menu One Two Three

Example invalid custom select feedback

Choose file...

Example invalid custom file feedback

Forms - Input group

Your vanity URL

Forms - Input group (Multiple addons)

Forms - Input group (Sizing)

Forms - Input group (Checkboxes and radio addons)

Forms - Input group (Multiple Inputs)

Forms - Input group (Button addons)

Forms - Input group (Buttons with dropdowns)

Forms - Input group (Segmented buttons)

Forms - Input group (Custom select)

Forms - Input group (Custom select)