Bootstrap Floating Labels is a UI pattern where the label for a form input field "floats" above the input when the user focuses on the field or enters information in the input.
To use Bootstrap Floating Labels, you need to use the following code structure:
<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>
Here is an example of a Bootstrap Floating Label form.
<form>
<div class="form-floating">
<input type="password" class="form-control" id="floatingPassword" placeholder="Name">
<label for="floatingPassword">Name</label>
</div>
<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>
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
<label for="floatingTextarea">Comments</label>
</div>
</form>
Floating labels also support .input-group.
<form>
<div class="input-group mb-3">
<span class="input-group-text">@</span>
<div class="form-floating">
<input type="text" class="form-control" id="floatingInputGroup1" placeholder="Username">
<label for="floatingInputGroup1">Username</label>
</div>
</div>
<div class="input-group has-validation">
<span class="input-group-text">@</span>
<div class="form-floating is-invalid">
<input type="text" class="form-control is-invalid" id="floatingInputGroup2" placeholder="Username"
required>
<label for="floatingInputGroup2">Username</label>
</div>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
</form>
When working with the Bootstrap grid system, be sure to place form elements within column classes.
<div class="row g-2">
<div class="col-md">
<div class="form-floating">
<input type="email" class="form-control" id="floatingInputGrid" placeholder="name@example.com" value="mdo@example.com">
<label for="floatingInputGrid">Email address</label>
</div>
</div>
<div class="col-md">
<div class="form-floating">
<select class="form-select" id="floatingSelectGrid">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label for="floatingSelectGrid">Works with selects</label>
</div>
</div>
</div>
In the code above, we used the form-floating class to wrap each form input field and its label. This class is responsible for the floating label effect. We also used the label tag with the for attribute to associate each label with its corresponding input field.
Bootstrap Floating Labels can be used to enhance the user experience of form input fields. It helps users understand which field they are filling out and what information they need to provide.
form-floating class and associated label tag.Bootstrap Floating Labels is a simple but effective UI pattern that can be easily implemented in Bootstrap forms. By using Bootstrap Floating Labels, you can improve the accessibility and usability of your forms and provide a better user experience for your website visitors.