Bootstrap 5 Input group Wrapping

Bootstrap 5 Input group Wrapping help to extend form controls by adding text, or buttons on either side of textual inputs. Input groups are wrapped by default in order to accommodate field validations within an input group. We can disable them using class flex-nowrap.

Bootstrap 5 Input group Wrapping Classes:

• flex-wrap: To easily wrap the group but the input default wrapped up the Input group.
• flex-nowrap: To disable wrapping of default wrapped up Input group.

Syntax Without wrap class the input group is flex-wrap.

// To Disable Wrapping
<div class="input-group flex-.nowrap">
 ...
</div>

Example 1: In this example, we will learn about Flex No Wrapping

Output:

👁 Image

Example 2: In this example,we will see how flex wrapping enables by default.

Output:

👁 Image

Reference: https://getbootstrap.com/docs/5.0/forms/input-group/#wrapping