Form controls

Textual form controls like <input>s, <select>s, and <textarea>s are styled with the .form-controlclass. Included are styles for general appearance, focus state, sizing, and more.

Full Name

Email address

Example select

Option 1 Option 2 Option 3 Option 4 Option 5

Example textarea

Sizing

Set heights using classes like .form-control-lgand .form-control-sm.

Readonly

Add the readonlyboolean attribute on an input to prevent modification of the input’s value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.

Custom styled checkboxes and radios

Each checkbox and radio is wrapped in a <div>to create our custom control and a <label>for the accompanying text.

Default

Inline

Add class .checkbox--inlineor .radio--inlineto make the inputs inline

Disabled

Add attribute diasbledon the input elements where you need to make them disabled