Floating labels
Create beautifully simple form labels that float over your input fields.
Floating labels on BootstrapExample
<div class="form-floating mb-3">
<input class="form-control" id="floatingInput" type="email" placeholder="[email protected]" />
<label for="floatingInput">Email address</label>
</div>
<div class="form-floating">
<input class="form-control" id="floatingPassword" type="password" placeholder="Password" />
<label for="floatingPassword">Password</label>
</div>Form Validation
<div class="form-floating mb-3">
<input class="form-control is-valid" id="floatingInputValid" type="email" placeholder="[email protected]" value="[email protected]" />
<label for="floatingInputValid">Valid input</label>
</div>
<div class="form-floating">
<input class="form-control is-invalid" id="floatingInputInvalid" type="email" placeholder="[email protected]" value="[email protected]" />
<label for="floatingInputInvalid">Invalid input</label>
</div>Textarea
<div class="form-floating">
<textarea class="form-control" id="floatingTextarea2" placeholder="Leave a comment here" style="height: 100px"></textarea>
<label for="floatingTextarea2">Comments</label>
</div>Selects
<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>
