You may also swap .row for .form-row, a variation of our standard grid row that overrides the default column gutters for tighter and more compact layouts.
You can use grid system for more complex layout for form
We recommend using client side validation, but in case you require server side, you can indicate invalid and valid form fields with .is-invalid and .is-valid. Note that .invalid-feedback is also supported with these classes.
Be sure to use an appropriate type attribute on all inputs (e.g., email for email address or number for numerical information) to take advantage of newer input controls like email verification, number selection, and more.
the readonly boolean attribute on an input to prevent modification of the input’s value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.
If you want to have input readonly elements in your form styled as plain text, use the .form-control-plaintext class to remove the default form field styling and preserve the correct margin and padding..
Set type="text" & value="Help texts relevant to form field"
use .form-control-lg class within input with .form-control class .m-b-10 class is for margin-bottom
This is default size no additional class is required only use .form-control class & .m-b-10 class is for margin-bottom
use .form-control-sm class within input with .form-control class .m-b-10 class is for margin-bottom
use .form-control-lg class within input with .form-control class .m-b-10 class is for margin-bottom
This is default size no additional class is required only use .form-control class & .m-b-10 class is for margin-bottom
use .form-control-sm class within input with .form-control class .m-b-10 class is for margin-bottom
This is an example of inline forms so please set main class as .row row-cols-lg-auto g-3 align-items-center & .visually-hidden class for label for input use .form-control .mb-2 .me-sm-2 .mb-sm-0 for larger input use .form-control-lg additionaly