Bootstrap - Floating Labels

Implementing 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>.

Example: HTML Code for Floating Labels

<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:

Example: HTML Code for Floating Textarea

<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.

Example: CSS for Label Colors and Fonts

   .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.

  1. 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.

Example: CSS for Label Positions and Transitions

   .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.

  1. 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.

Example: CSS for Styling Input Fields and Borders

   .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.

Validation and Error Handling

When working with forms, you should validate user input and handle errors. Bootstrap has classes and techniques to show validation states and error messages for floating labels.

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.

Validation Feedback Example

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

In this example, the is-invalid class is used on the input field, showing an invalid email address. Bootstrap will style the input field with a red border and show an error message below it.

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.

Styling Example

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

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

This CSS code changes the border color of the input fields to red for invalid states and green for valid states. You can change the styles, such as background colors or box shadows, to make the validation feedback more visible.

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.

Error Message Example

<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>

The invalid-feedback class is used to wrap the error message. It will be shown below the input field when the is-invalid class is present.

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.

Error Message with Icon Example

<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>

In this example, the bi bi-exclamation-circle class is used to show an exclamation circle icon before the error message. You can change the icons and their styles to fit your design.

Advanced Techniques

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.

Example: Combining Floating Labels with Input Groups

<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.

Example: Using Floating Labels with Custom Select Elements

<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.

Example: Custom CSS for Floating Labels in Modals

.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.