Form controls

Give textual form controls like input and textarea an upgrade with custom styles, sizing, focus states, and more.

Sizing

Set heights using classes like .form-control-lg and .form-control-sm

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg example" />
<input class="form-control" type="text" placeholder="Default input" aria-label="default input example" />
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example" />

Controls

• Add the disabled boolean attribute on an input to give it a grayed out appearance, remove pointer events, and prevent focusing.

• Add the readonly boolean attribute on an input to prevent modification of the input’s value. readonly inputs can still be focused and selected, while disabled inputs cannot.

<input class="form-control" type="text" placeholder="Disabled input" aria-label="Disabled input example" disabled="" />
<input class="form-control" type="text" value="Disabled readonly input" aria-label="Disabled input example" disabled="" readonly="" />
<input class="form-control" type="text" value="Readonly input here..." aria-label="readonly input example" readonly="" />