Bootstrap - Form Floating Labels Part 2: Floating Labels with Different Input Types

Floating labels work with multiple input types like email, number, date, and more.

Example 3: Floating Label for an Email Input

<div class="form-floating mt-3">

    <input type="email" class="form-control" id="emailInput" placeholder="[email protected]">

    <label for="emailInput">Email address</label>

</div>

Here, the email input field will display a floating label when the user starts typing.

The placeholder ensures the effect works properly.

Example 4: Floating Label for a Number Input

<div class="form-floating mt-3">

    <input type="number" class="form-control" id="phoneInput" placeholder="1234567890">

    <label for="phoneInput">Phone Number</label>

</div>

This input type allows numeric values only.

Useful for phone numbers, quantity fields, and numerical data.

Example 5: Floating Label for a Date Picker

<div class="form-floating mt-3">

    <input type="date" class="form-control" id="dobInput" placeholder="Date of Birth">

    <label for="dobInput">Date of Birth</label>

</div>

This example uses the date picker input type, allowing users to select a date conveniently.