In Bootstrap 5, you can create input groups using the `input-group` class. Input groups allow you to combine an input field with additional elements such as buttons, dropdowns, or text, providing a compact and visually cohesive interface. Here's an example of how to create input groups in Bootstrap 5:

html
<div class="input-group mb-3">
    <span class="input-group-text">@</span>
    <input type="text" class="form-control" placeholder="Username" aria-label="Username">
</div>

In this example, we have an `<input>` element wrapped inside a `<div>` with the class `input-group`. The `mb-3` class is used to add some bottom margin for spacing. Inside the `input-group` container, we have a `<span>` element with the class `input-group-text` which acts as an addon or prefix for the input field. In this case, the `@` symbol is used as the prefix. The `<input>` element has the class `form-control` to style it as a Bootstrap form input.

You can further customize input groups by adding additional elements or classes. Here are a few examples:

- Input Group with Button:
You can include a button element within the input group. Here's an example with a button on the right side:

html
<div class="input-group">
    <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username">
    <button class="btn btn-primary" type="button">Button</button>
</div>

- Input Group with Dropdown:
You can include a dropdown menu within the input group. Here's an example with a dropdown on the right side:

html
<div class="input-group">
    <input type="text" class="form-control" placeholder="Search" aria-label="Search">
    <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="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
</div>

- Input Group with Multiple Elements:
You can combine multiple elements within the input group. Here's an example with an addon on the left and a button on the right:

html
<div class="input-group">
    <span class="input-group-text">$</span>
    <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
    <button class="btn btn-primary" type="button">Button</button>
</div>

These are some basic examples of creating input groups in Bootstrap 5. You can customize them further by using additional utility classes and combining different elements within the input group. Make sure to refer to the Bootstrap documentation for more options and styling classes: https://getbootstrap.com/docs/5.1/forms/input-group/

About the Author

Silan Software

Silan Software is one of the India's leading provider of offline & online training for Java, Python, AI (Machine Learning, Deep Learning), Data Science, Software Development & many more emerging Technologies.

We provide Academic Training || Industrial Training || Corporate Training || Internship || Java || Python || AI using Python || Data Science etc