Bootstrap Input Groups allow you to combine form controls with text, icons, buttons, dropdowns, and other elements. They are useful for creating professional search boxes, currency fields, usernames, website URLs, phone numbers, and many other types of forms.
.input-group class.
Additional text or elements are commonly placed inside
.input-group-text.
An input group combines an input control with additional content on its left or right side.
<div class="input-group">
<span class="input-group-text">
@
</span>
<input type="text"
class="form-control"
placeholder="Username">
</div>
The .input-group class acts as the main wrapper for an
input group.
<div class="input-group">
<input
type="text"
class="form-control">
</div>The wrapper allows related form elements to be displayed together.
The .input-group-text class is used for text or simple
content placed next to an input.
<div class="input-group">
<span class="input-group-text">
$
</span>
<input
type="text"
class="form-control">
</div>
You can place text before an input using
.input-group-text.
<div class="input-group">
<span class="input-group-text">
Name
</span>
<input
type="text"
class="form-control"
placeholder="Enter name">
</div>Text can also be placed after the input.
<div class="input-group">
<input
type="text"
class="form-control"
placeholder="Username">
<span class="input-group-text">
@example.com
</span>
</div>Input groups are useful for displaying currency symbols with price fields.
<div class="input-group">
<span class="input-group-text">
₹
</span>
<input
type="number"
class="form-control"
placeholder="Amount">
</div>You can use input groups to display a percentage symbol.
<div class="input-group">
<input
type="number"
class="form-control"
placeholder="Discount">
<span class="input-group-text">
%
</span>
</div>An input group can make username fields easier to understand.
<div class="input-group">
<span class="input-group-text">
@
</span>
<input
type="text"
class="form-control"
placeholder="Username">
</div>Input groups can be used to create website URL fields.
<div class="input-group">
<span class="input-group-text">
https://
</span>
<input
type="text"
class="form-control"
placeholder="example.com">
</div>An email symbol can be displayed before an email input.
<div class="input-group">
<span class="input-group-text">
@
</span>
<input
type="email"
class="form-control"
placeholder="Email">
</div>Buttons can be placed inside an input group.
<div class="input-group">
<input
type="text"
class="form-control"
placeholder="Search">
<button
class="btn btn-primary">
Search
</button>
</div>Search fields are a common practical use of input groups.
<div class="input-group">
<input
type="search"
class="form-control"
placeholder="Search tutorials">
<button
class="btn btn-success">
Search
</button>
</div>Multiple buttons can be placed next to an input.
<div class="input-group">
<input
type="text"
class="form-control">
<button
class="btn btn-primary">
Search
</button>
<button
class="btn btn-secondary">
Clear
</button>
</div>An input group can contain a Bootstrap dropdown button.
<div class="input-group">
<button
class="btn btn-outline-secondary
dropdown-toggle"
data-bs-toggle="dropdown">
Course
</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">
HTML
</a>
</li>
<li>
<a class="dropdown-item" href="#">
Python
</a>
</li>
</ul>
<input
type="text"
class="form-control">
</div>Checkboxes can also be placed inside input groups.
<div class="input-group">
<div class="input-group-text">
<input
class="form-check-input mt-0"
type="checkbox">
</div>
<input
type="text"
class="form-control"
placeholder="Select option">
</div>Radio buttons can be placed inside an input group when appropriate.
<div class="input-group">
<div class="input-group-text">
<input
class="form-check-input mt-0"
type="radio"
name="option">
</div>
<input
type="text"
class="form-control"
value="HTML">
</div>Bootstrap provides large and small sizes for input groups.
<div class="input-group input-group-lg">
<span class="input-group-text">
₹
</span>
<input
class="form-control">
</div>
<div class="input-group">
...
</div>
<div class="input-group input-group-sm">
...
</div>You can place multiple inputs inside one input group.
<div class="input-group">
<span class="input-group-text">
First and Last Name
</span>
<input
type="text"
class="form-control"
placeholder="First name">
<input
type="text"
class="form-control"
placeholder="Last name">
</div>An input group can also be used with a textarea.
<div class="input-group">
<span class="input-group-text">
Message
</span>
<textarea
class="form-control">
</textarea>
</div>A select control can be combined with an input group.
<div class="input-group">
<select
class="form-select">
<option>
+91
</option>
<option>
+1
</option>
</select>
<input
type="tel"
class="form-control"
placeholder="Phone number">
</div>A button can be placed before the input.
<div class="input-group">
<button
class="btn btn-primary">
Search
</button>
<input
type="text"
class="form-control"
placeholder="Search here">
</div>Buttons can be placed on both sides of an input.
<div class="input-group">
<button
class="btn btn-outline-secondary">
-
</button>
<input
type="number"
class="form-control text-center"
value="1">
<button
class="btn btn-outline-secondary">
+
</button>
</div>Input groups can contain form controls with validation classes.
<div class="input-group">
<span class="input-group-text">
@
</span>
<input
type="email"
class="form-control is-invalid"
value="">
</div>
<div class="invalid-feedback">
Please enter a valid email.
</div>Input groups are useful for creating website and domain fields.
<div class="input-group">
<span class="input-group-text">
https://
</span>
<input
type="text"
class="form-control"
placeholder="www.example">
<span class="input-group-text">
.com
</span>
</div>A button can be used with a file input to create a file-selection interface.
<div class="input-group">
<input
type="file"
class="form-control">
<button
class="btn btn-primary">
Upload
</button>
</div>The actual upload still requires server-side processing.
A search bar is one of the most common uses of an input group.
<div class="input-group">
<input
type="search"
class="form-control"
placeholder="Search students">
<button
class="btn btn-primary">
Search
</button>
</div>A payment form can use an input group to display a currency symbol along with the amount.
<div class="input-group">
<span class="input-group-text">
₹
</span>
<input
type="number"
class="form-control"
placeholder="Enter payment amount">
<span class="input-group-text">
INR
</span>
</div>Input groups can be combined with Bootstrap's grid system to create responsive forms.
<div class="row">
<div class="col-md-6 mb-3">
<label class="form-label">
Username
</label>
<div class="input-group">
<span class="input-group-text">
@
</span>
<input
type="text"
class="form-control">
</div>
</div>
<div class="col-md-6 mb-3">
<label class="form-label">
Website
</label>
<div class="input-group">
<span class="input-group-text">
https://
</span>
<input
type="text"
class="form-control">
</div>
</div>
</div>Input groups can make student admission forms easier to understand and use.
The following example combines labels, input groups, text prefixes, currency, buttons, and responsive grid classes.
<form>
<div class="row">
<div class="col-md-6 mb-3">
<label class="form-label">
Username
</label>
<div class="input-group">
<span class="input-group-text">
@
</span>
<input
type="text"
class="form-control"
placeholder="Username">
</div>
</div>
<div class="col-md-6 mb-3">
<label class="form-label">
Email
</label>
<div class="input-group">
<span class="input-group-text">
@
</span>
<input
type="email"
class="form-control"
placeholder="Email">
</div>
</div>
<div class="col-md-6 mb-3">
<label class="form-label">
Course Fee
</label>
<div class="input-group">
<span class="input-group-text">
₹
</span>
<input
type="number"
class="form-control"
placeholder="Amount">
<span class="input-group-text">
INR
</span>
</div>
</div>
<div class="col-md-6 mb-3">
<label class="form-label">
Search
</label>
<div class="input-group">
<input
type="search"
class="form-control"
placeholder="Search">
<button
type="button"
class="btn btn-primary">
Search
</button>
</div>
</div>
<div class="col-12">
<button
type="submit"
class="btn btn-success">
Submit
</button>
</div>
</div>
</form>.input-group as the main input group wrapper..input-group-text for text or simple content beside an input..input-group-lg for larger input groups..input-group-sm for smaller input groups.Question: Which Bootstrap class is used as the main wrapper for an input group?