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?

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

Lowrey

Answer 1

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>

Lowrey

There seem to be trouble with using <div class="invalid-feedback"> as when placed after the <span> it won't be shown anyway and when placed below the <label> it will break the whole thing :-/ – Aldos

@JanDrábek I'm also trying to combine Input Groups, Floating Labels and Invalid Feedback, it breaks if you put it inside the floating-label and it doesn't show the text when you put it inside the input-group... – Menzies

Answer 2

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>

Bellerophon

Answer 3

Classes rounded-0 rounded-start needed to avoid border-radius at the right of input text

<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="container mt-5">
  <div class="input-group">
    <div class="flex-grow-1 form-floating">
      <input placeholder="Search address" aria-label="Search address" aria-describedby="basic-wallet" type="text" class="rounded-0 rounded-start form-control" value="New York">
      <label>Your wallet address</label>
    </div>
    <span class="input-group-text"><i class="fas fa-times"></i></span>
  </div>
</div>

Agglutination

Answer 4

I encountered the same needs.

Here's my solution:

The form :

<div class="col-12">
  <div class="input-group mb-3">
    <span class="input-group-text">Label :</span>
    <div class="form-floating">
      @Html.EditorFor(model => model.FieldA, new { htmlAttributes = new { @class = "form-control", placeholder = "Field A" } })
      @Html.LabelFor(model => model.FieldA)
    </div>
    <div class="form-floating">
      @Html.EditorFor(model => model.FieldB, new { htmlAttributes = new { @class = "form-control", placeholder = "Field B" } })
      @Html.LabelFor(model => model.FieldB)
    </div>
  </div>
</div>

Note : i'm using ASP.NET, replace Editor and Label -For calls with your corresponding code :

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

Find Bootstrap original way (V5.1) of handling rounded border. Here are the original code lines :

.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group.has-validation > :nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu),
.input-group.has-validation > .dropdown-toggle:nth-last-child(n+4) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group > .form-control,
.input-group > .form-select {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}

And here's my custom css based on what I know of css selectors (I'm actually a backend dev) :

.input-group:not(.has-validation) .form-floating:not(:last-child) > :not(.dropdown-toggle):not(.dropdown-menu),
.input-group:not(.has-validation) .form-floating > .dropdown-toggle:nth-last-child(n+3) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group.has-validation .form-floating:nth-last-child(n+3) > :not(.dropdown-toggle):not(.dropdown-menu),
.input-group.has-validation .form-floating > .dropdown-toggle:nth-last-child(n+4) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group .form-floating:not(:first-child) > :not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  /*margin-left: -1px;*/
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* for form to be responsive */
.input-group > .form-floating {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}

I guess the selectors could be greatly improved, as some cases could no more occur, feel free to submit improvements !

Orlosky

Answer 5

If you want a clean design for an input field without compromising its appearance when using Bootstrap's input-group, you can use custom CSS to retaining the input-group functionality. Here's an example:

    .floating-group input {
        padding-right: 40px;
    }

    .floating-group i {
        position: absolute;
        right: 12px;
        top: 22px;
        cursor: pointer;
    }

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


<div class="container mt-2">
    <div class="form-floating floating-group">
        <input placeholder="Search address" aria-label="Search address" aria-describedby="basic-wallet" type="text" class="form-control" value="New York">
        <label>Your wallet address</label>
        <i class="fa-solid fa-xmark"></i>
    </div>
</div>

Check the attached screenshot.

If you prefer to use Bootstrap's input-group, here's a solution that you can implement. Please note that this solution will work with Bootstrap version 5.2 and later.

<div class="input-group mb-3">
  <span class="input-group-text">@</span>
  <div class="form-floating">
    <input type="text" class="form-control" id="floatingInputGroup1" placeholder="Username">
    <label for="floatingInputGroup1">Username</label>
  </div>
</div>

reference: https://getbootstrap.com/docs/5.2/forms/floating-labels/#input-groups

Boony

Answer 6

.input-group .form-floating input {
    border-top-right-radius: 0!important;
    border-bottom-right-radius: 0!important;
}

thanks for the proper nesting, why use a new class namespace?

Aniela

It is best to avoid using !important in this context, where a simple solution that doesn't require !important is available. (#8360690) – Ngo