Basic Elements

Textual inputs

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

Form layouts

Form groups
Horizontal form
Inline forms layout
Inline forms layout used by hstack


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

Range Inputs

Create custom <input type="range"> controls with .form-range.

Min and max

Range inputs have implicit values for min and max—0 and 100, respectively.


By default, range inputs “snap” to integer values. To change this, you can specify a step value.


Form Checkboxes
Form Checkboxes Right


Form Radios
Form Radios Right


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.

Switch examples
Switch sizes

File browser

Default file input
Custom file input
© Symox.
Crafted with by Themesbrand