Learn with us

In Bootstrap 5, you can use floating labels in forms to enhance the user experience and provide a modern look. Floating labels move the form labels to a floating position when the user interacts with the input field. Here’s how you can create form floating labels in Bootstrap 5:

1. Basic Floating Label Form:

<div class="form-floating">
  <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
  <label for="floatingInput">Email address</label>
</div>

In this example, the form-floating class is applied to the <div> container to create the floating label effect. The input field is created using the <input> element with the form-control class, and the corresponding label is placed inside the <label> element with the for attribute pointing to the input field’s id.

2. Textarea with Floating Label:

<div class="form-floating">
  <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
  <label for="floatingTextarea">Comments</label>
</div>

Similarly, you can use floating labels with textarea elements. The textarea is created using the <textarea> element, and the label is placed inside the <label> element.

3. Select with Floating Label:

<div class="form-floating">
  <select class="form-select" id="floatingSelect" aria-label="Floating label select example">
    <option selected>Open this select menu</option>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </select>
  <label for="floatingSelect">Select an option</label>
</div>

You can also use floating labels with select dropdowns. The select element is created using the <select> element, and the label is placed inside the <label> element.

These examples demonstrate how to create form floating labels in Bootstrap 5. The floating labels will automatically adjust their position when the user interacts with the form fields. You can further customize the appearance and behavior of floating labels using additional Bootstrap classes and styles.

Remember to include the necessary Bootstrap 5 CSS file in your project to apply the floating label styling and functionality provided by Bootstrap.