Floating labels

Create beautifully simple form labels that float over your input fields.

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.,~).

Email address

Password

HTML

<div class="form-floating mb-3">
    <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
    <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>

When there’s a value already defined, <label>s will automatically adjust to their floated position.

HTML

<form class="form-floating">
    <input type="email" class="form-control" id="floatingInputValue" placeholder="name@example.com" value="test@example.com">
    <label for="floatingInputValue">Input with value</label>
</form>

Form validation styles also work as expected.

HTML

<form class="form-floating">
    <input type="email" class="form-control is-invalid" id="floatingInputInvalid" placeholder="name@example.com" value="test@example.com">
    <label for="floatingInputInvalid">Invalid input</label>
</form>

Textareas

By default, <textarea>s with .form-control will be the same height as <input>s.

Comments

HTML

<div class="form-floating">
    <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea">

Comments