Bootstrap 5 Floating Labels

Floating Labels/Animated Labels

By default, when using labels (label), they usually appear at the top of the input field:

By using floating labels, you can insert labels within input fields and make them float/animated when clicking on the input field:

Example

<div class="form-floating mb-3 mt-3">
  <input type="text" class="form-control" id="email" placeholder="Please enter your email address" name="email">
  <label for="email">Email</label>
</div>
<div class="form-floating mt-3 mb-3">
  <input type="text" class="form-control" id="pwd" placeholder="Please enter password" name="pswd">
  <label for="pwd">Password</label>
</div>

Try It Yourself

Points to Note About Floating Labels:

The <label> element must follow the <input> element, and each <input> element must have placeholder Properties (even if not displayed).

Textarea

Also applies to text areas:

Example

<div class="form-floating">
  <textarea class="form-control" id="comment" name="text" placeholder="Comment goes here"></textarea>
  <label for="comment">Comment</label>
</div>

Try It Yourself

Selection Menu

You can also use 'Floating Labels' in the selection menu. However, they will not float/animate. The label will always appear in the upper left corner of the selection menu:

Example

<div class="form-floating">
  <select class="form-select" id="sel1" name="sellist">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
  <label for="sel1" class="form-label">Select List (Select One):</label>
</div>

Try It Yourself