Bootstrap 5 Floating labels

Last Updated : 30 Jul, 2024

Bootstrap 5 floating labels are form labels that float over input fields, improving UX. Wrap form controls like <input>, <label>, <textarea>, <select> inside <div> with class .form-floating. Ensure these elements precede <label> inside the floating <div>.

Bootstrap 5 Floating labels:

Component	Description
Textareas	Use CSS `height` property for Floating label Textarea, adjusting height similar to the input.
Selects	Utilize Floating labels Component Selects for input fields with floating labels.
Layout	Employ Floating labels Layout within a grid system, placing form elements within column classes.
Sass	Customize Floating labels by adjusting default values in Bootstrap 5 SCSS files for tailored usage.

Syntax:

<div class="form-floating"> ...</div>

Examples of Bootstrap 5 Floating labels

Example 1: In this example, <input>, <textarea>, and <label> elements are wrapped inside <div> element with .form-floating class.

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width, 
                     initial-scale=1.0"
        />
        <title>Bootstrap 5 Floating Label</title>
        <link
            href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
            rel="stylesheet"
        />
    </head>
    <body class="text-center">
        <div
            class="container"
            style="width: 700px"
        >
            <h6>Bootstrap 5 Floating label</h6>
            <div class="form-floating">
                <input
                    type="text"
                    class="form-control"
                    id="floatingName"
                    placeholder="studentName"
                />
                <label
                    for="floatingName"
                    class="text-success"
                >
                    Name</label
                >
            </div>
            <div class="form-floating pt-2">
                <input
                    type="number"
                    class="form-control"
                    id="floatingAge"
                    placeholder="studentAge"
                />
                <label
                    for="floatingAge"
                    class="text-success"
                >
                    Age
                </label>
            </div>
            <div class="form-floating pt-2">
                <textarea
                    class="form-control"
                    placeholder="Enter your address"
                    id="floatingAddress"
                    style="height: 120px"
                >
                </textarea>
                <label
                    for="floatingAddress"
                    class="text-success"
                >
                    Address
                </label>
            </div>
        </div>
    </body>
</html>

Output:

Floating-label — Bootstrap 5 Floating labels Example Output

Example 2: In this example, <select> and <label> elements are wrapped inside <div> element with .form-floating class.

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0"
        />
        <title>Bootstrap 5 Floating Label</title>
        <link
            href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
            rel="stylesheet"
        />
    </head>
    <body class="text-center">
        <div
            class="container"
            style="width: 700px"
        >
            <h6>Bootstrap 5 Floating label</h6>
            <div class="form-floating">
                <select
                    class="form-select pt-3"
                    id="floatingSelectMenu"
                >
                    <option selected>
                        Click here to choose
                    </option>
                    <option value="java">
                        Java
                    </option>
                    <option value="c++">
                        C++
                    </option>
                    <option value="python">
                        Python
                    </option>
                    <option value="c">C</option>
                    <option value="golang">
                        Golang
                    </option>
                </select>
                <label for="selectLabel">
                    Choose your programming
                    language
                </label>
            </div>
        </div>
    </body>
</html>

Output:

Floating-label2 — Bootstrap 5 Floating labels Example Output

Bootstrap 5 Layout Forms

reshmah

Improve

Article Tags :

Bootstrap 5 Floating labels

Examples of Bootstrap 5 Floating labels

Similar Reads

Layout

Content

Forms

Forms Layout

Components

Navbar

Helpers

Extend

Thank You!

What kind of Experience do you want to share?