BootstrapHow-ToBeginner · 3 min read

How to Use Input Group Addon in Bootstrap Easily

In Bootstrap, use the input-group container to wrap your input and addon elements. Addons are placed inside span or div with the class input-group-text to add text or symbols before or after the input field.

📐

Syntax

The basic structure for an input group addon in Bootstrap is:

div.input-group: wraps the entire input and addon.
span.input-group-text: contains the addon text or symbol.
input.form-control: the input field itself.

This setup places the addon inline with the input.

html

<div class="input-group">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="Username">
</div>

Output

An input box with a gray box containing '@' immediately to the left inside the input border.

💻

Example

This example shows how to add a dollar sign before a number input and a button after it using input group addons.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Input Group Addon Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-4">
    <label for="amount" class="form-label">Amount</label>
    <div class="input-group">
      <span class="input-group-text">$</span>
      <input type="number" class="form-control" id="amount" placeholder="Enter amount">
      <button class="btn btn-primary" type="button">Pay</button>
    </div>
  </div>
</body>
</html>

Output

A labeled input field with a '$' sign on the left inside a gray box and a blue 'Pay' button on the right, all aligned horizontally.

⚠️

Common Pitfalls

Common mistakes when using input group addons include:

Not wrapping the input and addon inside div.input-group, which breaks alignment.
Using deprecated classes like input-group-addon instead of input-group-text in Bootstrap 5.
Placing addons outside the input group container, causing layout issues.

Always use input-group-text for addon text and keep all elements inside input-group.

html

<!-- Wrong: using deprecated class and outside input-group -->
<div>
  <span class="input-group-addon">@</span>
  <input type="text" class="form-control" placeholder="Username">
</div>

<!-- Right: correct usage inside input-group -->
<div class="input-group">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="Username">
</div>

Output

The first snippet shows misaligned input and addon; the second snippet shows properly aligned input with addon.

📊

Quick Reference

Tips for using input group addons in Bootstrap:

Wrap input and addons inside div.input-group.
Use span.input-group-text for text or symbols.
Use buttons inside div.input-group with class btn for clickable addons.
Bootstrap 5 replaced input-group-addon with input-group-text.
Input groups support multiple addons on either side.

✅

Key Takeaways

Always wrap inputs and addons inside a div.input-group for proper layout.

Use span.input-group-text to add static text or symbols as addons.

Buttons can be added as addons using button.btn inside the input group.

Avoid deprecated classes like input-group-addon; use input-group-text in Bootstrap 5.

Multiple addons can be placed before or after the input for flexible UI.