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., ~).
Default Preview
Code Example
<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.
Code Example
<div class="form-floating"> <input type="email" class="form-control" id="floatingInputValue" value="test@example.com"> <label for="floatingInputValue">Input with value</label></div>
Form validation styles also work as expected.
Code Example
<div class="form-floating"> <input type="email" class="form-control is-invalid" id="floatingInputInvalid" value="test@example.com"> <label for="floatingInputInvalid">Invalid input</label></div>
Textareas
By default, <textarea>s with .form-control
Code Example
<div class="form-floating"> <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea> <label for="floatingTextarea">Comments</label></div>
Selects
Code Example
<div class="form-floating"> <select class="form-select" id="floatingSelect"> <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.
Code Example
<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>