Floating Labels

A floating label sits inside the field and shrinks to the top edge once it has a value. Wrap the control and label in .form-floating, control first, and give the control a non-empty placeholder.

Floating labels on an empty input, a filled input and a selectHTMLLive
<link rel=stylesheet href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
<div class="p-3 row g-2">
  <div class="col"><div class="form-floating"><input class="form-control" id="fMail"
    placeholder="x"><label for="fMail">Email address</label></div></div>
  <div class="col"><div class="form-floating"><input class="form-control" id="fCity"
    placeholder="x" value="Penang"><label for="fCity">City</label></div></div>
  <div class="col"><div class="form-floating"><select class="form-select" id="fLand">
    <option>Malaysia</option></select><label for="fLand">Country</label></div></div>
</div>
Browser output of Listing 3.39
Browser output of 39