Input Style

Use the input classes on an .input-default, input-flat, .input-rounded for Default input.

Textarea

Checkboxes

Inline Checkboxes

Use the .form-check-inline class if you want the checkboxes to appear on the same line

Radio Buttons

Radio Inline

Select List

Bootstrap Input File

Input Size

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

Select Size

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

Readonly

Add the readonly boolean attribute on an input to prevent modification of the input’s value

Readonly

use the .form-control-plaintext class to remove the default form field styling and preserve the correct margin and padding.

Inline Form

use the .form-inline class to for inline form styles.

Form grid

Form Row

Vertical Form

Vertical Form

Checkbox

Form Label Size

Be sure to use .col-form-label-sm .col-form-label-lg correctly follow the size of .form-control-lg and .form-control-sm.

Column size

Auto-sizing

The example below uses a flexbox utility to vertically center the contents and changes .col .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.

@

Custom Select

Custom Checkbox

Disabled forms

Add the disabled boolean attribute on an input to prevent user interactions and make it appear lighter.

Input Group

@
@example.com
https://example.com
$
.00
With textarea

Input Group Size

Small
Default
Large

Checkboxes and radios

Multiple inputs

First and last name

Multiple addons

$ 0.00
$ 0.00

Button addons

Segmented buttons

Custom select

Custom file input

Upload
Upload