Bootstrap 5 input groups extend form inputs with text, icons and buttons. This page covers 4 input group patterns — text addons, button addons, icons and sizes — each ready to copy into your forms.
Quick Setup
Input groups need only Bootstrap 5 CSS:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
Key Classes Reference
| Class | What It Does |
|---|---|
.input-group | Required flex wrapper |
.input-group-text | Text or icon addon |
.input-group-sm | Small input group |
.input-group-lg | Large input group |
.form-control | The input inside the group |
.btn | Button addon inside group |
1. Bootstrap 5 Input Group with Text Addon
Add text labels before or after inputs using input-group-text. Common for currency, units and URL prefixes.
2. Bootstrap 5 Input Group with Buttons
Attach action buttons to inputs for search, copy and submit patterns.
3. Bootstrap 5 Input Group with Icons
Add Bootstrap Icons inside input-group-text for a polished form look.
4. Bootstrap 5 Input Group Sizes
Input groups in small, default and large sizes using input-group-sm and input-group-lg.
Frequently Asked Questions
Add input-group-text span before or after the input with your icon inside: <span class='input-group-text'><i class='bi bi-search'></i></span>. Include Bootstrap Icons CDN or Font Awesome. The icon aligns vertically with the input automatically.
The input-group is already a flex container so it fills its parent width. To constrain it add a max-width or place it inside a column: <div class='col-md-6'><div class='input-group'>. The input inside uses flex-grow:1 to fill available space.
Add is-invalid or is-valid to the input element inside the group. The invalid-feedback div should be placed after the entire input-group div, not inside it. The red border only applies to the input, not the addons.
Add a button with an eye icon after the password input: <button onclick='const i=document.getElementById("p"); i.type=i.type=="password"?"text":"password"' class='btn btn-outline-secondary'><i class='bi bi-eye'></i></button>. Toggle the input type between password and text on click.
Yes. Add multiple buttons inside the input-group: they render side by side. For a split button with dropdown, combine a regular button and a dropdown-toggle button inside the group. Wrap multiple addons in a div.input-group-text for text addons.
Need a Full Bootstrap 5 Admin Dashboard?
Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.
Browse Templates →Use code FIRST30 for 30% off your first purchase.