Bootstrap - Bootstrap 5 Floating Labels

Bootstrap 5 Floating Labels provide a modern and clean form design where the label floats above the input field when the user types, rather than being fixed above or inside. They improve UX by saving space and keeping the label visible.

1. Basic Floating Label

Use the .form-floating class around your input and label.
The placeholder attribute is required for proper styling, even if it's empty.

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingEmail" placeholder="[email protected]">
  <label for="floatingEmail">Email address</label>
</div>

<div class="form-floating mb-3">
  <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
  <label for="floatingPassword">Password</label>
</div>

How it works:

When the input is empty, the label is inside the input.
When the input is focused or filled, the label floats above.

2. Floating Labels with Textarea

Floating labels also work with <textarea>.

<div class="form-floating mb-3">
  <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea" style="height: 100px"></textarea>
  <label for="floatingTextarea">Comments</label>
</div>

Tip: You must set a height for the <textarea>.

3. Floating Labels with Select Menus

You can use floating labels with select dropdowns.

<div class="form-floating mb-3">
  <select class="form-select" id="floatingSelect" aria-label="Floating label select example">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
  <label for="floatingSelect">Works with select</label>
</div>

4. Floating Labels in Horizontal Forms

Combine floating labels with Bootstrap grid for horizontal layouts.

<div class="row g-2 mb-3">
  <div class="col-md-6 form-floating">
    <input type="text" class="form-control" id="floatingFirstName" placeholder="First name">
    <label for="floatingFirstName">First Name</label>
  </div>
  <div class="col-md-6 form-floating">
    <input type="text" class="form-control" id="floatingLastName" placeholder="Last name">
    <label for="floatingLastName">Last Name</label>
  </div>
</div>

5. Floating Labels with Input Groups

You can combine floating labels with input groups for symbols, icons, or buttons.

<div class="input-group mb-3">
  <span class="input-group-text">@</span>
  <div class="form-floating flex-grow-1">
    <input type="text" class="form-control" id="floatingUsername" placeholder="Username">
    <label for="floatingUsername">Username</label>
  </div>
</div>

Note: Wrap the input and label in .form-floating inside the input group.

6. Floating Labels with Validation

You can use Bootstrap validation with floating labels.

<form class="needs-validation" novalidate>
  <div class="form-floating mb-3">
    <input type="text" class="form-control" id="floatingUsernameVal" placeholder="Username" required>
    <label for="floatingUsernameVal">Username</label>
    <div class="invalid-feedback">
      Please enter a username.
    </div>
  </div>
  <div class="form-floating mb-3">
    <input type="email" class="form-control" id="floatingEmailVal" placeholder="Email" required>
    <label for="floatingEmailVal">Email address</label>
    <div class="invalid-feedback">
      Please enter a valid email.
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit</button>
</form>

7. Floating Labels with Multiple Inputs

For multiple inputs in a single row, wrap each in .form-floating.

<div class="row g-2 mb-3">
  <div class="col-md-6 form-floating">
    <input type="text" class="form-control" id="floatingCity" placeholder="City">
    <label for="floatingCity">City</label>
  </div>
  <div class="col-md-6 form-floating">
    <input type="text" class="form-control" id="floatingZip" placeholder="Zip Code">
    <label for="floatingZip">Zip Code</label>
  </div>
</div>

8. Floating Labels with Different Input Types

Floating labels work with almost all input types:

text, email, password, number, url, tel
textarea
select

9. Full Example: Bootstrap 5 Floating Labels

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap 5 Floating Labels</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-4">

  <h3>Bootstrap 5 Floating Labels</h3>

  <!-- Basic Inputs -->
  <div class="form-floating mb-3">
    <input type="email" class="form-control" id="floatingEmail" placeholder="[email protected]">
    <label for="floatingEmail">Email address</label>
  </div>

  <div class="form-floating mb-3">
    <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
    <label for="floatingPassword">Password</label>
  </div>

  <!-- Textarea -->
  <div class="form-floating mb-3">
    <textarea class="form-control" placeholder="Leave a comment" id="floatingTextarea" style="height: 100px"></textarea>
    <label for="floatingTextarea">Comments</label>
  </div>

  <!-- Select -->
  <div class="form-floating mb-3">
    <select class="form-select" id="floatingSelect">
      <option selected>Choose...</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
    <label for="floatingSelect">Select Option</label>
  </div>

  <!-- Horizontal Form -->
  <div class="row g-2 mb-3">
    <div class="col-md-6 form-floating">
      <input type="text" class="form-control" id="floatingFirstName" placeholder="First Name">
      <label for="floatingFirstName">First Name</label>
    </div>
    <div class="col-md-6 form-floating">
      <input type="text" class="form-control" id="floatingLastName" placeholder="Last Name">
      <label for="floatingLastName">Last Name</label>
    </div>
  </div>

  <!-- Input Group + Floating Label -->
  <div class="input-group mb-3">
    <span class="input-group-text">@</span>
    <div class="form-floating flex-grow-1">
      <input type="text" class="form-control" id="floatingUsername" placeholder="Username">
      <label for="floatingUsername">Username</label>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>