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 -->
Input group break
Long contents don't fit in small screens? Use .input-group-{breakpoint}-vertical modifier classes to break horizontal alignment and keep the same style in vertical order. Reduce browser size to see it in action.
<!-- Input Group -->
<div class="input-group input-group-md-vertical">
<input type="text" class="form-control" placeholder="First name" aria-label="First name">
<input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
</div>
<!-- End Input Group -->
Vertical example:
<!-- Input Group -->
<div class="input-group input-group-vertical" style="max-width: 18rem;">
<input type="text" class="form-control" placeholder="First name" aria-label="First name">
<input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
</div>
<!-- End Input Group -->
Input group borderless
Add .input-group-borderless for an input without borders.
<!-- Input Group -->
<div class="mb-3">
<label for="inputGroupBorderlessFullName" class="form-label">Full name</label>
<div class="input-group input-group-merge input-group-borderless input-group-flush">
<div class="input-group-prepend input-group-text" id="inputGroupBorderlessFullNameAddOn">
<i class="bi-person"></i>
</div>
<input type="text" class="form-control" id="inputGroupBorderlessFullName" placeholder="Mark Williams" aria-label="Mark Williams" aria-describedby="inputGroupBorderlessFullNameAddOn">
</div>
</div>
<!-- End Input Group -->
<!-- Input Group -->
<div class="mb-3">
<label for="inputGroupBorderlessEmail" class="form-label">Email</label>
<div class="input-group input-group-merge input-group-borderless input-group-flush">
<div class="input-group-prepend input-group-text" id="inputGroupBorderlessEmailAddOn">
<i class="bi-envelope-open"></i>
</div>
<input type="text" class="form-control" id="inputGroupBorderlessEmail" placeholder="mark@example.com" aria-label="mark@example.com" aria-describedby="inputGroupBorderlessEmailAddOn">
</div>
</div>
<!-- End Input Group -->
<!-- Input Group -->
<div class="mb-3">
<label for="inputGroupBorderlessEmailOptional" class="form-label">Email <span class="form-label-secondary">(Optional)</span></label>
<div class="input-group input-group-merge input-group-borderless input-group-flush">
<div class="input-group-prepend input-group-text" id="inputGroupBorderlessEmailOptionalAddOn">
<i class="bi-envelope-open"></i>
</div>
<input type="text" class="form-control" id="inputGroupBorderlessEmailOptional" placeholder="mark@example.com" aria-label="mark@example.com" aria-describedby="inputGroupBorderlessEmailOptionalAddOn">
</div>
</div>
<!-- End Input Group -->
<!-- Input Group -->
<div class="mb-3">
<label for="inputGroupBorderlessGenderSelect" class="form-label">Gender</label>
<div class="input-group input-group-merge input-group-borderless input-group-flush">
<div class="input-group-prepend input-group-text">
<i class="bi-person"></i>
</div>
<select id="inputGroupBorderlessGenderSelect" class="form-select">
<option>Choose a gender</option>
<option>Male</option>
<option>Female</option>
<option>Other</option>
</select>
</div>
</div>
<!-- End Input Group -->
Input group flush
Add .input-group-flush to remove some borders and rounded corners to render input edge-to-edge in a parent container.
<!-- Input Group -->
<div class="mb-3">
<label for="inputGroupFlushFullName" class="form-label">Full name</label>
<div class="input-group input-group-merge input-group-flush">
<div class="input-group-prepend input-group-text" id="inputGroupFlushFullNameAddOn">
<i class="bi-person"></i>
</div>
<input type="text" class="form-control" id="inputGroupFlushFullName" placeholder="Mark Williams" aria-label="Mark Williams" aria-describedby="inputGroupFlushFullNameAddOn">
</div>
</div>
<!-- End Input Group -->
<!-- Input Group -->
<div class="mb-3">
<label for="inputGroupFlushEmail" class="form-label">Email</label>
<div class="input-group input-group-merge input-group-flush">
<div class="input-group-prepend input-group-text" id="inputGroupFlushEmailAddOn">
<i class="bi-envelope-open"></i>
</div>
<input type="text" class="form-control" id="inputGroupFlushEmail" placeholder="mark@example.com" aria-label="mark@example.com" aria-describedby="inputGroupFlushEmailAddOn">
</div>
</div>
<!-- End Input Group -->
<!-- Input Group -->
<div class="mb-3">
<label for="inputGroupFlushEmailOptional" class="form-label">Email <span class="form-label-secondary">(Optional)</span></label>
<div class="input-group input-group-merge input-group-flush">
<div class="input-group-prepend input-group-text" id="inputGroupFlushEmailOptionalAddOn">
<i class="bi-envelope-open"></i>
</div>
<input type="text" class="form-control" id="inputGroupFlushEmailOptional" placeholder="mark@example.com" aria-label="mark@example.com" aria-describedby="inputGroupFlushEmailOptionalAddOn">
</div>
</div>
<!-- End Input Group -->
<!-- Input Group -->
<div class="mb-3">
<label for="inputGroupFlushGenderSelect" class="form-label">Gender</label>
<div class="input-group input-group-merge input-group-flush">
<div class="input-group-prepend input-group-text">
<i class="bi-person"></i>
</div>
<select id="inputGroupFlushGenderSelect" class="form-select">
<option>Choose a gender</option>
<option>Male</option>
<option>Female</option>
<option>Other</option>
</select>
</div>
</div>
<!-- End Input Group -->
Input group light
.input-group-hover-light adds light background color on hover.
<!-- Input Group -->
<div class="mb-3">
<label for="inputGroupLightFullName" class="form-label">Full name</label>
<div class="input-group input-group-merge input-group-light">
<div class="input-group-prepend input-group-text" id="inputGroupLightFullNameAddOn">
<i class="bi-person"></i>
</div>
<input type="text" class="form-control" id="inputGroupLightFullName" placeholder="Mark Williams" aria-label="Mark Williams" aria-describedby="inputGroupLightFullNameAddOn">
</div>
</div>
<!-- End Input Group -->
<!-- Input Group -->
<div class="mb-3">
<label for="inputGroupLightEmail" class="form-label">Email</label>
<div class="input-group input-group-merge input-group-light">
<div class="input-group-prepend input-group-text" id="inputGroupLightEmailAddOn">
<i class="bi-envelope-open"></i>
</div>
<input type="text" class="form-control" id="inputGroupLightEmail" placeholder="mark@example.com" aria-label="mark@example.com" aria-describedby="inputGroupLightEmailAddOn">
</div>
</div>
<!-- End Input Group -->
<!-- Input Group -->
<div class="mb-3">
<label for="inputGroupLightEmailOptional" class="form-label">Email <span class="form-label-secondary">(Optional)</span></label>
<div class="input-group input-group-merge input-group-light">
<div class="input-group-prepend input-group-text" id="inputGroupLightEmailOptionalAddOn">
<i class="bi-envelope-open"></i>
</div>
<input type="text" class="form-control" id="inputGroupLightEmailOptional" placeholder="mark@example.com" aria-label="mark@example.com" aria-describedby="inputGroupLightEmailOptionalAddOn">
</div>
</div>
<!-- End Input Group -->
<!-- Input Group -->
<div class="mb-3">
<label for="inputGroupLightGenderSelect" class="form-label">Gender</label>
<div class="input-group input-group-merge input-group-light">
<div class="input-group-prepend input-group-text">
<i class="bi-person"></i>
</div>
<select id="inputGroupLightGenderSelect" class="form-select">
<option>Choose a gender</option>
<option>Male</option>
<option>Female</option>
<option>Other</option>
</select>
</div>
</div>
<!-- End Input Group -->
Input group hover light
.input-group-light adds light background color.
<!-- Input Group -->
<div class="mb-3">
<label for="inputGroupHoverLightFullName" class="form-label">Full name</label>
<div class="input-group input-group-merge input-group-hover-light">
<div class="input-group-prepend input-group-text" id="inputGroupHoverLightFullNameAddOn">
<i class="bi-person"></i>
</div>
<input type="text" class="form-control" id="inputGroupHoverLightFullName" placeholder="Mark Williams" aria-label="Mark Williams" aria-describedby="inputGroupHoverLightFullNameAddOn">
</div>
</div>
<!-- End Input Group -->
<!-- Input Group -->
<div class="mb-3">
<label for="inputGroupHoverLightEmail" class="form-label">Email</label>
<div class="input-group input-group-merge input-group-hover-light">
<div class="input-group-prepend input-group-text" id="inputGroupHoverLightEmailAddOn">
<i class="bi-envelope-open"></i>
</div>
<input type="text" class="form-control" id="inputGroupHoverLightEmail" placeholder="mark@example.com" aria-label="mark@example.com" aria-describedby="inputGroupHoverLightEmailAddOn">
</div>
</div>
<!-- End Input Group -->
<!-- Input Group -->
<div class="mb-3">
<label for="inputGroupHoverLightEmailOptional" class="form-label">Email <span class="form-label-secondary">(Optional)</span></label>
<div class="input-group input-group-merge input-group-hover-light">
<div class="input-group-prepend input-group-text" id="inputGroupHoverLightEmailOptionalAddOn">
<i class="bi-envelope-open"></i>
</div>
<input type="text" class="form-control" id="inputGroupHoverLightEmailOptional" placeholder="mark@example.com" aria-label="mark@example.com" aria-describedby="inputGroupHoverLightEmailOptionalAddOn">
</div>
</div>
<!-- End Input Group -->
<!-- Input Group -->
<div class="mb-3">
<label for="inputGroupHoverLightGenderSelect" class="form-label">Gender</label>
<div class="input-group input-group-merge input-group-hover-light">
<div class="input-group-prepend input-group-text">
<i class="bi-person"></i>
</div>
<select id="inputGroupHoverLightGenderSelect" class="form-select">
<option>Choose a gender</option>
<option>Male</option>
<option>Female</option>
<option>Other</option>
</select>
</div>
</div>
<!-- End Input Group -->