Use Input Group in Bootstrap


In the previous Bootstrap lesson, readers read along with Taimienphi.vn to learn how to create custom forms (forms) in Bootstrap. In the next lesson below, Taimienphi.vn will introduce you how to 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

Table of Contents:
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:

Use input group in bootstrap

The result will look like this:

Use input group in bootstrap 2

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:

Using input group in bootstrap 3

The result will look like this:

Using input group in bootstrap 4

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:

Using input group in bootstrap 5

The result will look like this:

Using input group in bootstrap 6

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:

Use input group in bootstrap 7

The output will look like this:

Using input group in bootstrap 8

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:

Use input group in bootstrap 9

The output will look like this:

Use input group in bootstrap 10

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:

Use input group in bootstrap 11

The output will look like this:

Use input group in bootstrap 12

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:

Using input group in bootstrap 13

The output will look like this:

Using input group in bootstrap 14

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:

Use input group in bootstrap 15

The output will look like this:

Use input group in bootstrap 16

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.

.

Add a Comment

Your email address will not be published. Required fields are marked *