Creating Forms with Bootstrap

In previous Bootstrap tutorials, Mytour has guided you on creating lists using Bootstrap. In the upcoming tutorial, Mytour will demonstrate how to create forms (templates) in Bootstrap.

1. Creating Forms in Bootstrap

HTML forms are an essential part of websites and applications. However, manually styling and formatting forms with CSS can be time-consuming and dull.

Bootstrap simplifies the process of styling and aligning form control buttons like labels, input frames, checkboxes, ... through a set of predefined classes.

Bootstrap offers 3 different types of form layouts, including:

- Vertical form layout (default form layout).

- Horizontal form layout.

- Inline form layout.

2. Creating Vertical Form Layouts

This is the default form layout in Bootstrap, where styles are applied to form-control classes without needing to add any additional base class to the form element.

The form-control classes in this layout are stacked with left-aligned labels at the top corner.

Example: the example below illustrates how to create a vertical form layout:

The returned result looks like the following:

Note: All tags including input, textarea, and select require the .form-control class for consistent styling. The width of the .form-control class is 100%. To modify the width of the class, we can use predefined grid classes.

3. Creating Horizontal Form Layouts

Additionally, we can create horizontal form layouts where labels and control buttons are placed side by side using Bootstrap grid classes.

To create horizontal form layouts, we add the .row class to form-group classes and use the .col-*-* grid classes to specify the width for labels and control buttons.

Remember to utilize the .col-form-label class on label elements to align the control buttons within the form. See the example below:

The returned result appears as follows:

4. Creating Inline Form Layouts

In certain cases, if you wish to display a series of labels and control buttons on a single horizontal line to compact the layout, simply add the .form-inline class to the form element. However, the inline form layout is only visible within viewports with a minimum width of 576px.

Example: In the example below, we will create an inline form layout:

The returned result takes the following form:

Note: Mytour recommends adding labels to form inputs; otherwise, screen readers may encounter issues with your created form. However, in the case of an inline form layout, we can hide labels using the .sr-only. class.

5. Creating Static Form Controls

In some cases, if you only want to display plain text values alongside form labels instead of form controls. To achieve this, simply replace the .form-control class with the .form-control-plaintext class and apply the readonly attribute.

The .form-control-plaintext class removes default styles from the form frame but retains the margin and padding.

Example: The following example illustrates how to create static form controls:

The returned result appears as follows:

6. Checkbox and Radio Buttons

Checkbox boxes and radio buttons can be arranged vertically or horizontally.

6.1 Arrange Checkbox and Radio Buttons Vertically

To arrange checkbox boxes or radio buttons vertically, meaning one per line, simply wrap all controls within a form group and apply the d-block class within the label tag.

Additionally, we can utilize utility classes to set appropriate spacing. For example, as shown in the following example.

Example: In this example, checkbox boxes and radio buttons are arranged vertically:

The returned result appears as follows:

6.2 Arrange Checkbox and Radio Buttons Horizontally

7. Creating disabled form

To disable form controls such as input, textarea, select, simply add the disabled attribute to these controls, and Bootstrap will take care of the rest. Refer to the example below:

The returned result is as follows:

In case you want to disable all controls within a form at once, simply place these controls within a fieldset element and apply the disabled attribute as shown in the example below:

The returned results are formatted as follows:

8. Creating Read-Only Inputs

Additionally, we can add the readonly attribute within input or textarea tags to prevent modifying the values of these elements.

For example, in the following scenario, we'll add the readonly attribute within input or textarea tags to create read-only inputs:

The resulting output is structured as follows:

9. Specifying Column Sizes for Input, Textareas, and Select Form Controls

To set the size of form controls with Bootstrap's grid column sizes, we simply need to wrap the form controls, namely input, textarea, and select, within grid columns or any other elements and apply grid classes to them.

Example: The following example illustrates how to specify column sizes for Input, Textareas, and Select form controls:

The returned outcome is structured as follows:

Tip: Additionally, we can substitute the .form-row class while crafting form layouts. The .form-row class is a variant of the grid.row class in Bootstrap, overriding the spacing between column content (gutters) to make layouts clearer and more concise.

10. Adjusting the Height of Input and Select Form Controls

To alter the height of input text and select boxes to match the size of buttons, we utilize size-specific classes for form control height such as .form-control-lg, .form-control-sm on input and select elements to specify larger or smaller sizes.

Also, remember to apply the .col-form-label-sm or .col-form-label-lg classes on label or legend elements to adjust the size of labels accurately for form controls.

Example: The following example illustrates how to change the height of Input and Select form controls:

The resulting output is structured as follows:

11. Positioning Text Around Form Controls

Adding text around form controls is also a way to guide users in inputting data accurately within forms. To add text to form controls, we use the .form-text class.

Example:

The returned outcome is structured as follows:

Similarly, we can also use the small element to add text without utilizing the .form-text class.

Example: In the example below, we use the small element to add text:

The resulting output is structured as follows:

12. Creating Bootstrap Validation Forms

Bootstrap 4 provides solutions for validating web forms on the client side quickly and easily using the browser's form validation API.

CSS form validation classes include :invalid and :valid pseudo-classes. These classes are applied to input, select, and textarea elements.

Example: for the example below:

The returned result is structured as follows:

Note: for Bootstrap form validation messages, we need to disable the browser's default feedback tooltips by adding the novalidate attribute to the form element.

Below is custom JavaScript code to display error messages and disable form submission in invalid fields.

Tip: To reset the form interface programmatically, simply remove the .was-validated class from the form element. Bootstrap automatically applies this class to forms after users click the Submit button.

To request server-side validation, just use the .is-invalid and .is-valid classes to display items within the frame as valid and invalid. Additionally, .invalid-feedback and .valid-feedback also support these classes.

Example:

The returned outcome is structured as follows:

Furthermore, we can replace the .{valid|invalid}-feedback classes with the .{valid|invalid}-tooltip classes to display feedback text in tooltip style.

Ensure that position: relative style or the .position-relative class is applied to the parent element to display the feedback tooltip correctly. Refer to the example below:

The resulting output is structured as follows:

13. Form Controls Supported in Bootstrap

Bootstrap supports all standard HTML form controls as well as HTML5 input types including datetime, number, email, url, search, range, color, url, ... .

Example: The example below illustrates how to use standard form controls with Bootstrap.

The resulting output is structured as follows:

The above lesson from Mytour just taught you how to create forms in Bootstrap. Additionally, if you have any doubts or questions that need clarification, readers can leave their comments below the article.

In the next Bootstrap tutorial, Mytour will further guide you on how to create custom forms in Bootstrap.