Forms - Sizing


If you want to have <input readonly> elements in your form styled as plain text, use the .form-control-plaintext class to remove the default form field styling and preserve the correct margin and padding.

Forms - Checkboxes (Stacked)

Forms - Checkboxes (Inline)

Forms - Radios (Stacked)

Forms - Radios (Inline)

Forms - Checkboxes & Radio (Without labels)

Forms - Layouts - Default

Forms - Layouts - Grid

Type 1

Type 2

Forms - Layouts - Horizontal Form


Forms - Layouts - Horizontal Form (Sizing)

Be sure to use .col-form-label-sm or .col-form-label-lg to your <label>s or <legend>s to correctly follow the size of .form-control-lg and .form-control-sm.

Forms - Layouts - Horizontal Form (Auto-sizing)


Forms - Inline


Forms - Help Text

Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.

Must be 8-20 characters long.

Forms - Disabled

Forms - Validation

Type 1

Example help text that remains unchanged.

Example help text that remains unchanged.

Example help text that remains unchanged.

Type 2

Requires a form container with class needs-validation and was-validated. See code for more.

Looks good!
Looks good!
Please choose a username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
You must agree before submitting.

Forms - Custom (Checkbox)

Example invalid feedback text

Forms - Custom (Radio)

More example invalid feedback text
More example invalid feedback text

Forms - Custom (Others)

Example invalid custom select feedback
Example invalid custom file feedback

Forms - Input group



With textarea

Forms - Input group (Multiple addons)

$ 0.00

$ 0.00

Forms - Input group (Sizing)


Forms - Input group (Checkboxes and radio addons)

Forms - Input group (Multiple Inputs)

First and Last Name

Forms - Input group (Button addons)

Forms - Input group (Buttons with dropdowns)

Forms - Input group (Segmented buttons)

Forms - Input group (Custom select)

Forms - Input group (Custom select)