Bootstrap 5 Basic
Bootstrap 5 Utilities
Bootstrap 5 Flexbox
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.
Use the .input-group
class to create an input group. Combine it with .input-group-text
for static content like text or symbols.
Try it yourself
Add buttons to the input group using the .btn
class.
Try it yourself
You can have multiple addons before or after the input.
Try it yourself
You can include checkboxes or radio buttons in input groups.
Try it yourself
Dropdowns can also be included in input groups.
Try it yourself
Change the size of the input group by using .input-group-lg
or .input-group-sm
.
Try it yourself