Source code of Bootstrap form layout style, bootstrap form

Source code of Bootstrap form layout style, bootstrap form

Bootstrap provides three forms: vertical forms, inline forms, and horizontal forms.
Create a vertical or basic form:
• Add role = "form" to the parent <form> element ".
• Place tags and controls in a <div> with class. form-group. This is required to obtain the optimal spacing.
• Add class. form-control to all text elements <input>, <textarea>, and <select>

Inline form:
All the elements in an inline form are aligned to the left and labels are side by side. To create an inline form, you must add class. form-inline to the form label.

Horizontal form:Unlike the other two forms, follow these steps to create a horizontal form.
• Add class. form-horizontal to the parent <form> element.
• Place tags and controls in a <div> with class. form-group.
• Add class. control-label to the label.

The Bootstrap form layout is as follows:

Implementation Code:

<Form class = "form-horizontal" role = "form"> <fieldset> <legend> Configure the data source </legend> <div class = "form-group"> <label class = "col-sm-2 control-label" for = "ds_host"> host name </label> <div class = "col-sm-4"> <input class = "form-control" id = "ds_host" type = "text" placeholder = "192.168.1.161"/> </div> <label class = "col-sm-2 control-label" for = "ds_name"> database name </label> <div class = "col-sm-4"> <input class = "form-control" id = "ds_name" type = "text" placeholder = "msh"/> </div> <div class = "form-group"> <label class = "col-sm-2 control-label" for = "ds_username"> User Name </label> <div class = "col-sm-4"> <input class = "form-control" id = "ds_username" type = "text" placeholder = "root"/> </div> <label class = "col-sm-2 control-label" = "ds_password"> password </label> <div class = "col-sm-4"> <input class = "form-control" id = "ds_password" type = "password" placeholder =" 123456 "/> </div> </fieldset> <legend> select a table </legend> <div class =" form-group "> <label for = "disabledSelect" class = "col-sm-2 control-label"> table name </label> <div class = "col-sm-10"> <select id = "disabledSelect" class = "form -control "> <option> deselected </option> </select> </div> </fieldset> <fieldset> <legend> Field name </legend> <div class = "form-group"> <label for = "disabledSelect" class = "col-sm-2 control-label"> table name </label> <div class = "col-sm-10"> <select id = "disabledSelect" class = "form-control"> <option> deselected </option> <option> deselected </ option> </select> </div> </fieldset> </form>

If you want to learn more, click here to learn more and add a special topic: Bootstrap learning tutorial.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.