Floating Labels on Bootstrap 5 isn't working

user_16395184 0
Viewed 5040

My floating labels aren't working, can someone help me?

enter image description here

Code

<div class="form-floating mb-3">
    <input type="text" class="form-control" autofocus id="txtNome" placeholder=" ">
    <label for="txtNome">Full Name</label>
</div>
<div class="form-floating mb-3">
    <input type="email" class="form-control" autofocus id="txtEmail" 
        placeholder=" ">
    <label for="txtEmail">E-mail</label>
</div>
<div class="form-floating mb-3">
    <textarea class="form-control" id="txtMensagem" placeholder=" " 
              style="height: 200px;"></textarea>
    <label for="txtMensagem">Message</label>
</div>

bootstrap-5 css html
3 Answers

I think there may be an issue with adding Bootstrap CDN link. When I add it, I could take the view like the image you attached.

<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
 <body>
 <div class="form-floating mb-3">
                        <input type="text" class="form-control" autofocus id="txtNome" placeholder=" ">
                        <label for="txtNome">Full Name</label>
                    </div>
                    <div class="form-floating mb-3">
                        <input type="email" class="form-control" autofocus id="txtEmail" placeholder=" ">
                        <label for="txtEmail">E-mail</label>
                    </div>                  
                    
                    <div class="form-floating mb-3">
                        <textarea class="form-control" id="txtMensagem" placeholder=" " style="height: 200px;" ></textarea>
                        <label for="txtMensagem">Message</label>
                    </div>
</body>

You can take the Bootstrap CDN link using this https://getbootstrap.com/docs/5.0/getting-started/introduction/

user_126878790

Check if you added the correct CSS, Javascript and Jquery files for Bootstrap 5. These are the files you need to import into your code.

CSS

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

Javascript

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

Jquery

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
user_74179980 
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

Add this

user_56760990
Related