Bootstrap floating form field with supporting text

by Martin Bean

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css">
<div class="p-3">
  <div class="form-floating">
    <input type="password" class="form-control" id="floatingPassword" placeholder="Password" aria-describedby="passwordHelpBlock">
    <label for="floatingPassword">Password</label>
    <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>
  </div>
</div>

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}