Help Text

Provide helpful instructions and hints for your form fields to quickly understand what is expected to be entered.

Basic Example

Basic Example #

Help text below inputs can be styled with .form-text . This class includes display: block and adds some top margin for easy spacing from the inputs above.

Example

Password

Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.

<label for="inputPassword5" class="form-label">Password</label
><input
    type="password"
    id="inputPassword5"
    class="form-control"
    aria-describedby="passwordHelpBlock"
/>
<div id="passwordHelpBlock" class="form-text">
    Your password must be 8-20 characters long, contain letters and numbers, and must not
    contain spaces, special characters, or emoji.
</div>

Inline text can use any typical inline HTML element (be it a <span> , <small> , or something else) with nothing more than the .form-text class.

Example

Password

Must be 8-20 characters long.

<div class="row g-4 align-items-center">
    <div class="col-auto">
        <label for="inputPassword6" class="col-form-label">Password</label>
    </div>
    <div class="col-auto">
        <input
            type="password"
            id="inputPassword6"
            class="form-control"
            aria-describedby="passwordHelpInline"
        />
    </div>
    <div class="col-auto">
        <span id="passwordHelpInline" class="form-text"
            >Must be 8-20 characters long.</span
        >
    </div>
</div>