Textual inputs

Here are examples of .form-control applied to each textual HTML5 <input> type.

Text

URL

Telephone

Password

Number

Date and time

Date

Month

Week

Time

Color

Select

Custom Select

Sizing

Set heights using classes like .form-control-lg and .form-control-sm.

Range Inputs

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

Example

Custom Range

Checkboxes

Default Checkboxes

Default checkbox

Default checkbox Right

Custom Checkboxes

Custom checkbox

Custom checkbox Right

Radios

Default Radios

Default radio

Default radio Right

Custom Radios

Toggle this custom radio

Or toggle this Right custom radio

Switches

A switch has the markup of a custom checkbox but uses the .custom-switch class to render a toggle switch. Switches also support the disabled attribute.

Toggle this switch element

Disabled switch element

File browser

The file input is the most gnarly of the bunch and requires additional JavaScript if you’d like to hook them up with functional Choose file… and selected file name text.

Choose file