Any good web application will have beautiful, yet powerful forms, which talk to users and create a good UX experience.

Help text is one of the options we have to notify the user about any errors, warnings, or mandatory fields in the form, so that the user can take necessary actions.

Take a look at the following code:

<form>
 <div class="form-group">
 <label for="userEmailAddress">Enter email address</label>
 <input type="email" class="form-control" id="userEmailAddress">
 <small id="userEmailAddressHelp" class="form-text text-danger">
 Email address cannot be blank.
 Email address should be atleast 3 characters
 </small>
 </div>
 <div class="form-group">
 <label for="userPassword">Enter password</label>
 <input type="password" class="form-control" id="userPassword">
 </div>
</form>

In the preceding code, we are adding text inside the <small> tag, and assigning the .form-text class and .text-danger. 

The output of the preceding code is as follows: