How to customize an HTML form with Bootstrap 4

Overview

Bootstrap allows us to customize the appearance of our form. It allows us to style every HTML element involved in creating a form from the checkbox to the radio button and the input element. Let's see an example of a customized form.

Example

Explanation

• Lines 24–28: We explain the entire process of form customization.

• Line 24: Notice that all input fields have a wrapper <div> with a class attribute of form-group. This class is added to the field wrapper for styling around the <input> element.

• Line 26: We customize this <input> element by adding the Bootstrap class form-control to the <input> element with the type attribute of text. The wrapper <div> ensures that the <label> and <input>elements are aligned well.

• Lines 29–32: We repeat the same thing by adding the same classes to the <input> element.

• Line 34: We see that the <input> element has a Bootstrap class of form-check-input to style it. We use a different class here because of the type attribute of this <input> element. This is a checkbox and not text like the initial two <input> elements. Lookup form customization for more classes to customize your form.

• Line 25: We see how we apply the form-check-label to the <label> element. This allows the checkbox and the text/label to align well in height and spacing.