**<code>label</code>** enables the developer to name an <code>input</code> field. By default, <code>label</code> content and the <code>input</code> field stand separately.

Bootstrap comes with <code>form-floating</code>  to enable floating labels with Bootstrap’s textual form fields.

#       
## Procedure

The following is a step-by-step procedure to create a floating label in bootstrap:

1. Create a container, for example <code>div</code>, with the class <code>form-floating</code>

2. Create your <code>input</code> field.

The `input` field should have the following:

-  <code>type</code> — to set the form validation

- <code> class = "form-control"</code> 

- An <code>id</code> — which should match the <code>for</code> attribute in the <code>label</code>

- A <code>placeholder</code>

3. Create the <code>label</code> with a <code>for</code> attribute that matches the <code>id</code> of the <code>input</code> element.

**NOTE**  

The <code>input</code> must come before the <code>label</code>.


<html>
 <head>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" ></script>
 </head>
 <body>
   <h1 class="text-primary text-center text-uppercase">floating labels</h1>
   <div class="container">
     <div class="row">
 <div class="form-floating col-md-4">
   <input type="text" class="form-control" id="floatingtext" placeholder="Akande Olalekan Toheeb">
   <label for="floatingtext">Full Name</label>
 </div>
 <div class="form-floating col-md-4">
   <input type="email" class="form-control" id="floatingtext" placeholder="akandeolalekantoheeb9@gmail.com">
   <label for="floatingtext">Email</label>
 </div>
 <div class="form-floating col-md-4">
   <input type="password" class="form-control" id="floatingtext" placeholder="password">
   <label for="floatingtext">Password</label>
 </div>
   </div>
   </div>







   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" ></script>
 </body>
</html>

body{
    background-color: black;
}
h1{
    margin-bottom: 30px;
}
div.col-md-4{
    margin-bottom: 8px;
}

codemirror

Floating labels can also be used with bootstrap's <code>textarea</code> and <code>select</code>.

> Try it yourself for better understanding.

What are floating labels in Bootstrap?

Bootstrap's form-floating class creates floating labels for textual inputs, including textarea and select, by pairing inputs and labels.