Bootstrap - Form Floating Labels Part 5: Customizing Floating Labels with CSS

You can customize floating labels using CSS to fit your design.

Example 8: Changing Floating Label Colors

<style>

    .form-floating input:focus + label {

        color: red;

    }

</style>

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

    <input type="text" class="form-control" id="customInput" placeholder="Enter something">

    <label for="customInput">Custom Label</label>

</div>

Here, the floating label turns red when the input field is focused.

Example 9: Custom Background Color

<style>

    .form-floating .form-control {

        background-color: #f8f9fa;

    }

</style>

This changes the background color of all floating input fields to a light gray shade.

Example 10: Adjusting Font Size of Floating Labels

<style>

    .form-floating label {

        font-size: 14px;

        font-weight: bold;

    }

</style>

This makes floating labels smaller and bolder, improving readability.