Form Elements

Textual Inputs

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

Floating Labels

Wrap a pair of <input class="form-control"> and <label> elements in .form-floating to enable floating labels

Horizontal Form

Be sure to add .col-form-label to your <label>s as well so they’re vertically centered with their associated form controls.

Radios

Input Sizing

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

Range Inputs

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

By default, range inputs.

You can specify a step value.

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

Checkboxes

Create Checkbox <input type="checkbox"> controls with .form-check-input.

Basic
Right Side
Inline
Available Colors

Add class .form-check-* for a color Checkboxes

Radios

Create Radios Custom <input type="radio"> controls with .form-check-input.

Basic
Right Side
Inline
Available Colors

Add class .form-radio-* for a color Radios

Switches

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.

Basic
Sizes

File Browser

Create File Browser Custom <input type="file"> controls with .form-control.

Sizes
Custom
© Samply.
Design & Develop by Pichforest