Bootstrap Floating Labels
Floating labels are a modern touch where the label starts inside the field as placeholder text, then shrinks and floats to the top as soon as the user clicks in or types. Bootstrap 5 builds this in with the .form-floating class and no JavaScript required.
How the markup works
Wrap the field in a <div class="form-floating">. Inside, the <input> must come first and the <label> second. Bootstrap uses this order to animate the label. The input needs a placeholder attribute for the effect to work, even though you will not visually see the placeholder text.
A floating label input
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatEmail" placeholder="name@example.com">
<label for="floatEmail">Email address</label>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Floating labels on textareas and selects
The same pattern works for a <textarea> and a <select>. For a select, the label always stays floated because a dropdown always shows a value.
Floating label with a select
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="form-floating">
<select class="form-select" id="floatCity">
<option selected>Bengaluru</option>
<option>Mumbai</option>
<option>Delhi</option>
</select>
<label for="floatCity">Choose a city</label>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>When to use them
Floating labels save vertical space and look tidy, which makes them a great fit for short forms like a login box. For long forms, a plain .form-label above each field is often easier to scan. Pick the style that suits the page.
- Wrap the field in .form-floating.
- Put the input first, the label second.
- Always include a placeholder attribute on the input.
- Works with .form-control inputs, textareas, and .form-select menus.
Element order inside .form-floating
