Input Group
Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.
Bootstrap Input group documentationBasic examples
Use .input-group-prepend and .input-group-append in .input-group
@
@example.com
https://example.com/users/
$
.00
@
With textarea
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-text" id="basic-addon2">@example.com</span>
</div>
<label for="basic-url" class="form-label">Your vanity URL</label>
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
<div class="input-group mb-3">
<span class="input-group-text">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-text">.00</span>
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Username" aria-label="Username">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="Server" aria-label="Server">
</div>
<div class="input-group">
<span class="input-group-text">With textarea</span>
<textarea class="form-control" aria-label="With textarea"></textarea>
</div>
Input group merge
Use .input-group-merge to place one add-on on either side of an input that keeps icons as a part of the form control. You may also place one on both sides of an input.
<!-- Input Group -->
<div class="mb-3">
<label for="inputGroupMergeFullName" class="form-label">Full name</label>
<div class="input-group input-group-merge">
<div class="input-group-prepend input-group-text" id="inputGroupMergeFullNameAddOn">
<i class="bi-person"></i>
</div>
<input type="text" class="form-control" id="inputGroupMergeFullName" placeholder="Mark Williams" aria-label="Mark Williams" aria-describedby="inputGroupMergeFullNameAddOn">
</div>
</div>
<!-- End Input Group -->
<!-- Input Group -->
<div class="mb-3">
<label for="inputGroupMergeEmail" class="form-label">Email</label>
<div class="input-group input-group-merge">
<div class="input-group-prepend input-group-text" id="inputGroupMergeEmailAddOn">
<i class="bi-envelope-open"></i>
</div>
<input type="text" class="form-control" id="inputGroupMergeEmail" placeholder="mark@example.com" aria-label="mark@example.com" aria-describedby="inputGroupMergeEmailAddOn">
</div>
</div>
<!-- End Input Group -->
<!-- Input Group -->
<div class="mb-3">
<label for="inputGroupMergeEmailOptional" class="form-label">Email <span class="form-label-secondary">(Optional)</span></label>
<div class="input-group input-group-merge">
<input type="text" class="form-control" id="inputGroupMergeEmailOptional" placeholder="mark@example.com" aria-label="mark@example.com" aria-describedby="inputGroupMergeEmailOptionalAddOn">
<div class="input-group-append input-group-text" id="inputGroupMergeEmailOptionalAddOn">
<i class="bi-envelope-open"></i>
</div>
</div>
</div>
<!-- End Input Group -->
<!-- Input Group -->
<div class="mb-3">
<label for="inputGroupMergeGenderSelect" class="form-label">Gender</label>
<div class="input-group input-group-merge">
<div class="input-group-prepend input-group-text">
<i class="bi-person"></i>
</div>
<select id="inputGroupMergeGenderSelect" class="form-select">
<option>Choose a gender</option>
<option>Male</option>
<option>Female</option>
<option>Other</option>
</select>
</div>
</div>
<!-- End Input Group -->