Use Input Group in Bootstrap

To learn how to use Input Group in Bootstrap, read along with the article below of Taimienphi.vn. Also readers can refer to some other articles already on Taimienphi.vn to learn more List Group in Bootstrap.

Use Input Group in Bootstrap

first. Input Group in Bootstrap

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

2. Create Prepend and Append Input

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

Class .input-group-prepend Used to put add-ons before the input (class), class .input-group-append Used to place the following add-ons.

Also do not forget to wrap text (text) or symbols (icons) in the element span and apply the class .input-group-text on it to display and create the appropriate style as in the example below:

The result will look like this:

Note: The prepend and append features in Bootstrap are only available for text-based inputs and do not support elements. select and textarea.

3. Check box and radio button

Similarly, we can put checkboxes and radio buttons in each add-on of the input group instead of the text.

For example: The following example illustrates how to place checkboxes and radio buttons in each add-on of the input group:

The result will look like this:

4. Add multiple inputs or add-ons in the Input Group

In addition, we can easily put multiple inputs side by side in an input group, such as in the example below:

The result will look like this:

Similarly, if we want, we can put multiple add-ons side by side in an input group, or even combine with checkboxes and radio buttons as in the example below:

The output will look like this:

5. Add-on button for Text Input

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

The output will look like this:

6. Add a drop down button for Text Input

To create and add more content from a button, we can add drop down buttons for text input. In this case we do not need to use the element .dropdown for input group.

Refer to the example below:

The output will look like this:

7. Add segmented drop down buttons

Similarly we can define a segmented drop-down button group, where the drop-down button is placed next to other nodes as in the example below:

The output will look like this:

8. Height of Input Group

Finally we can add classes that specify the form size (form), such as .input-group-lg or .input-group-sm for the element.input-group to specify a larger or smaller height dimension.

The content is in .input-group will automatically resize. In addition, we do not need to repeat the form control class size on each element.

Refer to the example below:

The output will look like this:

https://thuthuat.taimienphi.vn/su-dung-input-group-in-bootstrap-51112n.aspx
So the above lesson Taimienphi.vn has just taught you how to use Input Group in Bootstrap. Also if there are any questions or questions that need answers as the way Create custom forms in Bootstrap How ?, Readers can leave their comments in the comment section below the article.