Bootstrap Floating Labels

Overview

Floating labels provide an elegant form label style where labels float above the input when focused or filled.

Basic Floating Labels

<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>

Textareas

<div class="form-floating">
    <textarea class="form-control" placeholder="Leave a comment" id="floatingTextarea" style="height: 100px"></textarea>
    <label for="floatingTextarea">Comments</label>
</div>

Selects

<div class="form-floating">
    <select class="form-select" id="floatingSelect">
        <option selected>Choose...</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>
    <label for="floatingSelect">Select an option</label>
</div>

Layout

<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">
            <label for="floatingInputGrid">Email address</label>
        </div>
    </div>
    <div class="col-md">
        <div class="form-floating">
            <select class="form-select" id="floatingSelectGrid">
                <option selected>Choose...</option>
                <option value="1">One</option>
                <option value="2">Two</option>
            </select>
            <label for="floatingSelectGrid">Select</label>
        </div>
    </div>
</div>

Next Steps

Next: Bootstrap Validation →