Floating labels
Create beautifully simple form labels that float over your input fields.
Example
<div class="form-floating"> <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com"> <label for="floatingInput">Email address</label></div><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>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"> <input type="email" readonly class="form-control-plaintext" id="floatingEmptyPlaintextInput" placeholder="name@example.com"> <label for="floatingEmptyPlaintextInput">Empty input</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-control-wrap"> <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> <div class="col-md"> <div class="form-control-wrap"> <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></div>
