Search code examples
htmlbootstrap-5

Bootstrap 5 floating labels in an input group


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?

<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" id="code1" placeholder="Code 1">
    <label for="code1">Code 1</label>
    <span class="input-group-text">❌</span>
</div>

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


Solution

  • To improve the answer by @Unmitigated I ended up removing the radius for both right-hand corners of the input.

    .form-floating-group input {
      border-bottom-right-radius: 0;
      border-top-right-radius: 0;
    }
    <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 form-floating-group 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>