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
<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 -->