Bootstrap Form Controls

Bootstrap form controls give textual form controls like <input> and <textarea> an upgrade with custom styles, sizing, focus states, and more.

You have to add class .form-label on labels and .form-control on input and textarea elements.

For example,

<div class="mb-3">
 <label for="email" class="form-label">Email address</label>
 <input type="email" class="form-control" id="email" placeholder="name@example.com">
</div>
<div class="mb-3">
 <label for="message" class="form-label">Message</label>
 <textarea class="form-control" id="message" rows="3"></textarea>
</div>

1. Sizing

You can change the height of input elements by adding classes like .form-control-lg and .form-control-sm.

2. Disabled

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

3. Readonly

Add the readonly boolean attribute on the input element to prevent modification of the input's value. The readonly inputs appear lighter (just like disabled inputs), but retain the standard cursor. The readonly inputs can still be focused and selected, while disabled inputs cannot.

4. Readonly Plain Text

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