Bootstrap Input Group and Floating Labels

Input groups and floating labels are two helpful form parts. Input groups attach text or buttons to a field, and floating labels put the label inside the field and move it up when you type.

Input group

<div class="input-group mb-3">
  <span class="input-group-text" id="at">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="at">
</div>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recipient's email" aria-label="Recipient's email">
  <span class="input-group-text">@example.com</span>
</div>
<div class="input-group">
  <span class="input-group-text">$</span>
  <input type="text" class="form-control" aria-label="Amount">
  <span class="input-group-text">.00</span>
</div>

With buttons

<div class="input-group">
  <input type="text" class="form-control" placeholder="Search..." aria-label="Search">
  <button class="btn btn-primary" type="button">Search</button>
</div>

In Bootstrap 5 the old .input-group-prepend and .input-group-append wrappers are removed. Put the text and the buttons directly in the .input-group, before or after the input.

Sizes

<div class="input-group input-group-lg mb-2">
  <span class="input-group-text">Large</span>
  <input type="text" class="form-control" aria-label="Large">
</div>
<div class="input-group input-group-sm">
  <span class="input-group-text">Small</span>
  <input type="text" class="form-control" aria-label="Small">
</div>

Floating labels

Wrap the field and the label in .form-floating. The input needs a placeholder (it can be a single space), and the label must come after the input.

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatEmail" placeholder="name@example.com">
  <label for="floatEmail">Email address</label>
</div>
<div class="form-floating mb-3">
  <input type="password" class="form-control" id="floatPass" placeholder="Password">
  <label for="floatPass">Password</label>
</div>
<div class="form-floating">
  <select class="form-select" id="floatSel" aria-label="Floating label select">
    <option selected>Open this menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
  </select>
  <label for="floatSel">Works with selects</label>
</div>

Rules for floating labels

• The label must be after the input in the HTML.
• The placeholder attribute is needed (the CSS uses it to know if the field is empty).
• It works with input, textarea and select.

• Previous Page
• Next Page

---

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.