Horizontal Forms

Cost Estimation

This is the basic horizontal form with labels on left and cost estimation form is the default position.

Personal Details

First Name:

Last Name:

E-mail:

Contact Number:

Project Requirements

Company:

Interested in:

Budget:

Select File:

Project Brief:

Company Registration

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.

Owner Detail

First Name:

Last Name:

Email:

Mobile:

Company Info

Email:

Website:

Contact Number:

Company Address:

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.

Employee Name:

Project Name:

Date:

Rate Per Hour:

.00

Start Time:

End Time:

Notes:

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 .justify-content-md-center .row classes to center the card as its not full width. User can always change column classes according to his requirements.