Project Info

This is the basic horizontal form with labels on left and form controls on right in one line. Add .form-horizontal class to the form tag to have horizontal form styling. To define form sections use form-sectionclass with any heading tags.

Personal Info

Requirements

User Profile

This is 2-columns horizontal form with labels on left and form controls on right in one line. Add .form-horizontal class to the form tag to have horizontal form styling. User can also change the border color and background color of the form control. Add border-*class to change border color and bg-*class to change background color of the form control.

About User

Contact Info & Bio

Timesheet

Add .form-horizontalclass to the form tag to have horizontal form styling. This horizontal form shows the use of icons with form controls. Define the position of the icon using has-icon-leftor has-icon-right class. Use icon-*class to define the icon for the form control. See Icons sections for the list of icons you can use.

$
.00

Event Registration

Add .form-horizontalclass to the form tag to have horizontal form styling. This is horizontal form demo with centered card. Here we have used col-md-6 ml-auto classes to center the card as its not full width. User can always change those classes according to width and offset requirements.