Bootstrap 4 Components
You can create a wide variety of forms using from control styles, layout options, and custom components in BootStrap.
display: block; and
width:100%; to most form controls resulting in the vertical stacking of the form elements.
Let’s create a basic form with two input fields to input username and password and sign in button.
Now, we can add different input fields like a checkbox, radio button or a text box that only takes input as numbers, you name it, we can have it in our forms.
.form-inline to render forms as inline and align them horizontally.
Form Layout Using the Grid
To have form elements stacked vertically at the same time the input labels be next to each other horizontally add a
.row class to the
.col-*-* for each column.
In order for the label to align in the center with respect to the input element use class
.col-form-label with the label.
You can hide the label for the input types by using a
.sr-only class to the label. Give a placeholder to the input types to give the user a hint of what input type is expected in an input box.
Add the disabled attribute to the inputs to make it disabled.
.has-danger to the parent element to include validation styles for success, warning, and danger on most form controls. Contextual validation text which will adapt to the parent
.has-* class can be added using the class
Help text can be block level and inline.
If the help text is longer or you need it to be below the input, block help text can be used.
Inline help text can be included by any of the HTML inline elements like <span> or <small> or utility classes like
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.