Standard form

Bootstrap applies display:block and width: 100% to almost all form controls, and as such they will stack vertically.

We'll never share your email with anyone else.
Password must contain an upper case letter, a number, and a special character.
Limit 100MB per file.

Inline form

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


Input field Add Ons

Here is an example of an addon in a standard form:

$
.00

Here is an example of the addon in an inline form:

$
.00


Grid form

You can utilize Bootstrap predefined grid classes to create a more structured form layout. Add the class row to form-group and use the .col-*-* to specify the width of the labels and controls. To vertically center the labels with the textual inputs (nearly anything with class form-control) use the form-control-label class inside the HTML element <label></label>.

$
.00

Inline radio buttons and checkboxes

Use the class checkbox-inline and class radio-inline on a series of checkboxes and radio buttons for controls that appear on the same line.


Static control

Class form-control-static can be used in HTML element <p></p> if you need to place plain text next to a form label within a form. It essentiually does the same thing to the <p></p> as form-control-label does to labels. In other words, it vertically centers it.

email@example.com


Disabled states

Boolean attribute disabled can be added to an <input> to prevent user interactions. Disabled inputs appear lighter and a not-allowed cursor.

Boolean attribute disabled can also be added to <fieldset></fieldset> and that would disable all of the controls within.

$
.00

Readonly inputs

Boolean attribute readonly works the same way as boolean attribute disabled with the only difference that cursor does not change shape and retains the stndard cursor.

Another difference between readonly and disabled is that you can't apply readonly to an entire <fieldset>.

$
.00

Control sizing

You can set the height of the control by using classes form-control-sm and form-control-lg.

You can control the width of control by limiting the columns assigned to a grid by using class col-*-*.

In the example above both the label and input fields have been set to size form-control-sm.
In the example above both the label and input fields have been set to size form-control-lg. Furthermore, the width of the input field has been restrictued to 2 column wide.