Prev Next

BS5 Floating Labels

Bootstrap 5 Floating Labels create input fields where labels float above the input as users type, enhancing form clarity and usability.

Key Topics

Basic Floating Label

Create a basic floating label by wrapping the input and label inside a .form-floating container.

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

Explanation: The .form-floating class positions the label above the input when text is entered.

Floating Label with Textarea

Use floating labels with a <textarea> by applying the .form-floating class.

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

Explanation: The <textarea> automatically adjusts to fit the content, and the floating label aligns correctly.

Floating Label with Select

Create a floating label for a <select> element using the .form-floating class.

<div class="form-floating mb-3">
    <select class="form-select" id="floatingSelect" aria-label="Floating label select example">
        <option selected>Open this select menu</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>
    <label for="floatingSelect">Works with selects</label>
</div>

Explanation: Apply the .form-select class to the <select> element inside the .form-floating container.

Complete Floating Labels Example

Below is a complete example showcasing floating labels for inputs, textareas, and selects.

<!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 Labels Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container my-4">
        <h2 class="text-center">Bootstrap Floating Labels</h2>
        <div class="form-floating mb-3">
            <input type="email" class="form-control" id="exampleFloatingInput" placeholder="name@example.com">
            <label for="exampleFloatingInput">Email address</label>
        </div>
        <div class="form-floating mb-3">
            <textarea class="form-control" placeholder="Leave a comment here" id="exampleFloatingTextarea" style="height: 100px;"></textarea>
            <label for="exampleFloatingTextarea">Comments</label>
        </div>
        <div class="form-floating mb-3">
            <select class="form-select" id="exampleFloatingSelect">
                <option selected>Open this select menu</option>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
            </select>
            <label for="exampleFloatingSelect">Select Menu</label>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Explanation: This example demonstrates the use of floating labels with different input types, including text, textarea, and select menus.

Key Takeaways

  • Use .form-floating to enable floating labels for inputs.
  • Compatible with <input>, <textarea>, and <select> elements.
  • Ensure accessibility by associating labels with inputs using the for attribute.
Prev Next