Bootstrap · Chapter 33 of 43

Bootstrap Input Groups

Input groups let you attach text, icons, or buttons directly to the side of a form input, such as a currency symbol, a unit label, or a search button.

Wrap the input and its addons inside a .input-group div, and use .input-group-text for text/icon addons placed before or after the input field.

Syntax

<div class="input-group">
  <span class="input-group-text">$</span>
  <input type="text" class="form-control">
</div>

Text addons

Place a <span class="input-group-text"> before or after a .form-control inside an .input-group to show a fixed label, like a currency symbol or units.

Button addons and sizing

You can also place a <button class="btn"> inside an input group, such as a search or submit button. Add .input-group-lg or .input-group-sm to resize the entire group at once.

Example 1 (html)

<div class="input-group mb-3">
  <span class="input-group-text">$</span>
  <input type="text" class="form-control" placeholder="Amount">
  <span class="input-group-text">.00</span>
</div>

Output

An input field with a dollar sign attached before it and .00 after it

input-group-text creates fixed labels attached to both sides of the input, forming a single visual unit.

Example 2 (html)

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

Output

A search text box with an attached blue Search button on its right

Placing a button inside the input-group attaches it directly to the input, with no visual gap.

Key points

.input-group wraps an input together with its addons.
.input-group-text creates fixed text or icon labels.
Buttons can also be placed inside an input group.
.input-group-lg and .input-group-sm resize the whole group.

💡 Note: Input groups automatically connect the border radius of adjoining elements for a seamless look.

Bootstrap Input Groups

Text addons

Button addons and sizing

Key points

📝 Quick Quiz