In Bootstrap, you can create the following types of form layouts:
Bootstrap provides the fundamental form structure, and individual form controls are automatically styled globally. To make a simple form, follow these steps:
Add the class.form-inline to the form> tag to make a form with all components inline, left aligned, and labels beside.
Horizontal forms are distinguished from other forms not just by the amount of markup used, but also by the way the form is presented. Follow these steps to make a form with a horizontal layout:
The most popular form controls supported by Bootstrap are input, textarea, checkbox, radio, and select.
The input field is the most frequent form text field. This is where users will fill out the majority of the form's required information. All native HTML5 input types are supported by Bootstrap, including text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and colour. To make Inputs properly stylized, proper type declaration is required.
When numerous lines of input are required, the textarea is used. As needed, change the rows attribute (fewer rows = smaller box, more rows = larger box).
When you want users to choose from a list of predefined alternatives, checkboxes and radio buttons are ideal.
A select is used when you want the user to be able to choose from numerous possibilities, but it only allows one by default.
Use the class.form-control-static on a p> when you actually require plain text beside a form label inside a horizontal form.
In addition to the:focus state (when a user clicks or tabs into an input), Bootstrap provides style for disabled inputs and form validation classes.
When you use the disabled attribute to deactivate an input, it not only disables it, but it also changes the styling and the mouse pointer when the cursor hovers over it.
To disable all of the controls in a fieldset> at once, add the disabled property to it.
Validity style for errors, warnings, and success messages are included in Bootstrap. For using, simply add the relevant class to the parent element (.has-warning,.has-error, or.has-success).
Form heights and widths can be customised using classes like.input-lg and.col-lg-*.
The outline of an input is deleted and a box-shadow is applied when it receives:focus.
A block level help text that flows with the inputs can be added to Bootstrap form controls. Use the.help-block after the.input> to create a full-width content block.