Form

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

Gender

							
Gender

							
Gender

							

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.

Looks good!
Looks good!
Please provide a valid username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
Example invalid custom file feedback
Example invalid feedback text

                            
Looks good!
Looks good!
Please provide a valid username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
Example invalid custom file feedback
Example invalid feedback text

                            
Looks good!
Looks good!
Please provide a valid username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
Example invalid custom file feedback
Example invalid feedback text

                            

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.

Looks good!
Looks good!
Please provide a valid username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
Example invalid custom file feedback
Example invalid feedback text

                            

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.

Looks good!
Looks good!
Please provide a valid username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.

                            

Inverse Form Validation

Use .bg-dark and .text-white to the card structure to create an inverse form.

Looks good!
Looks good!
Please provide a valid username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
Example invalid custom file feedback
Example invalid feedback text

                        
Looks good!
Looks good!
Please provide a valid username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
Example invalid custom file feedback
Example invalid feedback text

                        
Looks good!
Looks good!
Please provide a valid username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
Example invalid custom file feedback
Example invalid feedback text