Bootstrap 5 Input Groups

The input-group class is a container for enhancing an input by placing a symbol, text, or button in front of or behind the input field. It helps to understand the form text using bootstrap 5 classes. To add the help text in front of the input, use the ".input-group" and add the form.

The input group uses a checkbox, radio button, dropdown list and another form element for form elements. This function uses the form element for user interaction. The bootstrap function creates an attractive and responsive input group in the web pages.

Basic input groups

The ".input-group" class is a container for enhancing an input by placing an icon, text, or button in front of or behind the input field as "help text." Use the ".input-group-text" class to style the provided help text.

Syntax

The following syntax shows us to create bootstrap 5 input groups.

Example

The following example shows input group values before and after input elements. We can write the "input-group-text" class with span tag for front and behind the input value elements. The "input-group" class contains value, symbol, and short text of the input elements.

Output

The following image shows the input group before and after the input element.

Input groups with size

The ".input-group" class is a container for enhancing an input with the required size. Use the ".input-group-sm" and the ".input-group-lg" classes to provide the input group's small and large sizes in the form.

Syntax

The following syntax shows us to create bootstrap 5 input groups for small size.

The following syntax shows us to create bootstrap 5 input groups for default size.

The following syntax shows us to create bootstrap 5 input groups for large size.

Example

The following example shows input group after input elements with required size. We can write the "input-group-sm", "input-group", and "input-group-lg" classes for small, default, and large input group respectively.

Output

The following image shows the input group with the required size per the input element format.

Multiple Input Groups and Elements

The ".input-group" class is a container containing the symbol and input element. The "input-group-text" class uses multiple times with input elements to display multiple input groups.

Syntax

The following syntax shows us to create multiple input groups with input elements.

The following syntax shows us to create input groups with multiple input elements.

Example

The following example shows form with multiple form elements and input group functions.

• First two elements use multiple input groups using the "span" tag and the "input-group-text" class.
• Last element uses with single input group and multiple form elements.

Output

The following output image shows multiple input groups and input elements.

Input Groups radio buttons and checkbox

The ".input-group" class is a container containing the radio button and checkbox with the input element. The "input-group-text" class uses in the "div" tag. The "checkbox" and "radio" types uses inside of the "input-group-text" class.

Syntax

The following syntax shows us to create input groups with checkbox input elements.

The following syntax shows us to create input groups with radio button.

Example

The following example shows form with multiple form elements and input group functions.

• First two elements use checkbox symbol in input groups using the "span" tag and the "input-group-text" class.
• Last two elements use radio button function in input groups using the "span" tag and the "input-group-text" class.

Output

The following output image shows input groups with a checkbox and radio button for input elements.

Input Groups buttons

The ".input-group" class is a container for containing the button class as an input group with an input element. The "input-group-text" class does not use the symbol, value and text. The "btn btn-primary" class uses inside the "input-group" class.

Syntax

The following syntax shows us to create input groups with form buttons.

Example

The following example shows form with multiple form elements and input group functions.

• First elements use primary button as an input groups in the "input-group" class.
• Second elements use primary button as a input groups in the "input-group" class after input element.
• Third elements use primary and secondary buttons as a input groups in the "input-group" class for multiple input groups.

Output

The following output image shows input groups with multiple buttons for input elements.

Input Groups with dropdown

The ".input-group" class contains the dropdown list as an input group. The ".input-group" class is a container containing the dropdown list as an input group with an input element. The "dropdown-toggle" class uses for selecting data through the dropdown list. The "dropdown-item" class contains data or items in the dropdown function.

Syntax

The following syntax shows us to create dropdown list as an input group with form elements.

Example

The following example shows form with multiple form elements and input group functions.

• First elements use dropdown list with the success button as an input group.
• Second elements use dropdown list with simple button after input element.
• Third elements use multiple dropdown lists as an input groups. Here, input groups uses warning and danger contextual buttons.

Output

The following output image shows input groups with a dropdown list for input elements.

Conclusion

Bootstrap 5 input group uses to understand the form elements for user interaction. It helps create user-friendly, attractive and responsive input elements in the form. It helps display symbols, form elements, and short values of the input type elements. The input group helps understand the user values, information and text to insert data.