Bootstrap 5 Form controls Readonly plain text

Last Updated : 23 Jul, 2025

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.

HTML
<!DOCTYPE html>
<html>

<head>
    <title>Bootstrap 5 Form controls Readonly plain text</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
        </script>
</head>

<body>
    <div class="container text-center">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>

        <h2>Bootstrap 5 Form controls Readonly plain text</h2>

        <form action="#">
            <div class="row">
                <label for="username" class="col-sm-2
                    col-form-label">Email Id</label>
                <div class="col">
                    <input type="text" class="form-control-plaintext" id="username" value="abc@geeksforgeeks.org" readonly>
                </div>
            </div>
            <br>

            <div class="row">
                <label for="password" class="col-sm-2
                    col-form-label">Password</label>
                <div class="col">
                    <input type="password" class="form-control" id="password" placeholder="Password"
                        aria-label="Password">
                </div>
            </div>
        </form>
    </div>
</body>

</html>

Output:

 

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

HTML
<!DOCTYPE html>
<html>

<head>
    <title>Bootstrap 5 Form controls Readonly plain text</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
        </script>
</head>

<body>
    <div class="container">
        <h1 class="text-center text-success">
            GeeksforGeeks
        </h1>

        <h2 class="text-center">
            Bootstrap 5 Form controls Readonly plain text
        </h2>

        <div class="row">
            <label for="name" class="col-sm-2
                col-form-label">Name</label>
            <div class="col">
                <input type="text" class="form-control-plaintext" id="name" value="GeeksforGeeks" readonly>
            </div>
        </div>
        <br>

        <div class="row">
            <label for="contact" class="col-sm-2
                col-form-label">Contact No</label>
            <div class="col">
                <input type="password" class="form-control-plaintext" id="contact" value="+91-9876543210" readonly>
            </div>
        </div>

        <div class="row">
            <label for="textarea" class="form-label">
                Example textarea
            </label>
            <textarea class="form-control-plaintext" id="textarea" value="Feedback" readonly></textarea>
        </div>
    </div>
</body>

</html>

Output:

 

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

Comment

Explore