forms

In this article, we are going to learn about various forms features available in Bootstrap 4. A default style is applied across most form controls in Bootstrap 4, which also provides various style classes for specific purposes. Generally, Bootstrap 4 by default applies display: block and width: 100% to the most form controls that results in the form controls being vertically stacked. This feature can be altered with the help of style classes anytime in the Bootstrap 4.

Basic Forms
The following points to remember.

  • We use the .form-control class in Bootstrap 4 against textual <input>, <textarea>, and <select> elements in order to apply width: 100% by default.
  • We use the .form-group class in Bootstrap 4 to wrap labels and controls inside a <fieldset> element for optimum spacing. Alternatively, we can use a <div> element.

The following is an example.

Output
When we execute about HTML code, we will get the following output.

basic-form

Inline Form
We use the .form-inline style class in Bootstrap 4 in order to make the form elements render as inline-block and left-aligned.

The following is an example.

Output
When we execute about HTML code, we will procure the following output.

inline-form

Forms with Hidden Labels
The following points to remember.

  • We should always provide labels on input fields, otherwise screen readers will have trouble. We can hide the label, by using .sr-only style class in Bootstrap 4.
  • We also add a placeholder attribute to provide a hint to the user as to what to enter in addition to .sr-only style class in Bootstrap 4. However it is not recommended.

The following is an example.

Output
When we execute about HTML code, we will get the following output.

hidden-label-form

Horizontal Form
The following points to remember.

  • We use the grid classes to create horizontal forms in Bootstrap 4. Therefore, we need to specify the number of columns that each element should span. Definitely, we need to add a .row class to the .form-group and a .col-*-* class for each column.
  • We should also add .col-form-label class to the

Differences between Bootstrap3 vs Bootstrap4 for Horizontal form

  • While working with grids we require .row class for form layout. This is not the case with Bootstrap 3.
  • While working with Control Labels, in Bootstrap 4 we uses .col-form-label * when using grids for form layout. However in Bootstrap 3 forms use .control-label.
  • Bootstrap 3 requires .form-horizontal style class, whereas Bootstrap 4 doesn’t.

The following is an example.

Output
When we execute above HTML code, we will see the following output.

horizontal-form

Form Legends
The following points to remember.

  • When we use <legend> elements within our forms, then we have an option to add .col-form-legend style class in Bootstrap 4. This class styles helps the legend to look like a label.
  • This will be very useful when we present a stack of radio buttons or checkboxes within a horizontal form.

The following is an example.

Output
When we execute above HTML code, we will get the following output.

form-legend

Form Control Size
We use .form-control-lg and .form-control-sm in order to increase or decrease the size of an input control in Bootstrap 4. In Bootstrap 3. We were using .input-lg and .input-sm to do the same function.

The following is an example.

Output
When we execute above HTML code, we will see the following output.

form-control-size

Help Text
The following points to remember.

  • In Bootstrap 4, we use the .form-text class to display the help text. Also, we can combine this class with utility classes such as .text-muted.
  • We use the .aria-describedby attribute in order to associate the help text with the form control.
  • In Bootstrap 3, we were using .help-block style class.

The following is an example.

Output
When we execute above HTML code, we will get the following output.

help-text

Validation Styles & Feedback Icons
Some points to remember.

  • In Bootstrap 4, we include validation styles for form controls with which we can convey these three validation states i.e. success, danger, or warning to the user.
  • These three classes are .has-success, .has-warning, and .has-danger which are applied to the parent element, so that any .col-form-label, .form-control, and custom form elements nested within that element will inherit these validation styles.
  • We can include textual input controls by adding a .form-control-success, .form-control-warning, or .form-control-danger class to the .form-control input field.

The following is an example.

Output
When we execute above HTML code, we will see the following output.

validation-forms

Source Code for this Form Features in Bootstrap 4 Blog

Conclusion
In this chapter, we discussed about various types of forms available in Bootstrap 4 with suitable examples and how they are different syntactically as compared to Bootstrap 3.

Learn About Forms & Form Features in Bootstrap 4 was last modified: by

Facebook Comments

Post a comment