Bootstrap Floating labels not showing up

Question

So I have this template which the Floating labels are not showing up.

<section class="text-center">
            <div class="card mx-auto" style="max-width: 450px;">
                <div class="card-body">

                    <div class="row d-flex justify-content-center">
                        <div class="col-lg-8">
                            <h2 class="fw-bold mb-5">Sign up now</h2>

                            <!-- 2 column grid layout with text inputs for the first and last names -->
                            <div class="row">
                                <div class="col-md-6 mb-4">
                                    <div class="form-outline">
                                        <input type="text" id="form3Example1" class="form-control" />
                                        <label class="form-label" for="form3Example1">First name</label>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-4">
                                    <div class="form-outline">
                                        <input type="text" id="form3Example2" class="form-control" />
                                        <label class="form-label" for="form3Example2">Last name</label>
                                    </div>
                                </div>
                            </div>

                            <!-- Email input -->
                            <div class="form-outline mb-4">
                                <input type="email" id="form3Example3" class="form-control" />
                                <label class="form-label" for="form3Example3">Email address</label>
                            </div>

                            <!-- Password input -->
                            <div class="form-outline mb-4">
                                <input type="password" id="form3Example4" class="form-control" />
                                <label class="form-label" for="form3Example4">Password</label>
                            </div>

                            <!-- Checkbox -->
                            <div class="form-check d-flex justify-content-center mb-4">
                                <input class="form-check-input me-2" type="checkbox" value="" id="form2Example33" checked />
                                <label class="form-check-label" for="form2Example33">
                                    Subscribe to our newsletter
                                </label>
                            </div>

                            <!-- Submit button -->
                            <button class="btn btn-primary btn-block mb-4">
                                Sign up
                            </button>

                            <!-- Register buttons -->
                            <div class="text-center">
                                <p>or sign up with:</p>
                                <button type="button" class="btn btn-link btn-floating mx-1">
                                    <i class="fab fa-facebook-f"></i>
                                </button>

                                <button type="button" class="btn btn-link btn-floating mx-1">
                                    <i class="fab fa-google"></i>
                                </button>

                                <button type="button" class="btn btn-link btn-floating mx-1">
                                    <i class="fab fa-twitter"></i>
                                </button>

                                <button type="button" class="btn btn-link btn-floating mx-1">
                                    <i class="fab fa-github"></i>
                                </button>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </section>

BUT, I tried to put form-floating on the divs around the inputs and labels and it does not work. (This is the template that I found online without any changes, I believe) Maybe is my Bootstrap version but I checked that too. Bootstrap version: v5.2.3

Answer 1

Check if the required CSS styles are included in the section of your HTML document. The floating label functionality requires some specific CSS styles to work properly. You can check the documentation or source code of the template to see if these styles are included.

Verify that any JavaScript code required to initialize the floating labels is included and properly configured. This could include code to listen for events on the input fields, and to add or remove CSS classes as needed to show or hide the floating label text.

Check if there are any JavaScript errors in the browser console that might be preventing the floating labels from working. You can open the browser console by pressing F12 or Ctrl+Shift+I, and then selecting the "Console" tab. Look for any error messages related to the floating labels or the form input fields.

Make sure that the version of the library or plugin that is providing the floating label functionality is compatible with the version of any other libraries or plugins that are being used in the template. Sometimes conflicts between different libraries or versions can cause unexpected behavior or errors.

Answer 2

I found the answer in hard way.

The input must have placeholder with something written on.

<div class="form-floating">
 <input type="text" id="form3Example1" class="form-control" placeholder="1" />
 <label class="form-label" for="form3Example1">First name</label>
</div>