Forms

  1. Home
  2. Forms

Simple form

Be sure to use an appropriate type attribute on all inputs (e.g., email for email address or number for numerical information) to take advantage of newer input controls like email verification, number selection, and more.
We'll never share your email with anyone else.
We'll never share your email with anyone else.

Sizing and Readonly

Set heights using classes like .form-control-lg and .form-control-sm. Add the readonly boolean attribute on an input to prevent modification of the input’s value.

Form grid

More complex forms can be built using our grid classes. Use these for form layouts that require multiple columns, varied widths, and additional alignment options.

Horizontal form

Create horizontal forms with the grid by adding the .row class to form groups and using the .col-*-* classes to specify the width of your labels and controls.
Checkbox

Inline forms

Use the .form-inline class to display a series of labels, form controls, and buttons on a single horizontal row. Form controls within inline forms vary slightly from their default states.
@

Help text

Block-level help text in forms can be created using .form-text (previously known as .help-block in v3). Inline help text can be flexibly implemented using any inline HTML element and utility classes like .text-muted.
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.

Server side

We recommend using client side validation, but in case you require server side, you can indicate invalid and valid form fields with .is-invalid and .is-valid. Note that .invalid-feedback is also supported with these classes.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.

Supported elements

Our example forms show native textual input above, but form validation styles are available for our custom form controls, too.