Bootstrap Input Groups
An input group glues text, icons, or buttons directly onto the edge of a field, with no gap between them. It is perfect for things like a price field with a leading dollar sign, an email with an @ symbol, or a search box with a Go button attached.
The building blocks
Wrap everything in a <div class="input-group">. Inside it you place your .form-control field plus one or more .input-group-text elements for the attached labels. Bootstrap seamlessly joins their borders so they look like a single unit.
An add-on before the field
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="input-group">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="username">
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>The order of elements in the HTML decides which side the add-on appears on. Put the .input-group-text before the input and it sits on the left; put it after and it sits on the right.
Add-ons on both sides
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="input-group">
<span class="input-group-text">$</span>
<input type="text" class="form-control" placeholder="0.00">
<span class="input-group-text">.00</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Adding buttons
You can drop a real <button> straight into an input group, no wrapper needed. This is the classic recipe for a search bar with an attached action button.
A search box with a button
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search jobs">
<button class="btn btn-primary" type="button">Search</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Sizing
Add .input-group-lg or .input-group-sm to the wrapping .input-group. The whole group, field and add-ons together, resizes as one. You do not need to add size classes to the inner elements.
- Use .input-group as the outer wrapper.
- Use .input-group-text for plain text or icon add-ons.
- Drop <button> elements in directly to attach actions.
- Size the whole group with .input-group-lg or .input-group-sm.
