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>

Try it yourself

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>

Try it yourself

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>

Try it yourself

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>

Try it yourself

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>

Try it yourself

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>

Try it yourself

Complete Input Group Demo

Try it yourself


Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.
© Copyright 2024 www.whereisstuff.com. All rights reserved. Developed by whereisstuff Tech.