Documentation
Floating Lable
Examples
Wrap a pair of <input class="form-control"> and <label> elements in .form-floating to enable floating labels with Bootstrap’s textual form fields.
<form>
<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 mb-3">
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
<label for="floatingPassword">Password</label>
</div>
<div class="form-floating form-group mb-3">
<input type="email" class="form-control" disabled="" id="floatingInput" placeholder="Place Holder">
<label for="floatingInput">Regular</label>
</div>
<div class="form-floating form-group mb-3">
<input type="email" class="form-control is-valid" id="floatingInput" placeholder="Place Holder">
<label for="floatingInput">Regular</label>
</div>
<div class="form-floating form-group">
<input type="email" class="form-control is-invalid" id="floatingInput" placeholder="Place Holder">
<label for="floatingInput">Regular</label>
</div>
</form>