Form
Bootstrap 4 Form with Material Design UI
An HTML form is a section of a document containing normal content, markup, special elements called controls (checkboxes, radio buttons, menus, etc.), and labels on those controls. Users generally "complete" a form by modifying its controls (entering text, selecting menu items, etc.), before submitting the form to an agent for processing (e.g., to a Web server, to a mail server, etc.)
Form Grid
Add col-*-* class besides the .form-group to create forms layouts that require multiple columns, varied widths and other alignment options.
Form Row
Use .form-row to create more tighter and compact layouts.
Horizontal Form
Auto-sizing Form
Use .col-auto to make the content vertically center.
Inline Form
Use .form-inline to display the form horizontally.
Form Validation State on Server Side
Propeller provides validation states for error, and success states on form controls.
Add .is-valid to the input field and .valid-feedback to the div containing the validation message in order to create a success input field. Similarly, add .is-invalid and .invalid-feedback to create error input field.
Input Validation State on Client Side
For custom form validation messages, add the novalidate boolean attribute to your <form>. This disables the browser default feedback tooltips, but still provides access to the form validation APIs in JavaScript.
Validation with Tooltips
Replace .valid-feedback and invalid-feedback by .valid-tooltip and .invalid-tooltip to display the validation messages in the form of tooltips.
Inverse Form Validation
Use .bg-dark and .text-white to the card structure to create an inverse form.