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:

Both components (see that the label disappears when clicking in the input).
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/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/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>

Unmitigated · Answer 1 · 2022-08-04T00:42:07.670

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/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/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/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/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>

score 15 · Accepted Answer · answered Aug 09 '21 at 20:50

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/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/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>

There seem to be trouble with using
as when placed after the it won't be shown anyway and when placed below the it will break the whole thing :-/ — Jan Drábek, May 10 '22 at 09:04
@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... — Tiagocf2, Mar 02 '23 at 15:02

score 2 · Answer 3 · answered Jan 13 '22 at 10:12

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/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/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>

Axel Samyn · Answer 4 · 2022-01-06T18:17:48.790

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 !

NukeOfWar · Answer 5 · 2021-09-26T05:14:57.390

-2

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

edited Sep 26 '21 at 05:14

answered Sep 26 '21 at 05:08

NukeOfWar

1
1

2

It is best to avoid using `!important` in this context, where a simple solution that doesn't require `!important` is available. (https://stackoverflow.com/questions/8360190/is-it-bad-to-use-important-in-a-css-property) – Eldar B. Sep 26 '21 at 08:12

Bootstrap 5 floating labels in an input group

5 Answers5