Forms Elements

Textual inputs

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


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

Range Inputs

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

Custom Range


Form Checkboxes
Form Checkboxes Right


Form Radios
Form Radios Right


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

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.