Bootstrap 5 Overview Form text

Last Updated : 07 Dec, 2022

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 is used to add 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> 