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., ~
).
<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>
Form validation styles also work as expected.
<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>
By default, <textarea>
s with .form-control
will be the same height as <input>
s.
<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>
Other than .form-control
, floating labels are only available on .form-select
s. 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.
<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>
When working with the Bootstrap grid system, be sure to place form elements within column classes.
<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>