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.
Input group on BootstrapBasic example
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1">@</span>
<input class="form-control" type="text" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1" />
</div>
<div class="input-group mb-3">
<input class="form-control" type="text" 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 class="form-label" for="basic-url">Your vanity URL</label>
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
<input class="form-control" id="basic-url" type="text" aria-describedby="basic-addon3" />
</div>
<div class="input-group mb-3">
<span class="input-group-text">$</span>
<input class="form-control" type="text" aria-label="Amount (to the nearest dollar)" />
<span class="input-group-text">.00</span>
</div>
<div class="input-group">
<span class="input-group-text">With textarea</span>
<textarea class="form-control" aria-label="With textarea"></textarea>.
</div>
@
@example.com
https://example.com/users/
$
.00
With textarea
.
Wrapping
<div class="input-group flex-nowrap">
<span class="input-group-text" id="addon-wrapping">@</span>
<input class="form-control" type="text" placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping" />
</div>
@
Sizing
<div class="input-group input-group-sm mb-3">
<span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
<input class="form-control" type="text" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm" />
</div>
<div class="input-group mb-3">
<span class="input-group-text" id="inputGroup-sizing-default">Default</span>
<input class="form-control" type="text" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default" />
</div>
<div class="input-group input-group-lg">
<span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
<input class="form-control" type="text" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg" />
</div>
Small
Default
Large
Checkboxes and Radios
<div class="input-group mb-3">
<div class="input-group-text">
<input class="form-check-input" type="checkbox" value="" aria-label="Checkbox for following text input" />
</div>
<input class="form-control" type="text" aria-label="Text input with checkbox" />
</div>
<div class="input-group">
<div class="input-group-text">
<input class="form-check-input" type="radio" value="" aria-label="Radio button for following text input" />
</div>
<input class="form-control" type="text" aria-label="Text input with radio button" />
</div>Multiple inputs
<div class="input-group">
<span class="input-group-text">First and last name</span>
<input class="form-control" type="text" aria-label="First name" />
<input class="form-control" type="text" aria-label="Last name" />
</div>
First and last name
Multiple Addons
<div class="input-group mb-3">
<span class="input-group-text">$</span>
<span class="input-group-text">0.00</span>
<input class="form-control" type="text" aria-label="Dollar amount (with dot and two decimal places)" />
</div>
<div class="input-group">
<input class="form-control" type="text" aria-label="Dollar amount (with dot and two decimal places)" />
<span class="input-group-text">$</span>
<span class="input-group-text">0.00</span>
</div>
$
0.00
$
0.00
