bootstrap/site/content/docs/4.3/forms/form-control.md

layout	title	description	group	toc
docs	Form controls	Give textual form controls like `<input>`s and `<textarea>`s an upgrade with custom styles, sizing, focus states, and more.	forms	true

Example

{{< example >}}

Email address

Example textarea

{{< /example >}}

Sizing

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

{{< example >}} {{< /example >}}

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.

{{< example >}} {{< /example >}}

Readonly 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.

{{< example >}}

Email

Password

{{< /example >}}

{{< example >}}

Email

Password

Confirm identity {{< /example >}}

Color

On macOS:

• Chrome shows the native color picker
• Safari shows a custom color picker that points to the input
• Firefox shows the native color picker

{{< example >}}

Color picker {{< /example >}}