Form Layouts Documentation

Basic Forms

Basic form labels have inline block styling where form controls are below its label. This is the default bootstrap and most basic style for displaying forms. You can always add more stuff like form sections, form control borders, tooltips, icons, round form controls, square form controls etc..

Refer following links for usage:

Type URL
Classic Basic Form Layout https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/form-layout-basic.html
Material Basic Form Layout https://demos.pixinvent.com/modern-html-admin-template/html/ltr/material-vertical-menu-template/form-layout-basic.html

Horizontal Forms

Horizontal Forms labels have inline styling where form controls are in the same line as its label. Add .form-horizontal class to the form tag to have horizontal form styling. You can always add more stuff like form sections, form control borders, tooltips, icons, round form controls, square form controls etc..

Refer following links for usage:

Type URL
Classic Horizontal Form Layout https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/form-layout-horizontal.html
Material Horizontal Form Layout https://demos.pixinvent.com/modern-html-admin-template/html/ltr/material-vertical-menu-template/form-layout-horizontal.html

Hidden Label Forms

Just add .sr-only class to a label to hide. Assistive technologies such as screen readers will have trouble with your forms if you don’t include a label for every input. For these inline forms, you can hide the labels using the .sr-only class. There are further alternative methods of providing a label for assistive technologies, such as the aria-label, aria-labelledby or title attribute. If none of these are present, assistive technologies may resort to using the placeholder attribute, if present, but note that use of placeholder as a replacement for other labelling methods is not advised. You can always add more stuff like form sections, form control borders, tooltips, icons, round form controls, square form controls etc..

Refer following links for usage:

Type URL
Classic Hidden Labels Form Layout https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/form-layout-hidden-labels.html
Material Hidden Labels Form Layout https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/form-layout-hidden-labels.html

Form Actions

You have 6 options to display form actions. You can always add more stuff like form sections, form control borders, tooltips, icons, round form controls, square form controls etc.. Please follow below table for all form action positions. Just add one of below classes along with .form-action class to position form action buttons.

# Position Classes
1 Top Left .top
2 Top Center .top, .center
3 Top Right .top, .right
4 Bottom Left -
5 Bottom Center .center
6 Bottom Right .right

Refer following links for usage:

Type URL
Classic Form Actions https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/form-layout-form-actions.html
Material Form Actions https://demos.pixinvent.com/modern-html-admin-template/html/ltr/material-vertical-menu-template/form-layout-form-actions.html

Bordered Forms

Add .form-bordered to form tag to add border to a form-group. In our example .form-horizontal is used to show the row separator functionality. You can always add more stuff like form sections, form control borders, tooltips, icons, round form controls, square form controls etc..

Refer following links for usage:

Type URL
Classic Bordered Form Layout https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/form-layout-bordered.html
Material Bordered Form Layout https://demos.pixinvent.com/modern-html-admin-template/html/ltr/material-vertical-menu-template/form-layout-bordered.html

Striped Row Forms

Add .striped-rows to form tag to add striped rows. In our example .form-horizontal and .form-bordered is used to show the striped rows functionality. You can always add more stuff like form sections, form control borders, tooltips, icons, round form controls, square form controls etc..

Refer following links for usage:

Type URL
Classic Stripped Rows Form Layout https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/form-layout-striped-rows.html
Material Stripped Rows Form Layout https://demos.pixinvent.com/modern-html-admin-template/html/ltr/material-vertical-menu-template/form-layout-striped-rows.html