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.,~).
<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 valuealready defined,<label>s will automatically adjust to their floated position.
<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.
<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-controlwill 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>
To set a custom height on your <textarea>,do not use the rowsattribute. Instead,set an explicit height(either inline or via custom CSS).
<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>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.
<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>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" 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>