Bootstrap 5 forms

Bootstrap5 forms use to create a function for user interaction. The form element collects and updates information from the user using fields such as checkboxes, radio buttons, or text fields. We can insert and save users' data in the database.

The form controls in Bootstrap 5 provide classes to form designs. Use these classes to enable browser and device-specific rendering. Bootstrap 5 version uses a suitable type property on all inputs to take advantage of current input controls such as email verification, number selection, password, text, etc.

Bootstrap 5 form types

Bootstrap 5 has a form type that allows displaying the form in the right format alongside other functions. There are two kinds of form layouts or types in Bootstrap 5:

• Bootstrap 5 Stacked Forms
• Bootstrap 5 Inline Form

Bootstrap 5 Stacked forms

The bootstrap 5 stacked form generates a full-width form with mandatory input fields such as a text field, an email, a password, and a submit button. To maintain form margins on a web page, use a form wrapper element with the ".form-control" class.

We can use the "form-label" class for the element heading. This form layout is used to make a registration form, a login form, and a contact form.

Syntax

The bootstrap 5 stacked forms syntax shows in below.

Example

The following example shows us to create stacked form using bootstrap 5 classes. Here, we can use "form-control" class in input element. Each input element needs individual "div" tag.

Output

The output shows stacked form using bootstrap 5 class and element in the below image.

Bootstrap 5 Inline Form

An inline form's elements are in a single line and left-aligned. It only applies to forms within viewports with a minimum width of 576px. If screen width is less than 576 px, an inline form displays horizontally by default. The form screen width is greater than the small size screen.

Syntax

The bootstrap 5 stacked forms syntax shows in below. The "form-control" class uses in input element. This element places in the different columns.

Example

The following example shows us to create stacked form using bootstrap 5 classes. Here, we can use "form-control" class in input element. Each input element needs individual "div" tag.

Output:

The output shows inline form using bootstrap 5 class and element in the below image.

Bootstrap 5 Form control size

Bootstrap 5 version uses a form control class with the required size. We can apply large, medium, and small sizes of the input elements. The form control size uses as per design and user interface. The "form-control" class uses the default size or medium size of the element. The "form-control-lg" and "form-control-sm" classes apply for elements' large and small sizes, respectively.

Syntax

The bootstrap 5 large size form control's syntax shows in below.

The bootstrap 5 medium or default size form control's syntax shows in below.

The bootstrap 5 small size form control's syntax shows in below.

Example

The following example shows us to create a stacked form using bootstrap 5 classes. We can use the "form-control" class in the input element. Each input element places an individual "div" tag with form control size.

• The first element uses a large form control class, the "form-control-lg" class.
• The second element uses the default size form control class, the "form-control" class.
• The third element uses a small size form control class, the "form-control-sm" class.

Output:

Bootstrap 5 Form Textarea

Bootstrap 5 version uses a textarea element with a form-control class. The textarea element applies the row with the required size. It uses for user interaction, such as written comments and messages in a form.

Syntax

The bootstrap 5 form textarea syntax shows in below.

Example

The following example shows us to create textarea in the form using bootstrap 5 classes. Here, we can use "form-control" class in input element with <textarea> tag. Each input element needs individual "div" tag. The "message" input uses <textarea> tag with the "3" rows. The "comment" input uses <textarea> tag with the "5" rows.

Output:

The output shows a textarea in a form using the bootstrap 5 class and element below the image.

Bootstrap 5 Readonly and disabled element

Bootstrap 5 uses the "disabled" and "readonly" elements with the form-control class. The disabled keyword uses to show the data or disable a given function. This keyword uses in the input element to disable the input field. The "readonly function uses to read the input field data but does not provide writing access.

Syntax

The bootstrap 5 disabled in form syntax shows in below.

The bootstrap 5 readonly in form syntax shows in below.

Example

The following example shows us to create a "disable" input element in the form using bootstrap 5 classes and functions. Here, we can use the "form-control" class in the input element with <input> tag. Each input element uses required functions to enable and disables data.

• The first input element uses default function to write data.
• second input function provides reading access but not writing access.
• Third input element disables input function, we can read placeholders value.

Output:

Bootstrap 5 plaintext form control

Bootstrap 5 version uses the "form-control-plaintext" class to display input elements in simple text. We can read placeholder data and write new information for user interaction. It provides for styling the form element only.

Syntax

The bootstrap 5 plain text with form element syntax shows in below.

Example

The following example shows us to create input elements with plain text and normal text style data.

• The first input element uses a plain text input element using the "form-control-plaintext" class.
• The second input element uses a normal input element using the "form-control" class.

Output:

Conclusion

The form is an essential part of the bootstrap 5 web page. The bootstrap 5 form gives many functions, classes, and elements to create a user-friendly form. This element provides multiple features for user interaction with the web page.