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.

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-section class 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-horizontal class 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-left or 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-horizontal class 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.