Floating Labels

Floating Labels

Floating labels place the label inside the input. The label floats up when the user types. This is a feature added in Bootstrap 5.

Basic floating label

<div class="form-floating mb-3">
  <input type="text" class="form-control" id="floatingInput" placeholder="name@example.com">
  <label for="floatingInput">Email address</label>
</div>

Why a placeholder is required

The placeholder attribute is required. Bootstrap uses it to detect whether the label should float. Without a placeholder, the label overlaps the text.

Floating textarea

<div class="form-floating">
  <textarea class="form-control" id="floatingTextarea" placeholder="Comment"></textarea>
  <label for="floatingTextarea">Comments</label>
</div>

Floating select

<div class="form-floating">
  <select class="form-select" id="floatingSelect" aria-label="Select">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
  </select>
  <label for="floatingSelect">Works with selects</label>
</div>

TL;DR

• Wrap the input and label in .form-floating.
• The input needs a placeholder for the label to float.
• Labels must be placed after the input.
• Works with inputs, textareas, and selects.