Form Control
Form controlBasic example
Form controlSizing

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

Form controlDisabled

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

Form controlReadonly

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.

Form controlReadonly plain text

If you want to have <input readonly> elements in your form styled as plain text, use the .form-control-plaintext class to remove the default form field styling and preserve the correct margin and padding.

Form controlFile input
Form controlColor
Form controlDatalists

Datalists allow you to create a group of <option>s that can be accessed (and autocompleted) from within an <input>. These are similar to <select> elements, but come with more menu styling limitations and differences. While most browsers and operating systems include some support for <datalist> elements, their styling is inconsistent at best.

Learn more about support for datalist elements.