Bootstrap 5 is in alpha when this is written and it’s subject to change.
Bootstrap is a popular UI library for any JavaScript apps.
In this article, we’ll look at how to style input groups with Bootstrap 5.
Multiple Inputs
Input groups can have more than one input added inside it.
For example, we can write:
<div class="input-group">
<span class="input-group-text">First and last name</span>
<input type="text" class="form-control">
<input type="text" class="form-control">
</div>
to add first and last name inputs in one input group.
Multiple Addons
An input group can have multiple addons added to them.
For example, we can write:
<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">
</div>
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-text">$</span>
<span class="input-group-text">0.00</span>
</div>
We have 2 spans with the input-group-text class to add 2 input addons.
Button Addons
Buttons can be added as input group addons.
For example, we can write:
<div class="input-group mb-3">
<button class="btn btn-outline-secondary" type="button">Button</button>
<input type="text" class="form-control" placeholder="name">
</div>
We added a button straight into the input-group to use it as an addon.
We can also add a button to the right side:
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="name">
<button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button>
</div>
Also, we can add more than one addon.
For instance, we can write:
<div class="input-group mb-3">
<button class="btn btn-outline-secondary" type="button">Button</button>
<button class="btn btn-outline-secondary" type="button">Button</button>
<input type="text" class="form-control" placeholder="name">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="name">
<button class="btn btn-outline-secondary" type="button">Button</button>
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
Buttons with Dropdowns
Dropdowns can be added as input group addons.
The Bootstrap JavaScript files are required for the dropdowns.
For example, we can write:
<div class="input-group mb-3">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">fruit</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">apple</a></li>
<li><a class="dropdown-item" href="#">orange</a></li>
<li><a class="dropdown-item" href="#">lemon</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">grape</a></li>
</ul>
<input type="text" class="form-control">
</div>
to add a dropdown to the left side.
We add the dropdown-toggle class to create the toggle.
And we have the data-toggle attribute to make it a toggle.
To add one to the right side, we can write:
<div class="input-group mb-3">
<input type="text" class="form-control">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">fruit</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">apple</a></li>
<li><a class="dropdown-item" href="#">orange</a></li>
<li><a class="dropdown-item" href="#">lemon</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">grape</a></li>
</ul>
</div>
And we can add a dropdown to both sides:
<div class="input-group mb-3">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">fruit</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">apple</a></li>
<li><a class="dropdown-item" href="#">orange</a></li>
<li><a class="dropdown-item" href="#">lemon</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">grape</a></li>
</ul>
<input type="text" class="form-control">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">fruit</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">apple</a></li>
<li><a class="dropdown-item" href="#">orange</a></li>
<li><a class="dropdown-item" href="#">lemon</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">grape</a></li>
</ul>
</div>
Segmented Buttons
We can make the dropdown button segmented.
To do that, we can write:
<div class="input-group mb-3">
<button type="button" class="btn btn-outline-secondary">fruit</button>
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">apple</a></li>
<li><a class="dropdown-item" href="#">orange</a></li>
<li><a class="dropdown-item" href="#">lemon</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">banana</a></li>
</ul>
<input type="text" class="form-control">
</div>
We add the split toggle button by adding 2 buttons side by side.
We have the dropdown-toggle and dropdown-toggle-split classes to add the split dropdown button.
Also, we can put the split button and dropdown on the right side:
<div class="input-group mb-3">
<input type="text" class="form-control">
<button type="button" class="btn btn-outline-secondary">fruit</button>
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">apple</a></li>
<li><a class="dropdown-item" href="#">orange</a></li>
<li><a class="dropdown-item" href="#">lemon</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">banana</a></li>
</ul>
</div>
Conclusion
We can add multiple addons, inputs, and dropdowns to an input group.
To make the dropdown display, we need the JavaScript files.