Documentation

Vue

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>