<input>
, <textarea>
, and <select>
elements with class .form-control
have a width of 100%..form-group
, around each form control, to ensure proper margins:.form-inline
to the <form>
element.mr-sm-2
) to each input on all devices (small and up). And a margin bottom class (.mb-2
) is used to style the input field when it breaks (goes from horizontal to vertical due to not enough space/width):.col
) to control the width and alignment of form inputs without using spacing utilities. Just remember to put them inside a .row
container..form-row
instead of .row
:.was-validated
or .needs-validation
to the <form>
element, depending on whether you want to provide validation feedback before or after submitting the form. The input fields will have a green (valid) or red (invalid) border to indicate what's missing in the form. You can also add a .valid-feedback
or .invalid-feedback
message to tell the user explicitly what's missing, or needs to be done before submitting the form..was-validated
to indicate what's missing before submitting the form:.needs-validation
, which will add the validation effect AFTER the form has been submitting (if there's anything missing). Note that you will also have to add some jQuery code for this example to work properly: