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 into .input-group
@
@example.com
https://example.com/users/
$
.00
With textarea
<div class="form-group">
<label for="withPrependLabel" class="input-label">With prepend</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">@</span>
</div>
<input type="text" class="form-control" id="withPrependLabel" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
</div>
<div class="form-group">
<label for="withAppendLabel" class="input-label">With append</label>
<div class="input-group">
<input type="text" class="form-control" id="withAppendLabel" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<span class="input-group-text" id="basic-addon2">@example.com</span>
</div>
</div>
</div>
<div class="form-group">
<label for="withPrependURLLabel" class="input-label">With prepend url</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
</div>
<input type="text" id="withPrependURLLabel" class="form-control" aria-describedby="basic-addon3">
</div>
</div>
<div class="form-group">
<label for="withPrependAndAppendLabel" class="input-label">With prepend and append</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<input type="text" class="form-control" id="withPrependAndAppendLabel" aria-label="Amount (to the nearest dollar)">
<div class="input-group-append">
<span class="input-group-text">.00</span>
</div>
</div>
</div>
<div class="form-group">
<label for="textareaWithPrependLabel" class="input-label">Textarea with prepend</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">With textarea</span>
</div>
<textarea class="form-control" id="textareaWithPrependLabel" aria-label="With textarea"></textarea>
</div>
</div>
Select addon
<!-- Input Group -->
<div class="input-group">
<div class="input-group-prepend">
<select class="custom-select">
<option value="1" selected="">All</option>
<option value="2">HTML</option>
<option value="3">CSS</option>
<option value="4">JS</option>
<option value="5">PHP</option>
<option value="6">Vue.js</option>
<option value="7">React</option>
<option value="8">Angular</option>
<option value="9">Ruby</option>
<option value="10">Python</option>
</select>
</div>
<input type="text" class="form-control">
<div class="input-group-append">
<a class="btn btn-icon btn-primary" href="javascript:;">
<i class="tio-search"></i>
</a>
</div>
</div>
<!-- End Input Group -->
Input group break
Long contents don't fit in small screens? Use .input-group-{breakpoint}-down-break 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-down-break">
<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-down-break" 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 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="form-group">
<label for="inputGroupMergeFullName" class="input-label">Full name</label>
<div class="input-group input-group-merge">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupMergeFullNameAddOn">
<i class="tio-user-outlined"></i>
</span>
</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="form-group">
<label for="inputGroupMergeEmail" class="input-label">Email</label>
<div class="input-group input-group-merge">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupMergeEmailAddOn">
<i class="tio-email-outlined"></i>
</span>
</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="form-group">
<label for="inputGroupMergeEmailOptional" class="input-label">Email <span class="input-label-secondary">(Optional)</span></label>
<div class="input-group input-group-merge">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupMergeEmailOptionalAddOn">
<i class="tio-email-outlined"></i>
</span>
</div>
<input type="text" class="form-control" id="inputGroupMergeEmailOptional" placeholder="mark@example.com" aria-label="mark@example.com" aria-describedby="inputGroupMergeEmailOptionalAddOn">
</div>
</div>
<!-- End Input Group -->
<!-- Input Group -->
<div class="form-group">
<label for="inputGroupMergeGenderSelect" class="input-label">Gender</label>
<div class="input-group input-group-merge">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="tio-user-outlined"></i>
</span>
</div>
<select id="inputGroupMergeGenderSelect" class="custom-select">
<option>Choose a gender</option>
<option>Male</option>
<option>Female</option>
<option>Other</option>
</select>
</div>
</div>
<!-- End Input Group -->
Input group pilled
Use the .input-group-pill modifier class to make forms more rounded (with a larger border-radius and additional horizontal padding).
<!-- Input Group -->
<div class="form-group">
<label for="inputGroupPilledFullName" class="input-label">Full name</label>
<div class="input-group input-group-merge input-group-pill">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupPilledFullNameAddOn">
<i class="tio-user-outlined"></i>
</span>
</div>
<input type="text" class="form-control" id="inputGroupPilledFullName" placeholder="Mark Williams" aria-label="Mark Williams" aria-describedby="inputGroupPilledFullNameAddOn">
</div>
</div>
<!-- End Input Group -->
<!-- Input Group -->
<div class="form-group">
<label for="inputGroupPilledEmail" class="input-label">Email</label>
<div class="input-group input-group-merge input-group-pill">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupPilledEmailAddOn">
<i class="tio-email-outlined"></i>
</span>
</div>
<input type="text" class="form-control" id="inputGroupPilledEmail" placeholder="mark@example.com" aria-label="mark@example.com" aria-describedby="inputGroupPilledEmailAddOn">
</div>
</div>
<!-- End Input Group -->
<!-- Input Group -->
<div class="form-group">
<label for="inputGroupPilledEmailOptional" class="input-label">Email <span class="input-label-secondary">(Optional)</span></label>
<div class="input-group input-group-merge input-group-pill">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupPilledEmailOptionalAddOn">
<i class="tio-email-outlined"></i>
</span>
</div>
<input type="text" class="form-control" id="inputGroupPilledEmailOptional" placeholder="mark@example.com" aria-label="mark@example.com" aria-describedby="inputGroupPilledEmailOptionalAddOn">
</div>
</div>
<!-- End Input Group -->
<!-- Input Group -->
<div class="form-group">
<label for="inputGroupPilledGenderSelect" class="input-label">Gender</label>
<div class="input-group input-group-merge input-group-pill">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="tio-user-outlined"></i>
</span>
</div>
<select id="inputGroupPilledGenderSelect" class="custom-select">
<option>Choose a gender</option>
<option>Male</option>
<option>Female</option>
<option>Other</option>
</select>
</div>
</div>
<!-- End Input Group -->
Input group borderless
Add .input-group-borderless for an input without borders.
<!-- Input Group -->
<div class="form-group">
<label for="inputGroupBorderlessFullName" class="input-label">Full name</label>
<div class="input-group input-group-merge input-group-borderless input-group-flush">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupBorderlessFullNameAddOn">
<i class="tio-user-outlined"></i>
</span>
</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="form-group">
<label for="inputGroupBorderlessEmail" class="input-label">Email</label>
<div class="input-group input-group-merge input-group-borderless input-group-flush">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupBorderlessEmailAddOn">
<i class="tio-email-outlined"></i>
</span>
</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="form-group">
<label for="inputGroupBorderlessEmailOptional" class="input-label">Email <span class="input-label-secondary">(Optional)</span></label>
<div class="input-group input-group-merge input-group-borderless input-group-flush">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupBorderlessEmailOptionalAddOn">
<i class="tio-email-outlined"></i>
</span>
</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="form-group">
<label for="inputGroupBorderlessGenderSelect" class="input-label">Gender</label>
<div class="input-group input-group-merge input-group-borderless input-group-flush">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="tio-user-outlined"></i>
</span>
</div>
<select id="inputGroupBorderlessGenderSelect" class="custom-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="form-group">
<label for="inputGroupFlushFullName" class="input-label">Full name</label>
<div class="input-group input-group-merge input-group-flush">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupFlushFullNameAddOn">
<i class="tio-user-outlined"></i>
</span>
</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="form-group">
<label for="inputGroupFlushEmail" class="input-label">Email</label>
<div class="input-group input-group-merge input-group-flush">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupFlushEmailAddOn">
<i class="tio-email-outlined"></i>
</span>
</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="form-group">
<label for="inputGroupFlushEmailOptional" class="input-label">Email <span class="input-label-secondary">(Optional)</span></label>
<div class="input-group input-group-merge input-group-flush">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupFlushEmailOptionalAddOn">
<i class="tio-email-outlined"></i>
</span>
</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="form-group">
<label for="inputGroupFlushGenderSelect" class="input-label">Gender</label>
<div class="input-group input-group-merge input-group-flush">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="tio-user-outlined"></i>
</span>
</div>
<select id="inputGroupFlushGenderSelect" class="custom-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-light adds light background color.
<!-- Input Group -->
<div class="form-group">
<label for="inputGroupLightFullName" class="input-label">Full name</label>
<div class="input-group input-group-merge input-group-light">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupLightFullNameAddOn">
<i class="tio-user-outlined"></i>
</span>
</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="form-group">
<label for="inputGroupLightEmail" class="input-label">Email</label>
<div class="input-group input-group-merge input-group-light">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupLightEmailAddOn">
<i class="tio-email-outlined"></i>
</span>
</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="form-group">
<label for="inputGroupLightEmailOptional" class="input-label">Email <span class="input-label-secondary">(Optional)</span></label>
<div class="input-group input-group-merge input-group-light">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupLightEmailOptionalAddOn">
<i class="tio-email-outlined"></i>
</span>
</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="form-group">
<label for="inputGroupLightGenderSelect" class="input-label">Gender</label>
<div class="input-group input-group-merge input-group-light">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="tio-user-outlined"></i>
</span>
</div>
<select id="inputGroupLightGenderSelect" class="custom-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-hover-light adds light background color on hover.
<!-- Input Group -->
<div class="form-group">
<label for="inputGroupHoverLightFullName" class="input-label">Full name</label>
<div class="input-group input-group-merge input-group-hover-light">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupHoverLightFullNameAddOn">
<i class="tio-user-outlined"></i>
</span>
</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="form-group">
<label for="inputGroupHoverLightEmail" class="input-label">Email</label>
<div class="input-group input-group-merge input-group-hover-light">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupHoverLightEmailAddOn">
<i class="tio-email-outlined"></i>
</span>
</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="form-group">
<label for="inputGroupHoverLightEmailOptional" class="input-label">Email <span class="input-label-secondary">(Optional)</span></label>
<div class="input-group input-group-merge input-group-hover-light">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupHoverLightEmailOptionalAddOn">
<i class="tio-email-outlined"></i>
</span>
</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="form-group">
<label for="inputGroupHoverLightGenderSelect" class="input-label">Gender</label>
<div class="input-group input-group-merge input-group-hover-light">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="tio-user-outlined"></i>
</span>
</div>
<select id="inputGroupHoverLightGenderSelect" class="custom-select">
<option>Choose a gender</option>
<option>Male</option>
<option>Female</option>
<option>Other</option>
</select>
</div>
</div>
<!-- End Input Group -->