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
1. Input Group in Bootstrap
2. Create Prepend and Append Input
3. Check box and radio button
4. Add multiple inputs or add-ons in the Input Group
5. Add-on button for Text Input
6. Add a drop down button for Text Input
7. Add segmented drop down buttons
8. Height of Input Group
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.
.