Bootstrap 5 Floating Labels Tool

Preview
Customize Floating Labels
Generated Code
<form>
    <div class="form-floating mb-3">
        <input type="text" class="form-control" id="floatingInput" placeholder="Enter text">
        <label for="floatingInput" style="color: #000; font-size: 16px; font-family: Arial, sans-serif;">Text Input</label>
    </div>

    <div class="form-floating mb-3">
        <textarea class="form-control" placeholder="Enter text here" id="floatingTextarea" style="height: 100px;"></textarea>
        <label for="floatingTextarea" style="color: #000; font-size: 16px; font-family: Arial, sans-serif;">Textarea</label>
    </div>

    <div class="form-floating mb-3">
        <select class="form-select" id="floatingSelect" aria-label="Floating label select">
            <option selected>Select an option</option>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
        </select>
        <label for="floatingSelect" style="color: #000; font-size: 16px; font-family: Arial, sans-serif;">Select Menu</label>
    </div>

    <div class="form-floating mb-3">
        <input type="text" class="form-control" id="floatingDisabled" placeholder="Disabled input" disabled>
        <label for="floatingDisabled" style="color: #000; font-size: 16px; font-family: Arial, sans-serif;">Disabled Input</label>
    </div>
</form>
FAQs

1. What is the purpose of floating labels?

Floating labels provide a more interactive and modern experience for form fields by displaying labels inside the input fields.

2. Can I use this with disabled inputs?

Yes, you can. Just add the disabled attribute to the input field.

3. What is the select option?

The select menu allows you to create dropdown options with floating labels for better usability.

4. How do I use the generated code?

Copy the code from the code box and paste it into your editor to implement the floating labels on your website.

5. How can I customize the label color, size, and font?

You can use the customization section to select your desired color, font size, and font family. The changes will be reflected in the preview.