Simple Form Styling

Email address We'll never share your email with anyone else.

Password

Check me out

Submit

Form controls

Email address

Example select 1 2 3 4 5

Example multiple select 1 2 3 4 5

Example textarea

For file inputs, swap the .form-control for .form-control-file

Example file input

Sizing

Large select

Default select

Small select

Readonly

Email

Email

Password

Inline form

Email

Password

Confirm identity

---

Range Inputs

Set horizontally scrollable range inputs using .form-control-range.

Example Range input

---

Checkboxes and radios

Option one is this and that—be sure to include why it's great

Option two is disabled

Option one is this and that—be sure to include why it's great

Option two can be something else and selecting it will deselect option one

Option three is disabled

1

2

3

1

2

3

---

Form groups

Example label

Another label

---

Form grid

---

Form row

---

complex layouts

Email

Password

Address

Address 2

City

State Choose... ...

Zip

Check me out

Sign in

---

Horizontal form

Email

Password

Radios

Option one is this and that—be sure to include why it's great

Option two can be something else and selecting it will deselect option one

Option three is disabled

Checkbox

Check me out

Sign in

---

Horizontal form label sizing

Email

Email

Email

---

Column sizing

As shown in the previous examples, our grid system allows you to place any number of .cols within a .row or .form-row. They’ll split the available width equally between them. You may also pick a subset of your columns to take up more or less space, while the remaining .cols equally split the rest, with specific column classes like .col-7.

---

Auto-sizing

Name

Username

@

Remember me

Submit

---

And Using custom form controls are supported too:

Preference Choose... One Two Three

Remember my preference

Submit

---

Inline forms

Name Username

@

Remember me

Submit

---

Custom form controls and selects are also supported

Preference Choose... One Two Three

Remember my preference

Submit

---

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.

---

Disabled forms

Disabled input

Disabled select menu Disabled select

Can't check this

Submit

---

Validation

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

---

Browser defaults

First name

Last name

Username

@

City

State

Zip

Agree to terms and conditions

Submit form

---

Server side

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

---

Supported Validation Elements

Textarea

Please enter a message in the textarea.

Check this custom checkbox

Example invalid feedback text

Toggle this custom radio

Or toggle this other custom radio

More example invalid feedback text

Open this select menu One Two Three

Example invalid custom select feedback

Choose file...

Example invalid custom file feedback

---

Tooltips Validations

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.

Submit form

---

Custom forms

Checkboxes

---

Radios

---

Inline

---

Disabled

---

Switches

---

Select menu

Open this select menu One Two Three Open this select menu One Two Three Open this select menu One Two Three Open this select menu One Two Three Open this select menu One Two Three

---

File browser

---

Range

Example range

Range inputs have implicit values for min and max—0 and 100, respectively. You may specify new values for those using the min and max attributes.

Example range

By default, range inputs “snap” to integer values. To change this, you can specify a step value. In the example below, we double the number of steps by using step="0.5".

Example range