Floating labels
Example
Wrap a pair of <input class="form-control"> and
<label> elements in .form-floating to enable floating labels with
Bootstrap’s textual form fields. A placeholder is required on each
<input> as our method of CSS-only floating labels uses the
:placeholder-shown pseudo-element. Also note that the <input> must
come first so we can utilize a sibling selector (e.g., ~).
Preview
With Value
HTML
<div class="form-floating mb-3">
<input
type="email"
class="form-control"
id="floatingInput"
placeholder="[email protected]"
/>
<label for="floatingInput">Email address</label>
</div>
<div class="form-floating">
<input
type="password"
class="form-control"
id="floatingPassword"
placeholder="Password"
/>
<label for="floatingPassword">Password</label>
</div>
<h5 class="mt-3">With Value</h5>
<form class="form-floating">
<input
type="email"
class="form-control"
id="floatingInputValue"
placeholder="[email protected]"
value="[email protected]"
/>
<label for="floatingInputValue">Input with value</label>
</form>
Validation
Form validation styles also work as expected.
Preview
HTML
<form class="form-floating">
<input
type="email"
class="form-control is-invalid"
id="floatingInputInvalid"
placeholder="[email protected]"
value="[email protected]"
/>
<label for="floatingInputInvalid">Invalid input</label>
</form>
Textareas
By default, <textarea>s with .form-control will be the same height
as <input>s.
Preview
Explicit Height
HTML
<div class="form-floating">
<textarea
class="form-control"
placeholder="Leave a comment here"
id="floatingTextarea"
></textarea>
<label for="floatingTextarea">Comments</label>
</div>
<h5 class="mt-3">Explicit Height</h5>
<div class="form-floating">
<textarea
class="form-control"
placeholder="Leave a comment here"
id="floatingTextarea2"
style="height: 100px"
></textarea>
<label for="floatingTextarea2">Comments</label>
</div>
Selects
Other than .form-control, floating labels are only available on
.form-selects. They work in the same way, but unlike <input>s,
they’ll always show the <label> in its floated state.
Selects with size and multiple are not supported.
Preview
HTML
<div class="form-floating">
<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 selects</label>
</div>
Layout
When working with the Bootstrap grid system, be sure to place form elements within column classes.
Preview
HTML
<div class="row g-2">
<div class="col-md">
<div class="form-floating">
<input
type="email"
class="form-control"
id="floatingInputGrid"
placeholder="[email protected]"
value="[email protected]"
/>
<label for="floatingInputGrid">Email address</label>
</div>
</div>
<div class="col-md">
<div class="form-floating">
<select
class="form-select"
id="floatingSelectGrid"
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="floatingSelectGrid">Works with selects</label>
</div>
</div>
</div>
