Form controls

Textual form controls like <input>s, <select>s, and <textarea>s are styled with the .form-control class. 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-lg and .form-control-sm.

Readonly

Add the readonly boolean 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--inline or .radio--inline to make the inputs inline

Disabled

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