Bootstrap - Floating Labels

Basic Syntax

To implement floating labels in Bootstrap, apply specific classes to your form elements. Create a <div> element with the class form-floating. Inside this <div>, place your <input> or <textarea> element, followed by the corresponding <label>.

<div class="form-floating">
  <input type="text" class="form-control" id="floatingInput" placeholder="Enter your name">
  <label for="floatingInput">Name</label>
</div>

The form-floating class on the parent <div> enables the floating label behavior. The form-control class is applied to the input field to style it according to Bootstrap's form styles. The placeholder attribute is used to provide a hint or example text inside the input field.

The <label> element must come after the input field in the HTML structure for the floating label to work correctly. The for attribute of the <label> should match the id of the corresponding input field.

You can apply the same structure to <textarea> elements:

<div class="form-floating">
  <textarea class="form-control" id="floatingTextarea" placeholder="Enter your message"></textarea>
  <label for="floatingTextarea">Message</label>
</div>

Customizing Styles

Bootstrap provides default styles for floating labels, but you can customize them to match your design preferences. Here are a few ways to modify the styles:

1. Label Colors and Fonts: To change the color and font of the floating labels, use CSS. Target the <label> element within the form-floating class and apply your desired styles.

   .form-floating label {
     color: #ff0000;
     font-family: Arial, sans-serif;
   }

This will change the label color to red and set the font family to Arial.

2. Label Positions and Transitions: The floating labels are positioned above the input fields when they are focused or filled. You can adjust the position and transition of the labels using CSS.

   .form-floating label {
     top: 0.5rem;
     left: 0.5rem;
     transition: transform 0.2s ease-out;
   }

   .form-floating .form-control:focus ~ label,
   .form-floating .form-control:not(:placeholder-shown) ~ label {
     transform: scale(0.85) translateY(-1.5rem) translateX(0.15rem);
   }

This CSS code adjusts the initial position of the labels and applies a smooth transition when the input fields are focused or filled.

3. Styling Input Fields and Borders: You can customize the appearance of the input fields and their borders to match your design. Use CSS to target the .form-control class within the form-floating class.

   .form-floating .form-control {
     border-color: #cccccc;
     border-radius: 5px;
     background-color: #f8f8f8;
   }

   .form-floating .form-control:focus {
     border-color: #007bff;
     box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
   }

This CSS code changes the border color, border radius, and background color of the input fields. It also applies a different border color and box shadow when the input fields are focused.

Showing Validation Feedback

Bootstrap has classes to show the validation state of form fields. You can use the is-valid and is-invalid classes on the form-control element to show success or error states.

<div class="form-floating">
  <input type="email" class="form-control is-invalid" id="floatingEmail" placeholder="Enter your email">
  <label for="floatingEmail">Email</label>
</div>

Styling Invalid and Valid States

Bootstrap has default styles for invalid and valid states, but you can change them to match your design. Use CSS to target the is-invalid and is-valid classes within the form-floating class.

.form-floating .form-control.is-invalid {
  border-color: #dc3545;
}

.form-floating .form-control.is-valid {
  border-color: #28a745;
}

Showing Error Messages and Icons

Along with visual indicators, you can show error messages and icons to give more details to users. Bootstrap has classes for showing error messages below the input fields.

<div class="form-floating">
  <input type="password" class="form-control is-invalid" id="floatingPassword" placeholder="Enter your password">
  <label for="floatingPassword">Password</label>
  <div class="invalid-feedback">
    Please enter a valid password.
  </div>
</div>

You can also add icons to the error messages to make them more visible. Use Bootstrap's icon classes or add your own icons within the error message element.

<div class="form-floating">
  <input type="text" class="form-control is-invalid" id="floatingUsername" placeholder="Enter your username">
  <label for="floatingUsername">Username</label>
  <div class="invalid-feedback">
    <i class="bi bi-exclamation-circle"></i> Username is already taken.
  </div>
</div>

Combining Floating Labels with Input Groups

You can use floating labels together with Bootstrap's input groups to create complex form layouts. Input groups let you add icons, buttons, or text next to the input fields. To combine floating labels with input groups:

1. Create a <div> with the class input-group to wrap the input group components.
2. Inside the input-group, create another <div> with the class form-floating to enable the floating label behavior.
3. Put your input field and label inside the form-floating div, as you would with a regular floating label.
4. Add any extra elements, such as icons or buttons, inside the input-group div, either before or after the form-floating div.

<div class="input-group mb-3">
  <div class="form-floating">
    <input type="text" class="form-control" id="floatingInputGroup" placeholder="Enter your username">
    <label for="floatingInputGroup">Username</label>
  </div>
  <span class="input-group-text">@example.com</span>
</div>

Using Floating Labels with Custom Select Elements

You can also use floating labels with custom select elements in Bootstrap:

1. Create a <div> with the class form-floating to enable the floating label behavior.
2. Inside the form-floating div, create a <select> with the class form-select to style it as a custom select.
3. Add the <option> elements inside the <select> to define the available options.
4. Put the <label> element after the <select> element, as you would with a regular 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="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
  <label for="floatingSelect">Select an option</label>
</div>

Handling Floating Labels in Modal Forms

When using floating labels in forms within Bootstrap modals, you may need to change the z-index of the labels to prevent them from being overlapped by the modal overlay. To do this, you can add a custom CSS rule to increase the z-index of the labels within the modal.

.modal-body .form-floating > label {
  z-index: 1060;
}

By using these techniques, you can use floating labels in complex form layouts and customize their behavior to fit your needs.