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

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

Form Checkboxes

Form Checkbox

Form Checkbox checked

Form Checkboxes Right

Form Checkbox Right

Form Checkbox Right checked

Radios

Form Radios

Form Radio

Form Radio checked

Form Radios Right

Form Radio Right

Form Radio Right checked

Inline Forms

Use the .form-inline class to display a series of labels, form controls, and buttons on a single horizontal row.

Remember me

Auto sizing

The example below uses a flexbox utility to vertically center the contents and changes .col to .col-auto so that your columns only take up as much space as needed. Put another way, the column sizes itself based on the contents.

Remember me

Floating labels

Create beautifully simple form labels that float over your input fields.

First Name

Last Name

Email address

Works with selects

Check me out

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.

Switch Examples

Default switch checkbox input

Checked switch checkbox input

Switch Sizes

Medium Size Switch

Large Size Switch

Disable Switch

Disabled Switch

Disabled Checked Switch

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.

Inline Form With Stack

Create an inline form with .hstack: