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-floatingto enable floating labels with Bootstrap’s textual form fields. A placeholderis required on each <input>as our method of CSS-only floating labels uses the :placeholder-shownpseudo-element. Also note that the <input>must come first so we can utilize a sibling selector(e.g.,~).
When there’s a valuealready defined,<label>s will automatically adjust to their floated position.
<formclass="form-floating"><inputtype="email"class="form-control"id="floatingInputValue"placeholder="name@example.com"value="test@example.com"><labelfor="floatingInputValue">Input with value</label></form>
By default,<textarea>s with .form-controlwill be the same height as <input>s.
<divclass="form-floating"><textareaclass="form-control"placeholder="Leave a comment here"id="floatingTextarea"></textarea><labelfor="floatingTextarea">Comments</label></div>
To set a custom height on your <textarea>,do not use the rowsattribute. Instead,set an explicit height(either inline or via custom CSS).
<divclass="form-floating"><textareaclass="form-control"placeholder="Leave a comment here"id="floatingTextarea2"style="height: 100px"></textarea><labelfor="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.
<divclass="form-floating"><selectclass="form-select"id="floatingSelect"aria-label="Floating label select example"><optionselected>Open this select menu</option><optionvalue="1">One</option><optionvalue="2">Two</option><optionvalue="3">Three</option></select><labelfor="floatingSelect">Works with selects</label></div>
Layout
When working with the Bootstrap grid system,be sure to place form elements within column classes.
<divclass="row g-2"><divclass="col-md"><divclass="form-floating"><inputtype="email"class="form-control"id="floatingInputGrid"placeholder="name@example.com"value="mdo@example.com"><labelfor="floatingInputGrid">Email address</label></div></div><divclass="col-md"><divclass="form-floating"><selectclass="form-select"id="floatingSelectGrid"aria-label="Floating label select example"><optionselected>Open this select menu</option><optionvalue="1">One</option><optionvalue="2">Two</option><optionvalue="3">Three</option></select><labelfor="floatingSelectGrid">Works with selects</label></div></div></div>