Input Style

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

Textarea

Checkboxes

Inline Checkboxes

Use the .form-check-inlineclass 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 readonlyboolean attribute on an input to prevent modification of the input’s value

Readonly

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

Inline Form

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

Form grid

Form Row

Vertical Form

Vertical Form

Form Label Size

Be sure to use .col-form-label-sm .col-form-label-lgcorrectly 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-autoso 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 disabledboolean attribute on an input to prevent user interactions and make it appear lighter.

Input Group

Input Group Size

Checkboxes and radios

Multiple inputs

Multiple addons

Button addons

Buttons with dropdowns

Segmented buttons

Custom select

Custom file input