Bootstrap 5 floating labels in an input group

Question

I'm wanting to use Bootstrap's "Floating Label" and "Input Group" components together. The trouble I'm having is that the label is hidden when the input is focused. In my code example below, I have these scenarios:

1. Both components (see that the label disappears when clicking in the input).
2. Floating label only

Does anyone know of a way to make these components work together?

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="form-floating input-group mb-3">
    <input type="text" class="form-control" name="code1" placeholder="Code 1">
    <label for="code1">Code 1</label>
    <span class="input-group-text"><i class="fas fa-times"></i></span>
</div>

<div class="form-floating mb-3">
    <input type="text" class="form-control" name="code4" placeholder="Code 4">
    <label for="code4">Code 4</label>
</div>

Answer 1

Place the floating label inside another input-group div.

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="input-group mb-3">
  <div class="form-floating flex-grow-1">
      <input type="text" class="form-control" name="code1" placeholder="Code 1">
      <label for="code1">Code 1</label>
  </div>
  <span class="input-group-text"><i class="fas fa-times"></i></span>
</div>

---

Update: Since Bootstrap 5.2, flex-grow-1 is no longer needed and the border rounding is automatically addressed.

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="input-group mb-3">
  <div class="form-floating">
      <input type="text" class="form-control" name="code1" placeholder="Code 1">
      <label for="code1">Code 1</label>
  </div>
  <span class="input-group-text"><i class="fas fa-times"></i></span>
</div>