BootstrapHow-ToBeginner · 3 min read

How to Create Input Group in Bootstrap: Simple Guide

To create an input group in Bootstrap, wrap your input element inside a div with the class input-group. You can add text, buttons, or icons before or after the input using input-group-text or button elements inside the group.

📐

Syntax

An input group in Bootstrap uses a div with the class input-group to wrap the input and any addons. Addons like text or buttons use span or button elements with the class input-group-text or btn.

div.input-group: container for the group
input.form-control: the text input
span.input-group-text: static text or icon inside the group
button.btn: clickable button inside the group

html

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

Output

An input box with '@' text on the left and a blue 'Go' button on the right, all in one horizontal line.

💻

Example

This example shows a simple input group with a text prefix and a button suffix. It demonstrates how to combine text and buttons with an input field for better user experience.

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 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="emailInput" class="form-label">Email address</label>
    <div class="input-group">
      <span class="input-group-text">@</span>
      <input type="email" class="form-control" id="emailInput" placeholder="Email">
      <button class="btn btn-outline-secondary" type="button">Submit</button>
    </div>
  </div>
</body>
</html>

Output

A labeled input field with '@' symbol on the left and a 'Submit' button on the right, aligned horizontally with Bootstrap styling.

⚠️

Common Pitfalls

Common mistakes when creating input groups include:

Not wrapping the input and addons inside a div.input-group, which breaks the layout.
Using incorrect classes like input-group-addon which is from older Bootstrap versions.
Placing buttons or text outside the input group container, causing misalignment.
Forgetting to add form-control class to the input, losing Bootstrap styling.

html

<!-- Wrong: missing input-group wrapper -->
<input type="text" class="form-control" placeholder="Username">
<span class="input-group-text">@</span>

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

Output

The wrong code shows input and text separated vertically; the right code shows them aligned horizontally as a group.

📊

Quick Reference

Class	Purpose
input-group	Container for input and addons
form-control	Bootstrap style for input fields
input-group-text	Static text or icon inside input group
btn	Button inside input group
input-group-prepend / input-group-append	Legacy wrappers (Bootstrap 4) — avoid in Bootstrap 5

✅

Key Takeaways

Wrap inputs and addons inside a div with class input-group for proper layout.

Use input-group-text for static text or icons inside the group.

Add buttons inside the group with Bootstrap button classes for consistent styling.

Always include form-control class on inputs to get Bootstrap styles.

Avoid legacy classes like input-group-addon or input-group-prepend in Bootstrap 5.