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

Readonly plaintext

Floating labels also support .form-control-plaintext, which can be helpful for toggling from an editable < input> to a plaintext value without affecting the page layout.

<div class="form-floating mb-3"> <input type="email" readonly class="form-control-plaintext" id="floatingEmptyPlaintextInput" placeholder="name@example.com"> <label for="floatingEmptyPlaintextInput">Empty input</label> </div> <div class="form-floating mb-3"> <input type="email" readonly class="form-control-plaintext" id="floatingPlaintextInput" placeholder="name@example.com" value="name@example.com"> <label for="floatingPlaintextInput">Input with value</label> </div>

Input groups

Floating labels also support .input-group.

<div class="input-group mb-3"> <span class="input-group-text">@</span> <div class="form-floating"> <input type="text" class="form-control" id="floatingInputGroup1" placeholder="Username"> <label for="floatingInputGroup1">Username</label> </div> </div>

When using .input-group and .form-floating along with form validation, the -feedback should be placed outside of the .form-floating, but inside of the .input-group. This means that the feedback will need to be shown using javascript.

<div class="input-group has-validation"> <span class="input-group-text">@</span> <div class="form-floating is-invalid"> <input type="text" class="form-control is-invalid" id="floatingInputGroup2" placeholder="Username" required> <label for="floatingInputGroup2">Username</label> </div> <div class="invalid-feedback"> Please choose a username. </div> </div>

Layout

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="name@example.com" value="mdo@example.com"> <label for="floatingInputGrid">Email address</label> </div> </div> <div class="col-md"> <div class="form-floating"> <select class="form-select" id="floatingSelectGrid"> <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>

CSS

Sass variables

$form-floating-height: add(3.5rem, $input-height-border); $form-floating-line-height: 1.25; $form-floating-padding-x: $input-padding-x; $form-floating-padding-y: 1rem; $form-floating-input-padding-t: 1.625rem; $form-floating-input-padding-b: .625rem; $form-floating-label-height: 1.5em; $form-floating-label-opacity: .65; $form-floating-label-transform: scale(.85) translateY(-.5rem) translateX(.15rem); $form-floating-label-disabled-color: $gray-600; $form-floating-transition: opacity .1s ease-in-out, transform .1s ease-in-out;