Bootstrap 5 Overview Form text

Bootstrap 5 Overview Form Text sits below the form input elements to guide the user on how to fill in the input. Form text can be added to input by using a container(a <div> or a <span>) having the class form-text with the text inside it. If we use a block element for the text the top margin will be automatically added to create space with the input element.

Bootstrap 5 Overview Form Text Classes:

form-text: This class adds the help text below or next to the form inputs.

Syntax:

<div class="form-text">
    ...
</div>

Example 1: In this example, we show how to add form text below inputs using a div as a wrapper.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Bootstrap 5 Overview Form Text</title>
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" />
</head>

<body>
    <div class="container">
        <div class="my-4">
            <h1 class="text-success">
                GeeksforGeeks
            </h1>
            <strong>
                Bootstrap 5 Overview Form Text
            </strong>
        </div>

        <div class="form">
            <input type="text" class="form-control" 
                placeholder="Enter Your Name">
            <div id="helpText" class="form-text">
                Please Enter the Full Name.
            </div>
            <div class="form-check mt-4">
                <input type="checkbox" id="checkbox1" 
                    class="form-check-input">
                <label for="checkbox1" class="form-check-label">
                    Accept Terms & Conditions
                </label>
            </div>
            <div id="helpText" class="form-text">
                Accepting Terms & Conditions is necessary
                if you want to continue using our services.
            </div>
        </div>
    </div>
</body>

</html>

Output:

Example 2: The below example illustrates how to add inline form text for input. Here we used the <span> element to wrap the form text.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Bootstrap 5 Overview Form Text</title>
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" />
</head>

<body>
    <div class="container">
        <div class="my-4">
            <h1 class="text-success">
                GeeksforGeeks
            </h1>
            <strong>
                Bootstrap 5 Overview Form Text
            </strong>
        </div>
        <div class="row align-items-center">
            <div class="col-auto">
                <input type="text" 
                    class="form-control" 
                    placeholder="Enter Your Name">
            </div>
            <div class="col-auto">
                <span id="helpText" class="form-text">
                    Please Enter the Full Name.
                </span>
            </div>
        </div>
    </div>
</body>

</html>

Output:

Reference: https://getbootstrap.com/docs/5.2/forms/overview/#form-text

Bootstrap 5 Overview Form text

Explore