Floating labels not displaying properly in Bootstrap

Having some trouble with a template where the Floating labels are not displaying.

<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 form-floating">
                                    <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 form-floating">
                                    <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 form-floating">
                                <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 form-floating">
                                <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>

However, attempting to add form-floating to the divs surrounding the inputs and labels does not seem to work. This is the original template that was sourced online without any modifications. Possibly an issue with my Bootstrap version, but I have verified that as well. Bootstrap version: v5.2.3

Answer №1

Ensure that the necessary CSS styles are present in the section of your HTML file for the floating label feature to function correctly. It is essential to have specific CSS styles for the floating labels to work as intended. Check the template's documentation or source code to confirm if these styles are included.

Confirm that all required JavaScript code for initializing the floating labels is included and configured properly. This may involve code for detecting events on input fields, as well as adding or removing CSS classes to display or hide the floating label text accordingly.

Inspect the browser console for any JavaScript errors that could be causing issues with the floating labels. Access the browser console by pressing F12 or Ctrl+Shift+I, then navigate to the "Console" tab to look for error messages related to the floating labels or form input fields.

Double-check the compatibility of the library or plugin responsible for the floating label functionality with other libraries or plugins utilized in the template. Incompatibilities between different libraries or versions can lead to unexpected behavior or errors.

Answer №2

In my quest for knowledge, I came across the solution through trial and error.

It is crucial that the input includes a placeholder containing specific information.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Trouble with setting the color attribute using setProperty in a GXT text area

Help needed in dynamically changing the font color of a text area from the color menu. Existing attempts to change it have not been successful. Can someone provide assistance? final ColorMenu fontColorMenu = new ColorMenu(); fontColorMenu.getPalette().a ...

Determining the decimal width of an element using jQuery

I've been searching everywhere for a method to accurately determine the width of an element without rounding. The reason behind this is that I have multiple elements floated to the left with display inline-block and I am attempting to automatically ad ...

What steps should I take to ensure my clock stays in sync with my runTime function?

I am developing a mini digital clock project with the ability to mimic a physical clock. The clock is activated by using a power button to switch it on and display the current time. It should also be able to turn off and show an empty screen. However, th ...

What is the most effective way to extract data from a .dpbox table using selectorgadget in R (rvest)?

Recently, I've been experimenting with web scraping data from different websites using selectorgadget in R. One successful example was when I extracted information from . My usual approach involves utilizing the selectorgadget Chrome extension to choo ...

The process of retrieving form parameters when utilizing multipart/form-data in a Spring application

Attempting to retrieve a file using an html form has proven challenging. When utilizing enctype=multipart/form-data, the form parameters and file upload cannot be retrieved. Is there any specific configuration required when using enctype=multipart/form-da ...

Troubleshooting: JQuery - Applying CSS to dynamically generated elements

I used JQuery to dynamically generate a table, but I'm having trouble applying CSS to the columns. You can see an example at this Codepen link here. Specifically, I need to set the width of the first column to 100px. Could someone please assist me wi ...

jQuery load() function running very slowly

My jquery call to load a page sometimes takes about 30+ seconds, while other times it loads quickly as expected. To troubleshoot this issue, I attempted to replicate it in jsfiddle due to the complexity of the actual page's code. However, I was unsucc ...

Expanding the Element prototype with TypeScript

Is there a corresponding TypeScript code to achieve the same functionality as the provided JavaScript snippet below? I am looking to extend the prototype of the HTML DOM element, but I'm struggling to write TypeScript code that accomplishes this with ...

What are some ways to apply selector combinators to hashed CSS module classes?

Seeking advice on overriding a style in a CSS module for a third-party datepicker component used within a custom component. The challenge lies in targeting the correct element with a selector combinator, complicated by the dynamic creation of class names i ...

Find a way to avoid Google's site-blocking measures

Currently developing a website. I am looking into restricting access to only logged-in users on the site. How can I parse the pages in a way that Google does not block the site? ...

Equal height images using Bootstrap 4

Is there a way to display images with the same height but different width in a row while maintaining responsiveness? For instance, I would like to showcase 3 images side by side in a row, ensuring that each image has a consistent height. <div class= ...

Encountering difficulties accessing image files from .css in Jenkins

Upon visiting the URL provided below, I was able to successfully integrate a .css file into my Jenkins project. Everything appeared to be working properly until I logged out. Upon logging out of the Jenkins page, I noticed that my css file images were no l ...

Adjust the text placement on an adaptable image according to a particular section of the image

For accessibility reasons, I have an image that requires text to be overlaid on it. The image is responsive thanks to Bootstrap's img-responsive class. I need the text to stay positioned correctly on the image even as its size changes. Is there a way ...

Modifying data within a pre-set framework

Let's take a look at a basic setup for the task at hand: In the HTML Side test.html <div id="app"> <my-comp temp="1" cat="{ name:'Geoff', age:3 }"></my-comp> </div> Transitioning to the Vue Side app.js: impo ...

Ensuring consistent width for two divs using CSS

https://i.stack.imgur.com/3n8La.png I am currently working on creating a responsive CSS layout for two div elements. The first div will contain the summary, while the second div will hold the detailed description. My challenge is to make sure that the seco ...

"Encountering a Challenge with Setting Up Forms on

I've recently started learning to code and I'm facing an issue with my form appearing stretched out. You can view it here: I initially thought it was due to margins, so I increased them. Then, I tried adjusting the width to 50%, but that didn&ap ...

Ways to ensure the image stays fixed even as the screen dimensions fluctuate. HTML/CSS

Struggling to create an HTML header with a title and image positioned on the right side, but facing issues with the image shifting over the title when screen size changes. How can I ensure the image stays in place? Have tried various solutions without succ ...

What is the process for utilizing Sass in Vue CLI rather than node-sass (which is the default for sass-loader)?

I found a solution, but it's specifically for Nuxt.js and I'm using the Vue CLI. Is there any way to use dart sass instead of node-sass (default for sass-loader) in Nuxt.js? While the Vue CLI official documentation displays an example utilizing ...

Refresh the Content of a Page Using AJAX by Forcing a Full Reload

I have a webpage that automatically updates a section using jQuery AJAX every 10 seconds. Whenever I modify the CSS or JavaScript of that page, I would like to include a script in the content fetched via AJAX to trigger a full page reload. The page is ac ...

difficulty encountered when passing parameters in functions such as setInterval

Hi everyone, I need some help with my code. Feel free to check it out here Currently, I'm working on implementing multiple circular progress bars that can function dynamically. The goal is to be able to add additional progressCircle_# objects with di ...