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.
<div>
with a class attribute of form-group
. This class is added to the field wrapper for styling around the <input>
element.<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.<input>
element. <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.form-check-label
to the <label>
element. This allows the checkbox and the text/label to align well in height and spacing.