Bootstrap 5 Form controls Readonly plain text

Bootstrap 5 Form Controls Readonly plain text is used to create a readonly input field as a plaintext. To create a plain text input field, we will use .form-control-plaintext class. This class removes the styling and preserves the correct margin and padding.

Form Control Readonly  Attribute:

• readonly: This attribute is used to create a readonly input field.

Form Control Plain Text Class:

• .form-control-plaintext: This class is used to display the input field as plain text.

Syntax:

<div class="row">
 <label for="GFG" class="col-*-* col-form-label">
 Content
 </label>
 <div class="col-*-*">
 <input type="text" readonly 
 class="form-control-plaintext" 
 id="..." value="...">
 </div>
</div>

Example 1: In this example, we will create a form control readonly plain text.

Output:

👁 Image

Example 2: In this example, we will create a form control readonly plain text.

Output:

👁 Image

Reference: https://getbootstrap.com/docs/5.0/forms/form-control/#readonly-plain-text