Form Elements

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 Checkboxes and Radios

These are custom styled checkbox and radios in order to prevent browser's default design.

Default

Inline

Add class .custom-control-inline to make the inputs inline

Disabled

Custom checkboxes and radios can also be disabled. Add the disabled boolean attribute to the <input> and the custom indicator and label description will be automatically styled.