Using Input Group in Bootstrap

To learn how to use Input Group in Bootstrap, readers can refer to the following article by Mytour. Additionally, readers can explore other articles on Mytour to learn more about List Group in Bootstrap.

Using Input Group in Bootstrap

1. Input Group in Bootstrap

The Input Group component in Bootstrap is highly flexible and powerful, used to create interactive form controls. However, this component is limited to text input only.

2. Creating Prepend and Append Inputs

Input Group in Bootstrap is created using the .input-group class. This class serves as a container for input and add-ons.

The .input-group-prepend class is used to place add-ons before the input, while the .input-group-append class is used to place add-ons after the input.

Also, remember to wrap text or icons in the span element and apply the .input-group-text class to display and style them appropriately, as shown in the example below:

The returned result is as follows:

Note: The prepend and append feature in Bootstrap is only available for text-based inputs and does not support select and textarea elements.

3. Checkbox and Radio Buttons

Similarly, we can place checkbox and radio buttons within each add-on of the input group instead of text.

Example: The following example illustrates how to place checkbox and radio buttons within each add-on of the input group:

The returned result looks like the following:

4. Adding Multiple Inputs or Add-ons within Input Group

Additionally, we can easily place multiple inputs side by side within an input group, as shown in the example below:

The returned result looks like the following:

Similarly, if desired, we can also place multiple add-ons side by side within an input group, even combining them with checkbox and radio buttons as shown in the example below:

The output result returns in the following format:

5. Add-on Buttons for Text Input

In some cases, we can use prepend or append buttons instead of text by placing any number of buttons within the .input-group-prepend or .input-group-append classes as shown in the example below:

The output results are structured as follows:

6. Adding Dropdown Button for Text Input

To generate and include multiple content from a button, we can incorporate dropdown buttons for text input. In this scenario, there's no necessity for utilizing the .dropdown element for the input group.

Refer to the example below:

The returned output results are as follows:

7. Segmenting Dropdown Buttons

Similarly, we can define segmented dropdown button groups, where the dropdown button is placed alongside other buttons as demonstrated in the example below:

The returned output results are as follows:

8. Height of Input Group

Finally, we can incorporate specific form size classes, such as .input-group-lg or .input-group-sm for the .input-group element to specify larger or smaller height.

Contents within the .input-group will automatically adjust in size. Additionally, there's no need to repeat form control size classes on each element.

Refer to the example below:

The returned output results are as follows:

So, this lesson from Mytour just guided you on how to use Input Group in Bootstrap. Additionally, if you have any queries or need clarification on topics like creating custom forms in Bootstrap, feel free to drop your comments below the article.