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="exampleFormControlInput1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
</div>
<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
You can set heights using classes like .form-control-lg and .form-control-sm.
Add the disabled boolean attribute on an input to give it a grayed out appearance and remove pointer events.
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.
If you want to have 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.