Advertisement
Google Ad Slot: content-top
Bootstrap 5 Input Groups
Input groups in Bootstrap 5 are a convenient way to add additional elements like text, icons, or buttons next to input fields. This allows for enhanced form inputs and a more polished UI.
Basic Input Group:
Use the .input-group class to create an input group. Combine it with .input-group-text for static content like text or symbols.
@
Example
<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>
Input Group with Buttons:
Add buttons to the input group using the .btn class.
Example
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
<button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button>
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
<button class="btn btn-danger" type="button" id="button-addon2">Button 1</button>
<button class="btn btn-primary" type="button" id="button-addon2">Button 2</button>
</div>
Multiple Add-ons:
You can have multiple addons before or after the input.
$
0.00
Detail
Example
<div class="input-group mb-3">
<span class="input-group-text">$</span>
<span class="input-group-text">0.00</span>
<input type="text" class="form-control" placeholder="Amount" aria-label="Amount">
</div>
<div class="input-group mb-3">
<span class="input-group-text">Detail</span>
<input type="text" class="form-control" placeholder="First Name">
<input type="text" class="form-control" placeholder="Last Name">
</div>
Checkbox or Radio Add-ons:
You can include checkboxes or radio buttons in input groups.
Checkbox:
Radio:
Example
<b>Checkbox:</b>
<div class="input-group mb-3">
<div class="input-group-text">
<input class="form-check-input mt-0" type="checkbox" value="" aria-label="Checkbox for following text input">
</div>
<input type="text" class="form-control" aria-label="Text input with checkbox">
</div>
<b>Radio:</b>
<div class="input-group mb-3">
<div class="input-group-text">
<input class="form-check-input mt-0" type="radio" value="" aria-label="Radio button for following text input">
</div>
<input type="text" class="form-control" aria-label="Text input with radio button">
</div>
Input Group with Dropdown:
Dropdowns can also be included in input groups.
Example
<div class="input-group mb-3">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Option 1</a></li>
<li><a class="dropdown-item" href="#">Option 2</a></li>
<li><a class="dropdown-item" href="#">Option 3</a></li>
</ul>
<input type="text" class="form-control" aria-label="Text input with dropdown button">
</div>
Input Group Sizing:
Change the size of the input group by using .input-group-lg or .input-group-sm.
Large Input Group:
@
Small Input Group:
@
Example
<b>Large Input Group:</b>
<div class="input-group input-group-lg mb-3">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="Large input group" aria-label="Large input group">
</div>
<b>Small Input Group:</b>
<div class="input-group input-group-sm mb-3">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="Small input group" aria-label="Small input group">
</div>