BootstrapHow-ToBeginner · 3 min read

How to Create Floating Labels in Bootstrap Easily

To create floating labels in Bootstrap, wrap your input and label inside a container with the class form-floating. The label will float above the input when the user types or focuses on the field, providing a clean and modern form design.

📐

Syntax

Use a div with the class form-floating to wrap an input and its corresponding label. The input must have an id that matches the for attribute of the label.

form-floating: Container that enables floating label behavior.
input: The form control where the user types.
label: The floating label linked to the input.

html

<div class="form-floating">
  <input type="text" class="form-control" id="floatingInput" placeholder=" ">
  <label for="floatingInput">Label Text</label>
</div>

Output

A text input box with a label that floats above the input when focused or filled.

💻

Example

This example shows a floating label for an email input field. When you click or type in the input, the label moves above the box, making the form look neat and easy to use.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Floating Label Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <main class="container py-5">
    <form>
      <div class="form-floating mb-3">
        <input type="email" class="form-control" id="floatingEmail" placeholder="name@example.com">
        <label for="floatingEmail">Email address</label>
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
  </main>
</body>
</html>

Output

A clean form with an email input and a label that floats above the input when focused or filled.

⚠️

Common Pitfalls

Not adding the form-floating class to the container will prevent the label from floating.
Missing the placeholder attribute on the input can cause layout issues; it should be present but can be empty.
Not matching the id of the input with the for attribute of the label breaks accessibility and floating behavior.
Using incompatible input types or adding extra padding/margin inside the container can break the floating effect.

html

<!-- Wrong way: Missing form-floating class and placeholder -->
<div>
  <input type="text" id="wrongInput" placeholder=" ">
  <label for="wrongInput">Wrong Label</label>
</div>

<!-- Right way: Correct classes and placeholder -->
<div class="form-floating">
  <input type="text" class="form-control" id="correctInput" placeholder=" ">
  <label for="correctInput">Correct Label</label>
</div>

Output

The first input shows label overlapping input text; the second input label floats correctly above the input.

📊

Quick Reference

Remember these key points for floating labels in Bootstrap:

Wrap input and label inside div.form-floating.
Input must have a matching id and label for.
Include a placeholder attribute on the input (can be empty).
Use Bootstrap 5 or later for floating label support.

✅

Key Takeaways

Use the form-floating class on a container wrapping an input and label to create floating labels.

Ensure the input has a matching id and a placeholder attribute for proper floating behavior.

Floating labels improve form clarity by moving the label above the input on focus or when filled.

Bootstrap 5+ supports floating labels natively; older versions do not have this feature.

Avoid missing classes or mismatched attributes to prevent floating label issues.